@justeattakeaway/pie-breadcrumb 0.4.1 → 0.6.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.
Files changed (20) hide show
  1. package/README.md +81 -55
  2. package/custom-elements.json +43 -8
  3. package/dist/breadcrumb-CSJnpcZg.js +13 -0
  4. package/dist/defs.d.ts +4 -0
  5. package/dist/defs.d.ts.map +1 -1
  6. package/dist/index.d.ts +9 -0
  7. package/dist/index.d.ts.map +1 -1
  8. package/dist/index.js +53 -32
  9. package/dist/pie-breadcrumb-item/defs.d.ts +6 -2
  10. package/dist/pie-breadcrumb-item/defs.d.ts.map +1 -1
  11. package/dist/pie-breadcrumb-item/index.d.ts +2 -1
  12. package/dist/pie-breadcrumb-item/index.d.ts.map +1 -1
  13. package/dist/pie-breadcrumb-item/index.js +26 -21
  14. package/package.json +1 -1
  15. package/src/breadcrumb.scss +17 -9
  16. package/src/defs.ts +6 -1
  17. package/src/index.ts +27 -3
  18. package/src/pie-breadcrumb-item/defs.ts +8 -4
  19. package/src/pie-breadcrumb-item/index.ts +12 -4
  20. package/dist/breadcrumb-Dq4s3GhG.js +0 -13
package/README.md CHANGED
@@ -1,91 +1,117 @@
1
- <p align="center">
2
- <img align="center" src="../../../readme_image.png" height="200" alt="">
3
- </p>
1
+ # @justeattakeaway/pie-breadcrumb
4
2
 
