@justeattakeaway/pie-icon-button 0.8.0 → 0.10.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[13:51:03] @custom-elements-manifest/analyzer: Created new manifest.
+[12:18:20 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 886 modules transformed.
+✓ 22 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   8.63 kB │ gzip:  2.50 kB
+dist/index.js   6.06 kB │ gzip:  1.52 kB
 dist/react.js  59.03 kB │ gzip: 15.92 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 5.30s
-[vite:dts] Declaration files built in 3770ms.
-
+
+[vite:dts] Start generate declaration files...
+✓ built in 15.39s
+[vite:dts] Declaration files built in 14191ms.
+

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @justeattakeaway/pie-icon-button
 
+## 0.10.0
+
+### Minor Changes
+
+- [Changed] - expose icon-button size css variables for consumers ([#627](https://github.com/justeattakeaway/pie/pull/627)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 0.9.0
+
+### Minor Changes
+
+- [Changed] - Added slot info the the readme and peerDep added ([#604](https://github.com/justeattakeaway/pie/pull/604)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [Changed] - Ensure component implements it's props interface ([#611](https://github.com/justeattakeaway/pie/pull/611)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Fixed] - Added IconClose to Visual tests and modal ([#604](https://github.com/justeattakeaway/pie/pull/604)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [Added] - Slot added to pie-icon-button ([#604](https://github.com/justeattakeaway/pie/pull/604)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -65,6 +65,31 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button';
 import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
 ```
 
+## Importing Icons
+
+We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE iconset as importable web components and are built to work alongside our other PIE components.
+
+`pie-icon-button` provides a slot into which you can pass your chosen icon, and it will automatically size it to the correct dimensions depending on the `size` of the `pie-icon-button` component.
+
+### Importing an icon with `pie-icons-webc`
+
+To import an icon using `pie-icons-webc`, you should import the icon that you would like to use alongside the `pie-icon-button` component:
+
+```js
+import { PieIconButton } from '@justeattakeaway/pie-icon-button';
+import '@justeattakeaway/pie-icons-webc/icons/IconClose';
+```
+
+Then, in your markup, you would implement the component like this:
+
+```html
+<pie-icon-button><icon-close /></pie-icon-button>
+```
+
+> **Warning**
+> Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as `<icon-close size="xl" />`).
+> These size props will have no effect when used alongside the `pie-icon-button` component, as the icon is resized with respect to the size of the `pie-icon-button`.
+
 
 ## Props
 
@@ -74,14 +99,14 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
 | 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:
+In your HTML markup or JSX, you can then use these to set the properties for the `pie-icon-button` component, like so:
 
 ```html
 <!-- Native HTML -->
-<pie-icon-button size='medium' type='button' variant='primary'>Click me!</pie-icon-button>
+<pie-icon-button size='small' type='button' variant='secondary'><icon-close /></pie-icon-button>
 
 <!-- JSX -->
-<PieIconButton size='medium' type='button' variant='primary'>Click me!</PieIconButton>
+<PieIconButton size='small' type='button' variant='secondary'><icon-close /></PieIconButton>
 ```
 
 ## Events
@@ -95,21 +120,21 @@ For example, to add a click handler in various templates:
 
 ```html
 <!-- Other attributes omitted for clarity -->
-<pie-icon-button onclick="e => console.log(e)">Click me!</pie-icon-button>
+<pie-icon-button onclick="e => console.log(e)"><icon-close /></pie-icon-button>
 ```
 
 ### Vue templates (using Nuxt 3)
 
 ```html
 <!-- Other attributes omitted for clarity -->
-<pie-icon-button @click="handleClick">Click me!</pie-icon-button>
+<pie-icon-button @click="handleClick"><icon-close /></pie-icon-button>
 ```
 
 ### React templates (using Next 13)
 
 ```html
 <!-- Other attributes omitted for clarity -->
-<PieIconButton onClick={handleClick}>increment</PieIconButton>
+<PieIconButton onClick={handleClick}><icon-close /></PieIconButton>
 
 ```
 

package/dist/index.js

@@ -1,138 +1,64 @@
-import { unsafeCSS as I, LitElement as x, html as S } from "lit";
-import { property as v } from "lit/decorators.js";
+import { unsafeCSS as h, LitElement as f, html as p } from "lit";
+import { property as d } from "lit/decorators.js";
 import "lit/decorators/property.js";
-const g = (t, o, e) => function(n, r) {
-  const i = `#${r}`;
-  Object.defineProperty(n, r, {
+const b = (i, o, n) => function(t, r) {
+  const a = `#${r}`;
+  Object.defineProperty(t, r, {
     get() {
-      return this[i];
+      return this[a];
     },
-    set(c) {
-      const z = this[i];
-      o.includes(c) ? this[i] = c : (console.error(
-        `<${t}> Invalid value "${c}" provided for property "${r}".`,
+    set(l) {
+      const u = this[a];
+      o.includes(l) ? this[a] = l : (console.error(
+        `<${i}> Invalid value "${l}" provided for property "${r}".`,
         `Must be one of: ${o.join(" | ")}.`,
-        `Falling back to default value: "${e}"`
-      ), this[i] = e), this.requestUpdate(r, z);
+        `Falling back to default value: "${n}"`
+      ), this[a] = n), this.requestUpdate(r, u);
     }
   });
-}, 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)
-};
-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();
-    const o = y.content.cloneNode(!0);
-    this.root = this.attachShadow({ mode: "open" }), this.root.append(o);
-  }
-  static get observedAttributes() {
-    return ["size"];
-  }
-  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));
-  }
-}
-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;
+}, 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);--btn-focus: var(--dt-color-focus-outer);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);color:var(--btn-icon-fill);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[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) !important;--btn-icon-fill: var(--dt-color-content-disabled) !important}.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}
+`, m = ["xsmall", "small", "medium", "large"], B = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (i, o, n, e) => {
+  for (var t = e > 1 ? void 0 : e ? x(o, n) : o, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (t = (e ? a(o, n, t) : a(t)) || t);
+  return e && t && y(o, n, t), t;
 };
-const b = "pie-icon-button";
-class l extends x {
+const v = "pie-icon-button";
+class c extends f {
   constructor() {
     super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
   }
   render() {
     const {
       disabled: o,
-      size: e,
-      variant: a
+      size: n,
+      variant: e
     } = this;
-    return S`
+    return p`
             <button
                 class="o-iconBtn"
-                size=${e}
-                variant=${a}
+                size=${n}
+                variant=${e}
                 ?disabled=${o}>
-                <icon-close-large />
+                <slot></slot>
             </button>`;
   }
 }
