From 8fc7717b1ef9296ab77b6aef646e1b82f329f711 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 12:12:19 +0200
Subject: [PATCH 01/14] feat(drawer): standardized drawer footer props

---
 src/components/Drawer/Drawer.Footer.tsx  | 44 +++++++++++++++++++++---
 src/components/Drawer/Drawer.mocks.tsx   | 21 ++++++-----
 src/components/Drawer/Drawer.props.ts    |  3 +-
 src/components/Drawer/Drawer.stories.tsx | 18 ++++++++--
 src/components/Drawer/Drawer.test.tsx    |  6 ++--
 src/components/Drawer/Drawer.tsx         |  5 ---
 6 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/src/components/Drawer/Drawer.Footer.tsx b/src/components/Drawer/Drawer.Footer.tsx
index ae476075..04eeb9ad 100644
--- a/src/components/Drawer/Drawer.Footer.tsx
+++ b/src/components/Drawer/Drawer.Footer.tsx
@@ -16,14 +16,50 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactElement, ReactNode } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 
-export type DrawerFooter = ReactNode
+export type DrawerFooter = {
+  buttons?: ReactElement[]
+  extra?: ReactNode
+}
+
+export type CustomDrawerFooter = ReactElement
 
 export type FooterProps = {
-  footer: DrawerFooter,
+  footer?: DrawerFooter | CustomDrawerFooter,
+}
+
+const styles = {
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '16px 24px',
+    justifyContent: 'end',
+    gap: '8px',
+  },
+  extra: {
+    flex: 1,
+  },
+  footerButtons: {
+    display: 'flex',
+    'flex-direction': 'row-reverse',
+    gap: '8px',
+  },
 }
 
 export const Footer = ({ footer }: FooterProps): ReactElement => {
-  return <footer>{footer}</footer>
+  if (React.isValidElement(footer)) {
+    return <footer style={styles.footer}>{footer}</footer>
+  }
+
+  const drawerFooter = footer as DrawerFooter
+  const { buttons, extra } = drawerFooter
+  return <footer style={styles.footer}>
+    {(buttons || extra) && <>
+      <div style={styles.extra}>{extra}</div>
+      <div style={styles.footerButtons}>
+        {buttons}
+      </div>
+    </>}
+  </footer>
 }
diff --git a/src/components/Drawer/Drawer.mocks.tsx b/src/components/Drawer/Drawer.mocks.tsx
index 72fba39d..0783e44a 100644
--- a/src/components/Drawer/Drawer.mocks.tsx
+++ b/src/components/Drawer/Drawer.mocks.tsx
@@ -40,20 +40,26 @@ export const DrawerLipsum = (): ReactElement => {
   )
 }
 
