@justeattakeaway/pie-icon-button 0.21.2 → 0.21.3
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 +1 -1
- package/dist/index.js +17 -17
- package/dist/react.d.ts +1 -1
- package/dist/react.js +10 -64
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -60,7 +60,7 @@ import '@justeattakeaway/pie-icon-button';
|
|
|
60
60
|
```js
|
|
61
61
|
// React
|
|
62
62
|
// For React, you will need to import our React-specific component build
|
|
63
|
-
// which wraps the web component using
|
|
63
|
+
// which wraps the web component using @lit/react
|
|
64
64
|
import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
65
65
|
```
|
|
66
66
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as f, LitElement as m, html as s } from "lit";
|
|
2
2
|
import { property as l } from "lit/decorators.js";
|
|
3
3
|
import "@justeattakeaway/pie-spinner";
|
|
4
4
|
const h = (i, o, t) => function(r, n) {
|
|
@@ -8,20 +8,20 @@ const h = (i, o, t) => function(r, n) {
|
|
|
8
8
|
return this[a];
|
|
9
9
|
},
|
|
10
10
|
set(v) {
|
|
11
|
-
const f = this[a];
|
|
12
11
|
o.includes(v) ? this[a] = v : (console.error(
|
|
13
12
|
`<${i}> Invalid value "${v}" provided for property "${n}".`,
|
|
14
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
14
|
`Falling back to default value: "${t}"`
|
|
16
|
-
), this[a] = t)
|
|
17
|
-
}
|
|
15
|
+
), this[a] = t);
|
|
16
|
+
},
|
|
17
|
+
configurable: !0
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
|
-
function
|
|
20
|
+
function g(i, o) {
|
|
21
21
|
customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, o);
|
|
22
22
|
}
|
|
23
|
-
const
|
|
24
|
-
`,
|
|
23
|
+
const p = `: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);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);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;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(--btn-icon-size);width:var(--btn-icon-size)}.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][isLoading]: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][isLoading]: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][isLoading]: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][isLoading]: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][isLoading]: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][isLoading]: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][isLoading]: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}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
24
|
+
`, u = ["xsmall", "small", "medium", "large"], y = [
|
|
25
25
|
"primary",
|
|
26
26
|
"secondary",
|
|
27
27
|
"outline",
|
|
@@ -30,13 +30,13 @@ const u = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
|
|
|
30
30
|
"inverse",
|
|
31
31
|
"ghost-inverse"
|
|
32
32
|
];
|
|
33
|
-
var
|
|
34
|
-
for (var r = e > 1 ? void 0 : e ?
|
|
33
|
+
var B = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (i, o, t, e) => {
|
|
34
|
+
for (var r = e > 1 ? void 0 : e ? z(o, t) : o, n = i.length - 1, a; n >= 0; n--)
|
|
35
35
|
(a = i[n]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
36
|
-
return e && r &&
|
|
36
|
+
return e && r && B(o, t, r), r;
|
|
37
37
|
};
|
|
38
38
|
const b = "pie-icon-button";
|
|
39
|
-
class c extends
|
|
39
|
+
class c extends m {
|
|
40
40
|
constructor() {
|
|
41
41
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
|
|
42
42
|
}
|
|
@@ -72,14 +72,14 @@ class c extends g {
|
|
|
72
72
|
</button>`;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
c.styles =
|
|
75
|
+
c.styles = f(p);
|
|
76
76
|
d([
|
|
77
77
|
l(),
|
|
78
|
-
h(b,
|
|
78
|
+
h(b, u, "medium")
|
|
79
79
|
], c.prototype, "size", 2);
|
|
80
80
|
d([
|
|
81
81
|
l(),
|
|
82
|
-
h(b,
|
|
82
|
+
h(b, y, "primary")
|
|
83
83
|
], c.prototype, "variant", 2);
|
|
84
84
|
d([
|
|
85
85
|
l({ type: Boolean })
|
|
@@ -87,9 +87,9 @@ d([
|
|
|
87
87
|
d([
|
|
88
88
|
l({ type: Boolean })
|
|
89
89
|
], c.prototype, "isLoading", 2);
|
|
90
|
-
|
|
90
|
+
g(b, c);
|
|
91
91
|
export {
|
|
92
92
|
c as PieIconButton,
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
u as sizes,
|
|
94
|
+
y as variants
|
|
95
95
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { ReactWebComponent } from '@lit
|
|
3
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare interface IconButtonProps {
|
package/dist/react.js
CHANGED
|
@@ -1,73 +1,19 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import * as t from "react";
|
|
2
|
+
import { createComponent as o } from "@lit/react";
|
|
3
|
+
import { PieIconButton as e } from "./index.js";
|
|
4
|
+
import { sizes as u, variants as f } from "./index.js";
|
|
4
5
|
import "lit";
|
|
5
6
|
import "lit/decorators.js";
|
|
6
7
|
import "@justeattakeaway/pie-spinner";
|
|
7
|
-
|
|
8
|
-
* @license
|
|
9
|
-
* Copyright 2018 Google LLC
|
|
10
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/
|
|
12
|
-
const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), B = (t, o, m, p, d) => {
|
|
13
|
-
const s = d == null ? void 0 : d[o];
|
|
14
|
-
s === void 0 || m === p ? m == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = m : ((r, n, u) => {
|
|
15
|
-
let a = w.get(r);
|
|
16
|
-
a === void 0 && w.set(r, a = /* @__PURE__ */ new Map());
|
|
17
|
-
let l = a.get(n);
|
|
18
|
-
u !== void 0 ? l === void 0 ? (a.set(n, l = { handleEvent: u }), r.addEventListener(n, l)) : l.handleEvent = u : l !== void 0 && (a.delete(n), r.removeEventListener(n, l));
|
|
19
|
-
})(t, s, m);
|
|
20
|
-
}, I = (t, o) => {
|
|
21
|
-
typeof t == "function" ? t(o) : t.current = o;
|
|
22
|
-
};
|
|
23
|
-
function M(t = window.React, o, m, p, d) {
|
|
24
|
-
let s, r, n;
|
|
25
|
-
if (o === void 0) {
|
|
26
|
-
const c = t;
|
|
27
|
-
({ tagName: r, elementClass: n, events: p, displayName: d } = c), s = c.react;
|
|
28
|
-
} else
|
|
29
|
-
s = t, n = m, r = o;
|
|
30
|
-
const u = s.Component, a = s.createElement, l = new Set(Object.keys(p ?? {}));
|
|
31
|
-
class f extends u {
|
|
32
|
-
constructor() {
|
|
33
|
-
super(...arguments), this.o = null;
|
|
34
|
-
}
|
|
35
|
-
t(e) {
|
|
36
|
-
if (this.o !== null)
|
|
37
|
-
for (const h in this.i)
|
|
38
|
-
B(this.o, h, this.props[h], e ? e[h] : void 0, p);
|
|
39
|
-
}
|
|
40
|
-
componentDidMount() {
|
|
41
|
-
var e;
|
|
42
|
-
this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
|
|
43
|
-
}
|
|
44
|
-
componentDidUpdate(e) {
|
|
45
|
-
this.t(e);
|
|
46
|
-
}
|
|
47
|
-
render() {
|
|
48
|
-
const { _$Gl: e, ...h } = this.props;
|
|
49
|
-
this.h !== e && (this.u = (i) => {
|
|
50
|
-
e !== null && I(e, i), this.o = i, this.h = e;
|
|
51
|
-
}), this.i = {};
|
|
52
|
-
const v = { ref: this.u };
|
|
53
|
-
for (const [i, y] of Object.entries(h))
|
|
54
|
-
b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in n.prototype ? this.i[i] = y : v[i] = y;
|
|
55
|
-
return v.suppressHydrationWarning = !0, a(r, v);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
f.displayName = d ?? n.name;
|
|
59
|
-
const N = s.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
60
|
-
return N.displayName = f.displayName, N;
|
|
61
|
-
}
|
|
62
|
-
const R = M({
|
|
8
|
+
const p = o({
|
|
63
9
|
displayName: "PieIconButton",
|
|
64
|
-
elementClass:
|
|
65
|
-
react:
|
|
10
|
+
elementClass: e,
|
|
11
|
+
react: t,
|
|
66
12
|
tagName: "pie-icon-button",
|
|
67
13
|
events: {}
|
|
68
14
|
});
|
|
69
15
|
export {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
16
|
+
p as PieIconButton,
|
|
17
|
+
u as sizes,
|
|
18
|
+
f as variants
|
|
73
19
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.3",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
30
|
-
"@justeattakeaway/pie-spinner": "0.2.
|
|
31
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
30
|
+
"@justeattakeaway/pie-spinner": "0.2.2",
|
|
31
|
+
"@justeattakeaway/pie-webc-core": "0.12.0"
|
|
32
32
|
},
|
|
33
33
|
"volta": {
|
|
34
34
|
"extends": "../../../package.json"
|