@justeattakeaway/pie-button 0.37.1 → 0.38.1-next.0

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit-labs/react';
+import type { ReactWebComponent } from '@lit/react';
 import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {
@@ -33,6 +33,10 @@ export declare interface ButtonProps {
      * When true, displays a loading indicator inside the button.
      */
     isLoading: boolean;
+    /**
+     * When true, enables the responsive size feature.
+     */
+    isResponsive: boolean;
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
@@ -71,6 +75,10 @@ export declare interface ButtonProps {
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
      */
     formtarget?: typeof formTargetTypes[number];
+    /**
+     * What size should be attributed to the button when isResponsive is true and the screen is wide.
+     */
+    responsiveSize?: typeof responsiveSizes[number];
 }
 
 export declare const formEncodingtypes: readonly ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
@@ -103,6 +111,7 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     disabled: boolean;
     isLoading: boolean;
     isFullWidth: boolean;
+    isResponsive: boolean;
     name?: string;
     value?: string;
     formaction: ButtonProps['formaction'];
@@ -110,6 +119,7 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     formmethod: ButtonProps['formmethod'];
     formnovalidate: ButtonProps['formnovalidate'];
     formtarget: ButtonProps['formtarget'];
+    responsiveSize?: ButtonProps['responsiveSize'];
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
      * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
@@ -132,6 +142,8 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     static styles: CSSResult;
 }
 
+export declare const responsiveSizes: readonly ["productive", "expressive"];
+
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
 
 export declare const types: readonly ["submit", "button", "reset"];

package/dist/react.js

@@ -1,78 +1,57 @@
-import * as w from "react";
+import * as y from "react";
 import { PieButton as E } from "./index.js";
-import { formEncodingtypes as k, formMethodTypes as A, formTargetTypes as D, iconPlacements as G, sizes as H, types as O, variants as S } from "./index.js";
+import { formEncodingtypes as k, formMethodTypes as C, formTargetTypes as S, iconPlacements as j, responsiveSizes as x, sizes as z, types as A, variants as H } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-spinner";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), g = /* @__PURE__ */ new WeakMap(), M = (t, o, m, p, d) => {
-  const i = d == null ? void 0 : d[o];
-  i === void 0 || m === p ? m == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = m : ((r, n, u) => {
-    let a = g.get(r);
-    a === void 0 && g.set(r, a = /* @__PURE__ */ new Map());
-    let l = a.get(n);
-    u !== void 0 ? l === void 0 ? (a.set(n, l = { handleEvent: u }), r.addEventListener(n, l)) : l.handleEvent = u : l !== void 0 && (a.delete(n), r.removeEventListener(n, l));
-  })(t, i, m);
-}, P = (t, o) => {
-  typeof t == "function" ? t(o) : t.current = o;
-};
-function B(t = window.React, o, m, p, d) {
-  let i, r, n;
-  if (o === void 0) {
-    const c = t;
-    ({ tagName: r, elementClass: n, events: p, displayName: d } = c), i = c.react;
-  } else
-    i = t, n = m, r = o;
-  const u = i.Component, a = i.createElement, l = new Set(Object.keys(p ?? {}));
-  class f extends u {
-    constructor() {
-      super(...arguments), this.o = null;
-    }
-    t(e) {
-      if (this.o !== null)
-        for (const h in this.i)
-          M(this.o, h, this.props[h], e ? e[h] : void 0, p);
-    }
-    componentDidMount() {
+const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), g = (t, c, a, l, u) => {
+  const m = u == null ? void 0 : u[c];
+  m === void 0 || a === l ? (t[c] = a, a == null && c in HTMLElement.prototype && t.removeAttribute(c)) : ((i, n, o) => {
+    let s = v.get(i);
+    s === void 0 && v.set(i, s = /* @__PURE__ */ new Map());
+    let r = s.get(n);
+    o !== void 0 ? r === void 0 ? (s.set(n, r = { handleEvent: o }), i.addEventListener(n, r)) : r.handleEvent = o : r !== void 0 && (s.delete(n), i.removeEventListener(n, r));
+  })(t, m, a);
+}, h = ({ react: t, tagName: c, elementClass: a, events: l, displayName: u }) => {
+  const m = new Set(Object.keys(l ?? {})), i = t.forwardRef((n, o) => {
+    const s = t.useRef(null), r = t.useRef(null), p = {}, d = {};
+    for (const [e, f] of Object.entries(n))
+      N.has(e) ? p[e === "className" ? "class" : e] = f : m.has(e) || e in a.prototype ? d[e] = f : p[e] = f;
+    return t.useLayoutEffect(() => {
+      if (r.current !== null) {
+        for (const e in d)
+          g(r.current, e, n[e], s.current ? s.current[e] : void 0, l);
+        s.current = n;
+      }
+    }), t.useLayoutEffect(() => {
       var e;
-      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
-    }
-    componentDidUpdate(e) {
-      this.t(e);
-    }
-    render() {
-      const { _$Gl: e, ...h } = this.props;
-      this.h !== e && (this.u = (s) => {
-        e !== null && P(e, s), this.o = s, this.h = e;
-      }), this.i = {};
-      const v = { ref: this.u };
-      for (const [s, y] of Object.entries(h))
-        b.has(s) ? v[s === "className" ? "class" : s] = y : l.has(s) || s in n.prototype ? this.i[s] = y : v[s] = y;
-      return v.suppressHydrationWarning = !0, a(r, v);
-    }
-  }
-  f.displayName = d ?? n.name;
-  const N = i.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
-  return N.displayName = f.displayName, N;
-}
-const R = B({
+      (e = r.current) == null || e.removeAttribute("defer-hydration");
+    }, []), p.suppressHydrationWarning = !0, t.createElement(c, { ...p, ref: t.useCallback((e) => {
+      r.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
+    }, [o]) });
+  });
+  return i.displayName = u ?? a.name, i;
+}, M = h({
   displayName: "PieButton",
   elementClass: E,
-  react: w,
+  react: y,
   tagName: "pie-button",
   events: {}
 });
 export {
-  R as PieButton,
+  M as PieButton,
   k as formEncodingtypes,
-  A as formMethodTypes,
-  D as formTargetTypes,
-  G as iconPlacements,
-  H as sizes,
-  O as types,
-  S as variants
+  C as formMethodTypes,
+  S as formTargetTypes,
+  j as iconPlacements,
+  x as responsiveSizes,
+  z as sizes,
+  A as types,
+  H as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.37.1",
+  "version": "0.38.1-next.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -28,7 +28,7 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.5.0"
+    "@justeattakeaway/pie-components-config": "0.6.0"
   },
   "volta": {
     "extends": "../../../package.json"
@@ -37,8 +37,8 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.2.1",
-    "@justeattakeaway/pie-webc-core": "0.11.0",
+    "@justeattakeaway/pie-spinner": "0.2.2-next.0",
+    "@justeattakeaway/pie-webc-core": "0.12.0-next.0",
     "element-internals-polyfill": "1.3.8"
   }
 }

