feat: support langs in vrts

Author: rise-erpelding

components/textfield/stories/template.js

@@ -334,8 +334,14 @@ export const LocaleWrapper = (args, context) => {
 			value: "สมชาย",
 		},
 	};
-	const { lang } = context.globals;
+
+	const { lang: contextLang } = context.globals;
+	const lang = args.lang || contextLang;
 	const { labelText, value } = translations[lang] ?? translations.en;
 
-	return Template({ ...args, labelText, value }, context);
+	return html`
+		<div lang=${ifDefined(args.lang)}>
+			${Template({ ...args, labelText, value }, context)}
+		</div>
+	`;
 };

components/textfield/stories/textfield.stories.js

@@ -3,8 +3,8 @@ 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, LocaleWrapper, Template, TextFieldOptions } from "./template.js";
-import { TextFieldGroup } from "./textfield.test.js";
+import { HelpTextOptions, KeyboardFocusTemplate, Template, TextFieldOptions } from "./template.js";
+import { TextFieldGroup, TextFieldLocaleGroup } from "./textfield.test.js";
 
 /**
  * Text fields are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.
@@ -149,7 +149,7 @@ export const Default = TextFieldGroup.bind({});
 Default.tags = ["!autodocs"];
 Default.args = {};
 
-export const WithLocaleText = LocaleWrapper.bind({});
+export const WithLocaleText = TextFieldLocaleGroup.bind({});
 WithLocaleText.tags = ["!autodocs"];
 
 // ********* DOCS ONLY ********* //

components/textfield/stories/textfield.test.js

@@ -1,5 +1,5 @@
 import { Variants } from "@spectrum-css/preview/decorators";
-import { Template } from "./template.js";
+import { LocaleWrapper, Template } from "./template.js";
 
 export const TextFieldGroup = Variants({
 	Template,
@@ -63,3 +63,32 @@ export const TextFieldGroup = Variants({
 		isReadOnly: true,
 	}]
 });
+
+export const TextFieldLocaleGroup = Variants({
+	Template: LocaleWrapper,
+	withSizes: false,
+	testData: [{
+		testHeading: "English",
+	}, {
+		testHeading: "Hebrew",
+		lang: "he",
+	}, {
+		testHeading: "Japanese",
+		lang: "ja",
+	}, {
+		testHeading: "Korean",
+		lang: "ko",
+	}, {
+		testHeading: "Arabic",
+		lang: "ar",
+	}, {
+		testHeading: "Chinese",
+		lang: "zh",
+	}, {
+		testHeading: "Persian",
+		lang: "fa",
+	}, {
+		testHeading: "Thai",
+		lang: "th",
+	}]
+});