fix: correct off by one error and align all breakpoint values to work…

… together (#530)
washingtonpost · Nov 6, 2023 · 7b3bc1c · 7b3bc1c · vercel · Nov 6, 2023
1 parent b261af1
commit 7b3bc1c
Show file tree

Hide file tree

Showing 4 changed files with 417 additions and 9 deletions.
diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js
@@ -0,0 +1,27 @@
+const { getStoryContext } = require("@storybook/test-runner");
+
+const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 };
+
+module.exports = {
+  async preRender(page, story) {
+    const context = await getStoryContext(page, story);
+    const viewportName = context.parameters?.viewport?.defaultViewport;
+    const viewportParameter =
+      context.parameters?.viewport?.viewports?.[viewportName];
+
+    if (viewportParameter) {
+      const viewportSize = Object.entries(viewportParameter.styles).reduce(
+        (acc, [screen, size]) => ({
+          ...acc,
+          // make sure your viewport config in Storybook only uses numbers, not percentages
+          [screen]: parseInt(size),
+        }),
+        {}
+      );
+
+      page.setViewportSize(viewportSize);
+    } else {
+      page.setViewportSize(DEFAULT_VIEWPORT_SIZE);
+    }
+  },
+};