@justeattakeaway/pie-icon-button 0.6.0 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,14 +1,20 @@
-[3:10:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[11:02:00 AM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 28 modules transformed.
+✓ 886 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   8.31 kB │ gzip:  2.23 kB
+dist/index.js   8.63 kB │ gzip:  2.50 kB
 dist/react.js  59.03 kB │ gzip: 15.92 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 28.00s
-[vite:dts] Declaration files built in 25385ms.
+src/index.ts:4:32 - error TS7016: Could not find a declaration file for module '@justeattakeaway/pie-icons-webc'. '/home/runner/work/pie/pie/packages/tools/pie-icons-webc/icons/index.js' implicitly has an 'any' type.
+  Try `npm i --save-dev @types/justeattakeaway__pie-icons-webc` if it exists or add a new declaration (.d.ts) file containing `declare module '@justeattakeaway/pie-icons-webc';`
+
+4 import { IconCloseLarge } from '@justeattakeaway/pie-icons-webc';
+                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+✓ built in 23.45s
+[vite:dts] Declaration files built in 18363ms.
 

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @justeattakeaway/pie-icon-button
 
+## 0.7.0
+
+### Minor Changes
+
+- [Changed] - ghost-tertiary renamed to ghost-secondary ([#583](https://github.com/justeattakeaway/pie/pull/583)) by [@ashleynolan](https://github.com/ashleynolan)
+
+### Patch Changes
+
+- Updated dependencies [[`4c3f9348a`](https://github.com/justeattakeaway/pie/commit/4c3f9348a2041494f640cfc35e4c321eee6e550b)]:
+  - @justeattakeaway/pie-icons-webc@0.1.0
+
+## 0.6.1
+
+### Patch Changes
+
+- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -24,7 +24,9 @@
 
 ## `pie-icon-button`
 
-`pie-icon-button` is a Web Component built using the Lit library. It offers a simple and accessible icon button component for web applications. This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+`pie-icon-button` is a Web Component built using the Lit library. It offers a simple and accessible icon button component for web applications.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 ## Local development
 
@@ -68,8 +70,8 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
 
 | Property    | Type      | Default         | Description                                                          |
 |-------------|-----------|-----------------|----------------------------------------------------------------------|
-| size        | `String`  | `medium`        | Size of the Icon Button, one of `iconButtonSizes` – `xsmall`, `small`, `medium`, `large` |
-| variant     | `String`  | `primary`       | Variant of the button, one of `iconButtonVariants` – `primary`, `secondary`, `outline`, `ghost`, `ghost-tertiary` |
+| size        | `String`  | `medium`        | Size of the Icon Button, one of `sizes` – `xsmall`, `small`, `medium`, `large` |
+| variant     | `String`  | `primary`       | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `ghost-secondary` |
 | disabled    | `Boolean` | `false`         | If `true`, disables the button.                                      |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-icon-button` component:
@@ -90,18 +92,21 @@ For example, to add a click handler in various templates:
 
 
 ### HTML
+
 ```html
 <!-- Other attributes omitted for clarity -->
 <pie-icon-button onclick="e => console.log(e)">Click me!</pie-icon-button>
 ```
 
 ### Vue templates (using Nuxt 3)
+
 ```html
 <!-- Other attributes omitted for clarity -->
 <pie-icon-button @click="handleClick">Click me!</pie-icon-button>
 ```
 
 ### React templates (using Next 13)
+
 ```html
 <!-- Other attributes omitted for clarity -->
 <PieIconButton onClick={handleClick}>increment</PieIconButton>
@@ -129,13 +134,13 @@ yarn test:visual --filter=pie-icon-button
 
 Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
 
-Setup via bash:
+#### Setup via bash
 
 ```bash
 export PERCY_TOKEN_PIE_ICON_BUTTON=abcde
 ```
 
-Setup via package.json:
+#### Setup via package.json
 
 Under scripts `test:visual` replace the environment variable with the below:
 

package/dist/index.js

@@ -1,115 +1,138 @@
-import { unsafeCSS as u, LitElement as f, html as d } from "lit";
-import { property as l } from "lit/decorators.js";
+import { unsafeCSS as I, LitElement as x, html as S } from "lit";
+import { property as v } from "lit/decorators.js";
 import "lit/decorators/property.js";
-const h = (i, t, n) => function(r, o) {
-  const e = `#${o}`;
-  Object.defineProperty(r, o, {
+const g = (t, o, e) => function(n, r) {
+  const i = `#${r}`;
+  Object.defineProperty(n, r, {
     get() {
-      return this[e];
+      return this[i];
     },
-    set(a) {
-      const g = this[e];
-      t.includes(a) ? this[e] = a : (console.error(
-        `<${i}> Invalid value "${a}" provided for property "${o}".`,
-        `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[e] = n), this.requestUpdate(o, g);
+    set(c) {
+      const z = this[i];
+      o.includes(c) ? this[i] = c : (console.error(
+        `<${t}> Invalid value "${c}" provided for property "${r}".`,
+        `Must be one of: ${o.join(" | ")}.`,
+        `Falling back to default value: "${e}"`
+      ), this[i] = e), this.requestUpdate(r, z);
     }
   });
-}, 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)}
-`;
-var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, w = (i, t, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? B(t, n) : t, e = i.length - 1, a; e >= 0; e--)
-    (a = i[e]) && (o = (r ? a(t, n, o) : a(o)) || o);
-  return r && o && y(t, n, o), o;
+}, s = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 28,
+  xl: 32,
+  xxl: 40
+}, p = Object.keys(s), f = "xs", m = 8, d = 32;
+function L(t, o, e) {
+  const a = parseInt(t, 10), n = a % e === 0;
+  return a >= o && n;
+}
+const B = {
+  large: (t) => L(t, d, m),
+  regular: (t) => p.includes(t)
 };
-class s extends f {
+function w(t) {
+  const o = B.large(t);
+  return { isValid: o, size: o ? t : d };
+}
+function $(t) {
+  const o = B.regular(t), e = o ? s[t] : s[f];
+  return { isValid: o, size: e };
+}
+const h = (t, o, e, a) => {
+  const n = t.endsWith("Large") || t.endsWith("-large");
+  let r, i;
+  if (e) {
+    if ({ isValid: r, size: i } = n ? w(e) : $(e), !r) {
+      const c = n ? `Invalid prop "size" value supplied to "${a}". The prop value should be a number equal or greater than ${d} and multiple of ${m}.` : `Invalid prop "size" value supplied to "${a}". The prop value should be one of the following values: ${p.join(", ")}.`;
+      console.error(c);
+    }
+  } else
+    i = n ? d : s[f];
+  return {
+    class: [t, o].filter(Boolean).join(" "),
+    width: i,
+    height: i
+  };
+}, y = document.createElement("template");
+y.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--closeLarge"><path d="m23.42 24.663 1.242-1.243L17.234 16l7.428-7.429-1.242-1.233L16 14.766 8.57 7.338 7.337 8.57 14.767 16l-7.43 7.42 1.234 1.242L16 17.235l7.42 7.428Z"></path></svg>';
+class k extends HTMLElement {
   constructor() {
-    super(...arguments), this.propKeyValues = "";
+    super();
+    const o = y.content.cloneNode(!0);
+    this.root = this.attachShadow({ mode: "open" }), this.root.append(o);
   }
-  // Renders a string such as 'size: small, isFullWidth: true'
-  // as HTML such as:
-  // <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((t) => {
-      const [n, r] = t.split(":");
-      return d`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${r}</code></p>`;
-    });
+  static get observedAttributes() {
+    return ["size"];
   }
-  // eslint-disable-next-line class-methods-use-this
-  render() {
-    return d`
-            <div class="c-webComponentTestWrapper">
-                ${this._renderPropKeyValues()}
-                <div class="c-webComponentTestWrapper-slot">
-                    <slot></slot>
-                </div>
-            </div>`;
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(o) {
+    this.setAttribute("size", o);
+  }
+  get class() {
+    return this.getAttribute("class");
+  }
+  set class(o) {
+    this.setAttribute("class", o);
+  }
+  connectedCallback() {
+    const o = this.root.querySelector("svg"), e = h("c-pieIcon c-pieIcon--closeLarge", "", null, "IconCloseLarge");
+    o.setAttribute("width", e.width), o.setAttribute("height", e.height), this.setAttribute("class", "c-pieIcon c-pieIcon--closeLarge"), this.root.append(o);
+  }
+  attributeChangedCallback(o, e, a) {
+    const n = this.root.querySelector("svg");
+    let r;
+    o === "size" && (r = h("c-pieIcon c-pieIcon--closeLarge", "", a, "IconCloseLarge"), n.setAttribute("width", r.width), n.setAttribute("height", r.height), this.root.append(n));
   }
 }
-s.styles = u(m);
-w([
-  l({ type: String })
-], s.prototype, "propKeyValues", 2);
-const p = "web-component-test-wrapper";
-customElements.get(p) || customElements.define(p, s);
-const x = `.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-dimension: 48px;--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);--btn-icon-size: 24px;min-block-size:var(--btn-dimension);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-dimension)}}.o-iconBtn:focus-visible{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.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}.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}
-`, $ = [
-  "xsmall",
-  "small",
-  "medium",
-  "large"
-], z = [
-  "primary",
-  "secondary",
-  "outline",
-  "ghost",
-  "ghost-tertiary"
-];
-var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, v = (i, t, n, r) => {
-  for (var o = r > 1 ? void 0 : r ? _(t, n) : t, e = i.length - 1, a; e >= 0; e--)
-    (a = i[e]) && (o = (r ? a(t, n, o) : a(o)) || o);
-  return r && o && P(t, n, o), o;
+customElements.define("icon-close-large", k);
+const A = `.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-dimension: 48px;--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);--btn-icon-size: 24px;min-block-size:var(--btn-dimension);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-dimension)}}.o-iconBtn:focus-visible{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.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-secondary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]: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-secondary]: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-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-secondary] .o-iconBtn{outline:none;border:none}.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}
+`, P = ["xsmall", "small", "medium", "large"], j = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
+var C = Object.defineProperty, M = Object.getOwnPropertyDescriptor, u = (t, o, e, a) => {
+  for (var n = a > 1 ? void 0 : a ? M(o, e) : o, r = t.length - 1, i; r >= 0; r--)
+    (i = t[r]) && (n = (a ? i(o, e, n) : i(n)) || n);
+  return a && n && C(o, e, n), n;
 };
 const b = "pie-icon-button";
-class c extends f {
+class l extends x {
   constructor() {
     super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
   }
   render() {
     const {
-      disabled: t,
-      size: n,
-      variant: r
+      disabled: o,
+      size: e,
+      variant: a
     } = this;
-    return d`
+    return S`
             <button
                 class="o-iconBtn"
-                size=${n}
-                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>
+                size=${e}
+                variant=${a}
+                ?disabled=${o}>
+                <icon-close-large />
             </button>`;
   }
 }
-c.styles = u(x);
-v([
-  l(),
-  h(b, $, "medium")
-], c.prototype, "size", 2);
-v([
-  l(),
-  h(b, z, "primary")
-], c.prototype, "variant", 2);
-v([
-  l({ type: Boolean })
-], c.prototype, "disabled", 2);
-customElements.define(b, c);
+l.styles = I(A);
+u([
+  v(),
+  g(b, P, "medium")
+], l.prototype, "size", 2);
+u([
+  v(),
+  g(b, j, "primary")
+], l.prototype, "variant", 2);
+u([
+  v({ type: Boolean })
+], l.prototype, "disabled", 2);
+customElements.define(b, l);
 export {
-  c as PieIconButton,
-  $ as iconButtonSizes,
-  z as iconButtonVariants
+  k as IconCloseLarge,
+  l as PieIconButton,
+  P as sizes,
+  j as variants
 };

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

@@ -1,26 +1,20 @@
+export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
+export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
 export interface IconButtonProps {
     /**
-     * the size of the icon button.
-     * @default medium
+     * (Optional) What size the button should be.
+     * @default "medium"
      */
-    size: 'xsmall' | 'small' | 'medium' | 'large';
+    size: typeof sizes[number];
     /**
-     * the variant of the icon button.
-     * @default primary
+     * (Optional) What style variant the button should be such as primary, outline or ghost.
+     * @default "primary"
      */
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-tertiary';
+    variant: typeof variants[number];
     /**
-     * If `true`, the icon button will be disabled.
+     * (Optional) When true, the button element is disabled.
      * @default false
      */
-    disabled?: boolean;
+    disabled: boolean;
 }
-/**
- * Icon Button size variants
- */
-export declare const iconButtonSizes: IconButtonProps['size'][];
-/**
- * Icon Button style variants
- */
-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,MAAM,WAAW,eAAe;IAC5B;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9C;;;OAGG;IACH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,gBAAgB,CAAC;IAC1E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,eAAe,CAAC,MAAM,CAAC,EAKpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,SAAS,CAAC,EAM1D,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,iDAAkD,CAAC;AACrE,eAAO,MAAM,QAAQ,0EAA2E,CAAC;AAEjG,MAAM,WAAW,eAAe;IAC5B;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;CACrB"}

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

@@ -1,6 +1,8 @@
 import { LitElement } from 'lit';
-import { IconButtonProps, iconButtonSizes, iconButtonVariants } from './defs';
-export { type IconButtonProps, iconButtonSizes, iconButtonVariants };
+import { IconCloseLarge } from '@justeattakeaway/pie-icons-webc';
+import { IconButtonProps, sizes, variants } from './defs';
+export { type IconButtonProps, sizes, variants };
+export { IconCloseLarge };
 declare const componentSelector = "pie-icon-button";
 export declare class PieIconButton extends LitElement {
     size: IconButtonProps['size'];

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;AAKlD,OAAO,EACH,eAAe,EAAE,eAAe,EAAE,kBAAkB,EACvD,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAErE,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAY;IAIzC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAErB,MAAM;IAmBN,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;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EACH,eAAe,EAAE,KAAK,EAAE,QAAQ,EACnC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAY;IAIzC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAErB,MAAM;IAiBN,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.6.0",
+  "version": "0.7.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",
@@ -18,6 +18,9 @@
   "devDependencies": {
     "@justeattakeaway/pie-webc-core": "workspace:*"
   },
+  "dependencies": {
+    "@justeattakeaway/pie-icons-webc": "workspace:*"
+  },
   "volta": {
     "extends": "../../../package.json"
   }

package/src/defs.ts

@@ -1,38 +1,20 @@
+export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
+export const variants = ['primary', 'secondary', 'outline', 'ghost', 'ghost-secondary'] as const;
+
 export interface IconButtonProps {
     /**
-     * the size of the icon button.
-     * @default medium
+     * (Optional) What size the button should be.
+     * @default "medium"
      */
-    size: 'xsmall' | 'small' | 'medium' | 'large';
+    size: typeof sizes[number];
     /**
-     * the variant of the icon button.
-     * @default primary
+     * (Optional) What style variant the button should be such as primary, outline or ghost.
+     * @default "primary"
      */
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'ghost-tertiary';
+    variant: typeof variants[number];
     /**
-     * If `true`, the icon button will be disabled.
+     * (Optional) When true, the button element is disabled.
      * @default false
      */
-    disabled?: boolean;
+    disabled: boolean;
 }
-
-/**
- * Icon Button size variants
- */
-export const iconButtonSizes: IconButtonProps['size'][] = [
-    'xsmall',
-    'small',
-    'medium',
-    'large'
-];
-
-/**
- * Icon Button style variants
- */
-export const iconButtonVariants: IconButtonProps['variant'][] = [
-    'primary',
-    'secondary',
-    'outline',
-    'ghost',
-    'ghost-tertiary',
-];

package/src/iconButton.scss

@@ -86,9 +86,9 @@
         @include button-interactive-states('--dt-color-container-default');
     }
 
-    &[variant='ghost-tertiary'] {
+    &[variant='ghost-secondary'] {
         --btn-bg-color: var(--dt-color-container-default);
-        --btn-icon-fill: var(--dt-color-content-interactive-tertiary);
+        --btn-icon-fill: var(--dt-color-content-interactive-secondary);
 
         @include button-interactive-states('--dt-color-container-default');
     }
@@ -110,7 +110,7 @@
     }
 
     &[disabled][variant='ghost'],
-    &[disabled][variant='ghost-tertiary'] {
+    &[disabled][variant='ghost-secondary'] {
         --btn-bg-color: transparent;
         --btn-icon-fill: var(--dt-color-content-default);
 

package/src/index.ts

@@ -1,24 +1,26 @@
 import { LitElement, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { IconCloseLarge } from '@justeattakeaway/pie-icons-webc';
 
 import styles from './iconButton.scss?inline';
 import {
-    IconButtonProps, iconButtonSizes, iconButtonVariants,
+    IconButtonProps, sizes, variants,
 } from './defs';
 
 // Valid values available to consumers
-export { type IconButtonProps, iconButtonSizes, iconButtonVariants };
+export { type IconButtonProps, sizes, variants };
+export { IconCloseLarge };
 
 const componentSelector = 'pie-icon-button';
 
 export class PieIconButton extends LitElement {
     @property()
-    @validPropertyValues(componentSelector, iconButtonSizes, 'medium')
+    @validPropertyValues(componentSelector, sizes, 'medium')
         size: IconButtonProps['size'] = 'medium';
 
     @property()
-    @validPropertyValues(componentSelector, iconButtonVariants, 'primary')
+    @validPropertyValues(componentSelector, variants, 'primary')
         variant: IconButtonProps['variant'] = 'primary';
 
     @property({ type: Boolean })
@@ -36,9 +38,7 @@ export class PieIconButton extends LitElement {
                 size=${size}
                 variant=${variant}
                 ?disabled=${disabled}>
-                <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>
+                <icon-close-large />
             </button>`;
     }
 

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

@@ -2,15 +2,15 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
 import AxeBuilder from '@axe-core/playwright';
 import type {
     PropObject, WebComponentPropValues,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
 import { PieIconButton } from '@/index';
-import { iconButtonVariants } from '@/defs';
+import { variants } from '@/defs';
 
 const props: PropObject = {
-    variant: iconButtonVariants,
+    variant: variants,
     disabled: [true, false],
 };
 

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

@@ -1,24 +1,23 @@
 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';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
 import {
     createTestWebComponent,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
 import {
     WebComponentTestWrapper,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieIconButton } from '@/index';
-import { iconButtonSizes, iconButtonVariants } from '@/defs';
+import { sizes, variants } from '@/defs';
 
 const props: PropObject = {
-    size: iconButtonSizes,
-    variant: iconButtonVariants,
+    size: sizes,
+    variant: variants,
     disabled: [true, false],
 };
 
@@ -31,13 +30,17 @@ const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
 // This ensures the component is registered in the DOM for each test
 // This is not required if your tests mount the web component directly in the tests
-test('Component registered in the DOM', async ({ mount }) => {
+test.beforeEach(async ({ page, mount }) => {
     await mount(
         PieIconButton,
-        {
-            props: {},
-        },
+        {},
     );
+
+    // Removing the element so it's not present in the tests (but is still registered in the DOM)
+    await page.evaluate(() => {
+        const element : Element | null = document.querySelector('pie-icon-button');
+        element?.remove();
+    });
 });
 
 componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
@@ -50,11 +53,11 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
             {
                 props: { propKeyValues },
                 slots: {
-                    default: testComponent.renderedString,
+                    component: testComponent.renderedString,
                 },
             },
         );
     }));
 
-    await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`, getLitPercyOptions());
+    await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`);
 }));