Migrate Chromatic Viewports

Chromatic has changed the way they handle viewports for stories.
https://www.chromatic.com/docs/storybook/viewports/#migration-from-viewports-legacy-to-modes

.storybook/modes.js

@@ -0,0 +1,9 @@
+// Set the viewport widths that Chromatic tests with globally.
+export const allModes = {
+  xs: {
+    viewport: "xs",
+  },
+  xl: {
+    viewport: "xl",
+  },
+};

.storybook/preview.js

@@ -1,4 +1,5 @@
 import "../src/styles/css/base.css";
+import { allModes } from "../.storybook/modes";
 
 export const parameters = {
   layout: "fullscreen",
@@ -9,13 +10,24 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: {
+      xs: { name: "XSmall", styles: { width: "400px", height: "900px" } },
+      sm: { name: "Small", styles: { width: "640px", height: "900px" } },
+      md: { name: "Medium", styles: { width: "768px", height: "900px" } },
+      lg: { name: "Large", styles: { width: "1024px", height: "900px" } },
+      xl: { name: "XL", styles: { width: "1200px", height: "900px" } },
+      "2xl": { name: "2XL", styles: { width: "1536px", height: "900px" } },
+    },
+  },
   chromatic: {
     // Notifies Chromatic to pause the animations when they finish at a global level
     // This is because Chromatic doesn't show the cover image when the animation starts with opacity 0
     pauseAnimationAtEnd: true,
-    // Set the viewport widths that Chromatic tests with globally.
-    // 400 lies between our screen-xs & screen-s variables.
-    // 1200 is the chromatic viewport we were using as default before adding an extra one for phones.
-    viewports: [400, 1200],
+    // Instructs Chromatic to test all stories at the specified viewport
+    modes: {
+      "400px": allModes["xs"],
+      "1200px": allModes["xl"],
+    },
   },
 };