docs: fix show code on some stories and remove button migration doc (#…

…2857)
scaleway · Sep 4, 2023 · aa55223 · aa55223
1 parent 2091d4e
commit aa55223
Show file tree

Hide file tree

Showing 56 changed files with 188 additions and 330 deletions.
diff --git a/packages/ui/src/__stories__/ButtonMigration/Sizes.tsx b/packages/ui/src/__stories__/ButtonMigration/Sizes.tsx
diff --git a/packages/ui/src/__stories__/ButtonMigration/Variants.tsx b/packages/ui/src/__stories__/ButtonMigration/Variants.tsx
diff --git a/packages/ui/src/__stories__/ButtonMigration/index.stories.mdx b/packages/ui/src/__stories__/ButtonMigration/index.stories.mdx
diff --git a/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx b/packages/ui/src/components/Banner/__stories__/Directions.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Banner } from '..'
 
-export const Directions: StoryFn = () => (
+export const Directions: StoryFn = args => (
   <>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"
@@ -14,6 +15,7 @@ export const Directions: StoryFn = () => (
       business and limit your expenses.
     </Banner>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"

diff --git a/packages/ui/src/components/Banner/__stories__/Sizes.stories.tsx b/packages/ui/src/components/Banner/__stories__/Sizes.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Banner } from '..'
 
-export const Sizes: StoryFn = () => (
+export const Sizes: StoryFn = args => (
   <>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"
@@ -14,6 +15,7 @@ export const Sizes: StoryFn = () => (
       your expenses.
     </Banner>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"
@@ -25,6 +27,7 @@ export const Sizes: StoryFn = () => (
       your expenses.
     </Banner>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"
@@ -36,6 +39,7 @@ export const Sizes: StoryFn = () => (
       your expenses.
     </Banner>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"

diff --git a/packages/ui/src/components/Banner/__stories__/Variants.stories.tsx b/packages/ui/src/components/Banner/__stories__/Variants.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Banner } from '..'
 
-export const Variants: StoryFn = () => (
+export const Variants: StoryFn = args => (
   <>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"
@@ -14,6 +15,7 @@ export const Variants: StoryFn = () => (
       business and limit your expenses.
     </Banner>
     <Banner
+      {...args}
       title="Apply to Scaleway Startup programs"
       buttonText="Apply now"
       linkText="Learn more"

diff --git a/packages/ui/src/components/Button/__stories__/AsLink.stories.tsx b/packages/ui/src/components/Button/__stories__/AsLink.stories.tsx
@@ -2,7 +2,9 @@ import type { StoryFn } from '@storybook/react'
 import { Button, buttonVariants } from '..'
 import { Stack } from '../..'
 
-export const AsLink: StoryFn<typeof Button> = () => (
+// @ts-expect-error we can't use args as it leads to a type error
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const AsLink: StoryFn<typeof Button> = args => (
   <Stack alignItems="center" gap={2} direction="row">
     {buttonVariants.map(variant => (
       <Button

diff --git a/packages/ui/src/components/Button/__stories__/IconPosition.stories.tsx b/packages/ui/src/components/Button/__stories__/IconPosition.stories.tsx
@@ -2,12 +2,12 @@ import type { StoryFn } from '@storybook/react'
 import { Button } from '..'
 import { Stack } from '../..'
 
-export const IconPosition: StoryFn<typeof Button> = () => (
+export const IconPosition: StoryFn<typeof Button> = args => (
   <Stack alignItems="center" gap={2} direction="row">
-    <Button icon="pencil" onClick={() => {}} iconPosition="left">
+    <Button icon="pencil" onClick={() => {}} iconPosition="left" {...args}>
       Left
     </Button>
-    <Button icon="pencil" onClick={() => {}} iconPosition="right">
+    <Button icon="pencil" onClick={() => {}} iconPosition="right" {...args}>
       Right
     </Button>
   </Stack>

diff --git a/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx b/packages/ui/src/components/Button/__stories__/Showcase.stories.tsx
@@ -10,7 +10,7 @@ const COLUMNS = [
   })),
 ]
 
-export const Showcase: StoryFn<typeof Button> = () => {
+export const Showcase: StoryFn<typeof Button> = args => {
   const onClick = () => {}
 
   return (
@@ -27,6 +27,7 @@ export const Showcase: StoryFn<typeof Button> = () => {
               <Table.Cell key={variant}>
                 <Stack direction="row" gap={2}>
                   <Button
+                    {...args}
                     onClick={onClick}
                     variant={variant}
                     sentiment={sentiment}

diff --git a/packages/ui/src/components/Button/__stories__/Size.stories.tsx b/packages/ui/src/components/Button/__stories__/Size.stories.tsx
@@ -2,10 +2,10 @@ import type { StoryFn } from '@storybook/react'
 import { Button, buttonSizes } from '..'
 import { Stack } from '../..'
 
-export const Size: StoryFn<typeof Button> = () => (
+export const Size: StoryFn<typeof Button> = args => (
   <Stack alignItems="center" gap={2} direction="row">
     {buttonSizes.map(size => (
-      <Button key={size} icon="pencil" onClick={() => {}} size={size}>
+      <Button {...args} key={size} icon="pencil" onClick={() => {}} size={size}>
         {size}
       </Button>
     ))}

diff --git a/packages/ui/src/components/Card/__stories__/AdvancedHeader.stories.tsx b/packages/ui/src/components/Card/__stories__/AdvancedHeader.stories.tsx
@@ -5,7 +5,7 @@ import { Stack } from '../../Stack'
 import { Text } from '../../Text'
 import { Card } from '../index'
 
-export const AdvancedHeader: StoryFn = () => {
+export const AdvancedHeader: StoryFn = args => {
   const CustomHeader = (
     <Stack gap={1}>
       <Stack gap={1} direction="row" alignItems="center">
@@ -20,7 +20,11 @@ export const AdvancedHeader: StoryFn = () => {
     </Stack>
   )
 
-  return <Card header={CustomHeader}>This is the content of a Card</Card>
+  return (
+    <Card {...args} header={CustomHeader}>
+      This is the content of a Card
+    </Card>
+  )
 }
 
 AdvancedHeader.parameters = {

diff --git a/packages/ui/src/components/Card/__stories__/Disabled.stories.tsx b/packages/ui/src/components/Card/__stories__/Disabled.stories.tsx
@@ -4,8 +4,8 @@ import { Stack } from '../../Stack'
 import { Text } from '../../Text'
 import { Card } from '../index'
 
-export const Disabled: StoryFn = () => (
-  <Card header="Disabled Card" disabled>
+export const Disabled: StoryFn = args => (
+  <Card {...args} header="Disabled Card" disabled>
     <Stack gap={1}>
       <Text as="p" variant="body" disabled>
         This is a disabled card children.

diff --git a/packages/ui/src/components/Card/__stories__/IsActive.stories.tsx b/packages/ui/src/components/Card/__stories__/IsActive.stories.tsx
@@ -5,11 +5,11 @@ import { Stack } from '../../Stack'
 import { Text } from '../../Text'
 import { Card } from '../index'
 
-export const IsActive: StoryFn = () => {
+export const IsActive: StoryFn = args => {
   const [active, setActive] = useState(true)
 
   return (
-    <Card header="Active Card" isActive={active}>
+    <Card {...args} header="Active Card" isActive={active}>
       <Stack gap={6} direction="row" justifyContent="space-between">
         <Text as="p" variant="body" color={active ? 'primary' : 'neutral'}>
           This card is currently highlighted through isActive prop. In this