chore(storybook): add pages for chromatic theme snapshots

vmware-clarity · Feb 22, 2023 · 8f4f5d1 · 8f4f5d1
1 parent 1e6a351
commit 8f4f5d1
Show file tree

Hide file tree

Showing 7 changed files with 1,938 additions and 17 deletions.
diff --git a/.github/workflows/accept-merged-visual-changes.yml b/.github/workflows/accept-merged-visual-changes.yml
@@ -26,4 +26,4 @@ jobs:
         timeout-minutes: 5
         env:
           CHROMATIC_PROJECT_TOKEN: ${{secrets.CHROMATIC_PROJECT_TOKEN}}
-        run: npx chromatic --storybook-build-dir ./dist/docs --auto-accept-changes main
+        run: npx chromatic --only-changed --storybook-build-dir ./dist/docs --auto-accept-changes main
diff --git a/.github/workflows/pr-visual-regression.yml b/.github/workflows/pr-visual-regression.yml
@@ -50,4 +50,4 @@ jobs:
           CHROMATIC_SHA: ${{steps.get_pr_event.outputs.sourceHeadSha}}
           CHROMATIC_BRANCH: ${{steps.get_pr_event.outputs.sourceHeadBranch}}
           CHROMATIC_SLUG: ${{steps.get_pr_event.outputs.sourceHeadRepo}}
-        run: npx chromatic --storybook-build-dir ./dist/docs --exit-once-uploaded
+        run: npx chromatic --only-changed --storybook-build-dir ./dist/docs --exit-once-uploaded
diff --git a/.storybook/helpers/constants.ts b/.storybook/helpers/constants.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+export const THEMES = {
+  NG_LIGHT: '',
+  NG_DARK: 'clr-ui-dark',
+  CORE_LIGHT: 'light',
+  CORE_DARK: 'dark',
+  HIGH_CONTRAST: 'high-contrast',
+};
diff --git a/.storybook/helpers/setup-storybook.helpers.ts b/.storybook/helpers/setup-storybook.helpers.ts
@@ -10,6 +10,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Parameters } from '@storybook/addons';
 import { moduleMetadata, storiesOf, Story } from '@storybook/angular';
+import isChromatic from 'chromatic/isChromatic';
+
+import { THEMES } from './constants';
 
 export function setupStorybook(
   ngModules: Type<any> | Type<any>[],
@@ -34,13 +37,24 @@ export function setupStorybook(
   storyApi.add('Default', defaultStory, defaultParameters);
 
   if (variants) {
-    storyApi.add('Variants', variants.length ? combineStories(defaultStory, variants) : defaultStory, {
+    const combinedStories = variants.length ? combineStories(defaultStory, variants) : defaultStory;
+    const defaultVariantParameters = {
       a11y: { disable: true },
       actions: { disable: true },
       controls: { disable: true },
       previewTabs: { 'storybook/docs/panel': { hidden: true } },
       chromatic: { disableSnapshot: false },
-    });
+    };
+    if (isChromatic()) {
+      for (const [themeKey, theme] of Object.entries(THEMES)) {
+        storyApi.add(`Variants - ${themeKey}`, combinedStories, {
+          ...defaultVariantParameters,
+          themeOverride: theme,
+        });
+      }
+    } else {
+      storyApi.add('Variants', combinedStories, defaultVariantParameters);
+    }
   }
 }
 

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -20,6 +20,7 @@ import darkThemeStyles from 'raw-loader!../node_modules/@cds/core/styles/theme.d
 import highContrastThemeStyles from 'raw-loader!../node_modules/@cds/core/styles/theme.high-contrast.min.css';
 import shimStyles from 'raw-loader!../dist/clr-ui/shim.cds-core.css';
 import { getClrUiAppBackgroundColor } from './helpers/clr-ui-theme.helpers';
+import { THEMES } from './helpers/constants';
 
 const privateModifier = 121;
 const cdsThemeAttribute = 'cds-theme';
@@ -58,33 +59,36 @@ export const globalTypes = {
       icon: 'paintbrush',
       showName: true,
       items: [
-        { value: '', title: '@clr/ui Light Theme' },
-        { value: 'clr-ui-dark', title: '@clr/ui Dark Theme' },
-        { value: 'light', title: '@cds/core Light Theme' },
-        { value: 'dark', title: '@cds/core Dark Theme' },
-        { value: 'high-contrast', title: '@cds/core High Contrast Theme' },
+        { value: THEMES.NG_LIGHT, title: '@clr/ui Light Theme' },
+        { value: THEMES.NG_DARK, title: '@clr/ui Dark Theme' },
+        { value: THEMES.CORE_LIGHT, title: '@cds/core Light Theme' },
+        { value: THEMES.CORE_DARK, title: '@cds/core Dark Theme' },
+        { value: THEMES.HIGH_CONTRAST, title: '@cds/core High Contrast Theme' },
       ],
     },
   },
 };
 
-const themeDecorator = (story, { globals }) => {
+const themeDecorator = (story, { globals, parameters }) => {
   const { theme } = globals;
+  const { themeOverride } = parameters;
 
-  switch (theme) {
-    case '':
+  const currentTheme = themeOverride || theme;
+
+  switch (currentTheme) {
+    case THEMES.NG_LIGHT:
       styleElement.textContent = clrUiStyles;
       document.body.removeAttribute(cdsThemeAttribute);
-      document.body.style.backgroundColor = getClrUiAppBackgroundColor(theme);
+      document.body.style.backgroundColor = getClrUiAppBackgroundColor(currentTheme);
       break;
-    case 'clr-ui-dark':
+    case THEMES.NG_DARK:
       styleElement.textContent = clrUiDarkStyles;
       document.body.removeAttribute(cdsThemeAttribute);
-      document.body.style.backgroundColor = getClrUiAppBackgroundColor(theme);
+      document.body.style.backgroundColor = getClrUiAppBackgroundColor(currentTheme);
       break;
     default:
       styleElement.textContent = `${clrUiStyles}${cdsCoreAndShimStyles.join('')}`;
-      document.body.setAttribute(cdsThemeAttribute, theme);
+      document.body.setAttribute(cdsThemeAttribute, currentTheme);
       document.body.style.backgroundColor = null;
       break;
   }