feat(pie-modal): DSW-2208 split leadingAction and supportingAction into multiple props

.changeset/olive-balloons-nail.md

@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-cookie-banner": minor
+"@justeattakeaway/pie-modal": minor
+"pie-storybook": minor
+---
+
+[Changed] - Split leadingAction and supportingAction props into several new props

apps/pie-docs/src/components/modal/code/props.json

@@ -7,7 +7,7 @@
                 "type": "code",
                 "item": []
             },
-            "An object representing the aria labels for the `close` & `back` buttons within the modal as well as the `isLoading` state labels (`aria-label` & `aria-busy`)."
+            "An object representing the aria labels for the `close`, `back`, `leadingAction` and `supportingAction` buttons within the modal as well as the `isLoading` state labels (`aria-label` & `aria-busy`)."
         ],
         [
             "hasBackButton",
@@ -137,12 +137,44 @@
             }
         ],
         [
-            "leadingAction",
+            "leadingActionText",
             {
                 "type": "code",
                 "item": []
             },
-            "An object representing the leading action of the modal."
+            "The text to display inside the leading action button."
+        ],
+        [
+            "leadingActionVariant",
+            {
+                "type": "code",
+                "item": ["See pie-button's variants"]
+            },
+            "The variant of the leading action button.",
+            {
+                "type": "code",
+                "item": ["primary"]
+            }
+        ],
+        [
+          "supportingActionText",
+          {
+              "type": "code",
+              "item": []
+          },
+          "The text to display inside the supporting action button."
+        ],
+        [
+          "supportingActionVariant",
+          {
+              "type": "code",
+              "item": ["See pie-button's variants"]
+          },
+          "The variant of the supporting action button.",
+          {
+              "type": "code",
+              "item": ["ghost"]
+          }
         ],
         [
             "position",
@@ -177,14 +209,6 @@
                 "type": "code",
                 "item": ["medium"]
             }
-        ],
-        [
-            "supportingAction",
-            {
-                "type": "code",
-                "item": []
-            },
-            "An object representing the supporting action of the modal."
         ]
     ]
 }

apps/pie-storybook/stories/pie-modal.stories.ts

@@ -15,6 +15,8 @@ import {
 } from '@justeattakeaway/pie-modal';
 /* eslint-enable import/no-duplicates */
 
+import { variants as buttonVariants } from '@justeattakeaway/pie-button';
+
 import { StoryMeta, SlottedComponentProps } from '../types';
 import { createStory, sanitizeAndRenderHTML } from '../utilities';
 
@@ -28,20 +30,14 @@ const defaultArgs: ModalProps = {
     isDismissible: true,
     isOpen: true,
     slot: '<span>Body copy</span>',
-    leadingAction: {
-        text: 'Confirm',
-        variant: 'primary',
-        ariaLabel: 'Descriptive confirmation text',
-    },
-    supportingAction: {
-        text: 'Cancel',
-        variant: 'ghost',
-        ariaLabel: 'Descriptive cancellation text',
-    },
+    leadingActionText: 'Confirm',
+    supportingActionText: 'Cancel',
     aria: {
-        close: 'Close',
         back: 'Back',
+        close: 'Close',
+        leadingActionLabel: 'Descriptive confirmation text',
         loading: 'Loading',
+        supportingActionLabel: 'Descriptive cancellation text',
     },
 };
 
@@ -103,13 +99,23 @@ const modalStoryMeta: ModalStoryMeta = {
             description: 'Content to place within the modal',
             control: 'text',
         },
