@justeattakeaway/pie-button 0.47.7 → 0.48.0

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -84,7 +84,7 @@ export declare interface ButtonProps {
     responsiveSize?: typeof responsiveSizes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isLoading' | 'isFullWidth' | 'isResponsive'>;
+export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
 
 export declare const defaultProps: DefaultProps;
 

package/dist/react.js

@@ -3,8 +3,8 @@ import { createComponent as e } from "@lit/react";
 import { PieButton as o } from "./index.js";
 import { defaultProps as l, formEncodingtypes as y, formMethodTypes as B, formTargetTypes as d, iconPlacements as g, responsiveSizes as v, sizes as T, types as x, variants as z } from "./index.js";
 import "lit";
+import "lit/directives/class-map.js";
 import "lit/decorators.js";
-import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
 const r = e({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.47.7",
+  "version": "0.48.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -48,8 +48,8 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.6.5",
-    "@justeattakeaway/pie-webc-core": "0.23.0",
+    "@justeattakeaway/pie-spinner": "0.6.6",
+    "@justeattakeaway/pie-webc-core": "0.24.0",
     "element-internals-polyfill": "1.3.11"
   }
 }

package/src/button.scss

@@ -1,14 +1,13 @@
 @use '@justeattakeaway/pie-css/scss' as p;
-
-$breakpoint-wide: 768px;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 
 /**
 * 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) {
+    &.o-btn--responsive {
+        @include media('>md') {
             @content;
         }
     }
@@ -94,12 +93,14 @@ $breakpoint-wide: 768px;
     // used to specify whether the button should be full width or not
     inline-size: var(--btn-inline-size);
 
-    // Variant
-    &[variant='primary'] {
+    // ************************
+    // Button Variant Modifiers
+    // ************************
+    &.o-btn--primary {
         @include p.button-interactive-states('--dt-color-interactive-brand');
 
-        &[size='xsmall'],
-        &[size='small-productive'] {
+        &.o-btn--xsmall,
+        &.o-btn--small-productive {
             /**
             * Where the font-size is smaller,
             * update the button backgrounds so that the text is accessible
@@ -108,16 +109,27 @@ $breakpoint-wide: 768px;
 
             @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
         }
+
+        // This is to handle the background colour change getting overridden above, but then being put in responsive mode
+        // can't use :not for this unfortunately, as then the smaller narrow state would lose its background colour too
+        &.o-btn--xsmall.o-btn--expressive,
+        &.o-btn--small-productive {
+            @include responsive-wide {
+                --btn-bg-color: var(--dt-color-interactive-brand);
+
+                @include p.button-interactive-states('--dt-color-interactive-brand');
+            }
+        }
     }
 
-    &[variant='secondary'] {
+    &.o-btn--secondary {
         --btn-bg-color: var(--dt-color-interactive-secondary);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-secondary');
     }
 
-    &[variant='outline'] {
+    &.o-btn--outline {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
@@ -128,7 +140,7 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='ghost'] {
+    &.o-btn--ghost {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-link);
 
@@ -137,15 +149,15 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    &[variant='inverse'] {
+    &.o-btn--inverse {
         --btn-bg-color: var(--dt-color-interactive-inverse);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-inverse');
     }
 
-    &[variant='ghost-inverse'],
-    &[variant='outline-inverse'] {
+    &.o-btn--ghost-inverse,
+    &.o-btn--outline-inverse {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-primary);
 
@@ -154,17 +166,17 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-container-default', 'transparent');
     }
 
-    &[variant='outline-inverse']:not([disabled]) {
+    &.o-btn--outline-inverse:not([disabled]) {
         border: 1px solid var(--dt-color-border-strong);
     }
 
-    &[variant='destructive'] {
+    &.o-btn--destructive {
         --btn-bg-color: var(--dt-color-support-error);
 
         @include p.button-interactive-states('--dt-color-support-error');
     }
 
-    &[variant='destructive-ghost'] {
+    &.o-btn--destructive-ghost {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-error);
 
@@ -173,65 +185,80 @@ $breakpoint-wide: 768px;
         @include p.button-interactive-states('--dt-color-black', 'transparent');
     }
 
-    // Additional modifiers
-    &[isFullWidth] {
-        --btn-inline-size: 100%;
-    }
-
-    &[disabled] {
-        --btn-text-color: var(--dt-color-content-disabled) !important;
-
-        cursor: not-allowed;
-
-        // For every variant (except ghost variants) set the disabled background color
-        &:not([variant='ghost'], [variant='ghost-inverse'], [variant='destructive-ghost']) {
-            --btn-bg-color: var(--dt-color-disabled-01) !important;
-        }
-
-        // For outline variants, set the border to the disabled color
-        &[variant='outline'] {
-            border-color: var(--dt-color-disabled-01) !important;
-        }
-    }
-
-    &[size='xsmall'] {
+    // *********************
+    // Button Size Modifiers
+    // *********************
+    &.o-btn--xsmall {
         @include button-size(xsmall);
+
         @include responsive-wide {
             // productive is the default size when responsive is enabled
             @include button-size(small-productive);
 
-            &[responsiveSize='expressive'] {
+            &.o-btn--expressive {
                 @include button-size(small-expressive);
             }
         }
     }
 
-    &[size='small-expressive'] {
+    &.o-btn--small-expressive {
         @include button-size(small-expressive);
+
         @include responsive-wide {
             @include button-size(medium);
         }
     }
 
-    &[size='small-productive'] {
+    &.o-btn--small-productive {
         @include button-size(small-productive);
+
         @include responsive-wide {
             @include button-size(medium);
         }
     }
 
-    &[size='medium'] {
+    &.o-btn--medium {
         @include button-size(medium);
+
         @include responsive-wide {
             @include button-size(large);
         }
     }
 
-    &[size='large'] {
+    &.o-btn--large {
         @include button-size(large);
     }
 
-    &[isLoading] {
+    // ******************************
+    // Additional component modifiers
+    // ******************************
+    &.o-btn--fullWidth {
+        --btn-inline-size: 100%;
+    }
+
+    // **************
+    // Disabled state
+    // **************
+    &[disabled] {
+        --btn-text-color: var(--dt-color-content-disabled) !important;
+
+        cursor: not-allowed;
+
+        // For every variant (except ghost variants) set the disabled background color
+        &:not(.o-btn--ghost, .o-btn--ghost-inverse, .o-btn--destructive-ghost) {
+            --btn-bg-color: var(--dt-color-disabled-01) !important;
+        }
+
+        // For outline variants, set the border to the disabled color
+        &.o-btn--outline {
+            border-color: var(--dt-color-disabled-01) !important;
+        }
+    }
+
+    // *************
+    // Loading state
+    // *************
+    &.is-loading {
         & > *:not(pie-spinner) {
             visibility: hidden;
         }
@@ -241,6 +268,9 @@ $breakpoint-wide: 768px;
         }
     }
 
+    // ************
+    // Focus styles
+    // ************
     &:focus-visible {
         @include p.focus;
     }

package/src/defs.ts

@@ -1,4 +1,4 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
 export const responsiveSizes = ['productive', 'expressive'] as const;
@@ -101,7 +101,7 @@ export interface ButtonProps {
     responsiveSize?: typeof responsiveSizes[number];
 }
 
-export type DefaultProps = ComponentDefaultPropsGeneric<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isLoading' | 'isFullWidth' | 'isResponsive'>;
+export type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
 
 export const defaultProps: DefaultProps = {
     size: 'medium',

package/src/index.ts

@@ -1,8 +1,8 @@
 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
 import {
     ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
@@ -226,18 +226,22 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
             responsiveSize,
         } = this;
 
+        const classes = {
+            'o-btn': true,
+            'o-btn--fullWidth': isFullWidth,
+            'o-btn--responsive': isResponsive,
+            [`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
+            [`o-btn--${variant}`]: true,
+            [`o-btn--${size}`]: true,
+            'is-loading': isLoading,
+        };
+
         return html`
             <button
                 @click=${this._handleClick}
-                class="o-btn"
+                class=${classMap(classes)}
                 type=${type || 'submit'}
-                variant=${variant || 'primary'}
-                size=${size || 'medium'}
-                responsiveSize=${ifDefined(responsiveSize)}
-                ?disabled=${disabled}
-                ?isFullWidth=${isFullWidth}
-                ?isResponsive=${isResponsive}
-                ?isLoading=${isLoading}>
+                ?disabled=${disabled}>
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <slot></slot>