From 86ef879eec7d14237a80149ac76443654bc10a1e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 18 Dec 2024 22:30:56 +0100
Subject: [PATCH] Add more examples of captions

---
 storybook/src/components/Figure/Figure.stories.tsx |  8 ++++----
 storybook/src/components/shared/exampleContent.ts  | 13 +++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/storybook/src/components/Figure/Figure.stories.tsx b/storybook/src/components/Figure/Figure.stories.tsx
index fe31ea4b57..936bdf7126 100644
--- a/storybook/src/components/Figure/Figure.stories.tsx
+++ b/storybook/src/components/Figure/Figure.stories.tsx
@@ -6,9 +6,9 @@
 import { Image } from '@amsterdam/design-system-react'
 import { Figure } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
+import { exampleCaption } from '../shared/exampleContent'
 
-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.'
+const caption = exampleCaption()
 
 const meta = {
   title: 'Components/Media/Figure',
@@ -35,14 +35,14 @@ export const Default: Story = {
         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>,
+      <Figure.Caption>{caption}</Figure.Caption>,
     ],
   },
 }
 
 export const InverseColour: CaptionStory = {
   args: {
-    children: exampleCaption,
+    children: caption,
     inverseColor: true,
   },
   render: ({ children, ...args }) => (
diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts
index b53be2bb3e..c251506d2e 100644
--- a/storybook/src/components/shared/exampleContent.ts
+++ b/storybook/src/components/shared/exampleContent.ts
@@ -17,6 +17,19 @@ export const exampleAccordionHeading = () =>
     'Voorgaande versies van ramingen',
   ])
 
+export const exampleCaption = () =>
+  pickRandomContent<string>([
+    '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. Foto: Liam Dekker.',
+    'Een rij geparkeerde fietsen langs een smalle gracht met klassieke Amsterdamse gevels op de achtergrond.',
+    'Een klein houten bootje dobbert rustig op het water, omringd door bomen en bakstenen panden met grote ramen. Foto: Sophie van der Brugge.',
+    'Een typische Amsterdamse brug met smeedijzeren leuningen, vol met fietsen en uitzicht op een grachtenpand met een klokgevel.',
+    'Een stille gracht met weerspiegelende gevels, terwijl een tram in de verte over een brug rijdt. Foto: Isabel Groeneveld.',
+    'Een zonovergoten terras aan de gracht, met stoelen op de kade en uitzicht op een sierlijke ophaalbrug.',
+    'Een grachtenpand met vrolijke bloemenbakken op de vensterbanken en een smalle trap naar de voordeur. Foto: Joris Zandvoort.',
+    'Een schuin geplaatste fiets tegen een lantaarnpaal, met op de achtergrond een karakteristiek houten bruggetje.',
+    'Een groep Ajax-supporters in rood-witte sjaals verzamelt zich op een plein, klaar voor een wedstrijd in de Johan Cruijff ArenA. Foto: Louis Flitskamp.',
+  ])
+
 export const exampleHeading = () =>
   pickRandomContent<string>([
     'Meer plekken voor kunst en cultuur, verspreid over de stad',