@justeattakeaway/pie-modal 0.13.0 → 0.16.0

package/src/modal.scss

@@ -33,10 +33,24 @@
     --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;
     }
 
+    // We need to override the icon sizes at different screen sizes regardless of size prop passed in
+    pie-icon-button {
+        @media (max-width: $breakpoint-wide) {
+            --btn-dimension: 40px;
+        }
+    }
+
+
     &[open] {
         // We only apply this when the modal is open,
         // otherwise it interferes with the native
@@ -110,6 +124,16 @@
         }
     }
 
+    &[position='top'] {
+        margin-block-start: var(--dt-spacing-j);
+
+        &[isfullwidthbelowmid] {
+            @media (max-width: calc($breakpoint-wide - 1px)) {
+                margin-block-start: var(--dt-spacing-none);
+            }
+        }
+    }
+
     // We need to pull in the token directly here because the
     // pseudo element `::backdrop` doesn't seem to pick up custom css properties.
     &::backdrop {
@@ -131,24 +155,51 @@
         }
     }
 
-    & .c-modal-header {
-        --modal-header-padding: var(--dt-spacing-e);
+    // 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;
+            }
+        }
+    }
 
-        padding-inline: var(--modal-header-padding);
-        padding-block: var(--modal-header-padding);
+    & .c-modal-header {
+        padding-inline: var(--dt-spacing-d);
+        padding-block: 14px; // This is deliberately not a custom property
+        display: grid;
+        grid-template-areas:
+            'back heading close'
+            '. heading .';
+        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
         align-items: center;
-        display: flex;
+
+        @media (min-width: $breakpoint-wide) {
+            padding-inline: var(--dt-spacing-e);
+            padding-block: 20px; // This is deliberately not a custom property
+        }
     }
 
     &[hasbackbutton] .c-modal-header {
-        padding-block: var(--dt-spacing-c);
-        padding-inline-start: var(--dt-spacing-c);
+        padding-block: var(--dt-spacing-b);
+        padding-inline-start: var(--dt-spacing-b);
+
+        @media (min-width: $breakpoint-wide) {
+            padding-block: var(--dt-spacing-c);
+            padding-inline-start: var(--dt-spacing-c);
+        }
     }
 
     &[isdismissible] .c-modal-header {
-        justify-content: space-between;
-        padding-block: var(--dt-spacing-c);
-        padding-inline-end: var(--dt-spacing-c);
+        padding-block: var(--dt-spacing-b);
+        padding-inline-end: var(--dt-spacing-b);
+
+        @media (min-width: $breakpoint-wide) {
+            padding-block: var(--dt-spacing-c);
+            padding-inline-end: var(--dt-spacing-c);
+        }
     }
 
     & .c-modal-heading {
@@ -160,16 +211,59 @@
         line-height: var(--modal-header-font-line-height);
         font-weight: var(--modal-header-font-weight);
         margin: 0;
+        grid-area: heading;
     }
 
     // Ensure correct padding when there is a back button in front of the heading
     &[hasbackbutton] .c-modal-heading {
-        margin-inline-start: var(--dt-spacing-c);
+        padding-inline-start: var(--dt-spacing-b);
+
+        @media (min-width: $breakpoint-wide) {
+            padding-inline-start: var(--dt-spacing-c);
+        }
     }
 
     // Ensure correct padding when there is a close button behind the heading
     &[isdismissible] .c-modal-heading {
-        margin-inline-end: var(--dt-spacing-e);
+        padding-inline-end: var(--dt-spacing-d);
+
+        @media (min-width: $breakpoint-wide) {
+            padding-inline-end: var(--dt-spacing-e);
+        }
+    }
+
+    & .c-modal-backBtn {
+        grid-area: back;
+    }
+
+    & .c-modal-closeBtn {
+        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 {
@@ -198,7 +292,7 @@
         --spinner-animation-iteration-count: infinite;
 
         position: relative;
-        min-block-size: 60px;
+        min-block-size: var(--dt-spacing-j);
 
         font-size: var(--modal-content-font-size);
         line-height: var(--modal-content-line-height);
@@ -207,8 +301,6 @@
         padding-inline: var(--modal-content-padding);
         padding-block: var(--modal-content-padding-block);
 
-        overflow-y: auto;
-
         &--scrollable {
             background:
                 // Scroll shadow cover
@@ -258,8 +350,4 @@
             opacity: 0;
         }
     }
-
-    & .c-modal-closeBtn {
-        margin-inline-start: auto;
-    }
 }

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

