@justeattakeaway/pie-breadcrumb 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +114 -3
- package/dist/index.d.ts +47 -0
- package/dist/index.js +121 -58
- package/dist/react.d.ts +47 -0
- package/dist/react.js +5 -2
- package/package.json +4 -4
- package/src/breadcrumb.scss +19 -1
- package/src/defs.ts +19 -1
- package/src/index.ts +88 -17
package/custom-elements.json
CHANGED
|
@@ -11,8 +11,42 @@
|
|
|
11
11
|
{
|
|
12
12
|
"kind": "javascript-module",
|
|
13
13
|
"path": "src/defs.js",
|
|
14
|
-
"declarations": [
|
|
15
|
-
|
|
14
|
+
"declarations": [
|
|
15
|
+
{
|
|
16
|
+
"kind": "variable",
|
|
17
|
+
"name": "variants",
|
|
18
|
+
"type": {
|
|
19
|
+
"text": "['default', 'scrim']"
|
|
20
|
+
},
|
|
21
|
+
"default": "['default', 'scrim']"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "variable",
|
|
25
|
+
"name": "defaultProps",
|
|
26
|
+
"type": {
|
|
27
|
+
"text": "Pick<BreadcrumbProps, 'variant' | 'isCompact'>"
|
|
28
|
+
},
|
|
29
|
+
"default": "{\n variant: 'default',\n isCompact: false,\n}"
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"exports": [
|
|
33
|
+
{
|
|
34
|
+
"kind": "js",
|
|
35
|
+
"name": "variants",
|
|
36
|
+
"declaration": {
|
|
37
|
+
"name": "variants",
|
|
38
|
+
"module": "src/defs.js"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"kind": "js",
|
|
43
|
+
"name": "defaultProps",
|
|
44
|
+
"declaration": {
|
|
45
|
+
"name": "defaultProps",
|
|
46
|
+
"module": "src/defs.js"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
]
|
|
16
50
|
},
|
|
17
51
|
{
|
|
18
52
|
"kind": "javascript-module",
|
|
@@ -33,6 +67,18 @@
|
|
|
33
67
|
"default": "[]",
|
|
34
68
|
"attribute": "items"
|
|
35
69
|
},
|
|
70
|
+
{
|
|
71
|
+
"kind": "field",
|
|
72
|
+
"name": "variant",
|
|
73
|
+
"privacy": "public",
|
|
74
|
+
"attribute": "variant"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"kind": "field",
|
|
78
|
+
"name": "isCompact",
|
|
79
|
+
"privacy": "public",
|
|
80
|
+
"attribute": "isCompact"
|
|
81
|
+
},
|
|
36
82
|
{
|
|
37
83
|
"kind": "method",
|
|
38
84
|
"name": "renderSeparator",
|
|
@@ -59,6 +105,21 @@
|
|
|
59
105
|
],
|
|
60
106
|
"description": "Renders a navigation link for a breadcrumb item."
|
|
61
107
|
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "method",
|
|
110
|
+
"name": "renderLastItem",
|
|
111
|
+
"privacy": "private",
|
|
112
|
+
"parameters": [
|
|
113
|
+
{
|
|
114
|
+
"name": "item",
|
|
115
|
+
"type": {
|
|
116
|
+
"text": "BreadcrumbItem"
|
|
117
|
+
},
|
|
118
|
+
"description": "The breadcrumb item containing label and URL."
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"description": "Renders the last breadcrumb item.\nIt has 250px of max-width. If the label reaches this width the text truncates."
|
|
122
|
+
},
|
|
62
123
|
{
|
|
63
124
|
"kind": "method",
|
|
64
125
|
"name": "renderItem",
|
|
@@ -81,7 +142,43 @@
|
|
|
81
142
|
}
|
|
82
143
|
}
|
|
83
144
|
],
|
|
84
|
-
"description": "Renders an individual breadcrumb item.\nConditionally renders either a clickable link or plain text for the last item."
|
|
145
|
+
"description": "Renders an individual breadcrumb item.\n\nConditionally renders either a clickable link or plain text for the last item."
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"kind": "method",
|
|
149
|
+
"name": "renderDefaultBreadcrumb",
|
|
150
|
+
"privacy": "private",
|
|
151
|
+
"parameters": [
|
|
152
|
+
{
|
|
153
|
+
"name": "items",
|
|
154
|
+
"type": {
|
|
155
|
+
"text": "BreadcrumbProps['items']"
|
|
156
|
+
},
|
|
157
|
+
"description": "Breadcrumb items to render."
|
|
158
|
+
}
|
|
159
|
+
],
|
|
160
|
+
"description": "Renders breadcrumb items using the default variant style."
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"kind": "method",
|
|
164
|
+
"name": "renderCompactBreadcrumbSeparator",
|
|
165
|
+
"privacy": "private",
|
|
166
|
+
"description": "Renders a separator icon specifically for the back variant.\nThe icon direction depends on the RTL (Right-to-Left) setting."
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"kind": "method",
|
|
170
|
+
"name": "renderCompactBreadcrumb",
|
|
171
|
+
"privacy": "private",
|
|
172
|
+
"parameters": [
|
|
173
|
+
{
|
|
174
|
+
"name": "items",
|
|
175
|
+
"type": {
|
|
176
|
+
"text": "BreadcrumbProps['items']"
|
|
177
|
+
},
|
|
178
|
+
"description": "Breadcrumb items to render."
|
|
179
|
+
}
|
|
180
|
+
],
|
|
181
|
+
"description": "Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator."
|
|
85
182
|
},
|
|
86
183
|
{
|
|
87
184
|
"kind": "method",
|
|
@@ -94,6 +191,12 @@
|
|
|
94
191
|
"text": "BreadcrumbProps['items']"
|
|
95
192
|
},
|
|
96
193
|
"description": "Array of breadcrumb items to render."
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"name": "isCompact",
|
|
197
|
+
"type": {
|
|
198
|
+
"text": "BreadcrumbProps['isCompact']"
|
|
199
|
+
}
|
|
97
200
|
}
|
|
98
201
|
],
|
|
99
202
|
"description": "Renders a complete breadcrumb list.\nIterates over breadcrumb items to generate the breadcrumb trail."
|
|
@@ -107,6 +210,14 @@
|
|
|
107
210
|
},
|
|
108
211
|
"default": "[]",
|
|
109
212
|
"fieldName": "items"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "variant",
|
|
216
|
+
"fieldName": "variant"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "isCompact",
|
|
220
|
+
"fieldName": "isCompact"
|
|
110
221
|
}
|
|
111
222
|
],
|
|
112
223
|
"mixins": [
|
package/dist/index.d.ts
CHANGED
|
@@ -11,13 +11,25 @@ export declare type BreadcrumbItem = {
|
|
|
11
11
|
|
|
12
12
|
export declare interface BreadcrumbProps {
|
|
13
13
|
items: BreadcrumbItem[];
|
|
14
|
+
/**
|
|
15
|
+
* Optional variant for styling the breadcrumb component.
|
|
16
|
+
*/
|
|
17
|
+
variant?: typeof variants[number];
|
|
18
|
+
/**
|
|
19
|
+
* Optional property for rendering a compact variation of the breadcrumb.
|
|
20
|
+
*/
|
|
21
|
+
isCompact?: boolean;
|
|
14
22
|
}
|
|
15
23
|
|
|
24
|
+
export declare const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'>;
|
|
25
|
+
|
|
16
26
|
/**
|
|
17
27
|
* @tagname pie-breadcrumb
|
|
18
28
|
*/
|
|
19
29
|
export declare class PieBreadcrumb extends PieBreadcrumb_base implements BreadcrumbProps {
|
|
20
30
|
items: BreadcrumbProps['items'];
|
|
31
|
+
variant: "default" | "scrim" | undefined;
|
|
32
|
+
isCompact: boolean | undefined;
|
|
21
33
|
/**
|
|
22
34
|
* Renders a separator icon between breadcrumb items.
|
|
23
35
|
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
@@ -35,8 +47,18 @@ export declare class PieBreadcrumb extends PieBreadcrumb_base implements Breadcr
|
|
|
35
47
|
* @private
|
|
36
48
|
*/
|
|
37
49
|
private renderNavigationLink;
|
|
50
|
+
/**
|
|
51
|
+
* Renders the last breadcrumb item.
|
|
52
|
+
* It has 250px of max-width. If the label reaches this width the text truncates.
|
|
53
|
+
*
|
|
54
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
55
|
+
*
|
|
56
|
+
* @private
|
|
57
|
+
*/
|
|
58
|
+
private renderLastItem;
|
|
38
59
|
/**
|
|
39
60
|
* Renders an individual breadcrumb item.
|
|
61
|
+
|
|
40
62
|
* Conditionally renders either a clickable link or plain text for the last item.
|
|
41
63
|
*
|
|
42
64
|
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
@@ -45,6 +67,29 @@ export declare class PieBreadcrumb extends PieBreadcrumb_base implements Breadcr
|
|
|
45
67
|
* @private
|
|
46
68
|
*/
|
|
47
69
|
private renderItem;
|
|
70
|
+
/**
|
|
71
|
+
* Renders breadcrumb items using the default variant style.
|
|
72
|
+
*
|
|
73
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
74
|
+
*
|
|
75
|
+
* @private
|
|
76
|
+
*/
|
|
77
|
+
private renderDefaultBreadcrumb;
|
|
78
|
+
/**
|
|
79
|
+
* Renders a separator icon specifically for the back variant.
|
|
80
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
81
|
+
*
|
|
82
|
+
* @private
|
|
83
|
+
*/
|
|
84
|
+
private renderCompactBreadcrumbSeparator;
|
|
85
|
+
/**
|
|
86
|
+
* Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
|
|
87
|
+
*
|
|
88
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
89
|
+
*
|
|
90
|
+
* @private
|
|
91
|
+
*/
|
|
92
|
+
private renderCompactBreadcrumb;
|
|
48
93
|
/**
|
|
49
94
|
* Renders a complete breadcrumb list.
|
|
50
95
|
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
@@ -60,4 +105,6 @@ export declare class PieBreadcrumb extends PieBreadcrumb_base implements Breadcr
|
|
|
60
105
|
|
|
61
106
|
declare const PieBreadcrumb_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
62
107
|
|
|
108
|
+
export declare const variants: readonly ["default", "scrim"];
|
|
109
|
+
|
|
63
110
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,32 +1,30 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { RtlMixin as
|
|
4
|
-
import { classMap as
|
|
1
|
+
import { LitElement as h, html as t, nothing as u, unsafeCSS as f } from "lit";
|
|
2
|
+
import { property as b } from "lit/decorators.js";
|
|
3
|
+
import { RtlMixin as g, validPropertyValues as $, safeCustomElement as y } from "@justeattakeaway/pie-webc-core";
|
|
4
|
+
import { classMap as v } from "lit/directives/class-map.js";
|
|
5
5
|
import "@justeattakeaway/pie-link";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
(
|
|
11
|
-
return r && g(e, t, r), r;
|
|
12
|
-
};
|
|
13
|
-
class m extends b {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments), this.v = "0.2.0";
|
|
8
|
+
const o = class o extends h {
|
|
9
|
+
willUpdate() {
|
|
10
|
+
this.getAttribute("v") || this.setAttribute("v", o.v);
|
|
16
11
|
}
|
|
17
|
-
}
|
|
18
|
-
y([
|
|
19
|
-
p({ type: String, reflect: !0 })
|
|
20
|
-
], m.prototype, "v");
|
|
21
|
-
const x = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-list li{list-style-type:none;display:flex;align-items:center;white-space:nowrap}.c-breadcrumb-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px}";
|
|
22
|
-
var $ = Object.defineProperty, S = (s, e, t, l) => {
|
|
23
|
-
for (var r = void 0, i = s.length - 1, n; i >= 0; i--)
|
|
24
|
-
(n = s[i]) && (r = n(e, t, r) || r);
|
|
25
|
-
return r && $(e, t, r), r;
|
|
26
12
|
};
|
|
27
|
-
|
|
13
|
+
o.v = "0.3.1";
|
|
14
|
+
let m = o;
|
|
15
|
+
const C = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-list li{list-style-type:none;display:flex;align-items:center;white-space:nowrap}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px;color:var(--dt-color-content-subdued)}.c-breadcrumb-list-last-item--scrim{color:var(--dt-color-content-link-light)}.c-breadcrumb-separator{color:var(--dt-color-content-subdued)}.c-breadcrumb-separator--scrim{color:var(--dt-color-content-link-light)}", w = ["default", "scrim"], p = {
|
|
16
|
+
variant: "default",
|
|
17
|
+
isCompact: !1
|
|
18
|
+
};
|
|
19
|
+
var x = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (r, e, a, i) => {
|
|
20
|
+
for (var s = i > 1 ? void 0 : i ? B(e, a) : e, d = r.length - 1, l; d >= 0; d--)
|
|
21
|
+
(l = r[d]) && (s = (i ? l(e, a, s) : l(s)) || s);
|
|
22
|
+
return i && s && x(e, a, s), s;
|
|
23
|
+
};
|
|
24
|
+
const S = "pie-breadcrumb";
|
|
25
|
+
let c = class extends g(m) {
|
|
28
26
|
constructor() {
|
|
29
|
-
super(...arguments), this.items = [];
|
|
27
|
+
super(...arguments), this.items = [], this.variant = p.variant, this.isCompact = p.isCompact;
|
|
30
28
|
}
|
|
31
29
|
/**
|
|
32
30
|
* Renders a separator icon between breadcrumb items.
|
|
@@ -37,13 +35,14 @@ const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
|
37
35
|
* @private
|
|
38
36
|
*/
|
|
39
37
|
renderSeparator() {
|
|
40
|
-
|
|
38
|
+
const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
|
|
39
|
+
return t`
|
|
41
40
|
<li
|
|
42
41
|
role="presentation"
|
|
43
42
|
aria-hidden="true"
|
|
44
|
-
class="
|
|
43
|
+
class="${r}"
|
|
45
44
|
data-test-id="pie-breadcrumb-separator">
|
|
46
|
-
${this.isRTL ?
|
|
45
|
+
${this.isRTL ? t`<icon-chevron-left></icon-chevron-left>` : t`<icon-chevron-right></icon-chevron-right>`}
|
|
47
46
|
</li>
|
|
48
47
|
`;
|
|
49
48
|
}
|
|
@@ -54,32 +53,86 @@ const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
|
54
53
|
*
|
|
55
54
|
* @private
|
|
56
55
|
*/
|
|
57
|
-
renderNavigationLink(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
renderNavigationLink(r) {
|
|
57
|
+
const e = this.variant === "scrim" ? "inverse" : "default";
|
|
58
|
+
return t`
|
|
59
|
+
<pie-link variant="${e}" isStandalone underline="reversed" isBold href="${r.href}">
|
|
60
|
+
${r.label}
|
|
61
61
|
</pie-link>
|
|
62
62
|
`;
|
|
63
63
|
}
|
|
64
64
|
/**
|
|
65
|
-
* Renders
|
|
66
|
-
*
|
|
65
|
+
* Renders the last breadcrumb item.
|
|
66
|
+
* It has 250px of max-width. If the label reaches this width the text truncates.
|
|
67
|
+
*
|
|
68
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
69
|
+
*
|
|
70
|
+
* @private
|
|
71
|
+
*/
|
|
72
|
+
renderLastItem(r) {
|
|
73
|
+
const e = {
|
|
74
|
+
"c-breadcrumb-list-last-item": !0,
|
|
75
|
+
"c-breadcrumb-list-last-item--scrim": this.variant === "scrim"
|
|
76
|
+
};
|
|
77
|
+
return t`<span class="${v(e)}">${r.label}</span>`;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Renders an individual breadcrumb item.
|
|
81
|
+
|
|
82
|
+
* Conditionally renders either a clickable link or plain text for the last item.
|
|
83
|
+
*
|
|
84
|
+
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
85
|
+
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
86
|
+
*
|
|
87
|
+
* @private
|
|
88
|
+
*/
|
|
89
|
+
renderItem(r, e = !1) {
|
|
90
|
+
return t`
|
|
91
|
+
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
92
|
+
${e ? this.renderLastItem(r) : this.renderNavigationLink(r)}
|
|
93
|
+
</li>
|
|
94
|
+
${e ? u : this.renderSeparator()}
|
|
95
|
+
`;
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Renders breadcrumb items using the default variant style.
|
|
99
|
+
*
|
|
100
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
101
|
+
*
|
|
102
|
+
* @private
|
|
103
|
+
*/
|
|
104
|
+
renderDefaultBreadcrumb(r) {
|
|
105
|
+
const e = r.length - 1;
|
|
106
|
+
return t`${r.map((a, i) => this.renderItem(a, e <= i))}`;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Renders a separator icon specifically for the back variant.
|
|
110
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
111
|
+
*
|
|
112
|
+
* @private
|
|
113
|
+
*/
|
|
114
|
+
renderCompactBreadcrumbSeparator() {
|
|
115
|
+
const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
|
|
116
|
+
return t`
|
|
117
|
+
<li role="presentation" aria-hidden="true" class="${r}" data-test-id="pie-breadcrumb-separator">
|
|
118
|
+
${this.isRTL ? t`<icon-chevron-right></icon-chevron-right>` : t`<icon-chevron-left></icon-chevron-left>`}
|
|
119
|
+
</li>
|
|
120
|
+
`;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
|
|
67
124
|
*
|
|
68
|
-
* @param {
|
|
69
|
-
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
125
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
70
126
|
*
|
|
71
127
|
* @private
|
|
72
128
|
*/
|
|
73
|
-
|
|
74
|
-
|
|
129
|
+
renderCompactBreadcrumb(r) {
|
|
130
|
+
const e = r[r.length - 1];
|
|
131
|
+
return t`
|
|
132
|
+
${this.renderCompactBreadcrumbSeparator()}
|
|
75
133
|
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
76
|
-
${
|
|
77
|
-
class="c-breadcrumb-list-last-item"
|
|
78
|
-
data-test-id="pie-breadcrumb-last-item">
|
|
79
|
-
${e.label}
|
|
80
|
-
</span>` : this.renderNavigationLink(e)}
|
|
134
|
+
${this.renderNavigationLink(e)}
|
|
81
135
|
</li>
|
|
82
|
-
${t ? c : this.renderSeparator()}
|
|
83
136
|
`;
|
|
84
137
|
}
|
|
85
138
|
/**
|
|
@@ -90,33 +143,43 @@ const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
|
90
143
|
*
|
|
91
144
|
* @private
|
|
92
145
|
*/
|
|
93
|
-
renderBreadcrumbItems(e) {
|
|
94
|
-
|
|
95
|
-
return a`
|
|
146
|
+
renderBreadcrumbItems(r, e) {
|
|
147
|
+
return t`
|
|
96
148
|
<ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
|
|
97
|
-
${e.
|
|
149
|
+
${e ? this.renderCompactBreadcrumb(r) : this.renderDefaultBreadcrumb(r)}
|
|
98
150
|
</ol>
|
|
99
151
|
`;
|
|
100
152
|
}
|
|
101
153
|
render() {
|
|
102
|
-
const { items: e } = this;
|
|
103
|
-
return
|
|
154
|
+
const { items: r, variant: e, isCompact: a } = this;
|
|
155
|
+
return t`
|
|
104
156
|
<nav
|
|
105
157
|
aria-label="breadcrumb"
|
|
106
158
|
data-test-id="pie-breadcrumb"
|
|
107
|
-
class="${
|
|
108
|
-
"c-breadcrumb": !0
|
|
159
|
+
class="${v({
|
|
160
|
+
"c-breadcrumb": !0,
|
|
161
|
+
"c-breadcrumb--scrim": e === "scrim"
|
|
109
162
|
})}">
|
|
110
|
-
|
|
163
|
+
${r ? this.renderBreadcrumbItems(r, a) : u}
|
|
111
164
|
</nav>`;
|
|
112
165
|
}
|
|
113
166
|
};
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
167
|
+
c.styles = f(C);
|
|
168
|
+
n([
|
|
169
|
+
b({ type: Array })
|
|
170
|
+
], c.prototype, "items", 2);
|
|
171
|
+
n([
|
|
172
|
+
b({ type: String }),
|
|
173
|
+
$(S, w, p.variant)
|
|
174
|
+
], c.prototype, "variant", 2);
|
|
175
|
+
n([
|
|
176
|
+
b({ type: Boolean })
|
|
177
|
+
], c.prototype, "isCompact", 2);
|
|
178
|
+
c = n([
|
|
179
|
+
y("pie-breadcrumb")
|
|
180
|
+
], c);
|
|
120
181
|
export {
|
|
121
|
-
|
|
182
|
+
c as PieBreadcrumb,
|
|
183
|
+
p as defaultProps,
|
|
184
|
+
w as variants
|
|
122
185
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -12,8 +12,18 @@ export declare type BreadcrumbItem = {
|
|
|
12
12
|
|
|
13
13
|
export declare interface BreadcrumbProps {
|
|
14
14
|
items: BreadcrumbItem[];
|
|
15
|
+
/**
|
|
16
|
+
* Optional variant for styling the breadcrumb component.
|
|
17
|
+
*/
|
|
18
|
+
variant?: typeof variants[number];
|
|
19
|
+
/**
|
|
20
|
+
* Optional property for rendering a compact variation of the breadcrumb.
|
|
21
|
+
*/
|
|
22
|
+
isCompact?: boolean;
|
|
15
23
|
}
|
|
16
24
|
|
|
25
|
+
export declare const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'>;
|
|
26
|
+
|
|
17
27
|
export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<PieBreadcrumb_2> & ReactBaseType>;
|
|
18
28
|
|
|
19
29
|
/**
|
|
@@ -21,6 +31,8 @@ export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<Breadcrumb
|
|
|
21
31
|
*/
|
|
22
32
|
declare class PieBreadcrumb_2 extends PieBreadcrumb_base implements BreadcrumbProps {
|
|
23
33
|
items: BreadcrumbProps['items'];
|
|
34
|
+
variant: "default" | "scrim" | undefined;
|
|
35
|
+
isCompact: boolean | undefined;
|
|
24
36
|
/**
|
|
25
37
|
* Renders a separator icon between breadcrumb items.
|
|
26
38
|
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
@@ -38,8 +50,18 @@ declare class PieBreadcrumb_2 extends PieBreadcrumb_base implements BreadcrumbPr
|
|
|
38
50
|
* @private
|
|
39
51
|
*/
|
|
40
52
|
private renderNavigationLink;
|
|
53
|
+
/**
|
|
54
|
+
* Renders the last breadcrumb item.
|
|
55
|
+
* It has 250px of max-width. If the label reaches this width the text truncates.
|
|
56
|
+
*
|
|
57
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
58
|
+
*
|
|
59
|
+
* @private
|
|
60
|
+
*/
|
|
61
|
+
private renderLastItem;
|
|
41
62
|
/**
|
|
42
63
|
* Renders an individual breadcrumb item.
|
|
64
|
+
|
|
43
65
|
* Conditionally renders either a clickable link or plain text for the last item.
|
|
44
66
|
*
|
|
45
67
|
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
@@ -48,6 +70,29 @@ declare class PieBreadcrumb_2 extends PieBreadcrumb_base implements BreadcrumbPr
|
|
|
48
70
|
* @private
|
|
49
71
|
*/
|
|
50
72
|
private renderItem;
|
|
73
|
+
/**
|
|
74
|
+
* Renders breadcrumb items using the default variant style.
|
|
75
|
+
*
|
|
76
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
77
|
+
*
|
|
78
|
+
* @private
|
|
79
|
+
*/
|
|
80
|
+
private renderDefaultBreadcrumb;
|
|
81
|
+
/**
|
|
82
|
+
* Renders a separator icon specifically for the back variant.
|
|
83
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
84
|
+
*
|
|
85
|
+
* @private
|
|
86
|
+
*/
|
|
87
|
+
private renderCompactBreadcrumbSeparator;
|
|
88
|
+
/**
|
|
89
|
+
* Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
|
|
90
|
+
*
|
|
91
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
92
|
+
*
|
|
93
|
+
* @private
|
|
94
|
+
*/
|
|
95
|
+
private renderCompactBreadcrumb;
|
|
51
96
|
/**
|
|
52
97
|
* Renders a complete breadcrumb list.
|
|
53
98
|
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
@@ -65,4 +110,6 @@ declare const PieBreadcrumb_base: GenericConstructor<RTLInterface> & typeof PieE
|
|
|
65
110
|
|
|
66
111
|
declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
|
|
67
112
|
|
|
113
|
+
export declare const variants: readonly ["default", "scrim"];
|
|
114
|
+
|
|
68
115
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { createComponent as r } from "@lit/react";
|
|
3
3
|
import { PieBreadcrumb as a } from "./index.js";
|
|
4
|
+
import { defaultProps as p, variants as d } from "./index.js";
|
|
4
5
|
const m = r({
|
|
5
6
|
displayName: "PieBreadcrumb",
|
|
6
7
|
elementClass: a,
|
|
7
8
|
react: e,
|
|
8
9
|
tagName: "pie-breadcrumb",
|
|
9
10
|
events: {}
|
|
10
|
-
}),
|
|
11
|
+
}), c = m;
|
|
11
12
|
export {
|
|
12
|
-
|
|
13
|
+
c as PieBreadcrumb,
|
|
14
|
+
p as defaultProps,
|
|
15
|
+
d as variants
|
|
13
16
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-breadcrumb",
|
|
3
3
|
"description": "PIE Design System Breadcrumb built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
"license": "Apache-2.0",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.20.
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
37
37
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
|
-
"@justeattakeaway/pie-monorepo-utils": "0.5.
|
|
38
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-webc-core": "0.26.0"
|
|
43
43
|
},
|
|
44
44
|
"volta": {
|
|
45
45
|
"extends": "../../../package.json"
|
package/src/breadcrumb.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.c-breadcrumb {
|
|
4
4
|
--breadcrumb-background-color: var(--dt-color-transparent);
|
|
5
|
-
|
|
5
|
+
background-color: var(--breadcrumb-background-color);
|
|
6
6
|
padding: var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d);
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -22,8 +22,26 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
.c-breadcrumb--scrim {
|
|
26
|
+
--breadcrumb-background-color: var(--dt-color-overlay);
|
|
27
|
+
border-radius: var(--dt-radius-rounded-e);
|
|
28
|
+
}
|
|
29
|
+
|
|
25
30
|
.c-breadcrumb-list-last-item {
|
|
26
31
|
overflow: hidden;
|
|
27
32
|
text-overflow: ellipsis;
|
|
28
33
|
max-width: 250px;
|
|
34
|
+
color: var(--dt-color-content-subdued);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.c-breadcrumb-list-last-item--scrim {
|
|
38
|
+
color: var(--dt-color-content-link-light);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.c-breadcrumb-separator {
|
|
42
|
+
color: var(--dt-color-content-subdued);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.c-breadcrumb-separator--scrim {
|
|
46
|
+
color: var(--dt-color-content-link-light);
|
|
29
47
|
}
|
package/src/defs.ts
CHANGED
|
@@ -1,8 +1,26 @@
|
|
|
1
|
+
export const variants = ['default', 'scrim'] as const;
|
|
2
|
+
|
|
1
3
|
export type BreadcrumbItem = {
|
|
2
4
|
label: string;
|
|
3
5
|
href: string;
|
|
4
6
|
}
|
|
5
7
|
|
|
6
8
|
export interface BreadcrumbProps {
|
|
7
|
-
items: BreadcrumbItem[]
|
|
9
|
+
items: BreadcrumbItem[];
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Optional variant for styling the breadcrumb component.
|
|
13
|
+
*/
|
|
14
|
+
variant?: typeof variants[number];
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Optional property for rendering a compact variation of the breadcrumb.
|
|
18
|
+
*/
|
|
19
|
+
isCompact?: boolean;
|
|
8
20
|
}
|
|
21
|
+
|
|
22
|
+
export const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'> = {
|
|
23
|
+
variant: 'default',
|
|
24
|
+
isCompact: false,
|
|
25
|
+
};
|
|
26
|
+
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { html, nothing, unsafeCSS } from 'lit';
|
|
2
2
|
import { property } from 'lit/decorators.js';
|
|
3
|
-
import { RtlMixin,
|
|
3
|
+
import { RtlMixin, safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
-
|
|
6
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
7
6
|
|
|
8
7
|
import '@justeattakeaway/pie-link';
|
|
@@ -13,6 +12,8 @@ import styles from './breadcrumb.scss?inline';
|
|
|
13
12
|
import {
|
|
14
13
|
type BreadcrumbProps,
|
|
15
14
|
type BreadcrumbItem,
|
|
15
|
+
variants,
|
|
16
|
+
defaultProps,
|
|
16
17
|
} from './defs';
|
|
17
18
|
|
|
18
19
|
const componentSelector = 'pie-breadcrumb';
|
|
@@ -23,10 +24,18 @@ export * from './defs';
|
|
|
23
24
|
/**
|
|
24
25
|
* @tagname pie-breadcrumb
|
|
25
26
|
*/
|
|
27
|
+
@safeCustomElement('pie-breadcrumb')
|
|
26
28
|
export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbProps {
|
|
27
29
|
@property({ type: Array })
|
|
28
30
|
public items: BreadcrumbProps['items'] = [];
|
|
29
31
|
|
|
32
|
+
@property({ type: String })
|
|
33
|
+
@validPropertyValues(componentSelector, variants, defaultProps.variant)
|
|
34
|
+
public variant = defaultProps.variant;
|
|
35
|
+
|
|
36
|
+
@property({ type: Boolean })
|
|
37
|
+
public isCompact = defaultProps.isCompact;
|
|
38
|
+
|
|
30
39
|
/**
|
|
31
40
|
* Renders a separator icon between breadcrumb items.
|
|
32
41
|
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
@@ -36,11 +45,13 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
36
45
|
* @private
|
|
37
46
|
*/
|
|
38
47
|
private renderSeparator () {
|
|
48
|
+
const separatorVariant = this.variant === 'scrim' ? 'c-breadcrumb-separator--scrim' : 'c-breadcrumb-separator';
|
|
49
|
+
|
|
39
50
|
return html`
|
|
40
51
|
<li
|
|
41
52
|
role="presentation"
|
|
42
53
|
aria-hidden="true"
|
|
43
|
-
class="
|
|
54
|
+
class="${separatorVariant}"
|
|
44
55
|
data-test-id="pie-breadcrumb-separator">
|
|
45
56
|
${this.isRTL ? html`<icon-chevron-left></icon-chevron-left>` : html`<icon-chevron-right></icon-chevron-right>`}
|
|
46
57
|
</li>
|
|
@@ -55,15 +66,35 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
55
66
|
* @private
|
|
56
67
|
*/
|
|
57
68
|
private renderNavigationLink (item: BreadcrumbItem) {
|
|
69
|
+
const linkVariant = this.variant === 'scrim' ? 'inverse' : 'default';
|
|
70
|
+
|
|
58
71
|
return html`
|
|
59
|
-
<pie-link
|
|
72
|
+
<pie-link variant="${linkVariant}" isStandalone underline="reversed" isBold href="${item.href}">
|
|
60
73
|
${item.label}
|
|
61
74
|
</pie-link>
|
|
62
75
|
`;
|
|
63
76
|
}
|
|
64
77
|
|
|
78
|
+
/**
|
|
79
|
+
* Renders the last breadcrumb item.
|
|
80
|
+
* It has 250px of max-width. If the label reaches this width the text truncates.
|
|
81
|
+
*
|
|
82
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
83
|
+
*
|
|
84
|
+
* @private
|
|
85
|
+
*/
|
|
86
|
+
private renderLastItem (item: BreadcrumbItem) {
|
|
87
|
+
const wrapperClasses = {
|
|
88
|
+
'c-breadcrumb-list-last-item': true,
|
|
89
|
+
'c-breadcrumb-list-last-item--scrim': this.variant === 'scrim',
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
return html`<span class="${classMap(wrapperClasses)}">${item.label}</span>`;
|
|
93
|
+
}
|
|
94
|
+
|
|
65
95
|
/**
|
|
66
96
|
* Renders an individual breadcrumb item.
|
|
97
|
+
|
|
67
98
|
* Conditionally renders either a clickable link or plain text for the last item.
|
|
68
99
|
*
|
|
69
100
|
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
@@ -76,11 +107,7 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
76
107
|
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
77
108
|
${
|
|
78
109
|
isLastItem
|
|
79
|
-
?
|
|
80
|
-
class="c-breadcrumb-list-last-item"
|
|
81
|
-
data-test-id="pie-breadcrumb-last-item">
|
|
82
|
-
${item.label}
|
|
83
|
-
</span>`
|
|
110
|
+
? this.renderLastItem(item)
|
|
84
111
|
: this.renderNavigationLink(item)
|
|
85
112
|
}
|
|
86
113
|
</li>
|
|
@@ -88,6 +115,53 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
88
115
|
`;
|
|
89
116
|
}
|
|
90
117
|
|
|
118
|
+
/**
|
|
119
|
+
* Renders breadcrumb items using the default variant style.
|
|
120
|
+
*
|
|
121
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
122
|
+
*
|
|
123
|
+
* @private
|
|
124
|
+
*/
|
|
125
|
+
private renderDefaultBreadcrumb (items: BreadcrumbProps['items']) {
|
|
126
|
+
const numberOfSeparators = items.length - 1;
|
|
127
|
+
|
|
128
|
+
return html`${items.map((item, index) => this.renderItem(item, numberOfSeparators <= index))}`;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Renders a separator icon specifically for the back variant.
|
|
133
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
134
|
+
*
|
|
135
|
+
* @private
|
|
136
|
+
*/
|
|
137
|
+
private renderCompactBreadcrumbSeparator () {
|
|
138
|
+
const separatorVariant = this.variant === 'scrim' ? 'c-breadcrumb-separator--scrim' : 'c-breadcrumb-separator';
|
|
139
|
+
|
|
140
|
+
return html`
|
|
141
|
+
<li role="presentation" aria-hidden="true" class="${separatorVariant}" data-test-id="pie-breadcrumb-separator">
|
|
142
|
+
${this.isRTL ? html`<icon-chevron-right></icon-chevron-right>` : html`<icon-chevron-left></icon-chevron-left>`}
|
|
143
|
+
</li>
|
|
144
|
+
`;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
|
|
149
|
+
*
|
|
150
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
151
|
+
*
|
|
152
|
+
* @private
|
|
153
|
+
*/
|
|
154
|
+
private renderCompactBreadcrumb (items: BreadcrumbProps['items']) {
|
|
155
|
+
const lastItem = items[items.length - 1];
|
|
156
|
+
|
|
157
|
+
return html`
|
|
158
|
+
${this.renderCompactBreadcrumbSeparator()}
|
|
159
|
+
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
160
|
+
${this.renderNavigationLink(lastItem)}
|
|
161
|
+
</li>
|
|
162
|
+
`;
|
|
163
|
+
}
|
|
164
|
+
|
|
91
165
|
/**
|
|
92
166
|
* Renders a complete breadcrumb list.
|
|
93
167
|
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
@@ -96,21 +170,20 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
96
170
|
*
|
|
97
171
|
* @private
|
|
98
172
|
*/
|
|
99
|
-
private renderBreadcrumbItems (items: BreadcrumbProps['items']) {
|
|
100
|
-
const numberOfSeparators = items.length - 1;
|
|
101
|
-
|
|
173
|
+
private renderBreadcrumbItems (items: BreadcrumbProps['items'], isCompact: BreadcrumbProps['isCompact']) {
|
|
102
174
|
return html`
|
|
103
175
|
<ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
|
|
104
|
-
${
|
|
176
|
+
${isCompact ? this.renderCompactBreadcrumb(items) : this.renderDefaultBreadcrumb(items)}
|
|
105
177
|
</ol>
|
|
106
178
|
`;
|
|
107
179
|
}
|
|
108
180
|
|
|
109
181
|
render () {
|
|
110
|
-
const { items } = this;
|
|
182
|
+
const { items, variant, isCompact } = this;
|
|
111
183
|
|
|
112
184
|
const componentWrapperClasses = {
|
|
113
185
|
'c-breadcrumb': true,
|
|
186
|
+
'c-breadcrumb--scrim': variant === 'scrim',
|
|
114
187
|
};
|
|
115
188
|
|
|
116
189
|
return html`
|
|
@@ -118,7 +191,7 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
118
191
|
aria-label="breadcrumb"
|
|
119
192
|
data-test-id="pie-breadcrumb"
|
|
120
193
|
class="${classMap(componentWrapperClasses)}">
|
|
121
|
-
|
|
194
|
+
${items ? this.renderBreadcrumbItems(items, isCompact) : nothing}
|
|
122
195
|
</nav>`;
|
|
123
196
|
}
|
|
124
197
|
|
|
@@ -126,8 +199,6 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
126
199
|
static styles = unsafeCSS(styles);
|
|
127
200
|
}
|
|
128
201
|
|
|
129
|
-
defineCustomElement(componentSelector, PieBreadcrumb);
|
|
130
|
-
|
|
131
202
|
declare global {
|
|
132
203
|
interface HTMLElementTagNameMap {
|
|
133
204
|
[componentSelector]: PieBreadcrumb;
|