Storybook toolbar/global extension to set text directionality

patch.diff

diff --git a/packages/fxa-auth-server/.storybook/main.js b/packages/fxa-auth-server/.storybook/main.js
index e4a6e8f76..b77e307ed 100644
--- a/packages/fxa-auth-server/.storybook/main.js
+++ b/packages/fxa-auth-server/.storybook/main.js
@@ -7,5 +7,9 @@ module.exports = {
     '../lib/senders/emails/**/*.stories.tsx',
     '../lib/senders/emails/**/*.stories.ts',
   ],
-  addons: ['@storybook/addon-docs', '@storybook/addon-controls'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-toolbars',
+  ],
 };
diff --git a/packages/fxa-auth-server/.storybook/preview.js b/packages/fxa-auth-server/.storybook/preview.js
index 3d4253d13..e464f6f7c 100644
--- a/packages/fxa-auth-server/.storybook/preview.js
+++ b/packages/fxa-auth-server/.storybook/preview.js
@@ -5,3 +5,35 @@
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
 };
+
+export const globalTypes = {
+  direction: {
+    name: 'Text directionality',
+    description: 'Set text to LTR or RTL direction',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'transfer',
+      items: [
+        {
+          value: 'ltr',
+          right: '➡️',
+          title: 'Left to Right',
+        },
+        {
+          value: 'rtl',
+          right: '⬅️',
+          title: 'Right to Left',
+        },
+      ],
+    },
+  },
+};
+
+const withTextDirectionality = (Story, context) => {
+  const container = document.createElement('div');
+  container.classList.add(context.globals.direction);
+  container.appendChild(Story(context));
+  return container;
+};
+
+export const decorators = [withTextDirectionality];