@@ -5,7 +5,7 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button';
 import {
     WebComponentTestWrapper,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
-import { renderTestPieModal } from '../helpers/index.ts';
+import { createScrollablePageHTML, renderTestPieModal } from '../helpers/index.ts';
 
 import { PieModal } from '@/index';
 import {
@@ -14,7 +14,7 @@ import {
     headingLevels,
 } from '@/defs';
 
-const modalSelector = '[data-test-id="pie-modal"]';
+const componentSelector = '[data-test-id="pie-modal"]';
 const backButtonSelector = '[data-test-id="modal-back-button"]';
 const closeButtonSelector = '[data-test-id="modal-close-button"]';
 
@@ -38,7 +38,7 @@ test.describe('modal', () => {
         });
 
         // Act
-        const modal = page.locator(modalSelector);
+        const modal = page.locator(componentSelector);
 
         // Assert
         expect(modal).toBeVisible();
@@ -109,7 +109,7 @@ test.describe('When modal is closed', () => {
                 },
             });
 
-            const modal = page.locator(modalSelector);
+            const modal = page.locator(componentSelector);
 
             // Act
             await page.click(closeButtonSelector);
@@ -159,7 +159,7 @@ test.describe('When modal is closed', () => {
             });
 
             // Act
-            await page.click(modalSelector, { position: { x: -10, y: -10 } }); // Click outside dialog
+            await page.click(componentSelector, { position: { x: -10, y: -10 } }); // Click outside dialog
 
             // Assert
             expect(events).toHaveLength(1); // TODO - Event object is null for this test
@@ -174,7 +174,7 @@ test.describe('When modal is closed', () => {
                 },
             });
 
-            const modal = await page.locator(modalSelector);
+            const modal = await page.locator(componentSelector);
 
             // Act
             await modal.click({ position: { x: -10, y: -10 } }); // Click outside dialog
