Simplify image sizes in docs (#743)

* Simplify image sizes in docs * Fix image sizes
Amsterdam · Nov 13, 2023 · 6d1d21b · 6d1d21b
1 parent 7e2e11f
commit 6d1d21b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git 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/450/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/450',
   },
   '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
@@ -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/450/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
@@ -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
@@ -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',
   },
 }