From 887c1b8808fe6ea29e1fdbcb1008eeff3a1534e4 Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:46:30 +0100
Subject: [PATCH] test: create chromaticParams helper with wide viewport

---
 apps/nextjs/.storybook/chromatic.ts           | 44 ++++++++++---------
 .../MobileExportButtons.stories.tsx           |  4 +-
 .../Chat/export-buttons/index.stories.tsx     |  4 +-
 .../AppComponents/Chat/header.stories.tsx     |  2 +
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts
index e70ccc1d9..242ca9798 100644
--- a/apps/nextjs/.storybook/chromatic.ts
+++ b/apps/nextjs/.storybook/chromatic.ts
@@ -1,27 +1,29 @@
 import "@storybook/csf";
 
-const defaultMode = { "1200px": { viewport: 1200 } } as const;
-const mobileMode = { mobile: { viewport: 375 } };
-const desktopMode = { desktop: { viewport: 1200 } };
+type ChromaticModes = "legacy" | "mobile" | "desktop" | "desktop-wide";
 
-export const CHROMATIC_MOBILE_ONLY = {
-  chromatic: { modes: mobileMode },
-};
-export const CHROMATIC_DESKTOP_ONLY = {
-  chromatic: { modes: desktopMode },
-};
-export const CHROMATIC_ALL_VIEWPORTS = {
-  chromatic: { modes: { ...mobileMode, ...desktopMode } },
-};
-
-// NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
-//       These options allow us to reuse the existing desktop snapshot until we're ready to migrate
-export const CHROMATIC_DESKTOP_COMPAT = {
-  chromatic: { modes: defaultMode },
-};
-export const CHROMATIC_ALL_VIEWPORTS_COMPAT = {
-  chromatic: { modes: { ...mobileMode, ...defaultMode } },
-};
+export function chromaticParams(modes: ChromaticModes[]) {
+  return {
+    chromatic: {
+      modes: {
+        ...(modes.includes("mobile") && {
+          mobile: { viewport: 375 },
+        }),
+        ...(modes.includes("desktop") && {
+          desktop: { viewport: 1200 },
+        }),
+        ...(modes.includes("desktop-wide") && {
+          "wide desktop": { viewport: 1400 },
+        }),
+        // NOTE: Before we used modes, all snapshots were by default in the 1200px mode.
+        //       This option allows us to reuse the existing desktop snapshot until we're ready to migrate
+        ...(modes.includes("legacy") && {
+          "1200px": { viewport: 1200 as const },
+        }),
+      },
+    },
+  };
+}
 
 declare module "@storybook/csf" {
   interface Parameters {
diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx
index c97db6a29..9d220d9c0 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/MobileExportButtons.stories.tsx
@@ -4,7 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
-import { CHROMATIC_MOBILE_ONLY } from "../../../../../.storybook/chromatic";
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import { MobileExportButtons } from "./MobileExportButtons";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -41,7 +41,7 @@ const meta: Meta<typeof MobileExportButtons> = {
     viewport: {
       defaultViewport: "mobile1",
     },
-    ...CHROMATIC_MOBILE_ONLY,
+    ...chromaticParams(["mobile"]),
   },
   args: {
     closeMobileLessonPullOut: () => {},
diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
index 0acdae769..54129f8f9 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/index.stories.tsx
@@ -4,7 +4,7 @@ import type { ChatContextProps } from "@/components/ContextProviders/ChatProvide
 import { ChatContext } from "@/components/ContextProviders/ChatProvider";
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
-import { CHROMATIC_DESKTOP_COMPAT } from "../../../../../.storybook/chromatic";
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import ExportButtons from "./";
 
 const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -44,7 +44,7 @@ const meta: Meta<typeof ExportButtons> = {
     documentContainerRef: { current: null },
   },
   parameters: {
-    ...CHROMATIC_DESKTOP_COMPAT,
+    ...chromaticParams(["compat"]),
   },
 };
 
diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
index ff5fd20a3..910e77685 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/header.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { DemoContext } from "@/components/ContextProviders/Demo";
 
+import { chromaticParams } from "../../../../.storybook/chromatic";
 import { Header } from "./header";
 
 const DemoDecorator: Story["decorators"] = (Story, { parameters }) => (
@@ -23,6 +24,7 @@ const meta: Meta<typeof Header> = {
   decorators: [DemoDecorator],
   parameters: {
     layout: "fullscreen",
+    ...chromaticParams(["legacy", "desktop"]),
     docs: {
       story: {
         height: "150px",