From f7fe71b3cbacf184c7e4b9764558504d6960d523 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 13 Nov 2023 10:34:00 +0100
Subject: [PATCH] Simplify image sizes in docs

---
 .../src/AspectRatio/AspectRatio.stories.tsx   | 19 +++++++------------
 .../storybook-react/src/Card/Card.stories.tsx |  2 +-
 .../storybook-react/src/Grid/Grid.stories.tsx |  2 +-
 .../src/Image/Image.stories.tsx               |  2 +-
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx b/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx
index 54be316010..1c4ad3a160 100644
--- a/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx
+++ b/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx
@@ -26,24 +26,19 @@ type Story = StoryObj<typeof meta>
 
 const storyConfig = {
   'extra-wide': {
-    image: 'https://picsum.photos/1600/900',
-    maxWidth: '888px',
+    image: 'https://picsum.photos/640/360',
   },
   wide: {
-    image: 'https://picsum.photos/1000/800',
-    maxWidth: '625px',
+    image: 'https://picsum.photos/480/360',
   },
   square: {
-    image: 'https://picsum.photos/800/800',
-    maxWidth: '500px',
+    image: 'https://picsum.photos/360/360',
   },
   tall: {
-    image: 'https://picsum.photos/800/1000',
-    maxWidth: '400px',
+    image: 'https://picsum.photos/360/480',
   },
   'extra-tall': {
-    image: 'https://picsum.photos/900/1600',
-    maxWidth: '300px',
+    image: 'https://picsum.photos/360/640',
   },
 }
 
@@ -56,8 +51,8 @@ const StoryTemplate: Story = {
     ),
   ],
   render: ({ ratio }) => (
-    <AspectRatio ratio={ratio} style={{ maxWidth: ratio ? storyConfig[ratio].maxWidth : '500px' }}>
-      <Image alt="" src={ratio ? storyConfig[ratio].image : 'https://picsum.photos/800/800'} />
+    <AspectRatio ratio={ratio}>
+      <Image alt="" src={storyConfig[ratio ?? 'square'].image} />
     </AspectRatio>
   ),
 }
diff --git a/storybook/storybook-react/src/Card/Card.stories.tsx b/storybook/storybook-react/src/Card/Card.stories.tsx
index 744c26100f..0a5fae4de9 100644
--- a/storybook/storybook-react/src/Card/Card.stories.tsx
+++ b/storybook/storybook-react/src/Card/Card.stories.tsx
@@ -57,7 +57,7 @@ export const ImageCard: Story = {
   args: {
     children: [
       <AspectRatio key={1} ratio="wide">
-        <Image alt="" src="https://picsum.photos/440/352" />
+        <Image alt="" src="https://picsum.photos/480/360" />
       </AspectRatio>,
       <Card.HeadingGroup key={2} tagline="Dossier">
         <Heading size="level-4">
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index c0c33af605..e4a6ec174c 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -39,7 +39,7 @@ export const Cells: Story = {
     children: Array.from(Array(3).keys()).map((i) => (
       <Grid.Cell key={i} span={4}>
         <figure className="amsterdam-docs-figure">
-          <Image alt="" src={`https://picsum.photos/1024/576?random=${i}`} />
+          <Image alt="" src={`https://picsum.photos/640/360?random=${i}`} />
         </figure>
       </Grid.Cell>
     )),
diff --git a/storybook/storybook-react/src/Image/Image.stories.tsx b/storybook/storybook-react/src/Image/Image.stories.tsx
index a2fcc2ac90..27eda6dc6a 100644
--- a/storybook/storybook-react/src/Image/Image.stories.tsx
+++ b/storybook/storybook-react/src/Image/Image.stories.tsx
@@ -18,6 +18,6 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     alt: '',
-    src: 'https://picsum.photos/1600/900',
+    src: 'https://picsum.photos/640/360',
   },
 }