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