@justeattakeaway/pie-chip 0.0.0 → 0.1.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 +28 -3
- package/custom-elements.json +146 -3
- package/dist/index.d.ts +43 -1
- package/dist/index.js +87 -8
- package/dist/react.d.ts +43 -1
- package/dist/react.js +11 -6
- package/package.json +5 -3
- package/src/chip.scss +141 -0
- package/src/defs.ts +26 -3
- package/src/index.ts +81 -4
package/README.md
CHANGED
|
@@ -74,16 +74,41 @@ import { PieChip } from '@justeattakeaway/pie-chip/dist/react';
|
|
|
74
74
|
|
|
75
75
|
| Property | Type | Default | Description |
|
|
76
76
|
|---|---|---|---|
|
|
77
|
-
|
|
|
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 |
|
|
78
82
|
|
|
79
83
|
In your markup or JSX, you can then use these to set the properties for the `pie-chip` component:
|
|
80
84
|
|
|
81
85
|
```html
|
|
82
86
|
<!-- Native HTML -->
|
|
83
|
-
<pie-chip
|
|
87
|
+
<pie-chip>Label</pie-chip>
|
|
84
88
|
|
|
85
89
|
<!-- JSX -->
|
|
86
|
-
<PieChip
|
|
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>
|
|
87
112
|
```
|
|
88
113
|
|
|
89
114
|
## Contributing
|
package/custom-elements.json
CHANGED
|
@@ -11,8 +11,26 @@
|
|
|
11
11
|
{
|
|
12
12
|
"kind": "javascript-module",
|
|
13
13
|
"path": "src/defs.js",
|
|
14
|
-
"declarations": [
|
|
15
|
-
|
|
14
|
+
"declarations": [
|
|
15
|
+
{
|
|
16
|
+
"kind": "variable",
|
|
17
|
+
"name": "variants",
|
|
18
|
+
"type": {
|
|
19
|
+
"text": "['default', 'outline', 'ghost']"
|
|
20
|
+
},
|
|
21
|
+
"default": "['default', 'outline', 'ghost']"
|
|
22
|
+
}
|
|
23
|
+
],
|
|
24
|
+
"exports": [
|
|
25
|
+
{
|
|
26
|
+
"kind": "js",
|
|
27
|
+
"name": "variants",
|
|
28
|
+
"declaration": {
|
|
29
|
+
"name": "variants",
|
|
30
|
+
"module": "src/defs.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
]
|
|
16
34
|
},
|
|
17
35
|
{
|
|
18
36
|
"kind": "javascript-module",
|
|
@@ -22,7 +40,132 @@
|
|
|
22
40
|
"kind": "class",
|
|
23
41
|
"description": "",
|
|
24
42
|
"name": "PieChip",
|
|
25
|
-
"
|
|
43
|
+
"slots": [
|
|
44
|
+
{
|
|
45
|
+
"description": "The icon slot",
|
|
46
|
+
"name": "icon"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"description": "Default slot",
|
|
50
|
+
"name": ""
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
"members": [
|
|
54
|
+
{
|
|
55
|
+
"kind": "field",
|
|
56
|
+
"name": "variant",
|
|
57
|
+
"type": {
|
|
58
|
+
"text": "ChipProps['variant']"
|
|
59
|
+
},
|
|
60
|
+
"privacy": "public",
|
|
61
|
+
"default": "'default'",
|
|
62
|
+
"attribute": "variant"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"kind": "field",
|
|
66
|
+
"name": "disabled",
|
|
67
|
+
"type": {
|
|
68
|
+
"text": "boolean"
|
|
69
|
+
},
|
|
70
|
+
"privacy": "public",
|
|
71
|
+
"default": "false",
|
|
72
|
+
"attribute": "disabled"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"kind": "field",
|
|
76
|
+
"name": "isSelected",
|
|
77
|
+
"type": {
|
|
78
|
+
"text": "boolean"
|
|
79
|
+
},
|
|
80
|
+
"privacy": "public",
|
|
81
|
+
"default": "false",
|
|
82
|
+
"attribute": "isSelected"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"kind": "field",
|
|
86
|
+
"name": "isLoading",
|
|
87
|
+
"type": {
|
|
88
|
+
"text": "boolean"
|
|
89
|
+
},
|
|
90
|
+
"privacy": "public",
|
|
91
|
+
"default": "false",
|
|
92
|
+
"attribute": "isLoading"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"kind": "field",
|
|
96
|
+
"name": "isDismissible",
|
|
97
|
+
"type": {
|
|
98
|
+
"text": "boolean"
|
|
99
|
+
},
|
|
100
|
+
"privacy": "public",
|
|
101
|
+
"default": "false",
|
|
102
|
+
"attribute": "isDismissible"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"kind": "method",
|
|
106
|
+
"name": "renderSpinner",
|
|
107
|
+
"privacy": "private",
|
|
108
|
+
"return": {
|
|
109
|
+
"type": {
|
|
110
|
+
"text": "TemplateResult"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
"description": "Template for the loading state"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"kind": "method",
|
|
117
|
+
"name": "renderCloseButton",
|
|
118
|
+
"privacy": "private",
|
|
119
|
+
"return": {
|
|
120
|
+
"type": {
|
|
121
|
+
"text": "TemplateResult"
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
"description": "Template for the dismissible state"
|
|
125
|
+
}
|
|
126
|
+
],
|
|
127
|
+
"attributes": [
|
|
128
|
+
{
|
|
129
|
+
"name": "variant",
|
|
130
|
+
"type": {
|
|
131
|
+
"text": "ChipProps['variant']"
|
|
132
|
+
},
|
|
133
|
+
"default": "'default'",
|
|
134
|
+
"fieldName": "variant"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"name": "disabled",
|
|
138
|
+
"type": {
|
|
139
|
+
"text": "boolean"
|
|
140
|
+
},
|
|
141
|
+
"default": "false",
|
|
142
|
+
"fieldName": "disabled"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "isSelected",
|
|
146
|
+
"type": {
|
|
147
|
+
"text": "boolean"
|
|
148
|
+
},
|
|
149
|
+
"default": "false",
|
|
150
|
+
"fieldName": "isSelected"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "isLoading",
|
|
154
|
+
"type": {
|
|
155
|
+
"text": "boolean"
|
|
156
|
+
},
|
|
157
|
+
"default": "false",
|
|
158
|
+
"fieldName": "isLoading"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"name": "isDismissible",
|
|
162
|
+
"type": {
|
|
163
|
+
"text": "boolean"
|
|
164
|
+
},
|
|
165
|
+
"default": "false",
|
|
166
|
+
"fieldName": "isDismissible"
|
|
167
|
+
}
|
|
168
|
+
],
|
|
26
169
|
"superclass": {
|
|
27
170
|
"name": "LitElement",
|
|
28
171
|
"package": "lit"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,58 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { TemplateResult } from 'lit
|
|
3
|
+
import type { TemplateResult } from 'lit';
|
|
4
4
|
|
|
5
5
|
export declare interface ChipProps {
|
|
6
|
+
/**
|
|
7
|
+
* What style variant the chip should be such as default, outline or ghost.
|
|
8
|
+
*/
|
|
9
|
+
variant?: typeof variants[number];
|
|
10
|
+
/**
|
|
11
|
+
* When true, the chip element is disabled.
|
|
12
|
+
*/
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* When true, the chip element will apply the selected styles.
|
|
16
|
+
*/
|
|
17
|
+
isSelected?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* When true, displays a loading indicator inside the chip.
|
|
20
|
+
*/
|
|
21
|
+
isLoading?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* When true, displays a close icon to dismiss the chip component.
|
|
24
|
+
* Can be only used if `isSelected` is set to true
|
|
25
|
+
*/
|
|
26
|
+
isDismissible?: boolean;
|
|
6
27
|
}
|
|
7
28
|
|
|
8
29
|
/**
|
|
9
30
|
* @tagname pie-chip
|
|
31
|
+
* @slot icon - The icon slot
|
|
32
|
+
* @slot - Default slot
|
|
10
33
|
*/
|
|
11
34
|
export declare class PieChip extends LitElement implements ChipProps {
|
|
35
|
+
variant: ChipProps['variant'];
|
|
36
|
+
disabled: boolean;
|
|
37
|
+
isSelected: boolean;
|
|
38
|
+
isLoading: boolean;
|
|
39
|
+
isDismissible: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Template for the loading state
|
|
42
|
+
*
|
|
43
|
+
* @private
|
|
44
|
+
*/
|
|
45
|
+
private renderSpinner;
|
|
46
|
+
/**
|
|
47
|
+
* Template for the dismissible state
|
|
48
|
+
*
|
|
49
|
+
* @private
|
|
50
|
+
*/
|
|
51
|
+
private renderCloseButton;
|
|
12
52
|
render(): TemplateResult<1>;
|
|
13
53
|
static styles: CSSResult;
|
|
14
54
|
}
|
|
15
55
|
|
|
56
|
+
export declare const variants: readonly ["default", "outline", "ghost"];
|
|
57
|
+
|
|
16
58
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,92 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { unsafeCSS as h, LitElement as b, html as l, nothing as p } from "lit";
|
|
2
|
+
import { property as a } from "lit/decorators.js";
|
|
3
|
+
import { validPropertyValues as g, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
|
|
4
|
+
import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
|
|
5
|
+
import "@justeattakeaway/pie-spinner";
|
|
6
|
+
const f = `.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)}
|
|
7
|
+
`, u = ["default", "outline", "ghost"];
|
|
8
|
+
var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (d, r, c, e) => {
|
|
9
|
+
for (var i = e > 1 ? void 0 : e ? S(r, c) : r, t = d.length - 1, s; t >= 0; t--)
|
|
10
|
+
(s = d[t]) && (i = (e ? s(r, c, i) : s(i)) || i);
|
|
11
|
+
return e && i && y(r, c, i), i;
|
|
12
|
+
};
|
|
13
|
+
const v = "pie-chip";
|
|
14
|
+
class o extends b {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments), this.variant = "default", this.disabled = !1, this.isSelected = !1, this.isLoading = !1, this.isDismissible = !1;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Template for the loading state
|
|
20
|
+
*
|
|
21
|
+
* @private
|
|
22
|
+
*/
|
|
23
|
+
renderSpinner() {
|
|
24
|
+
const { isSelected: r } = this;
|
|
25
|
+
return l`
|
|
26
|
+
<pie-spinner
|
|
27
|
+
class="c-chip-spinner"
|
|
28
|
+
size="small"
|
|
29
|
+
variant="${r ? "inverse" : "secondary"}">
|
|
30
|
+
</pie-spinner>`;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Template for the dismissible state
|
|
34
|
+
*
|
|
35
|
+
* @private
|
|
36
|
+
*/
|
|
37
|
+
renderCloseButton() {
|
|
38
|
+
return l`
|
|
39
|
+
<button
|
|
40
|
+
class="c-chip-closeBtn"
|
|
41
|
+
data-test-id="chip-close-button">
|
|
42
|
+
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
43
|
+
</button>`;
|
|
44
|
+
}
|
|
5
45
|
render() {
|
|
6
|
-
|
|
46
|
+
const {
|
|
47
|
+
variant: r,
|
|
48
|
+
disabled: c,
|
|
49
|
+
isSelected: e,
|
|
50
|
+
isLoading: i,
|
|
51
|
+
isDismissible: t
|
|
52
|
+
} = this;
|
|
53
|
+
return l`
|
|
54
|
+
<div
|
|
55
|
+
class="c-chip"
|
|
56
|
+
role="button"
|
|
57
|
+
tabindex="0"
|
|
58
|
+
data-test-id="pie-chip"
|
|
59
|
+
variant="${r}"
|
|
60
|
+
?disabled="${c}"
|
|
61
|
+
?isSelected="${e}"
|
|
62
|
+
?isLoading="${i}"
|
|
63
|
+
?isDismissible="${t}">
|
|
64
|
+
<slot name="icon"></slot>
|
|
65
|
+
${i ? this.renderSpinner() : p}
|
|
66
|
+
<slot></slot>
|
|
67
|
+
${t && e ? this.renderCloseButton() : p}
|
|
68
|
+
</div>`;
|
|
7
69
|
}
|
|
8
70
|
}
|
|
9
|
-
|
|
10
|
-
|
|
71
|
+
o.styles = h(f);
|
|
72
|
+
n([
|
|
73
|
+
a(),
|
|
74
|
+
g(v, u, "primary")
|
|
75
|
+
], o.prototype, "variant", 2);
|
|
76
|
+
n([
|
|
77
|
+
a({ type: Boolean })
|
|
78
|
+
], o.prototype, "disabled", 2);
|
|
79
|
+
n([
|
|
80
|
+
a({ type: Boolean })
|
|
81
|
+
], o.prototype, "isSelected", 2);
|
|
82
|
+
n([
|
|
83
|
+
a({ type: Boolean })
|
|
84
|
+
], o.prototype, "isLoading", 2);
|
|
85
|
+
n([
|
|
86
|
+
a({ type: Boolean })
|
|
87
|
+
], o.prototype, "isDismissible", 2);
|
|
88
|
+
m(v, o);
|
|
11
89
|
export {
|
|
12
|
-
|
|
90
|
+
o as PieChip,
|
|
91
|
+
u as variants
|
|
13
92
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,21 +1,63 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
3
|
import * as React_2 from 'react';
|
|
4
|
-
import type { TemplateResult } from 'lit
|
|
4
|
+
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare interface ChipProps {
|
|
7
|
+
/**
|
|
8
|
+
* What style variant the chip should be such as default, outline or ghost.
|
|
9
|
+
*/
|
|
10
|
+
variant?: typeof variants[number];
|
|
11
|
+
/**
|
|
12
|
+
* When true, the chip element is disabled.
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* When true, the chip element will apply the selected styles.
|
|
17
|
+
*/
|
|
18
|
+
isSelected?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* When true, displays a loading indicator inside the chip.
|
|
21
|
+
*/
|
|
22
|
+
isLoading?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* When true, displays a close icon to dismiss the chip component.
|
|
25
|
+
* Can be only used if `isSelected` is set to true
|
|
26
|
+
*/
|
|
27
|
+
isDismissible?: boolean;
|
|
7
28
|
}
|
|
8
29
|
|
|
9
30
|
export declare const PieChip: React_2.ForwardRefExoticComponent<ChipProps & React_2.RefAttributes<PieChip_2> & ReactBaseType>;
|
|
10
31
|
|
|
11
32
|
/**
|
|
12
33
|
* @tagname pie-chip
|
|
34
|
+
* @slot icon - The icon slot
|
|
35
|
+
* @slot - Default slot
|
|
13
36
|
*/
|
|
14
37
|
declare class PieChip_2 extends LitElement implements ChipProps {
|
|
38
|
+
variant: ChipProps['variant'];
|
|
39
|
+
disabled: boolean;
|
|
40
|
+
isSelected: boolean;
|
|
41
|
+
isLoading: boolean;
|
|
42
|
+
isDismissible: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Template for the loading state
|
|
45
|
+
*
|
|
46
|
+
* @private
|
|
47
|
+
*/
|
|
48
|
+
private renderSpinner;
|
|
49
|
+
/**
|
|
50
|
+
* Template for the dismissible state
|
|
51
|
+
*
|
|
52
|
+
* @private
|
|
53
|
+
*/
|
|
54
|
+
private renderCloseButton;
|
|
15
55
|
render(): TemplateResult<1>;
|
|
16
56
|
static styles: CSSResult;
|
|
17
57
|
}
|
|
18
58
|
|
|
19
59
|
declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
|
|
20
60
|
|
|
61
|
+
export declare const variants: readonly ["default", "outline", "ghost"];
|
|
62
|
+
|
|
21
63
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { createComponent as
|
|
1
|
+
import * as i from "react";
|
|
2
|
+
import { createComponent as e } from "@lit/react";
|
|
3
3
|
import { PieChip as t } from "./index.js";
|
|
4
|
+
import { variants as f } from "./index.js";
|
|
4
5
|
import "lit";
|
|
6
|
+
import "lit/decorators.js";
|
|
5
7
|
import "@justeattakeaway/pie-webc-core";
|
|
6
|
-
|
|
8
|
+
import "@justeattakeaway/pie-icons-webc/IconCloseCircleFilled";
|
|
9
|
+
import "@justeattakeaway/pie-spinner";
|
|
10
|
+
const p = e({
|
|
7
11
|
displayName: "PieChip",
|
|
8
12
|
elementClass: t,
|
|
9
|
-
react:
|
|
13
|
+
react: i,
|
|
10
14
|
tagName: "pie-chip",
|
|
11
15
|
events: {}
|
|
12
|
-
}),
|
|
16
|
+
}), C = p;
|
|
13
17
|
export {
|
|
14
|
-
|
|
18
|
+
C as PieChip,
|
|
19
|
+
f as variants
|
|
15
20
|
};
|
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.1.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -31,11 +31,13 @@
|
|
|
31
31
|
"license": "Apache-2.0",
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
34
|
-
"@justeattakeaway/pie-components-config": "
|
|
34
|
+
"@justeattakeaway/pie-components-config": "0.10.0",
|
|
35
35
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@justeattakeaway/pie-webc
|
|
38
|
+
"@justeattakeaway/pie-icons-webc": "0.17.2",
|
|
39
|
+
"@justeattakeaway/pie-spinner": "0.5.2",
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.17.1"
|
|
39
41
|
},
|
|
40
42
|
"volta": {
|
|
41
43
|
"extends": "../../../package.json"
|
package/src/chip.scss
CHANGED
|
@@ -1 +1,142 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
|
+
|
|
3
|
+
@mixin chip-interactive-states($bg-color, $mode: 'default') {
|
|
4
|
+
&:hover:not(:disabled) {
|
|
5
|
+
@if $mode == 'inverse' {
|
|
6
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
7
|
+
} @else {
|
|
8
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@if $mode == 'transparent' {
|
|
12
|
+
--hover-modifier: var(--dt-color-hover-01);
|
|
13
|
+
--chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
|
|
14
|
+
} @else {
|
|
15
|
+
--chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&:active:not(:disabled),
|
|
20
|
+
&[isLoading]:not(:disabled) {
|
|
21
|
+
@if $mode == 'inverse' {
|
|
22
|
+
--active-modifier: var(--dt-color-active-02);
|
|
23
|
+
} @else {
|
|
24
|
+
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@if $mode == 'transparent' {
|
|
28
|
+
--active-modifier: var(--dt-color-active-01);
|
|
29
|
+
--chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
|
|
30
|
+
} @else {
|
|
31
|
+
--chip-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
.c-chip {
|
|
38
|
+
--chip-bg-color: var(--dt-color-interactive-secondary);
|
|
39
|
+
--chip-color: var(--dt-color-content-interactive-secondary);
|
|
40
|
+
--chip-border-width: 1px;
|
|
41
|
+
--chip-border-color: transparent;
|
|
42
|
+
--chip-padding-block: calc(6px - var(--chip-border-width));
|
|
43
|
+
--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));
|
|
44
|
+
--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));
|
|
45
|
+
--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));
|
|
46
|
+
--chip-gap: var(--dt-spacing-b);
|
|
47
|
+
--chip-dismissible-offset: calc(var(--chip-gap) / -2); // ensures the spacing between the text and close icon is 4px
|
|
48
|
+
|
|
49
|
+
// Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
|
|
50
|
+
--icon-display-override: block;
|
|
51
|
+
|
|
52
|
+
position: relative;
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
gap: var(--chip-gap);
|
|
57
|
+
padding-block-start: var(--chip-padding-block);
|
|
58
|
+
padding-block-end: var(--chip-padding-block);
|
|
59
|
+
padding-inline-start: var(--chip-padding-inline);
|
|
60
|
+
padding-inline-end: var(--chip-padding-inline);
|
|
61
|
+
background-color: var(--chip-bg-color);
|
|
62
|
+
color: var(--chip-color);
|
|
63
|
+
border-radius: var(--dt-radius-rounded-e);
|
|
64
|
+
border: 1px solid;
|
|
65
|
+
border-color: var(--chip-border-color);
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
min-width: var(--chip-min-width);
|
|
68
|
+
|
|
69
|
+
@include p.font-size(--dt-font-interactive-xs-size);
|
|
70
|
+
@include p.line-height(--dt-font-interactive-xs-line-height);
|
|
71
|
+
font-weight: var(--dt-font-weight-bold);
|
|
72
|
+
|
|
73
|
+
@include chip-interactive-states('--dt-color-interactive-secondary');
|
|
74
|
+
|
|
75
|
+
&[variant='default'] {
|
|
76
|
+
// same as default styles
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&[variant='outline']:not([disabled], [isSelected], [isLoading]) {
|
|
80
|
+
--chip-border-color: var(--dt-color-border-strong);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&[variant='outline'],
|
|
84
|
+
&[variant='ghost'] {
|
|
85
|
+
--chip-bg-color: transparent;
|
|
86
|
+
|
|
87
|
+
@include chip-interactive-states('--dt-color-black', 'transparent');
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&[isSelected] {
|
|
91
|
+
--chip-bg-color: var(--dt-color-interactive-primary);
|
|
92
|
+
--chip-color: var(--dt-color-content-interactive-primary);
|
|
93
|
+
|
|
94
|
+
@include chip-interactive-states('--dt-color-interactive-primary', 'inverse');
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&[isDismissible][isSelected] {
|
|
98
|
+
padding-inline-end: var(--chip-padding-dismissible);
|
|
99
|
+
padding-block-start: var(--chip-padding-dismissible);
|
|
100
|
+
padding-block-end: var(--chip-padding-dismissible);
|
|
101
|
+
|
|
102
|
+
.c-chip-closeBtn {
|
|
103
|
+
display: inline-flex;
|
|
104
|
+
user-select: none;
|
|
105
|
+
outline: none;
|
|
106
|
+
border: none;
|
|
107
|
+
color: inherit;
|
|
108
|
+
background-color: inherit;
|
|
109
|
+
border-radius: inherit;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
padding: 0;
|
|
112
|
+
margin-inline-start: var(--chip-dismissible-offset);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&[isLoading] {
|
|
117
|
+
& > *:not(.c-chip-spinner) {
|
|
118
|
+
visibility: hidden;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.c-chip-spinner {
|
|
122
|
+
position: absolute;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&[disabled] {
|
|
127
|
+
--chip-bg-color: var(--dt-color-disabled-01);
|
|
128
|
+
--chip-color: var(--dt-color-content-disabled);
|
|
129
|
+
|
|
130
|
+
cursor: not-allowed;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:focus-visible {
|
|
134
|
+
@include p.focus;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
::slotted(svg) {
|
|
139
|
+
display: block;
|
|
140
|
+
height: var(--icon-size-override);
|
|
141
|
+
width: var(--icon-size-override);
|
|
142
|
+
}
|
package/src/defs.ts
CHANGED
|
@@ -1,3 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export interface ChipProps {
|
|
1
|
+
export const variants = ['default', 'outline', 'ghost'] as const;
|
|
2
|
+
|
|
3
|
+
export interface ChipProps {
|
|
4
|
+
/**
|
|
5
|
+
* What style variant the chip should be such as default, outline or ghost.
|
|
6
|
+
*/
|
|
7
|
+
variant?: typeof variants[number];
|
|
8
|
+
/**
|
|
9
|
+
* When true, the chip element is disabled.
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* When true, the chip element will apply the selected styles.
|
|
14
|
+
*/
|
|
15
|
+
isSelected?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* When true, displays a loading indicator inside the chip.
|
|
18
|
+
*/
|
|
19
|
+
isLoading?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* When true, displays a close icon to dismiss the chip component.
|
|
22
|
+
* Can be only used if `isSelected` is set to true
|
|
23
|
+
*/
|
|
24
|
+
isDismissible?: boolean;
|
|
25
|
+
|
|
26
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
LitElement, html, unsafeCSS, TemplateResult, nothing,
|
|
3
|
+
} from 'lit';
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
2
5
|
|
|
3
|
-
import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
6
|
+
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
4
7
|
import styles from './chip.scss?inline';
|
|
5
|
-
import { ChipProps } from './defs';
|
|
8
|
+
import { ChipProps, variants } from './defs';
|
|
9
|
+
import '@justeattakeaway/pie-icons-webc/IconCloseCircleFilled';
|
|
10
|
+
import '@justeattakeaway/pie-spinner';
|
|
6
11
|
|
|
7
12
|
// Valid values available to consumers
|
|
8
13
|
export * from './defs';
|
|
@@ -11,10 +16,82 @@ const componentSelector = 'pie-chip';
|
|
|
11
16
|
|
|
12
17
|
/**
|
|
13
18
|
* @tagname pie-chip
|
|
19
|
+
* @slot icon - The icon slot
|
|
20
|
+
* @slot - Default slot
|
|
14
21
|
*/
|
|
15
22
|
export class PieChip extends LitElement implements ChipProps {
|
|
23
|
+
@property()
|
|
24
|
+
@validPropertyValues(componentSelector, variants, 'primary')
|
|
25
|
+
public variant: ChipProps['variant'] = 'default';
|
|
26
|
+
|
|
27
|
+
@property({ type: Boolean })
|
|
28
|
+
public disabled = false;
|
|
29
|
+
|
|
30
|
+
@property({ type: Boolean })
|
|
31
|
+
public isSelected = false;
|
|
32
|
+
|
|
33
|
+
@property({ type: Boolean })
|
|
34
|
+
public isLoading = false;
|
|
35
|
+
|
|
36
|
+
@property({ type: Boolean })
|
|
37
|
+
public isDismissible = false;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Template for the loading state
|
|
41
|
+
*
|
|
42
|
+
* @private
|
|
43
|
+
*/
|
|
44
|
+
private renderSpinner (): TemplateResult {
|
|
45
|
+
const { isSelected } = this;
|
|
46
|
+
const spinnerVariant = isSelected ? 'inverse' : 'secondary';
|
|
47
|
+
|
|
48
|
+
return html`
|
|
49
|
+
<pie-spinner
|
|
50
|
+
class="c-chip-spinner"
|
|
51
|
+
size="small"
|
|
52
|
+
variant="${spinnerVariant}">
|
|
53
|
+
</pie-spinner>`;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Template for the dismissible state
|
|
58
|
+
*
|
|
59
|
+
* @private
|
|
60
|
+
*/
|
|
61
|
+
private renderCloseButton (): TemplateResult {
|
|
62
|
+
return html`
|
|
63
|
+
<button
|
|
64
|
+
class="c-chip-closeBtn"
|
|
65
|
+
data-test-id="chip-close-button">
|
|
66
|
+
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
67
|
+
</button>`;
|
|
68
|
+
}
|
|
69
|
+
|
|
16
70
|
render () {
|
|
17
|
-
|
|
71
|
+
const {
|
|
72
|
+
variant,
|
|
73
|
+
disabled,
|
|
74
|
+
isSelected,
|
|
75
|
+
isLoading,
|
|
76
|
+
isDismissible,
|
|
77
|
+
} = this;
|
|
78
|
+
|
|
79
|
+
return html`
|
|
80
|
+
<div
|
|
81
|
+
class="c-chip"
|
|
82
|
+
role="button"
|
|
83
|
+
tabindex="0"
|
|
84
|
+
data-test-id="pie-chip"
|
|
85
|
+
variant="${variant}"
|
|
86
|
+
?disabled="${disabled}"
|
|
87
|
+
?isSelected="${isSelected}"
|
|
88
|
+
?isLoading="${isLoading}"
|
|
89
|
+
?isDismissible="${isDismissible}">
|
|
90
|
+
<slot name="icon"></slot>
|
|
91
|
+
${isLoading ? this.renderSpinner() : nothing}
|
|
92
|
+
<slot></slot>
|
|
93
|
+
${isDismissible && isSelected ? this.renderCloseButton() : nothing}
|
|
94
|
+
</div>`;
|
|
18
95
|
}
|
|
19
96
|
|
|
20
97
|
// Renders a `CSSResult` generated from SCSS by Vite
|