@justeattakeaway/pie-modal 0.44.0 → 0.46.0

package/custom-elements.json

@@ -87,7 +87,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    leadingActionVariant: 'primary',\n    position: 'center',\n    size: 'medium',\n    supportingActionVariant: 'ghost',\n}"
+          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    position: 'center',\n    size: 'medium',\n}"
         }
       ],
       "exports": [
@@ -244,18 +244,12 @@
             },
             {
               "kind": "field",
-              "name": "leadingActionText",
+              "name": "leadingAction",
               "type": {
-                "text": "ModalProps['leadingActionText']"
+                "text": "ModalProps['leadingAction']"
               },
               "privacy": "public",
-              "attribute": "leadingActionText"
-            },
-            {
-              "kind": "field",
-              "name": "leadingActionVariant",
-              "privacy": "public",
-              "attribute": "leadingActionVariant"
+              "attribute": "leadingAction"
             },
             {
               "kind": "field",
@@ -267,7 +261,7 @@
               "kind": "field",
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "ModalProps['returnFocusAfterCloseSelector'] | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector']"
               },
               "privacy": "public",
               "attribute": "returnFocusAfterCloseSelector"
@@ -280,18 +274,12 @@
             },
             {
               "kind": "field",
-              "name": "supportingActionText",
+              "name": "supportingAction",
               "type": {
-                "text": "ModalProps['supportingActionText']"
+                "text": "ModalProps['supportingAction']"
               },
               "privacy": "public",
-              "attribute": "supportingActionText"
-            },
-            {
-              "kind": "field",
-              "name": "supportingActionVariant",
-              "privacy": "public",
-              "attribute": "supportingActionVariant"
+              "attribute": "supportingAction"
             },
             {
               "kind": "field",
@@ -459,7 +447,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Renders the \"leadingAction\" button if the text is provided.\n\nIf `leadingActionText` is not provided, the button is not rendered.\nIf `leadingActionVariant` is not provided, the default value is used.\nThe (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property."
+              "description": "Renders the \"leadingAction\" button if the text is provided.\n\nIf `leadingAction.text` is not provided, the button is not rendered.\nIf `leadingAction.variant` is not provided, the default value of \"primary\" is used.\nThe (optional) aria-label is read from `leadingAction.ariaLabel`."
             },
             {
               "kind": "method",
@@ -470,7 +458,29 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Renders the \"supportingAction\" button if the text is provided.\nYou cannot have a supporting action without a leading action.\n\nIf `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.\nIf `supportingActionVariant` is not provided, the default value is used."
+              "description": "Renders the \"supportingAction\" button if the text is provided.\nYou cannot have a supporting action without a leading action.\n\nIf either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.\nIf `supportingAction.variant` is not provided, the default value of \"ghost\" is used.\nThe (optional) aria-label is read from `supportingAction.ariaLabel`."
+            },
+            {
+              "kind": "method",
+              "name": "renderModalFooter",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "Renders the modal footer if a leading action is provided.\nAdditionally renders the supporting action if it is provided."
+            },
+            {
+              "kind": "method",
+              "name": "renderLoadingSpinner",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "Renders the loading spinner if `isLoading` is true."
             },
             {
               "kind": "method",
@@ -584,15 +594,11 @@
               "fieldName": "isOpen"
             },
             {
-              "name": "leadingActionText",
+              "name": "leadingAction",
               "type": {
-                "text": "ModalProps['leadingActionText']"
+                "text": "ModalProps['leadingAction']"
               },
-              "fieldName": "leadingActionText"
-            },
-            {
-              "name": "leadingActionVariant",
-              "fieldName": "leadingActionVariant"
+              "fieldName": "leadingAction"
             },
             {
               "name": "position",
@@ -601,7 +607,7 @@
             {
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "ModalProps['returnFocusAfterCloseSelector'] | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector']"
               },
               "fieldName": "returnFocusAfterCloseSelector"
             },
@@ -610,15 +616,11 @@
               "fieldName": "size"
             },
             {
-              "name": "supportingActionText",
+              "name": "supportingAction",
               "type": {
-                "text": "ModalProps['supportingActionText']"
+                "text": "ModalProps['supportingAction']"
               },
-              "fieldName": "supportingActionText"
-            },
-            {
-              "name": "supportingActionVariant",
-              "fieldName": "supportingActionVariant"
+              "fieldName": "supportingAction"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -7,15 +7,28 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
+declare type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+    /**
+     * The button variant.
+     */
+    variant?: Variant;
+    /**
+     * The aria label for the button.
+     */
+    ariaLabel?: string;
+};
+
 export declare type AriaProps = {
     close?: string;
     back?: string;
     loading?: string;
-    leadingActionLabel?: string;
-    supportingActionLabel?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingActionText' | 'supportingActionText' | 'returnFocusAfterCloseSelector'>>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -29,7 +42,7 @@ export declare interface ModalEventDetail {
 
 export declare type ModalProps = {
     /**
-     * The ARIA labels used for the modal leading action, supporting action, close and back buttons, as well as for the loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
     /**
@@ -77,21 +90,13 @@ export declare type ModalProps = {
      */
     isLoading?: boolean;
     /**
-     * The text to display inside the leading action button.
-     */
-    leadingActionText?: string;
-    /**
-     * The button variant for the leading action button.
+     * The leading action configuration for the modal.
      */
-    leadingActionVariant?: Variant;
+    leadingAction?: ActionProps;
     /**
-     * The text to display inside the supporting action button.
+     * The supporting action configuration for the modal.
      */
-    supportingActionText?: string;
-    /**
-     * The button variant for the supporting action button.
-     */
-    supportingActionVariant?: Variant;
+    supportingAction?: ActionProps;
     position?: typeof positions[number];
     /**
      * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
@@ -157,13 +162,11 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     isFullWidthBelowMid: boolean;
     isLoading: boolean;
     isOpen: boolean;
-    leadingActionText: ModalProps['leadingActionText'];
-    leadingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    leadingAction: ModalProps['leadingAction'];
     position: "top" | "center";
-    returnFocusAfterCloseSelector?: ModalProps['returnFocusAfterCloseSelector'];
+    returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
     size: "medium" | "large" | "small";
-    supportingActionText: ModalProps['supportingActionText'];
-    supportingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    supportingAction: ModalProps['supportingAction'];
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
@@ -211,9 +214,9 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     /**
      * Renders the "leadingAction" button if the text is provided.
      *
-     * If `leadingActionText` is not provided, the button is not rendered.
-     * If `leadingActionVariant` is not provided, the default value is used.
-     * The (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property.
+     * If `leadingAction.text` is not provided, the button is not rendered.
+     * If `leadingAction.variant` is not provided, the default value of "primary" is used.
+     * The (optional) aria-label is read from `leadingAction.ariaLabel`.
      *
      * @private
      */
@@ -222,12 +225,25 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * Renders the "supportingAction" button if the text is provided.
      * You cannot have a supporting action without a leading action.
      *
-     * If `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.
-     * If `supportingActionVariant` is not provided, the default value is used.
+     * If either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.
+     * If `supportingAction.variant` is not provided, the default value of "ghost" is used.
+     * The (optional) aria-label is read from `supportingAction.ariaLabel`.
      *
      * @private
      */
     private renderSupportingAction;
+    /**
+     * Renders the modal footer if a leading action is provided.
+     * Additionally renders the supporting action if it is provided.
+     *
+     * @private
+     */
+    private renderModalFooter;
+    /**
+     * Renders the loading spinner if `isLoading` is true.
+     * @private
+     */
+    private renderLoadingSpinner;
     /**
      * Renders the modal inner content and footer of the modal.
      * @private