@justeattakeaway/pie-button 0.48.1 → 0.49.1

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ClassInfo } from 'lit/directives/class-map.js';
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
@@ -8,6 +9,10 @@ import * as React_2 from 'react';
 import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {
+    /**
+     * Which HTML element to use when rendering the button.
+     */
+    tag?: typeof tags[number];
     /**
      * What size the button should be.
      */
@@ -82,9 +87,24 @@ export declare interface ButtonProps {
      * What size should be attributed to the button when isResponsive is true and the screen is wide.
      */
     responsiveSize?: typeof responsiveSizes[number];
+    /**
+     * If the button is rendered as an anchor element, this attribute will be applied to the `href` attribute on the anchor.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)
+     */
+    href?: string;
+    /**
+     * If the button is rendered as an anchor element, this attribute will be applied to the `rel` attribute on the anchor.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+     */
+    rel?: string;
+    /**
+     * If the button is rendered as an anchor element, this attribute will be applied to the `target` attribute on the anchor.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
+     */
+    target?: string;
 }
 
-export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
+export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'tag' | 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -107,22 +127,26 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
-    size: ButtonProps['size'];
-    type: ButtonProps['type'];
-    variant: ButtonProps['variant'];
-    iconPlacement: ButtonProps['iconPlacement'];
+    tag: "button" | "a";
+    size: "xsmall" | "medium" | "large" | "small-productive" | "small-expressive";
+    type: "button" | "submit" | "reset";
+    variant: "secondary" | "inverse" | "primary" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    iconPlacement: "leading" | "trailing";
     disabled: boolean;
     isLoading: boolean;
     isFullWidth: boolean;
     isResponsive: boolean;
-    name?: string;
-    value?: string;
+    name: ButtonProps['name'];
+    value: ButtonProps['value'];
     formaction: ButtonProps['formaction'];
     formenctype: ButtonProps['formenctype'];
     formmethod: ButtonProps['formmethod'];
     formnovalidate: ButtonProps['formnovalidate'];
     formtarget: ButtonProps['formtarget'];
-    responsiveSize?: ButtonProps['responsiveSize'];
+    responsiveSize: ButtonProps['responsiveSize'];
+    href: ButtonProps['href'];
+    rel: ButtonProps['rel'];
+    target: ButtonProps['target'];
     /**
      * 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
@@ -140,6 +164,8 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
      * @private
      */
     private renderSpinner;
+    renderAnchor(classes: ClassInfo): TemplateResult<1>;
+    renderButton(classes: ClassInfo): TemplateResult<1>;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;
@@ -153,6 +179,8 @@ export declare const responsiveSizes: readonly ["productive", "expressive"];
 
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
 
+export declare const tags: readonly ["button", "a"];
+
 export declare const types: readonly ["submit", "button", "reset"];
 
 export declare type Variant = typeof variants[number];

package/dist/react.js

@@ -1,9 +1,10 @@
 import * as t from "react";
 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 { defaultProps as y, formEncodingtypes as B, formMethodTypes as d, formTargetTypes as g, iconPlacements as v, responsiveSizes as T, sizes as x, tags as z, types as C, variants as N } from "./index.js";
 import "lit";
 import "lit/directives/class-map.js";
+import "lit/directives/if-defined.js";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
@@ -13,16 +14,17 @@ const r = e({
   react: t,
   tagName: "pie-button",
   events: {}
-}), f = r;
+}), u = r;
 export {
-  f as PieButton,
-  l as defaultProps,
-  y as formEncodingtypes,
-  B as formMethodTypes,
-  d as formTargetTypes,
-  g as iconPlacements,
-  v as responsiveSizes,
-  T as sizes,
-  x as types,
-  z as variants
+  u as PieButton,
+  y as defaultProps,
+  B as formEncodingtypes,
+  d as formMethodTypes,
+  g as formTargetTypes,
+  v as iconPlacements,
+  T as responsiveSizes,
+  x as sizes,
+  z as tags,
+  C as types,
+  N as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.48.1",
+  "version": "0.49.1",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -36,7 +36,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
@@ -49,7 +49,7 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.6.7",
+    "@justeattakeaway/pie-spinner": "0.7.0",
     "@justeattakeaway/pie-webc-core": "0.24.0",
     "element-internals-polyfill": "1.3.11"
   }

package/src/button.scss

@@ -72,7 +72,7 @@
     }
 
     position: relative;