-        leadingAction: {
-            description: 'The leading action configuration for the modal.',
-            control: 'object',
+        leadingActionText: {
+            description: 'The text to display on the leading action button.',
+            control: 'text',
         },
-        supportingAction: {
-            description: 'The supporting action configuration for the modal. Will not appear if no leading action is provided.',
-            control: 'object',
+        leadingActionVariant: {
+            description: 'The variant of the leading action button.',
+            control: 'select',
+            options: buttonVariants,
+        },
+        supportingActionText: {
+            description: 'The text to display on the supporting action button.',
+            control: 'text',
+        },
+        supportingActionVariant: {
+            description: 'The variant of the supporting action button.',
+            control: 'select',
+            options: buttonVariants,
         },
         aria: {
             description: 'The ARIA labels used for the modal close and back buttons, as well as loading state.',
@@ -166,40 +172,44 @@ const createFocusableElementsPageHTML = () : TemplateResult => html`
 const BaseStoryTemplate = (props: ModalProps) : TemplateResult => {
     const {
         aria,
-        heading,
-        headingLevel,
         hasBackButton,
         hasStackedActions,
+        heading,
+        headingLevel,
         isDismissible,
         isFooterPinned,
         isFullWidthBelowMid,
         isLoading,
         isOpen,
-        leadingAction,
+        leadingActionText,
+        leadingActionVariant,
         position,
         returnFocusAfterCloseSelector,
         size,
         slot,
-        supportingAction,
+        supportingActionText,
+        supportingActionVariant,
     } = props;
     return html`
         <pie-button @click=${toggleModal}>Toggle Modal</pie-button>
         <pie-modal
             .aria="${aria}"
             heading="${heading}"
-            headingLevel="${headingLevel}"
+            headingLevel="${ifDefined(headingLevel)}"
             ?hasBackButton="${hasBackButton}"
             ?hasStackedActions="${hasStackedActions}"
             ?isDismissible="${isDismissible}"
-            .isFooterPinned="${isFooterPinned}"
+            ?isFooterPinned="${isFooterPinned}"
             ?isFullWidthBelowMid="${isFullWidthBelowMid}"
             ?isLoading="${isLoading}"
             ?isOpen="${isOpen}"
-            .leadingAction="${leadingAction}"
+            leadingActionText="${ifDefined(leadingActionText)}"
+            leadingActionVariant="${ifDefined(leadingActionVariant)}"
             position="${ifDefined(position)}"
             returnFocusAfterCloseSelector="${ifDefined(returnFocusAfterCloseSelector)}"
             size="${ifDefined(size)}"
-            .supportingAction="${supportingAction}"
+            supportingActionText="${ifDefined(supportingActionText)}"
+            supportingActionVariant="${ifDefined(supportingActionVariant)}"
             @pie-modal-close="${closeAction}"
             @pie-modal-open="${openAction}"
             @pie-modal-back="${backClickAction}"

packages/components/pie-cookie-banner/src/index.ts

@@ -229,20 +229,17 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     }
 
     render () {
-        const modalActionProps = {
-            text: this._localiseText('preferencesManagement.cta.save.label'),
-            variant: 'primary',
-            ariaLabel: this._localiseText('preferencesManagement.cta.save.label'), // TODO: Replace with the appropriate "ariaLabel" as soon as the spreadsheet is updated
-        };
-
+        const leadingActionText = this._localiseText('preferencesManagement.cta.save.label');
         return html`
         <pie-modal
             .isOpen="${this._isModalOpen}"
             hasBackButton
             hasStackedActions
             isFullWidthBelowMid
             heading="${this._localiseText('preferencesManagement.title')}"
-            .leadingAction="${modalActionProps}"
+            leadingActionText="${leadingActionText}"
+            leadingActionVariant="primary"
+            .aria=${{ leadingActionLabel: leadingActionText }}
             @pie-modal-leading-action-click="${this._handlePreferencesSaved}"
             @pie-modal-back="${this._displayCookieBanner}">
                 ${this.renderModalContent()}

packages/components/pie-modal/src/defs.ts

@@ -1,6 +1,6 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
+import { type Variant as ButtonVariant } from '@justeattakeaway/pie-button/src/defs.ts';
 
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;
@@ -10,23 +10,8 @@ export type AriaProps = {
     close?: string;
     back?: string;
     loading?: string;
-};
-
-export type ActionProps = {
-        /**
-         * The text to display inside the button.
-         */
-        text: string;
-
-        /**
-         * The button variant.
-         */
-        variant?: Variant;
-
-        /**
-         * The ARIA label for the button.
-         */
-        ariaLabel?: string;
+    leadingActionLabel?: string;
+    supportingActionLabel?: string;
 };
 
 export type ModalProps = {
@@ -89,14 +74,24 @@ export 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.
+     */
+    leadingActionVariant?: ButtonVariant;
+
+    /**
+     * The text to display inside the supporting action button.
      */
-    leadingAction?: ActionProps;
+    supportingActionText?: string;
 
     /**
-     * The supporting action configuration for the modal.
+     * The button variant for the supporting action button.
      */
-    supportingAction?: ActionProps;
+    supportingActionVariant?: ButtonVariant;
 
     /*
      * The position of the modal; this controls where it will appear on the page.
@@ -151,7 +146,7 @@ export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-cli
 
 export type ModalActionType = 'leading' | 'supporting';
 
-export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
+export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'returnFocusAfterCloseSelector' | 'leadingActionText' | 'supportingActionText'>>;
 
 export const defaultProps: DefaultProps = {
     hasBackButton: false,
@@ -162,6 +157,8 @@ export const defaultProps: DefaultProps = {
     isFooterPinned: true,
     isFullWidthBelowMid: false,
     isLoading: false,
+    leadingActionVariant: 'primary',
     position: 'center',
     size: 'medium',
+    supportingActionVariant: 'ghost',
 };