1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/metamask-translation/README.mdx
Nidhi Kumari c5368c152b
Added storybook check to CI (#17092)
* 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
2023-01-21 00:57:46 +05:30

37 lines
1.6 KiB
Plaintext

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` |