@justeattakeaway/pie-icon-button 0.29.1 → 1.0.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 +2 -14
- package/dist/index.d.ts +7 -7
- package/dist/index.js +6 -6
- package/dist/react.d.ts +7 -7
- package/package.json +3 -3
- package/src/defs.ts +2 -2
- package/src/index.ts +7 -7
package/custom-elements.json
CHANGED
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"kind": "field",
|
|
78
78
|
"name": "aria",
|
|
79
79
|
"type": {
|
|
80
|
-
"text": "IconButtonProps['aria']
|
|
80
|
+
"text": "IconButtonProps['aria']"
|
|
81
81
|
},
|
|
82
82
|
"privacy": "public",
|
|
83
83
|
"attribute": "aria"
|
|
@@ -85,18 +85,12 @@
|
|
|
85
85
|
{
|
|
86
86
|
"kind": "field",
|
|
87
87
|
"name": "size",
|
|
88
|
-
"type": {
|
|
89
|
-
"text": "IconButtonProps['size'] | undefined"
|
|
90
|
-
},
|
|
91
88
|
"privacy": "public",
|
|
92
89
|
"attribute": "size"
|
|
93
90
|
},
|
|
94
91
|
{
|
|
95
92
|
"kind": "field",
|
|
96
93
|
"name": "variant",
|
|
97
|
-
"type": {
|
|
98
|
-
"text": "IconButtonProps['variant'] | undefined"
|
|
99
|
-
},
|
|
100
94
|
"privacy": "public",
|
|
101
95
|
"attribute": "variant"
|
|
102
96
|
},
|
|
@@ -123,22 +117,16 @@
|
|
|
123
117
|
{
|
|
124
118
|
"name": "aria",
|
|
125
119
|
"type": {
|
|
126
|
-
"text": "IconButtonProps['aria']
|
|
120
|
+
"text": "IconButtonProps['aria']"
|
|
127
121
|
},
|
|
128
122
|
"fieldName": "aria"
|
|
129
123
|
},
|
|
130
124
|
{
|
|
131
125
|
"name": "size",
|
|
132
|
-
"type": {
|
|
133
|
-
"text": "IconButtonProps['size'] | undefined"
|
|
134
|
-
},
|
|
135
126
|
"fieldName": "size"
|
|
136
127
|
},
|
|
137
128
|
{
|
|
138
129
|
"name": "variant",
|
|
139
|
-
"type": {
|
|
140
|
-
"text": "IconButtonProps['variant'] | undefined"
|
|
141
|
-
},
|
|
142
130
|
"fieldName": "variant"
|
|
143
131
|
},
|
|
144
132
|
{
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { CSSResult } from 'lit';
|
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
4
|
import type { TemplateResult } from 'lit-html';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
declare type AriaProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
labelledby?: string;
|
|
9
9
|
describedby?: string;
|
|
@@ -11,7 +11,7 @@ export declare type AriaProps = {
|
|
|
11
11
|
controls?: string;
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps
|
|
14
|
+
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps, keyof Omit<IconButtonProps, 'aria'>>;
|
|
15
15
|
|
|
16
16
|
export declare const defaultProps: DefaultProps;
|
|
17
17
|
|
|
@@ -46,11 +46,11 @@ export declare interface IconButtonProps {
|
|
|
46
46
|
* @tagname pie-icon-button
|
|
47
47
|
*/
|
|
48
48
|
export declare class PieIconButton extends LitElement implements IconButtonProps {
|
|
49
|
-
aria
|
|
50
|
-
size
|
|
51
|
-
variant
|
|
52
|
-
disabled
|
|
53
|
-
isLoading
|
|
49
|
+
aria: IconButtonProps['aria'];
|
|
50
|
+
size: "xsmall" | "small" | "medium" | "large";
|
|
51
|
+
variant: "secondary" | "inverse" | "primary" | "outline" | "ghost" | "ghost-secondary" | "ghost-inverse";
|
|
52
|
+
disabled: boolean;
|
|
53
|
+
isLoading: boolean;
|
|
54
54
|
/**
|
|
55
55
|
* Template for the loading state
|
|
56
56
|
*
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { LitElement as g, html as v, unsafeCSS as p } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as n } from "lit/directives/if-defined.js";
|
|
4
|
-
import { validPropertyValues as f, defineCustomElement as
|
|
4
|
+
import { validPropertyValues as f, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
|
|
5
5
|
import "@justeattakeaway/pie-spinner";
|
|
6
|
-
const
|
|
6
|
+
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}", B = ["xsmall", "small", "medium", "large"], k = [
|
|
7
7
|
"primary",
|
|
8
8
|
"secondary",
|
|
9
9
|
"outline",
|
|
@@ -65,17 +65,17 @@ const s = "pie-icon-button", b = class b extends g {
|
|
|
65
65
|
</button>`;
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
-
b.styles = p(
|
|
68
|
+
b.styles = p(u);
|
|
69
69
|
let t = b;
|
|
70
70
|
l([
|
|
71
71
|
c({ type: Object })
|
|
72
72
|
], t.prototype, "aria");
|
|
73
73
|
l([
|
|
74
|
-
c(),
|
|
74
|
+
c({ type: String }),
|
|
75
75
|
f(s, B, a.size)
|
|
76
76
|
], t.prototype, "size");
|
|
77
77
|
l([
|
|
78
|
-
c(),
|
|
78
|
+
c({ type: String }),
|
|
79
79
|
f(s, k, a.variant)
|
|
80
80
|
], t.prototype, "variant");
|
|
81
81
|
l([
|
|
@@ -84,7 +84,7 @@ l([
|
|
|
84
84
|
l([
|
|
85
85
|
c({ type: Boolean })
|
|
86
86
|
], t.prototype, "isLoading");
|
|
87
|
-
|
|
87
|
+
y(s, t);
|
|
88
88
|
export {
|
|
89
89
|
t as PieIconButton,
|
|
90
90
|
a as defaultProps,
|
package/dist/react.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import type { LitElement } from 'lit';
|
|
|
4
4
|
import * as React_2 from 'react';
|
|
5
5
|
import type { TemplateResult } from 'lit-html';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
declare type AriaProps = {
|
|
8
8
|
label?: string;
|
|
9
9
|
labelledby?: string;
|
|
10
10
|
describedby?: string;
|
|
@@ -12,7 +12,7 @@ export declare type AriaProps = {
|
|
|
12
12
|
controls?: string;
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps
|
|
15
|
+
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps, keyof Omit<IconButtonProps, 'aria'>>;
|
|
16
16
|
|
|
17
17
|
export declare const defaultProps: DefaultProps;
|
|
18
18
|
|
|
@@ -49,11 +49,11 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<IconButton
|
|
|
49
49
|
* @tagname pie-icon-button
|
|
50
50
|
*/
|
|
51
51
|
declare class PieIconButton_2 extends LitElement implements IconButtonProps {
|
|
52
|
-
aria
|
|
53
|
-
size
|
|
54
|
-
variant
|
|
55
|
-
disabled
|
|
56
|
-
isLoading
|
|
52
|
+
aria: IconButtonProps['aria'];
|
|
53
|
+
size: "xsmall" | "small" | "medium" | "large";
|
|
54
|
+
variant: "secondary" | "inverse" | "primary" | "outline" | "ghost" | "ghost-secondary" | "ghost-inverse";
|
|
55
|
+
disabled: boolean;
|
|
56
|
+
isLoading: boolean;
|
|
57
57
|
/**
|
|
58
58
|
* Template for the loading state
|
|
59
59
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"**/*.d.ts"
|
|
14
14
|
],
|
|
15
15
|
"pieMetadata": {
|
|
16
|
-
"componentStatus": "
|
|
16
|
+
"componentStatus": "stable"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "run -T vite build",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@justeattakeaway/pie-icons-webc": "1.1.0",
|
|
45
|
-
"@justeattakeaway/pie-spinner": "0.
|
|
45
|
+
"@justeattakeaway/pie-spinner": "1.0.0",
|
|
46
46
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
47
47
|
},
|
|
48
48
|
"volta": {
|
package/src/defs.ts
CHANGED
|
@@ -4,7 +4,7 @@ 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
|
-
|
|
7
|
+
type AriaProps = {
|
|
8
8
|
label?: string;
|
|
9
9
|
labelledby?: string;
|
|
10
10
|
describedby?: string;
|
|
@@ -40,7 +40,7 @@ export interface IconButtonProps {
|
|
|
40
40
|
isLoading?: boolean;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
export type DefaultProps = ComponentDefaultProps<IconButtonProps
|
|
43
|
+
export type DefaultProps = ComponentDefaultProps<IconButtonProps, keyof Omit<IconButtonProps, 'aria'>>;
|
|
44
44
|
|
|
45
45
|
export const defaultProps: DefaultProps = {
|
|
46
46
|
size: 'medium',
|
package/src/index.ts
CHANGED
|
@@ -20,21 +20,21 @@ const componentSelector = 'pie-icon-button';
|
|
|
20
20
|
*/
|
|
21
21
|
export class PieIconButton extends LitElement implements IconButtonProps {
|
|
22
22
|
@property({ type: Object })
|
|
23
|
-
public aria
|
|
23
|
+
public aria: IconButtonProps['aria'];
|
|
24
24
|
|
|
25
|
-
@property()
|
|
25
|
+
@property({ type: String })
|
|
26
26
|
@validPropertyValues(componentSelector, sizes, defaultProps.size)
|
|
27
|
-
public size
|
|
27
|
+
public size = defaultProps.size;
|
|
28
28
|
|
|
29
|
-
@property()
|
|
29
|
+
@property({ type: String })
|
|
30
30
|
@validPropertyValues(componentSelector, variants, defaultProps.variant)
|
|
31
|
-
public variant
|
|
31
|
+
public variant = defaultProps.variant;
|
|
32
32
|
|
|
33
33
|
@property({ type: Boolean })
|
|
34
|
-
public disabled
|
|
34
|
+
public disabled = defaultProps.disabled;
|
|
35
35
|
|
|
36
36
|
@property({ type: Boolean })
|
|
37
|
-
public isLoading
|
|
37
|
+
public isLoading = defaultProps.isLoading;
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
40
|
* Template for the loading state
|