5
- <p align="center">
3
+ [Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-breadcrumb) | [Design Documentation](https://pie.design/components/breadcrumb) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-breadcrumb)
4
+ <p>
6
5
  <a href="https://www.npmjs.com/@justeattakeaway/pie-breadcrumb">
7
6
  <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-breadcrumb.svg">
8
7
  </a>
9
8
  </p>
10
9
 
11
- # Table of Contents
10
+ `@justeattakeaway/pie-breadcrumb` is a Web Component built using the Lit library. It offers a simple and accessible breadcrumb navigation component for web applications. The component exports a sub-component called `pie-breadcrumb-item` which is used to create individual items within the breadcrumb.
12
11
 
13
- 1. [Introduction](#pie-breadcrumb)
14
- 2. [Installation](#installation)
15
- 3. [Importing the component](#importing-the-component)
16
- 4. [Peer Dependencies](#peer-dependencies)
17
- 5. [Props](#props)
18
- 6. [Contributing](#contributing)
12
+ ## Table of Contents
19
13
 
20
- ## pie-breadcrumb
14
+ - [Installation](#installation)
15
+ - [Documentation](#documentation)
16
+ - [Properties](#properties)
17
+ - [Slots](#slots)
18
+ - [CSS Variables](#css-variables)
19
+ - [Events](#events)
20
+ - [Usage Examples](#usage-examples)
21
+ - [Questions and Support](#questions-and-support)
22
+ - [Contributing](#contributing)
21
23
 
22
- `pie-breadcrumb` is a Web Component built using the Lit library.
24
+ ## Installation
23
25
 
24
- This component can be easily integrated into various frontend frameworks and customized through a set of properties.
26
+ > To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
25
27
 
28
+ Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
26
29
 
27
- ## Installation
30
+ ## Documentation
28
31
 
29
- To install `pie-breadcrumb` in your application, run the following on your command line:
32
+ ### Properties
30
33
 
31
- ```bash
32
- # npm
33
- $ npm i @justeattakeaway/pie-breadcrumb
34
+ #### `pie-breadcrumb` Properties
34
35
 
35
- # yarn
36
- $ yarn add @justeattakeaway/pie-breadcrumb
37
- ```
36
+ | Prop | Options | Description | Default |
37
+ |------|---------|-------------|--------|
38
+ | `variant` | `"default"`, `"scrim"` | Sets the variant of the breadcrumb. | `"default"` |
39
+ | `isCompact` | `true`, `false` | If true, renders a compact variation of the breadcrumb. | `false` |
40
+ | `hideCurrentPage` | `true`, `false` | If true, hides the current page of the breadcrumb (last item). | `false` |
38
41
 
39
- For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
42
+ #### `pie-breadcrumb-item` Properties
40
43
 
44
+ | Prop | Options | Description | Default |
45
+ |------|---------|-------------|--------|
46
+ | `href` | `string` | The URL that the breadcrumb item links to. | `undefined` |
47
+ | `target` | `string` | Where to display the linked URL such as `"_self"`, `"_blank"`, `"_parent"`, or `"_top"`. | `undefined` |
41
48
 
42
- ### Importing the component
49
+ ### Slots
43
50
 
44
- #### JavaScript
45
- ```js
46
- // Default – for Native JS Applications, Vue, Angular, Svelte, etc.
47
- import { PieBreadcrumb } from '@justeattakeaway/pie-breadcrumb';
51
+ | Component | Slot | Description |
52
+ |-----------|------|-------------|
53
+ | `pie-breadcrumb` | `default` | The default slot is used to pass `pie-breadcrumb-item` elements into the breadcrumb component. |
54
+ | `pie-breadcrumb-item` | `default` | The default slot is used to pass text into the breadcrumb item. |
48
55
 
49
- // If you don't need to reference the imported object, you can simply
50
- // import the module which registers the component as a custom element.
51
- import '@justeattakeaway/pie-breadcrumb';
52
- ```
56
+ ### CSS Variables
53
57
 
54
- #### React
55
- ```js
56
- // React
57
- // For React, you will need to import our React-specific component build
58
- // which wraps the web component using ​@lit/react
59
- import { PieBreadcrumb } from '@justeattakeaway/pie-breadcrumb/dist/react';
60
- ```
58
+ This component does not expose any CSS variables for style overrides.
61
59
 
62
- > [!NOTE]
63
- > When using the React version of the component, please make sure to also
64
- > include React as a [peer dependency](#peer-dependencies) in your project.
60
+ ### Events
65
61
 
62
+ This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
66
63
 
67
- ## Peer Dependencies
64
+ ## Usage Examples
68
65
 
69
- > [!IMPORTANT]
70
- > When using `pie-breadcrumb`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
66
+ **For HTML:**
71
67
 
68
+ ```js
69
+ // import as module into a js file e.g. main.js
70
+ import '@justeattakeaway/pie-webc/components/breadcrumb.js'
71
+ import '@justeattakeaway/pie-webc/components/breadcrumb-item.js'
72
+ ```
72
73
 
73
- ## Props
74
+ ```html
75
+ <pie-breadcrumb>
76
+ <pie-breadcrumb-item href="/">Home</pie-breadcrumb-item>
77
+ <pie-breadcrumb-item href="/category">Category</pie-breadcrumb-item>
78
+ <pie-breadcrumb-item>Current Page</pie-breadcrumb-item>
79
+ </pie-breadcrumb>
74
80
 
75
- | Property | Type | Default | Description |
76
- |---|---|---|---|
77
- | - | - | - | - |
81
+ <script type="module" src="/main.js"></script>
82
+ ```
78
83
 
79
- In your markup or JSX, you can then use these to set the properties for the `pie-breadcrumb` component:
84
+ **For Native JS Applications, Vue, Angular, Svelte etc.:**
80
85
 
81
- ```html
82
- <!-- Native HTML -->
83
- <pie-breadcrumb></pie-breadcrumb>
86
+ ```js
87
+ // Vue templates (using Nuxt 3)
88
+ import '@justeattakeaway/pie-webc/components/breadcrumb.js';
89
+ import '@justeattakeaway/pie-webc/components/breadcrumb-item.js';
90
+
91
+ <pie-breadcrumb>
92
+ <pie-breadcrumb-item href="/">Home</pie-breadcrumb-item>
93
+ <pie-breadcrumb-item href="/category">Category</pie-breadcrumb-item>
94
+ <pie-breadcrumb-item>Current Page</pie-breadcrumb-item>
95
+ </pie-breadcrumb>
96
+ ```
84
97
 
85
- <!-- JSX -->
86
- <PieBreadcrumb></PieBreadcrumb>
98
+ **For React Applications:**
99
+
100
+ ```jsx
101
+ import { PieBreadcrumb } from '@justeattakeaway/pie-webc/react/breadcrumb.js';
102
+ import { PieBreadcrumbItem } from '@justeattakeaway/pie-webc/react/breadcrumb-item.js';
103
+
104
+ <PieBreadcrumb>
105
+ <PieBreadcrumbItem href="/">Home</PieBreadcrumbItem>
106
+ <PieBreadcrumbItem href="/category">Category</PieBreadcrumbItem>
107
+ <PieBreadcrumbItem>Current Page</PieBreadcrumbItem>
108
+ </PieBreadcrumb>
87
109
  ```
88
110
 
111
+ ## Questions and Support
112
+
113
+ If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
114
+
89
115
  ## Contributing
90
116
 
91
117
  Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
package/custom-elements.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "type": {
27
27
  "text": "DefaultProps"
28
28
  },
29
- "default": "{\r\n variant: 'default',\r\n isCompact: false,\r\n}"
29
+ "default": "{\n variant: 'default',\n isCompact: false,\n hideCurrentPage: false,\n}"
30
30
  }
31
31
  ],
32
32
  "exports": [
@@ -69,6 +69,24 @@
69
69
  "privacy": "public",
70
70
  "attribute": "isCompact",
71
71
  "reflects": true
72
+ },
73
+ {
74
+ "kind": "field",
75
+ "name": "hideCurrentPage",
76
+ "privacy": "public",
77
+ "attribute": "hideCurrentPage",
78
+ "reflects": true
79
+ },
80
+ {
81
+ "kind": "method",
82
+ "name": "updateAriaCurrentItem",
83
+ "privacy": "private"
84
+ },
85
+ {
86
+ "kind": "method",
87
+ "name": "_handleSlotChange",
88
+ "privacy": "private",
89
+ "description": "Handles the slot change event."
72
90
  }
73
91
  ],
74
92
  "attributes": [
@@ -79,6 +97,10 @@
79
97
  {
80
98
  "name": "isCompact",
81
99
  "fieldName": "isCompact"
100
+ },
101
+ {
102
+ "name": "hideCurrentPage",
103
+ "fieldName": "hideCurrentPage"
82
104
  }
83
105
  ],
84
106
  "superclass": {
@@ -133,18 +155,25 @@
133
155
  "kind": "field",
134
156
  "name": "href",
135
157
  "type": {
136
- "text": "string"
158
+ "text": "BreadcrumbItemProps['href']"
137
159
  },
138
160
  "privacy": "public",
139
- "default": "''",
140
- "attribute": "href",
141
- "reflects": true
161
+ "attribute": "href"
162
+ },
163
+ {
164
+ "kind": "field",
165
+ "name": "target",
166
+ "type": {
167
+ "text": "BreadcrumbItemProps['target']"
168
+ },
169
+ "privacy": "public",
170
+ "attribute": "target"
142
171
  },
143
172
  {
144
173
  "kind": "method",
145
174
  "name": "renderSeparator",
146
175
  "privacy": "private",
147
- "description": "Renders a separator icon between breadcrumb items.\r\nThe icon direction depends on the RTL (Right-to-Left) setting.",
176
+ "description": "Renders a separator icon between breadcrumb items.\nThe icon direction depends on the RTL (Right-to-Left) setting.",
148
177
  "return": {
149
178
  "type": {
150
179
  "text": "TemplateResult"
@@ -162,10 +191,16 @@
162
191
  {
163
192
  "name": "href",
164
193
  "type": {
165
- "text": "string"
194
+ "text": "BreadcrumbItemProps['href']"
166
195
  },
167
- "default": "''",
168
196
  "fieldName": "href"
197
+ },
198
+ {
199
+ "name": "target",
200
+ "type": {
201
+ "text": "BreadcrumbItemProps['target']"
202
+ },
203
+ "fieldName": "target"
169
204
  }
170
205
  ],
171
206
  "mixins": [
package/dist/breadcrumb-CSJnpcZg.js ADDED
@@ -0,0 +1,13 @@
1
+ import { LitElement as t } from "lit";
2
+ const r = class r extends t {
3
+ willUpdate() {
4
+ this.getAttribute("v") || this.setAttribute("v", r.v);
5
+ }
6
+ };
7
+ r.v = "0.6.0";
8
+ let e = r;
9
+ const o = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-breadcrumb-item:only-child){display:none}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);--breadcrumb-item-flex-direction: row;--breadcrumb-item-color: var(--dt-color-content-link);--breadcrumb-separator-color: var(--dt-color-content-subdued);--breadcrumb-separator-transform: none;background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);--breadcrumb-item-color: var(--dt-color-content-link-light);--breadcrumb-separator-color: var(--dt-color-content-light);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-item{display:flex;flex-direction:var(--breadcrumb-item-flex-direction);align-items:center;white-space:nowrap;gap:var(--dt-spacing-a)}.c-breadcrumb-item pie-link{--link-text-color: var(--breadcrumb-item-color);--link-font-weight: var(--dt-font-weight-bold)}.c-breadcrumb-separator{display:inline-flex;color:var(--breadcrumb-separator-color);transform:var(--breadcrumb-separator-transform)}:host([isCompact]) .c-breadcrumb{--breadcrumb-item-flex-direction: row-reverse;--breadcrumb-separator-transform: rotate(180deg)}:host([isCompact]) ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))){display:none}:host([hideCurrentPage]) ::slotted(pie-breadcrumb-item:last-of-type){display:none}:host(:last-of-type) pie-link{--link-font-weight: var(--dt-font-weight-regular)}:host(:last-of-type) pie-link span{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(:last-of-type) .c-breadcrumb-separator{display:none}";
10
+ export {
11
+ e as P,
12
+ o as s
13
+ };
package/dist/defs.d.ts CHANGED
@@ -9,6 +9,10 @@ export interface BreadcrumbProps {
9
9
  * Optional property for rendering a compact variation of the breadcrumb.
10
10
  */
11
11
  isCompact?: boolean;
12
+ /**
13
+ * Optional property to hide the current page of the breadcrumb (last item).
14
+ */
15
+ hideCurrentPage?: boolean;
12
16
  }
13
17
  export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
14
18
  export declare const defaultProps: DefaultProps;
package/dist/defs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,QAAQ,+BAAgC,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAC,YAGzB,CAAC"}
1
+ {"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,QAAQ,+BAAgC,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAC,YAIzB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -8,6 +8,15 @@ export * from './defs';
8
8
  export declare class PieBreadcrumb extends PieElement implements BreadcrumbProps {
9
9
  variant: "default" | "scrim";
10
10
  isCompact: boolean;
11
+ hideCurrentPage: boolean;
12
+ private updateAriaCurrentItem;
13
+ /**
14
+ * Handles the slot change event.
15
+ *
16
+ * @private
17
+ */
18
+ private _handleSlotChange;
19
+ protected firstUpdated(): void;
11
20
  render(): import("lit-html").TemplateResult<1>;
12
21
  static styles: import("lit").CSSResult;
13
22
  }
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAGrF,OAAO,EACH,KAAK,eAAe,EAGvB,MAAM,QAAQ,CAAC;AAEhB,QAAA,MAAM,iBAAiB,mBAAmB,CAAC;AAG3C,cAAc,QAAQ,CAAC;AAEvB;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAW,YAAW,eAAe;IAG7D,OAAO,sBAAwB;IAG/B,SAAS,UAA0B;IAE1C,MAAM;IAqBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,EACH,KAAK,eAAe,EAGvB,MAAM,QAAQ,CAAC;AAEhB,QAAA,MAAM,iBAAiB,mBAAmB,CAAC;AAG3C,cAAc,QAAQ,CAAC;AAEvB;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAW,YAAW,eAAe;IAG7D,OAAO,sBAAwB;IAG/B,SAAS,UAA0B;IAGnC,eAAe,UAAgC;IAEtD,OAAO,CAAC,qBAAqB;IAQ7B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAIzB,SAAS,CAAC,YAAY,IAAK,IAAI;IAI/B,MAAM;IAoBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}
package/dist/index.js CHANGED
@@ -1,52 +1,73 @@
1
- import { unsafeCSS as n, html as u } from "lit";
2
- import { property as l } from "lit/decorators.js";
3
- import { validPropertyValues as b, safeCustomElement as d } from "@justeattakeaway/pie-webc-core";
1
+ import { unsafeCSS as u, html as m } from "lit";
2
+ import { property as p } from "lit/decorators.js";
3
+ import { validPropertyValues as d, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
4
4
  import { classMap as f } from "lit/directives/class-map.js";
5
- import { s as v, P } from "./breadcrumb-Dq4s3GhG.js";
6
- const y = ["default", "scrim"], p = {
5
+ import { s as h, P as C } from "./breadcrumb-CSJnpcZg.js";
6
+ const v = ["default", "scrim"], i = {
7
7
  variant: "default",
8
- isCompact: !1
8
+ isCompact: !1,
9
+ hideCurrentPage: !1
9
10
  };
10
- var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (s, t, e, o) => {
11
- for (var r = o > 1 ? void 0 : o ? _(t, e) : t, c = s.length - 1, i; c >= 0; c--)
12
- (i = s[c]) && (r = (o ? i(t, e, r) : i(r)) || r);
13
- return o && r && C(t, e, r), r;
11
+ var P = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, o, a) => {
12
+ for (var r = a > 1 ? void 0 : a ? g(e, o) : e, l = t.length - 1, c; l >= 0; l--)
13
+ (c = t[l]) && (r = (a ? c(e, o, r) : c(r)) || r);
14
+ return a && r && P(e, o, r), r;
14
15
  };
15
- const h = "pie-breadcrumb";
16
- let a = class extends P {
16
+ const y = "pie-breadcrumb";
17
+ let s = class extends C {
17
18
  constructor() {
18
- super(...arguments), this.variant = p.variant, this.isCompact = p.isCompact;
19
+ super(...arguments), this.variant = i.variant, this.isCompact = i.isCompact, this.hideCurrentPage = i.hideCurrentPage;
20
+ }
21
+ updateAriaCurrentItem() {
22
+ const t = [...this.querySelectorAll("pie-breadcrumb-item")];
23
+ t.forEach((e, o) => {
24
+ const a = o === t.length - 1;
25
+ e.ariaCurrent = a ? "page" : null;
26
+ });
27
+ }
28
+ /**
29
+ * Handles the slot change event.
30
+ *
31
+ * @private
32
+ */
33
+ _handleSlotChange() {
34
+ this.updateAriaCurrentItem();
35
+ }
36
+ firstUpdated() {
37
+ this.updateAriaCurrentItem();
19
38
  }
20
39
  render() {
21
- const { variant: s, isCompact: t } = this, e = {
40
+ const { variant: t } = this, e = {
22
41
  "c-breadcrumb": !0,
23
- [`c-breadcrumb--${s}`]: !0,
24
- "c-breadcrumb--compact": t
42
+ [`c-breadcrumb--${t}`]: !0
25
43
  };
26
- return u`
44
+ return m`
27
45
  <nav
28
46
  aria-label="breadcrumb"
29
47
  data-test-id="pie-breadcrumb"
30
48
  class="${f(e)}">
31
49
  <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
32
- <slot></slot>
50
+ <slot @slotchange=${this._handleSlotChange}></slot>
33
51
  </ol>
34
52
  </nav>`;
35
53
  }
36
54
  };
37
- a.styles = n(v);
38
- m([
39
- l({ type: String }),
40
- b(h, y, p.variant)
41
- ], a.prototype, "variant", 2);
42
- m([
43
- l({ type: Boolean, reflect: !0 })
44
- ], a.prototype, "isCompact", 2);
45
- a = m([
46
- d("pie-breadcrumb")
47
- ], a);
55
+ s.styles = u(h);
56
+ n([
57
+ p({ type: String }),
58
+ d(y, v, i.variant)
59
+ ], s.prototype, "variant", 2);
60
+ n([
61
+ p({ type: Boolean, reflect: !0 })
62
+ ], s.prototype, "isCompact", 2);
63
+ n([
64
+ p({ type: Boolean, reflect: !0 })
65
+ ], s.prototype, "hideCurrentPage", 2);
66
+ s = n([
67
+ b("pie-breadcrumb")
68
+ ], s);
48
69
  export {
49
- a as PieBreadcrumb,
50
- p as defaultProps,
51
- y as variants
70
+ s as PieBreadcrumb,
71
+ i as defaultProps,
72
+ v as variants
52
73
  };
package/dist/pie-breadcrumb-item/defs.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  export interface BreadcrumbItemProps {
2
2
  /**
3
- * The URL that the breadcrumb item links to
4
- */
3
+ * The URL that the breadcrumb item links to
4
+ */
5
5
  href?: string;
6
+ /**
7
+ * Where to display the linked URL such as _self, _blank, _parent or _top
8
+ */
9
+ target?: string;
6
10
  }
7
11
  //# sourceMappingURL=defs.d.ts.map
package/dist/pie-breadcrumb-item/defs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAChC;;MAEE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;MAEE;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
package/dist/pie-breadcrumb-item/index.d.ts CHANGED
@@ -7,7 +7,8 @@ declare const PieBreadcrumbItem_base: import("@justeattakeaway/pie-webc-core").G
7
7
  * @tagname pie-breadcrumb-item
8
8
  */
9
9
  export declare class PieBreadcrumbItem extends PieBreadcrumbItem_base implements BreadcrumbItemProps {
10
- href: string;
10
+ href: BreadcrumbItemProps['href'];
11
+ target: BreadcrumbItemProps['target'];
11
12
  /**
12
13
  * Renders a separator icon between breadcrumb items.
13
14
  * The icon direction depends on the RTL (Right-to-Left) setting.
package/dist/pie-breadcrumb-item/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAGrF,OAAO,2BAA2B,CAAC;AACnC,OAAO,0DAA0D,CAAC;AAClE,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,sBAAqB,YAAW,mBAAmB;IAE/E,IAAI,SAAM;IAEjB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAQ5B,MAAM;IAUN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pie-breadcrumb-item/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,2BAA2B,CAAC;AACnC,OAAO,0DAA0D,CAAC;AAClE,OAAO,yDAAyD,CAAC;AAGjE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElD,QAAA,MAAM,iBAAiB,wBAAwB,CAAC;AAGhD,cAAc,QAAQ,CAAC;;AAEvB;;GAEG;AACH,qBACa,iBAAkB,SAAQ,sBAAqB,YAAW,mBAAmB;IAE/E,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAGlC,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAY5B,MAAM;IAUN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}
package/dist/pie-breadcrumb-item/index.js CHANGED
@@ -1,19 +1,17 @@
1
- import { html as r, unsafeCSS as m } from "lit";
1
+ import { html as r, unsafeCSS as d } from "lit";
2
2
  import { property as c } from "lit/decorators.js";
3
- import { P as d, s as u } from "../breadcrumb-Dq4s3GhG.js";
4
- import { RtlMixin as f, safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
3
+ import { P as f, s as h } from "../breadcrumb-CSJnpcZg.js";
4
+ import { RtlMixin as u, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
5
+ import { ifDefined as l } from "lit/directives/if-defined.js";
5
6
  import "@justeattakeaway/pie-link";
6
7
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
7
8
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
8
- var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (p, t, n, i) => {
9
- for (var e = i > 1 ? void 0 : i ? v(t, n) : t, a = p.length - 1, o; a >= 0; a--)
10
- (o = p[a]) && (e = (i ? o(t, n, e) : o(e)) || e);
11
- return i && e && b(t, n, e), e;
9
+ var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (m, i, a, n) => {
10
+ for (var e = n > 1 ? void 0 : n ? g(i, a) : i, o = m.length - 1, s; o >= 0; o--)
11
+ (s = m[o]) && (e = (n ? s(i, a, e) : s(e)) || e);
12
+ return n && e && v(i, a, e), e;
12
13
  };
13
- let s = class extends f(d) {
14
- constructor() {
15
- super(...arguments), this.href = "";
16
- }
14
+ let t = class extends u(f) {
17
15
  /**
18
16
  * Renders a separator icon between breadcrumb items.
19
17
  * The icon direction depends on the RTL (Right-to-Left) setting.
@@ -40,8 +38,12 @@ let s = class extends f(d) {
40
38
  */
41
39
  renderNavigationLink() {
42
40
  return r`
43
- <pie-link isStandalone underline="reversed" href="${this.href}">
44
- <span><slot></slot></span>
41
+ <pie-link
42
+ isStandalone
43
+ underline="reversed"
44
+ href="${l(this.href)}"
45
+ target="${l(this.target)}">
46
+ <span><slot></slot></span>
45
47
  </pie-link>
46
48
  `;
47
49
  }
@@ -54,13 +56,16 @@ let s = class extends f(d) {
54
56
  `;
55
57
  }
56
58
  };
57
- s.styles = m(u);
58
- l([
59
- c({ type: String, reflect: !0 })
60
- ], s.prototype, "href", 2);
61
- s = l([
62
- h("pie-breadcrumb-item")
63
- ], s);
59
+ t.styles = d(h);
60
+ p([
61
+ c({ type: String })
62
+ ], t.prototype, "href", 2);
63
+ p([
64
+ c({ type: String })
65
+ ], t.prototype, "target", 2);
66
+ t = p([
67
+ b("pie-breadcrumb-item")
68
+ ], t);
64
69
  export {
65
- s as PieBreadcrumbItem
70
+ t as PieBreadcrumbItem
66
71
  };
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.1",
4
+ "version": "0.6.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
package/src/breadcrumb.scss CHANGED
@@ -1,5 +1,13 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
2
 
3
+ :host {
4
+ display: block;
5
+
6
+ ::slotted(pie-breadcrumb-item:only-child) {
7
+ display: none;
8
+ }
9
+ }
10
+
3
11
  .c-breadcrumb {
4
12
  --breadcrumb-background-color: var(--dt-color-transparent);
5
13
  --breadcrumb-item-flex-direction: row;
@@ -33,12 +41,12 @@
33
41
  align-items: center;
34
42
  white-space: nowrap;
35
43
  gap: var(--dt-spacing-a);
36
-
44
+
37
45
  pie-link {
38
46
  --link-text-color: var(--breadcrumb-item-color);
39
47
  --link-font-weight: var(--dt-font-weight-bold);
40
48
  }
41
- }
49
+ }
42
50
 
43
51
  .c-breadcrumb-separator {
44
52
  display: inline-flex;
@@ -51,12 +59,18 @@
51
59
  --breadcrumb-item-flex-direction: row-reverse;
52
60
  --breadcrumb-separator-transform: rotate(180deg);
53
61
  }
54
-
62
+
55
63
  ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))) {
56
64
  display: none;
57
65
  }
58
66
  }
59
67
 
68
+ :host([hideCurrentPage]) {
69
+ ::slotted(pie-breadcrumb-item:last-of-type) {
70
+ display: none;
71
+ }
72
+ }
73
+
60
74
  :host(:last-of-type) {
61
75
  pie-link {
62
76
  --link-font-weight: var(--dt-font-weight-regular);
@@ -73,9 +87,3 @@
73
87
  display: none;
74
88
  }
75
89
  }
76
-
77
- :host {
78
- ::slotted(pie-breadcrumb-item:only-child) {
79
- display: none;
80
- }
81
- }
package/src/defs.ts CHANGED
@@ -12,6 +12,11 @@ export interface BreadcrumbProps {
12
12
  * Optional property for rendering a compact variation of the breadcrumb.
13
13
  */
14
14
  isCompact?: boolean;
15
+
16
+ /**
17
+ * Optional property to hide the current page of the breadcrumb (last item).
18
+ */
19
+ hideCurrentPage?: boolean;
15
20
  }
16
21
 
17
22
  export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
@@ -19,5 +24,5 @@ export type DefaultProps = ComponentDefaultProps<BreadcrumbProps>;
19
24
  export const defaultProps:DefaultProps = {
20
25
  variant: 'default',
21
26
  isCompact: false,
27
+ hideCurrentPage: false,
22
28
  };
23
-
package/src/index.ts CHANGED
@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
3
3
  import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
6
+ import { type PieBreadcrumbItem } from './pie-breadcrumb-item';
6
7
 
7
8
  import styles from './breadcrumb.scss?inline';
8
9
  import {
@@ -28,13 +29,36 @@ export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
28
29
  @property({ type: Boolean, reflect: true })
29
30
  public isCompact = defaultProps.isCompact;
30
31
 
32
+ @property({ type: Boolean, reflect: true })
33
+ public hideCurrentPage = defaultProps.hideCurrentPage;
34
+
35
+ private updateAriaCurrentItem () {
36
+ const items = [...this.querySelectorAll('pie-breadcrumb-item')] as PieBreadcrumbItem[];
37
+ items.forEach((item, i) => {
38
+ const isLast = i === items.length - 1;
39
+ item.ariaCurrent = isLast ? 'page' : null;
40
+ });
41
+ }
42
+
43
+ /**
44
+ * Handles the slot change event.
45
+ *
46
+ * @private
47
+ */
48
+ private _handleSlotChange () {
49
+ this.updateAriaCurrentItem();
50
+ }
51
+
52
+ protected firstUpdated (): void {
53
+ this.updateAriaCurrentItem();
54
+ }
55
+
31
56
  render () {
32
- const { variant, isCompact } = this;
57
+ const { variant } = this;
33
58
 
34
59
  const classes = {
35
60
  'c-breadcrumb': true,
36
61
  [`c-breadcrumb--${variant}`]: true,
37
- 'c-breadcrumb--compact': isCompact,
38
62
  };
39
63
 
40
64
  return html`
@@ -43,7 +67,7 @@ export class PieBreadcrumb extends PieElement implements BreadcrumbProps {
43
67
  data-test-id="pie-breadcrumb"
44
68
  class="${classMap(classes)}">
45
69
  <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
46
- <slot></slot>
70
+ <slot @slotchange=${this._handleSlotChange}></slot>
47
71
  </ol>
48
72
  </nav>`;
49
73
  }
package/src/pie-breadcrumb-item/defs.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  export interface BreadcrumbItemProps {
2
- /**
3
- * The URL that the breadcrumb item links to
4
- */
5
- href?: string;
2
+ /**
3
+ * The URL that the breadcrumb item links to
4
+ */
5
+ href?: string;
6
+ /**
7
+ * Where to display the linked URL such as _self, _blank, _parent or _top
8
+ */
9
+ target?: string;
6
10
  }
package/src/pie-breadcrumb-item/index.ts CHANGED
@@ -2,6 +2,7 @@ import { html, unsafeCSS } from 'lit';
2
2
  import { property } from 'lit/decorators.js';
3
3
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import { RtlMixin, safeCustomElement } from '@justeattakeaway/pie-webc-core';
5
+ import { ifDefined } from 'lit/directives/if-defined.js';
5
6
 
6
7
  import '@justeattakeaway/pie-link';
7
8
  import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
@@ -20,8 +21,11 @@ export * from './defs';
20
21
  */
21
22
  @safeCustomElement('pie-breadcrumb-item')
22
23
  export class PieBreadcrumbItem extends RtlMixin(PieElement) implements BreadcrumbItemProps {
23
- @property({ type: String, reflect: true })
24
- public href = '';
24
+ @property({ type: String })
25
+ public href: BreadcrumbItemProps['href'];
26
+
27
+ @property({ type: String })
28
+ public target: BreadcrumbItemProps['target'];
25
29
 
26
30
  /**
27
31
  * Renders a separator icon between breadcrumb items.
@@ -50,8 +54,12 @@ export class PieBreadcrumbItem extends RtlMixin(PieElement) implements Breadcrum
50
54
  */
51
55
  private renderNavigationLink () {
52
56
  return html`
53
- <pie-link isStandalone underline="reversed" href="${this.href}">
54
- <span><slot></slot></span>
57
+ <pie-link
58
+ isStandalone
59
+ underline="reversed"
60
+ href="${ifDefined(this.href)}"
61
+ target="${ifDefined(this.target)}">
62
+ <span><slot></slot></span>
55
63
  </pie-link>
56
64
  `;
57
65
  }
package/dist/breadcrumb-Dq4s3GhG.js DELETED
@@ -1,13 +0,0 @@
1
- import { LitElement as e } from "lit";
2
- const r = class r extends e {
3
- willUpdate() {
4
- this.getAttribute("v") || this.setAttribute("v", r.v);
5
- }
6
- };
7
- r.v = "0.4.1";
8
- let t = r;
9
- const o = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);--breadcrumb-item-flex-direction: row;--breadcrumb-item-color: var(--dt-color-content-link);--breadcrumb-separator-color: var(--dt-color-content-subdued);--breadcrumb-separator-transform: none;background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);--breadcrumb-item-color: var(--dt-color-content-link-light);--breadcrumb-separator-color: var(--dt-color-content-light);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-item{display:flex;flex-direction:var(--breadcrumb-item-flex-direction);align-items:center;white-space:nowrap;gap:var(--dt-spacing-a)}.c-breadcrumb-item pie-link{--link-text-color: var(--breadcrumb-item-color);--link-font-weight: var(--dt-font-weight-bold)}.c-breadcrumb-separator{display:inline-flex;color:var(--breadcrumb-separator-color);transform:var(--breadcrumb-separator-transform)}:host([isCompact]) .c-breadcrumb{--breadcrumb-item-flex-direction: row-reverse;--breadcrumb-separator-transform: rotate(180deg)}:host([isCompact]) ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))){display:none}:host(:last-of-type) pie-link{--link-font-weight: var(--dt-font-weight-regular)}:host(:last-of-type) pie-link span{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(:last-of-type) .c-breadcrumb-separator{display:none}:host ::slotted(pie-breadcrumb-item:only-child){display:none}";
10
- export {
11
- t as P,
12
- o as s
13
- };