@justeattakeaway/pie-icon-button 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[7:49:27 AM] @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.1 building for production...
+vite v4.2.3 building for production...
 transforming...
-✓ 19 modules transformed.
+✓ 28 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   6.20 kB │ gzip:  1.70 kB
+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 14.76s
-[vite:dts] Declaration files built in 13749ms.
+✓ built in 30.04s
+[vite:dts] Declaration files built in 27657ms.
 

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+- [Changed] - Refactor visual tests to have labels showing props ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - component and a11y browser tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - percy visual tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+### Patch Changes
+
+- [Changed] - Use `componentSelector` to define the custom element ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -11,3 +11,34 @@
 ## `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.
+
+## Testing
+
+### Browser tests
+
+Run at the root of the monorepo:
+```
+yarn test:browsers --filter=pie-icon-button
+```
+
+### Visual tests
+
+Run at the root of the monorepo:
+```
+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:
+
+```
+export PERCY_TOKEN_PIE_ICON_BUTTON=abcde
+```
+
+Setup via package.json:
+
+Under scripts `test:visual` replace the environment variable with the below:
+
+```
+PERCY_TOKEN_PIE_ICON_BUTTON=abcde

package/dist/index.js

@@ -1,59 +1,103 @@
-import { unsafeCSS as b, LitElement as h, html as u } from "lit";
+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 f = (o, r, e) => function(c, t) {
-  const n = `#${t}`;
-  Object.defineProperty(c, t, {
+const g = (c, t, r) => function(n, o) {
+  const e = `#${o}`;
+  Object.defineProperty(n, o, {
     get() {
-      return this[n];
+      return this[e];
     },
     set(a) {
-      const v = this[n];
-      r.includes(a) ? this[n] = a : (console.error(
-        `<${o}> Invalid value "${a}" provided for property "${t}".`,
-        `Must be one of: ${r.join(" | ")}.`,
-        `Falling back to default value: "${e}"`
-      ), this[n] = e), this.requestUpdate(t, v);
+      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);
     }
   });
-};
-var i = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o.GHOST_TERTIARY = "ghost-tertiary", o))(i || {});
-const g = `:host{--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)}.o-iconBtn{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)}:host([variant=primary]) .o-iconBtn: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)))}:host([variant=primary]) .o-iconBtn: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)))}:host([variant=secondary]){--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}:host([variant=secondary]) .o-iconBtn: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)))}:host([variant=secondary]) .o-iconBtn: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)))}:host([variant=outline]){--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}:host([variant=outline]) .o-iconBtn{border:1px solid var(--dt-color-border-strong)}:host([variant=outline]) .o-iconBtn: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)))}:host([variant=outline]) .o-iconBtn: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)))}:host([variant=ghost]){--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}:host([variant=ghost]) .o-iconBtn: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)))}:host([variant=ghost]) .o-iconBtn: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)))}:host([variant=ghost-tertiary]){--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-tertiary)}:host([variant=ghost-tertiary]) .o-iconBtn: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)))}:host([variant=ghost-tertiary]) .o-iconBtn: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)))}:host([disabled]){--btn-bg-color: var(--dt-color-disabled-01);--btn-icon-fill: var(--dt-color-content-disabled)}:host([disabled]) .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}:host([disabled][variant=outline]) .o-iconBtn{outline:none}:host([disabled][variant=ghost]),:host([disabled][variant=ghost-tertiary]){--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}:host([disabled][variant=ghost]) .o-iconBtn,:host([disabled][variant=ghost-tertiary]) .o-iconBtn{outline:none;border:none}
+}, 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 p = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (o, r, e, c) => {
-  for (var t = c > 1 ? void 0 : c ? y(r, e) : r, n = o.length - 1, a; n >= 0; n--)
-    (a = o[n]) && (t = (c ? a(r, e, t) : a(t)) || t);
-  return c && t && p(r, e, t), t;
+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 s extends p {
+  constructor() {
+    super(...arguments), this.propKeyValues = "";
+  }
+  // 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 [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 l`
+            <div class="c-webComponentTestWrapper">
+                ${this._renderPropKeyValues()}
+                <div class="c-webComponentTestWrapper-slot">
+                    <slot></slot>
+                </div>
+            </div>`;
+  }
+}
+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}
+`, 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 B = "pie-icon-button";
-class l extends h {
+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
+      disabled: t,
+      variant: r
     } = this;
-    return u`
+    return l`
             <button
                 class="o-iconBtn"
