chore: update drawer elements (#619)

* chore(drawer): update header font-size

* chore(drawer): update close icon - use the same as modals

* chore(drawer): ensure all drawers show close icon

* test(drawer): update drawer snapshot

* chore(drawer): remove control for close button in storybook

* chore(drawer): update close button margin

* test(drawer): update drawer snapshot

Author: irenebritzolaki

src/components/Drawer/Drawer.stories.tsx

@@ -66,7 +66,6 @@ export const Default: StoryFn<DrawerArgs> = (args) => {
 };
 
 Default.args = {
-  headerCloseBtn: true,
   placement: "left",
   showMask: true,
 };
@@ -128,7 +127,6 @@ export const MultipleDrawers: StoryFn<DrawerArgs> = (args) => {
 };
 
 MultipleDrawers.args = {
-  headerCloseBtn: true,
   placement: "left",
   showMask: true,
 };

src/components/Drawer/__snapshots__/Drawer.test.tsx.snap

@@ -27,25 +27,25 @@ exports[`<Drawer/> matches snapshot with close button 1`] = `
       style="opacity: 0; transform: none;"
     >
       <header
-        class="css-zc36g1-drawerHeader-drawerHeader"
+        class="css-13we4q5-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
         <h2
-          class="css-1ibrhk6-headingContainer-headingContainer"
+          class="css-3lqpyc-headingContainer-headingContainer"
         >
           Title
         </h2>
         <button
           aria-label="Close drawer"
-          class="linkButton css-5ruphf-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+          class="close-button linkButton css-5ruphf-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
           type="button"
         >
           <span
             class="btn-text"
           >
             <svg-file-stub
-              height="24"
+              height="32"
             />
           </span>
         </button>
@@ -88,23 +88,36 @@ exports[`<Drawer/> matches snapshot with header, body and footer 1`] = `
       style="opacity: 0; transform: none;"
     >
       <header
-        class="css-zc36g1-drawerHeader-drawerHeader"
+        class="css-13we4q5-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
         <h2
-          class="css-1ibrhk6-headingContainer-headingContainer"
+          class="css-3lqpyc-headingContainer-headingContainer"
         >
           Test header
         </h2>
+        <button
+          aria-label="Close drawer"
+          class="close-button linkButton css-5ruphf-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+          type="button"
+        >
+          <span
+            class="btn-text"
+          >
+            <svg-file-stub
+              height="32"
+            />
+          </span>
+        </button>
       </header>
       <div
         class="css-1vbxgux-drawerBody"
       >
         Test body
       </div>
       <footer
-        class="css-123pp4v-footerContainer-footerContainer"
+        class="css-ss7yvy-footerContainer-footerContainer"
         data-testid="drawer-footer"
       >
         Test footer
@@ -146,15 +159,28 @@ exports[`<Drawer/> matches snapshot with noGutters Header 1`] = `
       style="opacity: 0; transform: none;"
     >
       <header
-        class="css-wmpb2t-drawerHeader-drawerHeader"
+        class="css-glijxi-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
         <h2
-          class="css-1ibrhk6-headingContainer-headingContainer"
+          class="css-3lqpyc-headingContainer-headingContainer"
         >
           Title
         </h2>
+        <button
+          aria-label="Close drawer"
+          class="close-button linkButton css-5ruphf-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+          type="button"
+        >
+          <span
+            class="btn-text"
+          >
+            <svg-file-stub
+              height="32"
+            />
+          </span>
+        </button>
       </header>
     </dialog>
   </div>
@@ -193,15 +219,28 @@ exports[`<Drawer/> matches snapshot with right placement 1`] = `
       style="opacity: 0; transform: translateX(100%) translateZ(0);"
     >
       <header
-        class="css-zc36g1-drawerHeader-drawerHeader"
+        class="css-13we4q5-drawerHeader-drawerHeader"
         data-testid="drawer-header"
         id="drawer-title"
       >
         <h2
-          class="css-1ibrhk6-headingContainer-headingContainer"
+          class="css-3lqpyc-headingContainer-headingContainer"
         >
           Title
         </h2>
+        <button
+          aria-label="Close drawer"
+          class="close-button linkButton css-5ruphf-baseButton-baseButton-solidButton-solidButton-outlineButton-outlineButton-ghostButton-ghostButton-linkButton-linkButton-iconBeforeButton-iconBeforeButton-iconAfterButton-iconAfterButton-btnContainer-btnContainer"
+          type="button"
+        >
+          <span
+            class="btn-text"
+          >
+            <svg-file-stub
+              height="32"
+            />
+          </span>
+        </button>
       </header>
     </dialog>
   </div>

src/components/Drawer/components/Header.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { SerializedStyles } from "@emotion/react";
 import Heading from "../../Heading/Heading";
 import Button from "../../Button/Button";
-import { CloseSVG } from "../../../icons/";
+import { CloseModalSVG } from "../../../icons/";
 import { drawerHeader } from "./styles";
 import { FCWithChildren } from "types/common";
 
@@ -12,8 +12,7 @@ export type HeaderProps = {
 };
 
 const Header: FCWithChildren<HeaderProps> = ({ onClose, noGutters = false, children }) => {
-  const title = typeof children === "string" ? <Heading>{children}</Heading> : children;
-  const showCloseButton = Boolean(onClose);
+  const title = typeof children === "string" ? <Heading size="md">{children}</Heading> : children;
 
   return (
     <header
@@ -22,18 +21,17 @@ const Header: FCWithChildren<HeaderProps> = ({ onClose, noGutters = false, child
       css={(): SerializedStyles => drawerHeader({ noGutters })}
     >
       {title}
-      {showCloseButton && (
-        <Button
-          type="button"
-          variant="link"
-          color="secondary"
-          noGutters
-          aria-label="Close drawer"
-          onClick={onClose}
-        >
-          <CloseSVG height={24} />
-        </Button>
-      )}
+      <Button
+        type="button"
+        variant="link"
+        color="secondary"
+        className="close-button"
+        noGutters
+        aria-label="Close drawer"
+        onClick={onClose}
+      >
+        <CloseModalSVG height={32} />
+      </Button>
     </header>
   );
 };

src/components/Drawer/components/styles.ts

@@ -14,6 +14,10 @@ export const drawerHeader = ({ noGutters }: { noGutters: boolean }): SerializedS
     ${mq["sm"]} {
       padding: ${noGutters ? 0 : "1rem 2rem"};
     }
+
+    .close-button {
+      margin-inline-end: -0.8rem;
+    }
   `;
 };