@justeattakeaway/pie-icon-button 1.0.0 → 1.1.1
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 +49 -46
- package/package.json +3 -3
- package/src/iconButton.scss +13 -13
- package/src/index.ts +9 -4
package/dist/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { LitElement as B, html as v, unsafeCSS as p } from "lit";
|
|
2
|
+
import { classMap as g } from "lit/directives/class-map.js";
|
|
3
|
+
import { property as a } from "lit/decorators.js";
|
|
4
|
+
import { ifDefined as c } from "lit/directives/if-defined.js";
|
|
5
|
+
import { validPropertyValues as m, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
|
|
5
6
|
import "@justeattakeaway/pie-spinner";
|
|
6
|
-
const
|
|
7
|
+
const y = "*,*: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.o-iconBtn--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.o-iconBtn--primary:active:not(:disabled),.o-iconBtn.o-iconBtn--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.o-iconBtn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--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.o-iconBtn--secondary:active:not(:disabled),.o-iconBtn.o-iconBtn--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.o-iconBtn--outline{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--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.o-iconBtn--outline:active:not(:disabled),.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost:active:not(:disabled),.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost-secondary{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost-secondary:active:not(:disabled),.o-iconBtn.o-iconBtn--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.o-iconBtn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--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.o-iconBtn--inverse:active:not(:disabled),.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost-inverse{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost-inverse:active:not(:disabled),.o-iconBtn.o-iconBtn--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(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", k = ["xsmall", "small", "medium", "large"], x = [
|
|
7
8
|
"primary",
|
|
8
9
|
"secondary",
|
|
9
10
|
"outline",
|
|
@@ -11,20 +12,20 @@ const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
|
|
|
11
12
|
"ghost-secondary",
|
|
12
13
|
"inverse",
|
|
13
14
|
"ghost-inverse"
|
|
14
|
-
],
|
|
15
|
+
], e = {
|
|
15
16
|
size: "medium",
|
|
16
17
|
variant: "primary",
|
|
17
18
|
disabled: !1,
|
|
18
19
|
isLoading: !1
|
|
19
20
|
};
|
|
20
|
-
var z = Object.defineProperty, l = (
|
|
21
|
-
for (var r = void 0, o =
|
|
22
|
-
(
|
|
23
|
-
return r && z(
|
|
21
|
+
var z = Object.defineProperty, l = (f, t, n, d) => {
|
|
22
|
+
for (var r = void 0, o = f.length - 1, s; o >= 0; o--)
|
|
23
|
+
(s = f[o]) && (r = s(t, n, r) || r);
|
|
24
|
+
return r && z(t, n, r), r;
|
|
24
25
|
};
|
|
25
|
-
const
|
|
26
|
+
const b = "pie-icon-button", h = class h extends B {
|
|
26
27
|
constructor() {
|
|
27
|
-
super(...arguments), this.size =
|
|
28
|
+
super(...arguments), this.size = e.size, this.variant = e.variant, this.disabled = e.disabled, this.isLoading = e.isLoading;
|
|
28
29
|
}
|
|
29
30
|
/**
|
|
30
31
|
* Template for the loading state
|
|
@@ -32,9 +33,9 @@ const s = "pie-icon-button", b = class b extends g {
|
|
|
32
33
|
* @private
|
|
33
34
|
*/
|
|
34
35
|
renderSpinner() {
|
|
35
|
-
const { variant:
|
|
36
|
+
const { variant: t, size: n, disabled: d } = this, r = n === "xsmall" ? "small" : "medium";
|
|
36
37
|
let o = "brand";
|
|
37
|
-
return
|
|
38
|
+
return t != null && t.includes("secondary") && (o = "secondary"), (t === "primary" && !d || t === "ghost-inverse") && (o = "inverse"), v`
|
|
38
39
|
<pie-spinner
|
|
39
40
|
size="${r}"
|
|
40
41
|
variant="${o}">
|
|
@@ -42,52 +43,54 @@ const s = "pie-icon-button", b = class b extends g {
|
|
|
42
43
|
}
|
|
43
44
|
render() {
|
|
44
45
|
const {
|
|
45
|
-
disabled:
|
|
46
|
-
size:
|
|
46
|
+
disabled: t,
|
|
47
|
+
size: n,
|
|
47
48
|
variant: d,
|
|
48
49
|
isLoading: r,
|
|
49
50
|
aria: o
|
|
50
|
-
} = this
|
|
51
|
+
} = this, s = {
|
|
52
|
+
"o-iconBtn": !0,
|
|
53
|
+
[`o-iconBtn--${n}`]: !0,
|
|
54
|
+
[`o-iconBtn--${d}`]: !0,
|
|
55
|
+
"is-loading": r
|
|
56
|
+
};
|
|
51
57
|
return v`
|
|
52
58
|
<button
|
|
53
|
-
class="
|
|
59
|
+
class="${g(s)}"
|
|
54
60
|
data-test-id="pie-icon-button"
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
aria-
|
|
60
|
-
aria-
|
|
61
|
-
aria-describedby="${n(o == null ? void 0 : o.describedby)}"
|
|
62
|
-
aria-expanded="${n(o == null ? void 0 : o.expanded)}"
|
|
63
|
-
aria-controls="${n(o == null ? void 0 : o.controls)}">
|
|
61
|
+
?disabled="${t}"
|
|
62
|
+
aria-label="${c(o == null ? void 0 : o.label)}"
|
|
63
|
+
aria-labelledby="${c(o == null ? void 0 : o.labelledby)}"
|
|
64
|
+
aria-describedby="${c(o == null ? void 0 : o.describedby)}"
|
|
65
|
+
aria-expanded="${c(o == null ? void 0 : o.expanded)}"
|
|
66
|
+
aria-controls="${c(o == null ? void 0 : o.controls)}">
|
|
64
67
|
${r ? this.renderSpinner() : v`<slot></slot>`}
|
|
65
68
|
</button>`;
|
|
66
69
|
}
|
|
67
70
|
};
|
|
68
|
-
|
|
69
|
-
let
|
|
71
|
+
h.styles = p(y);
|
|
72
|
+
let i = h;
|
|
70
73
|
l([
|
|
71
|
-
|
|
72
|
-
],
|
|
74
|
+
a({ type: Object })
|
|
75
|
+
], i.prototype, "aria");
|
|
73
76
|
l([
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
],
|
|
77
|
+
a({ type: String }),
|
|
78
|
+
m(b, k, e.size)
|
|
79
|
+
], i.prototype, "size");
|
|
77
80
|
l([
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
],
|
|
81
|
+
a({ type: String }),
|
|
82
|
+
m(b, x, e.variant)
|
|
83
|
+
], i.prototype, "variant");
|
|
81
84
|
l([
|
|
82
|
-
|
|
83
|
-
],
|
|
85
|
+
a({ type: Boolean })
|
|
86
|
+
], i.prototype, "disabled");
|
|
84
87
|
l([
|
|
85
|
-
|
|
86
|
-
],
|
|
87
|
-
|
|
88
|
+
a({ type: Boolean })
|
|
89
|
+
], i.prototype, "isLoading");
|
|
90
|
+
u(b, i);
|
|
88
91
|
export {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
92
|
+
i as PieIconButton,
|
|
93
|
+
e as defaultProps,
|
|
94
|
+
k as sizes,
|
|
95
|
+
x as variants
|
|
93
96
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
38
38
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
39
|
-
"@justeattakeaway/pie-css": "0.
|
|
39
|
+
"@justeattakeaway/pie-css": "0.14.1",
|
|
40
40
|
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
41
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "1.3.0",
|
|
45
45
|
"@justeattakeaway/pie-spinner": "1.0.0",
|
|
46
46
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
47
47
|
},
|
package/src/iconButton.scss
CHANGED
|
@@ -41,20 +41,20 @@
|
|
|
41
41
|
width: var(--icon-size-override);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
&.o-iconBtn--primary {
|
|
45
45
|
/* Same as default styles */
|
|
46
46
|
|
|
47
47
|
@include p.button-interactive-states('--dt-color-interactive-brand');
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
&.o-iconBtn--secondary {
|
|
51
51
|
--btn-bg-color: var(--dt-color-interactive-secondary);
|
|
52
52
|
--btn-icon-fill: var(--dt-color-content-interactive-secondary);
|
|
53
53
|
|
|
54
54
|
@include p.button-interactive-states('--dt-color-interactive-secondary');
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
&.o-iconBtn--outline {
|
|
58
58
|
--btn-bg-color: transparent;
|
|
59
59
|
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
60
60
|
|
|
@@ -63,28 +63,28 @@
|
|
|
63
63
|
@include p.button-interactive-states('--dt-color-black', 'transparent');
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
&.o-iconBtn--ghost {
|
|
67
67
|
--btn-bg-color: transparent;
|
|
68
68
|
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
69
69
|
|
|
70
70
|
@include p.button-interactive-states('--dt-color-black', 'transparent');
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
&.o-iconBtn--ghost-secondary {
|
|
74
74
|
--btn-bg-color: transparent;
|
|
75
75
|
--btn-icon-fill: var(--dt-color-content-interactive-secondary);
|
|
76
76
|
|
|
77
77
|
@include p.button-interactive-states('--dt-color-black', 'transparent');
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
&.o-iconBtn--inverse {
|
|
81
81
|
--btn-bg-color: var(--dt-color-interactive-inverse);
|
|
82
82
|
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
83
83
|
|
|
84
84
|
@include p.button-interactive-states('--dt-color-interactive-inverse');
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
&.o-iconBtn--ghost-inverse {
|
|
88
88
|
--btn-bg-color: transparent;
|
|
89
89
|
--btn-icon-fill: var(--dt-color-content-inverse);
|
|
90
90
|
|
|
@@ -97,30 +97,30 @@
|
|
|
97
97
|
cursor: not-allowed;
|
|
98
98
|
|
|
99
99
|
// For every variant (except ghost variants) set the disabled background color
|
|
100
|
-
&:not(
|
|
100
|
+
&:not(.o-iconBtn--ghost, .o-iconBtn--ghost-secondary, .o-iconBtn--ghost-inverse) {
|
|
101
101
|
--btn-bg-color: var(--dt-color-disabled-01);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
// For outline variants, set the border to the disabled color
|
|
105
|
-
|
|
105
|
+
&.o-iconBtn--outline {
|
|
106
106
|
border-color: var(--dt-color-disabled-01);
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
|
|
110
|
+
&.o-iconBtn--xsmall {
|
|
111
111
|
--btn-dimension: 32px;
|
|
112
112
|
--icon-size-override: 20px;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
&.o-iconBtn--small {
|
|
116
116
|
--btn-dimension: 40px;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
|
|
119
|
+
&.o-iconBtn--medium {
|
|
120
120
|
/* Same as default styles */
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
|
|
123
|
+
&.o-iconBtn--large {
|
|
124
124
|
--btn-dimension: 56px;
|
|
125
125
|
--icon-size-override: 28px;
|
|
126
126
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LitElement, html, unsafeCSS,
|
|
3
3
|
} from 'lit';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
5
|
import { property } from 'lit/decorators.js';
|
|
5
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
7
|
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
@@ -60,15 +61,19 @@ export class PieIconButton extends LitElement implements IconButtonProps {
|
|
|
60
61
|
disabled, size, variant, isLoading, aria,
|
|
61
62
|
} = this;
|
|
62
63
|
|
|
64
|
+
const classes = {
|
|
65
|
+
'o-iconBtn': true,
|
|
66
|
+
[`o-iconBtn--${size}`]: true,
|
|
67
|
+
[`o-iconBtn--${variant}`]: true,
|
|
68
|
+
'is-loading': isLoading,
|
|
69
|
+
};
|
|
70
|
+
|
|
63
71
|
// The inline SVG is temporary until we have a proper icon integration
|
|
64
72
|
return html`
|
|
65
73
|
<button
|
|
66
|
-
class="
|
|
74
|
+
class="${classMap(classes)}"
|
|
67
75
|
data-test-id="pie-icon-button"
|
|
68
|
-
size="${size || 'medium'}"
|
|
69
|
-
variant="${variant || 'primary'}"
|
|
70
76
|
?disabled="${disabled}"
|
|
71
|
-
?isLoading="${isLoading}"
|
|
72
77
|
aria-label="${ifDefined(aria?.label)}"
|
|
73
78
|
aria-labelledby="${ifDefined(aria?.labelledby)}"
|
|
74
79
|
aria-describedby="${ifDefined(aria?.describedby)}"
|