feat: Image srcset documentation (#1066)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Feb 19, 2024 · 9db4a81 · 9db4a81
1 parent 9e454af
commit 9db4a81
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/storybook/storybook-react/src/Image/Image.docs.mdx b/storybook/storybook-react/src/Image/Image.docs.mdx
@@ -1,11 +1,27 @@
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as ImageStories from "./Image.stories.tsx";
 import README from "../../../../packages/css/src/components/image/README.md?raw";
 
 <Meta of={ImageStories} />
 
 <Markdown>{README}</Markdown>
 
+## Examples
+
 <Primary />
 
 <Controls />
+
+## Provide multiple sources
+
+Use the srcSet prop, which controls the corresponding HTML attribute (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)), to let the browser select the optimal source file for the image.
+A mobile device can often download a smaller file, saving the user’s bandwidth and time.
+
+<Canvas of={ImageStories.MultipleSources} />
+
+## Prevent unnecessary loading
+
+Set the `loading` attribute (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading)) to `lazy` and the browser will wait to load the image until it is close to the viewport.
+Consider setting this for images below the top area of the page.
+
+<Canvas of={ImageStories.LazyLoading} />
diff --git a/storybook/storybook-react/src/Image/Image.stories.tsx b/storybook/storybook-react/src/Image/Image.stories.tsx
@@ -21,3 +21,19 @@ export const Default: Story = {
     src: 'https://picsum.photos/640/360',
   },
 }
+
+export const MultipleSources: Story = {
+  args: {
+    alt: '',
+    srcSet: 'https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w',
+    sizes: '(max-width: 36rem) 640px, 50vw',
+  },
+}
+
+export const LazyLoading: Story = {
+  args: {
+    alt: '',
+    src: 'https://picsum.photos/2560/1440',
+    loading: 'lazy',
+  },
+}
diff --git a/storybook/storybook-react/src/Overlap/Overlap.stories.tsx b/storybook/storybook-react/src/Overlap/Overlap.stories.tsx
@@ -30,7 +30,6 @@ export const Default: Story = {
           alt=""
           cover
           sizes="(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px"
-          src="https://picsum.photos/640/180"
           srcSet="https://picsum.photos/640/180 640w, https://picsum.photos/1280/360 1280w, https://picsum.photos/1600/450 1600w"
         />
       </AspectRatio>,