@justeattakeaway/pie-icon-button 0.6.1 → 0.7.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/.turbo/turbo-build.log +11 -5
- package/CHANGELOG.md +11 -0
- package/README.md +5 -5
- package/dist/index.js +112 -89
- package/dist/types/packages/components/pie-icon-button/src/defs.d.ts +10 -16
- package/dist/types/packages/components/pie-icon-button/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-icon-button/src/index.d.ts +4 -2
- package/dist/types/packages/components/pie-icon-button/src/index.d.ts.map +1 -1
- package/package.json +4 -1
- package/src/defs.ts +11 -29
- package/src/iconButton.scss +3 -3
- package/src/index.ts +7 -7
- package/test/accessibility/pie-icon-button.spec.ts +4 -4
- package/test/visual/pie-icon-button.spec.ts +17 -14
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
|
-
[
|
|
1
|
+
[11:02:00 AM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
3
|
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
|
-
[32m✓[39m
|
|
5
|
+
[32m✓[39m 886 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m 8.
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 8.63 kB[22m[1m[22m[2m │ gzip: 2.50 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.03 kB[22m[1m[22m[2m │ gzip: 15.92 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[
|
|
13
|
-
|
|
12
|
+
[96msrc/index.ts[0m:[93m4[0m:[93m32[0m - [91merror[0m[90m TS7016: [0mCould not find a declaration file for module '@justeattakeaway/pie-icons-webc'. '/home/runner/work/pie/pie/packages/tools/pie-icons-webc/icons/index.js' implicitly has an 'any' type.
|
|
13
|
+
Try `npm i --save-dev @types/justeattakeaway__pie-icons-webc` if it exists or add a new declaration (.d.ts) file containing `declare module '@justeattakeaway/pie-icons-webc';`
|
|
14
|
+
|
|
15
|
+
[7m4[0m import { IconCloseLarge } from '@justeattakeaway/pie-icons-webc';
|
|
16
|
+
[7m [0m [91m ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[0m
|
|
17
|
+
|
|
18
|
+
[32m✓ built in 23.45s[39m
|
|
19
|
+
[32m[36m[vite:dts][32m Declaration files built in 18363ms.
|
|
14
20
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @justeattakeaway/pie-icon-button
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Changed] - ghost-tertiary renamed to ghost-secondary ([#583](https://github.com/justeattakeaway/pie/pull/583)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`4c3f9348a`](https://github.com/justeattakeaway/pie/commit/4c3f9348a2041494f640cfc35e4c321eee6e550b)]:
|
|
12
|
+
- @justeattakeaway/pie-icons-webc@0.1.0
|
|
13
|
+
|
|
3
14
|
## 0.6.1
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -68,11 +68,11 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
|
68
68
|
|
|
69
69
|
## Props
|
|
70
70
|
|
|
71
|
-
| Property | Type | Default | Description
|
|
72
|
-
|
|
73
|
-
| size | `String` | `medium` | Size of the Icon Button, one of `
|
|
74
|
-
| variant | `String` | `primary` | Variant of the button, one of `
|
|
75
|
-
| disabled | `Boolean` | `false` | If `true`, disables the button.
|
|
71
|
+
| Property | Type | Default | Description |
|
|
72
|
+
|-------------|-----------|-----------------|----------------------------------------------------------------------|
|
|
73
|
+
| size | `String` | `medium` | Size of the Icon Button, one of `sizes` – `xsmall`, `small`, `medium`, `large` |
|
|
74
|
+
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `ghost-secondary` |
|
|
75
|
+
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
76
76
|
|
|
77
77
|
In your markup or JSX, you can then use these to set the properties for the `pie-icon-button` component:
|
|
78
78
|
|
package/dist/index.js
CHANGED
|
@@ -1,115 +1,138 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as I, LitElement as x, html as S } from "lit";
|
|
2
|
+
import { property as v } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(
|
|
4
|
+
const g = (t, o, e) => function(n, r) {
|
|
5
|
+
const i = `#${r}`;
|
|
6
|
+
Object.defineProperty(n, r, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[i];
|
|
9
9
|
},
|
|
10
|
-
set(
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
`<${
|
|
14
|
-
`Must be one of: ${
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
10
|
+
set(c) {
|
|
11
|
+
const z = this[i];
|
|
12
|
+
o.includes(c) ? this[i] = c : (console.error(
|
|
13
|
+
`<${t}> Invalid value "${c}" provided for property "${r}".`,
|
|
14
|
+
`Must be one of: ${o.join(" | ")}.`,
|
|
15
|
+
`Falling back to default value: "${e}"`
|
|
16
|
+
), this[i] = e), this.requestUpdate(r, z);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
}, s = {
|
|
20
|
+
xs: 16,
|
|
21
|
+
s: 20,
|
|
22
|
+
m: 24,
|
|
23
|
+
l: 28,
|
|
24
|
+
xl: 32,
|
|
25
|
+
xxl: 40
|
|
26
|
+
}, p = Object.keys(s), f = "xs", m = 8, d = 32;
|
|
27
|
+
function L(t, o, e) {
|
|
28
|
+
const a = parseInt(t, 10), n = a % e === 0;
|
|
29
|
+
return a >= o && n;
|
|
30
|
+
}
|
|
31
|
+
const B = {
|
|
32
|
+
large: (t) => L(t, d, m),
|
|
33
|
+
regular: (t) => p.includes(t)
|
|
25
34
|
};
|
|
26
|
-
|
|
35
|
+
function w(t) {
|
|
36
|
+
const o = B.large(t);
|
|
37
|
+
return { isValid: o, size: o ? t : d };
|
|
38
|
+
}
|
|
39
|
+
function $(t) {
|
|
40
|
+
const o = B.regular(t), e = o ? s[t] : s[f];
|
|
41
|
+
return { isValid: o, size: e };
|
|
42
|
+
}
|
|
43
|
+
const h = (t, o, e, a) => {
|
|
44
|
+
const n = t.endsWith("Large") || t.endsWith("-large");
|
|
45
|
+
let r, i;
|
|
46
|
+
if (e) {
|
|
47
|
+
if ({ isValid: r, size: i } = n ? w(e) : $(e), !r) {
|
|
48
|
+
const c = n ? `Invalid prop "size" value supplied to "${a}". The prop value should be a number equal or greater than ${d} and multiple of ${m}.` : `Invalid prop "size" value supplied to "${a}". The prop value should be one of the following values: ${p.join(", ")}.`;
|
|
49
|
+
console.error(c);
|
|
50
|
+
}
|
|
51
|
+
} else
|
|
52
|
+
i = n ? d : s[f];
|
|
53
|
+
return {
|
|
54
|
+
class: [t, o].filter(Boolean).join(" "),
|
|
55
|
+
width: i,
|
|
56
|
+
height: i
|
|
57
|
+
};
|
|
58
|
+
}, y = document.createElement("template");
|
|
59
|
+
y.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--closeLarge"><path d="m23.42 24.663 1.242-1.243L17.234 16l7.428-7.429-1.242-1.233L16 14.766 8.57 7.338 7.337 8.57 14.767 16l-7.43 7.42 1.234 1.242L16 17.235l7.42 7.428Z"></path></svg>';
|
|
60
|
+
class k extends HTMLElement {
|
|
27
61
|
constructor() {
|
|
28
|
-
super(
|
|
62
|
+
super();
|
|
63
|
+
const o = y.content.cloneNode(!0);
|
|
64
|
+
this.root = this.attachShadow({ mode: "open" }), this.root.append(o);
|
|
29
65
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
|
|
33
|
-
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
|
-
_renderPropKeyValues() {
|
|
35
|
-
return this.propKeyValues.split(",").map((t) => {
|
|
36
|
-
const [n, r] = t.split(":");
|
|
37
|
-
return d`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${r}</code></p>`;
|
|
38
|
-
});
|
|
66
|
+
static get observedAttributes() {
|
|
67
|
+
return ["size"];
|
|
39
68
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
69
|
+
get size() {
|
|
70
|
+
return this.getAttribute("size");
|
|
71
|
+
}
|
|
72
|
+
set size(o) {
|
|
73
|
+
this.setAttribute("size", o);
|
|
74
|
+
}
|
|
75
|
+
get class() {
|
|
76
|
+
return this.getAttribute("class");
|
|
77
|
+
}
|
|
78
|
+
set class(o) {
|
|
79
|
+
this.setAttribute("class", o);
|
|
80
|
+
}
|
|
81
|
+
connectedCallback() {
|
|
82
|
+
const o = this.root.querySelector("svg"), e = h("c-pieIcon c-pieIcon--closeLarge", "", null, "IconCloseLarge");
|
|
83
|
+
o.setAttribute("width", e.width), o.setAttribute("height", e.height), this.setAttribute("class", "c-pieIcon c-pieIcon--closeLarge"), this.root.append(o);
|
|
84
|
+
}
|
|
85
|
+
attributeChangedCallback(o, e, a) {
|
|
86
|
+
const n = this.root.querySelector("svg");
|
|
87
|
+
let r;
|
|
88
|
+
o === "size" && (r = h("c-pieIcon c-pieIcon--closeLarge", "", a, "IconCloseLarge"), n.setAttribute("width", r.width), n.setAttribute("height", r.height), this.root.append(n));
|
|
49
89
|
}
|
|
50
90
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
`, $ = [
|
|
59
|
-
"xsmall",
|
|
60
|
-
"small",
|
|
61
|
-
"medium",
|
|
62
|
-
"large"
|
|
63
|
-
], z = [
|
|
64
|
-
"primary",
|
|
65
|
-
"secondary",
|
|
66
|
-
"outline",
|
|
67
|
-
"ghost",
|
|
68
|
-
"ghost-tertiary"
|
|
69
|
-
];
|
|
70
|
-
var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, v = (i, t, n, r) => {
|
|
71
|
-
for (var o = r > 1 ? void 0 : r ? _(t, n) : t, e = i.length - 1, a; e >= 0; e--)
|
|
72
|
-
(a = i[e]) && (o = (r ? a(t, n, o) : a(o)) || o);
|
|
73
|
-
return r && o && P(t, n, o), o;
|
|
91
|
+
customElements.define("icon-close-large", k);
|
|
92
|
+
const A = `.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-dimension: 48px;--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);--btn-icon-size: 24px;min-block-size:var(--btn-dimension);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-dimension)}}.o-iconBtn:focus-visible{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn svg,.o-iconBtn path{fill:var(--btn-icon-fill)}.o-iconBtn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=outline] .o-iconBtn{border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-iconBtn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-icon-fill: var(--dt-color-content-disabled)}.o-iconBtn[disabled] .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-iconBtn[disabled][variant=outline] .o-iconBtn{outline:none}.o-iconBtn[disabled][variant=ghost],.o-iconBtn[disabled][variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-secondary] .o-iconBtn{outline:none;border:none}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
93
|
+
`, P = ["xsmall", "small", "medium", "large"], j = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
94
|
+
var C = Object.defineProperty, M = Object.getOwnPropertyDescriptor, u = (t, o, e, a) => {
|
|
95
|
+
for (var n = a > 1 ? void 0 : a ? M(o, e) : o, r = t.length - 1, i; r >= 0; r--)
|
|
96
|
+
(i = t[r]) && (n = (a ? i(o, e, n) : i(n)) || n);
|
|
97
|
+
return a && n && C(o, e, n), n;
|
|
74
98
|
};
|
|
75
99
|
const b = "pie-icon-button";
|
|
76
|
-
class
|
|
100
|
+
class l extends x {
|
|
77
101
|
constructor() {
|
|
78
102
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
|
|
79
103
|
}
|
|
80
104
|
render() {
|
|
81
105
|
const {
|
|
82
|
-
disabled:
|
|
83
|
-
size:
|
|
84
|
-
variant:
|
|
106
|
+
disabled: o,
|
|
107
|
+
size: e,
|
|
108
|
+
variant: a
|
|
85
109
|
} = this;
|
|
86
|
-
return
|
|
110
|
+
return S`
|
|
87
111
|
<button
|
|
88
112
|
class="o-iconBtn"
|
|
89
|
-
size=${
|
|
90
|
-
variant=${
|
|
91
|
-
?disabled=${
|
|
92
|
-
<
|
|
93
|
-
<path d="M11.8676 3.20496L8.0001 7.07248L4.13258 3.20496L3.20508 4.13246L7.0726 7.99998L3.20508 11.8675L4.13258 12.795L8.0001 8.92748L11.8676 12.795L12.7951 11.8675L8.92761 7.99998L12.7951 4.13246L11.8676 3.20496Z" fill="#242E30"/>
|
|
94
|
-
</svg>
|
|
113
|
+
size=${e}
|
|
114
|
+
variant=${a}
|
|
115
|
+
?disabled=${o}>
|
|
116
|
+
<icon-close-large />
|
|
95
117
|
</button>`;
|
|
96
118
|
}
|
|
97
119
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
],
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
],
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
],
|
|
110
|
-
customElements.define(b,
|
|
120
|
+
l.styles = I(A);
|
|
121
|
+
u([
|
|
122
|
+
v(),
|
|
123
|
+
g(b, P, "medium")
|
|
124
|
+
], l.prototype, "size", 2);
|
|
125
|
+
u([
|
|
126
|
+
v(),
|
|
127
|
+
g(b, j, "primary")
|
|
128
|
+
], l.prototype, "variant", 2);
|
|
129
|
+
u([
|
|
130
|
+
v({ type: Boolean })
|
|
131
|
+
], l.prototype, "disabled", 2);
|
|
132
|
+
customElements.define(b, l);
|
|
111
133
|
export {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
134
|
+
k as IconCloseLarge,
|
|
135
|
+
l as PieIconButton,
|
|
136
|
+
P as sizes,
|
|
137
|
+
j as variants
|
|
115
138
|
};
|
|
@@ -1,26 +1,20 @@
|
|
|
1
|
+
export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
|
|
2
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
1
3
|
export interface IconButtonProps {
|
|
2
4
|
/**
|
|
3
|
-
*
|
|
4
|
-
* @default medium
|
|
5
|
+
* (Optional) What size the button should be.
|
|
6
|
+
* @default "medium"
|
|
5
7
|
*/
|
|
6
|
-
size:
|
|
8
|
+
size: typeof sizes[number];
|
|
7
9
|
/**
|
|
8
|
-
*
|
|
9
|
-
* @default primary
|
|
10
|
+
* (Optional) What style variant the button should be such as primary, outline or ghost.
|
|
11
|
+
* @default "primary"
|
|
10
12
|
*/
|
|
11
|
-
variant:
|
|
13
|
+
variant: typeof variants[number];
|
|
12
14
|
/**
|
|
13
|
-
*
|
|
15
|
+
* (Optional) When true, the button element is disabled.
|
|
14
16
|
* @default false
|
|
15
17
|
*/
|
|
16
|
-
disabled
|
|
18
|
+
disabled: boolean;
|
|
17
19
|
}
|
|
18
|
-
/**
|
|
19
|
-
* Icon Button size variants
|
|
20
|
-
*/
|
|
21
|
-
export declare const iconButtonSizes: Array<IconButtonProps['size']>;
|
|
22
|
-
/**
|
|
23
|
-
* Icon Button style variants
|
|
24
|
-
*/
|
|
25
|
-
export declare const iconButtonVariants: Array<IconButtonProps['variant']>;
|
|
26
20
|
//# sourceMappingURL=defs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,iDAAkD,CAAC;AACrE,eAAO,MAAM,QAAQ,0EAA2E,CAAC;AAEjG,MAAM,WAAW,eAAe;IAC5B;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;CACrB"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import { IconCloseLarge } from '@justeattakeaway/pie-icons-webc';
|
|
3
|
+
import { IconButtonProps, sizes, variants } from './defs';
|
|
4
|
+
export { type IconButtonProps, sizes, variants };
|
|
5
|
+
export { IconCloseLarge };
|
|
4
6
|
declare const componentSelector = "pie-icon-button";
|
|
5
7
|
export declare class PieIconButton extends LitElement {
|
|
6
8
|
size: IconButtonProps['size'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EACH,eAAe,EAAE,KAAK,EAAE,QAAQ,EACnC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAY;IAIzC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAErB,MAAM;IAiBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -18,6 +18,9 @@
|
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@justeattakeaway/pie-webc-core": "workspace:*"
|
|
20
20
|
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"@justeattakeaway/pie-icons-webc": "workspace:*"
|
|
23
|
+
},
|
|
21
24
|
"volta": {
|
|
22
25
|
"extends": "../../../package.json"
|
|
23
26
|
}
|
package/src/defs.ts
CHANGED
|
@@ -1,38 +1,20 @@
|
|
|
1
|
+
export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
|
|
2
|
+
export const variants = ['primary', 'secondary', 'outline', 'ghost', 'ghost-secondary'] as const;
|
|
3
|
+
|
|
1
4
|
export interface IconButtonProps {
|
|
2
5
|
/**
|
|
3
|
-
*
|
|
4
|
-
* @default medium
|
|
6
|
+
* (Optional) What size the button should be.
|
|
7
|
+
* @default "medium"
|
|
5
8
|
*/
|
|
6
|
-
size:
|
|
9
|
+
size: typeof sizes[number];
|
|
7
10
|
/**
|
|
8
|
-
*
|
|
9
|
-
* @default primary
|
|
11
|
+
* (Optional) What style variant the button should be such as primary, outline or ghost.
|
|
12
|
+
* @default "primary"
|
|
10
13
|
*/
|
|
11
|
-
variant:
|
|
14
|
+
variant: typeof variants[number];
|
|
12
15
|
/**
|
|
13
|
-
*
|
|
16
|
+
* (Optional) When true, the button element is disabled.
|
|
14
17
|
* @default false
|
|
15
18
|
*/
|
|
16
|
-
disabled
|
|
19
|
+
disabled: boolean;
|
|
17
20
|
}
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Icon Button size variants
|
|
21
|
-
*/
|
|
22
|
-
export const iconButtonSizes: Array<IconButtonProps['size']> = [
|
|
23
|
-
'xsmall',
|
|
24
|
-
'small',
|
|
25
|
-
'medium',
|
|
26
|
-
'large'
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Icon Button style variants
|
|
31
|
-
*/
|
|
32
|
-
export const iconButtonVariants: Array<IconButtonProps['variant']> = [
|
|
33
|
-
'primary',
|
|
34
|
-
'secondary',
|
|
35
|
-
'outline',
|
|
36
|
-
'ghost',
|
|
37
|
-
'ghost-tertiary',
|
|
38
|
-
];
|
package/src/iconButton.scss
CHANGED
|
@@ -86,9 +86,9 @@
|
|
|
86
86
|
@include button-interactive-states('--dt-color-container-default');
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
&[variant='ghost-
|
|
89
|
+
&[variant='ghost-secondary'] {
|
|
90
90
|
--btn-bg-color: var(--dt-color-container-default);
|
|
91
|
-
--btn-icon-fill: var(--dt-color-content-interactive-
|
|
91
|
+
--btn-icon-fill: var(--dt-color-content-interactive-secondary);
|
|
92
92
|
|
|
93
93
|
@include button-interactive-states('--dt-color-container-default');
|
|
94
94
|
}
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
&[disabled][variant='ghost'],
|
|
113
|
-
&[disabled][variant='ghost-
|
|
113
|
+
&[disabled][variant='ghost-secondary'] {
|
|
114
114
|
--btn-bg-color: transparent;
|
|
115
115
|
--btn-icon-fill: var(--dt-color-content-default);
|
|
116
116
|
|
package/src/index.ts
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
import { LitElement, html, unsafeCSS } from 'lit';
|
|
2
2
|
import { property } from 'lit/decorators.js';
|
|
3
3
|
import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
4
|
+
import { IconCloseLarge } from '@justeattakeaway/pie-icons-webc';
|
|
4
5
|
|
|
5
6
|
import styles from './iconButton.scss?inline';
|
|
6
7
|
import {
|
|
7
|
-
IconButtonProps,
|
|
8
|
+
IconButtonProps, sizes, variants,
|
|
8
9
|
} from './defs';
|
|
9
10
|
|
|
10
11
|
// Valid values available to consumers
|
|
11
|
-
export { type IconButtonProps,
|
|
12
|
+
export { type IconButtonProps, sizes, variants };
|
|
13
|
+
export { IconCloseLarge };
|
|
12
14
|
|
|
13
15
|
const componentSelector = 'pie-icon-button';
|
|
14
16
|
|
|
15
17
|
export class PieIconButton extends LitElement {
|
|
16
18
|
@property()
|
|
17
|
-
@validPropertyValues(componentSelector,
|
|
19
|
+
@validPropertyValues(componentSelector, sizes, 'medium')
|
|
18
20
|
size: IconButtonProps['size'] = 'medium';
|
|
19
21
|
|
|
20
22
|
@property()
|
|
21
|
-
@validPropertyValues(componentSelector,
|
|
23
|
+
@validPropertyValues(componentSelector, variants, 'primary')
|
|
22
24
|
variant: IconButtonProps['variant'] = 'primary';
|
|
23
25
|
|
|
24
26
|
@property({ type: Boolean })
|
|
@@ -36,9 +38,7 @@ export class PieIconButton extends LitElement {
|
|
|
36
38
|
size=${size}
|
|
37
39
|
variant=${variant}
|
|
38
40
|
?disabled=${disabled}>
|
|
39
|
-
<
|
|
40
|
-
<path d="M11.8676 3.20496L8.0001 7.07248L4.13258 3.20496L3.20508 4.13246L7.0726 7.99998L3.20508 11.8675L4.13258 12.795L8.0001 8.92748L11.8676 12.795L12.7951 11.8675L8.92761 7.99998L12.7951 4.13246L11.8676 3.20496Z" fill="#242E30"/>
|
|
41
|
-
</svg>
|
|
41
|
+
<icon-close-large />
|
|
42
42
|
</button>`;
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -2,15 +2,15 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
|
2
2
|
import AxeBuilder from '@axe-core/playwright';
|
|
3
3
|
import type {
|
|
4
4
|
PropObject, WebComponentPropValues,
|
|
5
|
-
} from '@justeattakeaway/pie-webc-
|
|
5
|
+
} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
|
|
6
6
|
import {
|
|
7
7
|
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
8
|
-
} from '@justeattakeaway/pie-webc-
|
|
8
|
+
} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
|
|
9
9
|
import { PieIconButton } from '@/index';
|
|
10
|
-
import {
|
|
10
|
+
import { variants } from '@/defs';
|
|
11
11
|
|
|
12
12
|
const props: PropObject = {
|
|
13
|
-
variant:
|
|
13
|
+
variant: variants,
|
|
14
14
|
disabled: [true, false],
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
import { test } from '@sand4rt/experimental-ct-web';
|
|
2
2
|
import percySnapshot from '@percy/playwright';
|
|
3
|
-
import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
|
|
4
3
|
import type {
|
|
5
4
|
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
6
|
-
} from '@justeattakeaway/pie-webc-
|
|
5
|
+
} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
|
|
7
6
|
import {
|
|
8
7
|
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
9
|
-
} from '@justeattakeaway/pie-webc-
|
|
8
|
+
} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
|
|
10
9
|
import {
|
|
11
10
|
createTestWebComponent,
|
|
12
|
-
} from '@justeattakeaway/pie-webc-
|
|
11
|
+
} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
|
|
13
12
|
import {
|
|
14
13
|
WebComponentTestWrapper,
|
|
15
|
-
} from '@justeattakeaway/pie-webc-
|
|
14
|
+
} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
16
15
|
import { PieIconButton } from '@/index';
|
|
17
|
-
import {
|
|
16
|
+
import { sizes, variants } from '@/defs';
|
|
18
17
|
|
|
19
18
|
const props: PropObject = {
|
|
20
|
-
size:
|
|
21
|
-
variant:
|
|
19
|
+
size: sizes,
|
|
20
|
+
variant: variants,
|
|
22
21
|
disabled: [true, false],
|
|
23
22
|
};
|
|
24
23
|
|
|
@@ -31,13 +30,17 @@ const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
|
31
30
|
|
|
32
31
|
// This ensures the component is registered in the DOM for each test
|
|
33
32
|
// This is not required if your tests mount the web component directly in the tests
|
|
34
|
-
test(
|
|
33
|
+
test.beforeEach(async ({ page, mount }) => {
|
|
35
34
|
await mount(
|
|
36
35
|
PieIconButton,
|
|
37
|
-
{
|
|
38
|
-
props: {},
|
|
39
|
-
},
|
|
36
|
+
{},
|
|
40
37
|
);
|
|
38
|
+
|
|
39
|
+
// Removing the element so it's not present in the tests (but is still registered in the DOM)
|
|
40
|
+
await page.evaluate(() => {
|
|
41
|
+
const element : Element | null = document.querySelector('pie-icon-button');
|
|
42
|
+
element?.remove();
|
|
43
|
+
});
|
|
41
44
|
});
|
|
42
45
|
|
|
43
46
|
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
@@ -50,11 +53,11 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
|
|
|
50
53
|
{
|
|
51
54
|
props: { propKeyValues },
|
|
52
55
|
slots: {
|
|
53
|
-
|
|
56
|
+
component: testComponent.renderedString,
|
|
54
57
|
},
|
|
55
58
|
},
|
|
56
59
|
);
|
|
57
60
|
}));
|
|
58
61
|
|
|
59
|
-
await percySnapshot(page, `PIE Icon Button - Variant: ${variant}
|
|
62
|
+
await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`);
|
|
60
63
|
}));
|