-                ?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 = b(g);
-s([
+i.styles = b($);
+u([
   d(),
-  f(B, Object.values(i), i.PRIMARY)
-], l.prototype, "variant", 2);
-s([
+  g(h, x, "primary")
+], i.prototype, "variant", 2);
+u([
   d({ type: Boolean })
-], l.prototype, "disabled", 2);
-customElements.define("pie-icon-button", l);
+], 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;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;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,20 +1,21 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "yarn build:wrapper pie-icon-button && run -T vite build --config ../../../configs/pie-components-config/vite.config.js",
-    "watch": "run -T vite build --config ../../../configs/pie-components-config/vite.config.js --watch",
+    "build": "yarn build:wrapper pie-icon-button && run -T vite build",
+    "watch": "run -T vite build --watch",
     "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test"
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
   },
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
-  "dependencies": {
+  "devDependencies": {
     "@justeattakeaway/pie-webc-core": "workspace:*"
   },
   "volta": {

package/playwright/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <style>
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
+            font-weight: 400;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
+            font-weight: 700;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
+            font-weight: 800;
+            font-display: swap;
+        }
+        body {
+            font-feature-settings: "tnum"; /* Enable tabular numbers */
+        }
+        /* basic styles to center align components and give them some spacing */
+        #root {
+            padding: 1em;
+        }
+
+        #root > * {
+            display: block;
+            margin-inline: auto;
+        }
+
+        #root > * + * {
+            margin-top: 1em;
+        }
+    </style>
+    <title>Testing Page</title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+</body>
+</html>

package/playwright/index.ts

@@ -0,0 +1 @@
+//Import common styles here

package/playwright-lit-visual.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+
+// @ts-ignore
+export default defineConfig(getPlaywrightVisualConfig());

package/playwright-lit.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
+
+// @ts-ignore
+export default defineConfig(getPlaywrightConfig());

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/iconButton.scss

@@ -1,4 +1,15 @@
-:host {
+@mixin button-interactive-states($bg-color) {
+    &:hover:not(:disabled) {
+        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
+    }
+
+    &:active:not(:disabled) {
+        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
+    }
+}
+
+// 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
@@ -10,20 +21,7 @@
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-icon-fill: var(--dt-color-content-interactive-primary);
     --btn-focus: var(--dt-color-focus-outer);
-}
-
-@mixin button-interactive-states($bg-color) {
-    & .o-iconBtn:hover:not(:disabled) {
-        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
-    }
-
-    & .o-iconBtn:active:not(:disabled) {
-        background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
-    }
-}
 
-// Base button styles
-.o-iconBtn {
     min-block-size: var(--btn-height);
     aspect-ratio: 1 / 1;
 
@@ -55,68 +53,68 @@
     svg, path {
         fill: var(--btn-icon-fill);
     }
-}
 
-// Variants
-:host([variant='primary']) {
-    @include button-interactive-states('--dt-color-interactive-brand');
-}
+    &[variant='primary'] {
+        @include button-interactive-states('--dt-color-interactive-brand');
+    }
 
-:host([variant='secondary']) {
-    --btn-bg-color: var(--dt-color-interactive-secondary);
-    --btn-icon-fill: var(--dt-color-content-interactive-secondary);
+    &[variant='secondary'] {
+        --btn-bg-color: var(--dt-color-interactive-secondary);
+        --btn-icon-fill: var(--dt-color-content-interactive-secondary);
 
-    @include button-interactive-states('--dt-color-interactive-secondary');
-}
+        @include button-interactive-states('--dt-color-interactive-secondary');
+    }
 
-:host([variant='outline']) {
-    --btn-bg-color: var(--dt-color-container-default);
-    --btn-icon-fill: var(--dt-color-content-interactive-brand);
+    &[variant='outline'] {
+        --btn-bg-color: var(--dt-color-container-default);
+        --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
-    & .o-iconBtn {
-        border: 1px solid var(--dt-color-border-strong);
-    }
+        & .o-iconBtn {
+            border: 1px solid var(--dt-color-border-strong);
+        }
 
-    @include button-interactive-states('--dt-color-container-default');
-}
+        @include button-interactive-states('--dt-color-container-default');
+    }
 
-:host([variant='ghost']) {
-    --btn-bg-color: var(--dt-color-container-default);
-    --btn-icon-fill: var(--dt-color-content-interactive-brand);
+    &[variant='ghost'] {
+        --btn-bg-color: var(--dt-color-container-default);
+        --btn-icon-fill: var(--dt-color-content-interactive-brand);
 
-    @include button-interactive-states('--dt-color-container-default');
-}
+        @include button-interactive-states('--dt-color-container-default');
+    }
 
-:host([variant='ghost-tertiary']) {
-    --btn-bg-color: var(--dt-color-container-default);
-    --btn-icon-fill: var(--dt-color-content-interactive-tertiary);
+    &[variant='ghost-tertiary'] {
+        --btn-bg-color: var(--dt-color-container-default);
+        --btn-icon-fill: var(--dt-color-content-interactive-tertiary);
 
-    @include button-interactive-states('--dt-color-container-default');
-}
+        @include button-interactive-states('--dt-color-container-default');
+    }
 
