@justeattakeaway/pie-button 0.19.0 → 0.22.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/.eslintignore +3 -0
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +27 -0
- package/README.md +32 -7
- package/dist/index.js +46 -44
- package/dist/types/packages/components/pie-button/src/defs.d.ts +2 -1
- 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 -0
- package/dist/types/packages/components/pie-button/src/index.d.ts.map +1 -1
- package/dist/types/packages/components/pie-button/src/react.d.ts.map +1 -1
- package/package.json +3 -1
- package/playwright/index.ts +1 -1
- package/playwright-lit-visual.config.ts +0 -1
- package/playwright-lit.config.ts +1 -2
- package/src/button.scss +30 -1
- package/src/defs.ts +3 -1
- package/src/index.ts +7 -0
- package/test/component/pie-button.spec.ts +2 -3
- package/test/visual/pie-button.spec.ts +46 -0
- package/tsconfig.json +1 -1
package/.eslintignore
ADDED
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[3:34:01 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
3
|
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
5
|
[32m✓[39m 22 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m12.06 kB[22m[1m[22m[2m │ gzip: 2.53 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.01 kB[22m[1m[22m[2m │ gzip: 15.91 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓ built in
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓ built in 19.26s[39m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 17800ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.22.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
8
|
+
|
|
9
|
+
[Removed] - Built webc icons from source control
|
|
10
|
+
[Added] - Type declaration files for components
|
|
11
|
+
[Added] - Types for pie-icons
|
|
12
|
+
[Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
|
|
13
|
+
[Added] - Webc icon tests for width, height and base classes
|
|
14
|
+
[Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
|
|
15
|
+
[Changed] - Update pie-icons-webc rollup config to remove commonjs build
|
|
16
|
+
[Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
|
|
17
|
+
|
|
18
|
+
## 0.21.0
|
|
19
|
+
|
|
20
|
+
### Minor Changes
|
|
21
|
+
|
|
22
|
+
- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
23
|
+
|
|
24
|
+
## 0.20.0
|
|
25
|
+
|
|
26
|
+
### Minor Changes
|
|
27
|
+
|
|
28
|
+
- [Added] - Slots for leading and trailing icons ([#634](https://github.com/justeattakeaway/pie/pull/634)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
29
|
+
|
|
3
30
|
## 0.19.0
|
|
4
31
|
|
|
5
32
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -65,14 +65,14 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
|
|
|
65
65
|
|
|
66
66
|
## Props
|
|
67
67
|
|
|
68
|
-
| Property | Type | Default | Description
|
|
69
|
-
|
|
70
|
-
| size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large`
|
|
71
|
-
| type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`, `menu`
|
|
68
|
+
| Property | Type | Default | Description |
|
|
69
|
+
|-------------|-----------|-----------------|-------------------------------------------------------------------------------------------------------------------|
|
|
70
|
+
| size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
|
|
71
|
+
| type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`, `menu` |
|
|
72
72
|
| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `inverse`, `ghost-inverse` |
|
|
73
|
-
| disabled | `Boolean` | `false` | If `true`, disables the button.
|
|
74
|
-
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container.
|
|
75
|
-
| isLoading
|
|
73
|
+
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
74
|
+
| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of it's container. |
|
|
75
|
+
| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the button. |
|
|
76
76
|
|
|
77
77
|
In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
|
|
78
78
|
|
|
@@ -84,6 +84,31 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
84
84
|
<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
+
## Slots
|
|
88
|
+
|
|
89
|
+
| Slot | Description |
|
|
90
|
+
|---------------|------------------------------------------------------------------------------------------------------------------------------------|
|
|
91
|
+
| Default slot | The default slot is used to pass text into the button component. |
|
|
92
|
+
| icon-leading | Used to pass in a leading icon. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
|
|
93
|
+
| icon-trailing | Used to pass in a trailing icon. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
|
|
94
|
+
|
|
95
|
+
### Using `pie-icons-webc` with `pie-button`icon slots
|
|
96
|
+
|
|
97
|
+
We recommend using `pie-icons-webc` when using the `icon-leading` and `icon-trailing` slots. Here is an example of how you would do this:
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<!--
|
|
101
|
+
Note that pie-button and the icons that you want to use will need to be imported as components into your application.
|
|
102
|
+
See the `pie-icons-webc` README for more info on importing these icons.
|
|
103
|
+
-->
|
|
104
|
+
<pie-button>
|
|
105
|
+
<icon-plus-circle slot="icon-leading"></icon-plus-circle>
|
|
106
|
+
Search
|
|
107
|
+
<icon-chevron-down slot="icon-trailing"></icon-chevron-down>
|
|
108
|
+
</pie-button>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
|
|
87
112
|
## Events
|
|
88
113
|
|
|
89
114
|
This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
package/dist/index.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { unsafeCSS as h, LitElement as u, html as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as h, LitElement as u, html as g } from "lit";
|
|
2
|
+
import { property as s } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const b = (l, r, t) => function(o,
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(o,
|
|
4
|
+
const b = (l, r, t) => function(o, n) {
|
|
5
|
+
const e = `#${n}`;
|
|
6
|
+
Object.defineProperty(o, n, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[e];
|
|
9
9
|
},
|
|
10
10
|
set(v) {
|
|
11
|
-
const p = this[
|
|
12
|
-
r.includes(v) ? this[
|
|
13
|
-
`<${l}> Invalid value "${v}" provided for property "${
|
|
11
|
+
const p = this[e];
|
|
12
|
+
r.includes(v) ? this[e] = v : (console.error(
|
|
13
|
+
`<${l}> Invalid value "${v}" provided for property "${n}".`,
|
|
14
14
|
`Must be one of: ${r.join(" | ")}.`,
|
|
15
15
|
`Falling back to default value: "${t}"`
|
|
16
|
-
), this[
|
|
16
|
+
), this[e] = t), this.requestUpdate(n, p);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
19
|
+
}, m = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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-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-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;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;inline-size:var(--btn-inline-size);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner);outline:none;position:relative}.o-btn:focus-visible:after{content:"";display:block;position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:var(--btn-border-radius);box-shadow:0 0 0 2px var(--dt-color-focus-outer)}.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=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);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: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-inverse-h),var(--dt-color-interactive-inverse-s),calc(var(--dt-color-interactive-inverse-l) - var(--dt-color-hover-01)))}.o-btn[variant=inverse]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-inverse-h),var(--dt-color-interactive-inverse-s),calc(var(--dt-color-interactive-inverse-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l)}.o-btn[variant=ghost-inverse]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-inverse-h),var(--dt-color-container-inverse-s),calc(var(--dt-color-container-inverse-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost-inverse]:active:not(:disabled){background-color:hsl(var(--dt-color-container-inverse-h),var(--dt-color-container-inverse-s),calc(var(--dt-color-container-inverse-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.o-btn .o-btn-text{flex-grow:1}.o-btn[isLoading]:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.o-btn[isLoading] .o-btn-text{opacity:0}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
|
|
20
20
|
`, f = ["xsmall", "small-productive", "small-expressive", "medium", "large"], y = ["submit", "button", "reset", "menu"], x = ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse"];
|
|
21
|
-
var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor,
|
|
22
|
-
for (var o =
|
|
23
|
-
(
|
|
24
|
-
return
|
|
21
|
+
var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (l, r, t, a) => {
|
|
22
|
+
for (var o = a > 1 ? void 0 : a ? w(r, t) : r, n = l.length - 1, e; n >= 0; n--)
|
|
23
|
+
(e = l[n]) && (o = (a ? e(r, t, o) : e(o)) || o);
|
|
24
|
+
return a && o && z(r, t, o), o;
|
|
25
25
|
};
|
|
26
26
|
const d = "pie-button";
|
|
27
|
-
class
|
|
27
|
+
class i extends u {
|
|
28
28
|
constructor() {
|
|
29
29
|
super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1;
|
|
30
30
|
}
|
|
@@ -32,21 +32,23 @@ class a extends u {
|
|
|
32
32
|
const {
|
|
33
33
|
type: r,
|
|
34
34
|
disabled: t,
|
|
35
|
-
isFullWidth:
|
|
35
|
+
isFullWidth: a,
|
|
36
36
|
variant: o,
|
|
37
|
-
size:
|
|
38
|
-
isLoading:
|
|
37
|
+
size: n,
|
|
38
|
+
isLoading: e
|
|
39
39
|
} = this;
|
|
40
|
-
return
|
|
40
|
+
return g`
|
|
41
41
|
<button
|
|
42
42
|
class="o-btn"
|
|
43
43
|
type=${r}
|
|
44
44
|
variant=${o}
|
|
45
|
-
size=${
|
|
45
|
+
size=${n}
|
|
46
46
|
?disabled=${t}
|
|
47
|
-
?isFullWidth=${
|
|
48
|
-
?isLoading=${
|
|
47
|
+
?isFullWidth=${a}
|
|
48
|
+
?isLoading=${e}>
|
|
49
|
+
<slot name="icon-leading"></slot>
|
|
49
50
|
<span class="o-btn-text"><slot></slot></span>
|
|
51
|
+
<slot name="icon-trailing"></slot>
|
|
50
52
|
</button>`;
|
|
51
53
|
}
|
|
52
54
|
focus() {
|
|
@@ -54,31 +56,31 @@ class a extends u {
|
|
|
54
56
|
(t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || t.focus();
|
|
55
57
|
}
|
|
56
58
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
i.styles = h(m);
|
|
60
|
+
c([
|
|
61
|
+
s(),
|
|
60
62
|
b(d, f, "medium")
|
|
61
|
-
],
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
], i.prototype, "size", 2);
|
|
64
|
+
c([
|
|
65
|
+
s(),
|
|
64
66
|
b(d, y, "submit")
|
|
65
|
-
],
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
], i.prototype, "type", 2);
|
|
68
|
+
c([
|
|
69
|
+
s(),
|
|
68
70
|
b(d, x, "primary")
|
|
69
|
-
],
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
],
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
],
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
],
|
|
79
|
-
customElements.define(d,
|
|
71
|
+
], i.prototype, "variant", 2);
|
|
72
|
+
c([
|
|
73
|
+
s({ type: Boolean })
|
|
74
|
+
], i.prototype, "disabled", 2);
|
|
75
|
+
c([
|
|
76
|
+
s({ type: Boolean, reflect: !0 })
|
|
77
|
+
], i.prototype, "isLoading", 2);
|
|
78
|
+
c([
|
|
79
|
+
s({ type: Boolean })
|
|
80
|
+
], i.prototype, "isFullWidth", 2);
|
|
81
|
+
customElements.define(d, i);
|
|
80
82
|
export {
|
|
81
|
-
|
|
83
|
+
i as PieButton,
|
|
82
84
|
f as sizes,
|
|
83
85
|
y as types,
|
|
84
86
|
x as variants
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
|
|
2
2
|
export declare const types: readonly ["submit", "button", "reset", "menu"];
|
|
3
3
|
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse"];
|
|
4
|
+
export type Variant = typeof variants[number];
|
|
4
5
|
export interface ButtonProps {
|
|
5
6
|
/**
|
|
6
7
|
* What size the button should be.
|
|
@@ -13,7 +14,7 @@ export interface ButtonProps {
|
|
|
13
14
|
/**
|
|
14
15
|
* What style variant the button should be such as primary, outline or ghost.
|
|
15
16
|
*/
|
|
16
|
-
variant:
|
|
17
|
+
variant: Variant;
|
|
17
18
|
/**
|
|
18
19
|
* When true, the button element is disabled.
|
|
19
20
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,mFAAoF,CAAC;AAE1G,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,mFAAoF,CAAC;AAE1G,MAAM,MAAM,OAAO,GAAG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE9C,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACtB"}
|
|
@@ -2,6 +2,11 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import { ButtonProps, sizes, types, variants } from './defs';
|
|
3
3
|
export { type ButtonProps, sizes, types, variants, };
|
|
4
4
|
declare const componentSelector = "pie-button";
|
|
5
|
+
/**
|
|
6
|
+
* @slot icon-leading - Leading icon
|
|
7
|
+
* @slot icon-trailing - Trailing icon
|
|
8
|
+
* @slot - Default slot
|
|
9
|
+
*/
|
|
5
10
|
export declare class PieButton extends LitElement implements ButtonProps {
|
|
6
11
|
size: ButtonProps['size'];
|
|
7
12
|
type: ButtonProps['type'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAW,YAAW,WAAW;IAGrD,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,SAAS,UAAS;IAGlB,WAAW,UAAS;IAE3B,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,UAAW,YAAW,WAAW;IAGrD,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,SAAS,UAAS;IAGlB,WAAW,UAAS;IAE3B,MAAM;IAoBN,KAAK;IAKL,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAEtD,eAAO,MAAM,SAAS,iEAMpB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"description": "PIE design system button built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"build": "yarn build:wrapper pie-button && run -T vite build ",
|
|
11
|
+
"lint:scripts": "run -T eslint .",
|
|
12
|
+
"lint:scripts:fix": "run -T eslint . --fix",
|
|
11
13
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
12
14
|
"lint:style:fix": "yarn lint:style --fix",
|
|
13
15
|
"watch": "run -T vite build --watch",
|
package/playwright/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
//Import common styles here
|
|
1
|
+
// Import common styles here
|
package/playwright-lit.config.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { defineConfig } from '@sand4rt/experimental-ct-web';
|
|
2
|
-
import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config'
|
|
2
|
+
import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
|
|
3
3
|
|
|
4
|
-
// @ts-ignore
|
|
5
4
|
export default defineConfig(getPlaywrightConfig());
|
package/src/button.scss
CHANGED
|
@@ -45,6 +45,9 @@
|
|
|
45
45
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
46
46
|
--btn-text-color: var(--dt-color-content-interactive-primary);
|
|
47
47
|
|
|
48
|
+
// Sizing is set to Medium button icon size, as that is the default
|
|
49
|
+
--btn-icon-size: 24px;
|
|
50
|
+
|
|
48
51
|
// Spinner sizes defaults - currently set for the medium button styles
|
|
49
52
|
--spinner-size-s: 20px;
|
|
50
53
|
--spinner-size-m: 24px;
|
|
@@ -67,6 +70,10 @@
|
|
|
67
70
|
--spinner-animation-iteration-count: infinite;
|
|
68
71
|
|
|
69
72
|
position: relative;
|
|
73
|
+
display: flex;
|
|
74
|
+
gap: var(--dt-spacing-b);
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
70
77
|
box-sizing: border-box;
|
|
71
78
|
padding: var(--btn-padding);
|
|
72
79
|
border: none;
|
|
@@ -81,6 +88,15 @@
|
|
|
81
88
|
cursor: pointer;
|
|
82
89
|
user-select: none;
|
|
83
90
|
|
|
91
|
+
// used to specify whether the button should be full width or not
|
|
92
|
+
inline-size: var(--btn-inline-size);
|
|
93
|
+
|
|
94
|
+
// TODO: This should be moved into global CSS typography setting
|
|
95
|
+
// This should be imported by consuming apps and set on the application body
|
|
96
|
+
text-rendering: optimizelegibility;
|
|
97
|
+
-webkit-font-smoothing: antialiased;
|
|
98
|
+
-moz-font-smoothing: antialiased;
|
|
99
|
+
|
|
84
100
|
&:focus-visible {
|
|
85
101
|
/*
|
|
86
102
|
TODO: This focus styling should be extracted out into a shared mixin to share among other components
|
|
@@ -191,7 +207,7 @@
|
|
|
191
207
|
|
|
192
208
|
// Additional modifiers
|
|
193
209
|
&[isFullWidth] {
|
|
194
|
-
inline-size: 100%;
|
|
210
|
+
--btn-inline-size: 100%;
|
|
195
211
|
}
|
|
196
212
|
|
|
197
213
|
&[disabled] {
|
|
@@ -214,6 +230,7 @@
|
|
|
214
230
|
--btn-padding: 6px var(--dt-spacing-b);
|
|
215
231
|
--btn-font-size: calc(var(--dt-font-size-14) * 1px);
|
|
216
232
|
--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
|
|
233
|
+
--btn-icon-size: 16px;
|
|
217
234
|
--spinner-size: var(--spinner-size-s);
|
|
218
235
|
--spinner-border-width: var(--spinner-border-width-s);
|
|
219
236
|
}
|
|
@@ -222,6 +239,7 @@
|
|
|
222
239
|
--btn-padding: 6px var(--dt-spacing-d);
|
|
223
240
|
--btn-font-size: calc(var(--dt-font-size-20) * 1px);
|
|
224
241
|
--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
|
|
242
|
+
--btn-icon-size: 20px;
|
|
225
243
|
--spinner-size: var(--spinner-size-s);
|
|
226
244
|
--spinner-border-width: var(--spinner-border-width-s);
|
|
227
245
|
}
|
|
@@ -230,6 +248,7 @@
|
|
|
230
248
|
--btn-padding: 8px var(--dt-spacing-d);
|
|
231
249
|
--btn-font-size: calc(var(--dt-font-size-16) * 1px);
|
|
232
250
|
--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
|
|
251
|
+
--btn-icon-size: 20px;
|
|
233
252
|
--spinner-size: var(--spinner-size-s);
|
|
234
253
|
--spinner-border-width: var(--spinner-border-width-s);
|
|
235
254
|
}
|
|
@@ -267,6 +286,10 @@
|
|
|
267
286
|
opacity: 0;
|
|
268
287
|
}
|
|
269
288
|
|
|
289
|
+
.o-btn-text {
|
|
290
|
+
flex-grow: 1;
|
|
291
|
+
}
|
|
292
|
+
|
|
270
293
|
&[isLoading] {
|
|
271
294
|
&:before {
|
|
272
295
|
animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
|
|
@@ -278,3 +301,9 @@
|
|
|
278
301
|
}
|
|
279
302
|
}
|
|
280
303
|
}
|
|
304
|
+
|
|
305
|
+
// Used to size an SVG if one is passed in (when not using the component icons)
|
|
306
|
+
::slotted(svg) {
|
|
307
|
+
height: var(--btn-icon-size);
|
|
308
|
+
width: var(--btn-icon-size);
|
|
309
|
+
}
|
package/src/defs.ts
CHANGED
|
@@ -2,6 +2,8 @@ export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium'
|
|
|
2
2
|
export const types = ['submit', 'button', 'reset', 'menu'] as const;
|
|
3
3
|
export const variants = ['primary', 'secondary', 'outline', 'ghost', 'inverse', 'ghost-inverse'] as const;
|
|
4
4
|
|
|
5
|
+
export type Variant = typeof variants[number];
|
|
6
|
+
|
|
5
7
|
export interface ButtonProps {
|
|
6
8
|
/**
|
|
7
9
|
* What size the button should be.
|
|
@@ -14,7 +16,7 @@ export interface ButtonProps {
|
|
|
14
16
|
/**
|
|
15
17
|
* What style variant the button should be such as primary, outline or ghost.
|
|
16
18
|
*/
|
|
17
|
-
variant:
|
|
19
|
+
variant: Variant;
|
|
18
20
|
/**
|
|
19
21
|
* When true, the button element is disabled.
|
|
20
22
|
*/
|
package/src/index.ts
CHANGED
|
@@ -16,6 +16,11 @@ export {
|
|
|
16
16
|
|
|
17
17
|
const componentSelector = 'pie-button';
|
|
18
18
|
|
|
19
|
+
/**
|
|
20
|
+
* @slot icon-leading - Leading icon
|
|
21
|
+
* @slot icon-trailing - Trailing icon
|
|
22
|
+
* @slot - Default slot
|
|
23
|
+
*/
|
|
19
24
|
export class PieButton extends LitElement implements ButtonProps {
|
|
20
25
|
@property()
|
|
21
26
|
@validPropertyValues(componentSelector, sizes, 'medium')
|
|
@@ -52,7 +57,9 @@ export class PieButton extends LitElement implements ButtonProps {
|
|
|
52
57
|
?disabled=${disabled}
|
|
53
58
|
?isFullWidth=${isFullWidth}
|
|
54
59
|
?isLoading=${isLoading}>
|
|
60
|
+
<slot name="icon-leading"></slot>
|
|
55
61
|
<span class="o-btn-text"><slot></slot></span>
|
|
62
|
+
<slot name="icon-trailing"></slot>
|
|
56
63
|
</button>`;
|
|
57
64
|
}
|
|
58
65
|
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
|
-
import { PieButton } from '@/index';
|
|
3
|
-
import { ButtonProps } from '@/index';
|
|
2
|
+
import { PieButton, ButtonProps } from '@/index';
|
|
4
3
|
|
|
5
4
|
const props: ButtonProps = {
|
|
6
5
|
size: 'large',
|
|
7
6
|
variant: 'primary',
|
|
8
|
-
}
|
|
7
|
+
};
|
|
9
8
|
|
|
10
9
|
test('should correctly work with native click events', async ({ mount }) => {
|
|
11
10
|
const messages: string[] = [];
|
|
@@ -65,3 +65,49 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
|
|
|
65
65
|
|
|
66
66
|
await percySnapshot(page, `PIE Button - Variant: ${variant}`);
|
|
67
67
|
}));
|
|
68
|
+
|
|
69
|
+
// TODO: Currently setting the slot to use a straight up SVG
|
|
70
|
+
// This should be updated to use pie-icons-webc, but after some investigation, we think that we'll
|
|
71
|
+
// need to convert the webc icons to use Lit, as currently the components don't work well in a Node env like Playwright
|
|
72
|
+
// Atm, importing them like `import '@justeattakeaway/pie-icons-webc/icons/IconClose.js';` results in an `HTMLElement is not defined` error
|
|
73
|
+
const plusSVG = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--plusCircle"><path d="M8.656 4.596H7.344v2.748H4.596v1.312h2.748v2.748h1.312V8.656h2.748V7.344H8.656V4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></path></svg>';
|
|
74
|
+
const chevronSVG = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronDown"><path d="M2.82 5.044 8 10.399 13.197 5l.963.875-5.364 5.565a1.164 1.164 0 0 1-1.636 0L1.875 5.945l.945-.901Z"></path></svg>';
|
|
75
|
+
|
|
76
|
+
sizes.forEach((size) => test(`Render icon slot variations for Size: ${size}`, async ({ page, mount }) => {
|
|
77
|
+
const iconSlotVariations = [
|
|
78
|
+
{
|
|
79
|
+
'icon-leading': plusSVG,
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
'icon-trailing': chevronSVG,
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
'icon-leading': plusSVG,
|
|
86
|
+
'icon-trailing': chevronSVG,
|
|
87
|
+
},
|
|
88
|
+
];
|
|
89
|
+
|
|
90
|
+
await Promise.all(iconSlotVariations.map(async (iconSlots) => {
|
|
91
|
+
const iconLeading = iconSlots['icon-leading'] ? iconSlots['icon-leading'].replace('<svg', '<svg slot="icon-leading"') : '';
|
|
92
|
+
const iconTrailing = iconSlots['icon-trailing'] ? iconSlots['icon-trailing'].replace('<svg', '<svg slot="icon-trailing"') : '';
|
|
93
|
+
|
|
94
|
+
await mount(
|
|
95
|
+
WebComponentTestWrapper,
|
|
96
|
+
{
|
|
97
|
+
props: {
|
|
98
|
+
size,
|
|
99
|
+
},
|
|
100
|
+
slots: {
|
|
101
|
+
component: `<pie-button size="${size}">
|
|
102
|
+
${iconLeading || ''}
|
|
103
|
+
Hello, ${size} Button!
|
|
104
|
+
${iconTrailing || ''}
|
|
105
|
+
</pie-button>`,
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
);
|
|
109
|
+
}));
|
|
110
|
+
|
|
111
|
+
await percySnapshot(page, `PIE Button Leading Icon - Size: ${size}`);
|
|
112
|
+
}));
|
|
113
|
+
|
package/tsconfig.json
CHANGED