2 files changed, 61 insertions, 0 deletions
diff --git a/browser/components/storybook/.storybook/addon-pseudo-localization/preset/manager.mjs b/browser/components/storybook/.storybook/addon-pseudo-localization/preset/manager.mjs
new file mode 100644
index 0000000000..0f7ff9299b
--- /dev/null
+++ b/browser/components/storybook/.storybook/addon-pseudo-localization/preset/manager.mjs
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/** This file handles registering the Storybook addon */
+
+// eslint-disable-next-line no-unused-vars
+import React from "react";
+import { addons, types } from "@storybook/addons";
+import { ADDON_ID, PANEL_ID, TOOL_ID } from "../constants.mjs";
+import { PseudoLocalizationButton } from "../PseudoLocalizationButton.mjs";
+// eslint-disable-next-line no-unused-vars
+import { FluentPanel } from "../FluentPanel.mjs";
+
+// Register the addon.
+addons.register(ADDON_ID, api => {
+  // Register the tool.
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "Pseudo Localization",
+    // Toolbar button doesn't show on the "Docs" tab.
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^story$/)),
+    render: PseudoLocalizationButton,
+  });
+
+  addons.add(PANEL_ID, {
+    title: "Fluent",
+    //👇 Sets the type of UI element in Storybook
+    type: types.PANEL,
+    render: ({ active, key }) => (
+      <FluentPanel active={active} api={api} key={key}></FluentPanel>
+    ),
+  });
+});
diff --git a/browser/components/storybook/.storybook/addon-pseudo-localization/preset/preview.mjs b/browser/components/storybook/.storybook/addon-pseudo-localization/preset/preview.mjs
new file mode 100644
index 0000000000..cf4f135d40
--- /dev/null
+++ b/browser/components/storybook/.storybook/addon-pseudo-localization/preset/preview.mjs
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * This file provides global decorators for the Storybook addon. In theory we
+ * could combine multiple decorators, but for now we only need one.
+ */
+
+import {
+  withPseudoLocalization,
+  withFluentStrings,
+} from "../withPseudoLocalization.mjs";
+
+export const decorators = [withPseudoLocalization, withFluentStrings];
+export const globalTypes = {
+  pseudoStrategy: {
+    name: "Pseudo l10n strategy",
+    description: "Provides text variants for testing different locales.",
+    defaultValue: "default",
+  },
+  fluentStrings: {
+    name: "Fluent string map for components",
+    description: "Mapping of component to fluent strings.",
+    defaultValue: {},
+  },
+};