add new typography component (#10197)

ui/app/components/ui/typography/index.js

@@ -0,0 +1 @@
+export { default } from './typography'

ui/app/components/ui/typography/typography.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'
+
+const { H6, H7, H8, H9 } = TYPOGRAPHY
+
+export default function Typography({
+  variant = TYPOGRAPHY.Paragraph,
+  className,
+  color = COLORS.BLACK,
+  tag,
+  children,
+  spacing = 1,
+  fontWeight = 'normal',
+  align,
+}) {
+  const computedClassName = classnames(
+    'typography',
+    className,
+    `typography--${variant}`,
+    `typography--align-${align}`,
+    `typography--spacing-${spacing}`,
+    `typography--color-${color}`,
+    `typography--weight-${fontWeight}`,
+  )
+
+  let Tag = tag ?? variant
+
+  if (Tag === TYPOGRAPHY.Paragraph) {
+    Tag = 'p'
+  } else if ([H7, H8, H9].includes(Tag)) {
+    Tag = H6
+  }
+
+  return <Tag className={computedClassName}>{children}</Tag>
+}
+
+Typography.propTypes = {
+  variant: PropTypes.oneOf(Object.values(TYPOGRAPHY)),
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(Object.values(COLORS)),
+  className: PropTypes.string,
+  align: PropTypes.oneOf(['center', 'right']),
+  spacing: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
+  fontWeight: PropTypes.oneOf(['bold', 'normal']),
+  tag: PropTypes.oneOf([
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'span',
+    'div',
+  ]),
+}

ui/app/components/ui/typography/typography.scss

@@ -0,0 +1,38 @@
+@use "design-system";
+@use "sass:map";
+
+.typography {
+  @include design-system.Paragraph;
+
+  @each $variant in map.keys(design-system.$typography-variants) {
+    &--#{$variant} {
+      @include design-system.typography($variant);
+    }
+  }
+
+  @each $variant, $color in design-system.$color-map {
+    &--color-#{$variant} {
+      color: $color;
+    }
+  }
+
+  @each $variant, $weight in design-system.$typography-font-weights {
+    &--weight-#{$variant} {
+      font-weight: $weight;
+    }
+  }
+
+  &--align-center {
+    text-align: center;
+  }
+
+  &--align-right {
+    text-align: right;
+  }
+
+  @for $i from 1 through 8 {
+    &--spacing-#{$i} {
+      margin: #{$i * 4}px auto;
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { number, select, text } from '@storybook/addon-knobs'
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system'
+import Typography from '.'
+
+export default {
+  title: 'Typography',
+}
+
+const fontWeightOptions = {
+  bold: 'bold',
+  normal: 'normal',
+}
+
+const alignOptions = {
+  left: undefined,
+  center: 'center',
+  right: 'right',
+}
+
+export const list = () => (
+  <div style={{ width: '80%', flexDirection: 'column' }}>
+    {Object.values(TYPOGRAPHY).map((variant) => (
+      <div key={variant} style={{ width: '100%' }}>
+        <Typography
+          variant={variant}
+          color={select('color', COLORS, COLORS.BLACK)}
+          spacing={number('spacing', 1, { range: true, min: 1, max: 8 })}
+          align={select('align', alignOptions, undefined)}
+          fontWeight={select('font weight', fontWeightOptions, 'normal')}
+        >
+          {variant}
+        </Typography>
+      </div>
+    ))}
+  </div>
+)
+
+export const TheQuickOrangeFox = () => (
+  <div style={{ width: '80%', flexDirection: 'column' }}>
+    <div style={{ width: '100%' }}>
+      <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', alignOptions, undefined)}
+        fontWeight={select('font weight', fontWeightOptions, 'normal')}
+      >
+        {text('content', 'The quick orange fox jumped over the lazy dog.')}
+      </Typography>
+    </div>
+  </div>
+)

ui/app/components/ui/ui-components.scss

@@ -37,5 +37,6 @@
 @import 'toggle-button/index';
 @import 'token-balance/index';
 @import 'tooltip/index';
+@import 'typography/typography';
 @import 'unit-input/index';
 @import 'url-icon/index';