@justeattakeaway/pie-button 0.25.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -12,7 +12,7 @@
     "**/*.d.ts"
   ],
   "scripts": {
-    "build": "yarn build:wrapper pie-button && run -T vite build ",
+    "build": "yarn build:wrapper pie-button && run -T vite build",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",

package/src/button.scss

@@ -214,13 +214,18 @@
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
-    &[variant='ghost-inverse'] {
+    &[variant='ghost-inverse'],
+    &[variant='outline-inverse'] {
         --btn-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-primary);
 
         @include button-interactive-states('--dt-color-container-inverse', true);
     }
 
+    &[variant='outline-inverse'] {
+        border: 1px solid var(--dt-color-border-strong);
+    }
+
     &[variant='destructive'] {
         --btn-bg-color: var(--dt-color-support-error);
 
@@ -258,7 +263,7 @@
 
     &[size='xsmall'] {
         --btn-padding: 6px var(--dt-spacing-b);
-        --btn-font-size: calc(var(--dt-font-size-14) * 1px);
+        --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);
@@ -267,7 +272,7 @@
 
     &[size='small-expressive'] {
         --btn-padding: 6px var(--dt-spacing-d);
-        --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+        --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;
         --spinner-size: var(--spinner-size-s);
@@ -276,7 +281,7 @@
 
     &[size='small-productive'] {
         --btn-padding: 8px var(--dt-spacing-d);
-        --btn-font-size: calc(var(--dt-font-size-16) * 1px);
+        --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;
         --spinner-size: var(--spinner-size-s);
@@ -289,45 +294,36 @@
 
     &[size='large'] {
         --btn-padding: 14px var(--dt-spacing-e);
-        --btn-font-size: calc(var(--dt-font-size-20) * 1px);
+        --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);
     }
 
-    &: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;
-        opacity: 0;
-    }
-
-    .o-btn-text {
-        flex-grow: 1;
-    }
-
     &[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);
-            opacity: 1;
         }
 
-        & .o-btn-text {
-            opacity: 0;
+        & > * {
+            visibility: hidden;
         }
     }
 }

package/src/defs.ts

@@ -1,8 +1,10 @@
 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', 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
+    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',
+    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
 ] as const;
+export const iconPlacements = ['leading', 'trailing'] as const;
 
 export type Variant = typeof variants[number];
 
@@ -19,6 +21,10 @@ export interface ButtonProps {
      * What style variant the button should be such as primary, outline or ghost.
      */
     variant: Variant;
+    /**
+     * The placement of the icon slot, if provided, such as leading or trailing
+     */
+    iconPlacement?: typeof iconPlacements[number];
     /**
      * When true, the button element is disabled.
      */

package/src/index.ts

@@ -1,9 +1,11 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import {
+    LitElement, html, unsafeCSS, nothing,
+} from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './button.scss?inline';
 import {
-    ButtonProps, sizes, types, variants,
+    ButtonProps, sizes, types, variants, iconPlacements,
 } from './defs';
 
 // Valid values available to consumers
@@ -12,8 +14,7 @@ export * from './defs';
 const componentSelector = 'pie-button';
 
 /**
- * @slot icon-leading - Leading icon
- * @slot icon-trailing - Trailing icon
+ * @slot icon - The icon slot
  * @slot - Default slot
  */
 export class PieButton extends LitElement implements ButtonProps {
@@ -29,6 +30,10 @@ export class PieButton extends LitElement implements ButtonProps {
     @validPropertyValues(componentSelector, variants, 'primary')
     public variant: ButtonProps['variant'] = 'primary';
 
+    @property({ type: String })
+    @validPropertyValues(componentSelector, iconPlacements, 'leading')
+    public iconPlacement: ButtonProps['iconPlacement'] = 'leading';
+
     @property({ type: Boolean })
     public disabled = false;
 
@@ -40,7 +45,13 @@ export class PieButton extends LitElement implements ButtonProps {
 
     render () {
         const {
-            type, disabled, isFullWidth, variant, size, isLoading,
+            type,
+            disabled,
+            isFullWidth,
+            variant,
+            size,
+            isLoading,
+            iconPlacement,
         } = this;
 
         return html`
@@ -52,9 +63,9 @@ export class PieButton extends LitElement implements ButtonProps {
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}
                 ?isLoading=${isLoading}>
-                <slot name="icon-leading"></slot>
-                <span class="o-btn-text"><slot></slot></span>
-                <slot name="icon-trailing"></slot>
+                    ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                    <slot></slot>
+                    ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
             </button>`;
     }