@justeattakeaway/pie-button 0.15.0 → 0.16.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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +6 -0
- package/README.md +7 -13
- package/dist/index.js +68 -52
- package/dist/types/packages/components/pie-button/src/defs.d.ts +9 -20
- package/dist/types/packages/components/pie-button/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-button/src/index.d.ts +5 -5
- package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/defs.ts +26 -20
- package/src/index.ts +15 -8
- package/test/accessibility/pie-button.spec.ts +5 -5
- package/test/component/pie-button.spec.ts +2 -3
- package/test/visual/pie-button.spec.ts +6 -5
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[3:48:31 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
|
-
|
|
3
|
+
[36mvite v4.2.3 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
|
-
|
|
5
|
+
[32m✓[39m 28 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[vite:dts] Start generate declaration files
|
|
12
|
-
|
|
13
|
-
[vite:dts] Declaration files built in
|
|
14
|
-
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 7.96 kB[22m[1m[22m[2m │ gzip: 2.10 kB[22m
|
|
9
|
+
[2mdist/[22m[36mreact.js [39m[1m[2m59.13 kB[22m[1m[22m[2m │ gzip: 15.94 kB[22m
|
|
10
|
+
[32m
|
|
11
|
+
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
+
[32m✓[39m built in 30.67s
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 28365ms.
|
|
14
|
+
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.16.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
|
|
8
|
+
|
|
3
9
|
## 0.15.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -59,9 +59,9 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
|
59
59
|
|
|
60
60
|
| Property | Type | Default | Description |
|
|
61
61
|
|-------------|-----------|-----------------|----------------------------------------------------------------------|
|
|
62
|
-
| size | `String` | `
|
|
63
|
-
| type | `String` | `
|
|
64
|
-
| variant | `String` | `
|
|
62
|
+
| size | `String` | `medium` | Size of the button, one of `buttonSizes` |
|
|
63
|
+
| type | `String` | `submit` | Type of the button, one of `buttonTypes` |
|
|
64
|
+
| variant | `String` | `primary` | Variant of the button, one of `buttonVariants` |
|
|
65
65
|
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
66
66
|
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container. |
|
|
67
67
|
|
|
@@ -91,28 +91,22 @@ For example, to add a click handler in various templates:
|
|
|
91
91
|
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
-
## TypeScript
|
|
94
|
+
## TypeScript Type Exports
|
|
95
95
|
|
|
96
|
-
For TypeScript projects, we export
|
|
96
|
+
For TypeScript projects, we export one interface for the button properties: `ButtonProps`. This contains three props `buttonSizes`, `buttonTypes`, and `buttonVariants`. You can import and use these types to set the corresponding property values for the `pie-button` component. This ensures better type safety and autocompletion in your project.
|
|
97
97
|
|
|
98
98
|
Here's an example of how to import and use the enums in a TypeScript project:
|
|
99
99
|
|
|
100
100
|
```typescript
|
|
101
|
-
import {
|
|
102
|
-
|
|
103
|
-
// Using the enums to set property values
|
|
104
|
-
const myButtonSize = BUTTON_SIZE.LARGE;
|
|
105
|
-
const myButtonType = BUTTON_TYPE.RESET;
|
|
106
|
-
const myButtonVariant = BUTTON_VARIANT.SECONDARY;
|
|
101
|
+
import { ButtonProps } from '@justeattakeaway/pie-button';
|
|
107
102
|
```
|
|
108
103
|
|
|
109
104
|
In your markup or JSX, you can then use these variables to set the properties for the pie-button component:
|
|
110
105
|
|
|
111
106
|
```html
|
|
112
|
-
<PieButton size=
|
|
107
|
+
<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
|
|
113
108
|
```
|
|
114
109
|
|
|
115
|
-
|
|
116
110
|
## Testing
|
|
117
111
|
|
|
118
112
|
### Browser tests
|
package/dist/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as h, LitElement as f, html as v } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(
|
|
4
|
+
const b = (i, o, e) => function(r, t) {
|
|
5
|
+
const n = `#${t}`;
|
|
6
|
+
Object.defineProperty(r, t, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[n];
|
|
9
9
|
},
|
|
10
|
-
set(
|
|
11
|
-
const
|
|
12
|
-
o.includes(
|
|
13
|
-
`<${
|
|
10
|
+
set(a) {
|
|
11
|
+
const g = this[n];
|
|
12
|
+
o.includes(a) ? this[n] = a : (console.error(
|
|
13
|
+
`<${i}> Invalid value "${a}" provided for property "${t}".`,
|
|
14
14
|
`Must be one of: ${o.join(" | ")}.`,
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
15
|
+
`Falling back to default value: "${e}"`
|
|
16
|
+
), this[n] = e), this.requestUpdate(t, g);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
19
|
+
}, m = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
|
|
20
20
|
`;
|
|
21
|
-
var
|
|
22
|
-
for (var
|
|
23
|
-
(
|
|
24
|
-
return
|
|
21
|
+
var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, z = (i, o, e, r) => {
|
|
22
|
+
for (var t = r > 1 ? void 0 : r ? x(o, e) : o, n = i.length - 1, a; n >= 0; n--)
|
|
23
|
+
(a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
|
|
24
|
+
return r && t && y(o, e, t), t;
|
|
25
25
|
};
|
|
26
|
-
class
|
|
26
|
+
class p extends f {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments), this.propKeyValues = "";
|
|
29
29
|
}
|
|
@@ -33,13 +33,13 @@ class f extends y {
|
|
|
33
33
|
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
34
|
_renderPropKeyValues() {
|
|
35
35
|
return this.propKeyValues.split(",").map((o) => {
|
|
36
|
-
const [
|
|
37
|
-
return
|
|
36
|
+
const [e, r] = o.split(":");
|
|
37
|
+
return v`<p class="c-webComponentTestWrapper-label"><b>${e}</b>: <code>${r}</code></p>`;
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
40
|
// eslint-disable-next-line class-methods-use-this
|
|
41
41
|
render() {
|
|
42
|
-
return
|
|
42
|
+
return v`
|
|
43
43
|
<div class="c-webComponentTestWrapper">
|
|
44
44
|
${this._renderPropKeyValues()}
|
|
45
45
|
<div class="c-webComponentTestWrapper-slot">
|
|
@@ -48,56 +48,72 @@ class f extends y {
|
|
|
48
48
|
</div>`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
p.styles = h(m);
|
|
52
|
+
z([
|
|
53
53
|
c({ type: String })
|
|
54
|
-
],
|
|
55
|
-
const
|
|
56
|
-
customElements.get(
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
], p.prototype, "propKeyValues", 2);
|
|
55
|
+
const u = "web-component-test-wrapper";
|
|
56
|
+
customElements.get(u) || customElements.define(u, p);
|
|
57
|
+
const $ = `.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}.o-btn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-btn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled);border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-btn[disabled][variant=ghost]{--btn-bg-color: var(--dt-color-container-default);outline:none}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small]{--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
|
|
58
|
+
`, w = [
|
|
59
|
+
"xsmall",
|
|
60
|
+
"small-expressive",
|
|
61
|
+
"small-productive",
|
|
62
|
+
"medium",
|
|
63
|
+
"large"
|
|
64
|
+
], k = [
|
|
65
|
+
"primary",
|
|
66
|
+
"secondary",
|
|
67
|
+
"outline",
|
|
68
|
+
"ghost"
|
|
69
|
+
], P = [
|
|
70
|
+
"submit",
|
|
71
|
+
"button",
|
|
72
|
+
"reset",
|
|
73
|
+
"menu"
|
|
74
|
+
];
|
|
75
|
+
var _ = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (i, o, e, r) => {
|
|
76
|
+
for (var t = r > 1 ? void 0 : r ? W(o, e) : o, n = i.length - 1, a; n >= 0; n--)
|
|
77
|
+
(a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
|
|
78
|
+
return r && t && _(o, e, t), t;
|
|
63
79
|
};
|
|
64
|
-
const
|
|
65
|
-
class l extends
|
|
80
|
+
const d = "pie-button";
|
|
81
|
+
class l extends f {
|
|
66
82
|
constructor() {
|
|
67
|
-
super(...arguments), this.size =
|
|
83
|
+
super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isFullWidth = !1;
|
|
68
84
|
}
|
|
69
85
|
render() {
|
|
70
86
|
const {
|
|
71
87
|
type: o,
|
|
72
|
-
disabled:
|
|
73
|
-
isFullWidth:
|
|
74
|
-
variant:
|
|
75
|
-
size:
|
|
88
|
+
disabled: e,
|
|
89
|
+
isFullWidth: r,
|
|
90
|
+
variant: t,
|
|
91
|
+
size: n
|
|
76
92
|
} = this;
|
|
77
|
-
return
|
|
93
|
+
return v`
|
|
78
94
|
<button
|
|
79
95
|
class="o-btn"
|
|
80
96
|
type=${o}
|
|
81
|
-
variant=${
|
|
82
|
-
size=${
|
|
83
|
-
?disabled=${
|
|
84
|
-
?isFullWidth=${
|
|
97
|
+
variant=${t}
|
|
98
|
+
size=${n}
|
|
99
|
+
?disabled=${e}
|
|
100
|
+
?isFullWidth=${r}>
|
|
85
101
|
<slot></slot>
|
|
86
102
|
</button>`;
|
|
87
103
|
}
|
|
88
104
|
}
|
|
89
|
-
l.styles =
|
|
105
|
+
l.styles = h($);
|
|
90
106
|
s([
|
|
91
107
|
c(),
|
|
92
|
-
|
|
108
|
+
b(d, w, "medium")
|
|
93
109
|
], l.prototype, "size", 2);
|
|
94
110
|
s([
|
|
95
111
|
c(),
|
|
96
|
-
|
|
112
|
+
b(d, P, "submit")
|
|
97
113
|
], l.prototype, "type", 2);
|
|
98
114
|
s([
|
|
99
115
|
c(),
|
|
100
|
-
|
|
116
|
+
b(d, k, "primary")
|
|
101
117
|
], l.prototype, "variant", 2);
|
|
102
118
|
s([
|
|
103
119
|
c({ type: Boolean })
|
|
@@ -105,10 +121,10 @@ s([
|
|
|
105
121
|
s([
|
|
106
122
|
c({ type: Boolean })
|
|
107
123
|
], l.prototype, "isFullWidth", 2);
|
|
108
|
-
customElements.define(
|
|
124
|
+
customElements.define(d, l);
|
|
109
125
|
export {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
126
|
+
l as PieButton,
|
|
127
|
+
w as buttonSizes,
|
|
128
|
+
P as buttonTypes,
|
|
129
|
+
k as buttonVariants
|
|
114
130
|
};
|
|
@@ -1,29 +1,18 @@
|
|
|
1
|
+
export interface ButtonProps {
|
|
2
|
+
size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
|
|
3
|
+
type: 'submit' | 'button' | 'reset' | 'menu';
|
|
4
|
+
variant: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
5
|
+
}
|
|
1
6
|
/**
|
|
2
7
|
* Button size variants
|
|
3
8
|
*/
|
|
4
|
-
export declare
|
|
5
|
-
XSMALL = "xsmall",
|
|
6
|
-
SMALL_EXPRESSIVE = "small-expressive",
|
|
7
|
-
SMALL_PRODUCTIVE = "small-productive",
|
|
8
|
-
MEDIUM = "medium",
|
|
9
|
-
LARGE = "large"
|
|
10
|
-
}
|
|
9
|
+
export declare const buttonSizes: ButtonProps['size'][];
|
|
11
10
|
/**
|
|
12
11
|
* Button style variants
|
|
13
12
|
*/
|
|
14
|
-
export declare
|
|
15
|
-
SUBMIT = "submit",
|
|
16
|
-
BUTTON = "button",
|
|
17
|
-
RESET = "reset",
|
|
18
|
-
MENU = "menu"
|
|
19
|
-
}
|
|
13
|
+
export declare const buttonVariants: ButtonProps['variant'][];
|
|
20
14
|
/**
|
|
21
|
-
* Button
|
|
15
|
+
* Button type variants
|
|
22
16
|
*/
|
|
23
|
-
export declare
|
|
24
|
-
PRIMARY = "primary",
|
|
25
|
-
SECONDARY = "secondary",
|
|
26
|
-
OUTLINE = "outline",
|
|
27
|
-
GHOST = "ghost"
|
|
28
|
-
}
|
|
17
|
+
export declare const buttonTypes: ButtonProps['type'][];
|
|
29
18
|
//# sourceMappingURL=defs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9E,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAM5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,EAKlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAK5C,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import {
|
|
3
|
-
export {
|
|
2
|
+
import { ButtonProps, buttonSizes, buttonTypes, buttonVariants } from './defs';
|
|
3
|
+
export { type ButtonProps, buttonSizes, buttonTypes, buttonVariants, };
|
|
4
4
|
declare const componentSelector = "pie-button";
|
|
5
5
|
export declare class PieButton extends LitElement {
|
|
6
|
-
size:
|
|
7
|
-
type:
|
|
8
|
-
variant:
|
|
6
|
+
size: ButtonProps['size'];
|
|
7
|
+
type: ButtonProps['type'];
|
|
8
|
+
variant: ButtonProps['variant'];
|
|
9
9
|
disabled: boolean;
|
|
10
10
|
isFullWidth: boolean;
|
|
11
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,EACH,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EACxD,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,WAAW,EACX,WAAW,EACX,cAAc,GACjB,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
|
package/package.json
CHANGED
package/src/defs.ts
CHANGED
|
@@ -1,30 +1,36 @@
|
|
|
1
|
+
export interface ButtonProps {
|
|
2
|
+
size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
|
|
3
|
+
type: 'submit' | 'button' | 'reset' | 'menu';
|
|
4
|
+
variant: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
/**
|
|
2
8
|
* Button size variants
|
|
3
9
|
*/
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
export const buttonSizes: ButtonProps['size'][] = [
|
|
11
|
+
'xsmall',
|
|
12
|
+
'small-expressive',
|
|
13
|
+
'small-productive',
|
|
14
|
+
'medium',
|
|
15
|
+
'large'
|
|
16
|
+
];
|
|
11
17
|
|
|
12
18
|
/**
|
|
13
19
|
* Button style variants
|
|
14
20
|
*/
|
|
15
|
-
export
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
export const buttonVariants: ButtonProps['variant'][] = [
|
|
22
|
+
'primary',
|
|
23
|
+
'secondary',
|
|
24
|
+
'outline',
|
|
25
|
+
'ghost',
|
|
26
|
+
];
|
|
21
27
|
|
|
22
28
|
/**
|
|
23
|
-
* Button
|
|
29
|
+
* Button type variants
|
|
24
30
|
*/
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
export const buttonTypes: ButtonProps['type'][] = [
|
|
32
|
+
'submit',
|
|
33
|
+
'button',
|
|
34
|
+
'reset',
|
|
35
|
+
'menu',
|
|
36
|
+
];
|
package/src/index.ts
CHANGED
|
@@ -3,25 +3,32 @@ import { property } from 'lit/decorators.js';
|
|
|
3
3
|
import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
|
|
5
5
|
import styles from './button.scss?inline';
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
ButtonProps, buttonSizes, buttonTypes, buttonVariants,
|
|
8
|
+
} from './defs';
|
|
7
9
|
|
|
8
10
|
// Valid values available to consumers
|
|
9
|
-
export {
|
|
11
|
+
export {
|
|
12
|
+
type ButtonProps,
|
|
13
|
+
buttonSizes,
|
|
14
|
+
buttonTypes,
|
|
15
|
+
buttonVariants,
|
|
16
|
+
};
|
|
10
17
|
|
|
11
18
|
const componentSelector = 'pie-button';
|
|
12
19
|
|
|
13
20
|
export class PieButton extends LitElement {
|
|
14
21
|
@property()
|
|
15
|
-
@validPropertyValues(componentSelector,
|
|
16
|
-
size
|
|
22
|
+
@validPropertyValues(componentSelector, buttonSizes, 'medium')
|
|
23
|
+
size: ButtonProps['size'] = 'medium';
|
|
17
24
|
|
|
18
25
|
@property()
|
|
19
|
-
@validPropertyValues(componentSelector,
|
|
20
|
-
type
|
|
26
|
+
@validPropertyValues(componentSelector, buttonTypes, 'submit')
|
|
27
|
+
type: ButtonProps['type'] = 'submit';
|
|
21
28
|
|
|
22
29
|
@property()
|
|
23
|
-
@validPropertyValues(componentSelector,
|
|
24
|
-
variant
|
|
30
|
+
@validPropertyValues(componentSelector, buttonVariants, 'primary')
|
|
31
|
+
variant: ButtonProps['variant'] = 'primary';
|
|
25
32
|
|
|
26
33
|
@property({ type: Boolean })
|
|
27
34
|
disabled = false;
|
|
@@ -3,13 +3,13 @@ import AxeBuilder from '@axe-core/playwright';
|
|
|
3
3
|
import {
|
|
4
4
|
PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
5
5
|
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
6
|
-
import { PieButton } from '@/index';
|
|
7
|
-
import {
|
|
6
|
+
import { PieButton } from '@/index.ts';
|
|
7
|
+
import { buttonSizes, buttonVariants } from '@/defs';
|
|
8
8
|
|
|
9
9
|
const props: PropObject = {
|
|
10
|
-
variant:
|
|
11
|
-
size:
|
|
12
|
-
type:
|
|
10
|
+
variant: buttonVariants,
|
|
11
|
+
size: buttonSizes,
|
|
12
|
+
type: 'button', // Changing the type does not affect the appearance of the button
|
|
13
13
|
isFullWidth: [true, false],
|
|
14
14
|
disabled: [true, false],
|
|
15
15
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
2
|
import { PieButton } from '@/index';
|
|
3
|
-
import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
|
|
4
3
|
|
|
5
4
|
test('should correctly work with native click events', async ({ mount }) => {
|
|
6
5
|
const messages: string[] = [];
|
|
@@ -9,8 +8,8 @@ test('should correctly work with native click events', async ({ mount }) => {
|
|
|
9
8
|
PieButton,
|
|
10
9
|
{
|
|
11
10
|
props: {
|
|
12
|
-
size:
|
|
13
|
-
variant:
|
|
11
|
+
size: 'large',
|
|
12
|
+
variant: 'primary',
|
|
14
13
|
},
|
|
15
14
|
slots: {
|
|
16
15
|
default: 'Click me!',
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { test } from '@sand4rt/experimental-ct-web';
|
|
2
|
+
import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
|
|
2
3
|
import percySnapshot from '@percy/playwright';
|
|
3
4
|
import type {
|
|
4
5
|
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
@@ -13,12 +14,12 @@ import {
|
|
|
13
14
|
WebComponentTestWrapper,
|
|
14
15
|
} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
15
16
|
import { PieButton } from '@/index';
|
|
16
|
-
import {
|
|
17
|
+
import { buttonSizes, buttonVariants } from '@/defs';
|
|
17
18
|
|
|
18
19
|
const props: PropObject = {
|
|
19
|
-
variant:
|
|
20
|
-
size:
|
|
21
|
-
type:
|
|
20
|
+
variant: buttonVariants,
|
|
21
|
+
size: buttonSizes,
|
|
22
|
+
type: 'button', // Changing the type does not affect the appearance of the button
|
|
22
23
|
isFullWidth: [true, false],
|
|
23
24
|
disabled: [true, false],
|
|
24
25
|
};
|
|
@@ -58,5 +59,5 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
|
|
|
58
59
|
);
|
|
59
60
|
}));
|
|
60
61
|
|
|
61
|
-
await percySnapshot(page, `PIE Button - Variant: ${variant}
|
|
62
|
+
await percySnapshot(page, `PIE Button - Variant: ${variant}`, getLitPercyOptions());
|
|
62
63
|
}));
|