fix: Add Heading component (#99)

Example usage:

```jsx
<Heading level="1">Heading Level 1</Heading>
<Heading level="1" weight="weak">Heading Level 1 (Weak)</Heading>

<Heading level="2">Heading Level 2</Heading>
<Heading level="2" weight="weak">Heading Level 2 (Weak)</Heading>

<Heading level="3">Heading Level 3</Heading>
<Heading level="3" weight="weak">Heading Level 3 (Weak)</Heading>
```

lib/components/Heading/Heading.docs.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Heading from './Heading';
+import { ComponentDocs } from '../../../docs/src/types';
+
+const docs: ComponentDocs = {
+  examples: [
+    {
+      label: 'Level 1',
+      render: () => <Heading level="1">Heading Level 1</Heading>
+    },
+    {
+      label: 'Level 1 Weak',
+      render: () => (
+        <Heading level="1" weight="weak">
+          Heading Level 1 Weak
+        </Heading>
+      )
+    },
+    {
+      label: 'Level 2',
+      render: () => <Heading level="2">Heading Level 2</Heading>
+    },
+    {
+      label: 'Level 2 Weak',
+      render: () => (
+        <Heading level="2" weight="weak">
+          Heading Level 2 Weak
+        </Heading>
+      )
+    },
+    {
+      label: 'Level 3',
+      render: () => <Heading level="3">Heading Level 3</Heading>
+    },
+    {
+      label: 'Level 3 Weak',
+      render: () => (
+        <Heading level="3" weight="weak">
+          Heading Level 3 Weak
+        </Heading>
+      )
+    }
+  ]
+};
+
+export default docs;

lib/components/Heading/Heading.tsx

@@ -0,0 +1,94 @@
+import React, { Component, ReactNode } from 'react';
+import classnames from 'classnames';
+import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
+import Box, { BoxProps } from '../Box/Box';
+import {
+  HeadingSize,
+  TransformVariant,
+  FontWeightVariants,
+  Tokens
+} from 'lib/themes/theme';
+
+type HeadingLevel = '1' | '2' | '3';
+type HeadingWeight = 'regular' | 'weak';
+
+const resolveComponent = (
+  component: BoxProps['component'],
+  level: HeadingLevel
+): BoxProps['component'] => (component ? component : `h${level}`);
+
+interface HeadingAtoms {
+  fontSize: HeadingSize;
+  transform: TransformVariant;
+  fontWeight: FontWeightVariants;
+}
+const resolveHeadingAtoms = (
+  level: HeadingLevel,
+  weight: HeadingWeight,
+  tokens: Tokens
+): HeadingAtoms => {
+  if (level === '1') {
+    return {
+      fontSize: 'level1',
+      transform: 'level1Heading',
+      fontWeight: tokens.heading.level1[weight]
+    };
+  }
+  if (level === '2') {
+    return {
+      fontSize: 'level2',
+      transform: 'level2Heading',
+      fontWeight: tokens.heading.level2[weight]
+    };
+  }
+  if (level === '3') {
+    return {
+      fontSize: 'level3',
+      transform: 'level3Heading',
+      fontWeight: tokens.heading.level3[weight]
+    };
+  }
+  throw new Error('No valid heading level provided');
+};
+
+export interface HeadingProps {
+  children: ReactNode;
+  level: HeadingLevel;
+  weight?: HeadingWeight;
+  component?: BoxProps['component'];
+}
+
+export default class Heading extends Component<HeadingProps> {
+  static displayName = 'Heading';
+
+  render() {
+    const { level, weight = 'regular', component, children } = this.props;
+
+    return (
+      <ThemeConsumer>
+        {theme => {
+          const { transform, fontSize, fontWeight } = resolveHeadingAtoms(
+            level,
+            weight,
+            theme.tokens
+          );
+
+          return (
+            <Box
+              component={resolveComponent(component, level)}
+              className={classnames(
+                theme.atoms.fontFamily.text,
+                theme.atoms.color.neutral,
+                theme.atoms.fontSize[fontSize],
+                theme.atoms.fontWeight[fontWeight],
+                theme.atoms.transform[transform]
+              )}
+            >
+              {children}
+            </Box>
+          );
+        }}
+      </ThemeConsumer>
+    );
+  }
+}

lib/components/Text/Text.tsx

@@ -3,27 +3,35 @@ import classnames from 'classnames';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 import styles from './Text.css.js';
 import Box, { BoxProps } from '../Box/Box';
-import {
-  ColorVariants,
-  FontSizeVariants,
-  FontWeightVariants,
-  TransformVariants
-} from '../../themes/theme';
+import { ColorVariants, FontWeightVariants, Theme } from '../../themes/theme';
+
+type TextSize = 'standard' | 'large' | 'interaction';
+
+const resolveTransformAtom = (
+  size: TextSize,
+  baseline: boolean,
+  theme: Theme
+): string | null => {
+  if (!baseline || size === 'interaction') {
+    return null;
+  }
+  if (size === 'standard') {
+    return theme.atoms.transform.standardText;
+  }
+  if (size === 'large') {
+    return theme.atoms.transform.largeText;
+  }
+  throw new Error('No valid text size provided');
+};
 
 export interface TextProps extends Pick<BoxProps, 'component'> {
   children?: ReactNode;
-  size?: FontSizeVariants;
+  size?: TextSize;
   color?: ColorVariants;
   weight?: FontWeightVariants;
   baseline?: boolean;
 }
 
-const isTransformVariant = (
-  atom: Record<TransformVariants, string>,
-  transformSize: string
-): transformSize is TransformVariants =>
-  Object.keys(atom).indexOf(transformSize) > -1;
-
 export default class Text extends Component<TextProps> {
   static displayName = 'Text';
 
@@ -40,12 +48,6 @@ export default class Text extends Component<TextProps> {
             children
           } = this.props;
 
-          const transformSize = `${size}Text`;
-          const baselineTransform =
-            isTransformVariant(theme.atoms.transform, transformSize) && baseline
-              ? theme.atoms.transform[transformSize]
-              : '';
-
           return (
             <Box
               component={component}
@@ -55,7 +57,7 @@ export default class Text extends Component<TextProps> {
                 theme.atoms.color[color || 'neutral'],
                 theme.atoms.fontSize[size],
                 theme.atoms.fontWeight[weight || 'regular'],
-                baselineTransform,
+                resolveTransformAtom(size, baseline, theme),
                 {
                   [styles.listItem]:
                     typeof component === 'string' && /^li$/i.test(component)

lib/components/index.ts

@@ -12,10 +12,11 @@ export { default as BulletList } from './BulletList/BulletList';
 export { default as Card } from './Card/Card';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as Divider } from './Divider/Divider';
-export { default as Reset } from './Reset/Reset';
 export { default as FieldLabel } from './FieldLabel/FieldLabel';
 export { default as FieldMessage } from './FieldMessage/FieldMessage';
+export { default as Heading } from './Heading/Heading';
 export { default as Radio } from './Radio/Radio';
+export { default as Reset } from './Reset/Reset';
 export { default as Strong } from './Strong/Strong';
 export { default as Text } from './Text/Text';
 export { default as ChevronIcon } from './icons/ChevronIcon/ChevronIcon';

lib/themes/jobStreet/atoms/font/fontSize.css.js.d.ts

@@ -2,4 +2,7 @@
 // Please do not change this file!
 export const interaction: string;
 export const large: string;
+export const level1: string;
+export const level2: string;
+export const level3: string;
 export const standard: string;

lib/themes/jobStreet/atoms/font/fontWeight.css.js

@@ -1,4 +1,5 @@
 export default {
   '.regular': { fontWeight: '400' },
+  '.medium': { fontWeight: '500' },
   '.strong': { fontWeight: '600' }
 };

lib/themes/jobStreet/atoms/font/fontWeight.css.js.d.ts

@@ -1,4 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const medium: string;
 export const regular: string;
 export const strong: string;

lib/themes/jobStreet/atoms/transform.css.js.d.ts

@@ -1,4 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 export const largeText: string;
+export const level1Heading: string;
+export const level2Heading: string;
+export const level3Heading: string;
 export const standardText: string;

lib/themes/jobStreet/tokens/tokens.ts

@@ -6,6 +6,44 @@ const tokens: Tokens = {
   interactionRows: 11,
   responsiveBreakpoint: 768,
   descenderHeightScale: 0.13,
+  heading: {
+    level1: {
+      regular: 'strong',
+      weak: 'regular',
+      mobile: {
+        size: 28,
+        rows: 9
+      },
+      desktop: {
+        size: 36,
+        rows: 11
+      }
+    },
+    level2: {
+      regular: 'strong',
+      weak: 'regular',
+      mobile: {
+        size: 24,
+        rows: 8
+      },
+      desktop: {
+        size: 30,
+        rows: 9
+      }
+    },
+    level3: {
+      regular: 'strong',
+      weak: 'regular',
+      mobile: {
+        size: 20,
+        rows: 7
+      },
+      desktop: {
+        size: 24,
+        rows: 8
+      }
+    }
+  },
   text: {
     standard: {
       mobile: {

lib/themes/seekAnz/atoms/font/fontSize.css.js.d.ts

@@ -2,4 +2,7 @@
 // Please do not change this file!
 export const interaction: string;
 export const large: string;
+export const level1: string;
+export const level2: string;
+export const level3: string;
 export const standard: string;

lib/themes/seekAnz/atoms/font/fontWeight.css.js

@@ -1,4 +1,5 @@
 export default {
   '.regular': { fontWeight: '400' },
+  '.medium': { fontWeight: '500' },
   '.strong': { fontWeight: '600' }
 };

lib/themes/seekAnz/atoms/font/fontWeight.css.js.d.ts

@@ -1,4 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const medium: string;
 export const regular: string;
 export const strong: string;

lib/themes/seekAnz/atoms/transform.css.js.d.ts

@@ -1,4 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 export const largeText: string;
+export const level1Heading: string;
+export const level2Heading: string;
+export const level3Heading: string;
 export const standardText: string;

lib/themes/seekAnz/tokens/tokens.ts

@@ -6,6 +6,44 @@ const tokens: Tokens = {
   interactionRows: 8,
   responsiveBreakpoint: 740,
   descenderHeightScale: 0.16,
+  heading: {
+    level1: {
+      regular: 'medium',
+      weak: 'regular',
+      mobile: {
+        size: 28,
+        rows: 6
+      },
+      desktop: {
+        size: 42,
+        rows: 8
+      }
+    },
+    level2: {
+      regular: 'medium',
+      weak: 'regular',
+      mobile: {
+        size: 21,
+        rows: 5
+      },
+      desktop: {
+        size: 28,
+        rows: 6
+      }
+    },
+    level3: {
+      regular: 'medium',
+      weak: 'regular',
+      mobile: {
+        size: 21,
+        rows: 5
+      },
+      desktop: {
+        size: 21,
+        rows: 5
+      }
+    }
+  },
   text: {
     standard: {
       mobile: {

lib/themes/seekAsia/atoms/font/fontSize.css.js.d.ts

@@ -2,4 +2,7 @@
 // Please do not change this file!
 export const interaction: string;
 export const large: string;
+export const level1: string;
+export const level2: string;
+export const level3: string;
 export const standard: string;

lib/themes/seekAsia/atoms/font/fontWeight.css.js

@@ -1,4 +1,5 @@
 export default {
   '.regular': { fontWeight: '400' },
+  '.medium': { fontWeight: '500' },
   '.strong': { fontWeight: '700' }
 };

lib/themes/seekAsia/atoms/font/fontWeight.css.js.d.ts

@@ -1,4 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const medium: string;
 export const regular: string;
 export const strong: string;

lib/themes/seekAsia/atoms/transform.css.js.d.ts

@@ -1,4 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 export const largeText: string;
+export const level1Heading: string;
+export const level2Heading: string;
+export const level3Heading: string;
 export const standardText: string;