diff --git a/.storybook/decorators/language.js b/.storybook/decorators/language.js index a49621d0563..97c16114d94 100644 --- a/.storybook/decorators/language.js +++ b/.storybook/decorators/language.js @@ -1,5 +1,7 @@ -import { makeDecorator, useEffect } from "@storybook/preview-api"; -import { fetchContainers } from "./helpers.js"; +import { allFakers } from "@faker-js/faker"; +import { makeDecorator, useEffect } from '@storybook/preview-api'; +import { capitalize } from "lodash-es"; +import { fetchContainers } from "./helpers"; /* global Typekit */ /** @@ -17,9 +19,21 @@ export const withLanguageWrapper = makeDecorator({ viewMode, } = context; - useEffect(() => { - const isNotEnglish = lang && lang !== "en-US"; + const isNotEnglish = lang && lang !== "en-US"; + const isRTL = ["ar", "fa", "he"].includes(lang); + + // @todo: this can't be used for VRT because the strings are random + // Attach the generator tool to the parameters for use in the story + context.generator = allFakers?.[lang]; + + // Add a custom generator for titles + context.generator.lorem.title = (count) => capitalize(context.generator.lorem.words(count)); + // Add a textDirection property to the globals for use in the story + context.globals.textDirection = isRTL ? "rtl" : "ltr"; + + + useEffect(() => { // If it is US-language or unset use the rok6rmo Adobe font web project id (smaller size), // otherwise use the mge7bvf kit with all the language settings (larger size) const kitId = isNotEnglish ? "mge7bvf" : "rok6rmo"; @@ -55,10 +69,12 @@ export const withLanguageWrapper = makeDecorator({ } catch (e) {/* empty */} } + // Set the language and direction on the relevant containers for (const container of fetchContainers(id, viewMode === "docs")) { container.lang = lang; + container.dir = !isRTL ? "ltr" : "rtl"; } - }, [lang]); + }, [lang, isNotEnglish, isRTL, viewMode, id]); return StoryFn(context); }, diff --git a/.storybook/decorators/text-direction.js b/.storybook/decorators/text-direction.js deleted file mode 100644 index 8f4168a109c..00000000000 --- a/.storybook/decorators/text-direction.js +++ /dev/null @@ -1,30 +0,0 @@ -import { makeDecorator, useEffect } from "@storybook/preview-api"; -import { fetchContainers } from "./helpers.js"; - -/** - * @type import('@storybook/csf').DecoratorFunction - * @description Sets the text direction of the document, using the global set with a toolbar control. These properties are assigned to the document root element. - **/ -export const withTextDirectionWrapper = makeDecorator({ - name: "withTextDirectionWrapper", - parameterName: "textDecoration", - wrapper: (StoryFn, context) => { - const { - globals: { - textDirection = "ltr", - } = {}, - id, - viewMode, - } = context; - - useEffect(() => { - if (!textDirection) return; - - for (const container of fetchContainers(id, viewMode === "docs")) { - container.dir = textDirection; - } - }, [textDirection]); - - return StoryFn(context); - }, -}); diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index 734bd52d09f..cf0b8e303fd 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -15,7 +15,7 @@ const modes = { "Context: Spectrum 1": { scale: "medium", color: "light", - textDirection: "ltr", + lang: "en_US", context: "legacy", }, "Context: Express": { @@ -27,7 +27,7 @@ const modes = { "Dark | RTL": { scale: "medium", color: "dark", - textDirection: "rtl", + lang: "ar", }, }; @@ -39,3 +39,34 @@ export const disableDefaultModes = { return acc; }, {}), }; + +export const mobile = { + "Mobile": { + scale: "large", + }, +}; + +export const viewports = { + small: { + width: 480, + }, +}; + +export const i18n = { + // This is the default language, so we don't need to specify it here + // "English": { + // lang: "en_US", + // }, + "Hebrew": { + lang: "he", + }, + "Japanese": { + lang: "ja", + }, + "Korean": { + lang: "ko", + }, + "Arabic": { + lang: "ar", + }, +}; diff --git a/.storybook/package.json b/.storybook/package.json index 6c6d5149506..bcd0908f0b7 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -9,9 +9,9 @@ "exports": { ".": "./preview.js", "./blocks": "./blocks/index.js", + "./blocks/*": "./blocks/*", "./decorators": "./decorators/index.js", "./decorators/*": "./decorators/*", - "./deprecated/*": "./deprecated/*", "./loaders": "./loaders/index.js", "./loaders/*": "./loaders/*", "./main": "./main.js", @@ -20,6 +20,7 @@ "./modes/*": "./modes/*", "./package.json": "./package.json", "./preview": "./preview.js", + "./templates/*": "./templates/*", "./types": "./types/index.js", "./types/*": "./types/*" }, @@ -38,6 +39,7 @@ "@babel/core": "^7.26.0", "@chromaui/addon-visual-tests": "^1.0.0", "@etchteam/storybook-addon-status": "^5.0.0", + "@faker-js/faker": "^8.4.1", "@storybook/addon-a11y": "^8.3.6", "@storybook/addon-actions": "^8.3.6", "@storybook/addon-console": "^3.0.0", diff --git a/.storybook/types/global.js b/.storybook/types/global.js index aceccb44c4c..1417ad07fe8 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -47,19 +47,6 @@ export default { dynamicTitle: true, }, }, - textDirection: { - title: "Text direction", - description: "Direction of the content flow", - defaultValue: "ltr", - type: "string", - toolbar: { - items: [ - { value: "ltr", title: "Left to right" }, - { value: "rtl", title: "Right to left" }, - ], - dynamicTitle: true, - }, - }, // @todo https://jira.corp.adobe.com/browse/CSS-314 reducedMotion: { title: "Reduce motion", @@ -77,14 +64,15 @@ export default { lang: { title: "Language", description: "Language of the content", - defaultValue: "en-US", + defaultValue: "en_US", type: "string", toolbar: { items: [ - { value: "en-US", title: "🇺🇸", right: "English (US)" }, - { value: "ja", title: "🇯🇵", right: "日本語" }, - { value: "ko", title: "🇰🇷", right: "한국어" }, - { value: "zh", title: "🇨🇳", right: "中文" }, + { value: "en_US", title: "English", right: "English (US)" }, + { value: "he", title: "Hebrew", right: "עִברִית" }, + { value: "ja", title: "Japanese", right: "日本語" }, + { value: "ko", title: "Korean", right: "한국어" }, + { value: "ar", title: "Arabic", right: "عربي" }, ], dynamicTitle: true, }, diff --git a/yarn.lock b/yarn.lock index 88e09980b6c..28859a22aa1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1935,6 +1935,13 @@ __metadata: languageName: node linkType: hard +"@faker-js/faker@npm:^8.4.1": + version: 8.4.1 + resolution: "@faker-js/faker@npm:8.4.1" + checksum: 10c0/4f2aecddcfdc2cc8b50b2d15d1e37302a7c7a5bbd184ae910a9d271bc11248533ca74dcdd4a9ccbe20410553e7af0f6a4d334c5b955635e09a32ddf4a64942d4 + languageName: node + linkType: hard + "@fastify/busboy@npm:^2.0.0": version: 2.1.1 resolution: "@fastify/busboy@npm:2.1.1" @@ -3828,6 +3835,7 @@ __metadata: "@babel/core": "npm:^7.26.0" "@chromaui/addon-visual-tests": "npm:^1.0.0" "@etchteam/storybook-addon-status": "npm:^5.0.0" + "@faker-js/faker": "npm:^8.4.1" "@spectrum-css/table": "workspace:^" "@spectrum-css/tokens": "workspace:^" "@spectrum-css/typography": "workspace:^"