@justeattakeaway/pie-button 0.48.0 → 0.49.0

package/custom-elements.json

@@ -12,6 +12,14 @@
       "kind": "javascript-module",
       "path": "src/defs.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "tags",
+          "type": {
+            "text": "['button', 'a']"
+          },
+          "default": "['button', 'a']"
+        },
         {
           "kind": "variable",
           "name": "sizes",
@@ -82,10 +90,18 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    size: 'medium',\n    type:  'submit',\n    variant: 'primary',\n    iconPlacement: 'leading',\n    disabled: false,\n    isLoading: false,\n    isFullWidth: false,\n    isResponsive: false,\n}"
+          "default": "{\n    tag: 'button',\n    size: 'medium',\n    type:  'submit',\n    variant: 'primary',\n    iconPlacement: 'leading',\n    disabled: false,\n    isLoading: false,\n    isFullWidth: false,\n    isResponsive: false,\n}"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "tags",
+          "declaration": {
+            "name": "tags",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "sizes",
@@ -179,39 +195,33 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "tag",
+              "privacy": "public",
+              "attribute": "tag"
+            },
             {
               "kind": "field",
               "name": "size",
-              "type": {
-                "text": "ButtonProps['size']"
-              },
               "privacy": "public",
               "attribute": "size"
             },
             {
               "kind": "field",
               "name": "type",
-              "type": {
-                "text": "ButtonProps['type']"
-              },
               "privacy": "public",
               "attribute": "type"
             },
             {
               "kind": "field",
               "name": "variant",
-              "type": {
-                "text": "ButtonProps['variant']"
-              },
               "privacy": "public",
               "attribute": "variant"
             },
             {
               "kind": "field",
               "name": "iconPlacement",
-              "type": {
-                "text": "ButtonProps['iconPlacement']"
-              },
               "privacy": "public",
               "attribute": "iconPlacement"
             },
@@ -244,7 +254,7 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonProps['name']"
               },
               "privacy": "public",
               "attribute": "name"
@@ -253,7 +263,7 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonProps['value']"
               },
               "privacy": "public",
               "attribute": "value"
@@ -307,11 +317,38 @@
               "kind": "field",
               "name": "responsiveSize",
               "type": {
-                "text": "ButtonProps['responsiveSize'] | undefined"
+                "text": "ButtonProps['responsiveSize']"
               },
               "privacy": "public",
               "attribute": "responsiveSize"
             },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "ButtonProps['href']"
+              },
+              "privacy": "public",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "ButtonProps['rel']"
+              },
+              "privacy": "public",
+              "attribute": "rel"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "ButtonProps['target']"
+              },
+              "privacy": "public",
+              "attribute": "target"
+            },
             {
               "kind": "method",
               "name": "_simulateNativeButtonClick",
@@ -347,38 +384,54 @@
               },
               "description": "Template for the loading state"
             },
+            {
+              "kind": "method",
+              "name": "renderAnchor",
+              "parameters": [
+                {
+                  "name": "classes",
+                  "type": {
+                    "text": "ClassInfo"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderButton",
+              "parameters": [
+                {
+                  "name": "classes",
+                  "type": {
+                    "text": "ClassInfo"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "focus"
             }
           ],
           "attributes": [
+            {
+              "name": "tag",
+              "fieldName": "tag"
+            },
             {
               "name": "size",
-              "type": {
-                "text": "ButtonProps['size']"
-              },
               "fieldName": "size"
             },
             {
               "name": "type",
-              "type": {
-                "text": "ButtonProps['type']"
-              },
               "fieldName": "type"
             },
             {
               "name": "variant",
-              "type": {
-                "text": "ButtonProps['variant']"
-              },
               "fieldName": "variant"
             },
             {
               "name": "iconPlacement",
-              "type": {
-                "text": "ButtonProps['iconPlacement']"
-              },
               "fieldName": "iconPlacement"
             },
             {
@@ -400,14 +453,14 @@
             {
               "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonProps['name']"
               },
               "fieldName": "name"
             },
             {
               "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonProps['value']"
               },
               "fieldName": "value"
             },
@@ -449,9 +502,30 @@
             {
               "name": "responsiveSize",
               "type": {
-                "text": "ButtonProps['responsiveSize'] | undefined"
+                "text": "ButtonProps['responsiveSize']"
               },
               "fieldName": "responsiveSize"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "ButtonProps['href']"
+              },
+              "fieldName": "href"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "ButtonProps['rel']"
+              },
+              "fieldName": "rel"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "ButtonProps['target']"
+              },
+              "fieldName": "target"
             }
           ],
           "mixins": [

package/dist/index.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';
@@ -7,6 +8,10 @@ import type { PropertyValues } from 'lit';
 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.
      */
@@ -81,9 +86,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;
 
@@ -104,22 +124,26 @@ export declare class PieButton 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
@@ -137,6 +161,8 @@ export declare class PieButton 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;
@@ -148,6 +174,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];