@justeattakeaway/pie-button 0.23.0 → 0.24.1

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.
Files changed (10) hide show
  1. package/.eslintignore +2 -0
  2. package/.turbo/turbo-build.log +4 -4
  3. package/CHANGELOG.md +23 -0
  4. package/README.md +8 -8
  5. package/dist/index.js +53 -44
  6. package/dist/types/packages/components/pie-button/src/defs.d.ts +1 -1
  7. package/dist/types/packages/components/pie-button/src/defs.d.ts.map +1 -1
  8. package/package.json +3 -2
  9. package/src/button.scss +58 -28
  10. package/src/defs.ts +3 -1
package/.eslintignore CHANGED
@@ -1,3 +1,5 @@
1
1
  .turbo
2
2
  dist
3
3
  node_modules
4
+ lit-browsers-report
5
+ lit-visual-report
package/.turbo/turbo-build.log CHANGED
@@ -1,14 +1,14 @@
1
- [3:28:09 PM] @custom-elements-manifest/analyzer: Created new manifest.
1
+ [2:03:50 PM] @custom-elements-manifest/analyzer: Created new manifest.
2
2
  react wrapper has been added!
3
3
  vite v4.3.9 building for production...
4
4
  transforming...
5
5
  ✓ 22 modules transformed.
6
6
  rendering chunks...
7
7
  computing gzip size...
8
- dist/index.js 12.06 kB │ gzip: 2.53 kB
8
+ dist/index.js 14.78 kB │ gzip: 2.72 kB
9
9
  dist/react.js 59.01 kB │ gzip: 15.91 kB
10
10
  
11
11
  [vite:dts] Start generate declaration files...
