@justeattakeaway/pie-breadcrumb 0.2.0 → 0.3.0
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 +116 -49
- package/dist/react.d.ts +47 -0
- package/dist/react.js +5 -2
- package/package.json +1 -1
- package/src/breadcrumb.scss +19 -1
- package/src/defs.ts +19 -1
- package/src/index.ts +87 -14
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,35 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { RtlMixin as
|
|
4
|
-
import { classMap as
|
|
1
|
+
import { LitElement as f, html as a, nothing as u, unsafeCSS as g } from "lit";
|
|
2
|
+
import { property as d } from "lit/decorators.js";
|
|
3
|
+
import { RtlMixin as $, validPropertyValues as y, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
|
|
4
|
+
import { classMap as b } 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
|
-
var
|
|
9
|
-
for (var
|
|
10
|
-
(
|
|
11
|
-
return
|
|
8
|
+
var k = Object.defineProperty, x = (s, r, e, o) => {
|
|
9
|
+
for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
|
|
10
|
+
(c = s[i]) && (t = c(r, e, t) || t);
|
|
11
|
+
return t && k(r, e, t), t;
|
|
12
12
|
};
|
|
13
|
-
class
|
|
13
|
+
class v extends f {
|
|
14
14
|
constructor() {
|
|
15
|
-
super(...arguments), this.v = "0.
|
|
15
|
+
super(...arguments), this.v = "0.3.0";
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
],
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
(n = s[i]) && (r = n(e, t, r) || r);
|
|
25
|
-
return r && $(e, t, r), r;
|
|
18
|
+
x([
|
|
19
|
+
d({ type: String, reflect: !0 })
|
|
20
|
+
], v.prototype, "v");
|
|
21
|
+
const S = "*,*: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"], l = {
|
|
22
|
+
variant: "default",
|
|
23
|
+
isCompact: !1
|
|
26
24
|
};
|
|
27
|
-
|
|
25
|
+
var B = Object.defineProperty, m = (s, r, e, o) => {
|
|
26
|
+
for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
|
|
27
|
+
(c = s[i]) && (t = c(r, e, t) || t);
|
|
28
|
+
return t && B(r, e, t), t;
|
|
29
|
+
};
|
|
30
|
+
const h = "pie-breadcrumb", p = class p extends $(v) {
|
|
28
31
|
constructor() {
|
|
29
|
-
super(...arguments), this.items = [];
|
|
32
|
+
super(...arguments), this.items = [], this.variant = l.variant, this.isCompact = l.isCompact;
|
|
30
33
|
}
|
|
31
34
|
/**
|
|
32
35
|
* Renders a separator icon between breadcrumb items.
|
|
@@ -37,11 +40,12 @@ const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
|
37
40
|
* @private
|
|
38
41
|
*/
|
|
39
42
|
renderSeparator() {
|
|
43
|
+
const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
|
|
40
44
|
return a`
|
|
41
45
|
<li
|
|
42
46
|
role="presentation"
|
|
43
47
|
aria-hidden="true"
|
|
44
|
-
class="
|
|
48
|
+
class="${r}"
|
|
45
49
|
data-test-id="pie-breadcrumb-separator">
|
|
46
50
|
${this.isRTL ? a`<icon-chevron-left></icon-chevron-left>` : a`<icon-chevron-right></icon-chevron-right>`}
|
|
47
51
|
</li>
|
|
@@ -54,32 +58,86 @@ const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
|
54
58
|
*
|
|
55
59
|
* @private
|
|
56
60
|
*/
|
|
57
|
-
renderNavigationLink(
|
|
61
|
+
renderNavigationLink(r) {
|
|
62
|
+
const e = this.variant === "scrim" ? "inverse" : "default";
|
|
58
63
|
return a`
|
|
59
|
-
<pie-link
|
|
60
|
-
${
|
|
64
|
+
<pie-link variant="${e}" isStandalone underline="reversed" isBold href="${r.href}">
|
|
65
|
+
${r.label}
|
|
61
66
|
</pie-link>
|
|
62
67
|
`;
|
|
63
68
|
}
|
|
64
69
|
/**
|
|
65
|
-
* Renders
|
|
66
|
-
*
|
|
70
|
+
* Renders the last breadcrumb item.
|
|
71
|
+
* It has 250px of max-width. If the label reaches this width the text truncates.
|
|
72
|
+
*
|
|
73
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
74
|
+
*
|
|
75
|
+
* @private
|
|
76
|
+
*/
|
|
77
|
+
renderLastItem(r) {
|
|
78
|
+
const e = {
|
|
79
|
+
"c-breadcrumb-list-last-item": !0,
|
|
80
|
+
"c-breadcrumb-list-last-item--scrim": this.variant === "scrim"
|
|
81
|
+
};
|
|
82
|
+
return a`<span class="${b(e)}">${r.label}</span>`;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Renders an individual breadcrumb item.
|
|
86
|
+
|
|
87
|
+
* Conditionally renders either a clickable link or plain text for the last item.
|
|
88
|
+
*
|
|
89
|
+
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
90
|
+
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
91
|
+
*
|
|
92
|
+
* @private
|
|
93
|
+
*/
|
|
94
|
+
renderItem(r, e = !1) {
|
|
95
|
+
return a`
|
|
96
|
+
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
97
|
+
${e ? this.renderLastItem(r) : this.renderNavigationLink(r)}
|
|
98
|
+
</li>
|
|
99
|
+
${e ? u : this.renderSeparator()}
|
|
100
|
+
`;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Renders breadcrumb items using the default variant style.
|
|
104
|
+
*
|
|
105
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
106
|
+
*
|
|
107
|
+
* @private
|
|
108
|
+
*/
|
|
109
|
+
renderDefaultBreadcrumb(r) {
|
|
110
|
+
const e = r.length - 1;
|
|
111
|
+
return a`${r.map((o, t) => this.renderItem(o, e <= t))}`;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Renders a separator icon specifically for the back variant.
|
|
115
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
116
|
+
*
|
|
117
|
+
* @private
|
|
118
|
+
*/
|
|
119
|
+
renderCompactBreadcrumbSeparator() {
|
|
120
|
+
const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
|
|
121
|
+
return a`
|
|
122
|
+
<li role="presentation" aria-hidden="true" class="${r}" data-test-id="pie-breadcrumb-separator">
|
|
123
|
+
${this.isRTL ? a`<icon-chevron-right></icon-chevron-right>` : a`<icon-chevron-left></icon-chevron-left>`}
|
|
124
|
+
</li>
|
|
125
|
+
`;
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
|
|
67
129
|
*
|
|
68
|
-
* @param {
|
|
69
|
-
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
130
|
+
* @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
|
|
70
131
|
*
|
|
71
132
|
* @private
|
|
72
133
|
*/
|
|
73
|
-
|
|
134
|
+
renderCompactBreadcrumb(r) {
|
|
135
|
+
const e = r[r.length - 1];
|
|
74
136
|
return a`
|
|
137
|
+
${this.renderCompactBreadcrumbSeparator()}
|
|
75
138
|
<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)}
|
|
139
|
+
${this.renderNavigationLink(e)}
|
|
81
140
|
</li>
|
|
82
|
-
${t ? c : this.renderSeparator()}
|
|
83
141
|
`;
|
|
84
142
|
}
|
|
85
143
|
/**
|
|
@@ -90,33 +148,42 @@ const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
|
90
148
|
*
|
|
91
149
|
* @private
|
|
92
150
|
*/
|
|
93
|
-
renderBreadcrumbItems(e) {
|
|
94
|
-
const t = e.length - 1;
|
|
151
|
+
renderBreadcrumbItems(r, e) {
|
|
95
152
|
return a`
|
|
96
153
|
<ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
|
|
97
|
-
${e.
|
|
154
|
+
${e ? this.renderCompactBreadcrumb(r) : this.renderDefaultBreadcrumb(r)}
|
|
98
155
|
</ol>
|
|
99
156
|
`;
|
|
100
157
|
}
|
|
101
158
|
render() {
|
|
102
|
-
const { items: e } = this;
|
|
159
|
+
const { items: r, variant: e, isCompact: o } = this;
|
|
103
160
|
return a`
|
|
104
161
|
<nav
|
|
105
162
|
aria-label="breadcrumb"
|
|
106
163
|
data-test-id="pie-breadcrumb"
|
|
107
|
-
class="${
|
|
108
|
-
"c-breadcrumb": !0
|
|
164
|
+
class="${b({
|
|
165
|
+
"c-breadcrumb": !0,
|
|
166
|
+
"c-breadcrumb--scrim": e === "scrim"
|
|
109
167
|
})}">
|
|
110
|
-
|
|
168
|
+
${r ? this.renderBreadcrumbItems(r, o) : u}
|
|
111
169
|
</nav>`;
|
|
112
170
|
}
|
|
113
171
|
};
|
|
114
|
-
|
|
115
|
-
let
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
],
|
|
119
|
-
|
|
172
|
+
p.styles = g(S);
|
|
173
|
+
let n = p;
|
|
174
|
+
m([
|
|
175
|
+
d({ type: Array })
|
|
176
|
+
], n.prototype, "items");
|
|
177
|
+
m([
|
|
178
|
+
d({ type: String }),
|
|
179
|
+
y(h, w, l.variant)
|
|
180
|
+
], n.prototype, "variant");
|
|
181
|
+
m([
|
|
182
|
+
d({ type: Boolean })
|
|
183
|
+
], n.prototype, "isCompact");
|
|
184
|
+
C(h, n);
|
|
120
185
|
export {
|
|
121
|
-
|
|
186
|
+
n as PieBreadcrumb,
|
|
187
|
+
l as defaultProps,
|
|
188
|
+
w as variants
|
|
122
189
|
};
|
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
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,6 +1,6 @@
|
|
|
1
1
|
import { html, nothing, unsafeCSS } from 'lit';
|
|
2
2
|
import { property } from 'lit/decorators.js';
|
|
3
|
-
import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
3
|
+
import { RtlMixin, defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
|
|
6
6
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
@@ -13,6 +13,8 @@ import styles from './breadcrumb.scss?inline';
|
|
|
13
13
|
import {
|
|
14
14
|
type BreadcrumbProps,
|
|
15
15
|
type BreadcrumbItem,
|
|
16
|
+
variants,
|
|
17
|
+
defaultProps,
|
|
16
18
|
} from './defs';
|
|
17
19
|
|
|
18
20
|
const componentSelector = 'pie-breadcrumb';
|
|
@@ -27,6 +29,13 @@ export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbPro
|
|
|
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
|
|