@justeattakeaway/pie-chip 0.12.11 → 0.14.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 +79 -28
- package/custom-elements.json +56 -26
- package/dist/index.d.ts +32 -23
- package/dist/index.js +167 -98
- package/dist/react.d.ts +34 -24
- package/dist/react.js +13 -11
- package/package.json +5 -5
- package/src/chip.scss +32 -0
- package/src/defs.ts +9 -8
- package/src/index.ts +147 -51
- package/src/react.ts +4 -2
package/dist/index.js
CHANGED
|
@@ -1,143 +1,212 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { classMap as
|
|
5
|
-
import {
|
|
1
|
+
import { LitElement as _, html as p, nothing as x, unsafeCSS as S } from "lit";
|
|
2
|
+
import { property as n } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as d } from "lit/directives/if-defined.js";
|
|
4
|
+
import { classMap as g } from "lit/directives/class-map.js";
|
|
5
|
+
import { DelegatesFocusMixin as D, validPropertyValues as y, safeCustomElement as B } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
|
|
7
7
|
import "@justeattakeaway/pie-spinner";
|
|
8
|
-
const
|
|
8
|
+
const v = class v extends _ {
|
|
9
9
|
willUpdate() {
|
|
10
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
10
|
+
this.getAttribute("v") || this.setAttribute("v", v.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
const
|
|
13
|
+
v.v = "0.14.0";
|
|
14
|
+
let m = v;
|
|
15
|
+
const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.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-family:inherit;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;--chip-color: var(--dt-color-content-interactive-secondary-solid)}.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;--chip-color: var(--dt-color-content-disabled-solid)}.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}[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}[type=checkbox]:focus-visible{outline:none}[type=checkbox]:focus-visible+.c-chip{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)}", z = ["default", "outline", "ghost"], P = ["button", "checkbox"], a = {
|
|
16
16
|
variant: "default",
|
|
17
17
|
disabled: !1,
|
|
18
18
|
isSelected: !1,
|
|
19
19
|
isLoading: !1,
|
|
20
|
-
isDismissible: !1
|
|
20
|
+
isDismissible: !1,
|
|
21
|
+
type: "button"
|
|
21
22
|
};
|
|
22
|
-
var
|
|
23
|
-
for (var e = s > 1 ? void 0 : s ?
|
|
24
|
-
(
|
|
25
|
-
return s && e &&
|
|
23
|
+
var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (i, o, t, s) => {
|
|
24
|
+
for (var e = s > 1 ? void 0 : s ? O(o, t) : o, c = i.length - 1, h; c >= 0; c--)
|
|
25
|
+
(h = i[c]) && (e = (s ? h(o, t, e) : h(e)) || e);
|
|
26
|
+
return s && e && E(o, t, e), e;
|
|
26
27
|
};
|
|
27
|
-
const
|
|
28
|
-
let
|
|
28
|
+
const k = "pie-chip";
|
|
29
|
+
let r = class extends D(m) {
|
|
29
30
|
constructor() {
|
|
30
|
-
super(...arguments), this.variant =
|
|
31
|
+
super(...arguments), this.variant = a.variant, this.type = a.type, this.disabled = a.disabled, this.isSelected = a.isSelected, this.isLoading = a.isLoading, this.isDismissible = a.isDismissible;
|
|
31
32
|
}
|
|
32
33
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
34
|
+
* Handles the change event for the native checkbox.
|
|
35
|
+
* This component is controlled, so it does not set its own state.
|
|
36
|
+
* It simply forwards the native change event.
|
|
36
37
|
* @private
|
|
37
38
|
*/
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
_onCheckboxChange() {
|
|
40
|
+
const i = new Event("change", { bubbles: !0, composed: !0 });
|
|
41
|
+
this.dispatchEvent(i);
|
|
40
42
|
}
|
|
41
43
|
/**
|
|
42
|
-
* Template for the loading state
|
|
43
|
-
*
|
|
44
|
+
* Template for the loading state spinner.
|
|
44
45
|
* @private
|
|
45
46
|
*/
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
return
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
47
|
+
_renderSpinner() {
|
|
48
|
+
const i = this.isSelected ? "inverse" : "secondary";
|
|
49
|
+
return p`
|
|
50
|
+
<pie-spinner
|
|
51
|
+
class="c-chip-spinner"
|
|
52
|
+
size="small"
|
|
53
|
+
variant="${i}">
|
|
54
|
+
</pie-spinner>`;
|
|
54
55
|
}
|
|
55
56
|
/**
|
|
56
|
-
*
|
|
57
|
-
*
|
|
57
|
+
* Renders the core content of the chip (icon, text, spinner).
|
|
58
58
|
* @private
|
|
59
59
|
*/
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
_renderContent() {
|
|
61
|
+
return p`
|
|
62
|
+
<slot name="icon"></slot>
|
|
63
|
+
${this.isLoading ? this._renderSpinner() : x}
|
|
64
|
+
<slot></slot>
|
|
65
|
+
`;
|
|
62
66
|
}
|
|
63
67
|
/**
|
|
64
|
-
* Template for the
|
|
65
|
-
*
|
|
68
|
+
* Template for the checkbox variant.
|
|
69
|
+
* This uses a visually hidden native checkbox for accessibility and form integration.
|
|
66
70
|
* @private
|
|
67
71
|
*/
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
72
|
+
_renderCheckbox() {
|
|
73
|
+
const {
|
|
74
|
+
aria: i,
|
|
75
|
+
variant: o,
|
|
76
|
+
disabled: t,
|
|
77
|
+
isSelected: s,
|
|
78
|
+
isLoading: e
|
|
79
|
+
} = this, c = {
|
|
80
|
+
"c-chip": !0,
|
|
81
|
+
[`c-chip--${o}`]: !0,
|
|
82
|
+
"c-chip--selected": s,
|
|
83
|
+
"is-disabled": t,
|
|
84
|
+
"is-loading": e
|
|
85
|
+
};
|
|
86
|
+
return p`
|
|
87
|
+
<input
|
|
88
|
+
data-test-id="chip-checkbox-input"
|
|
89
|
+
type="checkbox"
|
|
90
|
+
id="pie-chip"
|
|
91
|
+
aria-label="${d(i == null ? void 0 : i.label)}"
|
|
92
|
+
?checked=${s}
|
|
93
|
+
?disabled=${t}
|
|
94
|
+
@change="${this._onCheckboxChange}"/>
|
|
95
|
+
<label
|
|
96
|
+
for="pie-chip"
|
|
97
|
+
class=${g(c)}
|
|
98
|
+
data-test-id="pie-chip">
|
|
99
|
+
${this._renderContent()}
|
|
100
|
+
</label>`;
|
|
79
101
|
}
|
|
80
|
-
|
|
81
|
-
var m;
|
|
102
|
+
_renderButton() {
|
|
82
103
|
const {
|
|
83
|
-
|
|
104
|
+
aria: i,
|
|
105
|
+
variant: o,
|
|
84
106
|
disabled: t,
|
|
85
|
-
isSelected:
|
|
107
|
+
isSelected: s,
|
|
108
|
+
isLoading: e
|
|
109
|
+
} = this, c = {
|
|
110
|
+
"c-chip": !0,
|
|
111
|
+
[`c-chip--${o}`]: !0,
|
|
112
|
+
"c-chip--selected": s,
|
|
113
|
+
"is-disabled": t,
|
|
114
|
+
"is-loading": e
|
|
115
|
+
};
|
|
116
|
+
return p`
|
|
117
|
+
<button
|
|
118
|
+
id="pie-chip"
|
|
119
|
+
type="button"
|
|
120
|
+
class=${g(c)}
|
|
121
|
+
aria-busy="${d(e)}"
|
|
122
|
+
aria-haspopup="${d(i == null ? void 0 : i.haspopup)}"
|
|
123
|
+
aria-expanded="${d(i == null ? void 0 : i.expanded)}"
|
|
124
|
+
aria-pressed="${s}"
|
|
125
|
+
aria-label="${d(i == null ? void 0 : i.label)}"
|
|
126
|
+
?disabled=${t}
|
|
127
|
+
data-test-id="pie-chip">
|
|
128
|
+
${this._renderContent()}
|
|
129
|
+
</button>`;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* Template for the dismissible variant.
|
|
133
|
+
* @private
|
|
134
|
+
*/
|
|
135
|
+
_renderDismissible() {
|
|
136
|
+
var u, f;
|
|
137
|
+
const {
|
|
138
|
+
variant: i,
|
|
139
|
+
disabled: o,
|
|
140
|
+
isSelected: t,
|
|
86
141
|
isLoading: s,
|
|
87
142
|
isDismissible: e
|
|
88
|
-
} = this,
|
|
143
|
+
} = this, c = e && t, h = {
|
|
89
144
|
"c-chip": !0,
|
|
90
145
|
[`c-chip--${i}`]: !0,
|
|
91
|
-
"c-chip--selected":
|
|
92
|
-
"is-dismissible":
|
|
93
|
-
"is-disabled":
|
|
146
|
+
"c-chip--selected": t,
|
|
147
|
+
"is-dismissible": c,
|
|
148
|
+
"is-disabled": o,
|
|
94
149
|
"is-loading": s
|
|
150
|
+
}, w = (b) => {
|
|
151
|
+
(o || e) && (b.preventDefault(), b.stopPropagation());
|
|
152
|
+
}, $ = (b) => {
|
|
153
|
+
b.stopPropagation();
|
|
154
|
+
const C = new Event("close", { bubbles: !0, composed: !0 });
|
|
155
|
+
this.dispatchEvent(C);
|
|
95
156
|
};
|
|
96
|
-
return
|
|
157
|
+
return p`
|
|
97
158
|
<div
|
|
98
|
-
role="${p(r ? void 0 : "button")}"
|
|
99
|
-
tabindex="${p(r ? void 0 : "0")}"
|
|
100
|
-
aria-atomic="true"
|
|
101
159
|
aria-busy="${s}"
|
|
102
|
-
aria-current="${
|
|
103
|
-
aria-label="${
|
|
104
|
-
|
|
105
|
-
class=${x(n)}
|
|
160
|
+
aria-current="${t}"
|
|
161
|
+
aria-label="${d((u = this.aria) == null ? void 0 : u.label)}"
|
|
162
|
+
class=${g(h)}
|
|
106
163
|
data-test-id="pie-chip"
|
|
107
|
-
@click
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
164
|
+
@click=${w}>
|
|
165
|
+
${this._renderContent()}
|
|
166
|
+
${c ? p`<button
|
|
167
|
+
@click="${$}"
|
|
168
|
+
?disabled=${this.disabled}
|
|
169
|
+
aria-label="${d((f = this.aria) == null ? void 0 : f.close)}"
|
|
170
|
+
class="c-chip-closeBtn"
|
|
171
|
+
data-test-id="chip-close-button">
|
|
172
|
+
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
173
|
+
</button>` : x}
|
|
112
174
|
</div>`;
|
|
113
175
|
}
|
|
176
|
+
render() {
|
|
177
|
+
return this.isDismissible ? this._renderDismissible() : this.type === "checkbox" ? this._renderCheckbox() : this._renderButton();
|
|
178
|
+
}
|
|
114
179
|
};
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
y(
|
|
119
|
-
],
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
180
|
+
r.styles = S(L);
|
|
181
|
+
l([
|
|
182
|
+
n({ type: String }),
|
|
183
|
+
y(k, z, a.variant)
|
|
184
|
+
], r.prototype, "variant", 2);
|
|
185
|
+
l([
|
|
186
|
+
n({ type: String }),
|
|
187
|
+
y(k, P, a.type)
|
|
188
|
+
], r.prototype, "type", 2);
|
|
189
|
+
l([
|
|
190
|
+
n({ type: Boolean, reflect: !0 })
|
|
191
|
+
], r.prototype, "disabled", 2);
|
|
192
|
+
l([
|
|
193
|
+
n({ type: Boolean, reflect: !0 })
|
|
194
|
+
], r.prototype, "isSelected", 2);
|
|
195
|
+
l([
|
|
196
|
+
n({ type: Boolean, reflect: !0 })
|
|
197
|
+
], r.prototype, "isLoading", 2);
|
|
198
|
+
l([
|
|
199
|
+
n({ type: Boolean })
|
|
200
|
+
], r.prototype, "isDismissible", 2);
|
|
201
|
+
l([
|
|
202
|
+
n({ type: Object })
|
|
203
|
+
], r.prototype, "aria", 2);
|
|
204
|
+
r = l([
|
|
205
|
+
B("pie-chip")
|
|
206
|
+
], r);
|
|
138
207
|
export {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
208
|
+
r as PieChip,
|
|
209
|
+
a as defaultProps,
|
|
210
|
+
P as types,
|
|
211
|
+
z as variants
|
|
143
212
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ import { TemplateResult } from 'lit';
|
|
|
7
7
|
declare type AriaProps = {
|
|
8
8
|
close?: string;
|
|
9
9
|
label?: string;
|
|
10
|
+
haspopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
|
|
11
|
+
expanded?: boolean;
|
|
10
12
|
};
|
|
11
13
|
|
|
12
14
|
export declare interface ChipProps {
|
|
@@ -35,69 +37,77 @@ export declare interface ChipProps {
|
|
|
35
37
|
* Can be only used if `isSelected` is set to true
|
|
36
38
|
*/
|
|
37
39
|
isDismissible?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Sets the functional type of the chip. Can be `button` or `checkbox`. Defaults to `button`.
|
|
42
|
+
*/
|
|
43
|
+
type?: typeof types[number];
|
|
38
44
|
}
|
|
39
45
|
|
|
40
46
|
export declare type DefaultProps = ComponentDefaultProps<ChipProps, keyof Omit<ChipProps, 'aria'>>;
|
|
41
47
|
|
|
42
48
|
export declare const defaultProps: DefaultProps;
|
|
43
49
|
|
|
44
|
-
/**
|
|
45
|
-
* Event name for when the chip is closed.
|
|
46
|
-
*
|
|
47
|
-
* @constant
|
|
48
|
-
*/
|
|
49
|
-
export declare const ON_CHIP_CLOSE_EVENT = "pie-chip-close";
|
|
50
|
-
|
|
51
50
|
export declare const PieChip: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<ChipProps> & React_2.RefAttributes<PieChip_2> & PieChipEvents & ReactBaseType>;
|
|
52
51
|
|
|
53
52
|
/**
|
|
54
53
|
* @tagname pie-chip
|
|
55
54
|
* @slot icon - The icon slot
|
|
56
55
|
* @slot - Default slot
|
|
57
|
-
* @event {
|
|
56
|
+
* @event {Event} close - when a user clicks the close button.
|
|
57
|
+
* @event {Event} change - when a user interacts with the chip of type checkbox.
|
|
58
58
|
*/
|
|
59
|
-
declare class PieChip_2 extends
|
|
59
|
+
declare class PieChip_2 extends PieChip_base implements ChipProps {
|
|
60
60
|
variant: "default" | "outline" | "ghost";
|
|
61
|
+
type: "button" | "checkbox";
|
|
61
62
|
disabled: boolean;
|
|
62
63
|
isSelected: boolean;
|
|
63
64
|
isLoading: boolean;
|
|
64
65
|
isDismissible: boolean;
|
|
65
66
|
aria: ChipProps['aria'];
|
|
66
67
|
/**
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
68
|
+
* Handles the change event for the native checkbox.
|
|
69
|
+
* This component is controlled, so it does not set its own state.
|
|
70
|
+
* It simply forwards the native change event.
|
|
70
71
|
* @private
|
|
71
72
|
*/
|
|
72
|
-
private
|
|
73
|
+
private _onCheckboxChange;
|
|
73
74
|
/**
|
|
74
|
-
* Template for the loading state
|
|
75
|
-
*
|
|
75
|
+
* Template for the loading state spinner.
|
|
76
76
|
* @private
|
|
77
77
|
*/
|
|
78
|
-
private
|
|
78
|
+
private _renderSpinner;
|
|
79
79
|
/**
|
|
80
|
-
*
|
|
81
|
-
*
|
|
80
|
+
* Renders the core content of the chip (icon, text, spinner).
|
|
82
81
|
* @private
|
|
83
82
|
*/
|
|
84
|
-
private
|
|
83
|
+
private _renderContent;
|
|
85
84
|
/**
|
|
86
|
-
* Template for the
|
|
87
|
-
*
|
|
85
|
+
* Template for the checkbox variant.
|
|
86
|
+
* This uses a visually hidden native checkbox for accessibility and form integration.
|
|
88
87
|
* @private
|
|
89
88
|
*/
|
|
90
|
-
private
|
|
91
|
-
|
|
89
|
+
private _renderCheckbox;
|
|
90
|
+
private _renderButton;
|
|
91
|
+
/**
|
|
92
|
+
* Template for the dismissible variant.
|
|
93
|
+
* @private
|
|
94
|
+
*/
|
|
95
|
+
private _renderDismissible;
|
|
96
|
+
render(): TemplateResult;
|
|
92
97
|
static styles: CSSResult;
|
|
93
98
|
}
|
|
94
99
|
|
|
100
|
+
declare const PieChip_base: typeof PieElement;
|
|
101
|
+
|
|
95
102
|
declare type PieChipEvents = {
|
|
96
|
-
|
|
103
|
+
onClose?: (event: Event) => void;
|
|
104
|
+
onChange?: (event: Event) => void;
|
|
97
105
|
};
|
|
98
106
|
|
|
99
107
|
declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
|
|
100
108
|
|
|
109
|
+
export declare const types: readonly ["button", "checkbox"];
|
|
110
|
+
|
|
101
111
|
export declare const variants: readonly ["default", "outline", "ghost"];
|
|
102
112
|
|
|
103
113
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { createComponent as
|
|
3
|
-
import { PieChip as
|
|
4
|
-
import {
|
|
5
|
-
const
|
|
2
|
+
import { createComponent as o } from "@lit/react";
|
|
3
|
+
import { PieChip as t } from "./index.js";
|
|
4
|
+
import { defaultProps as n, types as c, variants as C } from "./index.js";
|
|
5
|
+
const i = o({
|
|
6
6
|
displayName: "PieChip",
|
|
7
|
-
elementClass:
|
|
7
|
+
elementClass: t,
|
|
8
8
|
react: e,
|
|
9
9
|
tagName: "pie-chip",
|
|
10
10
|
events: {
|
|
11
|
-
|
|
12
|
-
// when a user clicks close button.
|
|
11
|
+
onClose: "close",
|
|
12
|
+
// when a user clicks the close button.
|
|
13
|
+
onChange: "change"
|
|
14
|
+
// when a user interacts with the chip of type checkbox.
|
|
13
15
|
}
|
|
14
|
-
}), r =
|
|
16
|
+
}), r = i;
|
|
15
17
|
export {
|
|
16
|
-
C as ON_CHIP_CLOSE_EVENT,
|
|
17
18
|
r as PieChip,
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
n as defaultProps,
|
|
20
|
+
c as types,
|
|
21
|
+
C as variants
|
|
20
22
|
};
|
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.14.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -40,14 +40,14 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
43
|
+
"@justeattakeaway/pie-css": "0.22.0",
|
|
44
44
|
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
49
|
-
"@justeattakeaway/pie-spinner": "1.
|
|
50
|
-
"@justeattakeaway/pie-webc-core": "
|
|
48
|
+
"@justeattakeaway/pie-icons-webc": "1.15.0",
|
|
49
|
+
"@justeattakeaway/pie-spinner": "1.3.0",
|
|
50
|
+
"@justeattakeaway/pie-webc-core": "2.0.0"
|
|
51
51
|
},
|
|
52
52
|
"volta": {
|
|
53
53
|
"extends": "../../../package.json"
|
package/src/chip.scss
CHANGED
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
display: inline-block;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
:host([disabled]),
|
|
8
|
+
:host([isLoading]) {
|
|
9
|
+
pointer-events: none;
|
|
10
|
+
}
|
|
11
|
+
|
|
7
12
|
.c-chip {
|
|
8
13
|
--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
|
|
9
14
|
--chip-color: var(--dt-color-content-interactive-secondary);
|
|
@@ -39,6 +44,7 @@
|
|
|
39
44
|
user-select: none;
|
|
40
45
|
min-width: var(--chip-min-width);
|
|
41
46
|
|
|
47
|
+
font-family: inherit;
|
|
42
48
|
@include p.font-size(--dt-font-interactive-xs-size);
|
|
43
49
|
@include p.line-height(--dt-font-interactive-xs-line-height);
|
|
44
50
|
font-weight: var(--dt-font-weight-bold);
|
|
@@ -56,6 +62,7 @@
|
|
|
56
62
|
&.c-chip--outline,
|
|
57
63
|
&.c-chip--ghost {
|
|
58
64
|
--int-states-mixin-bg-color: transparent;
|
|
65
|
+
--chip-color: var(--dt-color-content-interactive-secondary-solid);
|
|
59
66
|
|
|
60
67
|
@include p.interactive-states('--dt-color-transparent', 'transparent');
|
|
61
68
|
}
|
|
@@ -88,6 +95,7 @@
|
|
|
88
95
|
|
|
89
96
|
&.c-chip--ghost {
|
|
90
97
|
--int-states-mixin-bg-color: transparent;
|
|
98
|
+
--chip-color: var(--dt-color-content-disabled-solid);
|
|
91
99
|
}
|
|
92
100
|
}
|
|
93
101
|
|
|
@@ -121,6 +129,30 @@
|
|
|
121
129
|
}
|
|
122
130
|
}
|
|
123
131
|
|
|
132
|
+
[type="checkbox"] {
|
|
133
|
+
// the p.visually-hidden mixin doesn't properly work on checkboxes
|
|
134
|
+
position: absolute;
|
|
135
|
+
width: 1px;
|
|
136
|
+
height: 1px;
|
|
137
|
+
padding: 0;
|
|
138
|
+
margin: -1px;
|
|
139
|
+
border: 0;
|
|
140
|
+
|
|
141
|
+
overflow: hidden;
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
|
|
144
|
+
clip: rect(0, 0, 0, 0);
|
|
145
|
+
clip-path: inset(50%);
|
|
146
|
+
|
|
147
|
+
&:focus-visible {
|
|
148
|
+
outline: none;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
[type="checkbox"]:focus-visible + .c-chip {
|
|
153
|
+
@include p.focus;
|
|
154
|
+
}
|
|
155
|
+
|
|
124
156
|
::slotted(svg) {
|
|
125
157
|
display: block;
|
|
126
158
|
height: var(--icon-size-override);
|
package/src/defs.ts
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
3
|
export const variants = ['default', 'outline', 'ghost'] as const;
|
|
4
|
+
export const types = ['button', 'checkbox'] as const;
|
|
4
5
|
|
|
5
6
|
type AriaProps = {
|
|
6
7
|
close?: string;
|
|
7
8
|
label?: string;
|
|
9
|
+
haspopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
|
|
10
|
+
expanded?: boolean;
|
|
8
11
|
};
|
|
9
12
|
|
|
10
13
|
export interface ChipProps {
|
|
@@ -33,15 +36,12 @@ export interface ChipProps {
|
|
|
33
36
|
* Can be only used if `isSelected` is set to true
|
|
34
37
|
*/
|
|
35
38
|
isDismissible?: boolean;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Event name for when the chip is closed.
|
|
40
|
-
*
|
|
41
|
-
* @constant
|
|
42
|
-
*/
|
|
43
39
|
|
|
44
|
-
|
|
40
|
+
/**
|
|
41
|
+
* Sets the functional type of the chip. Can be `button` or `checkbox`. Defaults to `button`.
|
|
42
|
+
*/
|
|
43
|
+
type?: typeof types[number];
|
|
44
|
+
}
|
|
45
45
|
|
|
46
46
|
export type DefaultProps = ComponentDefaultProps<ChipProps, keyof Omit<ChipProps, 'aria'>>;
|
|
47
47
|
|
|
@@ -51,4 +51,5 @@ export const defaultProps: DefaultProps = {
|
|
|
51
51
|
isSelected: false,
|
|
52
52
|
isLoading: false,
|
|
53
53
|
isDismissible: false,
|
|
54
|
+
type: 'button',
|
|
54
55
|
};
|