Skip to content

Commit 5da216b

Browse files
jpzwartejpzwarte
authored
New breadcrumbs component (#984)
1 parent 89d6d7f commit 5da216b

File tree

114 files changed

+2066
-440
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+2066
-440
lines changed

‎.changeset/cold-crews-heal.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sl-design-system/breadcrumbs': patch
3+
---
4+
5+
New breadcrumbs component

‎.changeset/smart-hotels-complain.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sl-design-system/locales': patch
3+
---
4+
5+
Update locales

‎.changeset/two-seals-swim.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@sl-design-system/popover': patch
3+
'@sl-design-system/tooltip': patch
4+
'@sl-design-system/shared': patch
5+
'@sl-design-system/menu': patch
6+
---
7+
8+
Change `AnchorController` to use the arrow positioning of floating-ui

‎packages/components/breadcrumbs/.eslintrc.cjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
parserOptions: {
3+
tsconfigRootDir: __dirname,
4+
project: [
5+
'tsconfig.json'
6+
]
7+
}
8+
};

‎packages/components/breadcrumbs/custom-elements.json‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
{
2+
"schemaVersion": "1.0.0",
3+
"readme": "",
4+
"modules": [
5+
{
6+
"kind": "javascript-module",
7+
"path": "index.ts",
8+
"declarations": [],
9+
"exports": [
10+
{
11+
"kind": "js",
12+
"name": "*",
13+
"declaration": {
14+
"name": "*",
15+
"package": "./src/breadcrumbs.js"
16+
}
17+
}
18+
]
19+
},
20+
{
21+
"kind": "javascript-module",
22+
"path": "register.ts",
23+
"declarations": [],
24+
"exports": [
25+
{
26+
"kind": "custom-element-definition",
27+
"name": "sl-breadcrumbs",
28+
"declaration": {
29+
"name": "Breadcrumbs",
30+
"module": "/src/breadcrumbs.js"
31+
}
32+
}
33+
]
34+
},
35+
{
36+
"kind": "javascript-module",
37+
"path": "src/breadcrumbs.ts",
38+
"declarations": [
39+
{
40+
"kind": "class",
41+
"description": "A component to display a breadcrumb trail.",
42+
"name": "Breadcrumbs",
43+
"slots": [
44+
{
45+
"description": "The breadcrumbs to display.",
46+
"name": "default"
47+
}
48+
],
49+
"members": [
50+
{
51+
"kind": "field",
52+
"name": "breadcrumbs",
53+
"type": {
54+
"text": "Breadcrumb[]"
55+
},
56+
"default": "[]",
57+
"description": "The slotted breadcrumbs."
58+
},
59+
{
60+
"kind": "field",
61+
"name": "collapseThreshold",
62+
"default": "3",
63+
"description": "The threshold for when breadcrumbs should be collapsed into a menu.",
64+
"type": {
65+
"text": "number"
66+
}
67+
},
68+
{
69+
"kind": "field",
70+
"name": "homeUrl",
71+
"type": {
72+
"text": "string"
73+
},
74+
"static": true,
75+
"default": "'/'",
76+
"description": "The url for the home link, defaults to the root url.\n\nBy changing this static property you can change the default value for\nall future instances of the component. Changing the static property\nwon't affect already created instances.",
77+
"attribute": "home-url"
78+
},
79+
{
80+
"kind": "field",
81+
"name": "homeUrl",
82+
"description": "The url for the home link, defaults to the root url.\n\nIf you want to change the default value for all future instances of the component,\nyou can change the static property. If you want to change the property of an already\ncreated instance, you need to change this property."
83+
},
84+
{
85+
"kind": "field",
86+
"name": "noHome",
87+
"type": {
88+
"text": "boolean"
89+
},
90+
"static": true,
91+
"default": "false",
92+
"description": "When true doesn't show a home link as the first breadcrumb.\n\nBy changing this static property you can change the default value for\nall future instances of the component. Changing the static property\nwon't affect already created instances.",
93+
"attribute": "no-home"
94+
},
95+
{
96+
"kind": "field",
97+
"name": "noHome",
98+
"description": "When true doesn't show a home link as the first breadcrumb.\n\nIf you want to change the default value for all future instances of the component,\nyou can change the static property. If you want to change the property of an already\ncreated instance, you need to change this property."
99+
}
100+
],
101+
"attributes": [
102+
{
103+
"name": "home-url",
104+
"type": {
105+
"text": "string"
106+
},
107+
"default": "'/'",
108+
"description": "The url for the home link, defaults to the root url.\n\nBy changing this static property you can change the default value for\nall future instances of the component. Changing the static property\nwon't affect already created instances.",
109+
"fieldName": "homeUrl"
110+
},
111+
{
112+
"name": "no-home",
113+
"type": {
114+
"text": "boolean"
115+
},
116+
"default": "false",
117+
"description": "When true doesn't show a home link as the first breadcrumb.\n\nBy changing this static property you can change the default value for\nall future instances of the component. Changing the static property\nwon't affect already created instances.",
118+
"fieldName": "noHome"
119+
}
120+
],
121+
"mixins": [
122+
{
123+
"name": "ScopedElementsMixin",
124+
"package": "@open-wc/scoped-elements/lit-element.js"
125+
}
126+
],
127+
"superclass": {
128+
"name": "LitElement",
129+
"package": "lit"
130+
},
131+
"tagName": "sl-breadcrumbs",
132+
"customElement": true,
133+
"methods": [
134+
{
135+
"kind": "method",
136+
"name": "#onSlotchange",
137+
"return": {
138+
"type": {
139+
"text": "void"
140+
}
141+
},
142+
"parameters": [
143+
{
144+
"name": "event",
145+
"type": {
146+
"text": "Event & { target: HTMLSlotElement }"
147+
}
148+
}
149+
]
150+
},
151+
{
152+
"kind": "method",
153+
"name": "#update",
154+
"return": {
155+
"type": {
156+
"text": "void"
157+
}
158+
}
159+
}
160+
],
161+
"fields": [
162+
{
163+
"kind": "field",
164+
"name": "scopedElements",
165+
"type": {
166+
"text": "ScopedElementsMap"
167+
},
168+
"static": true,
169+
"privacy": "private",
170+
"readonly": true
171+
},
172+
{
173+
"kind": "field",
174+
"name": "#observer",
175+
"privacy": "private",
176+
"default": "new ResizeObserver(() => this.#update())",
177+
"description": "Observe changes in size, so we can check whether we need to show tooltips\nfor truncated links."
178+
},
179+
{
180+
"kind": "field",
181+
"name": "breadcrumbs",
182+
"type": {
183+
"text": "Breadcrumb[]"
184+
},
185+
"default": "[]",
186+
"description": "The slotted breadcrumbs."
187+
},
188+
{
189+
"kind": "field",
190+
"name": "collapseThreshold",
191+
"default": "3",
192+
"description": "The threshold for when breadcrumbs should be collapsed into a menu.",
193+
"type": {
194+
"text": "number"
195+
}
196+
},
197+
{
198+
"kind": "field",
199+
"name": "homeUrl",
200+
"description": "The url for the home link, defaults to the root url.\n\nIf you want to change the default value for all future instances of the component,\nyou can change the static property. If you want to change the property of an already\ncreated instance, you need to change this property."
201+
},
202+
{
203+
"kind": "field",
204+
"name": "noHome",
205+
"description": "When true doesn't show a home link as the first breadcrumb.\n\nIf you want to change the default value for all future instances of the component,\nyou can change the static property. If you want to change the property of an already\ncreated instance, you need to change this property."
206+
}
207+
]
208+
}
209+
],
210+
"exports": [
211+
{
212+
"kind": "js",
213+
"name": "Breadcrumbs",
214+
"declaration": {
215+
"name": "Breadcrumbs",
216+
"module": "src/breadcrumbs.ts"
217+
}
218+
}
219+
]
220+
}
221+
]
222+
}

