@justeattakeaway/pie-icon-button 0.21.3 → 0.23.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.
Files changed (5) hide show
  1. package/dist/index.js +45 -63
  2. package/dist/react.js +6 -5
  3. package/package.json +4 -4
  4. package/src/iconButton.scss +1 -0
  5. package/src/index.ts +1 -1
package/dist/index.js CHANGED
@@ -1,27 +1,9 @@
1
- import { unsafeCSS as f, LitElement as m, html as s } from "lit";
2
- import { property as l } from "lit/decorators.js";
1
+ import { unsafeCSS as h, LitElement as m, html as d } from "lit";
2
+ import { property as e } from "lit/decorators.js";
3
+ import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
3
4
  import "@justeattakeaway/pie-spinner";
4
- const h = (i, o, t) => function(r, n) {
5
- const a = `#${n}`;
6
- Object.defineProperty(r, n, {
7
- get() {
8
- return this[a];
9
- },
10
- set(v) {
11
- o.includes(v) ? this[a] = v : (console.error(
12
- `<${i}> Invalid value "${v}" provided for property "${n}".`,
13
- `Must be one of: ${o.join(" | ")}.`,
14
- `Falling back to default value: "${t}"`
15
- ), this[a] = t);
16
- },
17
- configurable: !0
18
- });
19
- };
20
- function g(i, o) {
21
- customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, o);
22
- }
23
- const p = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary][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-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary][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-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse][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-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
24
- `, u = ["xsmall", "small", "medium", "large"], y = [
5
+ const g = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary][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-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary][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-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse][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-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px;--btn-icon-size: 20px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
6
+ `, p = ["xsmall", "small", "medium", "large"], u = [
25
7
  "primary",
26
8
  "secondary",
27
9
  "outline",
@@ -30,13 +12,13 @@ const p = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
30
12
  "inverse",
31
13
  "ghost-inverse"
32
14
  ];
33
- var B = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (i, o, t, e) => {
34
- for (var r = e > 1 ? void 0 : e ? z(o, t) : o, n = i.length - 1, a; n >= 0; n--)
35
- (a = i[n]) && (r = (e ? a(o, t, r) : a(r)) || r);
36
- return e && r && B(o, t, r), r;
15
+ var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (c, r, i, t) => {
16
+ for (var o = t > 1 ? void 0 : t ? B(r, i) : r, l = c.length - 1, v; l >= 0; l--)
17
+ (v = c[l]) && (o = (t ? v(r, i, o) : v(o)) || o);
18
+ return t && o && y(r, i, o), o;
37
19
  };
38
- const b = "pie-icon-button";
39
- class c extends m {
20
+ const s = "pie-icon-button";
21
+ class a extends m {
40
22
  constructor() {
41
23
  super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
42
24
  }
@@ -46,50 +28,50 @@ class c extends m {
46
28
  * @private
47
29
  */
48
30
  renderSpinner() {
49
- const { variant: o, size: t } = this, e = t === "xsmall" ? "s" : "m";
50
- let r = "brand";
51
- return o != null && o.includes("secondary") && (r = "secondary"), (o === "primary" || o === "ghost-inverse") && (r = "inverse"), s`
31
+ const { variant: r, size: i } = this, t = i === "xsmall" ? "small" : "medium";
32
+ let o = "brand";
33
+ return r != null && r.includes("secondary") && (o = "secondary"), (r === "primary" || r === "ghost-inverse") && (o = "inverse"), d`
52
34
  <pie-spinner
53
- size="${e}"
54
- variant="${r}"
35
+ size="${t}"
36
+ variant="${o}"
55
37
  </pie-spinner>`;
56
38
  }
57
39
  render() {
58
40
  const {
59
- disabled: o,
60
- size: t,
61
- variant: e,
62
- isLoading: r
41
+ disabled: r,
42
+ size: i,
43
+ variant: t,
44
+ isLoading: o
63
45
  } = this;
64
- return s`
46
+ return d`
65
47
  <button
66
48
  class="o-iconBtn"
67
- size="${t}"
68
- variant="${e}"
69
- ?disabled="${o}"
70
- ?isLoading="${r}">
71
- ${r ? this.renderSpinner() : s`<slot></slot>`}
49
+ size="${i}"
50
+ variant="${t}"
51
+ ?disabled="${r}"
52
+ ?isLoading="${o}">
53
+ ${o ? this.renderSpinner() : d`<slot></slot>`}
72
54
  </button>`;
73
55
  }
74
56
  }
75
- c.styles = f(p);
76
- d([
77
- l(),
78
- h(b, u, "medium")
79
- ], c.prototype, "size", 2);
80
- d([
81
- l(),
82
- h(b, y, "primary")
83
- ], c.prototype, "variant", 2);
84
- d([
85
- l({ type: Boolean })
86
- ], c.prototype, "disabled", 2);
87
- d([
88
- l({ type: Boolean })
89
- ], c.prototype, "isLoading", 2);
90
- g(b, c);
57
+ a.styles = h(g);
58
+ n([
59
+ e(),
60
+ b(s, p, "medium")
61
+ ], a.prototype, "size", 2);
62
+ n([
63
+ e(),
64
+ b(s, u, "primary")
65
+ ], a.prototype, "variant", 2);
66
+ n([
67
+ e({ type: Boolean })
68
+ ], a.prototype, "disabled", 2);
69
+ n([
70
+ e({ type: Boolean })
71
+ ], a.prototype, "isLoading", 2);
72
+ f(s, a);
91
73
  export {
92
- c as PieIconButton,
93
- u as sizes,
94
- y as variants
74
+ a as PieIconButton,
75
+ p as sizes,
76
+ u as variants
95
77
  };
package/dist/react.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import * as t from "react";
2
2
  import { createComponent as o } from "@lit/react";
3
3
  import { PieIconButton as e } from "./index.js";
4
- import { sizes as u, variants as f } from "./index.js";
4
+ import { sizes as f, variants as B } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
+ import "@justeattakeaway/pie-webc-core";
7
8
  import "@justeattakeaway/pie-spinner";
8
- const p = o({
9
+ const s = o({
9
10
  displayName: "PieIconButton",
10
11
  elementClass: e,
11
12
  react: t,
@@ -13,7 +14,7 @@ const p = o({
13
14
  events: {}
14
15
  });
15
16
  export {
16
- p as PieIconButton,
17
- u as sizes,
18
- f as variants
17
+ s as PieIconButton,
18
+ f as sizes,
19
+ B as variants
19
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "0.21.3",
3
+ "version": "0.23.0",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -26,9 +26,9 @@
26
26
  "author": "Just Eat Takeaway.com - Design System Team",
27
27
  "license": "Apache-2.0",
28
28
  "dependencies": {
29
- "@justeattakeaway/pie-icons-webc": "0.11.1",
30
- "@justeattakeaway/pie-spinner": "0.2.2",
31
- "@justeattakeaway/pie-webc-core": "0.12.0"
29
+ "@justeattakeaway/pie-icons-webc": "0.12.0",
30
+ "@justeattakeaway/pie-spinner": "0.3.1",
31
+ "@justeattakeaway/pie-webc-core": "0.13.0"
32
32
  },
33
33
  "volta": {
34
34
  "extends": "../../../package.json"
package/src/iconButton.scss CHANGED
@@ -108,6 +108,7 @@
108
108
 
109
109
  &[size='xsmall'] {
110
110
  --btn-dimension: 32px;
111
+ --btn-icon-size: 20px;
111
112
  }
112
113
 
113
114
  &[size='small'] {
package/src/index.ts CHANGED
@@ -39,7 +39,7 @@ export class PieIconButton extends LitElement implements IconButtonProps {
39
39
  */
40
40
  private renderSpinner (): TemplateResult {
41
41
  const { variant, size } = this;
42
- const spinnerSize = size === 'xsmall' ? 's' : 'm';
42
+ const spinnerSize = size === 'xsmall' ? 'small' : 'medium';
43
43
  let spinnerVariant = 'brand';
44
44
  if (variant?.includes('secondary')) spinnerVariant = 'secondary';
45
45
  if (variant === 'primary' || variant === 'ghost-inverse') spinnerVariant = 'inverse';