Update storybook to surface desigh (Light, Light alt, Dark, Dark alt)…

… switcher for the default view and include viewports, add viewports to chromatic snapshots Accordion shows how to override theme switcher on individual stories

.storybook/main.js

@@ -1,8 +1,8 @@
 import fs from "fs";
 import path from "path";
 
-import { mergeConfig } from "vite";
 
+/** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
   stories: [
     // Include all stories found under the src/components directory ( For example: alert/alert.stories.js )
@@ -12,6 +12,7 @@ const config = {
   addons: [
     //Storybook addons
     //https://storybook.js.org/addons/
+    "@storybook/addon-themes",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-links",
@@ -20,7 +21,6 @@ const config = {
   framework: {
     //Build the storybook with html-vite rendered - faster than webpack
     //https://www.npmjs.com/package/@storybook/html-vite
-    // todo: consider @storybook/builder-vite instead?
     name: "@storybook/html-vite",
     options: {},
   },

.storybook/modes.js

@@ -0,0 +1,23 @@
+// .storybook/modes.js
+
+export const allModes = {
+  mobile: {
+    viewport: "small",
+  },
+  desktop: {
+    viewport: "large",
+  },
+  "Light": {
+    theme: "light",
+  },
+  "Light alternative": {
+    theme: "alt",
+  },
+  "Dark": {
+    theme: "dark",
+  },
+  "Dark alternative": {
+    theme: "dark-alt",
+  }
+};
+

.storybook/preview.js

@@ -1,55 +1,95 @@
-
 import "../dist/assets/js/bootstrap.min.js";
 import "../dist/assets/js/main.js";
 import "../dist/assets/css/qld.bootstrap.css";
+import {withThemeByClassName} from '@storybook/addon-themes';
+import {allModes} from "./modes.js";
+// import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
-
+/** @type { import('@storybook/html-vite').Preview } */
 const preview = {
 
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    hideNoControlsWarning: true,
-    expanded: true,
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    html: {
-      highlighter: {
-        wrapLines: false,
-      },
+    parameters: {
+        // actions: {argTypesRegex: "^on[A-Z].*"},
+        backgrounds: {
+            values: [
+                {name: 'default', value: '#FFFFFF'},
+                {name: 'light', value: '#EFF4F9'},
+                {name: 'alternative', value: '#E8E8E8'},
+            ],
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        chromatic: {
+            //🔶 Test each story for ArticleCard in two modes
+            modes: {
+                // Light: allModes["Light"],
+                // "Light alternative": allModes["Light alternative"],
+                // Dark: allModes["Dark"],
+                // "Dark alternative": allModes["Dark alternative"],
+                mobile: allModes["mobile"],
+                desktop: allModes["desktop"],
+                "1200px": { viewport: 1200 }, //original non-modes based baseline
+            },
+        },
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+        expanded: true,
+        hideNoControlsWarning: true,
+        html: {
+            highlighter: {
+                wrapLines: false,
+            },
+        },
+        viewport: {
+            viewports: {
+                small: {name: "Small", styles: {width: "640px", height: "800px"}},
+                //TODO: add tablet style
+                large: {name: "Large", styles: {width: "1024px", height: "1000px"}},
+            },
+        },
     },
-    docs: {
-      source: {
-        excludeDecorators: true,
-      },
 
-		},
-		backgrounds: {
-			values: [
-        { name: 'default', value: '#FFFFFF' },
-        { name: 'light', value: '#EFF4F9' },
-        { name: 'alternative', value: '#E8E8E8' },
-			],
-    },
-  },
+    decorators: [
 
-  decorators: [
-    (Story) => {
-      return `
+        // data-bs-theme="dark" does not work, use legacy way
+        withThemeByClassName({
+            themes: {
+                "Light": 'light',
+                "Light alternative": 'alt',
+                "Dark": 'dark',
+                "Dark alternative": 'dark-alt',
+            },
+            defaultTheme: 'light',
+        }),
+        //QGDS BS theming is not using data-bs-theme="dark" correctly. https://getbootstrap.com/docs/5.3/customize/color-modes/
+        // withThemeByDataAttribute({
+        //   themes: {
+        //     light: 'light',
+        //     dark: 'dark',
+        //   },
+        //   defaultTheme: 'light',
+        //   attributeName: 'data-bs-theme',
+        // }),
+        (Story) => {
+            return `
 			<div class="container-fluid">
 				<div class="row">
 					<div class="col-12">
 					${Story()}
 					</div>
 				</div>
 			</div>
-
+			
       		`;
-    },
-  ],
+        },
+    ],
 };
 
 export default preview;