@justeattakeaway/pie-button 0.10.1 → 0.11.0

package/.turbo/turbo-build.log

@@ -0,0 +1,11 @@
+vite v4.2.1 building for production...
+transforming...
+✓ 4 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.js  4.12 kB │ gzip: 1.65 kB
+
+[vite:dts] Start generate declaration files...
+✓ built in 8.92s
+[vite:dts] Declaration files built in 8276ms.
+

package/CHANGELOG.md

@@ -1,10 +1,32 @@
 # Changelog
 
+## 0.11.0
+
+### Minor Changes
+
+- [Changed] - Improved readme files ([#418](https://github.com/justeattakeaway/pie/pull/418)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - Refactor SCSS to reduce duplication ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - Copy playwright projects from monorepo root ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - Split small size into expressive and productive ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+### Patch Changes
+
+- [Removed] the custom decorator and uses the native `customElement` decorator instead ([#417](https://github.com/justeattakeaway/pie/pull/417)) by [@fernandofranca](https://github.com/fernandofranca)
+
+## 0.10.2
+
+### Patch Changes
+
+- [Added] Declare global statement back in. ([#393](https://github.com/justeattakeaway/pie/pull/393)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
 ## 0.10.1
 
 ### Patch Changes
 
-- [Fixed] - Added module entry for component
+- [Fixed] - Added module entry for component ([#378](https://github.com/justeattakeaway/pie/pull/378)) by [@ashleynolan](https://github.com/ashleynolan)
 
 ## 0.10.0
 

package/README.md

@@ -1,3 +1,13 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-button">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-button.svg">
+  </a>
+</p>
+
 # pie-button
 
 This button is a Web Component built using Lit.
@@ -24,3 +34,23 @@ Local dev server using Vite (with hot module reloading)
 ```
 yarn dev
 ```
+
+
+## Running tests
+
+### Browser tests
+
+Run at the root of the monorepo:
+```
+yarn test:browsers --filter=pie-button
+```
+
+### Visual tests
+
+Run at the root of the monorepo:
+```
+yarn test:visual --filter=pie-button
+```
+
+
+

package/dist/index.js

@@ -1,8 +1,8 @@
-import { unsafeCSS as f, LitElement as h, html as g } from "lit";
-import { classMap as m } from "lit/directives/class-map.js";
-import { property as u, customElement as v } from "lit/decorators.js";
-const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;font-weight:700;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{padding:6px 8px;min-height:32px;font-size:14px;line-height:20px}.o-btn--small{padding:8px 16px;min-height:40px;font-size:19px;line-height:28px}.o-btn--medium{padding:10px 24px;min-height:48px;font-size:20px;line-height:28px}.o-btn--large{padding:14px 24px;min-height:56px;font-size:20px;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active{background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active{background-color:#dcd4cd}.o-btn--outline{outline:1px solid #dbd9d7;background-color:#fff;color:#303d3f}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active{background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active{background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;outline:1px solid #efedea;cursor:default}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}
-`, p = (o, n) => function(i, t) {
+import { unsafeCSS as f, LitElement as g, html as h } from "lit";
+import { classMap as v } from "lit/directives/class-map.js";
+import { property as p, customElement as m } from "lit/decorators.js";
+const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{min-block-size:32px;padding:6px 8px;font-size:14px;font-weight:700;line-height:20px}.o-btn--small-productive{min-block-size:40px;padding:8px 16px;font-size:16px;font-weight:700;line-height:24px}.o-btn--small-expressive{min-block-size:40px;padding:6px 16px;font-size:20px;font-weight:700;line-height:28px}.o-btn--medium{min-block-size:48px;padding:10px 24px;font-size:20px;font-weight:700;line-height:28px}.o-btn--large{min-block-size:56px;padding:14px 24px;font-size:20px;font-weight:700;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active{background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active{background-color:#dcd4cd}.o-btn--outline{background-color:#fff;color:#303d3f;outline:1px solid #dbd9d7}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active{background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active{background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;outline:1px solid #efedea;cursor:default}.o-btn.o-btn--is-disabled:hover{background-color:#e6e3de}.o-btn.o-btn--is-disabled:active{background-color:#d5cfc7}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}
+`, u = (o, n) => function(i, t) {
   const e = `#${t}`;
   Object.defineProperty(i, t, {
     get() {
@@ -18,18 +18,12 @@ const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;fon
     }
   });
 };
-var a = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(a || {}), d = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(d || {}), b = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(b || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (o, n, i, t) => {
-  for (var e = t > 1 ? void 0 : t ? M(n, i) : n, r = o.length - 1, s; r >= 0; r--)
+var a = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL_EXPRESSIVE = "small-expressive", o.SMALL_PRODUCTIVE = "small-productive", o.MEDIUM = "medium", o.LARGE = "large", o))(a || {}), d = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(d || {}), b = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(b || {}), y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, c = (o, n, i, t) => {
+  for (var e = t > 1 ? void 0 : t ? k(n, i) : n, r = o.length - 1, s; r >= 0; r--)
     (s = o[r]) && (e = (t ? s(n, i, e) : s(e)) || e);
   return t && e && y(n, i, e), e;
 };
-function k(o) {
-  return (n) => {
-    if (!customElements.get(o))
-      return v(o)(n);
-  };
-}
-let l = class extends h {
+let l = class extends g {
   constructor() {
     super(...arguments), this.size = a.MEDIUM, this.type = d.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1;
   }
@@ -40,12 +34,12 @@ let l = class extends h {
       [`o-btn--${i}`]: i,
       "o-btn--is-disabled": t
     }, r = () => {
-      const s = new Event("CustomEvent");
+      const s = new CustomEvent("CustomEvent", { detail: "WC event dispatched" });
       console.info("WC event dispatched"), this.dispatchEvent(s);
     };
-    return g`
+    return h`
             <button
-                class=${m(e)}
+                class=${v(e)}
                 type=${n}
                 ?disabled=${t}
                 @click="${r}">
@@ -55,22 +49,22 @@ let l = class extends h {
 };
 l.styles = f(x);
 c([
-  u(),
-  p(Object.values(a), a.MEDIUM)
+  p(),
+  u(Object.values(a), a.MEDIUM)
 ], l.prototype, "size", 2);
 c([
-  u(),
-  p(Object.values(d), d.SUBMIT)
+  p(),
+  u(Object.values(d), d.SUBMIT)
 ], l.prototype, "type", 2);
 c([
-  u(),
-  p(Object.values(b), b.PRIMARY)
+  p(),
+  u(Object.values(b), b.PRIMARY)
 ], l.prototype, "variant", 2);
 c([
-  u({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], l.prototype, "disabled", 2);
 l = c([
-  k("pie-button")
+  m("pie-button")
 ], l);
 export {
   a as BUTTON_SIZE,

package/dist/types/src/defs.d.ts

@@ -3,7 +3,8 @@
  */
 export declare enum BUTTON_SIZE {
     XSMALL = "xsmall",
-    SMALL = "small",
+    SMALL_EXPRESSIVE = "small-expressive",
+    SMALL_PRODUCTIVE = "small-productive",
     MEDIUM = "medium",
     LARGE = "large"
 }

package/dist/types/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAClB;AAED;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAED;;GAEG;AACH,oBAAY,cAAc;IACtB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;CAClB"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,gBAAgB,qBAAqB;IACrC,gBAAgB,qBAAqB;IACrC,MAAM,WAAW;IACjB,KAAK,UAAU;CAClB;AAED;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAED;;GAEG;AACH,oBAAY,cAAc;IACtB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;CAClB"}

package/dist/types/src/index.d.ts

@@ -9,4 +9,9 @@ export declare class PieButton extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'pie-button': PieButton;
+    }
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/types/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;AAMlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAWpD,qBACa,SAAU,SAAQ,UAAU;IAGrC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,EAAG,OAAO,CAAS;IAE3B,MAAM;IA2BN,MAAM,CAAC,MAAM,0BAAqB;CACrC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAEpD,qBACa,SAAU,SAAQ,UAAU;IAGrC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,EAAG,OAAO,CAAS;IAE3B,MAAM;IA2BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -10,7 +10,11 @@
     "build": "run -T vite build",
     "watch": "run -T vite build --watch",
     "dev": "run -T vite",
-    "test": "echo \"Error: no test specified\" && exit 0"
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_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",

package/playwright/index.html

@@ -0,0 +1,49 @@
+<!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 */
+    }
+    #root {
+        padding: 1.5em;
+        display: flex;
+        gap: 1em;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+</style>
+    <title>Testing Page</title>
+  </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,52 @@
+import { defineConfig, devices } from '@sand4rt/experimental-ct-web';
+import { resolve } from 'path';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: '50%',
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [['html', { outputFolder: 'lit-visual-report' }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve('./src'),
+        },
+      },
+    },
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'visual:desktop',
+      grepInvert: /@mobile/,
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+      testMatch: ['**/test/visual/*.spec.ts']
+    },
+    {
+      name: 'visual:mobile',
+      grep: /@mobile/,
+      use: {
+        ...devices['Pixel 5'],
+      },
+      testMatch: ['**/test/visual/*.spec.ts']
+    },
+  ],
+});

package/playwright-lit.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@sand4rt/experimental-ct-web';
+import { resolve } from 'path';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: '50%',
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [['html', { outputFolder: 'lit-browsers-report' }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve('./src'),
+        },
+      },
+    },
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'component:chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+      testMatch: ['**/test/component/*.spec.ts']
+    },
+    {
+      name: 'a11y:chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+      testMatch: ['**/test/accessibility/*.spec.ts']
+    },
+  ],
+});

package/src/button.scss

@@ -1,110 +1,155 @@
 @use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
 
+$button-height-xs: 32px;
+$button-height-s: 40px;
+$button-height-m: 48px;
+$button-height-l: 56px;
+
+$button-border-radius: dt.$radius-rounded-e;
+$button-font: dt.$font-interactive-m-family;
+$button-focus: dt.$color-focus;
+
+$button-bg-color-primary: dt.$color-interactive-brand;
+$button-text-color-primary: dt.$color-content-interactive-primary;
+
+$button-bg-color-secondary: dt.$color-interactive-secondary;
+$button-text-color-secondary: dt.$color-content-interactive-secondary;
+
+$button-bg-color-outline: dt.$color-container-default;
+$button-text-color-outline: dt.$color-content-interactive-tertiary;
+$button-outline-color-outline: dt.$color-border-strong;
+
+$button-bg-color-ghost: dt.$color-container-default;
+$button-text-color-ghost: dt.$color-content-link;
+$button-disabled-bg-color-ghost: dt.$color-container-default;
+
+$button-bg-color-disabled: dt.$color-disabled-01;
+$button-text-color-disabled: dt.$color-content-disabled;
+$button-outline-color-disabled: dt.$color-disabled-01;
+
+// Sets up the size of a button such as xsmall or large
+@mixin button-sizing($min-block-size, $padding-block, $padding-inline, $font-size, $font-weight, $line-height) {
+    min-block-size: $min-block-size;
+    padding: $padding-block $padding-inline;
+    font-size: $font-size * 1px;
+    font-weight: $font-weight;
+    line-height: $line-height * 1px;
+}
+
+// 'Themes' a button for it's particular variant, such as primary, secondary, outline, ghost
+@mixin button-variant($bg-color, $text-color, $outline-color: null) {
+    background-color: $bg-color;
+    color: $text-color;
+
+    &:hover {
+        background-color: darken($bg-color, dt.$color-hover-01);
+    }
+
+    &:active {
+        background-color: darken($bg-color, dt.$color-active-01);
+    }
+
+    @if $outline-color != null {
+        outline: 1px solid $outline-color;
+    }
+}
+
+// Base button styles
 .o-btn {
-    border-radius: dt.$radius-rounded-e;
+    border-radius: $button-border-radius;
     border: none;
-    font-family: dt.$font-interactive-m-family;
-    font-weight: dt.$font-interactive-m-weight;
+    font-family: $button-font;
 
     cursor: pointer;
     user-select: none;
     outline: none;
 
     &:focus-visible {
-        outline: 2px solid dt.$color-focus;
+        outline: 2px solid $button-focus;
     }
 }
 
-.o-btn--xsmall {
-    padding: 6px dt.$spacing-b;
-    min-height: 32px;
-    font-size: dt.$font-size-14 * 1px;
-    line-height: dt.$font-size-14-line-height * 1px;
-}
-
-.o-btn--small {
-    padding: 8px dt.$spacing-d;
-    min-height: 40px;
-    font-size: dt.$font-size-19 * 1px;
-    line-height: dt.$font-size-19-line-height * 1px;
-}
-
-.o-btn--medium {
-    padding: 10px dt.$spacing-e;
-    min-height: 48px;
-    font-size: dt.$font-size-20 * 1px;
-    line-height: dt.$font-size-20-line-height * 1px;
-}
-
-.o-btn--large {
-    padding: 14px dt.$spacing-e;
-    min-height: 56px;
-    font-size: dt.$font-size-20 * 1px;
-    line-height: dt.$font-size-20-line-height * 1px;
+// Sizes
+$button-sizes: (
+    'xsmall': (
+        'min-block-size': $button-height-xs,
+        'padding-block': 6px,
+        'padding-inline': dt.$spacing-b,
+        'font-size': dt.$font-interactive-xs-size,
+        'font-weight': dt.$font-interactive-xs-weight,
+        'line-height': dt.$font-interactive-xs-line-height
+    ),
+    'small-productive': (
+        'min-block-size': $button-height-s,
+        'padding-block': dt.$spacing-b,
+        'padding-inline': dt.$spacing-d,
+        'font-size': dt.$font-interactive-s-size,
+        'font-weight': dt.$font-interactive-s-weight,
+        'line-height': dt.$font-interactive-s-line-height
+    ),
+    'small-expressive': (
+        'min-block-size': $button-height-s,
+        'padding-block': 6px,
+        'padding-inline': dt.$spacing-d,
+        'font-size': dt.$font-interactive-l-size,
+        'font-weight': dt.$font-interactive-l-weight,
+        'line-height': dt.$font-interactive-l-line-height
+    ),
+    'medium': (
+        'min-block-size': $button-height-m,
+        'padding-block': 10px,
+        'padding-inline': dt.$spacing-e,
+        'font-size': dt.$font-interactive-l-size,
+        'font-weight': dt.$font-interactive-l-weight,
+        'line-height': dt.$font-interactive-l-line-height
+    ),
+    'large': (
+        'min-block-size': $button-height-l,
+        'padding-block': 14px,
+        'padding-inline': dt.$spacing-e,
+        'font-size': dt.$font-interactive-l-size,
+        'font-weight': dt.$font-interactive-l-weight,
+        'line-height': dt.$font-interactive-l-line-height
+    )
+);
+
+@each $size, $values in $button-sizes {
+    .o-btn--#{$size} {
+        @include button-sizing(
+            map-get($values, 'min-block-size'),
+            map-get($values, 'padding-block'),
+            map-get($values, 'padding-inline'),
+            map-get($values, 'font-size'),
+            map-get($values, 'font-weight'),
+            map-get($values, 'line-height')
+        );
+    }
 }
 
+// Variants
 .o-btn--primary {
-    background-color: dt.$color-interactive-brand;
-    color: dt.$color-content-interactive-primary;
-
-    &:hover {
-        background-color: darken(dt.$color-interactive-brand, dt.$color-hover-01);
-    }
-
-    &:active {
-        background-color: darken(dt.$color-interactive-brand, dt.$color-active-01);
-    }
+    @include button-variant($button-bg-color-primary, $button-text-color-primary);
 }
 
 .o-btn--secondary {
-    background-color: dt.$color-interactive-secondary;
-    color: dt.$color-content-interactive-secondary;
-
-    &:hover {
-        background-color: darken(dt.$color-interactive-secondary, dt.$color-hover-01);
-    }
-
-    &:active {
-        background-color: darken(dt.$color-interactive-secondary, dt.$color-active-01);
-    }
+    @include button-variant($button-bg-color-secondary, $button-text-color-secondary);
 }
 
 .o-btn--outline {
-    outline: 1px solid dt.$color-border-strong;
-    background-color: dt.$color-container-default;
-    color: dt.$color-content-interactive-tertiary;
-
-    &:hover {
-        background-color: darken(dt.$color-container-default, dt.$color-hover-01);
-    }
-
-    &:active {
-        background-color: darken(dt.$color-container-default, dt.$color-active-01);
-    }
+    @include button-variant($button-bg-color-outline, $button-text-color-outline, $button-outline-color-outline);
 }
 
 .o-btn--ghost {
-    background-color: dt.$color-container-default;
-    color: dt.$color-content-link;
-
-    &:hover {
-        background-color: darken(dt.$color-container-default, dt.$color-hover-01);
-    }
-
-    &:active {
-        background-color: darken(dt.$color-container-default, dt.$color-active-01);
-    }
+    @include button-variant($button-bg-color-ghost, $button-text-color-ghost);
 }
 
 .o-btn.o-btn--is-disabled {
-    background-color: dt.$color-disabled-01;
-    color: dt.$color-content-disabled;
-    outline: 1px solid dt.$color-disabled-01;
+    @include button-variant($button-bg-color-disabled, $button-text-color-disabled, $button-outline-color-disabled);
 
     cursor: default;
 
     &.o-btn--ghost {
-        background-color: dt.$color-container-default;
+        background-color: $button-disabled-bg-color-ghost;
         outline: none;
     }
-}
+}

package/src/defs.ts

@@ -3,7 +3,8 @@
  */
 export enum BUTTON_SIZE {
     XSMALL = 'xsmall',
-    SMALL = 'small',
+    SMALL_EXPRESSIVE = 'small-expressive',
+    SMALL_PRODUCTIVE = 'small-productive',
     MEDIUM = 'medium',
     LARGE = 'large'
 }

package/src/index.ts

@@ -9,16 +9,7 @@ import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
 // Valid values available to consumers
 export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
 
-// TODO: Extract as a utility function in a shared package
-function defineCustomElement(elementName:string) {
-    return (elementClass:typeof LitElement) => {
-        if(customElements.get(elementName)) return;
-
-        return customElement(elementName)(elementClass);
-    }
-}
-
-@defineCustomElement('pie-button')
+@customElement('pie-button')
 export class PieButton extends LitElement {
     @property()
     @validPropertyValues(Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
@@ -46,7 +37,7 @@ export class PieButton extends LitElement {
         };
 
         const raiseWCEvent = () => {
-            const event = new Event('CustomEvent')
+            const event = new CustomEvent('CustomEvent', { detail: 'WC event dispatched' })
             console.info('WC event dispatched')
             this.dispatchEvent(event)
         }
@@ -64,3 +55,9 @@ export class PieButton extends LitElement {
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pie-button': PieButton;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import { PieButton } from '@/index';
+import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
+import AxeBuilder from '@axe-core/playwright';
+
+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, page }) => {
+
+    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!`
+            },
+          });
+      }
+    }
+
+    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-button.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import { PieButton } from '@/index';
+import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
+
+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 emit an event when clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(PieButton,
+    {
+      props: {
+        size: BUTTON_SIZE.LARGE,
+        variant: BUTTON_VARIANT.PRIMARY
+      },
+      slots: {
+        default: 'Click me!'
+      },
+      on: {
+        CustomEvent: (data: string) => messages.push(data),
+      },
+    });
+
+  await component.click();
+
+  expect(messages).toEqual(['WC event dispatched'])
+});

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

@@ -0,0 +1,31 @@
+import { test } from '@sand4rt/experimental-ct-web';
+import { PieButton } from '@/index';
+import percySnapshot from '@percy/playwright'
+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];
+
+variants.forEach(variant => {
+  test(`should render - ${variant}`, async ({ page, mount }) => {
+
+    for (const size of sizes) {
+      for (const isDisabled of disabledStates) {
+        await mount(PieButton,
+          {
+            props: {
+              type: BUTTON_TYPE.BUTTON,
+              size,
+              variant,
+              disabled: isDisabled
+            },
+            slots: {
+              default: `Hello, ${size} ${variant} Button!`
+            },
+          });
+      }
+    }
+    await percySnapshot(page, `PIE Button - ${variant}`);
+  });
+})

package/tsconfig.json

@@ -1,26 +1,30 @@
 {
-    "compilerOptions": {
-        "target": "ES6",
-        "module": "ES2022",
-        "lib": ["es2020", "DOM", "DOM.Iterable"],
-        "declaration": true,
-        "declarationMap": true,
-        "sourceMap": true,
-        "inlineSources": true,
-        "outDir": "./compiled",
-        "rootDir": "./src",
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "experimentalDecorators": true,
-        "forceConsistentCasingInFileNames": true
-    },
-    "include": ["src/**/*.ts","./declaration.d.ts"],
-    "exclude": []
-  }
+  "compilerOptions": {
+      "target": "ES6",
+      "module": "ES2022",
+      "lib": ["es2020", "DOM", "DOM.Iterable"],
+      "declaration": true,
+      "declarationMap": true,
+      "sourceMap": true,
+      "inlineSources": true,
+      "outDir": "./compiled",
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["./src/*"]
+      },
+      "rootDir": ".",
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noImplicitReturns": true,
+      "noFallthroughCasesInSwitch": true,
+      "noImplicitAny": true,
+      "noImplicitThis": true,
+      "moduleResolution": "node",
+      "allowSyntheticDefaultImports": true,
+      "experimentalDecorators": true,
+      "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts"],
+  "exclude": []
+}