1 files changed, 55 insertions, 0 deletions
diff --git a/browser/components/storybook/.storybook/addon-pseudo-localization/PseudoLocalizationButton.mjs b/browser/components/storybook/.storybook/addon-pseudo-localization/PseudoLocalizationButton.mjs
new file mode 100644
index 0000000000..d60112d224
--- /dev/null
+++ b/browser/components/storybook/.storybook/addon-pseudo-localization/PseudoLocalizationButton.mjs
@@ -0,0 +1,55 @@
+/* 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/. */
+
+// eslint-disable-next-line no-unused-vars
+import React from "react";
+import { useGlobals } from "@storybook/api";
+import {
+  // eslint-disable-next-line no-unused-vars
+  Icons,
+  // eslint-disable-next-line no-unused-vars
+  IconButton,
+  // eslint-disable-next-line no-unused-vars
+  WithTooltip,
+  // eslint-disable-next-line no-unused-vars
+  TooltipLinkList,
+} from "@storybook/components";
+import { TOOL_ID, STRATEGY_DEFAULT, PSEUDO_STRATEGIES } from "./constants.mjs";
+
+// React component for a button + tooltip that gets added to the Storybook toolbar.
+export const PseudoLocalizationButton = () => {
+  const [{ pseudoStrategy = STRATEGY_DEFAULT }, updateGlobals] = useGlobals();
+
+  const updatePseudoStrategy = strategy => {
+    updateGlobals({ pseudoStrategy: strategy });
+  };
+
+  const getTooltipLinks = ({ onHide }) => {
+    return PSEUDO_STRATEGIES.map(strategy => ({
+      id: strategy,
+      title: strategy.charAt(0).toUpperCase() + strategy.slice(1),
+      onClick: () => {
+        updatePseudoStrategy(strategy);
+        onHide();
+      },
+      active: pseudoStrategy === strategy,
+    }));
+  };
+
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={props => <TooltipLinkList links={getTooltipLinks(props)} />}
+    >
+      <IconButton
+        key={TOOL_ID}
+        active={pseudoStrategy && pseudoStrategy !== STRATEGY_DEFAULT}
+        title="Apply pseudo localization"
+      >
+        <Icons icon="transfer" />
+      </IconButton>
+    </WithTooltip>
+  );
+};