PseudoLocalizationButton.jsx (1723B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 // eslint-disable-next-line no-unused-vars 6 import React from "react"; 7 import { useGlobals } from "@storybook/manager-api"; 8 import { 9 // eslint-disable-next-line no-unused-vars 10 Icons, 11 // eslint-disable-next-line no-unused-vars 12 IconButton, 13 // eslint-disable-next-line no-unused-vars 14 WithTooltip, 15 // eslint-disable-next-line no-unused-vars 16 TooltipLinkList, 17 } from "@storybook/components"; 18 import { TOOL_ID, STRATEGY_DEFAULT, PSEUDO_STRATEGIES } from "./constants.mjs"; 19 20 // React component for a button + tooltip that gets added to the Storybook toolbar. 21 export const PseudoLocalizationButton = () => { 22 const [{ pseudoStrategy = STRATEGY_DEFAULT }, updateGlobals] = useGlobals(); 23 24 const updatePseudoStrategy = strategy => { 25 updateGlobals({ pseudoStrategy: strategy }); 26 }; 27 28 const getTooltipLinks = ({ onHide }) => { 29 return PSEUDO_STRATEGIES.map(strategy => ({ 30 id: strategy, 31 title: strategy.charAt(0).toUpperCase() + strategy.slice(1), 32 onClick: () => { 33 updatePseudoStrategy(strategy); 34 onHide(); 35 }, 36 active: pseudoStrategy === strategy, 37 })); 38 }; 39 40 return ( 41 <WithTooltip 42 placement="top" 43 trigger="click" 44 tooltip={props => <TooltipLinkList links={getTooltipLinks(props)} />} 45 > 46 <IconButton 47 key={TOOL_ID} 48 active={pseudoStrategy && pseudoStrategy !== STRATEGY_DEFAULT} 49 title="Apply pseudo localization" 50 > 51 <Icons icon="transfer" /> 52 </IconButton> 53 </WithTooltip> 54 ); 55 };