Make example code easier to view and copy

Amsterdam · Dec 18, 2024 · ebefaf2 · ebefaf2
1 parent 4ae56ee
commit ebefaf2
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx
@@ -7,16 +7,6 @@ import { Image } from '@amsterdam/design-system-react'
 import { Figure } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
-const ExampleImage = () => (
-  <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"
-  />
-)
-
 const exampleCaption =
   'Een rustige Amsterdamse gracht met eeuwenoude gevels die weerspiegelen in het water, terwijl fietsen nonchalant tegen de brugleuning rusten – een alledaags tafereel vol historie en charme.'
 
@@ -27,34 +17,44 @@ const meta = {
 
 export default meta
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const captionMeta = {
   component: Figure.Caption,
 } satisfies Meta<typeof Figure.Caption>
 
 type Story = StoryObj<typeof meta>
 type CaptionStory = StoryObj<typeof captionMeta>
 
-const CaptionStoryTemplate: CaptionStory = {
-  decorators: [
-    (Story) => (
-      <Figure>
-        <ExampleImage />
-        <Story />
-      </Figure>
-    ),
-  ],
-  render: ({ children, ...args }) => <Figure.Caption {...args}>{children}</Figure.Caption>,
-}
 export const Default: Story = {
   args: {
-    children: [<ExampleImage />, <Figure.Caption>{exampleCaption}</Figure.Caption>],
+    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>{exampleCaption}</Figure.Caption>,
+    ],
   },
 }
 
 export const InverseColour: CaptionStory = {
-  ...CaptionStoryTemplate,
   args: {
     children: exampleCaption,
     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>
+  ),
 }