@justeattakeaway/pie-chip 0.2.1 → 0.4.0-alpha.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/README.md +4 -80
- package/custom-elements.json +16 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +51 -39
- package/dist/react.d.ts +10 -0
- package/dist/react.js +6 -5
- package/package.json +5 -4
- package/src/defs.ts +9 -0
- package/src/index.ts +12 -2
package/README.md
CHANGED
|
@@ -8,15 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-chip)
|
|
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)
|
|
19
|
-
|
|
20
11
|
## pie-chip
|
|
21
12
|
|
|
22
13
|
`pie-chip` is a Web Component built using the Lit library.
|
|
@@ -36,80 +27,13 @@ $ npm i @justeattakeaway/pie-chip
|
|
|
36
27
|
$ yarn add @justeattakeaway/pie-chip
|
|
37
28
|
```
|
|
38
29
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
### Importing the component
|
|
43
|
-
|
|
44
|
-
#### JavaScript
|
|
45
|
-
```js
|
|
46
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
|
-
import { PieChip } from '@justeattakeaway/pie-chip';
|
|
48
|
-
|
|
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-chip';
|
|
52
|
-
```
|
|
53
|
-
|
|
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 { PieChip } from '@justeattakeaway/pie-chip/dist/react';
|
|
60
|
-
```
|
|
61
|
-
|
|
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.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
## Peer Dependencies
|
|
30
|
+
## Documentation
|
|
68
31
|
|
|
69
|
-
|
|
70
|
-
> When using `pie-chip`, 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.
|
|
32
|
+
Visit [Chip | PIE Design System](https://pie.design/components/chip/overview) to view more information on this component.
|
|
71
33
|
|
|
34
|
+
## Questions
|
|
72
35
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
| Property | Type | Default | Description |
|
|
76
|
-
|---|---|---|---|
|
|
77
|
-
| variant | `String` | `default` | Variant of the chip, one of `variants` - `default`, `outline`, `ghost` |
|
|
78
|
-
| isSelected | `Boolean` | `false` | If `true`, applies the selected styles |
|
|
79
|
-
| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the chip |
|
|
80
|
-
| isDismissible | `Boolean` | `false` | If `true`, displays a close icon to dismiss the chip component. Can be only used if `isSelected` is set to true |
|
|
81
|
-
| disabled | `Boolean` | `false` | If `true`, disables the chip component |
|
|
82
|
-
|
|
83
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-chip` component:
|
|
84
|
-
|
|
85
|
-
```html
|
|
86
|
-
<!-- Native HTML -->
|
|
87
|
-
<pie-chip>Label</pie-chip>
|
|
88
|
-
|
|
89
|
-
<!-- JSX -->
|
|
90
|
-
<PieChip>Label</PieChip>
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
## Slots
|
|
94
|
-
|
|
95
|
-
| Slot | Description |
|
|
96
|
-
| Default slot | Used to pass text into the chip component. |
|
|
97
|
-
| icon | Used to pass in an icon to the chip component. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
|
|
98
|
-
|
|
99
|
-
### Using `pie-icons-webc` with `pie-chip` icon slot
|
|
100
|
-
|
|
101
|
-
We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
|
|
102
|
-
|
|
103
|
-
```html
|
|
104
|
-
<!--
|
|
105
|
-
Note that pie-chip and the icon that you want to use will need to be imported as components into your application.
|
|
106
|
-
See the `pie-icons-webc` README for more info on importing these icons.
|
|
107
|
-
-->
|
|
108
|
-
<pie-chip>
|
|
109
|
-
<icon-vegan slot="icon"></icon-vegan>
|
|
110
|
-
Label
|
|
111
|
-
</pie-chip>
|
|
112
|
-
```
|
|
36
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
113
37
|
|
|
114
38
|
## Contributing
|
|
115
39
|
|
package/custom-elements.json
CHANGED
|
@@ -118,6 +118,15 @@
|
|
|
118
118
|
"default": "false",
|
|
119
119
|
"attribute": "isDismissible"
|
|
120
120
|
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "field",
|
|
123
|
+
"name": "aria",
|
|
124
|
+
"type": {
|
|
125
|
+
"text": "ChipProps['aria']"
|
|
126
|
+
},
|
|
127
|
+
"privacy": "public",
|
|
128
|
+
"attribute": "aria"
|
|
129
|
+
},
|
|
121
130
|
{
|
|
122
131
|
"kind": "method",
|
|
123
132
|
"name": "renderSpinner",
|
|
@@ -201,6 +210,13 @@
|
|
|
201
210
|
},
|
|
202
211
|
"default": "false",
|
|
203
212
|
"fieldName": "isDismissible"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "aria",
|
|
216
|
+
"type": {
|
|
217
|
+
"text": "ChipProps['aria']"
|
|
218
|
+
},
|
|
219
|
+
"fieldName": "aria"
|
|
204
220
|
}
|
|
205
221
|
],
|
|
206
222
|
"superclass": {
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,16 @@ import type { CSSResult } from 'lit';
|
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
3
|
import type { TemplateResult } from 'lit';
|
|
4
4
|
|
|
5
|
+
export declare type AriaProps = {
|
|
6
|
+
close?: string;
|
|
7
|
+
label?: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
5
10
|
export declare interface ChipProps {
|
|
11
|
+
/**
|
|
12
|
+
* The ARIA labels used for various parts of the chip.
|
|
13
|
+
*/
|
|
14
|
+
aria?: AriaProps;
|
|
6
15
|
/**
|
|
7
16
|
* What style variant the chip should be such as default, outline or ghost.
|
|
8
17
|
*/
|
|
@@ -45,6 +54,7 @@ export declare class PieChip extends LitElement implements ChipProps {
|
|
|
45
54
|
isSelected: boolean;
|
|
46
55
|
isLoading: boolean;
|
|
47
56
|
isDismissible: boolean;
|
|
57
|
+
aria: ChipProps['aria'];
|
|
48
58
|
/**
|
|
49
59
|
* Template for the loading state
|
|
50
60
|
*
|
package/dist/index.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
3
|
-
import {
|
|
1
|
+
import { unsafeCSS as b, LitElement as g, html as s, nothing as p } from "lit";
|
|
2
|
+
import { property as n } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
4
|
+
import { validPropertyValues as m, defineCustomElement as f, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
|
|
4
5
|
import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
|
|
5
6
|
import "@justeattakeaway/pie-spinner";
|
|
6
|
-
const
|
|
7
|
-
`,
|
|
8
|
-
var
|
|
9
|
-
for (var
|
|
10
|
-
(
|
|
11
|
-
return r &&
|
|
7
|
+
const y = `*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-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);--icon-display-override: block;position:relative;display: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(--chip-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:pointer;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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-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),.c-chip[isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-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)))}.c-chip[variant=outline]:not([disabled],[isSelected],[isLoading]){--chip-border-color: var(--dt-color-border-strong)}.c-chip[variant=outline],.c-chip[variant=ghost]{--chip-bg-color: transparent}.c-chip[variant=outline]:hover:not(:disabled),.c-chip[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip[variant=outline]:active:not(:disabled),.c-chip[variant=outline][isLoading]:not(:disabled),.c-chip[variant=ghost]:active:not(:disabled),.c-chip[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip[isSelected]{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip[isSelected]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--chip-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[isSelected]:active:not(:disabled),.c-chip[isSelected][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--chip-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)))}.c-chip[isDismissible][isSelected]{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip[isDismissible][isSelected] .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:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip[isLoading]>*:not(.c-chip-spinner){visibility:hidden}.c-chip[isLoading] .c-chip-spinner{position:absolute}.c-chip[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.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)}
|
|
8
|
+
`, S = ["default", "outline", "ghost"], k = "pie-chip-close";
|
|
9
|
+
var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (d, i, c, r) => {
|
|
10
|
+
for (var e = r > 1 ? void 0 : r ? w(i, c) : i, t = d.length - 1, a; t >= 0; t--)
|
|
11
|
+
(a = d[t]) && (e = (r ? a(i, c, e) : a(e)) || e);
|
|
12
|
+
return r && e && x(i, c, e), e;
|
|
12
13
|
};
|
|
13
|
-
const
|
|
14
|
-
class o extends
|
|
14
|
+
const h = "pie-chip";
|
|
15
|
+
class o extends g {
|
|
15
16
|
constructor() {
|
|
16
17
|
super(...arguments), this.variant = "default", this.disabled = !1, this.isSelected = !1, this.isLoading = !1, this.isDismissible = !1;
|
|
17
18
|
}
|
|
@@ -21,12 +22,12 @@ class o extends b {
|
|
|
21
22
|
* @private
|
|
22
23
|
*/
|
|
23
24
|
renderSpinner() {
|
|
24
|
-
const { isSelected:
|
|
25
|
-
return
|
|
25
|
+
const { isSelected: i } = this;
|
|
26
|
+
return s`
|
|
26
27
|
<pie-spinner
|
|
27
28
|
class="c-chip-spinner"
|
|
28
29
|
size="small"
|
|
29
|
-
variant="${
|
|
30
|
+
variant="${i ? "inverse" : "secondary"}">
|
|
30
31
|
</pie-spinner>`;
|
|
31
32
|
}
|
|
32
33
|
/**
|
|
@@ -35,7 +36,7 @@ class o extends b {
|
|
|
35
36
|
* @private
|
|
36
37
|
*/
|
|
37
38
|
_handleCloseButtonClick() {
|
|
38
|
-
|
|
39
|
+
u(this, k);
|
|
39
40
|
}
|
|
40
41
|
/**
|
|
41
42
|
* Template for the dismissible state
|
|
@@ -43,61 +44,72 @@ class o extends b {
|
|
|
43
44
|
* @private
|
|
44
45
|
*/
|
|
45
46
|
renderCloseButton() {
|
|
46
|
-
|
|
47
|
+
var i;
|
|
48
|
+
return s`
|
|
47
49
|
<button
|
|
48
50
|
@click="${this._handleCloseButtonClick}"
|
|
49
51
|
?disabled=${this.disabled}
|
|
52
|
+
aria-label="${v((i = this.aria) == null ? void 0 : i.close)}"
|
|
50
53
|
class="c-chip-closeBtn"
|
|
51
54
|
data-test-id="chip-close-button">
|
|
52
55
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
53
56
|
</button>`;
|
|
54
57
|
}
|
|
55
58
|
render() {
|
|
59
|
+
var a;
|
|
56
60
|
const {
|
|
57
|
-
variant:
|
|
61
|
+
variant: i,
|
|
58
62
|
disabled: c,
|
|
59
63
|
isSelected: r,
|
|
60
|
-
isLoading:
|
|
64
|
+
isLoading: e,
|
|
61
65
|
isDismissible: t
|
|
62
66
|
} = this;
|
|
63
|
-
return
|
|
67
|
+
return s`
|
|
64
68
|
<div
|
|
69
|
+
aria-atomic="true"
|
|
70
|
+
aria-busy="${e}"
|
|
71
|
+
aria-current="${r}"
|
|
72
|
+
aria-label="${v((a = this.aria) == null ? void 0 : a.label)}"
|
|
73
|
+
aria-live="polite"
|
|
65
74
|
class="c-chip"
|
|
66
|
-
role="button"
|
|
67
|
-
tabindex="0"
|
|
68
75
|
data-test-id="pie-chip"
|
|
69
|
-
|
|
76
|
+
tabindex="0"
|
|
77
|
+
role="button"
|
|
78
|
+
variant="${i}"
|
|
70
79
|
?disabled="${c}"
|
|
71
80
|
?isSelected="${r}"
|
|
72
|
-
?isLoading="${
|
|
81
|
+
?isLoading="${e}"
|
|
73
82
|
?isDismissible="${t}">
|
|
74
83
|
<slot name="icon"></slot>
|
|
75
|
-
${
|
|
84
|
+
${e ? this.renderSpinner() : p}
|
|
76
85
|
<slot></slot>
|
|
77
86
|
${t && r ? this.renderCloseButton() : p}
|
|
78
87
|
</div>`;
|
|
79
88
|
}
|
|
80
89
|
}
|
|
81
|
-
o.styles =
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
90
|
+
o.styles = b(y);
|
|
91
|
+
l([
|
|
92
|
+
n(),
|
|
93
|
+
m(h, S, "primary")
|
|
85
94
|
], o.prototype, "variant", 2);
|
|
86
|
-
|
|
87
|
-
|
|
95
|
+
l([
|
|
96
|
+
n({ type: Boolean })
|
|
88
97
|
], o.prototype, "disabled", 2);
|
|
89
|
-
|
|
90
|
-
|
|
98
|
+
l([
|
|
99
|
+
n({ type: Boolean })
|
|
91
100
|
], o.prototype, "isSelected", 2);
|
|
92
|
-
|
|
93
|
-
|
|
101
|
+
l([
|
|
102
|
+
n({ type: Boolean })
|
|
94
103
|
], o.prototype, "isLoading", 2);
|
|
95
|
-
|
|
96
|
-
|
|
104
|
+
l([
|
|
105
|
+
n({ type: Boolean })
|
|
97
106
|
], o.prototype, "isDismissible", 2);
|
|
98
|
-
|
|
107
|
+
l([
|
|
108
|
+
n({ type: Object })
|
|
109
|
+
], o.prototype, "aria", 2);
|
|
110
|
+
f(h, o);
|
|
99
111
|
export {
|
|
100
|
-
|
|
112
|
+
k as ON_CHIP_CLOSE_EVENT,
|
|
101
113
|
o as PieChip,
|
|
102
|
-
|
|
114
|
+
S as variants
|
|
103
115
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -3,7 +3,16 @@ import type { LitElement } from 'lit';
|
|
|
3
3
|
import * as React_2 from 'react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
|
+
export declare type AriaProps = {
|
|
7
|
+
close?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
6
11
|
export declare interface ChipProps {
|
|
12
|
+
/**
|
|
13
|
+
* The ARIA labels used for various parts of the chip.
|
|
14
|
+
*/
|
|
15
|
+
aria?: AriaProps;
|
|
7
16
|
/**
|
|
8
17
|
* What style variant the chip should be such as default, outline or ghost.
|
|
9
18
|
*/
|
|
@@ -48,6 +57,7 @@ declare class PieChip_2 extends LitElement implements ChipProps {
|
|
|
48
57
|
isSelected: boolean;
|
|
49
58
|
isLoading: boolean;
|
|
50
59
|
isDismissible: boolean;
|
|
60
|
+
aria: ChipProps['aria'];
|
|
51
61
|
/**
|
|
52
62
|
* Template for the loading state
|
|
53
63
|
*
|
package/dist/react.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as i from "react";
|
|
2
2
|
import { createComponent as e } from "@lit/react";
|
|
3
3
|
import { PieChip as p } from "./index.js";
|
|
4
|
-
import { ON_CHIP_CLOSE_EVENT as
|
|
4
|
+
import { ON_CHIP_CLOSE_EVENT as f, variants as N } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
|
+
import "lit/directives/if-defined.js";
|
|
7
8
|
import "@justeattakeaway/pie-webc-core";
|
|
8
9
|
import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
|
|
9
10
|
import "@justeattakeaway/pie-spinner";
|
|
@@ -16,9 +17,9 @@ const o = e({
|
|
|
16
17
|
onPieChipClose: "pie-chip-close"
|
|
17
18
|
// when a user clicks close button.
|
|
18
19
|
}
|
|
19
|
-
}),
|
|
20
|
+
}), n = o;
|
|
20
21
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
f as ON_CHIP_CLOSE_EVENT,
|
|
23
|
+
n as PieChip,
|
|
24
|
+
N as variants
|
|
24
25
|
};
|
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.
|
|
4
|
+
"version": "0.4.0-alpha.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"watch": "run -T vite build --watch",
|
|
23
23
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
24
24
|
"test:ci": "yarn test",
|
|
25
|
+
"test:browsers-setup": "npx playwright-lit-setup",
|
|
25
26
|
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
26
27
|
"test:browsers:ci": "yarn test:browsers",
|
|
27
28
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_CHIP} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
|
@@ -35,9 +36,9 @@
|
|
|
35
36
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@justeattakeaway/pie-icons-webc": "0.19.
|
|
39
|
-
"@justeattakeaway/pie-spinner": "0.5.
|
|
40
|
-
"@justeattakeaway/pie-webc-core": "0.19.
|
|
39
|
+
"@justeattakeaway/pie-icons-webc": "0.19.1",
|
|
40
|
+
"@justeattakeaway/pie-spinner": "0.5.5",
|
|
41
|
+
"@justeattakeaway/pie-webc-core": "0.19.1"
|
|
41
42
|
},
|
|
42
43
|
"volta": {
|
|
43
44
|
"extends": "../../../package.json"
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
export const variants = ['default', 'outline', 'ghost'] as const;
|
|
2
2
|
|
|
3
|
+
export type AriaProps = {
|
|
4
|
+
close?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
};
|
|
7
|
+
|
|
3
8
|
export interface ChipProps {
|
|
9
|
+
/**
|
|
10
|
+
* The ARIA labels used for various parts of the chip.
|
|
11
|
+
*/
|
|
12
|
+
aria?: AriaProps;
|
|
4
13
|
/**
|
|
5
14
|
* What style variant the chip should be such as default, outline or ghost.
|
|
6
15
|
*/
|
package/src/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
LitElement, html, unsafeCSS, TemplateResult, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
6
|
|
|
6
7
|
import {
|
|
7
8
|
validPropertyValues, defineCustomElement, dispatchCustomEvent,
|
|
@@ -39,6 +40,9 @@ export class PieChip extends LitElement implements ChipProps {
|
|
|
39
40
|
@property({ type: Boolean })
|
|
40
41
|
public isDismissible = false;
|
|
41
42
|
|
|
43
|
+
@property({ type: Object })
|
|
44
|
+
public aria: ChipProps['aria'];
|
|
45
|
+
|
|
42
46
|
/**
|
|
43
47
|
* Template for the loading state
|
|
44
48
|
*
|
|
@@ -75,6 +79,7 @@ export class PieChip extends LitElement implements ChipProps {
|
|
|
75
79
|
<button
|
|
76
80
|
@click="${this._handleCloseButtonClick}"
|
|
77
81
|
?disabled=${this.disabled}
|
|
82
|
+
aria-label="${ifDefined(this.aria?.close)}"
|
|
78
83
|
class="c-chip-closeBtn"
|
|
79
84
|
data-test-id="chip-close-button">
|
|
80
85
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
@@ -92,10 +97,15 @@ export class PieChip extends LitElement implements ChipProps {
|
|
|
92
97
|
|
|
93
98
|
return html`
|
|
94
99
|
<div
|
|
100
|
+
aria-atomic="true"
|
|
101
|
+
aria-busy="${isLoading}"
|
|
102
|
+
aria-current="${isSelected}"
|
|
103
|
+
aria-label="${ifDefined(this.aria?.label)}"
|
|
104
|
+
aria-live="polite"
|
|
95
105
|
class="c-chip"
|
|
96
|
-
role="button"
|
|
97
|
-
tabindex="0"
|
|
98
106
|
data-test-id="pie-chip"
|
|
107
|
+
tabindex="0"
|
|
108
|
+
role="button"
|
|
99
109
|
variant="${variant}"
|
|
100
110
|
?disabled="${disabled}"
|
|
101
111
|
?isSelected="${isSelected}"
|