fix: use the right testing mode in Chromatic

.storybook/modes.js

@@ -0,0 +1,21 @@
+import { destkop as theme } from "../src/theme";
+import numberFromDimension from "../src/utils/numberFromDimension";
+
+export const allModes = {
+  touch: {
+    locale: "en",
+    desktopScale: "standard",
+    theme: "touch",
+    viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
+  },
+  desktop: {
+    locale: "en",
+    desktopScale: "standard",
+    theme: "desktop",
+  },
+  experimental: {
+    locale: "en",
+    desktopScale: "experimental",
+    theme: "desktop",
+  },
+};

.storybook/preview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { desktop as theme } from "../src/theme";
 import { ALL_NDS_LOCALES, NDSProvider } from "../src";
 
-const newViewports = {
+const viewports = {
   extraSmall: {
     name: "Extra small",
     styles: {
@@ -41,7 +41,7 @@ const newViewports = {
 };
 
 export const parameters = {
-  viewport: { viewports: newViewports },
+  viewport: { viewports },
   layout: "padded",
   options: {
     storySort: {

src/BottomSheet/stories/BottomSheet.actions.story.tsx

@@ -5,10 +5,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Actions",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
   parameters: {
     chromatic: { delay: 1000 },
   },
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
 };
 
 export const WithAHiddenCloseButton = () => {

src/BottomSheet/stories/BottomSheet.content.story.tsx

@@ -7,10 +7,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Content",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
   parameters: {
     chromatic: { delay: 1000 },
   },
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
 };
 
 export const WithHelpText = () => {

src/BottomSheet/stories/BottomSheet.features.story.tsx

@@ -13,10 +13,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Features",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
   parameters: {
     chromatic: { delay: 1000 },
   },
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
 };
 
 export const WithCustomWidths = () => {

src/BottomSheet/stories/BottomSheet.parts.story.tsx

@@ -8,10 +8,10 @@ import { BottomSheetParts as BottomSheet } from "../BottomSheet.parts";
 
 export default {
   title: "Components/BottomSheet/Parts",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
   parameters: {
     chromatic: { delay: 1000 },
   },
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
 };
 
 export const RenderedUsingCompositionalAPI = () => {

src/BottomSheet/stories/BottomSheet.story.tsx

@@ -5,10 +5,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
   parameters: {
     chromatic: { delay: 1000 },
   },
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
 };
 
 export const BasicUsage = () => {

src/TopBar/stories/TopBar.backButton.story.tsx

@@ -1,16 +1,22 @@
 import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
+import { TopBar } from "../TopBar";
 import { legacy as theme } from "../../theme/theme";
 import numberFromDimension from "../../utils/numberFromDimension";
-import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
 
 export default {
   parameters: {
     layout: "fullscreen",
     chromatic: {
-      viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
-      delay: 1000,
+      modes: {
+        locale: "en",
+        desktopScale: "standard",
+        theme: "touch",
+        viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(
+          numberFromDimension
+        ),
+      },
     },
   },
   title: "Components/TopBar/BackLink",

src/TopBar/stories/TopBar.menu.story.tsx

@@ -1,16 +1,23 @@
 import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
+import { TopBar } from "../TopBar";
 import { legacy as theme } from "../../theme/theme";
 import numberFromDimension from "../../utils/numberFromDimension";
-import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
 
 export default {
   parameters: {
     layout: "fullscreen",
     chromatic: {
-      viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
       delay: 1000,
+      modes: {
+        locale: "en",
+        desktopScale: "standard",
+        theme: "touch",
+        viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(
+          numberFromDimension
+        ),
+      },
     },
   },
   title: "Components/TopBar/Menu",

src/TopBar/stories/TopBar.story.tsx

@@ -8,14 +8,20 @@ import numberFromDimension from "../../utils/numberFromDimension";
 import { menuItems } from "./fixtures";
 
 export default {
+  title: "Components/TopBar",
   parameters: {
     layout: "fullscreen",
     chromatic: {
-      viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
-      delay: 1000,
+      modes: {
+        locale: "en",
+        desktopScale: "standard",
+        theme: "touch",
+        viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(
+          numberFromDimension
+        ),
+      },
     },
   },
-  title: "Components/TopBar",
 };
 
 export const Default = () => (