‎packages/components/breadcrumbs/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src/breadcrumbs.js';

‎packages/components/breadcrumbs/package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "@sl-design-system/breadcrumbs",
3+
"version": "0.0.0",
4+
"description": "Breadcrumbs component for the SL Design System",
5+
"license": "Apache-2.0",
6+
"publishConfig": {
7+
"registry": "https://npm.pkg.github.com"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/sl-design-system/components.git",
12+
"directory": "packages/components/breadcrumbs"
13+
},
14+
"homepage": "https://sanomalearning.design/components/breadcrumbs",
15+
"bugs": {
16+
"url": "https://github.com/sl-design-system/components/issues"
17+
},
18+
"type": "module",
19+
"main": "./index.js",
20+
"module": "./index.js",
21+
"types": "./index.d.ts",
22+
"customElements": "custom-elements.json",
23+
"exports": {
24+
".": "./index.js",
25+
"./package.json": "./package.json",
26+
"./register.js": "./register.js"
27+
},
28+
"files": [
29+
"**/*.d.ts",
30+
"**/*.js",
31+
"**/*.js.map",
32+
"custom-elements.json"
33+
],
34+
"sideEffects": [
35+
"register.js"
36+
],
37+
"scripts": {
38+
"test": "echo \"Error: run tests from monorepo root.\" && exit 1"
39+
},
40+
"dependencies": {
41+
"@lit/localize": "^0.12.1",
42+
"@open-wc/scoped-elements": "^3.0.5",
43+
"@sl-design-system/icon": "0.0.7",
44+
"@sl-design-system/menu": "0.0.1",
45+
"@sl-design-system/tooltip": "0.0.18",
46+
"lit": "^3.1.2"
47+
}
48+
}

