@justeattakeaway/pie-breadcrumb 0.5.0 → 0.6.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.
Files changed (8) hide show
  1. package/README.md +81 -55
  2. package/custom-elements.json +2 -2
  3. package/dist/breadcrumb-BUWfpRlq.js +13 -0
  4. package/dist/index.js +1 -1
  5. package/dist/pie-breadcrumb-item/index.js +1 -1
  6. package/package.json +10 -2
  7. package/src/breadcrumb.scss +20 -10
  8. package/dist/breadcrumb-bP8yihR9.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 hideCurrentPage: false,\r\n}"
29
+ "default": "{\n variant: 'default',\n isCompact: false,\n hideCurrentPage: false,\n}"
30
30
  }
31
31
  ],
32
32
  "exports": [
@@ -173,7 +173,7 @@
173
173
  "kind": "method",
174
174
  "name": "renderSeparator",
175
175
  "privacy": "private",
176
- "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.",
177
177
  "return": {
178
178
  "type": {
179
179
  "text": "TemplateResult"
package/dist/breadcrumb-BUWfpRlq.js ADDED
@@ -0,0 +1,13 @@
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.6.1";
8
+ let t = 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-block-start:var(--dt-spacing-a);padding-block-end:var(--dt-spacing-a)}.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);padding-inline-start:var(--dt-spacing-d);padding-inline-end:var(--dt-spacing-d)}.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::part(base):hover,:host(:last-of-type) pie-link::part(base):active{--link-text-decoration: none}: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
+ t as P,
12
+ o as s
13
+ };
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { unsafeCSS as u, html as m } from "lit";
2
2
  import { property as p } from "lit/decorators.js";
3
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 h, P as C } from "./breadcrumb-bP8yihR9.js";
5
+ import { s as h, P as C } from "./breadcrumb-BUWfpRlq.js";
6
6
  const v = ["default", "scrim"], i = {
7
7
  variant: "default",
8
8
  isCompact: !1,
package/dist/pie-breadcrumb-item/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { html as r, unsafeCSS as d } from "lit";
2
2
  import { property as c } from "lit/decorators.js";
3
- import { P as f, s as h } from "../breadcrumb-bP8yihR9.js";
3
+ import { P as f, s as h } from "../breadcrumb-BUWfpRlq.js";
4
4
  import { RtlMixin as u, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
5
5
  import { ifDefined as l } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-link";
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-breadcrumb",
3
3
  "description": "PIE Design System Breadcrumb built using Web Components",
4
- "version": "0.5.0",
4
+ "version": "0.6.1",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/justeattakeaway/pie",
8
+ "directory": "packages/components/pie-breadcrumb"
9
+ },
10
+ "homepage": "https://pie.design/components/breadcrumb/code/",
5
11
  "type": "module",
6
12
  "main": "dist/index.js",
7
13
  "module": "dist/index.js",
@@ -13,7 +19,7 @@
13
19
  "**/*.d.ts"
14
20
  ],
15
21
  "pieMetadata": {
16
- "componentStatus": "alpha"
22
+ "componentStatus": "beta"
17
23
  },
18
24
  "scripts": {
19
25
  "build": "run -T vite build",
@@ -39,6 +45,8 @@
39
45
  "cem-plugin-module-file-extensions": "0.0.5"
40
46
  },
41
47
  "dependencies": {
48
+ "@justeattakeaway/pie-icons-webc": "1.12.0",
49
+ "@justeattakeaway/pie-link": "1.2.5",
42
50
  "@justeattakeaway/pie-webc-core": "1.0.0"
43
51
  },
44
52
  "volta": {
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;
@@ -8,7 +16,8 @@
8
16
  --breadcrumb-separator-transform: none;
9
17
 
10
18
  background-color: var(--breadcrumb-background-color);
11
- padding: var(--dt-spacing-a) var(--dt-spacing-d);
19
+ padding-block-start: var(--dt-spacing-a);
20
+ padding-block-end: var(--dt-spacing-a);
12
21
  }
13
22
 
14
23
  .c-breadcrumb--scrim {
@@ -17,6 +26,8 @@
17
26
  --breadcrumb-separator-color: var(--dt-color-content-light);
18
27
 
19
28
  border-radius: var(--dt-radius-rounded-e);
29
+ padding-inline-start: var(--dt-spacing-d);
30
+ padding-inline-end: var(--dt-spacing-d);
20
31
  }
21
32
 
22
33
  .c-breadcrumb-list {
@@ -33,12 +44,12 @@
33
44
  align-items: center;
34
45
  white-space: nowrap;
35
46
  gap: var(--dt-spacing-a);
36
-
47
+
37
48
  pie-link {
38
49
  --link-text-color: var(--breadcrumb-item-color);
39
50
  --link-font-weight: var(--dt-font-weight-bold);
40
51
  }
41
- }
52
+ }
42
53
 
43
54
  .c-breadcrumb-separator {
44
55
  display: inline-flex;
@@ -51,7 +62,7 @@
51
62
  --breadcrumb-item-flex-direction: row-reverse;
52
63
  --breadcrumb-separator-transform: rotate(180deg);
53
64
  }
54
-
65
+
55
66
  ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2))) {
56
67
  display: none;
57
68
  }
@@ -67,6 +78,11 @@
67
78
  pie-link {
68
79
  --link-font-weight: var(--dt-font-weight-regular);
69
80
 
81
+ &::part(base):hover,
82
+ &::part(base):active {
83
+ --link-text-decoration: none;
84
+ }
85
+
70
86
  span {
71
87
  max-width: 250px;
72
88
  white-space: nowrap;
@@ -79,9 +95,3 @@
79
95
  display: none;
80
96
  }
81
97
  }
82
-
83
- :host {
84
- ::slotted(pie-breadcrumb-item:only-child) {
85
- display: none;
86
- }
87
- }
package/dist/breadcrumb-bP8yihR9.js DELETED
@@ -1,13 +0,0 @@
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.5.0";
8
- let e = 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([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}:host ::slotted(pie-breadcrumb-item:only-child){display:none}";
10
- export {
11
- e as P,
12
- o as s
13
- };