@justeattakeaway/pie-icon-button 0.14.1 → 0.16.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/dist/index.js +13 -14
- package/dist/react.js +14 -15
- package/package.json +9 -6
- package/src/iconButton.scss +3 -2
package/dist/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { unsafeCSS as h, LitElement as f, html as p } from "lit";
|
|
2
2
|
import { property as d } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
const b = (i, o, n) => function(t, r) {
|
|
3
|
+
const b = (c, o, n) => function(t, r) {
|
|
5
4
|
const a = `#${r}`;
|
|
6
5
|
Object.defineProperty(t, r, {
|
|
7
6
|
get() {
|
|
@@ -10,21 +9,21 @@ const b = (i, o, n) => function(t, r) {
|
|
|
10
9
|
set(l) {
|
|
11
10
|
const u = this[a];
|
|
12
11
|
o.includes(l) ? this[a] = l : (console.error(
|
|
13
|
-
`<${
|
|
12
|
+
`<${c}> Invalid value "${l}" provided for property "${r}".`,
|
|
14
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
14
|
`Falling back to default value: "${n}"`
|
|
16
15
|
), this[a] = n), this.requestUpdate(r, u);
|
|
17
16
|
}
|
|
18
17
|
});
|
|
19
|
-
}, g = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);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);color:var(--btn-icon-fill);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{
|
|
18
|
+
}, g = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);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);color:var(--btn-icon-fill);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{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.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) !important;--btn-icon-fill: var(--dt-color-content-disabled) !important}.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}
|
|
20
19
|
`, m = ["xsmall", "small", "medium", "large"], B = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
21
|
-
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (
|
|
22
|
-
for (var t = e > 1 ? void 0 : e ? x(o, n) : o, r =
|
|
23
|
-
(a =
|
|
20
|
+
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (c, o, n, e) => {
|
|
21
|
+
for (var t = e > 1 ? void 0 : e ? x(o, n) : o, r = c.length - 1, a; r >= 0; r--)
|
|
22
|
+
(a = c[r]) && (t = (e ? a(o, n, t) : a(t)) || t);
|
|
24
23
|
return e && t && y(o, n, t), t;
|
|
25
24
|
};
|
|
26
25
|
const v = "pie-icon-button";
|
|
27
|
-
class
|
|
26
|
+
class i extends f {
|
|
28
27
|
constructor() {
|
|
29
28
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
|
|
30
29
|
}
|
|
@@ -44,21 +43,21 @@ class c extends f {
|
|
|
44
43
|
</button>`;
|
|
45
44
|
}
|
|
46
45
|
}
|
|
47
|
-
|
|
46
|
+
i.styles = h(g);
|
|
48
47
|
s([
|
|
49
48
|
d(),
|
|
50
49
|
b(v, m, "medium")
|
|
51
|
-
],
|
|
50
|
+
], i.prototype, "size", 2);
|
|
52
51
|
s([
|
|
53
52
|
d(),
|
|
54
53
|
b(v, B, "primary")
|
|
55
|
-
],
|
|
54
|
+
], i.prototype, "variant", 2);
|
|
56
55
|
s([
|
|
57
56
|
d({ type: Boolean })
|
|
58
|
-
],
|
|
59
|
-
customElements.define(v,
|
|
57
|
+
], i.prototype, "disabled", 2);
|
|
58
|
+
customElements.define(v, i);
|
|
60
59
|
export {
|
|
61
|
-
|
|
60
|
+
i as PieIconButton,
|
|
62
61
|
m as sizes,
|
|
63
62
|
B as variants
|
|
64
63
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
import * as g from "react";
|
|
2
2
|
import { PieIconButton as b } from "./index.js";
|
|
3
|
-
import { sizes as
|
|
3
|
+
import { sizes as j, variants as k } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
|
-
import "lit/decorators/property.js";
|
|
7
6
|
/**
|
|
8
7
|
* @license
|
|
9
8
|
* Copyright 2018 Google LLC
|
|
10
9
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
10
|
*/
|
|
12
|
-
const B = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), I = (d,
|
|
13
|
-
const o = u == null ? void 0 : u[
|
|
14
|
-
o === void 0 || m === p ? m == null &&
|
|
11
|
+
const B = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), I = (d, l, m, p, u) => {
|
|
12
|
+
const o = u == null ? void 0 : u[l];
|
|
13
|
+
o === void 0 || m === p ? m == null && l in HTMLElement.prototype ? d.removeAttribute(l) : d[l] = m : ((i, t, h) => {
|
|
15
14
|
let s = E.get(i);
|
|
16
15
|
s === void 0 && E.set(i, s = /* @__PURE__ */ new Map());
|
|
17
16
|
let a = s.get(t);
|
|
18
17
|
h !== void 0 ? a === void 0 ? (s.set(t, a = { handleEvent: h }), i.addEventListener(t, a)) : a.handleEvent = h : a !== void 0 && (s.delete(t), i.removeEventListener(t, a));
|
|
19
18
|
})(d, o, m);
|
|
20
19
|
};
|
|
21
|
-
function M(d = window.React,
|
|
20
|
+
function M(d = window.React, l, m, p, u) {
|
|
22
21
|
let o, i, t;
|
|
23
|
-
if (
|
|
24
|
-
const
|
|
25
|
-
({ tagName: i, elementClass: t, events: p, displayName: u } =
|
|
22
|
+
if (l === void 0) {
|
|
23
|
+
const r = d;
|
|
24
|
+
({ tagName: i, elementClass: t, events: p, displayName: u } = r), o = r.react;
|
|
26
25
|
} else
|
|
27
|
-
o = d, t = m, i =
|
|
26
|
+
o = d, t = m, i = l;
|
|
28
27
|
const h = o.Component, s = o.createElement, a = new Set(Object.keys(p ?? {}));
|
|
29
28
|
class f extends h {
|
|
30
29
|
constructor() {
|
|
@@ -55,10 +54,10 @@ function M(d = window.React, r, m, p, u) {
|
|
|
55
54
|
}
|
|
56
55
|
}
|
|
57
56
|
f.displayName = u ?? t.name;
|
|
58
|
-
const N = o.forwardRef((
|
|
57
|
+
const N = o.forwardRef((r, e) => s(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
|
|
59
58
|
return N.displayName = f.displayName, N;
|
|
60
59
|
}
|
|
61
|
-
const
|
|
60
|
+
const L = M({
|
|
62
61
|
displayName: "PieIconButton",
|
|
63
62
|
elementClass: b,
|
|
64
63
|
react: g,
|
|
@@ -66,7 +65,7 @@ const R = M({
|
|
|
66
65
|
events: {}
|
|
67
66
|
});
|
|
68
67
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
L as PieIconButton,
|
|
69
|
+
j as sizes,
|
|
70
|
+
k as variants
|
|
72
71
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -23,16 +23,19 @@
|
|
|
23
23
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
|
24
24
|
"test:visual:ci": "yarn test:visual"
|
|
25
25
|
},
|
|
26
|
-
"author": "
|
|
26
|
+
"author": "Just Eat Takeaway.com - Design System Team",
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@justeattakeaway/pie-icons-webc": "
|
|
30
|
-
"@justeattakeaway/pie-webc-core": "
|
|
29
|
+
"@justeattakeaway/pie-icons-webc": "0.8.1",
|
|
30
|
+
"@justeattakeaway/pie-webc-core": "0.9.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@justeat/pie-design-tokens": "^5.
|
|
33
|
+
"@justeat/pie-design-tokens": "^5.8.2"
|
|
34
34
|
},
|
|
35
35
|
"volta": {
|
|
36
36
|
"extends": "../../../package.json"
|
|
37
|
-
}
|
|
37
|
+
},
|
|
38
|
+
"sideEffects": [
|
|
39
|
+
"dist/*.js"
|
|
40
|
+
]
|
|
38
41
|
}
|
package/src/iconButton.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
|
+
|
|
1
3
|
@mixin button-interactive-states($bg-color) {
|
|
2
4
|
&:hover:not(:disabled) {
|
|
3
5
|
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
@@ -47,8 +49,7 @@
|
|
|
47
49
|
justify-content: center;
|
|
48
50
|
|
|
49
51
|
&:focus-visible {
|
|
50
|
-
|
|
51
|
-
outline: 2px solid var(--btn-focus);
|
|
52
|
+
@include p.focus;
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
svg {
|