@justeattakeaway/pie-icon-button 0.28.14 → 0.29.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/custom-elements.json +16 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +39 -28
- package/dist/react.d.ts +13 -0
- package/package.json +3 -2
- package/src/defs.ts +13 -0
- package/src/index.ts +12 -2
package/custom-elements.json
CHANGED
|
@@ -73,6 +73,15 @@
|
|
|
73
73
|
"description": "",
|
|
74
74
|
"name": "PieIconButton",
|
|
75
75
|
"members": [
|
|
76
|
+
{
|
|
77
|
+
"kind": "field",
|
|
78
|
+
"name": "aria",
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "IconButtonProps['aria'] | undefined"
|
|
81
|
+
},
|
|
82
|
+
"privacy": "public",
|
|
83
|
+
"attribute": "aria"
|
|
84
|
+
},
|
|
76
85
|
{
|
|
77
86
|
"kind": "field",
|
|
78
87
|
"name": "size",
|
|
@@ -111,6 +120,13 @@
|
|
|
111
120
|
}
|
|
112
121
|
],
|
|
113
122
|
"attributes": [
|
|
123
|
+
{
|
|
124
|
+
"name": "aria",
|
|
125
|
+
"type": {
|
|
126
|
+
"text": "IconButtonProps['aria'] | undefined"
|
|
127
|
+
},
|
|
128
|
+
"fieldName": "aria"
|
|
129
|
+
},
|
|
114
130
|
{
|
|
115
131
|
"name": "size",
|
|
116
132
|
"type": {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,11 +3,23 @@ import type { CSSResult } from 'lit';
|
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
4
|
import type { TemplateResult } from 'lit-html';
|
|
5
5
|
|
|
6
|
+
export declare type AriaProps = {
|
|
7
|
+
label?: string;
|
|
8
|
+
labelledby?: string;
|
|
9
|
+
describedby?: string;
|
|
10
|
+
expanded?: boolean;
|
|
11
|
+
controls?: string;
|
|
12
|
+
};
|
|
13
|
+
|
|
6
14
|
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps>;
|
|
7
15
|
|
|
8
16
|
export declare const defaultProps: DefaultProps;
|
|
9
17
|
|
|
10
18
|
export declare interface IconButtonProps {
|
|
19
|
+
/**
|
|
20
|
+
* The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
|
|
21
|
+
*/
|
|
22
|
+
aria?: AriaProps;
|
|
11
23
|
/**
|
|
12
24
|
* (Optional) What size the button should be.
|
|
13
25
|
* @default "medium"
|
|
@@ -34,6 +46,7 @@ export declare interface IconButtonProps {
|
|
|
34
46
|
* @tagname pie-icon-button
|
|
35
47
|
*/
|
|
36
48
|
export declare class PieIconButton extends LitElement implements IconButtonProps {
|
|
49
|
+
aria?: IconButtonProps['aria'];
|
|
37
50
|
size?: IconButtonProps['size'];
|
|
38
51
|
variant?: IconButtonProps['variant'];
|
|
39
52
|
disabled?: boolean | undefined;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as g, html as v, unsafeCSS as p } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
|
-
import {
|
|
3
|
+
import { ifDefined as n } from "lit/directives/if-defined.js";
|
|
4
|
+
import { validPropertyValues as f, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
|
|
4
5
|
import "@justeattakeaway/pie-spinner";
|
|
5
|
-
const
|
|
6
|
+
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[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}", B = ["xsmall", "small", "medium", "large"], k = [
|
|
6
7
|
"primary",
|
|
7
8
|
"secondary",
|
|
8
9
|
"outline",
|
|
@@ -16,12 +17,12 @@ const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
|
|
|
16
17
|
disabled: !1,
|
|
17
18
|
isLoading: !1
|
|
18
19
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var
|
|
21
|
-
(
|
|
22
|
-
return
|
|
20
|
+
var z = Object.defineProperty, l = (h, i, e, d) => {
|
|
21
|
+
for (var r = void 0, o = h.length - 1, m; o >= 0; o--)
|
|
22
|
+
(m = h[o]) && (r = m(i, e, r) || r);
|
|
23
|
+
return r && z(i, e, r), r;
|
|
23
24
|
};
|
|
24
|
-
const
|
|
25
|
+
const s = "pie-icon-button", b = class b extends g {
|
|
25
26
|
constructor() {
|
|
26
27
|
super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
|
|
27
28
|
}
|
|
@@ -31,41 +32,51 @@ const v = "pie-icon-button", s = class s extends f {
|
|
|
31
32
|
* @private
|
|
32
33
|
*/
|
|
33
34
|
renderSpinner() {
|
|
34
|
-
const { variant:
|
|
35
|
-
let
|
|
36
|
-
return
|
|
35
|
+
const { variant: i, size: e, disabled: d } = this, r = e === "xsmall" ? "small" : "medium";
|
|
36
|
+
let o = "brand";
|
|
37
|
+
return i != null && i.includes("secondary") && (o = "secondary"), (i === "primary" && !d || i === "ghost-inverse") && (o = "inverse"), v`
|
|
37
38
|
<pie-spinner
|
|
38
|
-
size="${
|
|
39
|
-
variant="${
|
|
39
|
+
size="${r}"
|
|
40
|
+
variant="${o}">
|
|
40
41
|
</pie-spinner>`;
|
|
41
42
|
}
|
|
42
43
|
render() {
|
|
43
44
|
const {
|
|
44
|
-
disabled:
|
|
45
|
+
disabled: i,
|
|
45
46
|
size: e,
|
|
46
|
-
variant:
|
|
47
|
-
isLoading:
|
|
47
|
+
variant: d,
|
|
48
|
+
isLoading: r,
|
|
49
|
+
aria: o
|
|
48
50
|
} = this;
|
|
49
|
-
return
|
|
51
|
+
return v`
|
|
50
52
|
<button
|
|
51
53
|
class="o-iconBtn"
|
|
54
|
+
data-test-id="pie-icon-button"
|
|
52
55
|
size="${e || "medium"}"
|
|
53
|
-
variant="${
|
|
54
|
-
?disabled="${
|
|
55
|
-
?isLoading="${
|
|
56
|
-
${o ?
|
|
56
|
+
variant="${d || "primary"}"
|
|
57
|
+
?disabled="${i}"
|
|
58
|
+
?isLoading="${r}"
|
|
59
|
+
aria-label="${n(o == null ? void 0 : o.label)}"
|
|
60
|
+
aria-labelledby="${n(o == null ? void 0 : o.labelledby)}"
|
|
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)}">
|
|
64
|
+
${r ? this.renderSpinner() : v`<slot></slot>`}
|
|
57
65
|
</button>`;
|
|
58
66
|
}
|
|
59
67
|
};
|
|
60
|
-
|
|
61
|
-
let t =
|
|
68
|
+
b.styles = p(y);
|
|
69
|
+
let t = b;
|
|
70
|
+
l([
|
|
71
|
+
c({ type: Object })
|
|
72
|
+
], t.prototype, "aria");
|
|
62
73
|
l([
|
|
63
74
|
c(),
|
|
64
|
-
|
|
75
|
+
f(s, B, a.size)
|
|
65
76
|
], t.prototype, "size");
|
|
66
77
|
l([
|
|
67
78
|
c(),
|
|
68
|
-
|
|
79
|
+
f(s, k, a.variant)
|
|
69
80
|
], t.prototype, "variant");
|
|
70
81
|
l([
|
|
71
82
|
c({ type: Boolean })
|
|
@@ -73,10 +84,10 @@ l([
|
|
|
73
84
|
l([
|
|
74
85
|
c({ type: Boolean })
|
|
75
86
|
], t.prototype, "isLoading");
|
|
76
|
-
|
|
87
|
+
u(s, t);
|
|
77
88
|
export {
|
|
78
89
|
t as PieIconButton,
|
|
79
90
|
a as defaultProps,
|
|
80
|
-
|
|
81
|
-
|
|
91
|
+
B as sizes,
|
|
92
|
+
k as variants
|
|
82
93
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -4,11 +4,23 @@ import type { LitElement } from 'lit';
|
|
|
4
4
|
import * as React_2 from 'react';
|
|
5
5
|
import type { TemplateResult } from 'lit-html';
|
|
6
6
|
|
|
7
|
+
export declare type AriaProps = {
|
|
8
|
+
label?: string;
|
|
9
|
+
labelledby?: string;
|
|
10
|
+
describedby?: string;
|
|
11
|
+
expanded?: boolean;
|
|
12
|
+
controls?: string;
|
|
13
|
+
};
|
|
14
|
+
|
|
7
15
|
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps>;
|
|
8
16
|
|
|
9
17
|
export declare const defaultProps: DefaultProps;
|
|
10
18
|
|
|
11
19
|
export declare interface IconButtonProps {
|
|
20
|
+
/**
|
|
21
|
+
* The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
|
|
22
|
+
*/
|
|
23
|
+
aria?: AriaProps;
|
|
12
24
|
/**
|
|
13
25
|
* (Optional) What size the button should be.
|
|
14
26
|
* @default "medium"
|
|
@@ -37,6 +49,7 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<IconButton
|
|
|
37
49
|
* @tagname pie-icon-button
|
|
38
50
|
*/
|
|
39
51
|
declare class PieIconButton_2 extends LitElement implements IconButtonProps {
|
|
52
|
+
aria?: IconButtonProps['aria'];
|
|
40
53
|
size?: IconButtonProps['size'];
|
|
41
54
|
variant?: IconButtonProps['variant'];
|
|
42
55
|
disabled?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.29.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
28
28
|
"test:ci": "yarn test",
|
|
29
29
|
"test:browsers-setup": "npx playwright-lit-setup",
|
|
30
|
+
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
30
31
|
"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",
|
|
31
32
|
"test:visual:ci": "yarn test:visual"
|
|
32
33
|
},
|
|
@@ -40,7 +41,7 @@
|
|
|
40
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "1.0.0",
|
|
44
45
|
"@justeattakeaway/pie-spinner": "0.7.2",
|
|
45
46
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
46
47
|
},
|
package/src/defs.ts
CHANGED
|
@@ -4,7 +4,20 @@ export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
|
|
|
4
4
|
export const variants = ['primary', 'secondary', 'outline', 'ghost',
|
|
5
5
|
'ghost-secondary', 'inverse', 'ghost-inverse'] as const;
|
|
6
6
|
|
|
7
|
+
export type AriaProps = {
|
|
8
|
+
label?: string;
|
|
9
|
+
labelledby?: string;
|
|
10
|
+
describedby?: string;
|
|
11
|
+
expanded?: boolean;
|
|
12
|
+
controls?: string;
|
|
13
|
+
};
|
|
14
|
+
|
|
7
15
|
export interface IconButtonProps {
|
|
16
|
+
/**
|
|
17
|
+
* The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
|
|
18
|
+
*/
|
|
19
|
+
aria?: AriaProps;
|
|
20
|
+
|
|
8
21
|
/**
|
|
9
22
|
* (Optional) What size the button should be.
|
|
10
23
|
* @default "medium"
|
package/src/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
LitElement, html, unsafeCSS,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
6
|
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
6
7
|
import styles from './iconButton.scss?inline';
|
|
7
8
|
import {
|
|
@@ -18,6 +19,9 @@ const componentSelector = 'pie-icon-button';
|
|
|
18
19
|
* @tagname pie-icon-button
|
|
19
20
|
*/
|
|
20
21
|
export class PieIconButton extends LitElement implements IconButtonProps {
|
|
22
|
+
@property({ type: Object })
|
|
23
|
+
public aria?: IconButtonProps['aria'];
|
|
24
|
+
|
|
21
25
|
@property()
|
|
22
26
|
@validPropertyValues(componentSelector, sizes, defaultProps.size)
|
|
23
27
|
public size?: IconButtonProps['size'] = defaultProps.size;
|
|
@@ -53,17 +57,23 @@ export class PieIconButton extends LitElement implements IconButtonProps {
|
|
|
53
57
|
|
|
54
58
|
render () {
|
|
55
59
|
const {
|
|
56
|
-
disabled, size, variant, isLoading,
|
|
60
|
+
disabled, size, variant, isLoading, aria,
|
|
57
61
|
} = this;
|
|
58
62
|
|
|
59
63
|
// The inline SVG is temporary until we have a proper icon integration
|
|
60
64
|
return html`
|
|
61
65
|
<button
|
|
62
66
|
class="o-iconBtn"
|
|
67
|
+
data-test-id="pie-icon-button"
|
|
63
68
|
size="${size || 'medium'}"
|
|
64
69
|
variant="${variant || 'primary'}"
|
|
65
70
|
?disabled="${disabled}"
|
|
66
|
-
?isLoading="${isLoading}"
|
|
71
|
+
?isLoading="${isLoading}"
|
|
72
|
+
aria-label="${ifDefined(aria?.label)}"
|
|
73
|
+
aria-labelledby="${ifDefined(aria?.labelledby)}"
|
|
74
|
+
aria-describedby="${ifDefined(aria?.describedby)}"
|
|
75
|
+
aria-expanded="${ifDefined(aria?.expanded)}"
|
|
76
|
+
aria-controls="${ifDefined(aria?.controls)}">
|
|
67
77
|
${isLoading ? this.renderSpinner() : html`<slot></slot>`}
|
|
68
78
|
</button>`;
|
|
69
79
|
}
|