Reuse render prop in meta object

Amsterdam · Dec 20, 2024 · 038e8d7 · 038e8d7
1 parent 25f423f
commit 038e8d7
Showing 1 changed file with 16 additions and 27 deletions.
diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx
@@ -13,6 +13,21 @@ const caption = exampleCaption()
 const meta = {
   title: 'Components/Media/Figure',
   component: Figure,
+  args: {
+    children: caption,
+  },
+  render: ({ children, ...args }) => (
+    <Figure>
+      <Image
+        alt=""
+        aspectRatio="2x-wide"
+        sizes="(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px"
+        src="https://picsum.photos/1600/500"
+        srcSet="https://picsum.photos/640/200 640w, https://picsum.photos/1280/400 1280w, https://picsum.photos/1600/500 1600w"
+      />
+      <Figure.Caption {...args}>{children}</Figure.Caption>
+    </Figure>
+  ),
 } satisfies Meta<typeof Figure>
 
 export default meta
@@ -25,36 +40,10 @@ const captionMeta = {
 type Story = StoryObj<typeof meta>
 type CaptionStory = StoryObj<typeof captionMeta>
 
-export const Default: Story = {
-  args: {
-    children: [
-      <Image
-        alt=""
-        aspectRatio="2x-wide"
-        sizes="(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px"
-        src="https://picsum.photos/1600/500"
-        srcSet="https://picsum.photos/640/200 640w, https://picsum.photos/1280/400 1280w, https://picsum.photos/1600/500 1600w"
-      />,
-      <Figure.Caption>{caption}</Figure.Caption>,
-    ],
-  },
-}
+export const Default: Story = {}
 
 export const InverseColour: CaptionStory = {
   args: {
-    children: caption,
     inverseColor: true,
   },
-  render: ({ children, ...args }) => (
-    <Figure>
-      <Image
-        alt=""
-        aspectRatio="2x-wide"
-        sizes="(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px"
-        src="https://picsum.photos/1600/500"
-        srcSet="https://picsum.photos/640/200 640w, https://picsum.photos/1280/400 1280w, https://picsum.photos/1600/500 1600w"
-      />
-      <Figure.Caption {...args}>{children}</Figure.Caption>
-    </Figure>
-  ),
 }