From 321dae4a47594af83269fa560b375965d7f35763 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 22 May 2022 15:09:39 +0200
Subject: fix: render all images unoptimized in Storybook

There is a bug with next/image and Storybook. I was manually adding
`unoptimized` to images. Instead we can use a workaround by adding an
extra config in Storybook `preview.js` file.
---
 .../molecules/images/responsive-image.stories.tsx  | 57 ++++++++++++++++++++--
 1 file changed, 52 insertions(+), 5 deletions(-)

(limited to 'src/components/molecules/images/responsive-image.stories.tsx')

diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index ca69d4f..4917cde 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -80,7 +80,6 @@ export default {
         required: false,
       },
     },
-    unoptimized: { table: { disable: true } },
     width: {
       control: {
         type: 'number',
@@ -121,7 +120,18 @@ Default.args = {
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With borders
+ */
+export const WithBorders = Template.bind({});
+WithBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  withBorders: true,
 };
 
 /**
@@ -133,10 +143,22 @@ WithLink.args = {
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
-  unoptimized: true,
   target: '#',
 };
 
+/**
+ * Responsive Image Stories - With link and borders
+ */
+export const WithLinkAndBorders = Template.bind({});
+WithLinkAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  target: '#',
+  withBorders: true,
+};
+
 /**
  * Responsive Image Stories - With caption
  */
@@ -147,7 +169,19 @@ WithCaption.args = {
   width: 640,
   height: 480,
   caption: 'Omnis nulla labore',
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption and borders
+ */
+export const WithCaptionAndBorders = Template.bind({});
+WithCaptionAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  withBorders: true,
 };
 
 /**
@@ -161,5 +195,18 @@ WithCaptionAndLink.args = {
   height: 480,
   caption: 'Omnis nulla labore',
   target: '#',
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption, link and borders
+ */
+export const WithCaptionLinkAndBorders = Template.bind({});
+WithCaptionLinkAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  target: '#',
+  withBorders: true,
 };
-- 
cgit v1.2.3