-export const DrawerLipumTitle = (): ReactElement => {
+export const DrawerLipsumTitle = (): ReactElement => {
   return <span>{'Drawer Lipsum'}</span>
 }
 
-export const DrawerLipsumFooter = ({ closeDrawer }: {closeDrawer: () => void}): ReactElement => {
+export const DrawerLipsumFooterButton = (): ReactElement => {
+  const { closeDrawer } = useDrawer()
   return (
-    <div>
-      <Button onClick={closeDrawer}>
-        {'Close'}
-      </Button>
-    </div>
+    <Button onClick={closeDrawer}>
+      {'Close'}
+    </Button>
   )
 }
 
+export const drawerLipsumFooter = {
+  buttons: [
+    <DrawerLipsumFooterButton key="close-button" />,
+  ],
+  extra: 'Extra text',
+}
+
 export const WithOpenButton = (props: DrawerProps): ReactElement => {
   const { isVisible, openDrawer, closeDrawer } = useDrawer()
   return (
@@ -61,7 +67,6 @@ export const WithOpenButton = (props: DrawerProps): ReactElement => {
       <Button onClick={openDrawer}>Open Drawer</Button>
       <Drawer
         {...props}
-        footer={<DrawerLipsumFooter closeDrawer={closeDrawer} />}
         isVisible={isVisible}
         onClose={closeDrawer}
       >
diff --git a/src/components/Drawer/Drawer.props.ts b/src/components/Drawer/Drawer.props.ts
index fdff812b..424b6d96 100644
--- a/src/components/Drawer/Drawer.props.ts
+++ b/src/components/Drawer/Drawer.props.ts
@@ -18,6 +18,7 @@
 
 import { ReactNode } from 'react'
 
+import { CustomDrawerFooter, DrawerFooter } from './Drawer.Footer'
 import { DrawerTitle } from './Drawer.Title'
 
 export type DrawerProps = {
@@ -35,7 +36,7 @@ export type DrawerProps = {
     /**
      * Drawer footer.
      */
-    footer?: ReactNode,
+    footer?: DrawerFooter | CustomDrawerFooter,
 
     /**
      * drawer id for DOM node.
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index fab246bf..c4b8ed92 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -18,11 +18,12 @@
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { DrawerLipumTitle, WithOpenButton } from './Drawer.mocks'
+import { DrawerLipsumFooterButton, DrawerLipsumTitle, WithOpenButton, drawerLipsumFooter } from './Drawer.mocks'
 import { Drawer } from '.'
 
 const defaults = {
-  title: <DrawerLipumTitle />,
+  title: <DrawerLipsumTitle />,
+  footer: <DrawerLipsumFooterButton />,
 }
 
 const meta = {
@@ -36,6 +37,17 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const BasicExample: Story = {
+export const BasicExampleWithFooter: Story = {
+  args: {
+    ...meta.args,
+    footer: drawerLipsumFooter,
+  },
+  decorators: [(_, { args }) => <WithOpenButton {...args} />],
+}
+
+export const BasicExampleWithCustomFooter: Story = {
+  args: {
+    ...meta.args,
+  },
   decorators: [(_, { args }) => <WithOpenButton {...args} />],
 }
diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
index 7e2d0351..0bb2a55a 100644
--- a/src/components/Drawer/Drawer.test.tsx
+++ b/src/components/Drawer/Drawer.test.tsx
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { DrawerLipsum, DrawerLipsumFooter, DrawerLipumTitle } from './Drawer.mocks'
+import { DrawerLipsum, DrawerLipsumFooterButton, DrawerLipsumTitle } from './Drawer.mocks'
 import { render, screen } from '../../test-utils'
 import { Drawer } from './Drawer'
 import { DrawerProps } from './Drawer.props'
@@ -24,9 +24,9 @@ import { DrawerProps } from './Drawer.props'
 describe('Drawer', () => {
   const props: DrawerProps = {
     children: 'Drawer Content',
-    footer: <DrawerLipsumFooter closeDrawer={jest.fn()} />,
+    footer: <DrawerLipsumFooterButton />,
     isVisible: true,
-    title: <DrawerLipumTitle />,
+    title: <DrawerLipsumTitle />,
     onClose: jest.fn(),
   }
 
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 04b6a852..c356b0a8 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -23,10 +23,6 @@ import { DrawerProps } from './Drawer.props'
 import { Footer } from './Drawer.Footer'
 import { Title } from './Drawer.Title'
 
-const styles = {
-  footer: { padding: '24px' },
-}
-
 const DRAWER_WIDTH = 512
 
 export const Drawer = ({
@@ -47,7 +43,6 @@ export const Drawer = ({
       id={id}
       key={key}
       open={isVisible}
-      styles={styles}
       title={<Drawer.Title title={title} />}
       width={DRAWER_WIDTH}
       onClose={onClose}

From a69441e9d8f0ed21e0d6e39d8eae0530b49b17be Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 14:34:11 +0200
Subject: [PATCH 02/14] remove: button box shadow

---
 src/components/Button/Button.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index f2703869..4780ccb8 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -21,6 +21,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-gap-xs, 4px);
+  box-shadow: none;
 }
 
 /* TODO: add 12px padding to theme */

From 7e52e9af4e6613738616a41bef85a1b67d0c8d2a Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 14:35:48 +0200
Subject: [PATCH 03/14] add: drawer close button; import styles from css module

---
 src/components/Drawer/Drawer.Footer.tsx  | 30 ++++-------------
 src/components/Drawer/Drawer.mocks.tsx   |  6 ++--
 src/components/Drawer/Drawer.module.css  | 42 ++++++++++++++++++++++++
 src/components/Drawer/Drawer.stories.tsx | 10 ++++--
 src/components/Drawer/Drawer.test.tsx    |  2 +-
 src/components/Drawer/Drawer.tsx         | 21 ++++++++++--
 6 files changed, 78 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Drawer/Drawer.module.css

diff --git a/src/components/Drawer/Drawer.Footer.tsx b/src/components/Drawer/Drawer.Footer.tsx
index 04eeb9ad..f752a74d 100644
--- a/src/components/Drawer/Drawer.Footer.tsx
+++ b/src/components/Drawer/Drawer.Footer.tsx
@@ -18,6 +18,8 @@
 
 import React, { ReactElement, ReactNode } from 'react'
 
+import styles from './Drawer.module.css'
+
 export type DrawerFooter = {
   buttons?: ReactElement[]
   extra?: ReactNode
@@ -29,35 +31,17 @@ export type FooterProps = {
   footer?: DrawerFooter | CustomDrawerFooter,
 }
 
-const styles = {
-  footer: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '16px 24px',
-    justifyContent: 'end',
-    gap: '8px',
-  },
-  extra: {
-    flex: 1,
-  },
-  footerButtons: {
-    display: 'flex',
-    'flex-direction': 'row-reverse',
-    gap: '8px',
-  },
-}
-
-export const Footer = ({ footer }: FooterProps): ReactElement => {
+export const Footer = ({ footer }: FooterProps): ReactElement | null => {
   if (React.isValidElement(footer)) {
-    return <footer style={styles.footer}>{footer}</footer>
+    return <footer className={styles.footer}>{footer}</footer>
   }
 
   const drawerFooter = footer as DrawerFooter
   const { buttons, extra } = drawerFooter
-  return <footer style={styles.footer}>
+  return <footer className={styles.footer}>
     {(buttons || extra) && <>
-      <div style={styles.extra}>{extra}</div>
-      <div style={styles.footerButtons}>
+      <div className={styles.extra}>{extra}</div>
+      <div className={styles.footerButtons}>
         {buttons}
       </div>
     </>}
diff --git a/src/components/Drawer/Drawer.mocks.tsx b/src/components/Drawer/Drawer.mocks.tsx
index 0783e44a..6a55eec7 100644
--- a/src/components/Drawer/Drawer.mocks.tsx
+++ b/src/components/Drawer/Drawer.mocks.tsx
@@ -44,18 +44,18 @@ export const DrawerLipsumTitle = (): ReactElement => {
   return <span>{'Drawer Lipsum'}</span>
 }
 
-export const DrawerLipsumFooterButton = (): ReactElement => {
+export const DrawerLipsumFooterButton = ({ text } : {text: string}): ReactElement => {
   const { closeDrawer } = useDrawer()
   return (
     <Button onClick={closeDrawer}>
-      {'Close'}
+      {text}
     </Button>
   )
 }
 
 export const drawerLipsumFooter = {
   buttons: [
-    <DrawerLipsumFooterButton key="close-button" />,
+    <DrawerLipsumFooterButton key="close-button" text="Close" />,
   ],
   extra: 'Extra text',
 }
diff --git a/src/components/Drawer/Drawer.module.css b/src/components/Drawer/Drawer.module.css
new file mode 100644
index 00000000..d88863c0
--- /dev/null
+++ b/src/components/Drawer/Drawer.module.css
@@ -0,0 +1,42 @@
+.drawer {
+
+  :global(.mia-platform-drawer-header-title) {
+    flex-direction: row-reverse;
+
+    :global(.mia-platform-drawer-close) {
+      margin: 0;
+      padding: 0;
+    }
+
+    h4 {
+      margin: 0;
+    }
+  }
+
+  :global(.mia-platform-drawer-footer) {
+    padding: var(--spacing-padding-lg, 16px) var(--spacing-padding-xl, 24px);
+    min-height: var(--shape-size-xl, 32px);
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: var(--spacing-gap-sm, 8px);
+  }
+
+  .footerButtons {
+    margin-inline-start: 0;
+    display: flex;
+    flex-direction: row-reverse;
+    gap: var(--spacing-gap-sm, 8px);
+
+    :global(*) {
+      margin: 0 !important;
+    }
+  }
+
+  .extra {
+    flex: 1;
+  }
+}
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index c4b8ed92..39ceecdb 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -23,7 +23,6 @@ import { Drawer } from '.'
 
 const defaults = {
   title: <DrawerLipsumTitle />,
-  footer: <DrawerLipsumFooterButton />,
 }
 
 const meta = {
@@ -37,7 +36,11 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const BasicExampleWithFooter: Story = {
+export const BasicExample: Story = {
+  decorators: [(_, { args }) => <WithOpenButton {...args} />],
+}
+
+export const WithStandardFooter: Story = {
   args: {
     ...meta.args,
     footer: drawerLipsumFooter,
@@ -45,9 +48,10 @@ export const BasicExampleWithFooter: Story = {
   decorators: [(_, { args }) => <WithOpenButton {...args} />],
 }
 
-export const BasicExampleWithCustomFooter: Story = {
+export const WithCustomFooter: Story = {
   args: {
     ...meta.args,
+    footer: <DrawerLipsumFooterButton text="Custom footer button" />,
   },
   decorators: [(_, { args }) => <WithOpenButton {...args} />],
 }
diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
index 0bb2a55a..47c214b0 100644
--- a/src/components/Drawer/Drawer.test.tsx
+++ b/src/components/Drawer/Drawer.test.tsx
@@ -24,7 +24,7 @@ import { DrawerProps } from './Drawer.props'
 describe('Drawer', () => {
   const props: DrawerProps = {
     children: 'Drawer Content',
-    footer: <DrawerLipsumFooterButton />,
+    footer: <DrawerLipsumFooterButton text="Close" />,
     isVisible: true,
     title: <DrawerLipsumTitle />,
     onClose: jest.fn(),
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index c356b0a8..6ce2cfc0 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -16,12 +16,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { ReactElement, useMemo } from 'react'
 import { Drawer as AntdDrawer } from 'antd'
-import { ReactElement } from 'react'
 
+import { Hierarchy, Size, Type } from '../Button/Button.types'
+import { Button } from '../Button'
 import { DrawerProps } from './Drawer.props'
 import { Footer } from './Drawer.Footer'
+import { Icon } from '../Icon'
 import { Title } from './Drawer.Title'
+import styles from './Drawer.module.css'
 
 const DRAWER_WIDTH = 512
 
@@ -35,11 +39,22 @@ export const Drawer = ({
   onClose,
   title,
 }: DrawerProps): ReactElement => {
+  const closeButton = useMemo(() =>
+    <Button
+      hierarchy={Hierarchy.Neutral}
+      icon={
+        <Icon color="currentColor" name="PiX" size={16} />
+      }
+      size={Size.Small}
+      type={Type.Ghost}
+    />, [])
+
   return (
     <AntdDrawer
-      closeIcon={null}
+      className={styles.drawer}
+      closeIcon={closeButton}
       destroyOnClose={destroyOnClose}
-      footer={<Drawer.Footer footer={footer} />}
+      footer={footer && <Drawer.Footer footer={footer} />}
       id={id}
       key={key}
       open={isVisible}

From eb589fcc8dbbd1270132eda55a5f35a21f85e0a1 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 16:11:27 +0200
Subject: [PATCH 04/14] (wip): use decorator to display open drawer button

---
 src/components/Drawer/Drawer.stories.tsx | 29 +++++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index 39ceecdb..deb4af57 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -17,8 +17,10 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react'
+import { useArgs } from '@storybook/preview-api'
 
-import { DrawerLipsumFooterButton, DrawerLipsumTitle, WithOpenButton, drawerLipsumFooter } from './Drawer.mocks'
+import { DrawerLipsumFooterButton, DrawerLipsumTitle, drawerLipsumFooter } from './Drawer.mocks'
+import { Button } from '../Button'
 import { Drawer } from '.'
 
 const defaults = {
@@ -31,21 +33,37 @@ const meta = {
   argTypes: {
     children: { control: false },
   },
+  decorators: [
+    (Story) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const [_, setArgs] = useArgs()
+      return <div>
+        <Button
+          onClick={() => setArgs(
+            {
+              isVisible: true,
+              onClose: () => { setArgs({ isVisible: false }) },
+            }
+          )}
+        >
+          Open drawer
+        </Button>
+        <Story />
+      </div>
+    },
+  ],
 } satisfies Meta<typeof Drawer>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const BasicExample: Story = {
-  decorators: [(_, { args }) => <WithOpenButton {...args} />],
-}
+export const BasicExample: Story = {}
 
 export const WithStandardFooter: Story = {
   args: {
     ...meta.args,
     footer: drawerLipsumFooter,
   },
-  decorators: [(_, { args }) => <WithOpenButton {...args} />],
 }
 
 export const WithCustomFooter: Story = {
@@ -53,5 +71,4 @@ export const WithCustomFooter: Story = {
     ...meta.args,
     footer: <DrawerLipsumFooterButton text="Custom footer button" />,
   },
-  decorators: [(_, { args }) => <WithOpenButton {...args} />],
 }

From de49ec8642fa4cb701c93ce6e11c487b1ade430e Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 17:30:21 +0200
Subject: [PATCH 05/14] fix: drawer props now visible from Show Code panel

---
 src/components/Drawer/Drawer.Footer.tsx       |  2 +-
 src/components/Drawer/Drawer.stories.tsx      | 36 +++++++++-------
 src/components/Drawer/Drawer.test.tsx         |  8 +++-
 src/components/Drawer/Drawer.tsx              | 16 ++------
 .../Drawer/__snapshots__/Drawer.test.tsx.snap | 41 ++++++++++++++++---
 5 files changed, 69 insertions(+), 34 deletions(-)

diff --git a/src/components/Drawer/Drawer.Footer.tsx b/src/components/Drawer/Drawer.Footer.tsx
index f752a74d..aaae1fa4 100644
--- a/src/components/Drawer/Drawer.Footer.tsx
+++ b/src/components/Drawer/Drawer.Footer.tsx
@@ -33,7 +33,7 @@ export type FooterProps = {
 
 export const Footer = ({ footer }: FooterProps): ReactElement | null => {
   if (React.isValidElement(footer)) {
-    return <footer className={styles.footer}>{footer}</footer>
+    return footer
   }
 
   const drawerFooter = footer as DrawerFooter
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index deb4af57..b971d1d8 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -17,9 +17,9 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react'
-import { useArgs } from '@storybook/preview-api'
+import { useMemo, useState } from 'react'
 
-import { DrawerLipsumFooterButton, DrawerLipsumTitle, drawerLipsumFooter } from './Drawer.mocks'
+import { DrawerLipsum, DrawerLipsumTitle, drawerLipsumFooter } from './Drawer.mocks'
 import { Button } from '../Button'
 import { Drawer } from '.'
 
@@ -32,26 +32,34 @@ const meta = {
   args: defaults,
   argTypes: {
     children: { control: false },
+    isVisible: { control: false },
   },
   decorators: [
-    (Story) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const [_, setArgs] = useArgs()
+    (Story, context) => {
+      const [isVisible, setIsVisible] = useState(false)
+
+      const customContext = useMemo(() => ({
+        ...context,
+        args: {
+          ...context.args,
+          isVisible,
+          onClose: () => setIsVisible(false),
+        },
+      }), [context, isVisible])
+
       return <div>
         <Button
-          onClick={() => setArgs(
-            {
-              isVisible: true,
-              onClose: () => { setArgs({ isVisible: false }) },
-            }
-          )}
+          onClick={() => setIsVisible(true)}
         >
           Open drawer
         </Button>
-        <Story />
+        <Story {...customContext} />
       </div>
     },
   ],
+  render: (_, { args }) => <Drawer {...args}>
+    <DrawerLipsum />
+  </Drawer>,
 } satisfies Meta<typeof Drawer>
 
 export default meta
@@ -59,7 +67,7 @@ type Story = StoryObj<typeof meta>
 
 export const BasicExample: Story = {}
 
-export const WithStandardFooter: Story = {
+export const WithStandardFooterProps: Story = {
   args: {
     ...meta.args,
     footer: drawerLipsumFooter,
@@ -69,6 +77,6 @@ export const WithStandardFooter: Story = {
 export const WithCustomFooter: Story = {
   args: {
     ...meta.args,
-    footer: <DrawerLipsumFooterButton text="Custom footer button" />,
+    footer: <div>{'Custom footer content'}</div>,
   },
 }
diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
index 47c214b0..aade21fc 100644
--- a/src/components/Drawer/Drawer.test.tsx
+++ b/src/components/Drawer/Drawer.test.tsx
@@ -24,7 +24,10 @@ import { DrawerProps } from './Drawer.props'
 describe('Drawer', () => {
   const props: DrawerProps = {
     children: 'Drawer Content',
-    footer: <DrawerLipsumFooterButton text="Close" />,
+    footer: {
+      buttons: [<DrawerLipsumFooterButton key="close-drawer" text="Close drawer" />],
+      extra: 'extra content',
+    },
     isVisible: true,
     title: <DrawerLipsumTitle />,
     onClose: jest.fn(),
@@ -36,7 +39,8 @@ describe('Drawer', () => {
     const { baseElement } = render(<Drawer {...props} ><DrawerLipsum /></Drawer>)
 
     expect(screen.getByText(/drawer lipsum/i)).toBeVisible()
-    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /close drawer/i })).toBeInTheDocument()
+    expect(screen.getByText(/extra content/i)).toBeInTheDocument()
     expect(screen.getByText(/Lorem ipsum dolor sit amet,/i)).toBeInTheDocument()
 
     expect(baseElement).toMatchSnapshot()
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 6ce2cfc0..713c39cb 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -19,8 +19,6 @@
 import { ReactElement, useMemo } from 'react'
 import { Drawer as AntdDrawer } from 'antd'
 
-import { Hierarchy, Size, Type } from '../Button/Button.types'
-import { Button } from '../Button'
 import { DrawerProps } from './Drawer.props'
 import { Footer } from './Drawer.Footer'
 import { Icon } from '../Icon'
@@ -39,20 +37,14 @@ export const Drawer = ({
   onClose,
   title,
 }: DrawerProps): ReactElement => {
-  const closeButton = useMemo(() =>
-    <Button
-      hierarchy={Hierarchy.Neutral}
-      icon={
-        <Icon color="currentColor" name="PiX" size={16} />
-      }
-      size={Size.Small}
-      type={Type.Ghost}
-    />, [])
+  const closeIcon = useMemo(() =>
+    <Icon color="currentColor" name="PiX" size={16} />
+  , [])
 
   return (
     <AntdDrawer
       className={styles.drawer}
-      closeIcon={closeButton}
+      closeIcon={closeIcon}
       destroyOnClose={destroyOnClose}
       footer={footer && <Drawer.Footer footer={footer} />}
       id={id}
diff --git a/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
index b9d714d1..c7d79318 100644
--- a/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
+++ b/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Drawer renders drawer with provided title and footer 1`] = `
       >
         <div
           aria-modal="true"
-          class="mia-platform-drawer-content"
+          class="mia-platform-drawer-content drawer"
           role="dialog"
         >
           <div
@@ -32,6 +32,29 @@ exports[`Drawer renders drawer with provided title and footer 1`] = `
             <div
               class="mia-platform-drawer-header-title"
             >
+              <button
+                aria-label="Close"
+                class="mia-platform-drawer-close"
+                type="button"
+              >
+                <svg
+                  aria-label="PiX"
+                  color="currentColor"
+                  fill="currentColor"
+                  height="16"
+                  role="img"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  style="color: currentColor;"
+                  viewBox="0 0 256 256"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+                  />
+                </svg>
+              </button>
               <div
                 class="mia-platform-drawer-title"
               >
@@ -63,10 +86,18 @@ exports[`Drawer renders drawer with provided title and footer 1`] = `
           </div>
           <div
             class="mia-platform-drawer-footer"
-            style="padding: 24px;"
           >
-            <footer>
-              <div>
+            <footer
+              class="footer"
+            >
+              <div
+                class="extra"
+              >
+                extra content
+              </div>
+              <div
+                class="footerButtons"
+              >
                 <button
                   class="mia-platform-btn mia-platform-btn-primary button buttonMd"
                   type="button"
@@ -74,7 +105,7 @@ exports[`Drawer renders drawer with provided title and footer 1`] = `
                   <div
                     class="buttonText"
                   >
-                    Close
+                    Close drawer
                   </div>
                 </button>
               </div>

From 1092a59ff4b71144db3d4879f8052cefeec35fc5 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 17:38:34 +0200
Subject: [PATCH 06/14] move types to dedicated file

---
 src/components/Drawer/Drawer.Footer.tsx | 14 ++---------
 src/components/Drawer/Drawer.Title.tsx  |  9 ++-----
 src/components/Drawer/Drawer.props.ts   |  3 +--
 src/components/Drawer/Drawer.types.ts   | 31 +++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Drawer/Drawer.types.ts

diff --git a/src/components/Drawer/Drawer.Footer.tsx b/src/components/Drawer/Drawer.Footer.tsx
index aaae1fa4..2840e318 100644
--- a/src/components/Drawer/Drawer.Footer.tsx
+++ b/src/components/Drawer/Drawer.Footer.tsx
@@ -16,21 +16,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ReactElement, ReactNode } from 'react'
+import React, { ReactElement } from 'react'
 
+import { DrawerFooter, FooterProps } from './Drawer.types'
 import styles from './Drawer.module.css'
 
-export type DrawerFooter = {
-  buttons?: ReactElement[]
-  extra?: ReactNode
-}
-
-export type CustomDrawerFooter = ReactElement
-
-export type FooterProps = {
-  footer?: DrawerFooter | CustomDrawerFooter,
-}
-
 export const Footer = ({ footer }: FooterProps): ReactElement | null => {
   if (React.isValidElement(footer)) {
     return footer
diff --git a/src/components/Drawer/Drawer.Title.tsx b/src/components/Drawer/Drawer.Title.tsx
index b27c4cbe..530d7f19 100644
--- a/src/components/Drawer/Drawer.Title.tsx
+++ b/src/components/Drawer/Drawer.Title.tsx
@@ -16,15 +16,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactElement, ReactNode, useMemo } from 'react'
+import { ReactElement, useMemo } from 'react'
 
 import { H4 } from '../Typography/HX/H4'
-
-export type DrawerTitle = ReactNode
-
-export type TitleProps = {
-  title: DrawerTitle,
-}
+import { TitleProps } from './Drawer.types'
 
 export const Title = ({ title }: TitleProps): ReactElement => {
   const ellipsis = useMemo(() => ({ rows: 1, tooltip: title }), [title])
diff --git a/src/components/Drawer/Drawer.props.ts b/src/components/Drawer/Drawer.props.ts
index 424b6d96..daf8c00f 100644
--- a/src/components/Drawer/Drawer.props.ts
+++ b/src/components/Drawer/Drawer.props.ts
@@ -18,8 +18,7 @@
 
 import { ReactNode } from 'react'
 
-import { CustomDrawerFooter, DrawerFooter } from './Drawer.Footer'
-import { DrawerTitle } from './Drawer.Title'
+import { CustomDrawerFooter, DrawerFooter, DrawerTitle } from './Drawer.types'
 
 export type DrawerProps = {
 
diff --git a/src/components/Drawer/Drawer.types.ts b/src/components/Drawer/Drawer.types.ts
new file mode 100644
index 00000000..5116ab27
--- /dev/null
+++ b/src/components/Drawer/Drawer.types.ts
@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react'
+
+// Header
+
+export type DrawerTitle = ReactNode
+
+export type TitleProps = {
+  title: DrawerTitle,
+}
+
+// Footer
+
+export type DrawerFooter = {
+
+   /**
+   * Array of buttons to be displayed in the right side of the footer.
+   * Note that the rendering order is the opposite of the list order.
+   */
+    buttons?: ReactElement[]
+
+    /**
+   * Extra information to be displayed in the left side of the footer (such as text or a checkbox).
+   */
+    extra?: ReactNode
+  }
+
+export type CustomDrawerFooter = ReactElement
+
+export type FooterProps = {
+    footer?: DrawerFooter | CustomDrawerFooter,
+}

From 7c116281b0ddd7ee5a4a9f13829224ecc5126224 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 17:51:47 +0200
Subject: [PATCH 07/14] refactor: drawer mocks

---
 src/components/Drawer/Drawer.mocks.tsx | 28 +++++---------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/components/Drawer/Drawer.mocks.tsx b/src/components/Drawer/Drawer.mocks.tsx
index 6a55eec7..be422dc4 100644
--- a/src/components/Drawer/Drawer.mocks.tsx
+++ b/src/components/Drawer/Drawer.mocks.tsx
@@ -23,9 +23,7 @@
 import { ReactElement } from 'react'
 
 import { Button } from '../Button'
-import { Drawer } from './Drawer'
-import { DrawerProps } from './Drawer.props'
-import { useDrawer } from '../../hooks/useDrawer'
+import { Hierarchy } from '../Button/Button.types'
 
 export const DrawerLipsum = (): ReactElement => {
   return (
@@ -44,10 +42,9 @@ export const DrawerLipsumTitle = (): ReactElement => {
   return <span>{'Drawer Lipsum'}</span>
 }
 
-export const DrawerLipsumFooterButton = ({ text } : {text: string}): ReactElement => {
-  const { closeDrawer } = useDrawer()
+export const DrawerLipsumFooterButton = ({ text, hierarchy } : {text: string, hierarchy?: Hierarchy}): ReactElement => {
   return (
-    <Button onClick={closeDrawer}>
+    <Button hierarchy={hierarchy}>
       {text}
     </Button>
   )
@@ -55,23 +52,8 @@ export const DrawerLipsumFooterButton = ({ text } : {text: string}): ReactElemen
 
 export const drawerLipsumFooter = {
   buttons: [
-    <DrawerLipsumFooterButton key="close-button" text="Close" />,
+    <DrawerLipsumFooterButton key="action-button" text="Primary Action" />,
+    <DrawerLipsumFooterButton hierarchy={Hierarchy.Neutral} key="action-button" text="Secondary Action" />,
   ],
   extra: 'Extra text',
 }
-
-export const WithOpenButton = (props: DrawerProps): ReactElement => {
-  const { isVisible, openDrawer, closeDrawer } = useDrawer()
-  return (
-    <>
-      <Button onClick={openDrawer}>Open Drawer</Button>
-      <Drawer
-        {...props}
-        isVisible={isVisible}
-        onClose={closeDrawer}
-      >
-        <DrawerLipsum />
-      </Drawer>
-    </>
-  )
-}

From a70b8976d407ff49466d8b72709348bec6dc4ca2 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 18:09:29 +0200
Subject: [PATCH 08/14] add: custom footer test

---
 src/components/Drawer/Drawer.test.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
index aade21fc..8f9979bf 100644
--- a/src/components/Drawer/Drawer.test.tsx
+++ b/src/components/Drawer/Drawer.test.tsx
@@ -46,6 +46,18 @@ describe('Drawer', () => {
     expect(baseElement).toMatchSnapshot()
   })
 
+  it('renders drawer with custom footer', () => {
+    const customProps = {
+      ...props,
+      footer: <div>Custom footer content</div>,
+    }
+    render(<Drawer {...customProps} ><DrawerLipsum /></Drawer>)
+
+    expect(screen.getByText(/drawer lipsum/i)).toBeVisible()
+    expect(screen.getByText(/custom footer content/i)).toBeInTheDocument()
+    expect(screen.getByText(/Lorem ipsum dolor sit amet,/i)).toBeInTheDocument()
+  })
+
   it('does not render drawer when isVisible is false', () => {
     render(<Drawer {...props} isVisible={false} >{'the-content'}</Drawer>)
     expect(screen.queryByText(/drawer lipsum/i)).toBeNull()

From 89c2b259e0a79ecab58d4eb33c14f9dd5fac3f32 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 18:32:36 +0200
Subject: [PATCH 09/14] apply suggestions

---
 src/components/Drawer/Drawer.Footer.tsx | 40 ++++++++++++++++---------
 src/components/Drawer/Drawer.tsx        |  9 ++----
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/Drawer/Drawer.Footer.tsx b/src/components/Drawer/Drawer.Footer.tsx
index 2840e318..27e9144a 100644
--- a/src/components/Drawer/Drawer.Footer.tsx
+++ b/src/components/Drawer/Drawer.Footer.tsx
@@ -16,24 +16,36 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ReactElement } from 'react'
+import { ReactElement } from 'react'
+import { isEmpty } from 'lodash-es'
 
-import { DrawerFooter, FooterProps } from './Drawer.types'
+import { CustomDrawerFooter, DrawerFooter, FooterProps } from './Drawer.types'
 import styles from './Drawer.module.css'
 
+function isDrawerFooter(obj: DrawerFooter | CustomDrawerFooter): obj is DrawerFooter {
+  return (
+    obj
+    && ('buttons' in obj || 'extra' in obj)
+  )
+}
+
 export const Footer = ({ footer }: FooterProps): ReactElement | null => {
-  if (React.isValidElement(footer)) {
-    return footer
+  if (!footer || isEmpty(footer)) {
+    return null
   }
 
-  const drawerFooter = footer as DrawerFooter
-  const { buttons, extra } = drawerFooter
-  return <footer className={styles.footer}>
-    {(buttons || extra) && <>
-      <div className={styles.extra}>{extra}</div>
-      <div className={styles.footerButtons}>
-        {buttons}
-      </div>
-    </>}
-  </footer>
+  if (isDrawerFooter(footer)) {
+    const { buttons, extra } = footer
+    return <footer className={styles.footer}>
+      {(buttons || extra) && <>
+        <div className={styles.extra}>{extra}</div>
+        <div className={styles.footerButtons}>
+          {buttons}
+        </div>
+      </>}
+    </footer>
+  }
+
+  return footer
 }
+
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 713c39cb..b4bb3234 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -16,8 +16,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactElement, useMemo } from 'react'
 import { Drawer as AntdDrawer } from 'antd'
+import { ReactElement } from 'react'
 
 import { DrawerProps } from './Drawer.props'
 import { Footer } from './Drawer.Footer'
@@ -26,6 +26,7 @@ import { Title } from './Drawer.Title'
 import styles from './Drawer.module.css'
 
 const DRAWER_WIDTH = 512
+const closeIcon = <Icon color="currentColor" name="PiX" size={16} />
 
 export const Drawer = ({
   children,
@@ -37,16 +38,12 @@ export const Drawer = ({
   onClose,
   title,
 }: DrawerProps): ReactElement => {
-  const closeIcon = useMemo(() =>
-    <Icon color="currentColor" name="PiX" size={16} />
-  , [])
-
   return (
     <AntdDrawer
       className={styles.drawer}
       closeIcon={closeIcon}
       destroyOnClose={destroyOnClose}
-      footer={footer && <Drawer.Footer footer={footer} />}
+      footer={<Drawer.Footer footer={footer} />}
       id={id}
       key={key}
       open={isVisible}

From 785e09b6f5f962263660d10c480cdbff53041bf0 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Thu, 11 Jul 2024 18:33:06 +0200
Subject: [PATCH 10/14] remove: changes to button

---
 src/components/Button/Button.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index 4780ccb8..f2703869 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -21,7 +21,6 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-gap-xs, 4px);
-  box-shadow: none;
 }
 
 /* TODO: add 12px padding to theme */

From 5c1d14a605876755513eb4c6965406d09c64024d Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Fri, 12 Jul 2024 10:00:26 +0200
Subject: [PATCH 11/14] fix: empty footer rendering

---
 src/components/Drawer/Drawer.Footer.tsx | 14 ++++++--------
 src/components/Drawer/Drawer.tsx        |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Drawer/Drawer.Footer.tsx b/src/components/Drawer/Drawer.Footer.tsx
index 27e9144a..b69a1ce3 100644
--- a/src/components/Drawer/Drawer.Footer.tsx
+++ b/src/components/Drawer/Drawer.Footer.tsx
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactElement } from 'react'
+import { ReactNode } from 'react'
 import { isEmpty } from 'lodash-es'
 
 import { CustomDrawerFooter, DrawerFooter, FooterProps } from './Drawer.types'
@@ -29,7 +29,7 @@ function isDrawerFooter(obj: DrawerFooter | CustomDrawerFooter): obj is DrawerFo
   )
 }
 
-export const Footer = ({ footer }: FooterProps): ReactElement | null => {
+export const Footer = ({ footer }: FooterProps): ReactNode => {
   if (!footer || isEmpty(footer)) {
     return null
   }
@@ -37,12 +37,10 @@ export const Footer = ({ footer }: FooterProps): ReactElement | null => {
   if (isDrawerFooter(footer)) {
     const { buttons, extra } = footer
     return <footer className={styles.footer}>
-      {(buttons || extra) && <>
-        <div className={styles.extra}>{extra}</div>
-        <div className={styles.footerButtons}>
-          {buttons}
-        </div>
-      </>}
+      <div className={styles.extra}>{extra}</div>
+      <div className={styles.footerButtons}>
+        {buttons}
+      </div>
     </footer>
   }
 
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index b4bb3234..af5b391c 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -43,7 +43,7 @@ export const Drawer = ({
       className={styles.drawer}
       closeIcon={closeIcon}
       destroyOnClose={destroyOnClose}
-      footer={<Drawer.Footer footer={footer} />}
+      footer={footer && <Drawer.Footer footer={footer} />}
       id={id}
       key={key}
       open={isVisible}

From 0d6a604b3caaec75042ab3d85fd98e01f8b35c2c Mon Sep 17 00:00:00 2001
From: Giovanna Monti <60603265+GiovannaMonti@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:10:29 +0200
Subject: [PATCH 12/14] Update src/components/Drawer/Drawer.mocks.tsx

---
 src/components/Drawer/Drawer.mocks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Drawer/Drawer.mocks.tsx b/src/components/Drawer/Drawer.mocks.tsx
index be422dc4..3e55660b 100644
--- a/src/components/Drawer/Drawer.mocks.tsx
+++ b/src/components/Drawer/Drawer.mocks.tsx
@@ -53,7 +53,7 @@ export const DrawerLipsumFooterButton = ({ text, hierarchy } : {text: string, hi
 export const drawerLipsumFooter = {
   buttons: [
     <DrawerLipsumFooterButton key="action-button" text="Primary Action" />,
-    <DrawerLipsumFooterButton hierarchy={Hierarchy.Neutral} key="action-button" text="Secondary Action" />,
+    <DrawerLipsumFooterButton hierarchy={Hierarchy.Neutral} key="secondary-action-button" text="Secondary Action" />,
   ],
   extra: 'Extra text',
 }

From 06fea8953ddf5a99b4071ead59d47a7cf75a13e0 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Fri, 12 Jul 2024 10:14:29 +0200
Subject: [PATCH 13/14] fix indentation

---
 src/components/Drawer/Drawer.types.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Drawer/Drawer.types.ts b/src/components/Drawer/Drawer.types.ts
index 5116ab27..eed3e1e4 100644
--- a/src/components/Drawer/Drawer.types.ts
+++ b/src/components/Drawer/Drawer.types.ts
@@ -12,17 +12,17 @@ export type TitleProps = {
 
 export type DrawerFooter = {
 
-   /**
-   * Array of buttons to be displayed in the right side of the footer.
-   * Note that the rendering order is the opposite of the list order.
+  /**
+  * Array of buttons to be displayed in the right side of the footer.
+  * Note that the rendering order is the opposite of the list order.
    */
-    buttons?: ReactElement[]
+  buttons?: ReactElement[]
 
-    /**
-   * Extra information to be displayed in the left side of the footer (such as text or a checkbox).
+  /**
+  * Extra information to be displayed in the left side of the footer (such as text or a checkbox).
    */
-    extra?: ReactNode
-  }
+  extra?: ReactNode
+}
 
 export type CustomDrawerFooter = ReactElement
 

From 2ba1dd587dbb13f3c1648dda89165e16ddfef377 Mon Sep 17 00:00:00 2001
From: Giovanna Monti <giovanna.monti@mia-platform.eu>
Date: Fri, 12 Jul 2024 10:45:56 +0200
Subject: [PATCH 14/14] add: doc link prop

---
 src/components/Drawer/Drawer.Title.tsx   | 27 +++++++++++++++++++++---
 src/components/Drawer/Drawer.module.css  | 10 +++++++--
 src/components/Drawer/Drawer.props.ts    |  6 ++++++
 src/components/Drawer/Drawer.stories.tsx |  7 ++++++
 src/components/Drawer/Drawer.test.tsx    | 11 ++++++++++
 src/components/Drawer/Drawer.tsx         |  3 ++-
 src/components/Drawer/Drawer.types.ts    |  1 +
 7 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/components/Drawer/Drawer.Title.tsx b/src/components/Drawer/Drawer.Title.tsx
index 530d7f19..cf74e4ab 100644
--- a/src/components/Drawer/Drawer.Title.tsx
+++ b/src/components/Drawer/Drawer.Title.tsx
@@ -16,12 +16,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactElement, useMemo } from 'react'
+import { ReactElement, useCallback, useMemo } from 'react'
 
+import { Button } from '../Button'
 import { H4 } from '../Typography/HX/H4'
+import { Icon } from '../Icon'
 import { TitleProps } from './Drawer.types'
+import { useTheme } from '../../hooks/useTheme'
+
+export const Title = ({ docLink, title }: TitleProps): ReactElement => {
+  const { palette } = useTheme()
+
+  const docLinkIcon = useMemo(() => (
+    <Icon color={palette?.action?.link?.active} name="PiBookOpen" size={16} />
+  ), [palette?.action?.link?.active])
+
+  const onClickDocLink = useCallback(() => window.open(docLink, '_blank'), [docLink])
 
-export const Title = ({ title }: TitleProps): ReactElement => {
   const ellipsis = useMemo(() => ({ rows: 1, tooltip: title }), [title])
-  return <H4 ellipsis={ellipsis}>{title}</H4>
+  return <>
+    <H4 ellipsis={ellipsis}>{title}</H4>
+    {docLink && <div>
+      <Button
+        icon={docLinkIcon}
+        shape={Button.Shape.Circle}
+        type={Button.Type.Ghost}
+        onClick={onClickDocLink}
+      />
+    </div>}
+  </>
 }
diff --git a/src/components/Drawer/Drawer.module.css b/src/components/Drawer/Drawer.module.css
index d88863c0..8de302b3 100644
--- a/src/components/Drawer/Drawer.module.css
+++ b/src/components/Drawer/Drawer.module.css
@@ -8,8 +8,14 @@
       padding: 0;
     }
 
-    h4 {
-      margin: 0;
+    :global(.mia-platform-drawer-title) {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-gap-sm, 8px);
+
+      h4 {
+        margin: 0;
+      }
     }
   }
 
diff --git a/src/components/Drawer/Drawer.props.ts b/src/components/Drawer/Drawer.props.ts
index daf8c00f..1169e8a8 100644
--- a/src/components/Drawer/Drawer.props.ts
+++ b/src/components/Drawer/Drawer.props.ts
@@ -32,6 +32,12 @@ export type DrawerProps = {
      */
     destroyOnClose?: boolean,
 
+    /**
+     * The reference url for documentation of the drawer contents.
+     * If present, a button is shown next to the title that, when clicked, opens the url in a new tab.
+     */
+    docLink?: string,
+
     /**
      * Drawer footer.
      */
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
index b971d1d8..b19a890f 100644
--- a/src/components/Drawer/Drawer.stories.tsx
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -67,6 +67,13 @@ type Story = StoryObj<typeof meta>
 
 export const BasicExample: Story = {}
 
+export const WithDocLink: Story = {
+  args: {
+    ...meta.args,
+    docLink: 'https://www.google.com/',
+  },
+}
+
 export const WithStandardFooterProps: Story = {
   args: {
     ...meta.args,
diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
index 8f9979bf..1fb37e0a 100644
--- a/src/components/Drawer/Drawer.test.tsx
+++ b/src/components/Drawer/Drawer.test.tsx
@@ -35,6 +35,17 @@ describe('Drawer', () => {
 
   beforeEach(() => jest.resetAllMocks())
 
+  it('renders drawer with doc link', () => {
+    const customProps = {
+      ...props,
+      docLink: 'https://www.google.com/',
+    }
+    render(<Drawer {...customProps} ><DrawerLipsum /></Drawer>)
+
+    expect(screen.getByText(/drawer lipsum/i)).toBeVisible()
+    expect(screen.getByRole('button', { name: /pibookopen/i })).toBeVisible()
+  })
+
   it('renders drawer with provided title and footer', () => {
     const { baseElement } = render(<Drawer {...props} ><DrawerLipsum /></Drawer>)
 
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index af5b391c..c14940c6 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -31,6 +31,7 @@ const closeIcon = <Icon color="currentColor" name="PiX" size={16} />
 export const Drawer = ({
   children,
   destroyOnClose,
+  docLink,
   footer,
   id,
   isVisible,
@@ -47,7 +48,7 @@ export const Drawer = ({
       id={id}
       key={key}
       open={isVisible}
-      title={<Drawer.Title title={title} />}
+      title={<Drawer.Title docLink={docLink} title={title} />}
       width={DRAWER_WIDTH}
       onClose={onClose}
     >
diff --git a/src/components/Drawer/Drawer.types.ts b/src/components/Drawer/Drawer.types.ts
index eed3e1e4..4f33b634 100644
--- a/src/components/Drawer/Drawer.types.ts
+++ b/src/components/Drawer/Drawer.types.ts
@@ -5,6 +5,7 @@ import { ReactElement, ReactNode } from 'react'
 export type DrawerTitle = ReactNode
 
 export type TitleProps = {
+  docLink?: string,
   title: DrawerTitle,
 }