[NO-JIRA] Update BpkModalV2 (#2869)

Skyscanner · Jun 6, 2023 · 5816eb3 · 5816eb3
1 parent 446dbda
commit 5816eb3
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 86 deletions.
diff --git a/examples/bpk-component-modal-v2/examples.tsx b/examples/bpk-component-modal-v2/examples.tsx
@@ -23,7 +23,7 @@ import { Component, Children } from 'react';
 import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text';
 import BpkButton from '../../packages/bpk-component-button';
 import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils';
-import { BpkModalV2 } from '../../packages/bpk-component-modal/src/BpkModalV2/BpkModal';
+import { BpkModalV2 } from '../../packages/bpk-component-modal';
 
 import STYLES from './examples.module.scss';
 
@@ -161,8 +161,8 @@ const LongTitleExample = () => (
 const HeaderNoTitleExample = () => (
   <ModalContainer>
     <Paragraph>
-      This is a default modal using the HTML dialog element without a header.
-      You can put anything you want in here.
+      This is a modal using the HTML dialog element without a header. You can
+      put anything you want in here.
     </Paragraph>
   </ModalContainer>
 );
@@ -199,31 +199,41 @@ const NoPaddingExample = () => (
 
 const NoPaddingNoTitleExample = () => (
   <ModalContainer padded>
-    This is a default modal. You can put anything you want in here.
+    This is a modal without padding. You can put anything you want in here.
   </ModalContainer>
 );
 
 const FullScreenOnDesktopExample = () => (
   <ModalContainer title="Modal title" fullScreenOnDesktop>
-    This is a default modal. You can put anything you want in here.
+    This is a full screen modal for desktop. You can put anything you want in
+    here.
   </ModalContainer>
 );
 
 const FullScreenOnDesktopNoTitleExample = () => (
   <ModalContainer fullScreenOnDesktop>
-    This is a default modal. You can put anything you want in here.
+    This is a full screen modal for mobile without title. You can put anything
+    you want in here.
   </ModalContainer>
 );
 
 const NoFullScreenOnMobileExample = () => (
   <ModalContainer title="Modal title" noFullScreenOnMobile>
-    This is a default modal. You can put anything you want in here.
+    This is a no full screen modal for mobile. You can put anything you want in
+    here.
   </ModalContainer>
 );
 
 const NoFullScreenOnMobileNoTitleExample = () => (
   <ModalContainer noFullScreenOnMobile>
-    This is a default modal. You can put anything you want in here.
+    This is a no full screen modal for mobile without title. You can put
+    anything you want in here.
+  </ModalContainer>
+);
+
+const NoHeaderExample = () => (
+  <ModalContainer showHeader={false}>
+    This is a modal without header. You can put anything you want in here.
   </ModalContainer>
 );
 
@@ -266,5 +276,6 @@ export {
   FullScreenOnDesktopNoTitleExample,
   NoFullScreenOnMobileExample,
   NoFullScreenOnMobileNoTitleExample,
+  NoHeaderExample,
   MultipleModalsExample,
 };
diff --git a/examples/bpk-component-modal-v2/stories.tsx b/examples/bpk-component-modal-v2/stories.tsx
@@ -30,6 +30,7 @@ import {
   FullScreenOnDesktopNoTitleExample,
   NoFullScreenOnMobileExample,
   NoFullScreenOnMobileNoTitleExample,
+  NoHeaderExample,
   MultipleModalsExample,
 } from './examples';
 
@@ -50,4 +51,5 @@ export const FullScreenOnDesktop = FullScreenOnDesktopExample;
 export const FullScreenOnDesktopNoTitle = FullScreenOnDesktopNoTitleExample;
 export const NoFullScreenOnMobile = NoFullScreenOnMobileExample;
 export const NoFullScreenOnMobileNoTitle = NoFullScreenOnMobileNoTitleExample;
+export const NoHeader = NoHeaderExample;
 export const MultipleModals = MultipleModalsExample;
diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal-test.tsx b/packages/bpk-component-modal/src/BpkModalV2/BpKModal-test.tsx
@@ -24,12 +24,10 @@ import { type BpkModalV2 as DialogType } from './BpkModal';
 describe('BpkModalV2', () => {
   const props = {
     id: 'bpk-modal-element',
-    ariaLabelledby: 'bpk-modal-label-my-dialog',
+    ariaLabelledby: 'bpk-modal-element',
     closeLabel: 'bpk-modal-button-close',
     isOpen: true,
     onClose: jest.fn(),
-    title: 'Backpack Dialog Element',
-    showHeader: true,
   };
 
   beforeEach(() => {
@@ -47,7 +45,7 @@ describe('BpkModalV2', () => {
 
     it('should render correctly with content', () => {
       const { asFragment } = render(
-        <BpkModalV2 {...props}>
+        <BpkModalV2 {...props} title="Modal with dialog element">
           <div>Content</div>
         </BpkModalV2>,
       );
@@ -91,15 +89,39 @@ describe('BpkModalV2', () => {
       expect(document.getElementById('bpk-modal-element')).toBeInTheDocument();
     });
 
-    it('should not render title if title is set to empty string', () => {
+    it('should render title correctly', () => {
+      render(
+        <BpkModalV2 {...props} title="Modal with dialog element">
+          <div>Content</div>
+        </BpkModalV2>,
+      );
+
+      expect(screen.getByText('Modal with dialog element')).toBeInTheDocument();
+      expect(screen.getByTitle('bpk-modal-button-close')).toBeInTheDocument();
+    });
+
+    it('should not render title when title does not exist', () => {
+      render(
+        <BpkModalV2 {...props}>
+          <div>Content</div>
+        </BpkModalV2>,
+      );
+
+      expect(
+        screen.queryByText('Modal with dialog element'),
+      ).not.toBeInTheDocument();
+      expect(screen.getByTitle('bpk-modal-button-close')).toBeInTheDocument();
+    });
+
+    it('should not render header when showHeader is false', () => {
       render(
-        <BpkModalV2 {...props} title="">
+        <BpkModalV2 {...props} showHeader={false}>
           <div>Content</div>
         </BpkModalV2>,
       );
 
-      expect(screen.queryByRole('Dialog Element')).not.toBeInTheDocument();
-      expect(document.getElementsByClassName('bpk-close-button')).toBeTruthy();
+      expect(document.getElementById('bpk-modal-element')).toBeInTheDocument();
+      expect(document.getElementById('bpk-modal-element-title')).toBeNull();
     });
 
     it('should call showModal to open dialog', () => {

diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss
@@ -71,7 +71,7 @@
   margin: 0 auto;
   padding: 0;
   border: none;
-  background: $bpk-canvas-contrast-day;
+  background: $bpk-modal-background-color;
   overflow-y: scroll;
   inset-block-start: 0;
   inset-inline: 0;

diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts
@@ -29,6 +29,7 @@ export type Props = {
   noFullScreenOnMobile?: boolean;
   onClose: () => void | null;
   padded?: boolean;
+  showHeader?: boolean;
   title?: string | null;
   wide?: boolean;
 };

diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx
@@ -38,10 +38,39 @@ export type Props = {
   noFullScreenOnMobile?: boolean;
   onClose: () => void | null;
   padded?: boolean;
+  showHeader?: boolean;
   title?: string | null;
   wide?: boolean;
 };
 
+const Header = ({
+  closeLabel,
+  id,
+  onClose,
+  title,
+}: {
+  closeLabel: string;
+  id: string | undefined;
+  onClose: () => void | null;
+  title?: string | null;
+}) => {
+  if (title) {
+    return (
+      <div id={id} className={getClassName('bpk-modal__header-title')}>
+        <div className={getClassName('bpk-modal__header-title-container')}>
+          <Heading>{title}</Heading>
+        </div>
+        <BpkCloseButton label={closeLabel} onClick={onClose} />
+      </div>
+    );
+  }
+  return (
+    <div className={getClassName('bpk-modal__button-container')}>
+      <BpkCloseButton label={closeLabel} onClick={onClose} />
+    </div>
+  );
+};
+
 const Heading = withDefaultProps(BpkText, {
   textStyle: TEXT_STYLES.label1,
   tagName: 'h2',
@@ -75,6 +104,7 @@ export const BpkModalV2 = (props: Props) => {
     noFullScreenOnMobile,
     onClose,
     padded,
+    showHeader = true,
     title,
     wide,
   } = props;
@@ -116,12 +146,6 @@ export const BpkModalV2 = (props: Props) => {
     padded && 'bpk-modal__container--padded',
   );
 
-  const closeButton = (
-    <div>
-      <BpkCloseButton label={closeLabel} onClick={onClose} />
-    </div>
-  );
-
   return isOpen ? (
     <div
       className={getClassName(
@@ -144,17 +168,13 @@ export const BpkModalV2 = (props: Props) => {
         data-open={isOpen}
         ref={ref}
       >
-        {title ? (
-          <div className={getClassName('bpk-modal__header-title')}>
-            <div className={getClassName('bpk-modal__header-title-container')}>
-              <Heading>{title}</Heading>
-            </div>
-            {closeButton}
-          </div>
-        ) : (
-          <div className={getClassName('bpk-modal__button-container')}>
-            {closeButton}
-          </div>
+        {showHeader && (
+          <Header
+            id={`${id}-title`}
+            title={title}
+            closeLabel={closeLabel}
+            onClose={onClose}
+          />
         )}
         <div className={contentClassNames}>{children}</div>
       </dialog>

diff --git a/packages/bpk-component-modal/src/BpkModalV2/README.md b/packages/bpk-component-modal/src/BpkModalV2/README.md
@@ -85,5 +85,6 @@ class App extends Component {
 | fullScreenOnMobile    | bool     | false    | false         |
 | noFullScreenOnMobile  | bool     | false    | false         |
 | padded                | bool     | false    | false         |
+| showHeader            | bool     | false    | true          |
 | title                 | string   | false    | ''            |
 | wide                  | bool     | false    | false         |
diff --git a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap
@@ -11,44 +11,33 @@ exports[`BpkModalV2 is not supported should render correctly with polyfill and c
       id="bpk-modal-element-polyfill"
     />
     <dialog
-      aria-labelledby="bpk-modal-label-my-dialog"
+      aria-labelledby="bpk-modal-element"
       class="bpk-modal"
       data-open="true"
       id="bpk-modal-element"
     >
       <div
-        class="bpk-modal__header-title"
+        class="bpk-modal__button-container"
       >
-        <div
-          class="bpk-modal__header-title-container"
+        <button
+          aria-label="bpk-modal-button-close"
+          class="bpk-close-button"
+          title="bpk-modal-button-close"
+          type="button"
         >
-          <h2
-            class="bpk-text bpk-text--label-1 bpk-modal__title"
+          <svg
+            class="bpk-close-button__icon"
+            height="16"
+            style="width: 1rem; height: 1rem;"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Backpack Dialog Element
-          </h2>
-        </div>
-        <div>
-          <button
-            aria-label="bpk-modal-button-close"
-            class="bpk-close-button"
-            title="bpk-modal-button-close"
-            type="button"
-          >
-            <svg
-              class="bpk-close-button__icon"
-              height="16"
-              style="width: 1rem; height: 1rem;"
-              viewBox="0 0 24 24"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M5.587 3.467a1.5 1.5 0 10-2.194 2.046q.036.038.074.074l6.438 6.44-6.44 6.44a1.5 1.5 0 002.122 2.12l6.44-6.438 6.44 6.44a1.5 1.5 0 002.12-2.122l-6.438-6.44 6.44-6.44a1.5 1.5 0 00-2.122-2.12l-6.44 6.438-6.44-6.44z"
-              />
-            </svg>
-          </button>
-        </div>
+            <path
+              d="M5.587 3.467a1.5 1.5 0 10-2.194 2.046q.036.038.074.074l6.438 6.44-6.44 6.44a1.5 1.5 0 002.122 2.12l6.44-6.438 6.44 6.44a1.5 1.5 0 002.12-2.122l-6.438-6.44 6.44-6.44a1.5 1.5 0 00-2.122-2.12l-6.44 6.438-6.44-6.44z"
+            />
+          </svg>
+        </button>
       </div>
       <div
         class="bpk-modal__container"
@@ -68,44 +57,43 @@ exports[`BpkModalV2 is supported should render correctly with content 1`] = `
     class="bpk-modal-wrapper"
   >
     <dialog
-      aria-labelledby="bpk-modal-label-my-dialog"
+      aria-labelledby="bpk-modal-element"
       class="bpk-modal"
       data-open="true"
       id="bpk-modal-element"
     >
       <div
         class="bpk-modal__header-title"
+        id="bpk-modal-element-title"
       >
         <div
           class="bpk-modal__header-title-container"
         >
           <h2
             class="bpk-text bpk-text--label-1 bpk-modal__title"
           >
-            Backpack Dialog Element
+            Modal with dialog element
           </h2>
         </div>
-        <div>
-          <button
-            aria-label="bpk-modal-button-close"
-            class="bpk-close-button"
-            title="bpk-modal-button-close"
-            type="button"
+        <button
+          aria-label="bpk-modal-button-close"
+          class="bpk-close-button"
+          title="bpk-modal-button-close"
+          type="button"
+        >
+          <svg
+            class="bpk-close-button__icon"
+            height="16"
+            style="width: 1rem; height: 1rem;"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              class="bpk-close-button__icon"
-              height="16"
-              style="width: 1rem; height: 1rem;"
-              viewBox="0 0 24 24"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M5.587 3.467a1.5 1.5 0 10-2.194 2.046q.036.038.074.074l6.438 6.44-6.44 6.44a1.5 1.5 0 002.122 2.12l6.44-6.438 6.44 6.44a1.5 1.5 0 002.12-2.122l-6.438-6.44 6.44-6.44a1.5 1.5 0 00-2.122-2.12l-6.44 6.438-6.44-6.44z"
-              />
-            </svg>
-          </button>
-        </div>
+            <path
+              d="M5.587 3.467a1.5 1.5 0 10-2.194 2.046q.036.038.074.074l6.438 6.44-6.44 6.44a1.5 1.5 0 002.122 2.12l6.44-6.438 6.44 6.44a1.5 1.5 0 002.12-2.122l-6.438-6.44 6.44-6.44a1.5 1.5 0 00-2.122-2.12l-6.44 6.438-6.44-6.44z"
+            />
+          </svg>
+        </button>
       </div>
       <div
         class="bpk-modal__container"