package/src/button.scss

@@ -6,6 +6,20 @@
     box-sizing: border-box;
 }
 
+$breakpoint-wide: 768px;
+
+/**
+* Mixin for adding the responsive behaviour.
+* Takes in the the particular settings for the wide breakpoint.
+*/
+@mixin responsive-wide {
+    &[isResponsive] {
+        @media (min-width: $breakpoint-wide) {
+            @content;
+        }
+    }
+}
+
 // Base button styles
 .o-btn {
     // Custom Property Declarations
@@ -14,11 +28,6 @@
     --btn-font-family: var(--dt-font-interactive-m-family);
     --btn-font-weight: var(--dt-font-interactive-m-weight);
 
-    // The base values are set to the size default, which is for the medium button size
-    --btn-padding: 10px var(--dt-spacing-e);
-    --btn-font-size: #{p.font-size(--dt-font-size-20)};
-    --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-
     // The following values set to default background and color
     // currently this sets the primary button styles
     --btn-bg-color: var(--dt-color-interactive-brand);
@@ -30,11 +39,43 @@
     --btn-height--medium: 48px;
     --btn-height--large: 56px;
 
-    // Set height to medium (the default state)
-    --btn-height: var(--btn-height--medium);
-
-    // Set icon size to the medium button icon size (the default state)
-    --btn-icon-size: 24px;
+    /**
+    * Mixin for updating the button styles based on the size passed in.
+    * Takes in the name of the size to be used.
+    */
+    @mixin button-size($size) {
+        @if $size == 'xsmall' {
+            --btn-height: var(--btn-height--xsmall);
+            --btn-padding: 6px var(--dt-spacing-b);
+            --btn-font-size: #{p.font-size(--dt-font-size-14)};
+            --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
+            --btn-icon-size: 16px;
+        } @else if $size == 'small-expressive' {
+            --btn-height: var(--btn-height--small);
+            --btn-padding: 6px var(--dt-spacing-d);
+            --btn-font-size: #{p.font-size(--dt-font-size-20)};
+            --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+            --btn-icon-size: 20px;
+        } @else if $size == 'small-productive' {
+            --btn-height: var(--btn-height--small);
+            --btn-padding: 8px var(--dt-spacing-d);
+            --btn-font-size: #{p.font-size(--dt-font-size-16)};
+            --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
+            --btn-icon-size: 20px;
+        } @else if $size == 'medium' {
+            --btn-height: var(--btn-height--medium);
+            --btn-padding: 10px var(--dt-spacing-e);
+            --btn-font-size: #{p.font-size(--dt-font-size-20)};
+            --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+            --btn-icon-size: 24px;
+        } @else if $size == 'large' {
+            --btn-height: var(--btn-height--large);
+            --btn-padding: 14px var(--dt-spacing-e);
+            --btn-font-size: #{p.font-size(--dt-font-size-20)};
+            --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+            --btn-icon-size: 24px;
+        }
+    }
 
     position: relative;
     display: flex;
@@ -71,7 +112,7 @@
             **/
             --btn-bg-color: var(--dt-color-interactive-primary);
 
-            @include p.button-interactive-states('--dt-color-interactive-primary', 'alt');
+            @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
         }
     }
 