‎packages/components/breadcrumbs/register.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Breadcrumbs } from './src/breadcrumbs.js';
2+
3+
customElements.define('sl-breadcrumbs', Breadcrumbs);
4+
5+
declare global {
6+
interface HTMLElementTagNameMap {
7+
'sl-breadcrumbs': Breadcrumbs;
8+
}
9+
}

‎packages/components/breadcrumbs/src/breadcrumbs.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
$md-breakpoint: 600px;
2+
3+
:host {
4+
--_gap: 0.25rem;
5+
--_link-gap: 0.25rem;
6+
--_link-decoration: underline;
7+
--_link-padding-block: 0.375rem;
8+
--_link-padding-inline: 0.5rem;
9+
--_link-underline-offset: 2px;
10+
--_tooltip-max-inline-size: min(18rem, 50vw);
11+
}
12+
13+
:host {
14+
align-items: center;
15+
display: flex;
16+
gap: var(--_gap);
17+
}
18+
19+
a,
20+
sl-icon,
21+
::slotted(sl-icon) {
22+
flex-shrink: 0;
23+
}
24+
25+
a,
26+
::slotted(a),
27+
::slotted(:last-child) {
28+
padding-block: var(--_link-padding-block);
29+
padding-inline: var(--_link-padding-inline);
30+
}
31+
32+
a,
33+
::slotted(a) {
34+
text-decoration: var(--_link-decoration);
35+
text-underline-offset: var(--_link-underline-offset, auto);
36+
}
37+
38+
a {
39+
align-items: center;
40+
display: inline-flex;
41+
gap: var(--_link-gap);
42+
43+
@media (width <= $md-breakpoint) {
44+
padding-block: var(--_link-padding-inline);
45+
}
46+
}
47+
48+
::slotted(*) {
49+
display: block;
50+
overflow-x: clip;
51+
overflow-y: visible;
52+
text-overflow: ellipsis;
53+
white-space: nowrap;
54+
}
55+
56+
// If there are more than 3 items, hide all items except the last 3
57+
// items. We multiply by 2 because of the icons in between the items.
58+
// Note that we cannot use CSS custom properties here, so the value
59+
// needs to be hardcoded.
60+
::slotted(:not(:nth-last-child(-n + 6))) {
61+
display: none;
62+
}
63+
64+
// On mobile, only show the last 2 items
65+
@media (width <= $md-breakpoint) {
66+
::slotted(:not(:nth-last-child(-n + 4))) {
67+
display: none;
68+
}
69+
}
70+
71+
sl-tooltip {
72+
max-inline-size: var(--_tooltip-max-inline-size) !important;
73+
}

0 commit comments

Comments
 (0)