-    display: flex;
+    display: inline-flex;
     gap: var(--dt-spacing-b);
     align-items: center;
     justify-content: center;
@@ -89,6 +89,7 @@
     line-height: var(--btn-line-height);
     cursor: pointer;
     user-select: none;
+    text-decoration: none;
 
     // used to specify whether the button should be full width or not
     inline-size: var(--btn-inline-size);

package/src/defs.ts

@@ -1,5 +1,6 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
+export const tags = ['button', 'a'] as const;
 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;
@@ -16,30 +17,41 @@ export const formMethodTypes = ['post', 'get', 'dialog'] as const;
 export const formTargetTypes = ['_self', '_blank', '_parent', '_top'] as const;
 
 export interface ButtonProps {
+    /**
+     * Which HTML element to use when rendering the button.
+     */
+    tag?: typeof tags[number];
+
     /**
      * What size the button should be.
      */
     size?: typeof sizes[number];
+
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
     type?: typeof types[number];
+
     /**
      * 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.
      */
     disabled?: boolean;
+
     /**
      * When true, the button element will occupy the full width of its container.
      */
     isFullWidth?: boolean;
+
     /**
      * When true, displays a loading indicator inside the button.
      */
@@ -99,11 +111,30 @@ export interface ButtonProps {
      * What size should be attributed to the button when isResponsive is true and the screen is wide.
      */
     responsiveSize?: typeof responsiveSizes[number];
+
+    /**
+     * If the button is rendered as an anchor element, this attribute will be applied to the `href` attribute on the anchor.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)
+     */
+    href?: string;
+
+    /**
+     * If the button is rendered as an anchor element, this attribute will be applied to the `rel` attribute on the anchor.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+     */
+    rel?: string;
+
+    /**
+     * If the button is rendered as an anchor element, this attribute will be applied to the `target` attribute on the anchor.
+     * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
+     */
+    target?: string;
 }
 
-export type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
+export type DefaultProps = ComponentDefaultProps<ButtonProps, 'tag' | 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
 
 export const defaultProps: DefaultProps = {
+    tag: 'button',
     size: 'medium',
     type:  'submit',
     variant: 'primary',

package/src/index.ts

@@ -1,15 +1,20 @@
 import {
-    LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
+    LitElement, html, unsafeCSS, nothing, type PropertyValues, type TemplateResult,
 } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
+import 'element-internals-polyfill';
+
 import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
+
+import '@justeattakeaway/pie-spinner';
+import { type SpinnerProps } from '@justeattakeaway/pie-spinner';
+
 import {
-    ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
+    type ButtonProps, defaultProps, iconPlacements, sizes, tags, types, variants,
 } from './defs';
 import styles from './button.scss?inline';
-import 'element-internals-polyfill';
-import '@justeattakeaway/pie-spinner';
 
 // Valid values available to consumers
 export * from './defs';
@@ -39,8 +44,6 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     }
 
     updated (changedProperties: PropertyValues<this>): void {
-        super.updated(changedProperties);
-
         if (changedProperties.has('type')) {
             // If the new type is "submit", add the keydown event listener
             if (this.type === 'submit') {
@@ -51,21 +54,25 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
         }
     }
 
-    @property()
+    @property({ type: String })
+    @validPropertyValues(componentSelector, tags, defaultProps.tag)
+    public tag = defaultProps.tag;
+
+    @property({ type: String })
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
-    public size: ButtonProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
 
-    @property()
+    @property({ type: String })
     @validPropertyValues(componentSelector, types, defaultProps.type)
-    public type: ButtonProps['type'] = defaultProps.type;
+    public type = defaultProps.type;
 
-    @property()
+    @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
-    public variant: ButtonProps['variant'] = defaultProps.variant;
+    public variant = defaultProps.variant;
 
     @property({ type: String })
     @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
-    public iconPlacement: ButtonProps['iconPlacement'] = defaultProps.iconPlacement;
+    public iconPlacement = defaultProps.iconPlacement;
 
     @property({ type: Boolean })
     public disabled = defaultProps.disabled;
@@ -80,28 +87,37 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     public isResponsive = defaultProps.isResponsive;
 
     @property({ type: String })
-    public name?: string;
+    public name: ButtonProps['name'];
 
     @property({ type: String })
-    public value?: string;
+    public value: ButtonProps['value'];
 
-    @property()
+    @property({ type: String })
     public formaction: ButtonProps['formaction'];
 
-    @property()
+    @property({ type: String })
     public formenctype: ButtonProps['formenctype'];
 
-    @property()
+    @property({ type: String })
     public formmethod: ButtonProps['formmethod'];
 
     @property({ type: Boolean })
     public formnovalidate: ButtonProps['formnovalidate'];
 
-    @property()
+    @property({ type: String })
     public formtarget: ButtonProps['formtarget'];
 
     @property({ type: String })
-    public responsiveSize?: ButtonProps['responsiveSize'];
+    public responsiveSize: ButtonProps['responsiveSize'];
+
+    @property({ type: String })
+    public href: ButtonProps['href'];
+
+    @property({ type: String })
+    public rel: ButtonProps['rel'];
+
+    @property({ type: String })
+    public target: ButtonProps['target'];
 
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -157,17 +173,17 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     }
 
     private _handleClick () {
-        if (!this.isLoading && this.form) {
-            if (this.type === 'submit') {
-                // only submit the form if either formnovalidate is set, or the form passes validation checks (triggers native form validation)
-                if (this.formnovalidate || this.form.reportValidity()) {
-                    this._simulateNativeButtonClick('submit');
-                }
-            }
+        if (!this.form) return;
+        if (this.isLoading) return;
+        if (this.tag !== 'button') return;
 
-            if (this.type === 'reset') {
-                this._simulateNativeButtonClick('reset');
+        if (this.type === 'submit') {
+            // only submit the form if either formnovalidate is set, or the form passes validation checks (triggers native form validation)
+            if (this.formnovalidate || this.form.reportValidity()) {
+                this._simulateNativeButtonClick('submit');
             }
+        } else if (this.type === 'reset') {
+            this._simulateNativeButtonClick('reset');
         }
     }
 
@@ -197,8 +213,9 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
      */
     private renderSpinner (): TemplateResult {
         const { size, variant, disabled } = this;
-        const spinnerSize = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
-        let spinnerVariant;
+
+        const spinnerSize: SpinnerProps['size'] = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
+        let spinnerVariant: SpinnerProps['variant'];
         if (disabled) {
             spinnerVariant = variant === 'ghost-inverse' ? 'inverse' : 'secondary';
         } else {
@@ -207,23 +224,60 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
         }
 
         return html`
-                    <pie-spinner
-                        size="${spinnerSize}"
-                        variant="${spinnerVariant}">
-                    </pie-spinner>`;
+            <pie-spinner
+                size="${spinnerSize}"
+                variant="${spinnerVariant}">
+            </pie-spinner>`;
+    }
+
+    renderAnchor (classes: ClassInfo) {
+        const {
+            href, iconPlacement, rel, target,
+        } = this;
+
+        return html`
+            <a
+                href="${ifDefined(href)}"
+                rel="${ifDefined(rel)}"
+                target="${ifDefined(target)}"
+                class="${classMap(classes)}">
+                ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                <slot></slot>
+                ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
+            </a>`;
+    }
+
+    renderButton (classes: ClassInfo) {
+        const {
+            disabled, iconPlacement, isLoading, type,
+        } = this;
+
+        const buttonClasses = {
+            ...classes,
+            'is-loading': isLoading,
+        };
+
+        return html`
+            <button
+                @click=${this._handleClick}
+                class=${classMap(buttonClasses)}
+                type=${type}
+                ?disabled=${disabled}>
+                    ${isLoading ? this.renderSpinner() : nothing}
+                    ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                    <slot></slot>
+                    ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
+            </button>`;
     }
 
     render () {
         const {
-            type,
-            disabled,
             isFullWidth,
-            variant,
-            size,
-            isLoading,
             isResponsive,
-            iconPlacement,
             responsiveSize,
+            size,
+            tag,
+            variant,
         } = this;
 
         const classes = {
@@ -233,20 +287,13 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
             [`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
             [`o-btn--${variant}`]: true,
             [`o-btn--${size}`]: true,
-            'is-loading': isLoading,
         };
 
-        return html`
-            <button
-                @click=${this._handleClick}
-                class=${classMap(classes)}
-                type=${type || 'submit'}
-                ?disabled=${disabled}>
-                    ${isLoading ? this.renderSpinner() : nothing}
-                    ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
-                    <slot></slot>
-                    ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
-            </button>`;
+        if (tag === 'a') {
+            return this.renderAnchor(classes);
+        }
+
+        return this.renderButton(classes);
     }
 
     focus () {