@justeattakeaway/pie-button 0.37.1 → 0.38.1-next.0

package/README.md

@@ -86,6 +86,7 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 | disabled       | `Boolean` | `false`    | If `true`, disables the button.                                                                                      |
 | isFullWidth    | `Boolean` | `false`    | If `true`, sets the button width to 100% of its container.                                                          |
 | isLoading      | `Boolean` | `false`    | If `true`, displays a loading indicator inside the button.                                                           |
+| isResponsive   | `Boolean` | `false`    | If `true`, uses the next larger size on wide viewports.                                                              |
 | iconPlacement  | `String`  | `leading`  | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`                       |
 | name           | `String`  | `undefined`| The name of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) |
 | value          | `String`  | `undefined`| The value of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value) |
@@ -94,6 +95,7 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 | formmethod     | `String`  | `undefined`| Sets the HTTP method for form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod) |
 | formnovalidate | `Boolean` | `undefined`    | Ensures the form is submitted without native HTML validation. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formnovalidate) |
 | formtarget     | `String`  | `undefined`| Dictates where to display the response after form submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget) |
+| responsiveSize | `String`  | `productive`| Sets a specific size for xsmall button when rendered as responsive. It can be `productive` or `expressive`.         |
 
 
 In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
@@ -202,4 +204,4 @@ In this example:
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/dist/index.d.ts

@@ -32,6 +32,10 @@ export declare interface ButtonProps {
      * When true, displays a loading indicator inside the button.
      */
     isLoading: boolean;
+    /**
+     * When true, enables the responsive size feature.
+     */
+    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)
@@ -70,6 +74,10 @@ export declare interface ButtonProps {
      * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
      */
     formtarget?: typeof formTargetTypes[number];
+    /**
+     * What size should be attributed to the button when isResponsive is true and the screen is wide.
+     */
+    responsiveSize?: typeof responsiveSizes[number];
 }
 
 export declare const formEncodingtypes: readonly ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
@@ -100,6 +108,7 @@ export declare class PieButton extends LitElement implements ButtonProps {
     disabled: boolean;
     isLoading: boolean;
     isFullWidth: boolean;
+    isResponsive: boolean;
     name?: string;
     value?: string;
     formaction: ButtonProps['formaction'];
@@ -107,6 +116,7 @@ export declare class PieButton extends LitElement implements ButtonProps {
     formmethod: ButtonProps['formmethod'];
     formnovalidate: ButtonProps['formnovalidate'];
     formtarget: ButtonProps['formtarget'];
+    responsiveSize?: ButtonProps['responsiveSize'];
     /**
      * 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
@@ -129,6 +139,8 @@ export declare class PieButton extends LitElement implements ButtonProps {
     static styles: CSSResult;
 }
 
+export declare const responsiveSizes: readonly ["productive", "expressive"];
+
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
 
 export declare const types: readonly ["submit", "button", "reset"];