feat: locale picker in the storybook's decorator

projects/story-decorator/decorator.ts

@@ -28,24 +28,16 @@ export const themeStyles = html`
     </style>
 `;
 
-export const swcThemeDecoratorWithConfig =
-    ({ bundled } = { bundled: true }) =>
-    (story: () => TemplateResult) => {
-        if (!bundled) {
-            requestAnimationFrame(() => {
-                document.documentElement.setAttribute('lang', 'en');
-                const decorator = document.querySelector(
-                    'sp-story-decorator'
-                ) as HTMLElement;
-                render(story(), decorator);
-            });
-        }
-        return html`
-            ${themeStyles}
-            <sp-story-decorator role="main">
-                ${bundled ? story() : html``}
-            </sp-story-decorator>
-        `;
-    };
+export const swcThemeDecorator = (story: () => TemplateResult) => {
+    requestAnimationFrame(() => {
+        const decorator = document.querySelector(
+            'sp-story-decorator'
+        ) as HTMLElement;
+        render(story(), decorator);
+    });
 
-export const swcThemeDecorator = swcThemeDecoratorWithConfig();
+    return html`
+        ${themeStyles}
+        <sp-story-decorator role="main"></sp-story-decorator>
+    `;
+};

projects/story-decorator/package.json

@@ -32,6 +32,10 @@
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
         },
+        "./src/locales.js": {
+            "development": "./src/locales.dev.js",
+            "default": "./src/locales.js"
+        },
         "./src/types.js": {
             "development": "./src/types.dev.js",
             "default": "./src/types.js"

projects/story-decorator/src/StoryDecorator.ts

@@ -41,6 +41,7 @@ import {
     Theme,
 } from '@spectrum-web-components/theme';
 import './types.js';
+import { type Locale, locales } from './locales.js';
 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
@@ -57,13 +58,15 @@ export let color: Color =
 export let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';
 export let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';
 export let screenshot = urlParams.get('sp_screenshot') === 'true';
+export let locale = urlParams.get('sp_locale') || 'en-US';
 
 window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {
     defaultSystemVariant: system,
     defaultColor: color,
     defaultScale: scale,
     defaultDirection: dir,
     defaultReduceMotion: reduceMotion,
+    defaultLocale: locale,
 };
 
 const reduceMotionProperties = css`
@@ -182,6 +185,9 @@ export class StoryDecorator extends SpectrumElement {
     @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })
     public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;
 
+    @property({ type: String })
+    public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;
+
     @property({ type: Boolean, reflect: true })
     public screenshot = screenshot;
 
@@ -233,6 +239,9 @@ export class StoryDecorator extends SpectrumElement {
                     reduceMotion =
                     window.__swc_hack_knobs__.defaultReduceMotion =
                         checked as boolean;
+            case 'locale':
+                this.lang = window.__swc_hack_knobs__.defaultLocale =
+                    value as Locale;
                 break;
         }
     }
@@ -257,6 +266,7 @@ export class StoryDecorator extends SpectrumElement {
                 color=${this.color}
                 scale=${this.scale}
                 dir=${this.direction}
+                lang=${this.lang}
                 part="container"
                 @keydown=${this.handleKeydown}
             >
@@ -301,7 +311,8 @@ export class StoryDecorator extends SpectrumElement {
         return html`
             <div class="manage-theme" part="controls">
                 ${this.systemControl} ${this.colorControl} ${this.scaleControl}
-                ${this.dirControl} ${this.reduceMotionControl}
+                ${this.localeControl} ${this.dirControl}
+                ${this.reduceMotionControl}
             </div>
         `;
     }
@@ -362,6 +373,28 @@ export class StoryDecorator extends SpectrumElement {
         `;
     }
 
+    private get localeControl(): TemplateResult {
+        const renderLocaleOption = (locale: Locale): TemplateResult => html`
+            <sp-menu-item value=${locale}>${locale}</sp-menu-item>
+        `;
+
+        return html`
+            <sp-field-label side-aligned="start" for="locale">
+                Locale
+            </sp-field-label>
+            <sp-picker
+                id="locale"
+                label="Locale"
+                placement="top"
+                quiet
+                .value=${this.lang}
+                @change=${this.updateTheme}
+            >
+                ${locales.map(renderLocaleOption)}
+            </sp-picker>
+        `;
+    }
+
     private get dirControl(): TemplateResult {
         return html`
             <sp-field-label side-aligned="start" for="dir">

projects/story-decorator/src/locales.ts

@@ -0,0 +1,39 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export const locales = [
+    'cs-CZ',
+    'cy-GB',
+    'da-DK',
+    'de-DE',
+    'en-GB',
+    'en-US',
+    'es-ES',
+    'fi-FI',
+    'fr-FR',
+    'hu-HU',
+    'it-IT',
+    'ja-JP',
+    'ko-KR',
+    'nb-NO',
+    'nl-NL',
+    'pl-PL',
+    'pt-BR',
+    'ru-RU',
+    'sv-SE',
+    'tr-TR',
+    'uk-UA',
+    'zh-Hans-CN',
+    'zh-Hant-TW',
+] as const;
+
+export type Locale = (typeof locales)[number];

projects/story-decorator/src/types.ts

@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Color, Scale, SystemVariant } from '@spectrum-web-components/theme';
+import { Locale } from './locales.js';
 
 declare global {
     interface Window {
@@ -20,6 +21,7 @@ declare global {
             defaultDirection: 'ltr' | 'rtl';
             defaultReduceMotion: boolean;
             hcm: boolean;
+            defaultLocale: Locale;
         };
     }
 }