From 245f42855887c93c29cc7eb8b923852c1f8ced12 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Wed, 27 Dec 2023 16:20:11 +0100
Subject: [PATCH] :construction_worker: [#584] Add chromatic snapshots for
 mobile

---
 .storybook/preview.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index ec3b30831..1ed0c387b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -54,6 +54,15 @@ export default {
   },
   parameters: {
     actions: {argTypesRegex: '^on[A-Z].*'},
+    viewport: {
+      // These are the viewports that are shown in Storybook
+      viewports: {
+        smallMobile: { name: "Small mobile", styles: { width: "320px", height: "568px" } },
+        largeMobile: { name: "Large mobile", styles: { width: "414px", height: "896px" } },
+        tablet: { name: "Tablet", styles: { width: "834px", height: "1112px" } },
+        desktop: { name: "Desktop", styles: { width: "1024px", height: "1000px" } },
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -85,6 +94,13 @@ export default {
         ],
       },
     },
+    chromatic: {
+      // Here we specify the viewports of which we want snapshots in Chromatic
+      modes: {
+        mobile: {viewport: "smallMobile"},
+        desktop: {viewport: "desktop"}
+      }
+    }
   },
   loaders: [mswLoader],
 };