@justeattakeaway/pie-modal 0.14.0 → 0.17.0

package/src/modal.scss

@@ -1,4 +1,5 @@
 @use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+@use 'dialog-polyfill/dist/dialog-polyfill.css';
 
 // TODO - add to CSS lib once created
 *,
@@ -33,6 +34,12 @@
     --modal-bg-color: var(--dt-color-container-default);
     --modal-elevation: var(--dt-elevation-04);
 
+    // TODO: This should be moved into global CSS typography setting
+    // This should be imported by consuming apps and set on the application body
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+
     &:focus-visible {
         outline: none;
     }
@@ -44,6 +51,7 @@
         }
     }
 
+
     &[open] {
         // We only apply this when the modal is open,
         // otherwise it interferes with the native
@@ -148,6 +156,17 @@
         }
     }
 
+    // When hasStackedActions is set
+    // change the direction of the footer flex container so buttons are full width of modal
+    &[hasstackedactions] {
+        & .c-modal-footer {
+            // TODO: Move breakpoint sizes into shared CSS component utilities
+            @media (max-width: calc($breakpoint-wide - 1px)) {
+                flex-direction: column;
+            }
+        }
+    }
+
     & .c-modal-header {
         padding-inline: var(--dt-spacing-d);
         padding-block: 14px; // This is deliberately not a custom property
@@ -222,6 +241,32 @@
         grid-area: close;
     }
 
+    &[isfooterpinned] .c-modal-content,
+    & .c-modal-scrollContainer {
+        overflow-y: auto;
+    }
+
+    & .c-modal-scrollContainer {
+        // These are the shadows used to indicate scrolling above and below content
+        --bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));
+        --bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
+        --bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
+        --bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
+
+        // Sizes of the scroll shadows
+        --bg-size-scroll-start: 100% 40px;
+        --bg-size-scroll-end: 100% 40px;
+        --bg-size-scroll-top: 100% 16px;
+        --bg-size-scroll-bottom: 100% 16px;
+
+        background: var(--bg-scroll-start), var(--bg-scroll-end), var(--bg-scroll-top), var(--bg-scroll-bottom);
+        background-repeat: no-repeat;
+        background-color: var(--dt-color-container-default);
+        background-size: var(--bg-size-scroll-start), var(--bg-size-scroll-end), var(--bg-size-scroll-top), var(--bg-size-scroll-bottom);
+
+        background-attachment: local, local, scroll, scroll;
+    }
+
     & .c-modal-content {
         // Modal content Custom Props
         --modal-content-font-size: calc(var(--dt-font-size-16) * 1px);
@@ -257,8 +302,6 @@
         padding-inline: var(--modal-content-padding);
         padding-block: var(--modal-content-padding-block);
 
-        overflow-y: auto;
-
         &--scrollable {
             background:
                 // Scroll shadow cover

package/test/component/pie-modal.spec.ts

@@ -612,6 +612,11 @@ test.describe('actions', () => {
                             variant: 'primary',
                             ariaLabel: 'Descriptive message',
                         },
+                        supportingAction: {
+                            text: 'Cancel',
+                            variant: 'ghost',
+                            ariaLabel: 'Descriptive message',
+                        },
                     },
                 });
 
@@ -635,6 +640,11 @@ test.describe('actions', () => {
                             variant: 'primary',
                             ariaLabel: 'Descriptive message',
                         },
+                        supportingAction: {
+                            text: 'Cancel',
+                            variant: 'ghost',
+                            ariaLabel: 'Descriptive message',
+                        },
                     },
                 });
 
@@ -651,3 +661,156 @@ test.describe('actions', () => {
         });
     });
 });
