docs(textfield): add WithLocaleText story

Author: rise-erpelding

components/textfield/stories/template.js

@@ -298,3 +298,44 @@ export const KeyboardFocusTemplate = (args, context) => Container({
 		}, context)}
 	`
 }, context);
+
+export const LocaleWrapper = (args, context) => {
+	const translations = {
+		en: {
+			labelText: "Username",
+			value: "john_doe",
+		},
+		ja: {
+			labelText: "ユーザー名",
+			value: "山田太郎",
+		},
+		zh: {
+			labelText: "用户名",
+			value: "张伟",
+		},
+		ko: {
+			labelText: "사용자 이름",
+			value: "김철수",
+		},
+		ar: {
+			labelText: "اسم المستخدم",
+			value: "محمد_أحمد",
+		},
+		he: {
+			labelText: "שם משתמש",
+			value: "דני123",
+		},
+		fa: {
+			labelText: "نام کاربری",
+			value: "علی_رضا",
+		},
+		th: {
+			labelText: "ชื่อผู้ใช้",
+			value: "สมชาย",
+		},
+	};
+	const { lang } = context.globals;
+	const { labelText, value } = translations[lang] ?? translations.en;
+
+	return Template({ ...args, labelText, value }, context);
+};

components/textfield/stories/textfield.stories.js

@@ -3,7 +3,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isQuiet, isReadOnly, isRequired, isValid, size } from "@spectrum-css/preview/types";
 import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
-import { HelpTextOptions, KeyboardFocusTemplate, Template, TextFieldOptions } from "./template.js";
+import { HelpTextOptions, KeyboardFocusTemplate, LocaleWrapper, Template, TextFieldOptions } from "./template.js";
 import { TextFieldGroup } from "./textfield.test.js";
 
 /**
@@ -149,6 +149,9 @@ export const Default = TextFieldGroup.bind({});
 Default.tags = ["!autodocs"];
 Default.args = {};
 
+export const WithLocaleText = LocaleWrapper.bind({});
+WithLocaleText.tags = ["!autodocs"];
+
 // ********* DOCS ONLY ********* //
 
 export const Standard = TextFieldOptions.bind({});