@justeattakeaway/pie-modal 0.43.5 → 0.44.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    position: 'center',\n    size: 'medium',\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    leadingActionVariant: 'primary',\n    position: 'center',\n    size: 'medium',\n    supportingActionVariant: 'ghost',\n}"
         }
       ],
       "exports": [
@@ -178,7 +178,7 @@
               "kind": "field",
               "name": "aria",
               "type": {
-                "text": "AriaProps"
+                "text": "ModalProps['aria']"
               },
               "privacy": "public",
               "attribute": "aria"
@@ -195,9 +195,6 @@
             {
               "kind": "field",
               "name": "headingLevel",
-              "type": {
-                "text": "ModalProps['headingLevel']"
-              },
               "privacy": "public",
               "attribute": "headingLevel"
             },
@@ -247,19 +244,22 @@
             },
             {
               "kind": "field",
-              "name": "leadingAction",
+              "name": "leadingActionText",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['leadingActionText']"
               },
               "privacy": "public",
-              "attribute": "leadingAction"
+              "attribute": "leadingActionText"
+            },
+            {
+              "kind": "field",
+              "name": "leadingActionVariant",
+              "privacy": "public",
+              "attribute": "leadingActionVariant"
             },
             {
               "kind": "field",
               "name": "position",
-              "type": {
-                "text": "ModalProps['position']"
-              },
               "privacy": "public",
               "attribute": "position"
             },
@@ -267,7 +267,7 @@
               "kind": "field",
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "string | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector'] | undefined"
               },
               "privacy": "public",
               "attribute": "returnFocusAfterCloseSelector"
@@ -275,20 +275,23 @@
             {
               "kind": "field",
               "name": "size",
-              "type": {
-                "text": "ModalProps['size']"
-              },
               "privacy": "public",
               "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "supportingAction",
+              "name": "supportingActionText",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['supportingActionText']"
               },
               "privacy": "public",
-              "attribute": "supportingAction"
+              "attribute": "supportingActionText"
+            },
+            {
+              "kind": "field",
+              "name": "supportingActionVariant",
+              "privacy": "public",
+              "attribute": "supportingActionVariant"
             },
             {
               "kind": "field",
@@ -431,7 +434,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "TemplateResult | typeof nothing"
                 }
               },
               "description": "Template for the close button element. Called within the\nmain render function."
@@ -442,7 +445,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "TemplateResult | typeof nothing"
                 }
               },
               "description": "Template for the back button element. Called within the\nmain render function."
@@ -456,7 +459,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Render leadingAction button depending on prop availability.\n\n1. If the prop `leadingAction` is not provided, the button is not rendered.\n2. If the prop `leadingAction` is provided but any of the optional properties\nare not provided, they fall back to their default values."
+              "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."
             },
             {
               "kind": "method",
@@ -467,7 +470,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Render supportingAction button depending on prop availability.\n\n1. If the prop `supportingAction` is not provided, the button is not rendered.\n2. If the prop `supportingAction` is provided but any of the optional properties\nare not provided, they fall back to their default values.\n3. If `supportingAction` is provided but not `leadingAction`, log a warning and do\nnot render `supportingAction`."
+              "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."
             },
             {
               "kind": "method",
@@ -537,7 +540,7 @@
             {
               "name": "aria",
               "type": {
-                "text": "AriaProps"
+                "text": "ModalProps['aria']"
               },
               "fieldName": "aria"
             },
@@ -550,9 +553,6 @@
             },
             {
               "name": "headingLevel",
-              "type": {
-                "text": "ModalProps['headingLevel']"
-              },
               "fieldName": "headingLevel"
             },
             {
@@ -584,39 +584,41 @@
               "fieldName": "isOpen"
             },
             {
-              "name": "leadingAction",
+              "name": "leadingActionText",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['leadingActionText']"
               },
-              "fieldName": "leadingAction"
+              "fieldName": "leadingActionText"
+            },
+            {
+              "name": "leadingActionVariant",
+              "fieldName": "leadingActionVariant"
             },
             {
               "name": "position",
-              "type": {
-                "text": "ModalProps['position']"
-              },
               "fieldName": "position"
             },
             {
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "string | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector'] | undefined"
               },
               "fieldName": "returnFocusAfterCloseSelector"
             },
             {
               "name": "size",
-              "type": {
-                "text": "ModalProps['size']"
-              },
               "fieldName": "size"
             },
             {
-              "name": "supportingAction",
+              "name": "supportingActionText",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['supportingActionText']"
               },
-              "fieldName": "supportingAction"
+              "fieldName": "supportingActionText"
+            },
+            {
+              "name": "supportingActionVariant",
+              "fieldName": "supportingActionVariant"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -7,28 +7,15 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
-export 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' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingActionText' | 'supportingActionText' | 'returnFocusAfterCloseSelector'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -42,7 +29,7 @@ export declare interface ModalEventDetail {
 
 export declare type ModalProps = {
     /**
-     * The ARIA labels used for the modal close and back buttons, as well as loading state.
+     * The ARIA labels used for the modal leading action, supporting action, close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
     /**
@@ -90,13 +77,21 @@ export declare type ModalProps = {
      */
     isLoading?: boolean;
     /**
-     * The leading action configuration for the modal.
+     * The text to display inside the leading action button.
+     */
+    leadingActionText?: string;
+    /**
+     * The button variant for the leading action button.
      */
-    leadingAction?: ActionProps;
+    leadingActionVariant?: Variant;
     /**
-     * The supporting action configuration for the modal.
+     * The text to display inside the supporting action button.
      */
-    supportingAction?: ActionProps;
+    supportingActionText?: string;
+    /**
+     * The button variant for the supporting action button.
+     */
+    supportingActionVariant?: Variant;
     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
@@ -152,9 +147,9 @@ export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-ac
  * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
  */
 export declare class PieModal extends PieModal_base implements ModalProps {
-    aria: AriaProps;
+    aria: ModalProps['aria'];
     heading: string;
-    headingLevel: ModalProps['headingLevel'];
+    headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     hasBackButton: boolean;
     hasStackedActions: boolean;
     isDismissible: boolean;
@@ -162,11 +157,13 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     isFullWidthBelowMid: boolean;
     isLoading: boolean;
     isOpen: boolean;
-    leadingAction: ActionProps;
-    position: ModalProps['position'];
-    returnFocusAfterCloseSelector?: string;
-    size: ModalProps['size'];
-    supportingAction: ActionProps;
+    leadingActionText: ModalProps['leadingActionText'];
+    leadingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    position: "top" | "center";
+    returnFocusAfterCloseSelector?: ModalProps['returnFocusAfterCloseSelector'];
+    size: "medium" | "large" | "small";
+    supportingActionText: ModalProps['supportingActionText'];
+    supportingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
@@ -212,23 +209,21 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      */
     private renderBackButton;
     /**
-     * Render leadingAction button depending on prop availability.
+     * Renders the "leadingAction" button if the text is provided.
      *
-     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
-     * 2. If the prop `leadingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
+     * 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.
      *
      * @private
      */
     private renderLeadingAction;
     /**
-     * Render supportingAction button depending on prop availability.
+     * Renders the "supportingAction" button if the text is provided.
+     * You cannot have a supporting action without a leading action.
      *
-     * 1. If the prop `supportingAction` is not provided, the button is not rendered.
-     * 2. If the prop `supportingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
-     * 3. If `supportingAction` is provided but not `leadingAction`, log a warning and do
-     * not render `supportingAction`.
+     * If `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.
+     * If `supportingActionVariant` is not provided, the default value is used.
      *
      * @private
      */