feat(heading): add modular colour classes

src/components/Typography/DisplayHeading/__tests__/DisplayHeading.spec.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
 
 import DisplayHeading from '../DisplayHeading'
 
@@ -8,6 +9,12 @@ describe('DisplayHeading', () => {
     <DisplayHeading {...props}>Great Deals</DisplayHeading>
   )
 
+  it('renders', () => {
+    const heading = doShallow()
+
+    expect(toJson(heading)).toMatchSnapshot()
+  })
+
   it('renders an h1', () => {
     const displayHeading = doShallow()
 
@@ -23,16 +30,16 @@ describe('DisplayHeading', () => {
   })
 
   it('passes additional attributes to h1 element', () => {
-    const button = doShallow({ id: 'the-heading', tabindex: 1 })
+    const displayHeading = doShallow({ id: 'the-heading', tabindex: 1 })
 
-    expect(button).toHaveProp('id', 'the-heading')
-    expect(button).toHaveProp('tabindex', 1)
+    expect(displayHeading).toHaveProp('id', 'the-heading')
+    expect(displayHeading).toHaveProp('tabindex', 1)
   })
 
   it('does not allow custom CSS', () => {
-    const button = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+    const displayHeading = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
 
-    expect(button).not.toHaveProp('className', 'my-custom-class')
-    expect(button).not.toHaveProp('style')
+    expect(displayHeading).not.toHaveProp('className', 'my-custom-class')
+    expect(displayHeading).not.toHaveProp('style')
   })
 })

src/components/Typography/DisplayHeading/__tests__/__snapshots__/DisplayHeading.spec.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisplayHeading renders 1`] = `
+<h1
+  className="default"
+>
+  Great Deals
+</h1>
+`;

src/components/Typography/Heading/Heading.jsx

@@ -1,37 +1,39 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 
 import safeRest from '../../../safeRest'
 
 import styles from './Heading.modules.scss'
 
-const getClassName = (size, invert) => {
-  return classnames(
-    styles[size],
-    invert ? styles.inverted : null
-  )
+const getColorClassName = level => (
+  level === 'h1' || level === 'h2' ? styles.secondary : styles.default
+)
+
+const getClassName = (level, invert) => {
+  const colorClassName = invert ? styles.inverted : getColorClassName(level)
+
+  return `${styles[level]} ${colorClassName}`
 }
 
-const Heading = ({ size, invert, children, ...rest }) => (
+const Heading = ({ level, invert, children, ...rest }) => (
   React.createElement(
-    size,
+    level,
     {
       ...safeRest(rest),
-      className: getClassName(size, invert)
+      className: getClassName(level, invert)
     },
     children
   )
 )
 Heading.propTypes = {
-  size: PropTypes.oneOf([
+  level: PropTypes.oneOf([
     'h1', 'h2', 'h3', 'h4'
   ]).isRequired,
   invert: PropTypes.bool,
   children: PropTypes.node.isRequired
 }
 Heading.defaultProps = {
-  size: 'h1',
+  level: 'h1',
   invert: false
 }
 

src/components/Typography/Heading/Heading.md

@@ -8,10 +8,10 @@
 
 ```
 <div>
-  <Heading size="h1">Great Deals</Heading>
-  <Heading size="h2">Great Deals</Heading>
-  <Heading size="h3">Great Deals</Heading>
-  <Heading size="h4">Great Deals</Heading>
+  <Heading level="h1">Great Deals</Heading>
+  <Heading level="h2">Great Deals</Heading>
+  <Heading level="h3">Great Deals</Heading>
+  <Heading level="h4">Great Deals</Heading>
 </div>
 ```
 

src/components/Typography/Heading/Heading.modules.scss

@@ -6,22 +6,29 @@
 .largeHeading {
   composes: noSpacing from '../../Spacing.modules.scss';
 
-  color: $color-secondary;
-  font-weight: 400;
+  @include helvetica-neue-light-45;
 }
 
 .smallHeading {
   composes: noSpacing from '../../Spacing.modules.scss';
 
-  color: $color-shark;
+  @include helvetica-neue-medium-65;
+
   letter-spacing: -.6px;
-  font-weight: 700;
 }
 
 .inverted {
   color: $color-white;
 }
 
+.secondary {
+  color: $color-secondary;
+}
+
+.default {
+  color: $color-text;
+}
+
 .h1 {
   composes: largeHeading;
 

src/components/Typography/Heading/__tests__/Heading.spec.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
 
 import Heading from '../Heading'
 
@@ -8,29 +9,60 @@ describe('Heading', () => {
     <Heading {...overrides}>Go home</Heading>
   )
 
+  it('renders', () => {
+    const heading = doShallow()
+
+    expect(toJson(heading)).toMatchSnapshot()
+  })
+
   it('renders text', () => {
     const heading = doShallow()
 
     expect(heading).toHaveText('Go home')
   })
 
-  it('renders a heading in four sizes', () => {
-    let heading = doShallow({ size: 'h1' })
+  it('renders a heading in four levels', () => {
+    let heading = doShallow({ level: 'h1' })
     expect(heading).toHaveTagName('h1')
 
-    heading = doShallow({ size: 'h2' })
+    heading = doShallow({ level: 'h2' })
     expect(heading).toHaveTagName('h2')
 
-    heading = doShallow({ size: 'h3' })
+    heading = doShallow({ level: 'h3' })
     expect(heading).toHaveTagName('h3')
 
-    heading = doShallow({ size: 'h4' })
+    heading = doShallow({ level: 'h4' })
     expect(heading).toHaveTagName('h4')
   })
 
-  it('can invert', () => {
-    const heading = doShallow({ invert: true })
-
+  it('has appropriate colour', () => {
+    let heading = doShallow({ invert: true })
     expect(heading).toHaveClassName('inverted')
+
+    heading = doShallow({ level: 'h1' })
+    expect(heading).toHaveClassName('secondary')
+
+    heading = doShallow({ level: 'h2' })
+    expect(heading).toHaveClassName('secondary')
+
+    heading = doShallow({ level: 'h3' })
+    expect(heading).toHaveClassName('default')
+
+    heading = doShallow({ level: 'h4' })
+    expect(heading).toHaveClassName('default')
+  })
+
+  it('passes additional attributes to heading element', () => {
+    const heading = doShallow({ id: 'the-heading', tabindex: 1 })
+
+    expect(heading).toHaveProp('id', 'the-heading')
+    expect(heading).toHaveProp('tabindex', 1)
+  })
+
+  it('does not allow custom CSS', () => {
+    const heading = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(heading).not.toHaveProp('className', 'my-custom-class')
+    expect(heading).not.toHaveProp('style')
   })
 })

src/components/Typography/Heading/__tests__/__snapshots__/Heading.spec.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading renders 1`] = `
+<h1
+  className="h1 secondary"
+>
+  Go home
+</h1>
+`;