@justeattakeaway/pie-button 0.16.1 → 0.17.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[2:38:37 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[11:00:50 AM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 28 modules transformed.
+✓ 22 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   7.96 kB │ gzip:  2.10 kB
+dist/index.js   7.09 kB │ gzip:  1.77 kB
 dist/react.js  59.01 kB │ gzip: 15.91 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 22.93s
-[vite:dts] Declaration files built in 21054ms.
+✓ built in 13.54s
+[vite:dts] Declaration files built in 12277ms.
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.17.0
+
+### Minor Changes
+
+- [Changed] - Styles updated to fully match design updates ([#581](https://github.com/justeattakeaway/pie/pull/581)) by [@ashleynolan](https://github.com/ashleynolan)
+
+  - Focus styles have been updated to the new style
+  - Padding, font-size and line-heights adjusted inline with designs
+  - Outline button text colour updated from `color-content-interactive-tertiary` to `color-content-interactive-secondary`
+  - Primary buttons at `xsmall` and `small-productive` now have darker background
+  - `ghost` variant background colour changed to `transparent` (rather than #fff)
+
 ## 0.16.1
 
 ### Patch Changes

package/README.md

@@ -65,13 +65,13 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 
 ## Props
 
-| Property    | Type      | Default         | Description                                                                                                    |
-|-------------|-----------|-----------------|----------------------------------------------------------------------------------------------------------------|
-| size        | `String`  | `medium`        | Size of the button, one of `buttonSizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
-| type        | `String`  | `submit`        | Type of the button, one of `buttonTypes` – `submit`, `button`, `reset`, `menu`                                 |
-| variant     | `String`  | `primary`       | Variant of the button, one of `buttonVariants`– `primary`, `secondary`, `outline`, `ghost`                     |
-| disabled    | `Boolean` | `false`         | If `true`, disables the button.                                                                                |
-| isFullWidth | `Boolean` | `false`         | If `true`, sets the button width to 100% of it's container.                                                    |
+| Property    | Type      | Default         | Description                                                          |
+|-------------|-----------|-----------------|----------------------------------------------------------------------|
+| size        | `String`  | `medium`        | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` |
+| type        | `String`  | `submit`        | Type of the button, one of `types` – `submit`, `button`, `reset`, `menu` |
+| variant     | `String`  | `primary`       | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost` |
+| disabled    | `Boolean` | `false`         | If `true`, disables the button.                                      |
+| isFullWidth | `Boolean` | `false`         | If `true`, sets the button width to 100% of it's container.                            |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
 
@@ -111,7 +111,6 @@ For example, to add a click handler in various templates:
 
 ```
 
-
 ## Testing
 
 ### Browser tests

package/dist/index.js

@@ -1,130 +1,76 @@
-import { unsafeCSS as h, LitElement as f, html as v } from "lit";
+import { unsafeCSS as h, LitElement as u, html as m } from "lit";
 import { property as c } from "lit/decorators.js";
 import "lit/decorators/property.js";
-const b = (i, o, e) => function(r, t) {
-  const n = `#${t}`;
-  Object.defineProperty(r, t, {
+const b = (l, o, a) => function(t, r) {
+  const e = `#${r}`;
+  Object.defineProperty(t, r, {
     get() {
-      return this[n];
+      return this[e];
     },
-    set(a) {
-      const g = this[n];
-      o.includes(a) ? this[n] = a : (console.error(
-        `<${i}> Invalid value "${a}" provided for property "${t}".`,
+    set(v) {
+      const p = this[e];
+      o.includes(v) ? this[e] = v : (console.error(
+        `<${l}> Invalid value "${v}" provided for property "${r}".`,
         `Must be one of: ${o.join(" | ")}.`,
-        `Falling back to default value: "${e}"`
-      ), this[n] = e), this.requestUpdate(t, g);
+        `Falling back to default value: "${a}"`
+      ), this[e] = a), this.requestUpdate(r, p);
     }
   });
-}, m = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
-`;
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, z = (i, o, e, r) => {
-  for (var t = r > 1 ? void 0 : r ? x(o, e) : o, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
-  return r && t && y(o, e, t), t;
+}, f = `.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);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{box-shadow:0 0 0 2px var(--dt-color-focus-inner);outline:none;position:relative}.o-btn:focus-visible:after{content:"";display:block;position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:var(--btn-border-radius);box-shadow:0 0 0 2px var(--dt-color-focus-outer)}.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=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-primary-h),var(--dt-color-interactive-primary-s),calc(var(--dt-color-interactive-primary-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-secondary);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: transparent;--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-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--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-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
+`, g = ["xsmall", "small-productive", "small-expressive", "medium", "large"], y = ["submit", "button", "reset", "menu"], x = ["primary", "secondary", "outline", "ghost"];
+var z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (l, o, a, n) => {
+  for (var t = n > 1 ? void 0 : n ? k(o, a) : o, r = l.length - 1, e; r >= 0; r--)
+    (e = l[r]) && (t = (n ? e(o, a, t) : e(t)) || t);
+  return n && t && z(o, a, t), t;
 };
-class p extends f {
-  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((o) => {
-      const [e, r] = o.split(":");
-      return v`<p class="c-webComponentTestWrapper-label"><b>${e}</b>: <code>${r}</code></p>`;
-    });
-  }
-  // eslint-disable-next-line class-methods-use-this
-  render() {
-    return v`
-            <div class="c-webComponentTestWrapper">
-                ${this._renderPropKeyValues()}
-                <div class="c-webComponentTestWrapper-slot">
-                    <slot></slot>
-                </div>
-            </div>`;
-  }
-}
-p.styles = h(m);
-z([
-  c({ type: String })
-], p.prototype, "propKeyValues", 2);
-const u = "web-component-test-wrapper";
-customElements.get(u) || customElements.define(u, p);
-const $ = `.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)}
-`, w = [
-  "xsmall",
-  "small-expressive",
-  "small-productive",
-  "medium",
-  "large"
-], k = [
-  "primary",
-  "secondary",
-  "outline",
-  "ghost"
-], P = [
-  "submit",
-  "button",
-  "reset",
-  "menu"
-];
-var _ = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (i, o, e, r) => {
-  for (var t = r > 1 ? void 0 : r ? W(o, e) : o, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (t = (r ? a(o, e, t) : a(t)) || t);
-  return r && t && _(o, e, t), t;
-};
-const d = "pie-button";
-class l extends f {
+const s = "pie-button";
+class i extends u {
   constructor() {
     super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.disabled = !1, this.isFullWidth = !1;
   }
   render() {
     const {
       type: o,
-      disabled: e,
-      isFullWidth: r,
+      disabled: a,
+      isFullWidth: n,
       variant: t,
-      size: n
+      size: r
     } = this;
-    return v`
+    return m`
             <button
                 class="o-btn"
                 type=${o}
                 variant=${t}
-                size=${n}
-                ?disabled=${e}
-                ?isFullWidth=${r}>
+                size=${r}
+                ?disabled=${a}
+                ?isFullWidth=${n}>
                 <slot></slot>
             </button>`;
   }
 }
-l.styles = h($);
-s([
+i.styles = h(f);
+d([
   c(),
-  b(d, w, "medium")
-], l.prototype, "size", 2);
-s([
+  b(s, g, "medium")
+], i.prototype, "size", 2);
+d([
   c(),
-  b(d, P, "submit")
-], l.prototype, "type", 2);
-s([
+  b(s, y, "submit")
+], i.prototype, "type", 2);
+d([
   c(),
-  b(d, k, "primary")
-], l.prototype, "variant", 2);
-s([
+  b(s, x, "primary")
+], i.prototype, "variant", 2);
+d([
   c({ type: Boolean })
-], l.prototype, "disabled", 2);
-s([
+], i.prototype, "disabled", 2);
+d([
   c({ type: Boolean })
-], l.prototype, "isFullWidth", 2);
-customElements.define(d, l);
+], i.prototype, "isFullWidth", 2);
+customElements.define(s, i);
 export {
-  l as PieButton,
-  w as buttonSizes,
-  P as buttonTypes,
-  k as buttonVariants
+  i as PieButton,
+  g as sizes,
+  y as types,
+  x as variants
 };

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

@@ -1,40 +1,31 @@
+export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
+export declare const types: readonly ["submit", "button", "reset", "menu"];
+export declare const variants: readonly ["primary", "secondary", "outline", "ghost"];
 export interface ButtonProps {
     /**
-     * the size of the button.
-     * @default medium
+     * (Optional) What size the button should be.
+     * @default "medium"
      */
-    size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
+    size: typeof sizes[number];
     /**
-     * The html button type to use.
-     * @default submit
+     * (Optional) What type attribute should be applied to the button. For example submit, button or menu.
+     * @default "submit"
      */
-    type: 'submit' | 'button' | 'reset' | 'menu';
+    type: typeof types[number];
     /**
-     * the variant of the button.
-     * @default primary
+     * (Optional) What style variant the button should be such as primary, outline or ghost.
+     * @default "primary"
      */
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    variant: typeof variants[number];
     /**
-     * If `true`, the button will be disabled.
+     * (Optional) When true, the button element is disabled.
      * @default false
      */
     disabled: boolean;
     /**
-     * If `true`, the button will span the full width.
+     * (Optional) When true, the button element will occupy the full width of its container.
      * @default false
      */
     isFullWidth: boolean;
 }
-/**
- * Button size variants
- */
-export declare const buttonSizes: Array<ButtonProps['size']>;
-/**
- * Button style variants
- */
-export declare const buttonVariants: Array<ButtonProps['variant']>;
-/**
- * Button type variants
- */
-export declare const buttonTypes: Array<ButtonProps['type']>;
 //# sourceMappingURL=defs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IACxB;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9E;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C;;;OAGG;IACH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACvD;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAMlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAKxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAKlD,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,uDAAwD,CAAC;AAE9E,MAAM,WAAW,WAAW;IACxB;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;;OAGG;IACH,OAAO,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IACjC;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;CACxB"}

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { ButtonProps, buttonSizes, buttonTypes, buttonVariants } from './defs';
-export { type ButtonProps, buttonSizes, buttonTypes, buttonVariants, };
+import { ButtonProps, sizes, types, variants } from './defs';
+export { type ButtonProps, sizes, types, variants, };
 declare const componentSelector = "pie-button";
 export declare class PieButton extends LitElement {
     size: ButtonProps['size'];

package/dist/types/packages/components/pie-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;AAIlD,OAAO,EACH,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EACxD,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,WAAW,EACX,WAAW,EACX,cAAc,GACjB,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC,qBAAa,SAAU,SAAQ,UAAU;IAGjC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAExB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",

package/src/button.scss

@@ -28,7 +28,6 @@
     // currently this sets the primary button styles
     --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);
@@ -45,13 +44,59 @@
     user-select: none;
 
     &:focus-visible {
-        // TODO - Need to update to use the latest focus styling
-        outline: 2px solid var(--btn-focus);
+        /*
+        TODO: This focus styling should be extracted out into a shared mixin to share among other components
+        Applying both shadows in a single declaration gives anti-aliasing artefacts.
+        box-shadow: 0 0 0 2px dt.$color-focus-inner, 0 0 0 4px dt.$color-focus-outer;
+
+        To prevent this, they should be separated so they don't bleed into each other,
+        i.e., one shadow on the element and another on a pseudo element like :after
+        */
+        box-shadow: 0 0 0 2px var(--dt-color-focus-inner);
+        outline: none;
+
+        /*
+        Setting the position to relative prevents the pseudo-element from
+        anchoring instead to the nearest ancestor with a specified position.
+
+        You can override this if you need another value.
+        */
+        position: relative;
+
+        &:after {
+            content: '';
+            display: block;
+
+            /*
+            The pseudo element has to be larger than the element itself, but not just by
+            2px (the thickness of the inner shadow), it has to be 1px larger than that to
+            account for the border thickness.
+            */
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            right: -3px;
+            bottom: -3px;
+            border-radius: var(--btn-border-radius);
+
+            box-shadow: 0 0 0 2px var(--dt-color-focus-outer);
+        }
     }
 
     // Variant
     &[variant='primary'] {
         @include button-interactive-states('--dt-color-interactive-brand');
+
+        &[size='xsmall'],
+        &[size='small-productive'] {
+            /**
+            * Where the font-size is smaller,
+            * update the button backgrounds so that the text is accessible
+            **/
+            --btn-bg-color: var(--dt-color-interactive-primary);
+
+            @include button-interactive-states('--dt-color-interactive-primary');
+        }
     }
 
     &[variant='secondary'] {
@@ -63,7 +108,7 @@
 
     &[variant='outline'] {
         --btn-bg-color: var(--dt-color-container-default);
-        --btn-text-color: var(--dt-color-content-interactive-tertiary);
+        --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         border: 1px solid var(--dt-color-border-strong);
 
@@ -71,7 +116,7 @@
     }
 
     &[variant='ghost'] {
-        --btn-bg-color: var(--dt-color-container-default);
+        --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-link);
 
         @include button-interactive-states('--dt-color-container-default');
@@ -83,31 +128,37 @@
     }
 
     &[disabled] {
-        --btn-bg-color: var(--dt-color-disabled-01);
-        --btn-text-color: var(--dt-color-content-disabled);
+        --btn-text-color: var(--dt-color-content-disabled) !important;
 
-        border: 1px solid var(--dt-color-disabled-01);
         cursor: not-allowed;
-    }
 
-    &[disabled][variant='ghost'] {
-        --btn-bg-color: var(--dt-color-container-default);
+        // For every variant except ghost, set the disabled background color
+        &:not([variant='ghost']) {
+            --btn-bg-color: var(--dt-color-disabled-01) !important;
+        }
 
-        outline: none;
+        // For outline variants, set the border to the disabled color
+        &[variant='outline'] {
+            border-color: var(--dt-color-disabled-01) !important;
+        }
     }
 
     &[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);
     }
 
-    &[size='small'] {
+    &[size='small-expressive'] {
+        --btn-padding: 6px var(--dt-spacing-d);
+        --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+        --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+    }
+
+    &[size='small-productive'] {
         --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);
+        --btn-font-size: calc(var(--dt-font-size-16) * 1px);
+        --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
     }
 
     &[size='medium'] {
@@ -116,7 +167,6 @@
 
     &[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);
     }

package/src/defs.ts

@@ -1,58 +1,31 @@
+export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
+export const types = ['submit', 'button', 'reset', 'menu'] as const;
+export const variants = ['primary', 'secondary', 'outline', 'ghost'] as const;
+
 export interface ButtonProps {
     /**
-     * the size of the button.
-     * @default medium
+     * (Optional) What size the button should be.
+     * @default "medium"
      */
-    size: 'xsmall' | 'small-expressive' | 'small-productive' | 'medium' | 'large';
+    size: typeof sizes[number];
     /**
-     * The html button type to use.
-     * @default submit
+     * (Optional) What type attribute should be applied to the button. For example submit, button or menu.
+     * @default "submit"
      */
-    type: 'submit' | 'button' | 'reset' | 'menu';
+    type: typeof types[number];
     /**
-     * the variant of the button.
-     * @default primary
+     * (Optional) What style variant the button should be such as primary, outline or ghost.
+     * @default "primary"
      */
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    variant: typeof variants[number];
     /**
-     * If `true`, the button will be disabled.
+     * (Optional) When true, the button element is disabled.
      * @default false
      */
     disabled: boolean;
     /**
-     * If `true`, the button will span the full width.
+     * (Optional) When true, the button element will occupy the full width of its container.
      * @default false
      */
     isFullWidth: boolean;
 }
-
-/**
- * Button size variants
- */
-export const buttonSizes: Array<ButtonProps['size']> = [
-    'xsmall',
-    'small-expressive',
-    'small-productive',
-    'medium',
-    'large'
-];
-
-/**
- * Button style variants
- */
-export const buttonVariants: Array<ButtonProps['variant']> = [
-    'primary',
-    'secondary',
-    'outline',
-    'ghost',
-];
-
-/**
- * Button type variants
- */
-export const buttonTypes: Array<ButtonProps['type']> = [
-    'submit',
-    'button',
-    'reset',
-    'menu',
-];

package/src/index.ts

@@ -3,30 +3,30 @@ import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './button.scss?inline';
 import {
-    ButtonProps, buttonSizes, buttonTypes, buttonVariants,
+    ButtonProps, sizes, types, variants,
 } from './defs';
 
 // Valid values available to consumers
 export {
     type ButtonProps,
-    buttonSizes,
-    buttonTypes,
-    buttonVariants,
+    sizes,
+    types,
+    variants,
 };
 
 const componentSelector = 'pie-button';
 
 export class PieButton extends LitElement {
     @property()
-    @validPropertyValues(componentSelector, buttonSizes, 'medium')
+    @validPropertyValues(componentSelector, sizes, 'medium')
         size: ButtonProps['size'] = 'medium';
 
     @property()
-    @validPropertyValues(componentSelector, buttonTypes, 'submit')
+    @validPropertyValues(componentSelector, types, 'submit')
         type: ButtonProps['type'] = 'submit';
 
     @property()
-    @validPropertyValues(componentSelector, buttonVariants, 'primary')
+    @validPropertyValues(componentSelector, variants, 'primary')
         variant: ButtonProps['variant'] = 'primary';
 
     @property({ type: Boolean })

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

@@ -1,13 +1,13 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import AxeBuilder from '@axe-core/playwright';
-import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
-import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
+import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
+import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import { PieButton } from '@/index';
-import { buttonSizes, buttonVariants } from '@/defs';
+import { sizes, variants } from '@/defs';
 
 const props: PropObject = {
-    variant: buttonVariants,
-    size: buttonSizes,
+    variant: variants,
+    size: sizes,
     type: 'button', // Changing the type does not affect the appearance of the button
     isFullWidth: [true, false],
     disabled: [true, false],

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

@@ -1,24 +1,23 @@
 import { test } from '@sand4rt/experimental-ct-web';
-import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
 import percySnapshot from '@percy/playwright';
 import type {
     PropObject, WebComponentPropValues, WebComponentTestInput,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
 import {
     getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
 import {
     createTestWebComponent,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
 import {
     WebComponentTestWrapper,
-} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { PieButton } from '@/index';
-import { buttonSizes, buttonVariants } from '@/defs';
+import { sizes, variants } from '@/defs';
 
 const props: PropObject = {
-    variant: buttonVariants,
-    size: buttonSizes,
+    variant: variants,
+    size: sizes,
     type: 'button', // Changing the type does not affect the appearance of the button
     isFullWidth: [true, false],
     disabled: [true, false],
@@ -33,14 +32,17 @@ const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
 
 // This ensures the component is registered in the DOM for each test
 // This is not required if your tests mount the web component directly in the tests
-test('Component registered in the DOM', async ({ mount }) => {
+test.beforeEach(async ({ page, mount }) => {
     await mount(
         PieButton,
-        {
-            props: {},
-            slots: {},
-        },
+        {},
     );
+
+    // Removing the element so it's not present in the tests (but is still registered in the DOM)
+    await page.evaluate(() => {
+        const element : Element | null = document.querySelector('pie-button');
+        element?.remove();
+    });
 });
 
 componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
@@ -53,11 +55,11 @@ componentVariants.forEach((variant) => test(`Render all prop variations for Vari
             {
                 props: { propKeyValues },
                 slots: {
-                    default: testComponent.renderedString.trim(),
+                    component: testComponent.renderedString.trim(),
                 },
             },
         );
     }));
 
-    await percySnapshot(page, `PIE Button - Variant: ${variant}`, getLitPercyOptions());
+    await percySnapshot(page, `PIE Button - Variant: ${variant}`);
 }));