mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
c5368c152b
* added storybook test runner * added test runner in ci * updated test for ci and fixed lint error * updated lavamoat policy * updated test command * updated playwright * changed command to storybook;ci * updated command * updated instance for test-storybook * updated playwright * added playwright step * replaced concurrently with start-server-and-test * updated the static storybook directory * replaced first with last * updated lock file * replaced first with last * updated test-storybook with maxworkers * updated .depchechrc * updated yml * removed id from banner base * replaced broken stories with .stories-to-do.js extesnsion * updated token allowance story * removed duplicacies from yarn * fixed lavamoat * removed filename comment * updated links for docs * fixed file extension for stories * updated path for stories.json * updated stories.json path * yarn updated * updated stories * updated yarn * updated wait on |
||
---|---|---|
.. | ||
index.js | ||
metamask-translation.js | ||
metamask-translation.stories.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import MetaMaskTranslation from '.'; # MetaMask Translation MetaMaskTranslation is a simple helper component for adding full translation support to the template system. We do pass the translation function to the template getValues function, but passing it React components as variables would require React to be in scope, and breaks the object pattern paradigm. This component gets around that by converting variables that are templates themselves into tiny React trees. This component does additional validation to make sure that the tree has a single root node, with maximum two leaves. Each subnode can have a maximum of one child that must be a string. This enforces a maximum recursion depth of 2, preventing translation strings from being performance hogs. We could further limit this, and also attenuate the safeComponentList for what kind of components we allow these special trees to contain. <Canvas> <Story id="components-app-metamasktranslation--default-story" /> </Canvas> ## Props <!-- ArgsTable doesn't work with SectionShape <ArgsTable of={MetaMaskTranslation} /> --> | Name | Description | | ---------------- | ------------------------------------------------------------------------------------------------------- | | `translationKey` | Translation object key `string` | | `variables` | Array of variables for the MetaMaskTranslation. Can be an array of `string`, `number` or `SectionShape` |