fix: spacing and custom header

scaleway · Nov 26, 2024 · 5d709bf · 5d709bf
1 parent f1e2a4f
commit 5d709bf
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 143 deletions.
diff --git a/packages/ui/src/components/Drawer/__stories__/Footer.stories.tsx b/packages/ui/src/components/Drawer/__stories__/Footer.stories.tsx
@@ -1,5 +1,6 @@
 import { Button } from '../../Button'
 import { Stack } from '../../Stack'
+import { Text } from '../../Text'
 import { DefaultDisclosure, Template } from './Template.stories'
 
 export const Footer = Template.bind({})
@@ -17,8 +18,29 @@ const FooterComponent = () => (
 Footer.args = {
   disclosure: DefaultDisclosure,
   footer: <FooterComponent />,
-  title: 'With a footer',
+  header: 'With a footer',
   size: 'small',
-  children:
-    '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.',
+  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>
+  ),
 }
diff --git a/.../__stories__/FunctionChildren.stories.tsx → ...wer/__stories__/FunctionProps.stories.tsx b/.../__stories__/FunctionChildren.stories.tsx → ...wer/__stories__/FunctionProps.stories.tsx
@@ -3,12 +3,12 @@ import { Drawer } from '..'
 import { Button } from '../../Button'
 import { Stack } from '../../Stack'
 
-export const FunctionChildren: StoryFn = props => (
+export const FunctionProps: StoryFn = props => (
   <Stack direction="row" gap={2}>
     <Drawer
       {...props}
       disclosure={<Button>Function children</Button>}
-      title="Function children"
+      header="Function children"
       footer="Footer"
     >
       {({ close }) => (
@@ -21,7 +21,7 @@ export const FunctionChildren: StoryFn = props => (
     <Drawer
       {...props}
       disclosure={<Button>Function footer</Button>}
-      title="Function footer"
+      header="Function footer"
       footer={({ close }) => (
         <Button onClick={close}>
           A custom button that can close the drawer
@@ -30,14 +30,28 @@ export const FunctionChildren: StoryFn = props => (
     >
       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>
 )
 
-FunctionChildren.parameters = {
+FunctionProps.parameters = {
   docs: {
     description: {
       story:
-        '`disclosure`, `footer` and `children` can all be functions that can get the Drawer state',
+        '`disclosure`, `footer`, `header` and `children` can all be functions that can get the Drawer state',
     },
   },
 }
diff --git a/packages/ui/src/components/Drawer/__stories__/Playground.stories.tsx b/packages/ui/src/components/Drawer/__stories__/Playground.stories.tsx
@@ -4,5 +4,4 @@ export const Playground = Template.bind({})
 
 Playground.args = {
   disclosure: DefaultDisclosure,
-  title: 'Title',
 }
diff --git a/packages/ui/src/components/Drawer/__stories__/Size.stories.tsx b/packages/ui/src/components/Drawer/__stories__/Size.stories.tsx
@@ -10,9 +10,9 @@ export const Size: StoryFn = props => (
           {...props}
           size={width as keyof typeof SIZES}
           disclosure={<Button>{width}</Button>}
-          title={width}
+          header={width}
         >
-          <div style={{ padding: 32 }}>Content of the {width} drawer</div>
+          <div>Content of the {width} drawer</div>
         </Drawer>
       </div>
     ))}

diff --git a/packages/ui/src/components/Drawer/__stories__/Template.stories.tsx b/packages/ui/src/components/Drawer/__stories__/Template.stories.tsx
@@ -7,5 +7,5 @@ export const DefaultDisclosure = <Button>Open Modal</Button>
 export const Template: StoryFn<typeof Drawer> = args => <Drawer {...args} />
 
 Template.args = {
-  title: 'Drawer',
+  header: 'Drawer',
 }
diff --git a/packages/ui/src/components/Drawer/__stories__/index.stories.tsx b/packages/ui/src/components/Drawer/__stories__/index.stories.tsx
@@ -9,4 +9,4 @@ export default {
 export { Playground } from './Playground.stories'
 export { Size } from './Size.stories'
 export { Footer } from './Footer.stories'
-export { FunctionChildren } from './FunctionChildren.stories'
+export { FunctionProps } from './FunctionProps.stories'