@justeattakeaway/pie-button 0.36.0 → 0.37.0

package/dist/react.d.ts

@@ -2,7 +2,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 { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {
     /**
@@ -121,6 +121,12 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     private _simulateNativeButtonClick;
     private _handleClick;
     private _handleFormKeyDown;
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -28,10 +28,7 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeat/pie-design-tokens": "5.8.2",
-    "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-css": "0.7.0",
-    "@justeattakeaway/pie-webc-core": "0.11.0"
+    "@justeattakeaway/pie-components-config": "0.4.0"
   },
   "volta": {
     "extends": "../../../package.json"
@@ -40,6 +37,8 @@
     "dist/*.js"
   ],
   "dependencies": {
+    "@justeattakeaway/pie-spinner": "0.2.1",
+    "@justeattakeaway/pie-webc-core": "0.11.0",
     "element-internals-polyfill": "1.3.8"
   }
 }

package/src/button.scss

@@ -6,27 +6,6 @@
     box-sizing: border-box;
 }
 
-/**
-* Shorthand mixin for updating the HSL custom properties for the loading spinner.
-* Takes in the name of the color to be split into its HSL components.
-*/
-@mixin spinner-base-colors($color) {
-    --spinner-base-color-h: var(#{$color}-h);
-    --spinner-base-color-s: var(#{$color}-s);
-    --spinner-base-color-l: var(#{$color}-l);
-}
-
-// Spin animation for loading state
-@keyframes rotate360 {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 // Base button styles
 .o-btn {
     // Custom Property Declarations
@@ -57,26 +36,6 @@
     // Set icon size to the medium button icon size (the default state)
     --btn-icon-size: 24px;
 
-    // Spinner size defaults - currently set for the medium button size (the default state)
-    --spinner-size-s: 20px;
-    --spinner-size-m: 24px;
-    --spinner-border-width-s: 2.5px;
-    --spinner-border-width-m: 3px;
-    --spinner-size: var(--spinner-size-m);
-    --spinner-border-width: var(--spinner-border-width-m);
-
-    // Spinner colors - currently set for the primary button styles
-    @include spinner-base-colors(--dt-color-content-interactive-primary);
-
-    --spinner-left-color-opacity: 0.35;
-    --spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));
-    --spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);
-
-    // Spinner animations
-    --spinner-animation-duration: 1.15s;
-    --spinner-animation-timing-function: linear;
-    --spinner-animation-iteration-count: infinite;
-
     position: relative;
     display: flex;
     gap: var(--dt-spacing-b);
@@ -121,7 +80,6 @@
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-secondary');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='outline'] {
@@ -133,7 +91,6 @@
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
         @include p.button-interactive-states('--dt-color-black', 'transparent');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='ghost'] {
@@ -143,7 +100,6 @@
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
         @include p.button-interactive-states('--dt-color-black', 'transparent');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='inverse'] {
@@ -151,7 +107,6 @@
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-inverse');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='ghost-inverse'],
@@ -181,7 +136,6 @@
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
         @include p.button-interactive-states('--dt-color-black', 'transparent');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     // Additional modifiers
@@ -211,16 +165,12 @@
         --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;
-        --spinner-size: var(--spinner-size-s);
-        --spinner-border-width: var(--spinner-border-width-s);
     }
 
     &[size='small-expressive'],
     &[size='small-productive'] {
         --btn-height: var(--btn-height--small);
         --btn-icon-size: 20px;
-        --spinner-size: var(--spinner-size-s);
-        --spinner-border-width: var(--spinner-border-width-s);
     }
 
     &[size='small-expressive'] {
@@ -244,34 +194,15 @@
         --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);
-        --spinner-size: var(--spinner-size-m);
-        --spinner-border-width: var(--spinner-border-width-m);
     }
 
     &[isLoading] {
-        &:before {
-            content: '';
-
-            // Centre the spinner over the top of the button text
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            translate: -50% -50%;
-
-            height: var(--spinner-size);
-            width: var(--spinner-size);
-            display: block;
-            background-color: transparent;
-            border-radius: 50%;
-            border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
-            border-width: var(--spinner-border-width);
-            border-style: solid;
-            will-change: transform;
-            animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
+        & > *:not(pie-spinner) {
+            visibility: hidden;
         }
 
-        & > * {
-            visibility: hidden;
+        pie-spinner {
+            position: absolute;
         }
     }
 

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, nothing, PropertyValues,
+    LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -8,6 +8,7 @@ import {
 } from './defs';
 import styles from './button.scss?inline';
 import 'element-internals-polyfill';
+import '@justeattakeaway/pie-spinner';
 
 // Valid values available to consumers
 export * from './defs';
@@ -196,6 +197,23 @@ export class PieButton extends LitElement implements ButtonProps {
         this._handleClick();
     };
 
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner (): TemplateResult {
+        const spinnerSize = this.size.includes('small') ? 's' : 'm'; // includes("small") matches for any small size value and xsmall
+        const inverseVariants: Array<ButtonProps['variant']> = ['primary', 'destructive', 'outline-inverse', 'ghost-inverse'];
+        const spinnerVariant = inverseVariants.includes(this.variant) ? 'inverse' : 'secondary';
+
+        return html`
+                    <pie-spinner
+                        size="${spinnerSize}"
+                        variant="${spinnerVariant}"
+                    </pie-spinner>`;
+    }
+
     render () {
         const {
             type,
@@ -217,6 +235,7 @@ export class PieButton extends LitElement implements ButtonProps {
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}
                 ?isLoading=${isLoading}>
+                    ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <slot></slot>
                     ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}