diff --git a/libs/core/.storybook/preview.js b/libs/core/.storybook/preview.js index 0f01c72cc..a013d0783 100644 --- a/libs/core/.storybook/preview.js +++ b/libs/core/.storybook/preview.js @@ -138,10 +138,29 @@ const withTheme = (StoryFn, context) => { return StoryFn(); }; +// Direction decorator that applies `dir` on the preview iframe only. +// Unlike data-theme, `dir` is interpreted by the browser and must not be set on +// window.parent (that would flip Storybook manager/docs chrome). +// See Guides/RTL and localization for usage. +const withDirection = (StoryFn, context) => { + const direction = context.globals.direction || 'ltr'; + + document.documentElement.setAttribute('dir', direction); + document.body.setAttribute('dir', direction); + + useEffect(() => { + document.documentElement.setAttribute('dir', direction); + document.body.setAttribute('dir', direction); + }, [direction]); + + return StoryFn(); +}; + const preview = { decorators: [ withCustomEventActions, withTheme, + withDirection, ], globalTypes: { @@ -157,10 +176,23 @@ const preview = { dynamicTitle: true, }, }, + direction: { + description: 'Document direction (LTR or RTL)', + toolbar: { + title: 'Direction', + icon: 'transfer', + items: [ + { value: 'ltr', title: 'LTR', right: 'Left-to-right' }, + { value: 'rtl', title: 'RTL', right: 'Right-to-left' }, + ], + dynamicTitle: true, + }, + }, }, initialGlobals: { theme: 'light', + direction: 'ltr', }, parameters: { diff --git a/libs/core/src/stories/guides/rtl-and-localization.docs.mdx b/libs/core/src/stories/guides/rtl-and-localization.docs.mdx index ffbbf2381..5fbed1768 100644 --- a/libs/core/src/stories/guides/rtl-and-localization.docs.mdx +++ b/libs/core/src/stories/guides/rtl-and-localization.docs.mdx @@ -12,6 +12,10 @@ Pine targets **English-first** Kajabi product surfaces today. Components are bui 2. **Prefer tokens and logical properties** in consuming apps for spacing and alignment that should mirror under RTL. Report gaps in Slack (`#ds-support`). 3. **Strings live in the product**, not inside Pine primitives—pass translated `label`, `aria-label`, and slot content from your app’s i18n layer. -## Storybook tooling +## Verifying in Storybook -**Pending:** The **Direction** toolbar (LTR / RTL) for spot-checking components in Storybook ships in [#739](https://github.com/Kajabi/pine/pull/739). Audit steps and usage notes will live in this guide once that PR merges. +Storybook includes a **Direction** toolbar control (LTR / RTL). Switching it applies `dir` on the preview iframe’s `` and ``, matching the consumer-app contract for RTL surfaces. + +Use the toggle to spot-check components: mirroring, overlay placement, iconography, truncation, keyboard, and screen reader behavior where applicable. + +When you change component layout or positioning, add or update Stencil tests and a short RTL Storybook example where it helps catch regressions in CI.