@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

CHANGELOG.md

 # Changelog
 
+## 0.15.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)
+
+- [Changed] - use prop variant helper for simpler and more extensive visual 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] - 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.14.0
@@ -4,0 +22,0 @@

dist/index.js

@@ -1,47 +0,85 @@
-import { unsafeCSS as f, LitElement as g, html as m } from "lit";
+import { unsafeCSS as m, LitElement as y, html as u } from "lit";
 import { property as c } from "lit/decorators.js";
 import "lit/decorators/property.js";
-const u = (t, e, n) => function(a, o) {
-  const r = `#${o}`;
-  Object.defineProperty(a, o, {
+const h = (t, o, n) => function(e, r) {
+  const a = `#${r}`;
+  Object.defineProperty(e, r, {
     get() {
-      return this[r];
+      return this[a];
     },
     set(i) {
-      const p = this[r];
-      e.includes(i) ? this[r] = i : (console.error(
-        `<${t}> Invalid value "${i}" provided for property "${o}".`,
-        `Must be one of: ${e.join(" | ")}.`,
+      const x = this[a];
+      o.includes(i) ? this[a] = i : (console.error(
+        `<${t}> Invalid value "${i}" provided for property "${r}".`,
+        `Must be one of: ${o.join(" | ")}.`,
         `Falling back to default value: "${n}"`
-      ), this[r] = n), this.requestUpdate(o, p);
+      ), this[a] = n), this.requestUpdate(r, x);
     }
   });
-}, y = `.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}.o-btn[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-btn[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-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[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-btn[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-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary);border:1px solid var(--dt-color-border-strong)}.o-btn[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-btn[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-btn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}.o-btn[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-btn[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-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled);border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-btn[disabled][variant=ghost]{--btn-bg-color: var(--dt-color-container-default);outline:none}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small]{--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
+}, z = `.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 s = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL_EXPRESSIVE = "small-expressive", t.SMALL_PRODUCTIVE = "small-productive", t.MEDIUM = "medium", t.LARGE = "large", t))(s || {}), v = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(v || {}), b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(b || {}), x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (t, e, n, a) => {
-  for (var o = a > 1 ? void 0 : a ? z(e, n) : e, r = t.length - 1, i; r >= 0; r--)
-    (i = t[r]) && (o = (a ? i(e, n, o) : i(o)) || o);
-  return a && o && x(e, n, o), o;
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, M = (t, o, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? w(o, n) : o, a = t.length - 1, i; a >= 0; a--)
+    (i = t[a]) && (r = (e ? i(o, n, r) : i(r)) || r);
+  return e && r && $(o, n, r), r;
 };
-const h = "pie-button";
-class l extends g {
+class f extends y {
   constructor() {
-    super(...arguments), this.size = s.MEDIUM, this.type = v.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1, this.isFullWidth = !1;
+    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((o) => {
+      const [n, e] = o.split(":");
+      return u`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${e}</code></p>`;
+    });
+  }
+  // eslint-disable-next-line class-methods-use-this
   render() {
+    return u`
+            <div class="c-webComponentTestWrapper">
+                ${this._renderPropKeyValues()}
+                <div class="c-webComponentTestWrapper-slot">
+                    <slot></slot>
+                </div>
+            </div>`;
+  }
+}
+f.styles = m(z);
+M([
+  c({ type: String })
+], f.prototype, "propKeyValues", 2);
+const g = "web-component-test-wrapper";
+customElements.get(g) || customElements.define(g, f);
+const P = `.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}.o-btn[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-btn[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-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[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-btn[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-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary);border:1px solid var(--dt-color-border-strong)}.o-btn[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-btn[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-btn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}.o-btn[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-btn[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-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled);border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-btn[disabled][variant=ghost]{--btn-bg-color: var(--dt-color-container-default);outline:none}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small]{--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
+`;
+var d = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL_EXPRESSIVE = "small-expressive", t.SMALL_PRODUCTIVE = "small-productive", t.MEDIUM = "medium", t.LARGE = "large", t))(d || {}), v = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(v || {}), b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(b || {}), k = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (t, o, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? W(o, n) : o, a = t.length - 1, i; a >= 0; a--)
+    (i = t[a]) && (r = (e ? i(o, n, r) : i(r)) || r);
+  return e && r && k(o, n, r), r;
+};
+const p = "pie-button";
+class l extends y {
+  constructor() {
+    super(...arguments), this.size = d.MEDIUM, this.type = v.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1, this.isFullWidth = !1;
+  }
+  render() {
     const {
-      type: e,
+      type: o,
       disabled: n,
-      isFullWidth: a,
-      variant: o,
-      size: r
+      isFullWidth: e,
+      variant: r,
+      size: a
     } = this;
-    return m`
+    return u`
             <button
                 class="o-btn"
-                type=${e}
-                variant=${o}
-                size=${r}
+                type=${o}
+                variant=${r}
+                size=${a}
                 ?disabled=${n}
-                ?isFullWidth=${a}>
+                ?isFullWidth=${e}>
                 <slot></slot>
@@ -51,24 +89,24 @@ </button>`;
 }
-l.styles = f(y);
-d([
+l.styles = m(P);
+s([
   c(),
-  u(h, Object.values(s), s.MEDIUM)
+  h(p, Object.values(d), d.MEDIUM)
 ], l.prototype, "size", 2);
-d([
+s([
   c(),
-  u(h, Object.values(v), v.SUBMIT)
+  h(p, Object.values(v), v.SUBMIT)
 ], l.prototype, "type", 2);
-d([
+s([
   c(),
-  u(h, Object.values(b), b.PRIMARY)
+  h(p, Object.values(b), b.PRIMARY)
 ], l.prototype, "variant", 2);
-d([
+s([
   c({ type: Boolean })
 ], l.prototype, "disabled", 2);
-d([
+s([
   c({ type: Boolean })
 ], l.prototype, "isFullWidth", 2);
-customElements.define("pie-button", l);
+customElements.define(p, l);
 export {
-  s as BUTTON_SIZE,
+  d as BUTTON_SIZE,
   v as BUTTON_TYPE,
@@ -75,0 +113,0 @@ b as BUTTON_VARIANT,

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "PIE design system button built using web components",
@@ -10,6 +10,6 @@ "type": "module",
   "scripts": {
-    "build": "yarn build:wrapper pie-button && run -T vite build --config ../../../configs/pie-components-config/vite.config.js",
+    "build": "yarn build:wrapper pie-button && run -T vite build ",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
-    "watch": "run -T vite build --config ../../../configs/pie-components-config/vite.config.js --watch",
+    "watch": "run -T vite build --watch",
     "test": "echo \"Error: no test specified\" && exit 0",
@@ -24,8 +24,6 @@ "test:ci": "yarn test",
   "license": "Apache-2.0",
-  "dependencies": {
-    "@justeattakeaway/pie-webc-core": "workspace:*"
-  },
   "devDependencies": {
     "@justeat/pie-design-tokens": "5.1.0",
-    "@justeattakeaway/pie-components-config": "workspace:*"
+    "@justeattakeaway/pie-components-config": "workspace:*",
+    "@justeattakeaway/pie-webc-core": "workspace:*"
   },
@@ -32,0 +30,0 @@ "volta": {

README.md

@@ -131,1 +131,16 @@ <p align="center">
 ```
+
+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_BUTTON=abcde
+```
+
+Setup via package.json:
+
+Under scripts `test:visual` replace the environment variable with the below:
+
+```
+PERCY_TOKEN_PIE_BUTTON=abcde

src/index.ts

@@ -53,3 +53,3 @@ import { LitElement, html, unsafeCSS } from 'lit';
 
-customElements.define('pie-button', PieButton);
+customElements.define(componentSelector, PieButton);
 
@@ -56,0 +56,0 @@ declare global {

test/accessibility/pie-button.spec.ts

 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 { PieButton } from '@/index';
-import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
-import AxeBuilder from '@axe-core/playwright';
+import { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
 
-const sizes = Object.values(BUTTON_SIZE);
-const variants = Object.values(BUTTON_VARIANT);
-const disabledStates = [true, false];
+const props: PropObject = {
+    variant: Object.values(BUTTON_VARIANT),
+    size: Object.values(BUTTON_SIZE),
+    type: BUTTON_TYPE.BUTTON, // Changing the type does not affect the appearance of the button
+    isFullWidth: [true, false],
+    disabled: [true, false],
+};
 
-variants.forEach(variant => {
-  test(`should render - ${variant}`, async ({ mount, page }) => {
+const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
+const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
+const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
-    for (const size of sizes) {
-      for (const isDisabled of disabledStates) {
-        const component = await mount(PieButton,
-          {
-            props: {
-              size,
-              variant,
-              disabled: isDisabled
+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(
+            PieButton,
+            {
+                props: { ...combo },
+                slots: {
+                    default: 'Hello world',
+                },
             },
-            slots: {
-              default: `Hello, ${size} ${variant} Button!`
-            },
-          });
-      }
-    }
+        );
+    }));
 
     const results = await new AxeBuilder.default({ page })
-    .withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
-    .disableRules(['color-contrast', 'color-contrast-enhanced'])
-    .analyze();
+        .withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
+        .disableRules(['color-contrast', 'color-contrast-enhanced'])
+        .analyze();
 
     expect(results.violations).toEqual([]);
-  });
-})
+}));

