@justeattakeaway/pie-button 0.14.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 +6 -6
- package/CHANGELOG.md +24 -0
- package/README.md +22 -13
- package/dist/index.js +99 -45
- 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 +5 -7
- package/src/defs.ts +26 -20
- package/src/index.ts +16 -9
- package/test/accessibility/pie-button.spec.ts +30 -26
- package/test/component/pie-button.spec.ts +2 -31
- package/test/visual/pie-button.spec.ts +55 -44
- package/vite.config.js +3 -0
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
|
-
[36mvite v4.2.
|
|
3
|
+
[36mvite v4.2.3 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
|
-
[32m✓[39m
|
|
5
|
+
[32m✓[39m 28 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 7.96 kB[22m[1m[22m[2m │ gzip: 2.10 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.13 kB[22m[1m[22m[2m │ gzip: 15.94 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓[39m built in
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓[39m built in 30.67s
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 28365ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
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
|
+
|
|
9
|
+
## 0.15.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [Changed] - Refactor visual tests to have labels showing props ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
14
|
+
|
|
15
|
+
- [Changed] - use prop variant helper for simpler and more extensive visual tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
16
|
+
|
|
17
|
+
- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
18
|
+
|
|
19
|
+
- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
20
|
+
|
|
21
|
+
- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- [Changed] - Use `componentSelector` to define the custom element ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
|
|
26
|
+
|
|
3
27
|
## 0.14.0
|
|
4
28
|
|
|
5
29
|
### 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
|
|
@@ -128,3 +122,18 @@ Run at the root of the monorepo:
|
|
|
128
122
|
```
|
|
129
123
|
yarn test:visual --filter=pie-button
|
|
130
124
|
```
|
|
125
|
+
|
|
126
|
+
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
127
|
+
|
|
128
|
+
Setup via bash:
|
|
129
|
+
|
|
130
|
+
```
|
|
131
|
+
export PERCY_TOKEN_PIE_BUTTON=abcde
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Setup via package.json:
|
|
135
|
+
|
|
136
|
+
Under scripts `test:visual` replace the environment variable with the below:
|
|
137
|
+
|
|
138
|
+
```
|
|
139
|
+
PERCY_TOKEN_PIE_BUTTON=abcde
|
package/dist/index.js
CHANGED
|
@@ -1,76 +1,130 @@
|
|
|
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
|
-
|
|
13
|
-
`<${
|
|
14
|
-
`Must be one of: ${
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
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
|
+
`Must be one of: ${o.join(" | ")}.`,
|
|
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
|
-
|
|
27
|
-
class l extends g {
|
|
26
|
+
class p extends f {
|
|
28
27
|
constructor() {
|
|
29
|
-
super(...arguments), this.
|
|
28
|
+
super(...arguments), this.propKeyValues = "";
|
|
29
|
+
}
|
|
30
|
+
// Renders a string such as 'size: small, isFullWidth: true'
|
|
31
|
+
// as HTML such as:
|
|
32
|
+
// <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
|
|
33
|
+
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
|
+
_renderPropKeyValues() {
|
|
35
|
+
return this.propKeyValues.split(",").map((o) => {
|
|
36
|
+
const [e, r] = o.split(":");
|
|
37
|
+
return v`<p class="c-webComponentTestWrapper-label"><b>${e}</b>: <code>${r}</code></p>`;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
// eslint-disable-next-line class-methods-use-this
|
|
41
|
+
render() {
|
|
42
|
+
return v`
|
|
43
|
+
<div class="c-webComponentTestWrapper">
|
|
44
|
+
${this._renderPropKeyValues()}
|
|
45
|
+
<div class="c-webComponentTestWrapper-slot">
|
|
46
|
+
<slot></slot>
|
|
47
|
+
</div>
|
|
48
|
+
</div>`;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
p.styles = h(m);
|
|
52
|
+
z([
|
|
53
|
+
c({ type: String })
|
|
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;
|
|
79
|
+
};
|
|
80
|
+
const d = "pie-button";
|
|
81
|
+
class l extends f {
|
|
82
|
+
constructor() {
|
|
83
|
+
super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isFullWidth = !1;
|
|
30
84
|
}
|
|
31
85
|
render() {
|
|
32
86
|
const {
|
|
33
|
-
type:
|
|
34
|
-
disabled:
|
|
35
|
-
isFullWidth:
|
|
36
|
-
variant:
|
|
37
|
-
size:
|
|
87
|
+
type: o,
|
|
88
|
+
disabled: e,
|
|
89
|
+
isFullWidth: r,
|
|
90
|
+
variant: t,
|
|
91
|
+
size: n
|
|
38
92
|
} = this;
|
|
39
|
-
return
|
|
93
|
+
return v`
|
|
40
94
|
<button
|
|
41
95
|
class="o-btn"
|
|
42
|
-
type=${
|
|
43
|
-
variant=${
|
|
44
|
-
size=${
|
|
45
|
-
?disabled=${
|
|
46
|
-
?isFullWidth=${
|
|
96
|
+
type=${o}
|
|
97
|
+
variant=${t}
|
|
98
|
+
size=${n}
|
|
99
|
+
?disabled=${e}
|
|
100
|
+
?isFullWidth=${r}>
|
|
47
101
|
<slot></slot>
|
|
48
102
|
</button>`;
|
|
49
103
|
}
|
|
50
104
|
}
|
|
51
|
-
l.styles =
|
|
52
|
-
|
|
105
|
+
l.styles = h($);
|
|
106
|
+
s([
|
|
53
107
|
c(),
|
|
54
|
-
|
|
108
|
+
b(d, w, "medium")
|
|
55
109
|
], l.prototype, "size", 2);
|
|
56
|
-
|
|
110
|
+
s([
|
|
57
111
|
c(),
|
|
58
|
-
|
|
112
|
+
b(d, P, "submit")
|
|
59
113
|
], l.prototype, "type", 2);
|
|
60
|
-
|
|
114
|
+
s([
|
|
61
115
|
c(),
|
|
62
|
-
|
|
116
|
+
b(d, k, "primary")
|
|
63
117
|
], l.prototype, "variant", 2);
|
|
64
|
-
|
|
118
|
+
s([
|
|
65
119
|
c({ type: Boolean })
|
|
66
120
|
], l.prototype, "disabled", 2);
|
|
67
|
-
|
|
121
|
+
s([
|
|
68
122
|
c({ type: Boolean })
|
|
69
123
|
], l.prototype, "isFullWidth", 2);
|
|
70
|
-
customElements.define(
|
|
124
|
+
customElements.define(d, l);
|
|
71
125
|
export {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
126
|
+
l as PieButton,
|
|
127
|
+
w as buttonSizes,
|
|
128
|
+
P as buttonTypes,
|
|
129
|
+
k as buttonVariants
|
|
76
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
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "PIE design system button built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
|
-
"build": "yarn build:wrapper pie-button && run -T vite build
|
|
10
|
+
"build": "yarn build:wrapper pie-button && run -T vite build ",
|
|
11
11
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
12
12
|
"lint:style:fix": "yarn lint:style --fix",
|
|
13
|
-
"watch": "run -T vite build --
|
|
13
|
+
"watch": "run -T vite build --watch",
|
|
14
14
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
15
15
|
"test:ci": "yarn test",
|
|
16
16
|
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
@@ -20,12 +20,10 @@
|
|
|
20
20
|
},
|
|
21
21
|
"author": "JustEatTakeaway - Design System Web Team",
|
|
22
22
|
"license": "Apache-2.0",
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"@justeattakeaway/pie-webc-core": "workspace:*"
|
|
25
|
-
},
|
|
26
23
|
"devDependencies": {
|
|
27
24
|
"@justeat/pie-design-tokens": "5.1.0",
|
|
28
|
-
"@justeattakeaway/pie-components-config": "workspace:*"
|
|
25
|
+
"@justeattakeaway/pie-components-config": "workspace:*",
|
|
26
|
+
"@justeattakeaway/pie-webc-core": "workspace:*"
|
|
29
27
|
},
|
|
30
28
|
"volta": {
|
|
31
29
|
"extends": "../../../package.json"
|
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;
|
|
@@ -50,7 +57,7 @@ export class PieButton extends LitElement {
|
|
|
50
57
|
static styles = unsafeCSS(styles);
|
|
51
58
|
}
|
|
52
59
|
|
|
53
|
-
customElements.define(
|
|
60
|
+
customElements.define(componentSelector, PieButton);
|
|
54
61
|
|
|
55
62
|
declare global {
|
|
56
63
|
interface HTMLElementTagNameMap {
|
|
@@ -1,36 +1,40 @@
|
|
|
1
1
|
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
|
-
import { PieButton } from '@/index';
|
|
3
|
-
import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
|
|
4
2
|
import AxeBuilder from '@axe-core/playwright';
|
|
3
|
+
import {
|
|
4
|
+
PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
5
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
6
|
+
import { PieButton } from '@/index.ts';
|
|
7
|
+
import { buttonSizes, buttonVariants } from '@/defs';
|
|
5
8
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
const props: PropObject = {
|
|
10
|
+
variant: buttonVariants,
|
|
11
|
+
size: buttonSizes,
|
|
12
|
+
type: 'button', // Changing the type does not affect the appearance of the button
|
|
13
|
+
isFullWidth: [true, false],
|
|
14
|
+
disabled: [true, false],
|
|
15
|
+
};
|
|
9
16
|
|
|
10
|
-
|
|
11
|
-
|
|
17
|
+
const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
|
|
18
|
+
const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
19
|
+
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
12
20
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
22
|
+
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: Combination) => {
|
|
23
|
+
await mount(
|
|
24
|
+
PieButton,
|
|
25
|
+
{
|
|
26
|
+
props: { ...combo },
|
|
27
|
+
slots: {
|
|
28
|
+
default: 'Hello world',
|
|
29
|
+
},
|
|
21
30
|
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
}
|
|
31
|
+
);
|
|
32
|
+
}));
|
|
28
33
|
|
|
29
34
|
const results = await new AxeBuilder.default({ page })
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
.withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
|
|
36
|
+
.disableRules(['color-contrast', 'color-contrast-enhanced'])
|
|
37
|
+
.analyze();
|
|
33
38
|
|
|
34
39
|
expect(results.violations).toEqual([]);
|
|
35
|
-
|
|
36
|
-
})
|
|
40
|
+
}));
|
|
@@ -1,34 +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
|
-
|
|
5
|
-
const sizes = Object.values(BUTTON_SIZE);
|
|
6
|
-
const variants = Object.values(BUTTON_VARIANT);
|
|
7
|
-
const disabledStates = [true, false];
|
|
8
|
-
|
|
9
|
-
variants.forEach((variant) => {
|
|
10
|
-
test(`should render - ${variant}`, async ({ mount }) => {
|
|
11
|
-
for (const size of sizes) {
|
|
12
|
-
for (const isDisabled of disabledStates) {
|
|
13
|
-
const component = await mount(
|
|
14
|
-
PieButton,
|
|
15
|
-
{
|
|
16
|
-
props: {
|
|
17
|
-
size,
|
|
18
|
-
variant,
|
|
19
|
-
disabled: isDisabled,
|
|
20
|
-
},
|
|
21
|
-
slots: {
|
|
22
|
-
default: `Hello, ${size} ${variant} Button!`,
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
await expect(component).toContainText(`Hello, ${size} ${variant} Button!`);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
3
|
|
|
33
4
|
test('should correctly work with native click events', async ({ mount }) => {
|
|
34
5
|
const messages: string[] = [];
|
|
@@ -37,8 +8,8 @@ test('should correctly work with native click events', async ({ mount }) => {
|
|
|
37
8
|
PieButton,
|
|
38
9
|
{
|
|
39
10
|
props: {
|
|
40
|
-
size:
|
|
41
|
-
variant:
|
|
11
|
+
size: 'large',
|
|
12
|
+
variant: 'primary',
|
|
42
13
|
},
|
|
43
14
|
slots: {
|
|
44
15
|
default: 'Click me!',
|
|
@@ -1,52 +1,63 @@
|
|
|
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';
|
|
4
|
+
import type {
|
|
5
|
+
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
6
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
|
|
7
|
+
import {
|
|
8
|
+
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
9
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
10
|
+
import {
|
|
11
|
+
createTestWebComponent,
|
|
12
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
|
|
13
|
+
import {
|
|
14
|
+
WebComponentTestWrapper,
|
|
15
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
3
16
|
import { PieButton } from '@/index';
|
|
4
|
-
import {
|
|
17
|
+
import { buttonSizes, buttonVariants } from '@/defs';
|
|
5
18
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
19
|
+
const props: PropObject = {
|
|
20
|
+
variant: buttonVariants,
|
|
21
|
+
size: buttonSizes,
|
|
22
|
+
type: 'button', // Changing the type does not affect the appearance of the button
|
|
23
|
+
isFullWidth: [true, false],
|
|
24
|
+
disabled: [true, false],
|
|
25
|
+
};
|
|
9
26
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
for (const size of sizes) {
|
|
13
|
-
for (const disabledState of disabledStates) {
|
|
14
|
-
await mount(
|
|
15
|
-
PieButton,
|
|
16
|
-
{
|
|
17
|
-
props: {
|
|
18
|
-
type: BUTTON_TYPE.BUTTON,
|
|
19
|
-
size,
|
|
20
|
-
variant,
|
|
21
|
-
disabled: disabledState,
|
|
22
|
-
isFullWidth: false,
|
|
23
|
-
},
|
|
24
|
-
slots: {
|
|
25
|
-
default: `Hello, ${size} ${variant} Button!`,
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
);
|
|
29
|
-
}
|
|
27
|
+
// Renders a <pie-button> HTML string with the given prop values
|
|
28
|
+
const renderTestPieButton = (propVals: WebComponentPropValues) => `<pie-button variant="${propVals.variant}" size="${propVals.size}" type="${propVals.type}" ${propVals.isFullWidth ? 'isFullWidth' : ''} ${propVals.disabled ? 'disabled' : ''}>Hello world</pie-button>`;
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
{
|
|
35
|
-
props: {
|
|
36
|
-
type: BUTTON_TYPE.BUTTON,
|
|
37
|
-
size,
|
|
38
|
-
variant,
|
|
39
|
-
disabled: disabledState,
|
|
40
|
-
isFullWidth: true,
|
|
41
|
-
},
|
|
42
|
-
slots: {
|
|
43
|
-
default: `Hello, ${size} ${variant} Button!`,
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
30
|
+
const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
|
|
31
|
+
const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
32
|
+
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
49
33
|
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
// This ensures the component is registered in the DOM for each test
|
|
35
|
+
// This is not required if your tests mount the web component directly in the tests
|
|
36
|
+
test('Component registered in the DOM', async ({ mount }) => {
|
|
37
|
+
await mount(
|
|
38
|
+
PieButton,
|
|
39
|
+
{
|
|
40
|
+
props: {},
|
|
41
|
+
slots: {},
|
|
42
|
+
},
|
|
43
|
+
);
|
|
52
44
|
});
|
|
45
|
+
|
|
46
|
+
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
47
|
+
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
48
|
+
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieButton);
|
|
49
|
+
const propKeyValues = `size: ${testComponent.propValues.size}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}`;
|
|
50
|
+
|
|
51
|
+
await mount(
|
|
52
|
+
WebComponentTestWrapper,
|
|
53
|
+
{
|
|
54
|
+
props: { propKeyValues },
|
|
55
|
+
slots: {
|
|
56
|
+
default: testComponent.renderedString.trim(),
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
);
|
|
60
|
+
}));
|
|
61
|
+
|
|
62
|
+
await percySnapshot(page, `PIE Button - Variant: ${variant}`, getLitPercyOptions());
|
|
63
|
+
}));
|
package/vite.config.js
ADDED