diff --git a/projects/story-decorator/decorator.ts b/projects/story-decorator/decorator.ts index d3922105bd..b79f4b50ea 100644 --- a/projects/story-decorator/decorator.ts +++ b/projects/story-decorator/decorator.ts @@ -28,24 +28,16 @@ export const themeStyles = html` `; -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} - - ${bundled ? story() : html``} - - `; - }; +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} + + `; +}; diff --git a/projects/story-decorator/package.json b/projects/story-decorator/package.json index 15d76a5738..5ee01499f0 100644 --- a/projects/story-decorator/package.json +++ b/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" diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index 61209d2a43..9edcff1340 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/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,6 +58,7 @@ 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, @@ -64,6 +66,7 @@ window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || { 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`
${this.systemControl} ${this.colorControl} ${this.scaleControl} - ${this.dirControl} ${this.reduceMotionControl} + ${this.localeControl} ${this.dirControl} + ${this.reduceMotionControl}
`; } @@ -362,6 +374,28 @@ export class StoryDecorator extends SpectrumElement { `; } + private get localeControl(): TemplateResult { + const renderLocaleOption = (locale: Locale): TemplateResult => html` + ${Locales[locale]} + `; + + return html` + + Locale + + + ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)} + + `; + } + private get dirControl(): TemplateResult { return html` diff --git a/projects/story-decorator/src/locales.ts b/projects/story-decorator/src/locales.ts new file mode 100644 index 0000000000..6a6eef77dc --- /dev/null +++ b/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; diff --git a/projects/story-decorator/src/types.ts b/projects/story-decorator/src/types.ts index 09124231d7..82d7afd304 100644 --- a/projects/story-decorator/src/types.ts +++ b/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; }; } }