@justeattakeaway/pie-button 0.44.0 → 0.45.0

package/custom-elements.json

@@ -2,6 +2,12 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/defs.js",

package/dist/index.d.ts

@@ -9,15 +9,15 @@ export declare interface ButtonProps {
     /**
      * What size the button should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
-    type: typeof types[number];
+    type?: typeof types[number];
     /**
      * What style variant the button should be such as primary, outline or ghost.
      */
-    variant: Variant;
+    variant?: Variant;
     /**
      * The placement of the icon slot, if provided, such as leading or trailing
      */
@@ -25,19 +25,19 @@ export declare interface ButtonProps {
     /**
      * When true, the button element is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * When true, the button element will occupy the full width of its container.
      */
-    isFullWidth: boolean;
+    isFullWidth?: boolean;
     /**
      * When true, displays a loading indicator inside the button.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
     /**
      * When true, enables the responsive size feature.
      */
-    isResponsive: boolean;
+    isResponsive?: boolean;
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)

package/dist/index.js

@@ -544,7 +544,7 @@ class v extends kt(wt) {
    * @private
    */
   renderSpinner() {
-    const { size: s, variant: a, disabled: c } = this, u = s.includes("small") ? "small" : "medium";
+    const { size: s, variant: a, disabled: c } = this, u = s && s.includes("small") ? "small" : "medium";
     let f;
     return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
                     <pie-spinner
@@ -568,9 +568,9 @@ class v extends kt(wt) {
             <button
                 @click=${this._handleClick}
                 class="o-btn"
-                type=${s}
-                variant=${u}
-                size=${f}
+                type=${s || "submit"}
+                variant=${u || "primary"}
+                size=${f || "medium"}
                 responsiveSize=${Et(k)}
                 ?disabled=${a}
                 ?isFullWidth=${c}

package/dist/react.d.ts

@@ -3,22 +3,22 @@ import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import * as React_2 from 'react';
 import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {
     /**
      * What size the button should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
-    type: typeof types[number];
+    type?: typeof types[number];
     /**
      * What style variant the button should be such as primary, outline or ghost.
      */
-    variant: Variant;
+    variant?: Variant;
     /**
      * The placement of the icon slot, if provided, such as leading or trailing
      */
@@ -26,19 +26,19 @@ export declare interface ButtonProps {
     /**
      * When true, the button element is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * When true, the button element will occupy the full width of its container.
      */
-    isFullWidth: boolean;
+    isFullWidth?: boolean;
     /**
      * When true, displays a loading indicator inside the button.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
     /**
      * When true, enables the responsive size feature.
      */
-    isResponsive: boolean;
+    isResponsive?: boolean;
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
@@ -91,7 +91,7 @@ export declare const formTargetTypes: readonly ["_self", "_blank", "_parent", "_
 
 export declare const iconPlacements: readonly ["leading", "trailing"];
 
-export declare const PieButton: ReactWebComponent<PieButton_2, {}>;
+export declare const PieButton: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<PieButton_2> & ReactBaseType>;
 
 /**
  * @tagname pie-button
@@ -142,6 +142,8 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
 
 declare const PieButton_base: GenericConstructor<FormControlInterface> & typeof LitElement;
 
+declare type ReactBaseType = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
+
 export declare const responsiveSizes: readonly ["productive", "expressive"];
 
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];

package/dist/react.js

@@ -1,27 +1,27 @@
 import * as t from "react";
 import { createComponent as e } from "@lit/react";
 import { PieButton as o } from "./index.js";
-import { formEncodingtypes as y, formMethodTypes as P, formTargetTypes as l, iconPlacements as B, responsiveSizes as d, sizes as g, types as v, variants as T } from "./index.js";
+import { formEncodingtypes as y, formMethodTypes as B, formTargetTypes as l, iconPlacements as d, responsiveSizes as g, sizes as v, types as T, variants as x } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const c = e({
+const r = e({
   displayName: "PieButton",
   elementClass: o,
   react: t,
   tagName: "pie-button",
   events: {}
-});
+}), f = r;
 export {
-  c as PieButton,
+  f as PieButton,
   y as formEncodingtypes,
-  P as formMethodTypes,
+  B as formMethodTypes,
   l as formTargetTypes,
-  B as iconPlacements,
-  d as responsiveSizes,
-  g as sizes,
-  v as types,
-  T as variants
+  d as iconPlacements,
+  g as responsiveSizes,
+  v as sizes,
+  T as types,
+  x as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -32,8 +32,8 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.8.0",
-    "@justeattakeaway/pie-wrapper-react": "0.12.0",
+    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-wrapper-react": "0.13.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "volta": {
@@ -44,8 +44,8 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.4.0",
-    "@justeattakeaway/pie-webc-core": "0.16.0",
+    "@justeattakeaway/pie-spinner": "0.5.0",
+    "@justeattakeaway/pie-webc-core": "0.17.0",
     "element-internals-polyfill": "1.3.9"
   }
 }

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type ReactBaseType = React.ButtonHTMLAttributes<HTMLButtonElement>

package/src/defs.ts

@@ -17,15 +17,15 @@ export interface ButtonProps {
     /**
      * What size the button should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
-    type: typeof types[number];
+    type?: typeof types[number];
     /**
      * What style variant the button should be such as primary, outline or ghost.
      */
-    variant: Variant;
+    variant?: Variant;
     /**
      * The placement of the icon slot, if provided, such as leading or trailing
      */
@@ -33,20 +33,20 @@ export interface ButtonProps {
     /**
      * When true, the button element is disabled.
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * When true, the button element will occupy the full width of its container.
      */
-    isFullWidth: boolean;
+    isFullWidth?: boolean;
     /**
      * When true, displays a loading indicator inside the button.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
 
     /**
      * When true, enables the responsive size feature.
      */
-    isResponsive: boolean;
+    isResponsive?: boolean;
 
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.

package/src/index.ts

@@ -197,7 +197,7 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
      */
     private renderSpinner (): TemplateResult {
         const { size, variant, disabled } = this;
-        const spinnerSize = size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
+        const spinnerSize = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
         let spinnerVariant;
         if (disabled) {
             spinnerVariant = variant === 'ghost-inverse' ? 'inverse' : 'secondary';
@@ -230,9 +230,9 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
             <button
                 @click=${this._handleClick}
                 class="o-btn"
-                type=${type}
-                variant=${variant}
-                size=${size}
+                type=${type || 'submit'}
+                variant=${variant || 'primary'}
+                size=${size || 'medium'}
                 responsiveSize=${ifDefined(responsiveSize)}
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}

package/src/react.ts

@@ -1,14 +1,20 @@
-
 import * as React from 'react';
 import { createComponent } from '@lit/react';
-import { PieButton as PieButtonReact } from './index';
+import { PieButton as PieButtonLit } from './index';
+import { ButtonProps } from './defs';
 
 export * from './defs';
 
-export const PieButton = createComponent({
+const PieButtonReact = createComponent({
     displayName: 'PieButton',
-    elementClass: PieButtonReact,
+    elementClass: PieButtonLit,
     react: React,
     tagName: 'pie-button',
     events: {},
 });
+
+type ReactBaseType = React.ButtonHTMLAttributes<HTMLButtonElement>
+
+
+
+export const PieButton = PieButtonReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonProps> & React.RefAttributes<PieButtonLit> & ReactBaseType>;