Fix metamask-translation component for new Storybook format (#12892)

* metamask-translation

* Replacing broken ArgsTable with manual markdown table

* Grammer fix

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/app/metamask-translation/README.mdx

@@ -0,0 +1,36 @@
+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="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<!--
+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` |

ui/components/app/metamask-translation/metamask-translation.js

@@ -6,7 +6,7 @@ import MetaMaskTemplateRenderer, {
 } from '../metamask-template-renderer/metamask-template-renderer';
 
 /**
- * MetaMaskTranslation is a simple helper Component for adding full 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.
@@ -69,7 +69,13 @@ export default function MetaMaskTranslation({ translationKey, variables }) {
 }
 
 MetaMaskTranslation.propTypes = {
+  /**
+   * Translation object key
+   */
   translationKey: PropTypes.string.isRequired,
+  /**
+   * Array of variables for the MetaMaskTranslation component
+   */
   variables: PropTypes.arrayOf(
     PropTypes.oneOfType([
       PropTypes.string,

ui/components/app/metamask-translation/metamask-translation.stories.js

@@ -1,67 +1,47 @@
 import React from 'react';
-import { select, object } from '@storybook/addon-knobs';
 import { groupBy } from 'lodash';
 import en from '../../../../app/_locales/en/messages.json';
+import README from './README.mdx';
 import MetaMaskTranslation from './metamask-translation';
 
+const { keysWithoutSubstitution } = groupBy(Object.keys(en), (key) => {
+  if (en[key].message.includes('$1')) {
+    return 'keysWithSubstitution';
+  }
+  return 'keysWithoutSubstitution';
+});
+
 export default {
   title: 'Components/App/MetamaskTranslation',
   id: __filename,
+  component: MetaMaskTranslation,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    translationKey: { options: keysWithoutSubstitution, control: 'select' },
+    variables: { control: 'array' },
+  },
 };
 
-const { keysWithSubstitution, keysWithoutSubstitution } = groupBy(
-  Object.keys(en),
-  (key) => {
-    if (en[key].message.includes('$1')) {
-      return 'keysWithSubstitution';
-    }
-    return 'keysWithoutSubstitution';
-  },
-);
+export const DefaultStory = (args) => {
+  return <MetaMaskTranslation {...args} />;
+};
 
-export const WithoutSubstitutions = () => (
-  <MetaMaskTranslation
-    translationKey={select(
-      'translationKey',
-      keysWithoutSubstitution,
-      keysWithoutSubstitution[0],
-    )}
-  />
-);
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  translationKey: keysWithoutSubstitution[0],
+};
 
-export const WithSubstitutions = () => (
+export const WithTemplate = (args) => (
   <MetaMaskTranslation
-    translationKey={select(
-      'translationKey',
-      keysWithSubstitution,
-      keysWithSubstitution[0],
-    )}
-    variables={object('variables', [])}
+    {...args}
+    variables={[<h1 key="link">{args.translationKey}</h1>]}
   />
 );
 
-export const WithTemplate = () => (
-  <MetaMaskTranslation
-    translationKey={select(
-      'translationKey',
-      keysWithSubstitution,
-      keysWithSubstitution[0],
-    )}
-    variables={[
-      {
-        element: 'span',
-        key: 'link',
-        children: {
-          element: 'MetaMaskTranslation',
-          props: {
-            translationKey: select(
-              'innerTranslationKey',
-              keysWithoutSubstitution,
-              keysWithoutSubstitution[0],
-            ),
-          },
-        },
-      },
-    ]}
-  />
-);
+WithTemplate.args = {
+  translationKey: keysWithoutSubstitution[0],
+};