Skip to content

feat(storybook): add LTR/RTL preview toggle and audit pointer #739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
QuintonJason merged 5 commits into from
May 28, 2026
Merged

feat(storybook): add LTR/RTL preview toggle and audit pointer #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c4ff9f
feat(storybook): add LTR/RTL preview toggle and audit pointer
QuintonJason May 15, 2026
ca8e690
fix(storybook): use direction icon for RTL toolbar
QuintonJason May 15, 2026
8a0a314
fix(storybook): scope RTL dir to preview iframe only
QuintonJason May 21, 2026
d93f441
fix(storybook): use valid transfer icon for direction toolbar
QuintonJason May 22, 2026
ca3e48b
docs(storybook): update RTL guide cross-reference in preview
QuintonJason May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions libs/core/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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',
Comment thread
cursor[bot] marked this conversation as resolved.
},

parameters: {
Expand Down
8 changes: 6 additions & 2 deletions libs/core/src/stories/guides/rtl-and-localization.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<html>` and `<body>`, 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.
Loading