[IRN-5328] [BpkDrawer] supports non-padded content (#3646)

* [IRN-5328] BpkDrawer supports non-padded content * Add logic to optionally disable padding * Convert content to TS and add component test scenario * update snap * Convert test to TS * Fix type
Skyscanner · Oct 29, 2024 · 0a6f174 · 0a6f174
1 parent 6d53c2e
commit 0a6f174
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 78 deletions.
diff --git a/examples/bpk-component-drawer/examples.js b/examples/bpk-component-drawer/examples.js
@@ -262,10 +262,28 @@ const WithFullHeightContentExample = () => (
   </DrawerContainer>
 );
 
+const WithNonPaddedContentExample = () => (
+  <DrawerContainer
+    title="Drawer title"
+    closeLabel="Close drawer"
+    buttonText="Open drawer"
+    getApplicationElement={() => document.getElementById('pagewrap')}
+    padded={false}
+  >
+    <div className={getClassName('bpk-drawer-content-full-width')}>
+      <p>
+        This has default padding disabled to give full control of the layout
+        e.g. full width background color.
+      </p>
+    </div>
+  </DrawerContainer>
+);
+
 export {
   DefaultExample,
   OverflowingExamples,
   CloseButtonTextExample,
   WithVisuallyHiddenTitleExample,
   WithFullHeightContentExample,
+  WithNonPaddedContentExample,
 };
diff --git a/examples/bpk-component-drawer/examples.module.scss b/examples/bpk-component-drawer/examples.module.scss
@@ -30,3 +30,15 @@
 .bpk-drawer-button {
   margin: auto auto 0;
 }
+
+.bpk-drawer-content-full-width {
+  height: 100%;
+  padding: tokens.bpk-spacing-base();
+  background-color: tokens.$bpk-canvas-contrast-day;
+
+  p {
+    padding: tokens.bpk-spacing-base();
+    border-radius: tokens.$bpk-border-radius-md;
+    background-color: tokens.$bpk-surface-default-day;
+  }
+}
diff --git a/examples/bpk-component-drawer/stories.js b/examples/bpk-component-drawer/stories.js
@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-
 import BkpDrawer from '../../packages/bpk-component-drawer/src/BpkDrawer';
 
 import {
@@ -25,6 +24,7 @@ import {
   CloseButtonTextExample,
   WithVisuallyHiddenTitleExample,
   WithFullHeightContentExample,
+  WithNonPaddedContentExample,
 } from './examples';
 
 export default {
@@ -39,3 +39,5 @@ export const CloseButtonText = CloseButtonTextExample;
 export const WithVisuallyHiddenTitle = WithVisuallyHiddenTitleExample;
 
 export const WithFullHeightContent = WithFullHeightContentExample;
+
+export const WithNonPaddedContent = WithNonPaddedContentExample;
diff --git a/packages/bpk-component-drawer/src/BpkDrawer.js b/packages/bpk-component-drawer/src/BpkDrawer.js
@@ -42,6 +42,7 @@ type Props = {
   closeLabel: ?string,
   closeText: ?string,
   hideTitle: ?boolean,
+  padded?: boolean,
 };
 
 type State = {
@@ -118,6 +119,7 @@ BpkDrawer.defaultProps = {
   closeLabel: null,
   closeText: null,
   hideTitle: false,
+  padded: true,
 };
 
 export default BpkDrawer;
diff --git a/...onent-drawer/src/BpkDrawerContent-test.js → ...nent-drawer/src/BpkDrawerContent-test.tsx b/...onent-drawer/src/BpkDrawerContent-test.js → ...nent-drawer/src/BpkDrawerContent-test.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
+import type { ReactElement } from 'react';
 
 import { render } from '@testing-library/react';
 
@@ -25,7 +25,7 @@ import BpkDrawerContent from './BpkDrawerContent';
 jest.mock(
   'react-transition-group/Transition',
   () =>
-    ({ children }) =>
+    ({ children }: { children: (state: string) => ReactElement }) =>
       children('entered'),
 );
 
@@ -63,6 +63,22 @@ describe('BpkDrawerContent', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should render correctly when it has padded=true', () => {
+    const { asFragment } = render(
+      <BpkDrawerContent
+        id="my-drawer"
+        title="Drawer title"
+        onClose={jest.fn()}
+        onCloseAnimationComplete={jest.fn()}
+        dialogRef={jest.fn()}
+        padded
+      >
+        Drawer content
+      </BpkDrawerContent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should render correctly when it has a contentClassName', () => {
     const { asFragment } = render(
       <BpkDrawerContent

diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss b/packages/bpk-component-drawer/src/BpkDrawerContent.module.scss
@@ -103,8 +103,11 @@
 
   &__content {
     height: 100%;
-    padding: tokens.bpk-spacing-base();
     flex: 1 1 100%;
     overflow-y: auto;
   }
+
+  &__content--padded {
+    padding: tokens.bpk-spacing-base();
+  }
 }
diff --git a/...-component-drawer/src/BpkDrawerContent.js → ...component-drawer/src/BpkDrawerContent.tsx b/...-component-drawer/src/BpkDrawerContent.js → ...component-drawer/src/BpkDrawerContent.tsx
@@ -16,16 +16,16 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
+import type { ReactNode } from 'react';
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Transition from 'react-transition-group/Transition';
 
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from '../../bpk-component-close-button';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from '../../bpk-component-link';
 import { cssModules } from '../../bpk-react-utils';
 
@@ -34,42 +34,43 @@ import STYLES from './BpkDrawerContent.module.scss';
 const getClassName = cssModules(STYLES);
 
 type Props = {
-  children: Node,
-  dialogRef: () => mixed,
-  onCloseAnimationComplete: () => mixed,
-  onClose: () => mixed,
+  children: ReactNode,
+  dialogRef: () => React.RefObject<HTMLElement>,
+  onCloseAnimationComplete: () => void,
+  onClose: () => void
   id: string,
   title: string,
-  className: ?string,
-  contentClassName: ?string,
-  closeLabel: string,
-  closeText: ?string,
-  isDrawerShown: boolean,
-  hideTitle: boolean,
-  closeOnScrimClick: boolean,
-  isIphone: boolean,
-  isIpad: boolean,
+  className?: string,
+  contentClassName?: string,
+  closeLabel?: string,
+  closeText?: string,
+  isDrawerShown?: boolean,
+  hideTitle?: boolean,
+  closeOnScrimClick?: boolean,
+  isIphone?: boolean,
+  isIpad?: boolean,
+  padded?: boolean,
 };
 
-const BpkDrawerContent = (props: Props) => {
-  const {
-    children,
-    className,
-    closeLabel,
-    closeOnScrimClick, // Unused from withScrim scrim HOC
-    closeText,
-    contentClassName,
-    dialogRef,
-    hideTitle,
-    id,
-    isDrawerShown,
-    isIpad, // Unused from withScrim scrim HOC
-    isIphone, // Unused from withScrim scrim HOC
-    onClose,
-    onCloseAnimationComplete,
-    title,
-    ...rest
-  } = props;
+const BpkDrawerContent = ({
+  children,
+  className,
+  closeLabel,
+  closeOnScrimClick = true, // Unused from withScrim scrim HOC
+  closeText,
+  contentClassName,
+  dialogRef,
+  hideTitle = false,
+  id,
+  isDrawerShown = true,
+  isIpad = false, // Unused from withScrim scrim HOC
+  isIphone = false, // Unused from withScrim scrim HOC
+  onClose,
+  onCloseAnimationComplete,
+  padded,
+  title,
+  ...rest
+}: Props) => {
 
   const drawerClassNames = [getClassName('bpk-drawer')];
   const headerClassNames = [getClassName('bpk-drawer__heading')];
@@ -83,6 +84,10 @@ const BpkDrawerContent = (props: Props) => {
     headerClassNames.push(getClassName('bpk-drawer__heading--visually-hidden'));
   }
 
+  if (padded) {
+    contentClassNames.push(getClassName('bpk-drawer__content--padded'));
+  }
+
   if (contentClassName) {
     contentClassNames.push(contentClassName);
   }
@@ -101,11 +106,10 @@ const BpkDrawerContent = (props: Props) => {
       in={isDrawerShown}
       onExited={onCloseAnimationComplete}
     >
-      {(status) => (
-        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+      {(status: string) => (
         <section
           id={id}
-          tabIndex="-1"
+          tabIndex={-1}
           role="dialog"
           key="dialog"
           aria-labelledby={headingId}
@@ -125,10 +129,7 @@ const BpkDrawerContent = (props: Props) => {
               <BpkButtonLink onClick={onClose}>{closeText}</BpkButtonLink>
             ) : (
               <div className={getClassName('bpk-drawer__close-button')}>
-                <BpkCloseButton
-                  label={closeLabel}
-                  onClick={onClose}
-                />
+                <BpkCloseButton label={closeLabel} onClick={onClose} />
               </div>
             )}
           </header>
@@ -139,34 +140,4 @@ const BpkDrawerContent = (props: Props) => {
   );
 };
 
-BpkDrawerContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  dialogRef: PropTypes.func.isRequired,
-  onCloseAnimationComplete: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  isDrawerShown: PropTypes.bool,
-  hideTitle: PropTypes.bool,
-  closeOnScrimClick: PropTypes.bool,
-  isIphone: PropTypes.bool,
-  isIpad: PropTypes.bool,
-};
-
-BpkDrawerContent.defaultProps = {
-  className: null,
-  contentClassName: null,
-  closeLabel: null,
-  closeText: null,
-  isDrawerShown: true,
-  hideTitle: false,
-  closeOnScrimClick: true,
-  isIphone: false,
-  isIpad: false,
-};
-
 export default BpkDrawerContent;
diff --git a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap
@@ -61,7 +61,7 @@ exports[`BpkDrawer should render correctly in the given target if renderTarget i
             </div>
           </header>
           <div
-            class="bpk-drawer__content"
+            class="bpk-drawer__content bpk-drawer__content--padded"
           >
             Drawer content
           </div>

diff --git a/...snapshots__/BpkDrawerContent-test.js.snap → ...napshots__/BpkDrawerContent-test.tsx.snap b/...snapshots__/BpkDrawerContent-test.js.snap → ...napshots__/BpkDrawerContent-test.tsx.snap
@@ -165,6 +165,59 @@ exports[`BpkDrawerContent should render correctly when it has a contentClassName
 </DocumentFragment>
 `;
 
+exports[`BpkDrawerContent should render correctly when it has padded=true 1`] = `
+<DocumentFragment>
+  <section
+    aria-labelledby="bpk-drawer-heading-my-drawer"
+    class="bpk-drawer bpk-drawer--entered"
+    id="my-drawer"
+    role="dialog"
+    tabindex="-1"
+  >
+    <header
+      class="bpk-drawer__header"
+    >
+      <h2
+        class="bpk-drawer__heading"
+        id="bpk-drawer-heading-my-drawer"
+      >
+        Drawer title
+      </h2>
+       
+      <div
+        class="bpk-drawer__close-button"
+      >
+        <button
+          class="bpk-close-button__default"
+          type="button"
+        >
+          <span
+            class="bpk-close-button-icon"
+          >
+            <svg
+              aria-hidden="true"
+              height="1rem"
+              viewBox="0 0 24 24"
+              width="1rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.587 3.467a1.5 1.5 0 1 0-2.194 2.046q.036.038.074.074l6.438 6.44-6.44 6.44a1.5 1.5 0 0 0 2.122 2.12l6.44-6.438 6.44 6.44a1.5 1.5 0 0 0 2.12-2.122l-6.438-6.44 6.44-6.44a1.5 1.5 0 0 0-2.122-2.12l-6.44 6.438-6.44-6.44z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </header>
+    <div
+      class="bpk-drawer__content bpk-drawer__content--padded"
+    >
+      Drawer content
+    </div>
+  </section>
+</DocumentFragment>
+`;
+
 exports[`BpkDrawerContent should render correctly with arbitrary attributes 1`] = `
 <DocumentFragment>
   <section