@justeattakeaway/pie-button 0.16.0 → 0.17.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[3:48:31 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.2.3 building for production...
+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/react.js  59.13 kB │ gzip: 15.94 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 30.67s
-[vite:dts] Declaration files built in 28365ms.
+✓ built in 13.54s
+[vite:dts] Declaration files built in 12277ms.
 

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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
+
+- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.16.0
 
 ### Minor Changes

package/README.md

@@ -17,41 +17,49 @@
    - [HTML example](#html)
    - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
    - [React example (using Next 13)](#react-templates-using-next-13)
-5. [TypeScript Enum Exports](#typescript-enum-exports)
-6. [Testing](#testing)
+5. [Testing](#testing)
    - [Browser Tests](#browser-tests)
    - [Visual Tests](#visual-tests)
 
 
 ## `pie-button`
 
-`pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications. This component can be easily integrated into various frontend frameworks and customized through a set of properties. For TypeScript projects, it also provides exported enums for type safety and autocompletion.
+`pie-button` is a Web Component built using the Lit library. It offers a simple and accessible button component for web applications.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 ## Local development
 
-Install dependencies at the root
-```
+Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
+
+```bash
 yarn
 ```
 
-Navigate to this folder, compile with TypeScript and build with Vite
-```
-cd packages/components/pie-button
-yarn build
-```
+To build the `pie-button` package, run the following command:
 
-Compile and watch for changes (auto-compiles `dist` on save)
+```bash
+yarn build --filter=pie-button
 ```
-yarn watch
+
+If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
+
+```bash
+yarn watch --filter=pie-button
+
+# in a separate terminal tab, run
+yarn dev --filter=pie-storybook
 ```
 
 ### Importing the component
 
 ```js
-// default
+// Default – for Native JS Applications, Vue, Angular, Svelte etc.
 import { PieButton } from '@justeattakeaway/pie-button';
 
-// react
+// React
+// For React, you will need to import our React specific component build
+// Which wraps the web component using the @lit-labs/react package
 import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 ```
 
@@ -59,12 +67,21 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 
 | Property    | Type      | Default         | Description                                                          |
 |-------------|-----------|-----------------|----------------------------------------------------------------------|
-| size        | `String`  | `medium`        | Size of the button, one of `buttonSizes` |
-| type        | `String`  | `submit`        | Type of the button, one of `buttonTypes` |
-| variant     | `String`  | `primary`       | Variant of the button, one of `buttonVariants` |
+| 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:
+
+```html
+<!-- Native HTML -->
+<pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
+
+<!-- JSX -->
+<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
+```
 
 ## Events
 
@@ -73,67 +90,57 @@ This component does not use any custom event handlers. In order to add event lis
 For example, to add a click handler in various templates:
 
 ### HTML
+
 ```html
 <!-- Other attributes omitted for clarity -->
 <pie-button onclick="e => console.log(e)">Click me!</pie-button>
 ```
 
 ### Vue templates (using Nuxt 3)
+
 ```html
 <!-- Other attributes omitted for clarity -->
 <pie-button @click="handleClick">Click me!</pie-button>
 ```
 
 ### React templates (using Next 13)
+
 ```html
 <!-- Other attributes omitted for clarity -->
 <PieButton onClick={handleClick}>increment</PieButton>
 
 ```
 
-## TypeScript Type Exports
-
-For TypeScript projects, we export one interface for the button properties: `ButtonProps`. This contains three props `buttonSizes`, `buttonTypes`, and `buttonVariants`. You can import and use these types to set the corresponding property values for the `pie-button` component. This ensures better type safety and autocompletion in your project.
-
-Here's an example of how to import and use the enums in a TypeScript project:
-
-```typescript
-import { ButtonProps } from '@justeattakeaway/pie-button';
-```
-
-In your markup or JSX, you can then use these variables to set the properties for the pie-button component:
-
-```html
-<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
-```
-
 ## Testing
 
 ### Browser tests
 
-Run at the root of the monorepo:
-```
+To run the browser tests, run the following command from the root of the monorepo:
+
+```bash
 yarn test:browsers --filter=pie-button
 ```
 
 ### Visual tests
 
-Run at the root of the monorepo:
-```
+To run the visual regression tests, run the following command from the root of the monorepo:
+
+```bash
 yarn test:visual --filter=pie-button
 ```
 
 Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
 
-Setup via bash:
+#### Setup via bash
 
-```
+```bash
 export PERCY_TOKEN_PIE_BUTTON=abcde
 ```
 
-Setup via package.json:
+#### Setup via package.json
 
 Under scripts `test:visual` replace the environment variable with the below:
 
-```
+```bash
 PERCY_TOKEN_PIE_BUTTON=abcde
+```

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
 };