feat: Typography component

platform/ui/src/components/Typography/Typography.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const baseClasses = 'm-0 leading-tight';
+
+const defaultVariantMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle: 'h6',
+  body: 'p',
+};
+
+const defaults = {
+  align: 'inherit',
+  color: 'initial',
+  display: 'initial',
+  gutterBottom: false,
+  noWrap: false,
+  paragraph: false,
+  variant: 'body',
+};
+
+const classes = {
+  variant: {
+    h1: 'text-6xl',
+    h2: 'text-5xl',
+    h3: 'text-4xl',
+    h4: 'text-3xl',
+    h5: 'text-2xl',
+    h6: 'text-xl',
+    subtitle: 'text-lg',
+    body: 'text-base',
+    caption: 'text-xs',
+    button: 'text-sm uppercase',
+    overline: 'text-xs uppercase',
+    srOnly: 'absolute h-0 w-0 hidden',
+    inherit: '',
+  },
+  color: {
+    initial: 'text-white',
+    inherit: 'text-inherit',
+    primary: 'text-primary-main',
+    secondary: 'text-secondary-main',
+    error: 'text-red-600',
+  },
+  align: {
+    inherit: '',
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify',
+  },
+  display: {
+    initial: '',
+    block: 'block',
+    inline: 'inline',
+  },
+  gutterBottom: {
+    true: 'mb-3',
+    false: '',
+  },
+  paragraph: {
+    true: 'mb-3',
+    false: '',
+  },
+  noWrap: {
+    true: 'truncate',
+    false: '',
+  },
+};
+
+const Typography = ({
+  align = defaults.align,
+  color = defaults.color,
+  display = defaults.display,
+  gutterBottom = defaults.gutterBottom,
+  noWrap = defaults.noWrap,
+  paragraph = defaults.paragraph,
+  variant = defaults.variant,
+  component,
+  className,
+  ...rest
+}) => {
+  const Component =
+    component || (paragraph ? 'p' : defaultVariantMapping[variant]) || 'span';
+  return (
+    <Component
+      className={classnames(
+        baseClasses,
+        classes.variant[variant],
+        classes.color[color],
+        classes.align[align],
+        classes.gutterBottom[gutterBottom],
+        classes.paragraph[paragraph],
+        classes.noWrap[noWrap],
+        classes.display[display],
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+Typography.propTypes = {
+  component: PropTypes.elementType,
+  paragraph: PropTypes.bool,
+  display: PropTypes.oneOf(['initial', 'block', 'inline']),
+  variant: PropTypes.oneOf([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle',
+    'body',
+    'caption',
+    'button',
+    'overline',
+    'srOnly',
+    'inherit',
+  ]),
+  color: PropTypes.oneOf([
+    'initial',
+    'inherit',
+    'primary',
+    'secondary',
+    'error',
+  ]),
+  className: PropTypes.string,
+  children: PropTypes.node,
+  align: PropTypes.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
+  gutterBottom: PropTypes.bool,
+  noWrap: PropTypes.bool,
+};
+
+export default Typography;

platform/ui/src/components/Typography/Typography.mdx

@@ -0,0 +1,65 @@
+---
+name: Typography
+menu: Components
+route: components/typography
+---
+
+import { Playground, Props } from 'docz';
+import Typography from './';
+
+# Typography
+
+Use typography to display text using the available props for customizing your
+content.
+
+## Import
+
+```javascript
+import { Typography } from '@ohfi/ui';
+```
+
+## Properties
+
+<Props of={Typography} />
+
+## Basic usage
+
+<Playground>
+  <Typography variant="h1">
+    h1. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h2">
+    h2. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h3">
+    h3. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h4">
+    h4. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h5">
+    h5. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h6">
+    h6. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="subtitle">
+    subtitle. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="body">
+    body. The five boxing wizards jump quickly.
+  </Typography>
+</Playground>
+
+## Changing the HTML element
+
+There are different semantic elements to be used in the Typography component.
+You can use the prop `component` to associate the component to be rendered with
+a semantic element. The style of a Typography is independent of the semantic
+element.
+
+<Playground>
+  <Typography variant="h1" component="h2">
+    This is a h2 using the h1 styles.
+  </Typography>
+</Playground>

platform/ui/src/components/Typography/index.js

@@ -0,0 +1,2 @@
+import Typography from './Typography';
+export default Typography;