@@ -355,7 +355,7 @@ test.describe('`isDismissible` prop', () => {
             // Act
             await page.click('body');
 
-            const element = await page.locator(modalSelector);
+            const element = await page.locator(componentSelector);
 
             const styles = await element.evaluate((modal) => {
                 const computedStyles = window.getComputedStyle(modal);
@@ -377,7 +377,7 @@ test.describe('`isDismissible` prop', () => {
                 },
             });
 
-            const modal = await page.locator(modalSelector);
+            const modal = await page.locator(componentSelector);
 
             // Act
             await page.keyboard.press('Escape');
@@ -419,7 +419,7 @@ test.describe('`isDismissible` prop', () => {
             // Act
             await page.locator('body').click();
 
-            const element = await page.locator(modalSelector);
+            const element = await page.locator(componentSelector);
 
             const styles = await element.evaluate((modal) => {
                 const computedStyles = window.getComputedStyle(modal);
@@ -443,7 +443,7 @@ test.describe('`isDismissible` prop', () => {
 
             // Act
             await page.keyboard.press('Escape');
-            const modal = await page.locator(modalSelector);
+            const modal = await page.locator(componentSelector);
 
             // Assert
             await expect(modal).toBeVisible();
@@ -451,6 +451,94 @@ test.describe('`isDismissible` prop', () => {
     });
 });
 
+test.describe('isOpen prop', () => {
+    test('should not render open when isOpen = false', async ({ mount, page }) => {
+        // Arrange
+        await mount(PieModal, {
+            props: {
+                isOpen: false,
+            },
+        });
+
+        // Assert
+        await expect(page.locator(componentSelector)).not.toBeVisible();
+    });
+
+    test('should render open when isOpen = true', async ({ mount, page }) => {
+        // Arrange
+        await mount(PieModal, {
+            props: {
+                isOpen: true,
+            },
+        });
+
+        // Assert
+        await expect(page.locator(componentSelector)).toBeVisible();
+    });
+});
+
+test.describe('scrolling logic', () => {
+    test('Should not be able to scroll when isOpen = true', async ({ page, mount }) => {
+        // Arrange
+        const modalComponent = renderTestPieModal();
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: {
+                    pageMode: true,
+                },
+                slots: {
+                    component: modalComponent,
+                    pageMarkup: createScrollablePageHTML(),
+                },
+            },
+        );
+
+        // Act
+        // Scroll 800 pixels down the page
+        await page.mouse.wheel(0, 5000);
+
+        // The mouse.wheel function causes scrolling, but doesn't wait for the scroll to finish before returning.
+        await page.waitForTimeout(3000);
+
+        // Assert
+        await expect.soft(page.getByText('Top of page copy')).toBeInViewport();
+        await expect(page.getByText('Bottom of page copy')).not.toBeInViewport();
+    });
+
+    test('Should scroll to the bottom when Pie Modal is closed', async ({ page, mount }) => {
+        // Arrange
+        const modalComponent = renderTestPieModal();
+
+        await mount(
+            WebComponentTestWrapper,
+            {
+                props: {
+                    pageMode: true,
+                },
+                slots: {
+                    component: modalComponent,
+                    pageMarkup: createScrollablePageHTML(),
+                },
+            },
+        );
+
+        // Act
+        await page.locator('[data-test-id="modal-close-button"]').click();
+
+        // Scroll 800 pixels down the page
+        await page.mouse.wheel(0, 5000);
+
+        // The mouse.wheel function causes scrolling, but doesn't wait for the scroll to finish before returning.
+        await page.waitForTimeout(3000);
+
+        // Assert
+        await expect.soft(page.getByText('Top of page copy')).not.toBeInViewport();
+        await expect(page.getByText('Bottom of page copy')).toBeInViewport();
+    });
+});
+
 test.describe('`hasBackButton` prop', () => {
     test.describe('when `true`', () => {
         test('should make the modal contain a back button', async ({ mount }) => {
@@ -519,10 +607,20 @@ test.describe('actions', () => {
                     props: {
                         heading: 'Modal Header',
                         isOpen: true,
+                        leadingAction: {
+                            text: 'Confirm',
+                            variant: 'primary',
+                            ariaLabel: 'Descriptive message',
+                        },
+                        supportingAction: {
+                            text: 'Cancel',
+                            variant: 'ghost',
+                            ariaLabel: 'Descriptive message',
+                        },
                     },
                 });
 
-                const modal = await page.locator(modalSelector);
+                const modal = await page.locator(componentSelector);
 
                 // Act
                 await page.click(buttonSelector);
@@ -537,13 +635,23 @@ test.describe('actions', () => {
                     props: {
                         heading: 'Modal Header',
                         isOpen: true,
+                        leadingAction: {
+                            text: 'Confirm',
+                            variant: 'primary',
+                            ariaLabel: 'Descriptive message',
+                        },
+                        supportingAction: {
+                            text: 'Cancel',
+                            variant: 'ghost',
+                            ariaLabel: 'Descriptive message',
+                        },
                     },
                 });
 
                 // Act
                 await page.click(buttonSelector);
                 const returnValue = await page.$eval(
-                    modalSelector,
+                    componentSelector,
                     (dialog : HTMLDialogElement) => dialog.returnValue,
                 );
 
@@ -553,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/helpers/index.ts

@@ -22,8 +22,10 @@ export const renderTestPieModal = ({
 // Creates some test page markup to test scroll locking
 export const createScrollablePageHTML = () => `<div>
         <h1>Test Page</h1>
+        <p>Top of page copy</p>
         <p> Test copy </p>
         <ol>
             ${'<li>List item</li>'.repeat(200)}
+            <li>Bottom of page copy</li>
         </ol>
     </div>`;