refactor: Centralize Chromatic parameters

nulogy · Dec 5, 2024 · 6537b5a · 6537b5a
1 parent aa30d94
commit 6537b5a
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 26 deletions.
diff --git a/src/BottomSheet/stories/BottomSheet.actions.story.tsx b/src/BottomSheet/stories/BottomSheet.actions.story.tsx
@@ -2,13 +2,11 @@ import React from "react";
 import { Button, PrimaryButton, QuietButton } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
+import { storyParams } from "./BottomSheet.story";
 
 export default {
+  ...storyParams,
   title: "Components/BottomSheet/Actions",
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
-  parameters: {
-    chromatic: { delay: 1000 },
-  },
 };
 
 export const WithAHiddenCloseButton = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.content.story.tsx b/src/BottomSheet/stories/BottomSheet.content.story.tsx
@@ -4,13 +4,11 @@ import { Link } from "../../Link";
 import { Text } from "../../Type";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
+import { storyParams } from "./BottomSheet.story";
 
 export default {
+  ...storyParams,
   title: "Components/BottomSheet/Content",
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
-  parameters: {
-    chromatic: { delay: 1000 },
-  },
 };
 
 export const WithHelpText = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
@@ -10,13 +10,11 @@ import { toast, ToastContainer } from "../../ToastContainer";
 import { Text } from "../../Type";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
+import { storyParams } from "./BottomSheet.story";
 
 export default {
+  ...storyParams,
   title: "Components/BottomSheet/Features",
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
-  parameters: {
-    chromatic: { delay: 1000 },
-  },
 };
 
 export const WithCustomWidths = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.parts.story.tsx b/src/BottomSheet/stories/BottomSheet.parts.story.tsx
@@ -5,13 +5,11 @@ import { Flex } from "../../Flex";
 import { Link } from "../../Link";
 import { Placeholder } from "../../utils/story/placeholder";
 import { BottomSheetParts as BottomSheet } from "../BottomSheet.parts";
+import { storyParams } from "./BottomSheet.story";
 
 export default {
+  ...storyParams,
   title: "Components/BottomSheet/Parts",
-  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
-  parameters: {
-    chromatic: { delay: 1000 },
-  },
 };
 
 export const RenderedUsingCompositionalAPI = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.story.tsx b/src/BottomSheet/stories/BottomSheet.story.tsx
@@ -3,12 +3,16 @@ import { Button } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
 
-export default {
-  title: "Components/BottomSheet",
+export const storyParams = {
   decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
   parameters: {
     chromatic: { delay: 1000 },
   },
+} as const;
+
+export default {
+  ...storyParams,
+  title: "Components/BottomSheet",
 };
 
 export const BasicUsage = () => {

diff --git a/src/TopBar/stories/TopBar.backButton.story.tsx b/src/TopBar/stories/TopBar.backButton.story.tsx
@@ -2,12 +2,11 @@ import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
+import { storyParams } from "./TopBar.story";
 
 export default {
+  ...storyParams,
   title: "Components/TopBar/BackLink",
-  parameters: {
-    layout: "fullscreen",
-  },
 };
 
 export const WithNoLabel = () => (

diff --git a/src/TopBar/stories/TopBar.menu.story.tsx b/src/TopBar/stories/TopBar.menu.story.tsx
@@ -2,12 +2,11 @@ import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
+import { storyParams } from "./TopBar.story";
 
 export default {
+  ...storyParams,
   title: "Components/TopBar/Menu",
-  parameters: {
-    layout: "fullscreen",
-  },
 };
 
 export const withDefaultOpenMenu = () => (

diff --git a/src/TopBar/stories/TopBar.story.tsx b/src/TopBar/stories/TopBar.story.tsx
@@ -2,14 +2,24 @@ import React from "react";
 import { FormSection } from "../../Form";
 import { Input } from "../../Input";
 import { ApplicationFrame, Page } from "../../Layout";
+import { legacy as theme } from "../../theme/theme";
+import numberFromDimension from "../../utils/numberFromDimension";
 import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
 
-export default {
-  title: "Components/TopBar",
+export const storyParams = {
   parameters: {
     layout: "fullscreen",
+    chromatic: {
+      viewports: [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension),
+      delay: 1000,
+    },
   },
+} as const;
+
+export default {
+  ...storyParams,
+  title: "Components/TopBar",
 };
 
 export const Default = () => (