feat: use globals to enable VRT modes in chromatic

adobe · Dec 11, 2024 · 5b674b4 · 5b674b4
1 parent 7d2f840
commit 5b674b4
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 12 deletions.
diff --git a/projects/story-decorator/decorator.ts b/projects/story-decorator/decorator.ts
@@ -28,16 +28,53 @@ export const themeStyles = html`
     </style>
 `;
 
-export const swcThemeDecorator = (story: () => TemplateResult) => {
-    requestAnimationFrame(() => {
-        const decorator = document.querySelector(
-            'sp-story-decorator'
-        ) as HTMLElement;
-        render(story(), decorator);
-    });
+export const swcThemeDecoratorWithConfig =
+    ({ bundled } = { bundled: true }) =>
+    (
+        story: () => TemplateResult,
+        context: import('@storybook/csf').StoryContext<any, any>
+    ) => {
+        if (!bundled) {
+            requestAnimationFrame(() => {
+                document.documentElement.setAttribute('lang', 'en');
+                const decorator = document.querySelector(
+                    'sp-story-decorator'
+                ) as HTMLElement;
+                render(story(), decorator);
+            });
+        }
+
+        let hideNavStyles;
+        // If the global settings exist, hide the bottom toolbar
+        if (
+            context?.globals?.system ||
+            context?.globals?.color ||
+            context?.globals?.scale ||
+            context?.globals?.textDirection ||
+            context?.globals?.reduceMotion
+        ) {
+            hideNavStyles = html`
+                <style>
+                    sp-story-decorator::part(controls) {
+                        display: none;
+                    }
+                </style>
+            `;
+        }
+
+        return html`
+            ${themeStyles} ${hideNavStyles}
+            <sp-story-decorator
+                role="main"
+                system=${context?.globals?.system}
+                color=${context?.globals?.color}
+                scale=${context?.globals?.scale}
+                .direction=${context?.globals?.textDirection}
+                ?reduce-motion=${context?.globals?.reduceMotion}
+            >
+                ${bundled ? story() : html``}
+            </sp-story-decorator>
+        `;
+    };
 
-    return html`
-        ${themeStyles}
-        <sp-story-decorator role="main"></sp-story-decorator>
-    `;
-};
+export const swcThemeDecorator = swcThemeDecoratorWithConfig();
diff --git a/storybook/preview.js b/storybook/preview.js
@@ -15,6 +15,82 @@ import cem from './custom-elements.json';
 
 setCustomElementsManifest(cem);
 
+export const globalTypes = {
+    system: {
+        title: 'Design context',
+        description: 'The variation of Spectrum to use in the component',
+        defaultValue: 'spectrum',
+        type: 'string',
+        showName: true,
+        toolbar: {
+            items: [
+                { value: 'spectrum', title: 'Spectrum 2', right: 'default' },
+                { value: 'legacy', title: 'Spectrum 1', right: 'legacy' },
+                { value: 'express', title: 'Express' },
+            ],
+            dynamicTitle: true,
+        },
+    },
+    color: {
+        title: 'Color',
+        description: 'Controls the color context of the component',
+        defaultValue: 'light',
+        icon: 'paintbrush',
+        type: 'string',
+        toolbar: {
+            items: [
+                { value: 'light', title: 'Light', right: 'default' },
+                { value: 'dark', title: 'Dark' },
+            ],
+            dynamicTitle: true,
+        },
+    },
+    scale: {
+        title: 'Platform scale',
+        description: 'Controls the platform scale of the component',
+        defaultValue: 'medium',
+        type: 'string',
+        toolbar: {
+            items: [
+                {
+                    value: 'medium',
+                    title: 'Medium',
+                    right: 'default',
+                    icon: 'browser',
+                },
+                { value: 'large', title: 'Large', icon: 'mobile' },
+            ],
+            dynamicTitle: true,
+        },
+    },
+    textDirection: {
+        title: 'Text direction',
+        description: 'Direction of the content flow',
+        defaultValue: 'ltr',
+        type: 'string',
+        toolbar: {
+            items: [
+                { value: 'ltr', title: 'Left to right' },
+                { value: 'rtl', title: 'Right to left' },
+            ],
+            dynamicTitle: true,
+        },
+    },
+    reducedMotion: {
+        title: 'Reduce motion',
+        description: 'Reduce animation and transitions',
+        defaultValue: false,
+        type: 'boolean',
+        toolbar: {
+            items: [
+                { value: false, title: 'Default', icon: 'play' },
+                { value: true, title: 'Reduced motion', icon: 'stop' },
+            ],
+            dynamicTitle: true,
+        },
+    },
+};
+
 export const parameters = {
     docs: { hidden: true },
     controls: { expanded: true },
@@ -33,6 +109,21 @@ export const parameters = {
         forcedColors: 'none',
         prefersReducedMotion: 'no-preference',
         pauseAnimationAtEnd: true,
+        modes: {
+            'Context: Spectrum 1': {
+                scale: 'medium',
+                color: 'light',
+                textDirection: 'ltr',
+                context: 'spectrum1',
+            },
+            'Context: Express': {
+                context: 'express',
+            },
+            'Dark | RTL': {
+                color: 'dark',
+                textDirection: 'rtl',
+            },
+        },
     },
 };