+
+test.describe('Props: `aria`', () => {
+    test.describe('when aria exist', () => {
+        test('should render component elements with the correct aria-labels', async ({ mount }) => {
+            // Arrange
+            const component = await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: true,
+                    isLoading: true,
+                    hasBackButton: true,
+                    aria: {
+                        close: 'Close label info',
+                        back: 'Back label info',
+                        loading: 'Loading label info',
+                    },
+                },
+            });
+
+            // Act
+            // Close button
+            const closeButton = await component.locator(closeButtonSelector);
+            const ariaCloseLabel = await closeButton.getAttribute('aria-label');
+
+            // Back button
+            const backButton = await component.locator(backButtonSelector);
+            const ariaBackLabel = await backButton.getAttribute('aria-label');
+
+            // Assert
+            await expect(ariaCloseLabel).toBe('Close label info');
+            await expect(ariaBackLabel).toBe('Back label info');
+        });
+
+        test.describe('when modal `isloading` is true', () => {
+            test('should render component with the correct aria values: `aria-label` & `aria-busy`', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieModal, {
+                    props: {
+                        isOpen: true,
+                        isLoading: true,
+                        aria: {
+                            loading: 'Loading label info',
+                        },
+                    },
+                });
+
+                // Loading state
+                const pieModalComponent = await component.locator(componentSelector);
+                const ariaLoadingLabel = await pieModalComponent.getAttribute('aria-label');
+                const ariaLoadingBusy = await pieModalComponent.getAttribute('aria-busy');
+
+                // Assert
+                await expect(ariaLoadingLabel).toBe('Loading label info');
+                await expect(ariaLoadingBusy).toBe('true');
+            });
+        });
+
+        test.describe('when modal `isLoading` is dynamically changing from `isLoading: true` to `isLoading: false`', () => {
+            test('should dynamically add, remove, and update `arial-label` & `aria-busy` labels', async ({ mount }) => {
+                // Arrange
+                const component = await mount(PieModal, {
+                    props: {
+                        isOpen: true,
+                        isLoading: true,
+                        aria: {
+                            loading: 'Loading label info',
+                        },
+                    },
+                });
+
+                const pieModalComponent = await component.locator(componentSelector);
+                let ariaLoadingLabel = await pieModalComponent.getAttribute('aria-label');
+                let ariaLoadingBusy = await pieModalComponent.getAttribute('aria-busy');
+
+                // Assert: When `isLoading: true`
+                await expect(ariaLoadingLabel).toBe('Loading label info');
+                await expect(ariaLoadingBusy).toBe('true');
+
+                await component.update({ props: { isLoading: false } });
+
+                ariaLoadingLabel = await pieModalComponent.getAttribute('aria-label');
+                ariaLoadingBusy = await pieModalComponent.getAttribute('aria-busy');
+
+                // Assert: When `isLoading: false`
+                await expect(ariaLoadingLabel).toBeNull();
+                await expect(ariaLoadingBusy).toBe('false');
+            });
+        });
+    });
+
+    test.describe('when aria does not exist', () => {
+        test('should not render the aria-labels', async ({ mount }) => {
+            // Arrange
+            const component = await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isDismissible: true,
+                    hasBackButton: true,
+                },
+            });
+
+            // Act
+            // Close button
+            const closeButton = await component.locator(closeButtonSelector);
+            const ariaCloseLabel = await closeButton.getAttribute('aria-label');
+
+            // Back button
+            const backButton = await component.locator(backButtonSelector);
+            const ariaBackLabel = await backButton.getAttribute('aria-label');
+
+            // Assert
+            await expect(ariaCloseLabel).toBe(null);
+            await expect(ariaBackLabel).toBe(null);
+        });
+    });
+
+    test.describe('when modal `isloading` is false', () => {
+        test('should not render aria-label', async ({ mount }) => {
+            // Arrange
+            const component = await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isLoading: false,
+                },
+            });
+
+            // Loading state
+            const pieModalComponent = await component.locator(componentSelector);
+            const ariaLoadingLabel = await pieModalComponent.getAttribute('aria-label');
+
+            // Assert
+            await expect(ariaLoadingLabel).toBe(null);
+        });
+
+        test('should set `aria-busy` to `false`', async ({ mount }) => {
+            // Arrange
+            const component = await mount(PieModal, {
+                props: {
+                    isOpen: true,
+                    isLoading: false,
+                },
+            });
+
+            // Loading state
+            const pieModalComponent = await component.locator(componentSelector);
+            const ariaLoadingBusy = await pieModalComponent.getAttribute('aria-busy');
+
+            // Assert
+            await expect(ariaLoadingBusy).toBe('false');
+        });
+    });
+});
+

package/test/visual/pie-modal.spec.ts

