feat: locale picker in the storybook's decorator (#4687)

---------

Co-authored-by: Rúben Carvalho <[email protected]>

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;
 
@@ -234,6 +240,10 @@ export class StoryDecorator extends SpectrumElement {
                     window.__swc_hack_knobs__.defaultReduceMotion =
                         checked as boolean;
                 break;
+            case 'locale':
+                this.lang = window.__swc_hack_knobs__.defaultLocale =
+                    value as Locale;
+                break;
         }
     }
 
@@ -257,6 +267,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 +312,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 +374,28 @@ export class StoryDecorator extends SpectrumElement {
         `;
     }
 
+    private get localeControl(): TemplateResult {
+        const renderLocaleOption = (locale: Locale): TemplateResult => html`
+            <sp-menu-item value=${locale}>${Locales[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}
+            >
+                ${(Object.keys(Locales) as Locale[]).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,43 @@
+/*
+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 enum Locales {
+    'bn-IN' = 'Bengali (India)',
+    'cy-GB' = 'Welsh (United Kingdom)',
+    'da-DK' = 'Danish (Denmark)',
+    'de-DE' = 'German (Germany)',
+    'el-GR' = 'Greek (Greece)',
+    'en-US' = 'English (United States)',
+    'es-ES' = 'Spanish (Spain)',
+    'fi-FI' = 'Finnish (Finland)',
+    'fil-PH' = 'Filipino (Philippines)',
+    'fr-FR' = 'French (France)',
+    'hi-IN' = 'Hindi (India)',
+    'id-ID' = 'Indonesian (Indonesia)',
+    'it-IT' = 'Italian (Italy)',
+    'ja-JP' = 'Japanese (Japan)',
+    'ko-KR' = 'Korean (South Korea)',
+    'ms-MY' = 'Malay (Malaysia)',
+    'nb-NO' = 'Norwegian (Bokmål, Norway)',
+    'nl-NL' = 'Dutch (Netherlands)',
+    'pl-PL' = 'Polish (Poland)',
+    'pt-BR' = 'Portuguese (Brazil)',
+    'ro-RO' = 'Romanian (Romania)',
+    'sv-SE' = 'Swedish (Sweden)',
+    'ta-IN' = 'Tamil (India)',
+    'th-TH' = 'Thai (Thailand)',
+    'tr-TR' = 'Turkish (Turkey)',
+    'zh-Hans-CN' = 'Chinese (Simplified, China)',
+    'zh-Hant-TW' = 'Chinese (Traditional, Taiwan)',
+}
+
+export type Locale = keyof typeof Locales;

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;
         };
     }
 }