12
- ✓ built in 20.52s
13
- [vite:dts] Declaration files built in 19120ms.
12
+ ✓ built in 46.23s
13
+ [vite:dts] Declaration files built in 42885ms.
14
14
  
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.24.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [Changed] - use latest pie-design-tokens ([#716](https://github.com/justeattakeaway/pie/pull/716)) by [@xander-marjoram](https://github.com/xander-marjoram)
8
+
9
+ ## 0.24.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [Added] - destructive and destructive-ghost button variants ([#686](https://github.com/justeattakeaway/pie/pull/686)) by [@xander-marjoram](https://github.com/xander-marjoram)
14
+
15
+ [Fixed] - hover and active colours for ghost-inverse variant
16
+ [Added] - mixin for reassigning button spinner HSL custom properties
17
+
18
+ - [Added] - `font-size` function added & tests ([#681](https://github.com/justeattakeaway/pie/pull/681)) by [@ashleynolan](https://github.com/ashleynolan)
19
+
20
+ [Added] - adding pie-css to pie-button
21
+
22
+ ### Patch Changes
23
+
24
+ - [Changed] - use latest pie-design-tokens ([#694](https://github.com/justeattakeaway/pie/pull/694)) by [@xander-marjoram](https://github.com/xander-marjoram)
25
+
3
26
  ## 0.23.0
4
27
 
5
28
  ### 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` |
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 | `Boolean` | `false` | If `true`, displays a loading indicator inside the button. |
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
+ | variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `destructive`, `destructive-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 its 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
 
package/dist/index.js CHANGED
@@ -1,30 +1,39 @@
1
- import { unsafeCSS as h, LitElement as u, html as g } from "lit";
2
- import { property as s } from "lit/decorators.js";
1
+ import { unsafeCSS as h, LitElement as m, html as f } from "lit";
2
+ import { property as c } from "lit/decorators.js";
3
3
  import "lit/decorators/property.js";
4
- const b = (l, r, t) => function(o, n) {
5
- const e = `#${n}`;
6
- Object.defineProperty(o, n, {
4
+ const b = (l, r, t) => function(o, e) {
5
+ const i = `#${e}`;
6
+ Object.defineProperty(o, e, {
7
7
  get() {
8
- return this[e];
8
+ return this[i];
9
9
  },
10
10
  set(v) {
11
- const p = this[e];
12
- r.includes(v) ? this[e] = v : (console.error(
13
- `<${l}> Invalid value "${v}" provided for property "${n}".`,
11
+ const p = this[i];
12
+ r.includes(v) ? this[i] = v : (console.error(
13
+ `<${l}> Invalid value "${v}" provided for property "${e}".`,
14
14
  `Must be one of: ${r.join(" | ")}.`,
15
15
  `Falling back to default value: "${t}"`
16
- ), this[e] = t), this.requestUpdate(n, p);
16
+ ), this[i] = t), this.requestUpdate(e, p);
17
17
  }
18
18
  });
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
- `, 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, 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);
19
+ }, g = `*,*: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){--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-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]: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-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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.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){--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-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]: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-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--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=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.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){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.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){--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-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]: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-btn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--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=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.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],[variant=destructive-ghost]){--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
+ `, u = ["xsmall", "small-productive", "small-expressive", "medium", "large"], y = ["submit", "button", "reset", "menu"], x = [
21
+ "primary",
22
+ "secondary",
23
+ "outline",
24
+ "ghost",
25
+ "inverse",
26
+ "ghost-inverse",
27
+ "destructive",
28
+ "destructive-ghost"
29
+ ];
30
+ var z = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (l, r, t, a) => {
31
+ for (var o = a > 1 ? void 0 : a ? w(r, t) : r, e = l.length - 1, i; e >= 0; e--)
32
+ (i = l[e]) && (o = (a ? i(r, t, o) : i(o)) || o);
24
33
  return a && o && z(r, t, o), o;
25
34
  };
26
35
  const d = "pie-button";
27
- class i extends u {
36
+ class n extends m {
28
37
  constructor() {
29
38
  super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1;
30
39
  }
@@ -34,18 +43,18 @@ class i extends u {
34
43
  disabled: t,
35
44
  isFullWidth: a,
36
45
  variant: o,
37
- size: n,
38
- isLoading: e
46
+ size: e,
47
+ isLoading: i
39
48
  } = this;
40
- return g`
49
+ return f`
41
50
  <button
42
51
  class="o-btn"
43
52
  type=${r}
44
53
  variant=${o}
45
- size=${n}
54
+ size=${e}
46
55
  ?disabled=${t}
47
56
  ?isFullWidth=${a}
48
- ?isLoading=${e}>
57
+ ?isLoading=${i}>
49
58
  <slot name="icon-leading"></slot>
50
59
  <span class="o-btn-text"><slot></slot></span>
51
60
  <slot name="icon-trailing"></slot>
@@ -56,32 +65,32 @@ class i extends u {
56
65
  (t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || t.focus();
57
66
  }
58
67
  }
59
- i.styles = h(m);
60
- c([
61
- s(),
62
- b(d, f, "medium")
63
- ], i.prototype, "size", 2);
64
- c([
65
- s(),
68
+ n.styles = h(g);
69
+ s([
70
+ c(),
71
+ b(d, u, "medium")
72
+ ], n.prototype, "size", 2);
73
+ s([
74
+ c(),
66
75
  b(d, y, "submit")
67
- ], i.prototype, "type", 2);
68
- c([
69
- s(),
76
+ ], n.prototype, "type", 2);
77
+ s([
78
+ c(),
70
79
  b(d, x, "primary")
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
+ ], n.prototype, "variant", 2);
81
+ s([
82
+ c({ type: Boolean })
83
+ ], n.prototype, "disabled", 2);
84
+ s([
85
+ c({ type: Boolean, reflect: !0 })
86
+ ], n.prototype, "isLoading", 2);
87
+ s([
88
+ c({ type: Boolean })
89
+ ], n.prototype, "isFullWidth", 2);
90
+ customElements.define(d, n);
82
91
  export {
83
- i as PieButton,
84
- f as sizes,
92
+ n as PieButton,
93
+ u as sizes,
85
94
  y as types,
86
95
  x as variants
87
96
  };
package/dist/types/packages/components/pie-button/src/defs.d.ts CHANGED
@@ -1,6 +1,6 @@
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
- export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse"];
3
+ export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
4
4
  export type Variant = typeof variants[number];
5
5
  export interface ButtonProps {
6
6
  /**
package/dist/types/packages/components/pie-button/src/defs.d.ts.map CHANGED
@@ -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,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"}
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,uHAEX,CAAC;AAEX,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.23.0",
3
+ "version": "0.24.1",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -23,8 +23,9 @@
23
23
  "author": "JustEatTakeaway - Design System Web Team",
24
24
  "license": "Apache-2.0",
25
25
  "devDependencies": {
26
- "@justeat/pie-design-tokens": "5.1.0",
26
+ "@justeat/pie-design-tokens": "5.5.0",
27
27
  "@justeattakeaway/pie-components-config": "workspace:*",
28
+ "@justeattakeaway/pie-css": "workspace:*",
28
29
  "@justeattakeaway/pie-webc-core": "workspace:*"
29
30
  },
30
31
  "volta": {
package/src/button.scss CHANGED
@@ -1,21 +1,49 @@
1
+ @use '@justeattakeaway/pie-css/scss' as p;
2
+
1
3
  *,
2
4
  *:before,
3
5
  *:after {
4
6
  box-sizing: border-box;
5
7
  }
6
8
 
7
- // Defines button interactive states for hover and active using HSL & calc
8
- // Takes a color token name as an argument
9
- @mixin button-interactive-states($bg-color) {
9
+ /**
10
+ * Defines button interactive states for hover, active and loading.
11
+ * Takes the interactive color name as an argument, and whether the color
12
+ * should be lightened or darkened.
13
+ */
14
+ @mixin button-interactive-states($bg-color, $lighten: false) {
10
15
  &:hover:not(:disabled) {
11
- background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
16
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
17
+
18
+ @if $lighten {
19
+ --hover-modifier: var(--dt-color-hover-02);
20
+ }
21
+
22
+ --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
12
23
  }
13
24
 
14
- &:active:not(:disabled) {
15
- background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
25
+ &:active:not(:disabled),
26
+ &[isLoading]:not(:disabled) {
27
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
28
+
29
+ @if $lighten {
30
+ --active-modifier: var(--dt-color-active-02);
31
+ }
32
+
33
+ --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
16
34
  }
17
35
  }
18
36
 
37
+ /**
38
+ * Shorthand mixin for updating the HSL custom properties for the loading spinner.
39
+ * Takes in the name of the color to be split into its HSL components.
40
+ */
41
+ @mixin spinner-base-colors($color) {
42
+ --spinner-base-color-h: var(#{$color}-h);
43
+ --spinner-base-color-s: var(#{$color}-s);
44
+ --spinner-base-color-l: var(#{$color}-l);
45
+ }
46
+
19
47
  // Spin animation for loading state
20
48
  @keyframes rotate360 {
21
49
  from {
@@ -37,7 +65,7 @@
37
65
 
38
66
  // The base values are set to the size default, which is for the medium button size
39
67
  --btn-padding: 10px var(--dt-spacing-e);
40
- --btn-font-size: calc(var(--dt-font-size-20) * 1px);
68
+ --btn-font-size: #{p.font-size(--dt-font-size-20)};
41
69
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
42
70
 
43
71
  // The following values set to default background and color
@@ -57,9 +85,8 @@
57
85
  --spinner-border-width: var(--spinner-border-width-m);
58
86
 
59
87
  // Spinner colors - currently set for the primary button styles
60
- --spinner-base-color-h: var(--dt-color-content-interactive-primary-h);
61
- --spinner-base-color-s: var(--dt-color-content-interactive-primary-s);
62
- --spinner-base-color-l: var(--dt-color-content-interactive-primary-l);
88
+ @include spinner-base-colors(--dt-color-content-interactive-primary);
89
+
63
90
  --spinner-left-color-opacity: 0.35;
64
91
  --spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));
65
92
  --spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);
@@ -156,53 +183,56 @@
156
183
  &[variant='secondary'] {
157
184
  --btn-bg-color: var(--dt-color-interactive-secondary);
158
185
  --btn-text-color: var(--dt-color-content-interactive-secondary);
159
- --spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);
160
- --spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);
161
- --spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);
162
186
 
163
187
  @include button-interactive-states('--dt-color-interactive-secondary');
188
+ @include spinner-base-colors('--dt-color-content-interactive-secondary');
164
189
  }
165
190
 
166
191
  &[variant='outline'] {
167
192
  --btn-bg-color: var(--dt-color-container-default);
168
193
  --btn-text-color: var(--dt-color-content-interactive-secondary);
169
- --spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);
170
- --spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);
171
- --spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);
172
194
 
173
195
  border: 1px solid var(--dt-color-border-strong);
174
196
 
175
197
  @include button-interactive-states('--dt-color-container-default');
198
+ @include spinner-base-colors('--dt-color-content-interactive-secondary');
176
199
  }
177
200
 
178
201
  &[variant='ghost'] {
179
202
  --btn-bg-color: transparent;
180
203
  --btn-text-color: var(--dt-color-content-link);
181
- --spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);
182
- --spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);
183
- --spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);
184
204
 
185
205
  @include button-interactive-states('--dt-color-container-default');
206
+ @include spinner-base-colors('--dt-color-content-interactive-secondary');
186
207
  }
187
208
 
188
209
  &[variant='inverse'] {
189
210
  --btn-bg-color: var(--dt-color-interactive-inverse);
190
211
  --btn-text-color: var(--dt-color-content-interactive-secondary);
191
- --spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);
192
- --spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);
193
- --spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);
194
212
 
195
213
  @include button-interactive-states('--dt-color-interactive-inverse');
214
+ @include spinner-base-colors('--dt-color-content-interactive-secondary');
196
215
  }
197
216
 
198
217
  &[variant='ghost-inverse'] {
199
218
  --btn-bg-color: transparent;
200
219
  --btn-text-color: var(--dt-color-content-interactive-primary);
201
- --spinner-base-color-h: var(--dt-color-content-interactive-primary-h);
202
- --spinner-base-color-s: var(--dt-color-content-interactive-primary-s);
203
- --spinner-base-color-l: var(--dt-color-content-interactive-primary-l);
204
220
 
205
- @include button-interactive-states('--dt-color-container-inverse');
221
+ @include button-interactive-states('--dt-color-container-inverse', true);
222
+ }
223
+
224
+ &[variant='destructive'] {
225
+ --btn-bg-color: var(--dt-color-support-error);
226
+
227
+ @include button-interactive-states('--dt-color-support-error');
228
+ }
229
+
230
+ &[variant='destructive-ghost'] {
231
+ --btn-bg-color: transparent;
232
+ --btn-text-color: var(--dt-color-content-interactive-error);
233
+
234
+ @include button-interactive-states('--dt-color-container-default');
235
+ @include spinner-base-colors('--dt-color-content-interactive-secondary');
206
236
  }
207
237
 
208
238
  // Additional modifiers
@@ -215,8 +245,8 @@
215
245
 
216
246
  cursor: not-allowed;
217
247
 
218
- // For every variant except ghost and ghost-inverse, set the disabled background color
219
- &:not([variant='ghost'], [variant='ghost-inverse']) {
248
+ // For every variant (except ghost variants) set the disabled background color
249
+ &:not([variant='ghost'], [variant='ghost-inverse'], [variant='destructive-ghost']) {
220
250
  --btn-bg-color: var(--dt-color-disabled-01) !important;
221
251
  }
222
252
 
package/src/defs.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
2
2
  export const types = ['submit', 'button', 'reset', 'menu'] as const;
3
- export const variants = ['primary', 'secondary', 'outline', 'ghost', 'inverse', 'ghost-inverse'] as const;
3
+ export const variants = [
4
+ 'primary', 'secondary', 'outline', 'ghost', 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
5
+ ] as const;
4
6
 
5
7
  export type Variant = typeof variants[number];
6
8