From 7de3749b700b09634b7e6c003bd2de245fe75f12 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 27 Dec 2023 16:20:11 +0100
Subject: [PATCH] :construction: [#584] Try chromatic modes

---
 .storybook/modes.js   |  8 ++++++++
 .storybook/preview.js | 13 +++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .storybook/modes.js

diff --git a/.storybook/modes.js b/.storybook/modes.js
new file mode 100644
index 000000000..b00151a59
--- /dev/null
+++ b/.storybook/modes.js
@@ -0,0 +1,8 @@
+export const allModes = {
+  mobile: {
+    viewport: "small",
+  },
+  desktop: {
+    viewport: "large",
+  }
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index ec3b30831..21d616f8d 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -23,6 +23,7 @@ import {
   withClearSubmissionLocalStorage,
 } from './decorators';
 import {reactIntl} from './reactIntl.js';
+import {allModes} from "./modes";
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -54,6 +55,12 @@ export default {
   },
   parameters: {
     actions: {argTypesRegex: '^on[A-Z].*'},
+    viewport: {
+      viewports: {
+        small: { name: "Small", styles: { width: "640px", height: "800px" } },
+        large: { name: "Large", styles: { width: "1024px", height: "1000px" } },
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -85,6 +92,12 @@ export default {
         ],
       },
     },
+    chromatic: {
+      modes: {
+        mobile: allModes.mobile,
+        desktop: allModes.desktop
+      }
+    }
   },
   loaders: [mswLoader],
 };