From d9fd903ecc82250623a3cc07affb692f6708103d Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Fri, 6 Dec 2024 14:09:28 -0500
Subject: [PATCH] fix: use the right testing mode in Chromatic

---
 .storybook/modes.js                             | 17 +++++++++++++++++
 .storybook/preview.tsx                          |  4 ++--
 .../stories/BottomSheet.actions.story.tsx       |  2 +-
 .../stories/BottomSheet.content.story.tsx       |  2 +-
 .../stories/BottomSheet.features.story.tsx      |  2 +-
 .../stories/BottomSheet.parts.story.tsx         |  2 +-
 src/BottomSheet/stories/BottomSheet.story.tsx   |  2 +-
 src/TopBar/stories/TopBar.backButton.story.tsx  |  7 +++++--
 src/TopBar/stories/TopBar.menu.story.tsx        |  8 ++++++--
 src/TopBar/stories/TopBar.story.tsx             |  7 +++++--
 10 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 .storybook/modes.js

diff --git a/.storybook/modes.js b/.storybook/modes.js
new file mode 100644
index 000000000..48ef34fcd
--- /dev/null
+++ b/.storybook/modes.js
@@ -0,0 +1,17 @@
+export const allModes = {
+  touch: {
+    locale: "en",
+    desktopScale: "standard",
+    theme: "touch",
+  },
+  desktop: {
+    locale: "en",
+    desktopScale: "standard",
+    theme: "touch",
+  },
+  experimental: {
+    locale: "en",
+    desktopScale: "experimental",
+    theme: "touch",
+  },
+};
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index cfe1881bd..d1dc0d795 100644
--- a/.storybook/preview.tsx
+++ b/.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: {
diff --git a/src/BottomSheet/stories/BottomSheet.actions.story.tsx b/src/BottomSheet/stories/BottomSheet.actions.story.tsx
index 0326fc6f4..14d8d6262 100644
--- a/src/BottomSheet/stories/BottomSheet.actions.story.tsx
+++ b/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 = () => {
diff --git a/src/BottomSheet/stories/BottomSheet.content.story.tsx b/src/BottomSheet/stories/BottomSheet.content.story.tsx
index 09cb62075..543e61438 100644
--- a/src/BottomSheet/stories/BottomSheet.content.story.tsx
+++ b/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 = () => {
diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
index ff3e0d4f8..beaafefc1 100644
--- a/src/BottomSheet/stories/BottomSheet.features.story.tsx
+++ b/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 = () => {
diff --git a/src/BottomSheet/stories/BottomSheet.parts.story.tsx b/src/BottomSheet/stories/BottomSheet.parts.story.tsx
index 34dfefc66..fa81d226c 100644
--- a/src/BottomSheet/stories/BottomSheet.parts.story.tsx
+++ b/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 = () => {
diff --git a/src/BottomSheet/stories/BottomSheet.story.tsx b/src/BottomSheet/stories/BottomSheet.story.tsx
index 273d4f23d..c0f2a001e 100644
--- a/src/BottomSheet/stories/BottomSheet.story.tsx
+++ b/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 = () => {
diff --git a/src/TopBar/stories/TopBar.backButton.story.tsx b/src/TopBar/stories/TopBar.backButton.story.tsx
index 9d8f9f07a..18d5872d1 100644
--- a/src/TopBar/stories/TopBar.backButton.story.tsx
+++ b/src/TopBar/stories/TopBar.backButton.story.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
+import { TopBar } from "../TopBar";
+import { allModes } from "../../../.storybook/modes";
 import { legacy as theme } from "../../theme/theme";
 import numberFromDimension from "../../utils/numberFromDimension";
-import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
 
 export default {
@@ -10,7 +11,9 @@ export default {
     layout: "fullscreen",
     chromatic: {
       viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
-      delay: 1000,
+      modes: {
+        touch: allModes["touch"],
+      },
     },
   },
   title: "Components/TopBar/BackLink",
diff --git a/src/TopBar/stories/TopBar.menu.story.tsx b/src/TopBar/stories/TopBar.menu.story.tsx
index 83286e97f..f51a5d229 100644
--- a/src/TopBar/stories/TopBar.menu.story.tsx
+++ b/src/TopBar/stories/TopBar.menu.story.tsx
@@ -1,16 +1,20 @@
 import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
+import { TopBar } from "../TopBar";
+import { allModes } from "../../../.storybook/modes";
 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,
+      viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
+      modes: {
+        touch: allModes["touch"],
+      },
     },
   },
   title: "Components/TopBar/Menu",
diff --git a/src/TopBar/stories/TopBar.story.tsx b/src/TopBar/stories/TopBar.story.tsx
index 618b47d56..6cb849900 100644
--- a/src/TopBar/stories/TopBar.story.tsx
+++ b/src/TopBar/stories/TopBar.story.tsx
@@ -3,19 +3,22 @@ import { FormSection } from "../../Form";
 import { Input } from "../../Input";
 import { ApplicationFrame, Page } from "../../Layout";
 import { TopBar } from "../TopBar";
+import { allModes } from "../../../.storybook/modes";
 import { legacy as theme } from "../../theme/theme";
 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: {
+        touch: allModes["touch"],
+      },
     },
   },
-  title: "Components/TopBar",
 };
 
 export const Default = () => (