@@ -75,25 +75,25 @@ test.describe('Prop: `isFullWidthBelowMid`', () => {
 
     test.describe('when false', () => {
         (['small', 'medium'] as Array<ModalProps['size']>)
-        .forEach((size) => {
-            test(`should not be full width for a modal with size = ${size}`, async ({ page, mount }) => {
-                await mount(PieModal, {
-                    props: {
-                        heading: 'This is a modal heading',
-                        isFullWidthBelowMid: false,
-                        isOpen: true,
-                        size,
-                        leadingAction: {
-                            text: 'Confirm',
-                            variant: 'primary',
-                            ariaLabel: 'Confirmation text',
-                        },
-                    } as ModalProps,
+            .forEach((size) => {
+                test(`should not be full width for a modal with size = ${size}`, async ({ page, mount }) => {
+                    await mount(PieModal, {
+                        props: {
+                            heading: 'This is a modal heading',
+                            isFullWidthBelowMid: false,
+                            isOpen: true,
+                            size,
+                            leadingAction: {
+                                text: 'Confirm',
+                                variant: 'primary',
+                                ariaLabel: 'Confirmation text',
+                            },
+                        } as ModalProps,
+                    });
+
+                    await percySnapshot(page, `Modal - isFullWidthBelowMid = false, size = ${size}`);
                 });
-
-                await percySnapshot(page, `Modal - isFullWidthBelowMid = false, size = ${size}`);
             });
-        });
     });
 });
 
@@ -231,8 +231,6 @@ test.describe('Prop: `leadingAction`', () => {
             await mount(PieModal, {
                 props: {
                     heading: 'This is a modal heading',
-                    hasBackButton: true,
-                    isDismissible: true,
                     isOpen: true,
                     leadingAction: {
                         text: 'Confirm',
@@ -251,8 +249,6 @@ test.describe('Prop: `leadingAction`', () => {
             await mount(PieModal, {
                 props: {
                     heading: 'This is a modal heading',
-                    hasBackButton: true,
-                    isDismissible: true,
                     isOpen: true,
                     leadingAction: {
                         text: 'Confirm',
@@ -269,8 +265,6 @@ test.describe('Prop: `leadingAction`', () => {
             await mount(PieModal, {
                 props: {
                     heading: 'This is a modal heading',
-                    hasBackButton: true,
-                    isDismissible: true,
                     isOpen: true,
                     leadingAction: {
                         text: '',
@@ -287,8 +281,6 @@ test.describe('Prop: `leadingAction`', () => {
             await mount(PieModal, {
                 props: {
                     heading: 'This is a modal heading',
-                    hasBackButton: true,
-                    isDismissible: true,
                     isOpen: true,
                 } as ModalProps,
             });
@@ -298,7 +290,111 @@ test.describe('Prop: `leadingAction`', () => {
     });
 });
 
-test.describe('`position`', () => {
+test.describe('Prop: `supportingAction`', () => {
+    test.describe('when `leadingAction` prop exists', () => {
+        test('should display `supportingAction` correctly', async ({ mount, page }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isOpen: true,
+                    leadingAction: {
+                        text: 'Confirm',
+                        variant: 'primary',
+                        ariaLabel: 'Confirmation text',
+                    },
+                    supportingAction: {
+                        text: 'Cancel',
+                        variant: 'ghost',
+                        ariaLabel: 'Cancellation text',
+                    },
+                } as ModalProps,
+            });
+
+            await percySnapshot(page, 'Modal displays supportingAction alongside leadingAction');
+        });
+
+        test.describe('when prop is provided but the optional child properties of `supportingAction` are not provided', () => {
+            test('should fall back to default property', async ({ mount, page }) => {
+                await mount(PieModal, {
+                    props: {
+                        heading: 'This is a modal heading',
+                        isOpen: true,
+                        leadingAction: {
+                            text: 'Confirm',
+                            variant: 'primary',
+                            ariaLabel: 'Confirmation text',
+                        },
+                        supportingAction: {
+                            text: 'Cancel',
+                            ariaLabel: 'Confirmation text',
+                        },
+                    } as ModalProps,
+                });
+
+                await percySnapshot(page, 'Modal falls back to default variant property `ghost`');
+            });
+        });
+
+        test.describe('when `supportingAction` prop is provided but the `text` child property of `supportingAction` is empty', () => {
+            test('should not render supportingAction markup', async ({ mount, page }) => {
+                await mount(PieModal, {
+                    props: {
+                        heading: 'This is a modal heading',
+                        isOpen: true,
+                        leadingAction: {
+                            text: 'Confirm',
+                            variant: 'primary',
+                            ariaLabel: 'Confirmation text',
+                        },
+                        supportingAction: {
+                            text: '',
+                        },
+                    } as ModalProps,
+                });
+
+                await percySnapshot(page, 'Modal will not render `supportingAction` button when `text` is empty');
+            });
+        });
+
+        test.describe('when `supportingAction` is not supplied', () => {
+            test('should not render supportingAction markup', async ({ mount, page }) => {
+                await mount(PieModal, {
+                    props: {
+                        heading: 'This is a modal heading',
+                        isOpen: true,
+                        leadingAction: {
+                            text: 'Confirm',
+                            variant: 'primary',
+                            ariaLabel: 'Confirmation text',
+                        },
+                    } as ModalProps,
+                });
+
+                await percySnapshot(page, 'Modal will not render `supportingAction` when it is not supplied');
+            });
+        });
+    });
+
+    test.describe('when `leadingAction` prop does not exist and `supportingAction` is supplied', () => {
+        test('should not render supportingAction markup', async ({ mount, page }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isOpen: true,
+                    supportingAction: {
+                        text: 'Cancel',
+                        variant: 'ghost',
+                        ariaLabel: 'Cancellation text',
+                    },
+                } as ModalProps,
+            });
+
+            await percySnapshot(page, 'Modal will not render `supportingAction` when `leadingAction` is not supplied');
+        });
+    });
+});
+
+test.describe('Prop: `position`', () => {
     positions.forEach((position) => {
         test(`should be positioned in the correct part of the page when position is: ${position}`, async ({ mount, page }) => {
             await mount(PieModal, {
@@ -318,3 +414,81 @@ test.describe('`position`', () => {
         });
     });
 });
+
+test.describe('Prop: `isFooterPinned`', () => {
+    [true, false].forEach((isFooterPinned) => {
+        test(`when isFooterPinned is: ${isFooterPinned}`, async ({ mount, page }) => {
+            await mount(PieModal, {
+                props: {
+                    heading: 'This is a modal heading',
+                    isOpen: true,
+                    isFooterPinned,
+                    leadingAction: {
+                        text: 'Confirm',
+                        variant: 'primary',
+                        ariaLabel: 'Confirmation text',
+                    },
+                } as ModalProps,
+                slots: {
+                    default: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus in magni
+                    quis obcaecati laboriosam est vero, perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor
+                    sit amet consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus in magni quis obcaecati laboriosam est vero,
+                    perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+                    Deleniti fugit id exercitationem repellendus in magni quis obcaecati laboriosam est vero, perspiciatis ratione porro dolore
+                    repudiandae ea numquam! Ipsa, fugiat aut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus
+                    in magni quis obcaecati laboriosam est vero, perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor sit amet
+                    consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus in magni quis obcaecati laboriosam est vero, perspiciatis ratione
+                    porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit id
+                    exercitationem repellendus in magni quis obcaecati laboriosam est vero,
+                    perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.
+
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus in magni
+                    quis obcaecati laboriosam est vero, perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor
+                    sit amet consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus in magni quis obcaecati laboriosam est vero,
+                    perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+                    Deleniti fugit id exercitationem repellendus in magni quis obcaecati laboriosam est vero, perspiciatis ratione porro dolore
+                    repudiandae ea numquam! Ipsa, fugiat aut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus
+                    in magni quis obcaecati laboriosam est vero, perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor sit amet
+                    consectetur adipisicing elit. Deleniti fugit id exercitationem repellendus in magni quis obcaecati laboriosam est vero, perspiciatis ratione
+                    porro dolore repudiandae ea numquam! Ipsa, fugiat aut.Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit id
+                    exercitationem repellendus in magni quis obcaecati laboriosam est vero,
+                    perspiciatis ratione porro dolore repudiandae ea numquam! Ipsa, fugiat aut.`,
+                },
+            });
+
+            await percySnapshot(page, `Modal isFooterPinned: ${isFooterPinned}`);
+        });
+    });
+});
+
+test.describe('Prop: `hasStackedActions`', () => {
+    test.describe('when true', () => {
+        (['small', 'medium', 'large'] as Array<ModalProps['size']>)
+            .forEach((size) => {
+                test(`should display actions full width (at narrow viewports – with leading action on top) for a modal with size = ${size}`, async ({ page, mount }) => {
+                    await mount(PieModal, {
+                        props: {
+                            heading: 'This is a modal heading',
+                            hasStackedActions: true,
+                            isOpen: true,
+                            size,
+                            leadingAction: {
+                                text: 'Confirm',
+                                variant: 'primary',
+                                ariaLabel: 'Confirmation text',
+                            },
+                            supportingAction: {
+                                text: 'Cancel',
+                                variant: 'ghost',
+                                ariaLabel: 'Cancel and close modal',
+                            },
+                        } as ModalProps,
+                    });
+
+                    await percySnapshot(page, `Modal - hasStackedActions = true, size = ${size}`);
+                });
+            });
+    });
+});

package/tsconfig.json

@@ -4,5 +4,5 @@
     "baseUrl": ".",
     "rootDir": ".",
   },
-  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts"],
+  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"],
 }