-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);
+c.styles = h(g);
+s([
+  d(),
+  b(v, m, "medium")
+], c.prototype, "size", 2);
+s([
+  d(),
+  b(v, B, "primary")
+], c.prototype, "variant", 2);
+s([
+  d({ type: Boolean })
+], c.prototype, "disabled", 2);
+customElements.define(v, c);
 export {
-  k as IconCloseLarge,
-  l as PieIconButton,
-  P as sizes,
-  j as variants
+  c as PieIconButton,
+  m as sizes,
+  B as variants
 };

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

@@ -1,10 +1,8 @@
 import { LitElement } from 'lit';
-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 {
+export declare class PieIconButton extends LitElement implements IconButtonProps {
     size: IconButtonProps['size'];
     variant: IconButtonProps['variant'];
     disabled: boolean;

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,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;IAGlC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAY;IAIzC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAExB,MAAM;IAiBN,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;AAKlD,OAAO,EACH,eAAe,EAAE,KAAK,EAAE,QAAQ,EACnC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAW,YAAW,eAAe;IAG7D,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAY;IAIzC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAa;IAGhD,QAAQ,UAAS;IAExB,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/dist/types/packages/components/pie-icon-button/src/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAG9D,eAAO,MAAM,aAAa,qEAMxB,CAAC"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D,eAAO,MAAM,aAAa,qEAMxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",
@@ -16,10 +16,11 @@
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@justeattakeaway/pie-icons-webc": "workspace:*",
     "@justeattakeaway/pie-webc-core": "workspace:*"
   },
-  "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "workspace:*"
+  "peerDependencies": {
+    "pie-design-tokens": "5.3.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/iconButton.scss

@@ -8,22 +8,24 @@
     }
 }
 
