@justeattakeaway/pie-chip 0.2.1 → 0.3.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 +1 -0
- 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 +4 -4
- package/src/defs.ts +9 -0
- package/src/index.ts +12 -2
package/README.md
CHANGED
|
@@ -79,6 +79,7 @@ import { PieChip } from '@justeattakeaway/pie-chip/dist/react';
|
|
|
79
79
|
| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the chip |
|
|
80
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
81
|
| disabled | `Boolean` | `false` | If `true`, disables the chip component |
|
|
82
|
+
| aria | `Object` | `{}` | An object representing the aria labels for the close button & chip |
|
|
82
83
|
|
|
83
84
|
In your markup or JSX, you can then use these to set the properties for the `pie-chip` component:
|
|
84
85
|
|
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.3.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@justeattakeaway/pie-icons-webc": "0.19.
|
|
39
|
-
"@justeattakeaway/pie-spinner": "0.5.
|
|
40
|
-
"@justeattakeaway/pie-webc-core": "0.19.
|
|
38
|
+
"@justeattakeaway/pie-icons-webc": "0.19.1",
|
|
39
|
+
"@justeattakeaway/pie-spinner": "0.5.5",
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.19.1"
|
|
41
41
|
},
|
|
42
42
|
"volta": {
|
|
43
43
|
"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}"
|