@justeattakeaway/pie-breadcrumb 0.1.0 → 0.2.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 +89 -37
- package/dist/index.d.ts +43 -4
- package/dist/index.js +110 -29
- package/dist/react.d.ts +43 -4
- package/dist/react.js +5 -8
- package/package.json +3 -3
- package/src/breadcrumb.scss +20 -11
- package/src/defs.ts +7 -5
- package/src/index.ts +101 -8
- package/declaration.d.ts +0 -9
package/custom-elements.json
CHANGED
|
@@ -11,42 +11,8 @@
|
|
|
11
11
|
{
|
|
12
12
|
"kind": "javascript-module",
|
|
13
13
|
"path": "src/defs.js",
|
|
14
|
-
"declarations": [
|
|
15
|
-
|
|
16
|
-
"kind": "variable",
|
|
17
|
-
"name": "componentSelector",
|
|
18
|
-
"type": {
|
|
19
|
-
"text": "string"
|
|
20
|
-
},
|
|
21
|
-
"default": "'pie-breadcrumb'"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"kind": "variable",
|
|
25
|
-
"name": "componentClass",
|
|
26
|
-
"type": {
|
|
27
|
-
"text": "string"
|
|
28
|
-
},
|
|
29
|
-
"default": "'c-breadcrumb'"
|
|
30
|
-
}
|
|
31
|
-
],
|
|
32
|
-
"exports": [
|
|
33
|
-
{
|
|
34
|
-
"kind": "js",
|
|
35
|
-
"name": "componentSelector",
|
|
36
|
-
"declaration": {
|
|
37
|
-
"name": "componentSelector",
|
|
38
|
-
"module": "src/defs.js"
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"kind": "js",
|
|
43
|
-
"name": "componentClass",
|
|
44
|
-
"declaration": {
|
|
45
|
-
"name": "componentClass",
|
|
46
|
-
"module": "src/defs.js"
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
]
|
|
14
|
+
"declarations": [],
|
|
15
|
+
"exports": []
|
|
50
16
|
},
|
|
51
17
|
{
|
|
52
18
|
"kind": "javascript-module",
|
|
@@ -56,7 +22,93 @@
|
|
|
56
22
|
"kind": "class",
|
|
57
23
|
"description": "",
|
|
58
24
|
"name": "PieBreadcrumb",
|
|
59
|
-
"members": [
|
|
25
|
+
"members": [
|
|
26
|
+
{
|
|
27
|
+
"kind": "field",
|
|
28
|
+
"name": "items",
|
|
29
|
+
"type": {
|
|
30
|
+
"text": "BreadcrumbProps['items']"
|
|
31
|
+
},
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"default": "[]",
|
|
34
|
+
"attribute": "items"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"kind": "method",
|
|
38
|
+
"name": "renderSeparator",
|
|
39
|
+
"privacy": "private",
|
|
40
|
+
"description": "Renders a separator icon between breadcrumb items.\nThe icon direction depends on the RTL (Right-to-Left) setting.",
|
|
41
|
+
"return": {
|
|
42
|
+
"type": {
|
|
43
|
+
"text": "TemplateResult"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"kind": "method",
|
|
49
|
+
"name": "renderNavigationLink",
|
|
50
|
+
"privacy": "private",
|
|
51
|
+
"parameters": [
|
|
52
|
+
{
|
|
53
|
+
"name": "item",
|
|
54
|
+
"type": {
|
|
55
|
+
"text": "BreadcrumbItem"
|
|
56
|
+
},
|
|
57
|
+
"description": "The breadcrumb item containing label and URL."
|
|
58
|
+
}
|
|
59
|
+
],
|
|
60
|
+
"description": "Renders a navigation link for a breadcrumb item."
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "method",
|
|
64
|
+
"name": "renderItem",
|
|
65
|
+
"privacy": "private",
|
|
66
|
+
"parameters": [
|
|
67
|
+
{
|
|
68
|
+
"name": "item",
|
|
69
|
+
"type": {
|
|
70
|
+
"text": "BreadcrumbItem"
|
|
71
|
+
},
|
|
72
|
+
"description": "The breadcrumb item to render."
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "isLastItem",
|
|
76
|
+
"default": "false",
|
|
77
|
+
"description": "Indicates if the item is the last in the breadcrumb trail.",
|
|
78
|
+
"optional": true,
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "boolean"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
],
|
|
84
|
+
"description": "Renders an individual breadcrumb item.\nConditionally renders either a clickable link or plain text for the last item."
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"kind": "method",
|
|
88
|
+
"name": "renderBreadcrumbItems",
|
|
89
|
+
"privacy": "private",
|
|
90
|
+
"parameters": [
|
|
91
|
+
{
|
|
92
|
+
"name": "items",
|
|
93
|
+
"type": {
|
|
94
|
+
"text": "BreadcrumbProps['items']"
|
|
95
|
+
},
|
|
96
|
+
"description": "Array of breadcrumb items to render."
|
|
97
|
+
}
|
|
98
|
+
],
|
|
99
|
+
"description": "Renders a complete breadcrumb list.\nIterates over breadcrumb items to generate the breadcrumb trail."
|
|
100
|
+
}
|
|
101
|
+
],
|
|
102
|
+
"attributes": [
|
|
103
|
+
{
|
|
104
|
+
"name": "items",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "BreadcrumbProps['items']"
|
|
107
|
+
},
|
|
108
|
+
"default": "[]",
|
|
109
|
+
"fieldName": "items"
|
|
110
|
+
}
|
|
111
|
+
],
|
|
60
112
|
"mixins": [
|
|
61
113
|
{
|
|
62
114
|
"name": "RtlMixin",
|
package/dist/index.d.ts
CHANGED
|
@@ -4,17 +4,56 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
|
|
|
4
4
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
5
5
|
import type { TemplateResult } from 'lit-html';
|
|
6
6
|
|
|
7
|
+
export declare type BreadcrumbItem = {
|
|
8
|
+
label: string;
|
|
9
|
+
href: string;
|
|
10
|
+
};
|
|
11
|
+
|
|
7
12
|
export declare interface BreadcrumbProps {
|
|
13
|
+
items: BreadcrumbItem[];
|
|
8
14
|
}
|
|
9
15
|
|
|
10
|
-
export declare const componentClass = "c-breadcrumb";
|
|
11
|
-
|
|
12
|
-
export declare const componentSelector = "pie-breadcrumb";
|
|
13
|
-
|
|
14
16
|
/**
|
|
15
17
|
* @tagname pie-breadcrumb
|
|
16
18
|
*/
|
|
17
19
|
export declare class PieBreadcrumb extends PieBreadcrumb_base implements BreadcrumbProps {
|
|
20
|
+
items: BreadcrumbProps['items'];
|
|
21
|
+
/**
|
|
22
|
+
* Renders a separator icon between breadcrumb items.
|
|
23
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
24
|
+
*
|
|
25
|
+
* @returns {TemplateResult} HTML template for the separator icon.
|
|
26
|
+
*
|
|
27
|
+
* @private
|
|
28
|
+
*/
|
|
29
|
+
private renderSeparator;
|
|
30
|
+
/**
|
|
31
|
+
* Renders a navigation link for a breadcrumb item.
|
|
32
|
+
*
|
|
33
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
34
|
+
*
|
|
35
|
+
* @private
|
|
36
|
+
*/
|
|
37
|
+
private renderNavigationLink;
|
|
38
|
+
/**
|
|
39
|
+
* Renders an individual breadcrumb item.
|
|
40
|
+
* Conditionally renders either a clickable link or plain text for the last item.
|
|
41
|
+
*
|
|
42
|
+
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
43
|
+
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
44
|
+
*
|
|
45
|
+
* @private
|
|
46
|
+
*/
|
|
47
|
+
private renderItem;
|
|
48
|
+
/**
|
|
49
|
+
* Renders a complete breadcrumb list.
|
|
50
|
+
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
51
|
+
*
|
|
52
|
+
* @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
|
|
53
|
+
*
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
private renderBreadcrumbItems;
|
|
18
57
|
render(): TemplateResult<1>;
|
|
19
58
|
static styles: CSSResult;
|
|
20
59
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,41 +1,122 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { LitElement as b, html as a, nothing as c, unsafeCSS as u } from "lit";
|
|
2
|
+
import { property as p } from "lit/decorators.js";
|
|
3
|
+
import { RtlMixin as f, defineCustomElement as v } from "@justeattakeaway/pie-webc-core";
|
|
4
|
+
import { classMap as h } from "lit/directives/class-map.js";
|
|
5
|
+
import "@justeattakeaway/pie-link";
|
|
6
|
+
import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
|
|
7
|
+
import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
|
|
8
|
+
var g = Object.defineProperty, y = (s, e, t, l) => {
|
|
9
|
+
for (var r = void 0, i = s.length - 1, n; i >= 0; i--)
|
|
10
|
+
(n = s[i]) && (r = n(e, t, r) || r);
|
|
11
|
+
return r && g(e, t, r), r;
|
|
9
12
|
};
|
|
10
|
-
class
|
|
13
|
+
class m extends b {
|
|
11
14
|
constructor() {
|
|
12
|
-
super(...arguments), this.v = "0.
|
|
15
|
+
super(...arguments), this.v = "0.2.0";
|
|
13
16
|
}
|
|
14
17
|
}
|
|
15
18
|
y([
|
|
16
|
-
|
|
17
|
-
],
|
|
18
|
-
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
|
|
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
|
+
};
|
|
27
|
+
const w = "pie-breadcrumb", d = class d extends f(m) {
|
|
28
|
+
constructor() {
|
|
29
|
+
super(...arguments), this.items = [];
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Renders a separator icon between breadcrumb items.
|
|
33
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
34
|
+
*
|
|
35
|
+
* @returns {TemplateResult} HTML template for the separator icon.
|
|
36
|
+
*
|
|
37
|
+
* @private
|
|
38
|
+
*/
|
|
39
|
+
renderSeparator() {
|
|
40
|
+
return a`
|
|
41
|
+
<li
|
|
42
|
+
role="presentation"
|
|
43
|
+
aria-hidden="true"
|
|
44
|
+
class="c-breadcrumb-separator"
|
|
45
|
+
data-test-id="pie-breadcrumb-separator">
|
|
46
|
+
${this.isRTL ? a`<icon-chevron-left></icon-chevron-left>` : a`<icon-chevron-right></icon-chevron-right>`}
|
|
47
|
+
</li>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Renders a navigation link for a breadcrumb item.
|
|
52
|
+
*
|
|
53
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
54
|
+
*
|
|
55
|
+
* @private
|
|
56
|
+
*/
|
|
57
|
+
renderNavigationLink(e) {
|
|
58
|
+
return a`
|
|
59
|
+
<pie-link isStandalone="true" underline="reversed" isBold="true" href="${e.href}">
|
|
60
|
+
${e.label}
|
|
61
|
+
</pie-link>
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Renders an individual breadcrumb item.
|
|
66
|
+
* Conditionally renders either a clickable link or plain text for the last item.
|
|
67
|
+
*
|
|
68
|
+
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
69
|
+
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
70
|
+
*
|
|
71
|
+
* @private
|
|
72
|
+
*/
|
|
73
|
+
renderItem(e, t = !1) {
|
|
74
|
+
return a`
|
|
75
|
+
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
76
|
+
${t ? a`<span
|
|
77
|
+
class="c-breadcrumb-list-last-item"
|
|
78
|
+
data-test-id="pie-breadcrumb-last-item">
|
|
79
|
+
${e.label}
|
|
80
|
+
</span>` : this.renderNavigationLink(e)}
|
|
81
|
+
</li>
|
|
82
|
+
${t ? c : this.renderSeparator()}
|
|
83
|
+
`;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Renders a complete breadcrumb list.
|
|
87
|
+
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
88
|
+
*
|
|
89
|
+
* @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
|
|
90
|
+
*
|
|
91
|
+
* @private
|
|
92
|
+
*/
|
|
93
|
+
renderBreadcrumbItems(e) {
|
|
94
|
+
const t = e.length - 1;
|
|
95
|
+
return a`
|
|
96
|
+
<ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
|
|
97
|
+
${e.map((l, r) => this.renderItem(l, t <= r))}
|
|
98
|
+
</ol>
|
|
99
|
+
`;
|
|
100
|
+
}
|
|
19
101
|
render() {
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
return d`
|
|
102
|
+
const { items: e } = this;
|
|
103
|
+
return a`
|
|
24
104
|
<nav
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
105
|
+
aria-label="breadcrumb"
|
|
106
|
+
data-test-id="pie-breadcrumb"
|
|
107
|
+
class="${h({
|
|
108
|
+
"c-breadcrumb": !0
|
|
109
|
+
})}">
|
|
110
|
+
${e ? this.renderBreadcrumbItems(e) : c}
|
|
31
111
|
</nav>`;
|
|
32
112
|
}
|
|
33
113
|
};
|
|
34
|
-
|
|
35
|
-
let
|
|
36
|
-
|
|
114
|
+
d.styles = u(x);
|
|
115
|
+
let o = d;
|
|
116
|
+
S([
|
|
117
|
+
p({ type: Array })
|
|
118
|
+
], o.prototype, "items");
|
|
119
|
+
v(w, o);
|
|
37
120
|
export {
|
|
38
|
-
|
|
39
|
-
C as componentClass,
|
|
40
|
-
p as componentSelector
|
|
121
|
+
o as PieBreadcrumb
|
|
41
122
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -5,19 +5,58 @@ import * as React_2 from 'react';
|
|
|
5
5
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
6
6
|
import type { TemplateResult } from 'lit-html';
|
|
7
7
|
|
|
8
|
+
export declare type BreadcrumbItem = {
|
|
9
|
+
label: string;
|
|
10
|
+
href: string;
|
|
11
|
+
};
|
|
12
|
+
|
|
8
13
|
export declare interface BreadcrumbProps {
|
|
14
|
+
items: BreadcrumbItem[];
|
|
9
15
|
}
|
|
10
16
|
|
|
11
|
-
export declare const componentClass = "c-breadcrumb";
|
|
12
|
-
|
|
13
|
-
export declare const componentSelector = "pie-breadcrumb";
|
|
14
|
-
|
|
15
17
|
export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<PieBreadcrumb_2> & ReactBaseType>;
|
|
16
18
|
|
|
17
19
|
/**
|
|
18
20
|
* @tagname pie-breadcrumb
|
|
19
21
|
*/
|
|
20
22
|
declare class PieBreadcrumb_2 extends PieBreadcrumb_base implements BreadcrumbProps {
|
|
23
|
+
items: BreadcrumbProps['items'];
|
|
24
|
+
/**
|
|
25
|
+
* Renders a separator icon between breadcrumb items.
|
|
26
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
27
|
+
*
|
|
28
|
+
* @returns {TemplateResult} HTML template for the separator icon.
|
|
29
|
+
*
|
|
30
|
+
* @private
|
|
31
|
+
*/
|
|
32
|
+
private renderSeparator;
|
|
33
|
+
/**
|
|
34
|
+
* Renders a navigation link for a breadcrumb item.
|
|
35
|
+
*
|
|
36
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
37
|
+
*
|
|
38
|
+
* @private
|
|
39
|
+
*/
|
|
40
|
+
private renderNavigationLink;
|
|
41
|
+
/**
|
|
42
|
+
* Renders an individual breadcrumb item.
|
|
43
|
+
* Conditionally renders either a clickable link or plain text for the last item.
|
|
44
|
+
*
|
|
45
|
+
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
46
|
+
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
47
|
+
*
|
|
48
|
+
* @private
|
|
49
|
+
*/
|
|
50
|
+
private renderItem;
|
|
51
|
+
/**
|
|
52
|
+
* Renders a complete breadcrumb list.
|
|
53
|
+
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
54
|
+
*
|
|
55
|
+
* @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
|
|
56
|
+
*
|
|
57
|
+
* @private
|
|
58
|
+
*/
|
|
59
|
+
private renderBreadcrumbItems;
|
|
21
60
|
render(): TemplateResult<1>;
|
|
22
61
|
static styles: CSSResult;
|
|
23
62
|
}
|
package/dist/react.js
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { createComponent as r } from "@lit/react";
|
|
3
|
-
import { PieBreadcrumb as
|
|
4
|
-
|
|
5
|
-
const a = r({
|
|
3
|
+
import { PieBreadcrumb as a } from "./index.js";
|
|
4
|
+
const m = r({
|
|
6
5
|
displayName: "PieBreadcrumb",
|
|
7
|
-
elementClass:
|
|
6
|
+
elementClass: a,
|
|
8
7
|
react: e,
|
|
9
8
|
tagName: "pie-breadcrumb",
|
|
10
9
|
events: {}
|
|
11
|
-
}),
|
|
10
|
+
}), o = m;
|
|
12
11
|
export {
|
|
13
|
-
|
|
14
|
-
p as componentClass,
|
|
15
|
-
s as componentSelector
|
|
12
|
+
o as PieBreadcrumb
|
|
16
13
|
};
|
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.2.0",
|
|
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.
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.20.0",
|
|
37
37
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
38
|
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-webc-core": "0.25.
|
|
42
|
+
"@justeattakeaway/pie-webc-core": "0.25.1"
|
|
43
43
|
},
|
|
44
44
|
"volta": {
|
|
45
45
|
"extends": "../../../package.json"
|
package/src/breadcrumb.scss
CHANGED
|
@@ -4,17 +4,26 @@
|
|
|
4
4
|
--breadcrumb-background-color: var(--dt-color-transparent);
|
|
5
5
|
|
|
6
6
|
padding: var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d);
|
|
7
|
+
}
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
.c-breadcrumb-list {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-flow: row;
|
|
14
|
+
|
|
15
|
+
gap: var(--dt-spacing-a);
|
|
13
16
|
|
|
14
|
-
|
|
17
|
+
li {
|
|
18
|
+
list-style-type: none;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
15
24
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
25
|
+
.c-breadcrumb-list-last-item {
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
text-overflow: ellipsis;
|
|
28
|
+
max-width: 250px;
|
|
29
|
+
}
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export type BreadcrumbItem = {
|
|
2
|
+
label: string;
|
|
3
|
+
href: string;
|
|
4
|
+
}
|
|
4
5
|
|
|
5
|
-
export
|
|
6
|
-
|
|
6
|
+
export interface BreadcrumbProps {
|
|
7
|
+
items: BreadcrumbItem[]
|
|
8
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,10 +1,21 @@
|
|
|
1
|
-
import { html, unsafeCSS } from 'lit';
|
|
1
|
+
import { html, nothing, unsafeCSS } from 'lit';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
2
3
|
import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
3
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
5
|
|
|
5
6
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
7
|
+
|
|
8
|
+
import '@justeattakeaway/pie-link';
|
|
9
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
|
|
10
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
|
|
11
|
+
|
|
6
12
|
import styles from './breadcrumb.scss?inline';
|
|
7
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
type BreadcrumbProps,
|
|
15
|
+
type BreadcrumbItem,
|
|
16
|
+
} from './defs';
|
|
17
|
+
|
|
18
|
+
const componentSelector = 'pie-breadcrumb';
|
|
8
19
|
|
|
9
20
|
// Valid values available to consumers
|
|
10
21
|
export * from './defs';
|
|
@@ -13,19 +24,101 @@ export * from './defs';
|
|
|
13
24
|
* @tagname pie-breadcrumb
|
|
14
25
|
*/
|
|
15
26
|
export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbProps {
|
|
27
|
+
@property({ type: Array })
|
|
28
|
+
public items: BreadcrumbProps['items'] = [];
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Renders a separator icon between breadcrumb items.
|
|
32
|
+
* The icon direction depends on the RTL (Right-to-Left) setting.
|
|
33
|
+
*
|
|
34
|
+
* @returns {TemplateResult} HTML template for the separator icon.
|
|
35
|
+
*
|
|
36
|
+
* @private
|
|
37
|
+
*/
|
|
38
|
+
private renderSeparator () {
|
|
39
|
+
return html`
|
|
40
|
+
<li
|
|
41
|
+
role="presentation"
|
|
42
|
+
aria-hidden="true"
|
|
43
|
+
class="c-breadcrumb-separator"
|
|
44
|
+
data-test-id="pie-breadcrumb-separator">
|
|
45
|
+
${this.isRTL ? html`<icon-chevron-left></icon-chevron-left>` : html`<icon-chevron-right></icon-chevron-right>`}
|
|
46
|
+
</li>
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Renders a navigation link for a breadcrumb item.
|
|
52
|
+
*
|
|
53
|
+
* @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
|
|
54
|
+
*
|
|
55
|
+
* @private
|
|
56
|
+
*/
|
|
57
|
+
private renderNavigationLink (item: BreadcrumbItem) {
|
|
58
|
+
return html`
|
|
59
|
+
<pie-link isStandalone="true" underline="reversed" isBold="true" href="${item.href}">
|
|
60
|
+
${item.label}
|
|
61
|
+
</pie-link>
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Renders an individual breadcrumb item.
|
|
67
|
+
* Conditionally renders either a clickable link or plain text for the last item.
|
|
68
|
+
*
|
|
69
|
+
* @param {BreadcrumbItem} item - The breadcrumb item to render.
|
|
70
|
+
* @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
|
|
71
|
+
*
|
|
72
|
+
* @private
|
|
73
|
+
*/
|
|
74
|
+
private renderItem (item: BreadcrumbItem, isLastItem = false) {
|
|
75
|
+
return html`
|
|
76
|
+
<li role="listitem" data-test-id="pie-breadcrumb-item">
|
|
77
|
+
${
|
|
78
|
+
isLastItem
|
|
79
|
+
? html`<span
|
|
80
|
+
class="c-breadcrumb-list-last-item"
|
|
81
|
+
data-test-id="pie-breadcrumb-last-item">
|
|
82
|
+
${item.label}
|
|
83
|
+
</span>`
|
|
84
|
+
: this.renderNavigationLink(item)
|
|
85
|
+
}
|
|
86
|
+
</li>
|
|
87
|
+
${isLastItem ? nothing : this.renderSeparator()}
|
|
88
|
+
`;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Renders a complete breadcrumb list.
|
|
93
|
+
* Iterates over breadcrumb items to generate the breadcrumb trail.
|
|
94
|
+
*
|
|
95
|
+
* @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
|
|
96
|
+
*
|
|
97
|
+
* @private
|
|
98
|
+
*/
|
|
99
|
+
private renderBreadcrumbItems (items: BreadcrumbProps['items']) {
|
|
100
|
+
const numberOfSeparators = items.length - 1;
|
|
101
|
+
|
|
102
|
+
return html`
|
|
103
|
+
<ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
|
|
104
|
+
${items.map((item, index) => this.renderItem(item, numberOfSeparators <= index))}
|
|
105
|
+
</ol>
|
|
106
|
+
`;
|
|
107
|
+
}
|
|
108
|
+
|
|
16
109
|
render () {
|
|
110
|
+
const { items } = this;
|
|
111
|
+
|
|
17
112
|
const componentWrapperClasses = {
|
|
18
|
-
|
|
113
|
+
'c-breadcrumb': true,
|
|
19
114
|
};
|
|
20
115
|
|
|
21
116
|
return html`
|
|
22
117
|
<nav
|
|
23
|
-
|
|
118
|
+
aria-label="breadcrumb"
|
|
119
|
+
data-test-id="pie-breadcrumb"
|
|
24
120
|
class="${classMap(componentWrapperClasses)}">
|
|
25
|
-
|
|
26
|
-
<li><span>Previous Page</span></li>
|
|
27
|
-
<li><span>Current Page</span></li>
|
|
28
|
-
</ol>
|
|
121
|
+
${items ? this.renderBreadcrumbItems(items) : nothing}
|
|
29
122
|
</nav>`;
|
|
30
123
|
}
|
|
31
124
|
|