tweak story parameters

coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
commit 3eeb8d0ef6324eba34cde7ca6992ea261a6722e9
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -76,4 +76,16 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: {
+      ipad: {
+        name: "iPad Mini",
+        styles: {
+          height: "1024px",
+          width: "768px",
+        },
+        type: "tablet",
+      },
+    },
+  },
 };
diff --git a/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx b/site/src/components/Dashboard/Navbar/NavbarView.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { chromatic } from "testHelpers/chromatic";
+import { chromaticWithTablet } from "testHelpers/chromatic";
 import { MockUser, MockUser2 } from "testHelpers/entities";
 import { NavbarView } from "./NavbarView";
 
 const meta: Meta<typeof NavbarView> = {
   title: "components/NavbarView",
-  parameters: { chromatic },
+  parameters: { chromatic: chromaticWithTablet },
   component: NavbarView,
   args: {
     user: MockUser,
@@ -25,12 +25,3 @@ export const ForMember: Story = {
     canViewAllUsers: false,
   },
 };
-
-export const SmallViewport: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "tablet",
-    },
-    chromatic: { viewports: [420] },
-  },
-};
diff --git a/site/src/testHelpers/chromatic.ts b/site/src/testHelpers/chromatic.ts
@@ -4,3 +4,10 @@ export const chromatic = {
     light: { theme: "light" },
   },
 };
+
+export const chromaticWithTablet = {
+  modes: {
+    "dark desktop": { theme: "dark" },
+    "light tablet": { theme: "light", viewport: "ipad" },
+  },
+};