@justeattakeaway/pie-icon-button 1.2.2 → 1.3.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 (3) hide show
  1. package/dist/index.js +51 -51
  2. package/package.json +10 -4
  3. package/src/iconButton.scss +16 -16
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import { LitElement as B, html as v, unsafeCSS as g } from "lit";
2
- import { classMap as p } from "lit/directives/class-map.js";
3
- import { property as a } from "lit/decorators.js";
4
- import { ifDefined as c } from "lit/directives/if-defined.js";
5
- import { validPropertyValues as m, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as p, html as v, unsafeCSS as B } from "lit";
2
+ import { classMap as x } from "lit/directives/class-map.js";
3
+ import { property as s } from "lit/decorators.js";
4
+ import { ifDefined as a } from "lit/directives/if-defined.js";
5
+ import { validPropertyValues as g, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-spinner";
7
- const y = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 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-light);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));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;-webkit-user-select:none;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(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn.o-iconBtn--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.o-iconBtn--primary:active:not(:disabled),.o-iconBtn.o-iconBtn--primary.is-loading: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.o-iconBtn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--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.o-iconBtn--secondary:active:not(:disabled),.o-iconBtn.o-iconBtn--secondary.is-loading: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.o-iconBtn--outline{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--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.o-iconBtn--outline:active:not(:disabled),.o-iconBtn.o-iconBtn--outline.is-loading: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.o-iconBtn--ghost{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost:active:not(:disabled),.o-iconBtn.o-iconBtn--ghost.is-loading: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.o-iconBtn--ghost-secondary{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost-secondary:active:not(:disabled),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading: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.o-iconBtn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--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.o-iconBtn--inverse:active:not(:disabled),.o-iconBtn.o-iconBtn--inverse.is-loading: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.o-iconBtn--ghost-inverse{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn.o-iconBtn--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.o-iconBtn--ghost-inverse:active:not(:disabled),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading: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(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", k = ["xsmall", "small", "medium", "large"], x = [
7
+ const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-light);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--int-states-mixin-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;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(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn.o-iconBtn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-iconBtn.o-iconBtn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-iconBtn.o-iconBtn--outline{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--ghost{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--ghost-secondary{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-iconBtn.o-iconBtn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-iconBtn.o-iconBtn--ghost-inverse{--int-states-mixin-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent))}}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--int-states-mixin-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", y = ["xsmall", "small", "medium", "large"], k = [
8
8
  "primary",
9
9
  "secondary",
10
10
  "outline",
@@ -18,12 +18,12 @@ const y = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
18
18
  disabled: !1,
19
19
  isLoading: !1
20
20
  };
21
- var z = Object.defineProperty, l = (f, t, n, d) => {
22
- for (var r = void 0, o = f.length - 1, s; o >= 0; o--)
23
- (s = f[o]) && (r = s(t, n, r) || r);
24
- return r && z(t, n, r), r;
21
+ var z = Object.defineProperty, c = (h, r, n, l) => {
22
+ for (var i = void 0, o = h.length - 1, d; o >= 0; o--)
23
+ (d = h[o]) && (i = d(r, n, i) || i);
24
+ return i && z(r, n, i), i;
25
25
  };
26
- const b = "pie-icon-button", h = class h extends B {
26
+ const b = "pie-icon-button", m = class m extends p {
27
27
  constructor() {
28
28
  super(...arguments), this.size = e.size, this.variant = e.variant, this.disabled = e.disabled, this.isLoading = e.isLoading;
29
29
  }
@@ -33,64 +33,64 @@ const b = "pie-icon-button", h = class h extends B {
33
33
  * @private
34
34
  */
35
35
  renderSpinner() {
36
- const { variant: t, size: n, disabled: d } = this, r = n === "xsmall" ? "small" : "medium";
36
+ const { variant: r, size: n, disabled: l } = this, i = n === "xsmall" ? "small" : "medium";
37
37
  let o = "brand";
38
- return t != null && t.includes("secondary") && (o = "secondary"), (t === "primary" && !d || t === "ghost-inverse") && (o = "inverse"), v`
38
+ return r != null && r.includes("secondary") && (o = "secondary"), (r === "primary" && !l || r === "ghost-inverse") && (o = "inverse"), v`
39
39
  <pie-spinner
40
- size="${r}"
40
+ size="${i}"
41
41
  variant="${o}">
42
42
  </pie-spinner>`;
43
43
  }
44
44
  render() {
45
45
  const {
46
- disabled: t,
46
+ disabled: r,
47
47
  size: n,
48
- variant: d,
49
- isLoading: r,
48
+ variant: l,
49
+ isLoading: i,
50
50
  aria: o
51
- } = this, s = {
51
+ } = this, d = {
52
52
  "o-iconBtn": !0,
53
53
  [`o-iconBtn--${n}`]: !0,
54
- [`o-iconBtn--${d}`]: !0,
55
- "is-loading": r
54
+ [`o-iconBtn--${l}`]: !0,
55
+ "is-loading": i
56
56
  };
57
57
  return v`
58
58
  <button
59
- class="${p(s)}"
59
+ class="${x(d)}"
60
60
  data-test-id="pie-icon-button"
61
- ?disabled="${t}"
62
- aria-label="${c(o == null ? void 0 : o.label)}"
63
- aria-labelledby="${c(o == null ? void 0 : o.labelledby)}"
64
- aria-describedby="${c(o == null ? void 0 : o.describedby)}"
65
- aria-expanded="${c(o == null ? void 0 : o.expanded)}"
66
- aria-controls="${c(o == null ? void 0 : o.controls)}">
67
- ${r ? this.renderSpinner() : v`<slot></slot>`}
61
+ ?disabled="${r}"
62
+ aria-label="${a(o == null ? void 0 : o.label)}"
63
+ aria-labelledby="${a(o == null ? void 0 : o.labelledby)}"
64
+ aria-describedby="${a(o == null ? void 0 : o.describedby)}"
65
+ aria-expanded="${a(o == null ? void 0 : o.expanded)}"
66
+ aria-controls="${a(o == null ? void 0 : o.controls)}">
67
+ ${i ? this.renderSpinner() : v`<slot></slot>`}
68
68
  </button>`;
69
69
  }
70
70
  };
71
- h.styles = g(y);
72
- let i = h;
73
- l([
74
- a({ type: Object })
75
- ], i.prototype, "aria");
76
- l([
77
- a({ type: String }),
78
- m(b, k, e.size)
79
- ], i.prototype, "size");
80
- l([
81
- a({ type: String }),
82
- m(b, x, e.variant)
83
- ], i.prototype, "variant");
84
- l([
85
- a({ type: Boolean })
86
- ], i.prototype, "disabled");
87
- l([
88
- a({ type: Boolean })
89
- ], i.prototype, "isLoading");
90
- u(b, i);
71
+ m.styles = B(u);
72
+ let t = m;
73
+ c([
74
+ s({ type: Object })
75
+ ], t.prototype, "aria");
76
+ c([
77
+ s({ type: String }),
78
+ g(b, y, e.size)
79
+ ], t.prototype, "size");
80
+ c([
81
+ s({ type: String }),
82
+ g(b, k, e.variant)
83
+ ], t.prototype, "variant");
84
+ c([
85
+ s({ type: Boolean })
86
+ ], t.prototype, "disabled");
87
+ c([
88
+ s({ type: Boolean })
89
+ ], t.prototype, "isLoading");
90
+ f(b, t);
91
91
  export {
92
- i as PieIconButton,
92
+ t as PieIconButton,
93
93
  e as defaultProps,
94
- k as sizes,
95
- x as variants
94
+ y as sizes,
95
+ k as variants
96
96
  };
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icon-button",
3
- "version": "1.2.2",
3
+ "version": "1.3.1",
4
4
  "description": "PIE Design System Icon Button built using Web Components",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/justeattakeaway/pie",
8
+ "directory": "packages/components/pie-icon-button"
9
+ },
10
+ "homepage": "https://pie.design/components/icon-button/code/",
5
11
  "type": "module",
6
12
  "main": "dist/index.js",
7
13
  "module": "dist/index.js",
@@ -33,13 +39,13 @@
33
39
  "devDependencies": {
34
40
  "@custom-elements-manifest/analyzer": "0.9.0",
35
41
  "@justeattakeaway/pie-components-config": "0.18.0",
36
- "@justeattakeaway/pie-css": "0.14.1",
37
- "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
+ "@justeattakeaway/pie-css": "0.15.1",
43
+ "@justeattakeaway/pie-wrapper-react": "0.14.3",
38
44
  "cem-plugin-module-file-extensions": "0.0.5"
39
45
  },
40
46
  "dependencies": {
41
47
  "@justeattakeaway/pie-icons-webc": "1.5.0",
42
- "@justeattakeaway/pie-spinner": "1.0.0",
48
+ "@justeattakeaway/pie-spinner": "1.0.1",
43
49
  "@justeattakeaway/pie-webc-core": "0.24.2"
44
50
  },
45
51
  "volta": {
package/src/iconButton.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  // Base button styles
13
13
  .o-iconBtn {
14
14
  --btn-border-radius: var(--dt-radius-rounded-e);
15
- --btn-bg-color: var(--dt-color-interactive-brand);
15
+ --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
16
16
  --btn-icon-fill: var(--dt-color-content-interactive-light);
17
17
  --icon-display-override: block;
18
18
 
@@ -21,7 +21,7 @@
21
21
 
22
22
  border-color: var(--btn-border-color);
23
23
  border-radius: var(--btn-border-radius);
24
- background-color: var(--btn-bg-color);
24
+ background-color: var(--int-states-mixin-bg-color);
25
25
  color: var(--btn-icon-fill);
26
26
  cursor: pointer;
27
27
  user-select: none;
@@ -44,51 +44,51 @@
44
44
  &.o-iconBtn--primary {
45
45
  /* Same as default styles */
46
46
 
47
- @include p.button-interactive-states('--dt-color-interactive-brand');
47
+ @include p.interactive-states('--dt-color-interactive-brand');
48
48
  }
49
49
 
50
50
  &.o-iconBtn--secondary {
51
- --btn-bg-color: var(--dt-color-interactive-secondary);
51
+ --int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
52
52
  --btn-icon-fill: var(--dt-color-content-interactive-secondary);
53
53
 
54
- @include p.button-interactive-states('--dt-color-interactive-secondary');
54
+ @include p.interactive-states('--dt-color-interactive-secondary');
55
55
  }
56
56
 
57
57
  &.o-iconBtn--outline {
58
- --btn-bg-color: transparent;
58
+ --int-states-mixin-bg-color: transparent;
59
59
  --btn-icon-fill: var(--dt-color-content-interactive-brand);
60
60
 
61
61
  border: 1px solid var(--dt-color-border-strong);
62
62
 
63
- @include p.button-interactive-states('--dt-color-black', 'transparent');
63
+ @include p.interactive-states('--dt-color-transparent', 'transparent');
64
64
  }
65
65
 
66
66
  &.o-iconBtn--ghost {
67
- --btn-bg-color: transparent;
67
+ --int-states-mixin-bg-color: transparent;
68
68
  --btn-icon-fill: var(--dt-color-content-interactive-brand);
69
69
 
70
- @include p.button-interactive-states('--dt-color-black', 'transparent');
70
+ @include p.interactive-states('--dt-color-transparent', 'transparent');
71
71
  }
72
72
 
73
73
  &.o-iconBtn--ghost-secondary {
74
- --btn-bg-color: transparent;
74
+ --int-states-mixin-bg-color: transparent;
75
75
  --btn-icon-fill: var(--dt-color-content-interactive-secondary);
76
76
 
77
- @include p.button-interactive-states('--dt-color-black', 'transparent');
77
+ @include p.interactive-states('--dt-color-transparent', 'transparent');
78
78
  }
79
79
 
80
80
  &.o-iconBtn--inverse {
81
- --btn-bg-color: var(--dt-color-interactive-inverse);
81
+ --int-states-mixin-bg-color: var(--dt-color-interactive-inverse);
82
82
  --btn-icon-fill: var(--dt-color-content-interactive-brand);
83
83
 
84
- @include p.button-interactive-states('--dt-color-interactive-inverse');
84
+ @include p.interactive-states('--dt-color-interactive-inverse');
85
85
  }
86
86
 
87
87
  &.o-iconBtn--ghost-inverse {
88
- --btn-bg-color: transparent;
88
+ --int-states-mixin-bg-color: transparent;
89
89
  --btn-icon-fill: var(--dt-color-content-inverse);
90
90
 
91
- @include p.button-interactive-states('--dt-color-container-default', 'transparent');
91
+ @include p.interactive-states('--dt-color-transparent', 'transparent', '02');
92
92
  }
93
93
 
94
94
  &[disabled] {
@@ -98,7 +98,7 @@
98
98
 
99
99
  // For every variant (except ghost variants) set the disabled background color
100
100
  &:not(.o-iconBtn--ghost, .o-iconBtn--ghost-secondary, .o-iconBtn--ghost-inverse) {
101
- --btn-bg-color: var(--dt-color-disabled-01);
101
+ --int-states-mixin-bg-color: var(--dt-color-disabled-01);
102
102
  }
103
103
 
104
104
  // For outline variants, set the border to the disabled color