@justeattakeaway/pie-icon-button 0.4.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[11:48:53] @custom-elements-manifest/analyzer: Created new manifest.
+[3:48:32 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
-vite v4.2.3 building for production...
+vite v4.2.3 building for production...
 transforming...
-✓ 27 modules transformed.
+✓ 28 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   8.04 kB │ gzip:  2.21 kB
-dist/react.js  59.14 kB │ gzip: 15.95 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 5.82s
-[vite:dts] Declaration files built in 5320ms.
-
+dist/index.js   7.93 kB │ gzip:  2.13 kB
+dist/react.js  59.14 kB │ gzip: 15.95 kB
+
+[vite:dts] Start generate declaration files...
+✓ built in 30.04s
+[vite:dts] Declaration files built in 27657ms.
+

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @justeattakeaway/pie-icon-button
 
+## 0.5.0
+
+### Minor Changes
+
+- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,29 +1,29 @@
-import { unsafeCSS as p, LitElement as u, html as d } from "lit";
-import { property as s } from "lit/decorators.js";
+import { unsafeCSS as b, LitElement as p, html as l } from "lit";
+import { property as d } from "lit/decorators.js";
 import "lit/decorators/property.js";
-const y = (t, r, n) => function(e, o) {
-  const a = `#${o}`;
-  Object.defineProperty(e, o, {
+const g = (c, t, r) => function(n, o) {
+  const e = `#${o}`;
+  Object.defineProperty(n, o, {
     get() {
-      return this[a];
+      return this[e];
     },
-    set(c) {
-      const g = this[a];
-      r.includes(c) ? this[a] = c : (console.error(
-        `<${t}> Invalid value "${c}" provided for property "${o}".`,
-        `Must be one of: ${r.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[a] = n), this.requestUpdate(o, g);
+    set(a) {
+      const f = this[e];
+      t.includes(a) ? this[e] = a : (console.error(
+        `<${c}> Invalid value "${a}" provided for property "${o}".`,
+        `Must be one of: ${t.join(" | ")}.`,
+        `Falling back to default value: "${r}"`
+      ), this[e] = r), this.requestUpdate(o, f);
     }
   });
-}, m = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
+}, y = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
 `;
-var B = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (t, r, n, e) => {
-  for (var o = e > 1 ? void 0 : e ? w(r, n) : r, a = t.length - 1, c; a >= 0; a--)
-    (c = t[a]) && (o = (e ? c(r, n, o) : c(o)) || o);
-  return e && o && B(r, n, o), o;
+var m = Object.defineProperty, B = Object.getOwnPropertyDescriptor, w = (c, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? B(t, r) : t, e = c.length - 1, a; e >= 0; e--)
+    (a = c[e]) && (o = (n ? a(t, r, o) : a(o)) || o);
+  return n && o && m(t, r, o), o;
 };
-class v extends u {
+class s extends p {
   constructor() {
     super(...arguments), this.propKeyValues = "";
   }
@@ -32,14 +32,14 @@ class v extends u {
   // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
   // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
   _renderPropKeyValues() {
-    return this.propKeyValues.split(",").map((r) => {
-      const [n, e] = r.split(":");
-      return d`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${e}</code></p>`;
+    return this.propKeyValues.split(",").map((t) => {
+      const [r, n] = t.split(":");
+      return l`<p class="c-webComponentTestWrapper-label"><b>${r}</b>: <code>${n}</code></p>`;
     });
   }
   // eslint-disable-next-line class-methods-use-this
   render() {
-    return d`
+    return l`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
@@ -48,51 +48,56 @@ class v extends u {
             </div>`;
   }
 }
-v.styles = p(m);
-P([
-  s({ type: String })
-], v.prototype, "propKeyValues", 2);
-const b = "web-component-test-wrapper";
-customElements.get(b) || customElements.define(b, v);
-var i = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t.GHOST_TERTIARY = "ghost-tertiary", t))(i || {});
+s.styles = b(y);
+w([
+  d({ type: String })
+], s.prototype, "propKeyValues", 2);
+const v = "web-component-test-wrapper";
+customElements.get(v) || customElements.define(v, s);
 const $ = `.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-height: 48px;--btn-width: var(--btn-height);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-height);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-width)}}.o-iconBtn:focus-visible{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:24.5px;width:24.5px}.o-iconBtn svg,.o-iconBtn path{fill:var(--btn-icon-fill)}.o-iconBtn[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-iconBtn[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-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){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-iconBtn[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-iconBtn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=outline] .o-iconBtn{border:1px solid var(--dt-color-border-strong)}.o-iconBtn[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-iconBtn[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-iconBtn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[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-iconBtn[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-iconBtn[variant=ghost-tertiary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-tertiary)}.o-iconBtn[variant=ghost-tertiary]: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-iconBtn[variant=ghost-tertiary]: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-iconBtn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-icon-fill: var(--dt-color-content-disabled)}.o-iconBtn[disabled] .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-iconBtn[disabled][variant=outline] .o-iconBtn{outline:none}.o-iconBtn[disabled][variant=ghost],.o-iconBtn[disabled][variant=ghost-tertiary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-tertiary] .o-iconBtn{outline:none;border:none}
-`;
-var x = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (t, r, n, e) => {
-  for (var o = e > 1 ? void 0 : e ? L(r, n) : r, a = t.length - 1, c; a >= 0; a--)
-    (c = t[a]) && (o = (e ? c(r, n, o) : c(o)) || o);
-  return e && o && x(r, n, o), o;
+`, x = [
+  "primary",
+  "secondary",
+  "outline",
+  "ghost",
+  "ghost-tertiary"
+];
+var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, u = (c, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? _(t, r) : t, e = c.length - 1, a; e >= 0; e--)
+    (a = c[e]) && (o = (n ? a(t, r, o) : a(o)) || o);
+  return n && o && P(t, r, o), o;
 };
-const f = "pie-icon-button";
-class l extends u {
+const h = "pie-icon-button";
+class i extends p {
   constructor() {
-    super(...arguments), this.variant = i.PRIMARY, this.disabled = !1;
+    super(...arguments), this.variant = "primary", this.disabled = !1;
   }
   render() {
     const {
-      disabled: r,
-      variant: n
+      disabled: t,
+      variant: r
     } = this;
-    return d`
+    return l`
             <button
                 class="o-iconBtn"
-                variant=${n}
-                ?disabled=${r}>
+                variant=${r}
+                ?disabled=${t}>
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M11.8676 3.20496L8.0001 7.07248L4.13258 3.20496L3.20508 4.13246L7.0726 7.99998L3.20508 11.8675L4.13258 12.795L8.0001 8.92748L11.8676 12.795L12.7951 11.8675L8.92761 7.99998L12.7951 4.13246L11.8676 3.20496Z" fill="#242E30"/>
                 </svg>
             </button>`;
   }
 }
-l.styles = p($);
-h([
-  s(),
-  y(f, Object.values(i), i.PRIMARY)
-], l.prototype, "variant", 2);
-h([
-  s({ type: Boolean })
-], l.prototype, "disabled", 2);
-customElements.define(f, l);
+i.styles = b($);
+u([
+  d(),
+  g(h, x, "primary")
+], i.prototype, "variant", 2);
+u([
+  d({ type: Boolean })
+], i.prototype, "disabled", 2);
+customElements.define(h, i);
 export {
-  i as ICON_BUTTON_VARIANT,
-  l as PieIconButton
+  i as PieIconButton,
+  x as iconButtonVariants
 };

package/dist/types/packages/components/pie-icon-button/src/defs.d.ts

@@ -1,11 +1,8 @@
+export interface IconButtonProps {
+    variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-tertiary';
+}
 /**
  * Icon Button style variants
  */
-export declare enum ICON_BUTTON_VARIANT {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    OUTLINE = "outline",
-    GHOST = "ghost",
-    GHOST_TERTIARY = "ghost-tertiary"
-}
+export declare const iconButtonVariants: IconButtonProps['variant'][];
 //# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-icon-button/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,mBAAmB;IAC3B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,cAAc,mBAAmB;CACpC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC5B,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,gBAAgB,CAAC;CAC7E;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,SAAS,CAAC,EAM1D,CAAC"}

package/dist/types/packages/components/pie-icon-button/src/index.d.ts

@@ -1,9 +1,9 @@
 import { LitElement } from 'lit';
-import { ICON_BUTTON_VARIANT } from './defs';
-export { ICON_BUTTON_VARIANT };
+import { IconButtonProps, iconButtonVariants } from './defs';
+export { type IconButtonProps, iconButtonVariants };
 declare const componentSelector = "pie-icon-button";
 export declare class PieIconButton extends LitElement {
-    variant: ICON_BUTTON_VARIANT;
+    variant: IconButtonProps['variant'];
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;

package/dist/types/packages/components/pie-icon-button/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,OAAO,EAAG,mBAAmB,CAA+B;IAG5D,QAAQ,UAAS;IAErB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAEpD,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAErB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}

package/package.json

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

package/src/defs.ts

@@ -1,10 +1,14 @@
+export interface IconButtonProps {
+    variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-tertiary';
+}
+
 /**
  * Icon Button style variants
  */
-export enum ICON_BUTTON_VARIANT {
-    PRIMARY = 'primary',
-    SECONDARY = 'secondary',
-    OUTLINE = 'outline',
-    GHOST = 'ghost',
-    GHOST_TERTIARY = 'ghost-tertiary',
-}
+export const iconButtonVariants: IconButtonProps['variant'][] = [
+    'primary',
+    'secondary',
+    'outline',
+    'ghost',
+    'ghost-tertiary',
+];

package/src/index.ts

@@ -1,18 +1,18 @@
 import { LitElement, html, unsafeCSS } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
 import { property } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
-import { ICON_BUTTON_VARIANT } from './defs';
 import styles from './iconButton.scss?inline';
+import { IconButtonProps, iconButtonVariants } from './defs';
 
 // Valid values available to consumers
-export { ICON_BUTTON_VARIANT };
+export { type IconButtonProps, iconButtonVariants };
 
 const componentSelector = 'pie-icon-button';
 
 export class PieIconButton extends LitElement {
     @property()
-    @validPropertyValues(componentSelector, Object.values(ICON_BUTTON_VARIANT), ICON_BUTTON_VARIANT.PRIMARY)
-        variant : ICON_BUTTON_VARIANT = ICON_BUTTON_VARIANT.PRIMARY;
+    @validPropertyValues(componentSelector, iconButtonVariants, 'primary')
+        variant: IconButtonProps['variant'] = 'primary';
 
     @property({ type: Boolean })
         disabled = false;

package/test/accessibility/pie-icon-button.spec.ts

@@ -4,10 +4,10 @@ import {
     PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
 } from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
 import { PieIconButton } from '@/index';
-import { ICON_BUTTON_VARIANT } from '@/defs';
+import { iconButtonVariants } from '@/defs';
 
 const props: PropObject = {
-    variant: Object.values(ICON_BUTTON_VARIANT),
+    variant: iconButtonVariants,
     disabled: [true, false],
 };
 

package/test/component/pie-icon-button.spec.ts

@@ -1,6 +1,5 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieIconButton } from '@/index';
-import { ICON_BUTTON_VARIANT } from '@/defs';
 
 test('should correctly work with native click events', async ({ mount }) => {
     const messages: string[] = [];
@@ -9,7 +8,7 @@ test('should correctly work with native click events', async ({ mount }) => {
         PieIconButton,
         {
             props: {
-                variant: ICON_BUTTON_VARIANT.PRIMARY,
+                variant: 'primary',
             },
             on: {
                 click: () => {

package/test/visual/pie-icon-button.spec.ts

@@ -1,5 +1,6 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
+import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
 import type {
     PropObject, WebComponentPropValues, WebComponentTestInput,
 } from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
@@ -13,10 +14,10 @@ import {
     WebComponentTestWrapper,
 } from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieIconButton } from '@/index';
-import { ICON_BUTTON_VARIANT } from '@/defs';
+import { iconButtonVariants } from '@/defs';
 
 const props: PropObject = {
-    variant: Object.values(ICON_BUTTON_VARIANT),
+    variant: iconButtonVariants,
     disabled: [true, false],
 };
 
@@ -54,5 +55,5 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
         );
     }));
 
-    await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`);
+    await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`, getLitPercyOptions());
 }));