@@ -160,40 +201,40 @@
     }
 
     &[size='xsmall'] {
-        --btn-height: var(--btn-height--xsmall);
-        --btn-padding: 6px var(--dt-spacing-b);
-        --btn-font-size: #{p.font-size(--dt-font-size-14)};
-        --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
-        --btn-icon-size: 16px;
-    }
-
-    &[size='small-expressive'],
-    &[size='small-productive'] {
-        --btn-height: var(--btn-height--small);
-        --btn-icon-size: 20px;
+        @include button-size(xsmall);
+        @include responsive-wide {
+            // productive is the default size when responsive is enabled
+            @include button-size(small-productive);
+
+            &[responsiveSize='expressive'] {
+                @include button-size(small-expressive);
+            }
+        }
     }
 
     &[size='small-expressive'] {
-        --btn-padding: 6px var(--dt-spacing-d);
-        --btn-font-size: #{p.font-size(--dt-font-size-20)};
-        --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+        @include button-size(small-expressive);
+        @include responsive-wide {
+            @include button-size(medium);
+        }
     }
 
     &[size='small-productive'] {
-        --btn-padding: 8px var(--dt-spacing-d);
-        --btn-font-size: #{p.font-size(--dt-font-size-16)};
-        --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
+        @include button-size(small-productive);
+        @include responsive-wide {
+            @include button-size(medium);
+        }
     }
 
     &[size='medium'] {
-        /* Same as default styles */
+        @include button-size(medium);
+        @include responsive-wide {
+            @include button-size(large);
+        }
     }
 
     &[size='large'] {
-        --btn-height: var(--btn-height--large);
-        --btn-padding: 14px var(--dt-spacing-e);
-        --btn-font-size: #{p.font-size(--dt-font-size-20)};
-        --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
+        @include button-size(large);
     }
 
     &[isLoading] {

package/src/defs.ts

@@ -1,4 +1,5 @@
 export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
+export const responsiveSizes = ['productive', 'expressive'] as const;
 export const types = ['submit', 'button', 'reset'] as const;
 export const variants = [
     'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',
@@ -42,6 +43,11 @@ export interface ButtonProps {
      */
     isLoading: boolean;
 
+    /**
+     * When true, enables the responsive size feature.
+     */
+    isResponsive: boolean;
+
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
@@ -86,4 +92,9 @@ export interface ButtonProps {
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
      */
     formtarget?: typeof formTargetTypes[number]
+
+    /**
+     * What size should be attributed to the button when isResponsive is true and the screen is wide.
+     */
+    responsiveSize?: typeof responsiveSizes[number];
 }

package/src/index.ts

@@ -2,6 +2,7 @@ import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import {
     ButtonProps, sizes, types, variants, iconPlacements,
@@ -89,6 +90,9 @@ export class PieButton extends LitElement implements ButtonProps {
     @property({ type: Boolean })
     public isFullWidth = false;
 
+    @property({ type: Boolean })
+    public isResponsive = false;
+
     @property({ type: String })
     public name?: string;
 
@@ -110,6 +114,9 @@ export class PieButton extends LitElement implements ButtonProps {
     @property()
     public formtarget: ButtonProps['formtarget'];
 
+    @property({ type: String })
+    public responsiveSize?: ButtonProps['responsiveSize'];
+
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
      * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
@@ -222,7 +229,9 @@ export class PieButton extends LitElement implements ButtonProps {
             variant,
             size,
             isLoading,
+            isResponsive,
             iconPlacement,
+            responsiveSize,
         } = this;
 
         return html`
@@ -232,8 +241,10 @@ export class PieButton extends LitElement implements ButtonProps {
                 type=${type}
                 variant=${variant}
                 size=${size}
+                responsiveSize=${ifDefined(responsiveSize)}
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}
+                ?isResponsive=${isResponsive}
                 ?isLoading=${isLoading}>
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}