Typography stories : convert knobs and actions to controls / args (#13220)

Convert Typography story in ui/components/ui/typography/typography.stories.js to use controls argType annotation

- Add README.MDX
- Story has argTypes that align with component api / props
- All instances of @storybook/addon-knobs have been removed in favour of control args
- All instances of @storybook/addon-actions have been removed in favour of action argType annotation

ui/components/ui/typography/README.mdx

@@ -0,0 +1,16 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import Typography from '.';
+
+# Typography
+
+<Canvas>
+  <Story id="ui-components-ui-typography-typography-stories-js--default-story" />
+</Canvas>
+
+<Canvas>
+  <Story id="ui-components-ui-typography-typography-stories-js--the-quick-orange-fox" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Typography} />

ui/components/ui/typography/typography.stories.js

@@ -1,52 +1,65 @@
 import React from 'react';
-import { number, select, text } from '@storybook/addon-knobs';
 import {
   COLORS,
   FONT_WEIGHT,
   TEXT_ALIGN,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
+import README from './README.mdx';
 import Typography from '.';
 
 export default {
   title: 'Components/UI/Typography',
   id: __filename,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: COLORS,
+      defaultValue: COLORS.BLACK,
+    },
+    align: {
+      control: { type: 'select' },
+      options: TEXT_ALIGN,
+      defaultValue: TEXT_ALIGN.LEFT,
+    },
+    fontWeight: {
+      control: { type: 'select' },
+      options: FONT_WEIGHT,
+      defaultValue: FONT_WEIGHT.NORMAL,
+    },
+    variant: {
+      control: { type: 'select' },
+      options: TYPOGRAPHY,
+      defaultValue: TYPOGRAPHY.Paragraph,
+    },
+    content: {
+      control: { type: 'text' },
+      defaultValue: 'The quick orange fox jumped over the lazy dog.',
+    },
+  },
 };
 
-export const List = () => (
+export const DefaultStory = (args) => (
   <div style={{ width: '80%', flexDirection: 'column' }}>
     {Object.values(TYPOGRAPHY).map((variant) => (
       <div key={variant} style={{ width: '100%' }}>
-        <Typography
+        <Typography {...args}>{variant}</Typography>
-          variant={variant}
-          color={select('color', COLORS, COLORS.BLACK)}
-          spacing={number('spacing', 1, { range: true, min: 1, max: 8 })}
-          align={select('align', TEXT_ALIGN, undefined)}
-          fontWeight={select(
-            'font weight',
-            Object.values(FONT_WEIGHT),
-            FONT_WEIGHT.NORMAL,
-          )}
-        >
-          {variant}
-        </Typography>
       </div>
     ))}
   </div>
 );
 
-export const TheQuickOrangeFox = () => (
+DefaultStory.storyName = 'List';
+
+export const TheQuickOrangeFox = (args) => (
   <div style={{ width: '80%', flexDirection: 'column' }}>
     <div style={{ width: '100%' }}>
-      <Typography
+      <Typography {...args}>{args.content}</Typography>
-        color={select('color', COLORS, COLORS.BLACK)}
-        variant={select('variant', TYPOGRAPHY, TYPOGRAPHY.Paragraph)}
-        spacing={number('spacing', 1, { range: true, min: 1, max: 8 })}
-        align={select('align', TEXT_ALIGN, undefined)}
-        fontWeight={select('font weight', FONT_WEIGHT, FONT_WEIGHT.NORMAL)}
-      >
-        {text('content', 'The quick orange fox jumped over the lazy dog.')}
-      </Typography>
     </div>
   </div>
 );