@justeattakeaway/pie-icon-button 0.23.0 → 0.24.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { unsafeCSS as h, LitElement as m, html as d } from "lit";
-import { property as e } from "lit/decorators.js";
+import { property as n } from "lit/decorators.js";
 import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
 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}
@@ -12,13 +12,13 @@ const g = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
   "inverse",
   "ghost-inverse"
 ];
-var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (c, r, i, t) => {
-  for (var o = t > 1 ? void 0 : t ? B(r, i) : r, l = c.length - 1, v; l >= 0; l--)
-    (v = c[l]) && (o = (t ? v(r, i, o) : v(o)) || o);
-  return t && o && y(r, i, o), o;
+var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (l, o, i, t) => {
+  for (var r = t > 1 ? void 0 : t ? B(o, i) : o, a = l.length - 1, v; a >= 0; a--)
+    (v = l[a]) && (r = (t ? v(o, i, r) : v(r)) || r);
+  return t && r && y(o, i, r), r;
 };
 const s = "pie-icon-button";
-class a extends m {
+class e extends m {
   constructor() {
     super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
   }
@@ -28,50 +28,50 @@ class a extends m {
    * @private
    */
   renderSpinner() {
-    const { variant: r, size: i } = this, t = i === "xsmall" ? "small" : "medium";
-    let o = "brand";
-    return r != null && r.includes("secondary") && (o = "secondary"), (r === "primary" || r === "ghost-inverse") && (o = "inverse"), d`
+    const { variant: o, size: i, disabled: t } = this, r = i === "xsmall" ? "small" : "medium";
+    let a = "brand";
+    return o != null && o.includes("secondary") && (a = "secondary"), (o === "primary" && !t || o === "ghost-inverse") && (a = "inverse"), d`
                 <pie-spinner
-                    size="${t}"
-                    variant="${o}"
+                    size="${r}"
+                    variant="${a}"
                 </pie-spinner>`;
   }
   render() {
     const {
-      disabled: r,
+      disabled: o,
       size: i,
       variant: t,
-      isLoading: o
+      isLoading: r
     } = this;
     return d`
             <button
                 class="o-iconBtn"
                 size="${i}"
                 variant="${t}"
-                ?disabled="${r}"
-                ?isLoading="${o}">
-                ${o ? this.renderSpinner() : d`<slot></slot>`}
+                ?disabled="${o}"
+                ?isLoading="${r}">
+                ${r ? this.renderSpinner() : d`<slot></slot>`}
             </button>`;
   }
 }
-a.styles = h(g);
-n([
-  e(),
+e.styles = h(g);
+c([
+  n(),
   b(s, p, "medium")
-], a.prototype, "size", 2);
-n([
-  e(),
+], e.prototype, "size", 2);
+c([
+  n(),
   b(s, u, "primary")
-], a.prototype, "variant", 2);
-n([
-  e({ type: Boolean })
-], a.prototype, "disabled", 2);
-n([
-  e({ type: Boolean })
-], a.prototype, "isLoading", 2);
-f(s, a);
+], e.prototype, "variant", 2);
+c([
+  n({ type: Boolean })
+], e.prototype, "disabled", 2);
+c([
+  n({ type: Boolean })
+], e.prototype, "isLoading", 2);
+f(s, e);
 export {
-  a as PieIconButton,
+  e as PieIconButton,
   p as sizes,
   u as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",

package/src/index.ts

@@ -38,11 +38,11 @@ export class PieIconButton extends LitElement implements IconButtonProps {
      * @private
      */
     private renderSpinner (): TemplateResult {
-        const { variant, size } = this;
+        const { variant, size, disabled } = this;
         const spinnerSize = size === 'xsmall' ? 'small' : 'medium';
         let spinnerVariant = 'brand';
         if (variant?.includes('secondary')) spinnerVariant = 'secondary';
-        if (variant === 'primary' || variant === 'ghost-inverse') spinnerVariant = 'inverse';
+        if ((variant === 'primary' && !disabled) || variant === 'ghost-inverse') spinnerVariant = 'inverse';
 
         return html`
                 <pie-spinner