test/component/pie-button.spec.ts

@@ -5,30 +5,2 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
 
-const sizes = Object.values(BUTTON_SIZE);
-const variants = Object.values(BUTTON_VARIANT);
-const disabledStates = [true, false];
-
-variants.forEach((variant) => {
-    test(`should render - ${variant}`, async ({ mount }) => {
-        for (const size of sizes) {
-            for (const isDisabled of disabledStates) {
-                const component = await mount(
-                    PieButton,
-                    {
-                        props: {
-                            size,
-                            variant,
-                            disabled: isDisabled,
-                        },
-                        slots: {
-                            default: `Hello, ${size} ${variant} Button!`,
-                        },
-                    },
-                );
-
-                await expect(component).toContainText(`Hello, ${size} ${variant} Button!`);
-            }
-        }
-    });
-});
-
 test('should correctly work with native click events', async ({ mount }) => {
@@ -35,0 +7,0 @@ const messages: string[] = [];

test/visual/pie-button.spec.ts

 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
+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 { PieButton } from '@/index';
 import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from '@/defs';
 
-const sizes = Object.values(BUTTON_SIZE);
-const variants = Object.values(BUTTON_VARIANT);
-const disabledStates = [true, false];
+const props: PropObject = {
+    variant: Object.values(BUTTON_VARIANT),
+    size: Object.values(BUTTON_SIZE),
+    type: BUTTON_TYPE.BUTTON, // Changing the type does not affect the appearance of the button
+    isFullWidth: [true, false],
+    disabled: [true, false],
+};
 
-variants.forEach((variant) => {
-    test(`should render - ${variant}`, async ({ page, mount }) => {
-        for (const size of sizes) {
-            for (const disabledState of disabledStates) {
-                await mount(
-                    PieButton,
-                    {
-                        props: {
-                            type: BUTTON_TYPE.BUTTON,
-                            size,
-                            variant,
-                            disabled: disabledState,
-                            isFullWidth: false,
-                        },
-                        slots: {
-                            default: `Hello, ${size} ${variant} Button!`,
-                        },
-                    },
-                );
-            }
+// Renders a <pie-button> HTML string with the given prop values
+const renderTestPieButton = (propVals: WebComponentPropValues) => `<pie-button variant="${propVals.variant}" size="${propVals.size}" type="${propVals.type}" ${propVals.isFullWidth ? 'isFullWidth' : ''} ${propVals.disabled ? 'disabled' : ''}>Hello world</pie-button>`;
 
-            for (const disabledState of disabledStates) {
-                await mount(
-                    PieButton,
-                    {
-                        props: {
-                            type: BUTTON_TYPE.BUTTON,
-                            size,
-                            variant,
-                            disabled: disabledState,
-                            isFullWidth: true,
-                        },
-                        slots: {
-                            default: `Hello, ${size} ${variant} Button!`,
-                        },
-                    },
-                );
-            }
-        }
+const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
+const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
+const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
-        await percySnapshot(page, `PIE Button - ${variant}`);
-    });
+// 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(
+        PieButton,
+        {
+            props: {},
+            slots: {},
+        },
+    );
 });
+
+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, renderTestPieButton);
+        const propKeyValues = `size: ${testComponent.propValues.size}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: { propKeyValues },
+                slots: {
+                    default: testComponent.renderedString.trim(),
+                },
+            },
+        );
+    }));
+
+    await percySnapshot(page, `PIE Button - Variant: ${variant}`);
+}));

No alert changes

Improved metrics

Total package byte prevSize

101878

increased by4.1%

Dependency count

0

decreased by-100%

Number of package files

28

increased by3.7%

Lines of code

2008

increased by1.41%

Number of lines in readme file

146

increased by11.45%

Worsened metrics

Dev dependency count

3

increased by50%

Dependency changes

• - Removed@justeattakeaway/pie-webc-core@workspace:*