@justeattakeaway/pie-chip 0.12.0 → 0.12.2
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/README.md +93 -16
- package/custom-elements.json +2 -2
- package/dist/index.js +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,37 +1,114 @@
|
|
|
1
|
-
|
|
2
|
-
<img align="center" src="../../../readme_image.png" height="200" alt="">
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-chip
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-chip) | [Design Documentation](https://pie.design/components/chip) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-chip)
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-chip">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-chip.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-chip` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-chip` is a Web Component built using the Lit library. It offers a simple and accessible chip component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
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)
|
|
17
23
|
|
|
18
24
|
## Installation
|
|
19
25
|
|
|
20
|
-
To install
|
|
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.
|
|
21
27
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-chip
|
|
24
|
-
|
|
25
|
-
yarn add @justeattakeaway/pie-chip
|
|
26
|
-
```
|
|
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.
|
|
27
29
|
|
|
28
30
|
## Documentation
|
|
29
31
|
|
|
32
|
+
### Properties
|
|
33
|
+
|
|
34
|
+
| Prop | Options | Description | Default |
|
|
35
|
+
|----------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------|-------------|
|
|
36
|
+
| `variant` | `"default"`, `"outline"`, `"ghost"` | Sets the variant of the chip. | `"default"` |
|
|
37
|
+
| `disabled` | `true`, `false` | If true, disables the chip. | `false` |
|
|
38
|
+
| `isSelected` | `true`, `false` | If true, the chip component will apply the selected styles. | `false` |
|
|
39
|
+
| `isDismissible`| `true`, `false` | If true, displays a close icon. Can be only used if `isSelected` is set to true. | `false` |
|
|
40
|
+
| `isLoading` | `true`, `false` | If true, displays a loading indicator inside the chip. | `false` |
|
|
41
|
+
| `aria` | `{ label?: string, close?: string }` | Aria properties for the chip to help with making it accessible. | `undefined` |
|
|
42
|
+
|
|
43
|
+
### Slots
|
|
44
|
+
|
|
45
|
+
| Slot | Description |
|
|
46
|
+
|-----------|-----------------------------------------------------------|
|
|
47
|
+
| `default` | The default slot is used to pass text into the chip component. |
|
|
48
|
+
| `icon` | Used to pass an icon into the chip component. |
|
|
49
|
+
|
|
50
|
+
### CSS Variables
|
|
51
|
+
This component does not expose any CSS variables for style overrides.
|
|
52
|
+
|
|
53
|
+
### Events
|
|
54
|
+
|
|
55
|
+
| Event | Type | Description |
|
|
56
|
+
|-------------------|---------------|-----------------------------------------------------|
|
|
57
|
+
| `pie-chip-close` | `CustomEvent` | Triggered when the user interacts with the close icon. |
|
|
58
|
+
|
|
30
59
|
Visit [Chip | PIE Design System](https://pie.design/components/chip) to view more information on this component.
|
|
31
60
|
|
|
32
|
-
##
|
|
61
|
+
## Usage Examples
|
|
62
|
+
|
|
63
|
+
**For HTML:**
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
// import as module into a js file e.g. main.js
|
|
67
|
+
import '@justeattakeaway/pie-webc/components/chip.js'
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<pie-chip>String</pie-chip>
|
|
72
|
+
|
|
73
|
+
<script type="module" src="/main.js"></script>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
// Vue templates (using Nuxt 3)
|
|
80
|
+
import '@justeattakeaway/pie-webc/components/chip.js';
|
|
81
|
+
|
|
82
|
+
<pie-chip>String</pie-chip>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
**For React Applications:**
|
|
86
|
+
|
|
87
|
+
```jsx
|
|
88
|
+
import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js';
|
|
89
|
+
|
|
90
|
+
<PieChip>String</PieChip>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Icons
|
|
94
|
+
|
|
95
|
+
We recommend using [@justeattakeaway/pie-icons-webc](https://www.npmjs.com/package/@justeattakeaway/pie-icons-webc) when using the `icon` slot. Here is an example of how you would do this:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<!--
|
|
99
|
+
Note that pie-chip and the icons that you want to use will need to be imported as components into your application.
|
|
100
|
+
See the `pie-icons-webc` README for more info on importing these icons.
|
|
101
|
+
-->
|
|
102
|
+
<pie-chip>
|
|
103
|
+
<icon-vegan slot="icon"></icon-vegan>
|
|
104
|
+
String
|
|
105
|
+
</pie-chip>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
## Questions and Support
|
|
33
110
|
|
|
34
|
-
|
|
111
|
+
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).
|
|
35
112
|
|
|
36
113
|
## Contributing
|
|
37
114
|
|
package/custom-elements.json
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"type": {
|
|
36
36
|
"text": "DefaultProps"
|
|
37
37
|
},
|
|
38
|
-
"default": "{\n variant: 'default',\n disabled: false,\n isSelected: false,\n isLoading: false,\n isDismissible: false,\n}"
|
|
38
|
+
"default": "{\r\n variant: 'default',\r\n disabled: false,\r\n isSelected: false,\r\n isLoading: false,\r\n isDismissible: false,\r\n}"
|
|
39
39
|
}
|
|
40
40
|
],
|
|
41
41
|
"exports": [
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
],
|
|
138
|
-
"description": "Handler to prevent click events\nwhen the chip is disabled or dismissible"
|
|
138
|
+
"description": "Handler to prevent click events\r\nwhen the chip is disabled or dismissible"
|
|
139
139
|
},
|
|
140
140
|
{
|
|
141
141
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ const h = class h extends u {
|
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
h.v = "0.12.
|
|
13
|
+
h.v = "0.12.2";
|
|
14
14
|
let b = h;
|
|
15
15
|
const C = "*,*:after,*:before{box-sizing:inherit}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;--icon-display-override: block;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.c-chip.c-chip--outline:not(.is-disabled,.c-chip--selected){--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.c-chip.c-chip--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip.c-chip--selected:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--selected:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", $ = ["default", "outline", "ghost"], S = "pie-chip-close", l = {
|
|
16
16
|
variant: "default",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-chip",
|
|
3
3
|
"description": "PIE Design System Chip built using Web Components",
|
|
4
|
-
"version": "0.12.
|
|
4
|
+
"version": "0.12.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-icons-webc": "1.10.
|
|
49
|
-
"@justeattakeaway/pie-spinner": "1.2.
|
|
50
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
48
|
+
"@justeattakeaway/pie-icons-webc": "1.10.1",
|
|
49
|
+
"@justeattakeaway/pie-spinner": "1.2.1",
|
|
50
|
+
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
51
51
|
},
|
|
52
52
|
"volta": {
|
|
53
53
|
"extends": "../../../package.json"
|