-:host([disabled]) {
-    --btn-bg-color: var(--dt-color-disabled-01);
-    --btn-icon-fill: var(--dt-color-content-disabled);
+    &[disabled] {
+        --btn-bg-color: var(--dt-color-disabled-01);
+        --btn-icon-fill: var(--dt-color-content-disabled);
 
-    & .o-iconBtn {
-        border: 1px solid var(--dt-color-disabled-01);
-        cursor: not-allowed;
+        & .o-iconBtn {
+            border: 1px solid var(--dt-color-disabled-01);
+            cursor: not-allowed;
+        }
     }
-}
 
-:host([disabled][variant='outline']) {
-    & .o-iconBtn {
-        outline: none;
+    &[disabled][variant='outline'] {
+        & .o-iconBtn {
+            outline: none;
+        }
     }
-}
 
-:host([disabled][variant='ghost']),
-:host([disabled][variant='ghost-tertiary']) {
-    --btn-bg-color: transparent;
-    --btn-icon-fill: var(--dt-color-content-default);
+    &[disabled][variant='ghost'],
+    &[disabled][variant='ghost-tertiary'] {
+        --btn-bg-color: transparent;
+        --btn-icon-fill: var(--dt-color-content-default);
 
-    & .o-iconBtn {
-        outline: none;
-        border: none;
+        & .o-iconBtn {
+            outline: none;
+            border: none;
+        }
     }
 }
+

package/src/index.ts

@@ -1,31 +1,32 @@
 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;
 
     render () {
         const {
-            disabled,
+            disabled, variant,
         } = this;
 
         // The inline SVG is temporary until we have a proper icon integration
         return html`
             <button
                 class="o-iconBtn"
+                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"/>
@@ -37,7 +38,7 @@ export class PieIconButton extends LitElement {
     static styles = unsafeCSS(styles);
 }
 
-customElements.define('pie-icon-button', PieIconButton);
+customElements.define(componentSelector, PieIconButton);
 
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,37 @@
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import AxeBuilder from '@axe-core/playwright';
+import {
+    PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+import { PieIconButton } from '@/index';
+import { iconButtonVariants } from '@/defs';
+
+const props: PropObject = {
+    variant: iconButtonVariants,
+    disabled: [true, false],
+};
+
+const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
+const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
+const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
+
+componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
+    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: Combination) => {
+        await mount(
+            PieIconButton,
+            {
+                props: { ...combo },
+                slots: {
+                    default: 'Hello world',
+                },
+            },
+        );
+    }));
+
+    const results = await new AxeBuilder.default({ page })
+        .withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
+        .disableRules(['color-contrast', 'color-contrast-enhanced'])
+        .analyze();
+
+    expect(results.violations).toEqual([]);
+}));

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

@@ -0,0 +1,24 @@
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import { PieIconButton } from '@/index';
+
+test('should correctly work with native click events', async ({ mount }) => {
+    const messages: string[] = [];
+    const expectedEventMessage = 'Native event dispatched';
+    const component = await mount(
+        PieIconButton,
+        {
+            props: {
+                variant: 'primary',
+            },
+            on: {
+                click: () => {
+                    messages.push(expectedEventMessage);
+                },
+            },
+        },
+    );
+
+    await component.click();
+
+    expect(messages).toEqual([expectedEventMessage]);
+});

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

@@ -0,0 +1,59 @@
+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';
+import {
+    getAllPropCombinations, splitCombinationsByPropertyValue,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+import {
+    createTestWebComponent,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
+import {
+    WebComponentTestWrapper,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+import { PieIconButton } from '@/index';
+import { iconButtonVariants } from '@/defs';
+
+const props: PropObject = {
+    variant: iconButtonVariants,
+    disabled: [true, false],
+};
+
+// Renders a <pie-icon-button> HTML string with the given prop values
+const renderTestPieIconButton = (propVals: WebComponentPropValues) => `<pie-icon-button variant="${propVals.variant}" ${propVals.disabled ? 'disabled' : ''}></pie-icon-button>`;
+
+const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
+const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
+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 }) => {
+    await mount(
+        PieIconButton,
+        {
+            props: {},
+        },
+    );
+});
+
+componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
+    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
+        const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieIconButton);
+        const propKeyValues = `disabled: ${testComponent.propValues.disabled}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    default: testComponent.renderedString,
+                },
+            },
+        );
+    }));
+
+    await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`, getLitPercyOptions());
+}));

package/vite.config.js

@@ -0,0 +1,3 @@
+import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; // eslint-disable-line import/no-extraneous-dependencies
+
+export default viteConfig;