Provide Right-to-left (RTL) mode/toggle in storybook

[tay1orjones]

The problem

There's currently no way to easily change the direction of the storybook canvas to test or view components in rtl mode.

The solution

Provide a way to toggle rtl mode within the storybook canvas. It shouldn't impact the rest of the page.

Before we can do this we either need to run the styles through RTLCSS and include them in storybook or wait until we've refactored to use CSS Logical Properties and Values #13619

Examples

There's some addons out there, but nothing officially from storybook. We might consider using one of these or rolling our own if we find it doesn't work as we'd like.

• https://storybook.js.org/addons/storybook-i18n/

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[tay1orjones]

This is blocked by #13619

[tay1orjones]

While it initially made sense to do #13619 first, I'm realizing that as we implement the logical properties over time, it would be nice if we could more easily test rtl with this switcher now vs later once all the components are migrated to use logical properties.

So I wouldn't consider this blocked anymore