🚧 [#584] Keep more viewports in storybook

open-formulieren · Dec 27, 2023 · eaf8248 · eaf8248
1 parent 7de3749
commit eaf8248
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/.storybook/modes.js b/.storybook/modes.js
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -23,7 +23,6 @@ import {
   withClearSubmissionLocalStorage,
 } from './decorators';
 import {reactIntl} from './reactIntl.js';
-import {allModes} from "./modes";
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -56,9 +55,12 @@ export default {
   parameters: {
     actions: {argTypesRegex: '^on[A-Z].*'},
     viewport: {
+      // These are the viewports that are shown in Storybook
       viewports: {
-        small: { name: "Small", styles: { width: "640px", height: "800px" } },
-        large: { name: "Large", styles: { width: "1024px", height: "1000px" } },
+        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: {
@@ -93,9 +95,10 @@ export default {
       },
     },
     chromatic: {
+      // Here we specify the viewports of which we want snapshots in Chromatic
       modes: {
-        mobile: allModes.mobile,
-        desktop: allModes.desktop
+        mobile: {viewport: "smallMobile"},
+        desktop: {viewport: "desktop"}
       }
     }
   },