feat: drawer (#4492)

* feat: drawer

* fix: test

* fix: spacing and custom header

* fix: typos

* test: more coverage

* fix: changeset

.changeset/poor-flies-behave.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+New component `<Drawer />`

packages/ui/src/components/Drawer/__stories__/Footer.stories.tsx

@@ -0,0 +1,46 @@
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import { DefaultDisclosure, Template } from './Template.stories'
+
+export const Footer = Template.bind({})
+const FooterComponent = () => (
+  <Stack direction="row" justifyContent="end" gap="1">
+    <Button sentiment="primary" variant="outlined" fullWidth>
+      Secondary
+    </Button>
+    <Button sentiment="primary" variant="filled" fullWidth>
+      Primary
+    </Button>
+  </Stack>
+)
+
+Footer.args = {
+  disclosure: DefaultDisclosure,
+  footer: <FooterComponent />,
+  header: 'With a footer',
+  size: 'small',
+  children: (
+    <Text as="p" variant="body" sentiment="neutral">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis non
+      lectus sed sagittis. Etiam luctus velit ac semper accumsan. Orci varius
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+      Proin ut nulla lacus. Nullam auctor dolor at euismod luctus. Suspendisse
+      potenti. Ut vulputate pellentesque pharetra. Suspendisse eleifend ac urna
+      eget pellentesque. Nulla facilisi. Morbi id neque eget mauris sodales
+      tristique sit amet ut lacus. Nullam fringilla finibus massa, vel molestie
+      sapien suscipit et. Aliquam blandit lectus sapien, nec venenatis risus
+      vestibulum a. Nullam scelerisque leo at pharetra vestibulum. Quisque eget
+      turpis eu tellus imperdiet ultricies. Aliquam cursus mattis vulputate.
+      Etiam vulputate nunc vel eros luctus finibus. Vivamus efficitur dolor eu
+      sem elementum condimentum. Suspendisse potenti. Ut vulputate pellentesque
+      pharetra. Suspendisse eleifend ac urna eget pellentesque. Nulla facilisi.
+      Morbi id neque eget mauris sodales tristique sit amet ut lacus. Nullam
+      fringilla finibus massa, vel molestie sapien suscipit et. Aliquam blandit
+      lectus sapien, nec venenatis risus vestibulum a. Nullam scelerisque leo at
+      pharetra vestibulum. Quisque eget turpis eu tellus imperdiet ultricies.
+      Aliquam cursus mattis vulputate. Etiam vulputate nunc vel eros luctus
+      finibus. Vivamus efficitur dolor eu sem elementum condimentum.
+    </Text>
+  ),
+}

packages/ui/src/components/Drawer/__stories__/FunctionProps.stories.tsx

@@ -0,0 +1,57 @@
+import type { StoryFn } from '@storybook/react'
+import { Drawer } from '..'
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
+
+export const FunctionProps: StoryFn = props => (
+  <Stack direction="row" gap={2}>
+    <Drawer
+      {...props}
+      disclosure={<Button>Function children</Button>}
+      header="Function children"
+      footer="Footer"
+    >
+      {({ close }) => (
+        <Button onClick={close}>
+          A custom button that can close the drawer
+        </Button>
+      )}
+    </Drawer>
+
+    <Drawer
+      {...props}
+      disclosure={<Button>Function footer</Button>}
+      header="Function footer"
+      footer={({ close }) => (
+        <Button onClick={close}>
+          A custom button that can close the drawer
+        </Button>
+      )}
+    >
+      Children
+    </Drawer>
+
+    <Drawer
+      {...props}
+      isClosable={false}
+      disclosure={<Button>Function header</Button>}
+      header={({ close }) => (
+        <Button onClick={close}>
+          A custom button that can close the drawer
+        </Button>
+      )}
+      footer="footer"
+    >
+      children
+    </Drawer>
+  </Stack>
+)
+
+FunctionProps.parameters = {
+  docs: {
+    description: {
+      story:
+        '`disclosure`, `footer`, `header` and `children` can all be functions that can get the Drawer state',
+    },
+  },
+}

packages/ui/src/components/Drawer/__stories__/Playground.stories.tsx

@@ -0,0 +1,9 @@
+import { DefaultDisclosure, Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+  disclosure: DefaultDisclosure,
+  header: 'header',
+  children: 'children',
+}

packages/ui/src/components/Drawer/__stories__/Size.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryFn } from '@storybook/react'
+import { Drawer, SIZES } from '..'
+import { Button } from '../../Button'
+
+export const Size: StoryFn = props => (
+  <>
+    {Object.keys(SIZES).map(width => (
+      <div style={{ display: 'inline-block', padding: 16 }} key={width}>
+        <Drawer
+          {...props}
+          size={width as keyof typeof SIZES}
+          disclosure={<Button>{width}</Button>}
+          header={width}
+        >
+          <div>Content of the {width} drawer</div>
+        </Drawer>
+      </div>
+    ))}
+  </>
+)
+
+Size.parameters = {
+  docs: {
+    description: { story: 'Here is a list of all the width values we support' },
+  },
+}

packages/ui/src/components/Drawer/__stories__/Template.stories.tsx

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react'
+import { Drawer } from '..'
+import { Button } from '../../Button'
+
+export const DefaultDisclosure = <Button>Open Drawer</Button>
+
+export const Template: StoryFn<typeof Drawer> = args => <Drawer {...args} />
+
+Template.args = {
+  header: 'Drawer',
+}

packages/ui/src/components/Drawer/__stories__/index.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react'
+import { Drawer } from '..'
+
+export default {
+  component: Drawer,
+  title: 'Components/Overlay/Drawer',
+} as Meta<typeof Drawer>
+
+export { Playground } from './Playground.stories'
+export { Size } from './Size.stories'
+export { Footer } from './Footer.stories'
+export { FunctionProps } from './FunctionProps.stories'