Merge branch 'main' into dsw-2224-checkbox-group-overview-page

.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",
@@ -25,10 +25,7 @@
             "hasStackedActions",
             {
                 "type": "code",
-                "item": [
-                  "false",
-                  "true"
-                ]
+                "item": ["true", "false"]
             },
             "If true, the action buttons will be stacked (full width) at narrow breakpoints.",
             {
@@ -72,90 +69,94 @@
             "isFooterPinned",
             {
                 "type": "code",
-                "item": [
-                  "false",
-                  "true"
-                ]
+                "item": ["true", "false"]
               },
               "When false, the modal footer will scroll with the content inside the modal body.",
               {
                 "type": "code",
-                "item": [
-                  "true"
-                ]
+                "item": ["true"]
               }
         ],
         [
             "isFullWidthBelowMid",
             {
               "type": "code",
-              "item": [
-                "false",
-                "true"
-              ]
+              "item": ["true", "false"]
             },
             "If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen.",
             {
               "type": "code",
-              "item": [
-                "false"
-              ]
+              "item": ["false"]
             }
         ],
         [
             "isLoading",
             {
               "type": "code",
-              "item": [
-                "false",
-                "true"
-              ]
+              "item": ["true", "false"]
             },
             "When true, displays a loading spinner in the modal",
             {
               "type": "code",
-              "item": [
-                "false"
-              ]
+              "item": ["false"]
             }
         ],
         [
             "isOpen",
             {
               "type": "code",
-              "item": [
-                "false",
-                "true"
-              ]
+              "item": ["true", "false"]
             },
             "Controls if the modal element is open or closed",
             {
               "type": "code",
-              "item": [
-                "false"
-              ]
+              "item": ["false"]
             }
         ],
         [
-            "leadingAction",
+            "leadingActionText",
             {
                 "type": "code",
                 "item": []
             },
-            "An object representing the leading action of the modal."
+            "The text to display inside the leading action button."
+        ],
+        [
+            "leadingActionVariant",
+            "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",
+          "See pie-button's variants",
+          "The variant of the supporting action button.",
+          {
+              "type": "code",
+              "item": ["\"ghost\""]
+          }
         ],
         [
             "position",
             {
                 "type": "code",
-                "item": ["top", "center"]
+                "item": ["\"top\"", "\"center\""]
             },
             "The position of the modal; this controls where it will appear on the page.",
             {
               "type": "code",
-              "item": [
-                "center"
-              ]
+              "item": ["\"center\""]
             }
         ],
         [
@@ -170,21 +171,13 @@
             "size",
             {
                 "type": "code",
-                "item": ["small", "medium", "large"]
+                "item": ["\"small\"", "\"medium\"", "\"large\""]
             },
             "Determines the maximum width of the modal. Large modals will expand to fill the entire page at narrow viewports.",
             {
                 "type": "code",
-                "item": ["medium"]
+                "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,16 +99,26 @@ 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.',
+            description: 'The ARIA labels used for the modal leading action, supporting action, close and back buttons, as well as for the loading state.',
             control: 'object',
         },
     },
@@ -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,16 @@ 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
-        };
-
         return html`
         <pie-modal
             .isOpen="${this._isModalOpen}"
             hasBackButton
             hasStackedActions
             isFullWidthBelowMid
             heading="${this._localiseText('preferencesManagement.title')}"
-            .leadingAction="${modalActionProps}"
+            leadingActionText="${this._localiseText('preferencesManagement.cta.save.label')}"
+            leadingActionVariant="primary"
+            .aria=${{ leadingActionLabel: this._localiseText('preferencesManagement.cta.save.label') }}
             @pie-modal-leading-action-click="${this._handlePreferencesSaved}"
             @pie-modal-back="${this._displayCookieBanner}">
                 ${this.renderModalContent()}