+// Normally we don't expect consumers to override these, but there are situations where it may be necessary
+:host {
+    // The base values are set to the size default, which is for the medium button size
+    --btn-dimension: 48px;
+    // Sizing is set to Medium button icon size, as that is the default
+    --btn-icon-size: 24px;
+}
+
 // Base button styles
 .o-iconBtn {
     --btn-border-radius: var(--dt-radius-rounded-e);
 
-    // The base values are set to the size default, which is for the medium button size
-    --btn-dimension: 48px;
-
     // The following values set to default background and color
     // currently this sets the primary button styles
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-icon-fill: var(--dt-color-content-interactive-primary);
     --btn-focus: var(--dt-color-focus-outer);
 
-    // Sizing is set to Medium button icon size, as that is the default
-    --btn-icon-size: 24px;
-
     min-block-size: var(--btn-dimension);
     aspect-ratio: 1 / 1;
 
@@ -35,6 +37,7 @@
     border-radius: var(--btn-border-radius);
     outline: none;
     background-color: var(--btn-bg-color);
+    color: var(--btn-icon-fill);
     cursor: pointer;
     user-select: none;
 
@@ -52,11 +55,6 @@
         width: var(--btn-icon-size);
     }
 
-    svg,
-    path {
-        fill: var(--btn-icon-fill);
-    }
-
     &[variant='primary'] {
         @include button-interactive-states('--dt-color-interactive-brand');
     }
@@ -94,8 +92,8 @@
     }
 
     &[disabled] {
-        --btn-bg-color: var(--dt-color-disabled-01);
-        --btn-icon-fill: var(--dt-color-content-disabled);
+        --btn-bg-color: var(--dt-color-disabled-01) !important;
+        --btn-icon-fill: var(--dt-color-content-disabled) !important;
 
         & .o-iconBtn {
             border: 1px solid var(--dt-color-disabled-01);

package/src/index.ts

@@ -1,7 +1,6 @@
 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 {
@@ -10,11 +9,10 @@ import {
 
 // Valid values available to consumers
 export { type IconButtonProps, sizes, variants };
-export { IconCloseLarge };
 
 const componentSelector = 'pie-icon-button';
 
-export class PieIconButton extends LitElement {
+export class PieIconButton extends LitElement implements IconButtonProps {
     @property()
     @validPropertyValues(componentSelector, sizes, 'medium')
     public size: IconButtonProps['size'] = 'medium';
@@ -38,7 +36,7 @@ export class PieIconButton extends LitElement {
                 size=${size}
                 variant=${variant}
                 ?disabled=${disabled}>
-                <icon-close-large />
+                <slot></slot>
             </button>`;
     }
 

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

@@ -13,6 +13,7 @@ import {
     WebComponentTestWrapper,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieIconButton } from '@/index';
+
 import { sizes, variants } from '@/defs';
 
 const props: PropObject = {
@@ -21,8 +22,14 @@ const props: PropObject = {
     disabled: [true, false],
 };
 
+// TODO: Currently setting the slot to use a straight up SVG
+//       This should be updated to use pie-icons-webc, but after some investigation, we think that we'll
+//       need to convert the webc icons to use Lit, as currently the components don't work well in a Node env like Playwright
+//       Atm, importing them like `import '@justeattakeaway/pie-icons-webc/icons/IconClose.js';` results in an `HTMLElement is not defined` error
+const closeSVG = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--close"><path d="M11.868 3.205 8 7.072 4.133 3.205l-.928.927L7.073 8l-3.868 3.867.928.928L8 8.927l3.868 3.868.927-.928L8.928 8l3.867-3.868-.927-.927Z"></path></svg>';
+
 // Renders a <pie-icon-button> HTML string with the given prop values
-const renderTestPieIconButton = (propVals: WebComponentPropValues) => `<pie-icon-button size="${propVals.size}" variant="${propVals.variant}" ${propVals.disabled ? 'disabled' : ''}></pie-icon-button>`;
+const renderTestPieIconButton = (propVals: WebComponentPropValues) => `<pie-icon-button size="${propVals.size}" variant="${propVals.variant}" ${propVals.disabled ? 'disabled' : ''}>${closeSVG}</pie-icon-button>`;
 
 const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
 const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');