@justeattakeaway/pie-icon-button 0.28.11 → 0.28.13
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 +36 -37
- package/dist/react.js +6 -10
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { LitElement as f, html as d, unsafeCSS as g } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
|
-
import { validPropertyValues as
|
|
3
|
+
import { validPropertyValues as m, defineCustomElement as p } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-spinner";
|
|
5
|
-
const
|
|
6
|
-
`, u = ["xsmall", "small", "medium", "large"], y = [
|
|
5
|
+
const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 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);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.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(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-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)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-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)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--icon-size-override: 28px}", y = ["xsmall", "small", "medium", "large"], B = [
|
|
7
6
|
"primary",
|
|
8
7
|
"secondary",
|
|
9
8
|
"outline",
|
|
@@ -17,13 +16,12 @@ const p = `*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
|
|
|
17
16
|
disabled: !1,
|
|
18
17
|
isLoading: !1
|
|
19
18
|
};
|
|
20
|
-
var
|
|
21
|
-
for (var
|
|
22
|
-
(
|
|
23
|
-
return
|
|
19
|
+
var k = Object.defineProperty, l = (b, r, e, n) => {
|
|
20
|
+
for (var o = void 0, i = b.length - 1, h; i >= 0; i--)
|
|
21
|
+
(h = b[i]) && (o = h(r, e, o) || o);
|
|
22
|
+
return o && k(r, e, o), o;
|
|
24
23
|
};
|
|
25
|
-
const
|
|
26
|
-
class n extends f {
|
|
24
|
+
const v = "pie-icon-button", s = class s extends f {
|
|
27
25
|
constructor() {
|
|
28
26
|
super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
|
|
29
27
|
}
|
|
@@ -33,51 +31,52 @@ class n extends f {
|
|
|
33
31
|
* @private
|
|
34
32
|
*/
|
|
35
33
|
renderSpinner() {
|
|
36
|
-
const { variant:
|
|
37
|
-
let
|
|
38
|
-
return
|
|
34
|
+
const { variant: r, size: e, disabled: n } = this, o = e === "xsmall" ? "small" : "medium";
|
|
35
|
+
let i = "brand";
|
|
36
|
+
return r != null && r.includes("secondary") && (i = "secondary"), (r === "primary" && !n || r === "ghost-inverse") && (i = "inverse"), d`
|
|
39
37
|
<pie-spinner
|
|
40
|
-
size="${
|
|
41
|
-
variant="${
|
|
38
|
+
size="${o}"
|
|
39
|
+
variant="${i}">
|
|
42
40
|
</pie-spinner>`;
|
|
43
41
|
}
|
|
44
42
|
render() {
|
|
45
43
|
const {
|
|
46
|
-
disabled:
|
|
47
|
-
size:
|
|
48
|
-
variant:
|
|
49
|
-
isLoading:
|
|
44
|
+
disabled: r,
|
|
45
|
+
size: e,
|
|
46
|
+
variant: n,
|
|
47
|
+
isLoading: o
|
|
50
48
|
} = this;
|
|
51
|
-
return
|
|
49
|
+
return d`
|
|
52
50
|
<button
|
|
53
51
|
class="o-iconBtn"
|
|
54
|
-
size="${
|
|
55
|
-
variant="${
|
|
56
|
-
?disabled="${
|
|
57
|
-
?isLoading="${
|
|
58
|
-
${
|
|
52
|
+
size="${e || "medium"}"
|
|
53
|
+
variant="${n || "primary"}"
|
|
54
|
+
?disabled="${r}"
|
|
55
|
+
?isLoading="${o}">
|
|
56
|
+
${o ? this.renderSpinner() : d`<slot></slot>`}
|
|
59
57
|
</button>`;
|
|
60
58
|
}
|
|
61
|
-
}
|
|
62
|
-
|
|
59
|
+
};
|
|
60
|
+
s.styles = g(u);
|
|
61
|
+
let t = s;
|
|
63
62
|
l([
|
|
64
63
|
c(),
|
|
65
|
-
|
|
66
|
-
],
|
|
64
|
+
m(v, y, a.size)
|
|
65
|
+
], t.prototype, "size");
|
|
67
66
|
l([
|
|
68
67
|
c(),
|
|
69
|
-
|
|
70
|
-
],
|
|
68
|
+
m(v, B, a.variant)
|
|
69
|
+
], t.prototype, "variant");
|
|
71
70
|
l([
|
|
72
71
|
c({ type: Boolean })
|
|
73
|
-
],
|
|
72
|
+
], t.prototype, "disabled");
|
|
74
73
|
l([
|
|
75
74
|
c({ type: Boolean })
|
|
76
|
-
],
|
|
77
|
-
|
|
75
|
+
], t.prototype, "isLoading");
|
|
76
|
+
p(v, t);
|
|
78
77
|
export {
|
|
79
|
-
|
|
78
|
+
t as PieIconButton,
|
|
80
79
|
a as defaultProps,
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
y as sizes,
|
|
81
|
+
B as variants
|
|
83
82
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
import * as t from "react";
|
|
2
2
|
import { createComponent as o } from "@lit/react";
|
|
3
3
|
import { PieIconButton as e } from "./index.js";
|
|
4
|
-
import { defaultProps as
|
|
5
|
-
import "lit";
|
|
6
|
-
import "lit/decorators.js";
|
|
7
|
-
import "@justeattakeaway/pie-webc-core";
|
|
8
|
-
import "@justeattakeaway/pie-spinner";
|
|
4
|
+
import { defaultProps as m, sizes as p, variants as u } from "./index.js";
|
|
9
5
|
const n = o({
|
|
10
6
|
displayName: "PieIconButton",
|
|
11
7
|
elementClass: e,
|
|
12
8
|
react: t,
|
|
13
9
|
tagName: "pie-icon-button",
|
|
14
10
|
events: {}
|
|
15
|
-
}),
|
|
11
|
+
}), r = n;
|
|
16
12
|
export {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
r as PieIconButton,
|
|
14
|
+
m as defaultProps,
|
|
15
|
+
p as sizes,
|
|
16
|
+
u as variants
|
|
21
17
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.28.
|
|
3
|
+
"version": "0.28.13",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
37
37
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
38
|
-
"@justeattakeaway/pie-css": "0.
|
|
38
|
+
"@justeattakeaway/pie-css": "0.13.0",
|
|
39
39
|
"@justeattakeaway/pie-wrapper-react": "0.14.1",
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-icons-webc": "0.25.
|
|
44
|
-
"@justeattakeaway/pie-spinner": "0.
|
|
45
|
-
"@justeattakeaway/pie-webc-core": "0.24.
|
|
43
|
+
"@justeattakeaway/pie-icons-webc": "0.25.2",
|
|
44
|
+
"@justeattakeaway/pie-spinner": "0.7.1",
|
|
45
|
+
"@justeattakeaway/pie-webc-core": "0.24.1"
|
|
46
46
|
},
|
|
47
47
|
"volta": {
|
|
48
48
|
"extends": "../../../package.json"
|