refactor(display-heading): Use react-media based responsive component

Also add tests for responsive behaviour

src/components/Typography/DisplayHeading/DisplayHeading.jsx

@@ -1,20 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
 import safeRest from '../../../utils/safeRest'
 import joinClassNames from '../../../utils/joinClassNames'
 
-import Responsive from '../../Responsive/Responsive'
+import Responsive from '../../ResponsiveReactMedia/ResponsiveReactMedia'
 import DisplayHeadingSup from './DisplayHeadingSup/DisplayHeadingSup'
 
 import styles from './DisplayHeading.modules.scss'
 
-const getClassName = (invert, desktop) => {
-  return joinClassNames(
-    styles.heading,
-    desktop ? styles.headingSizeDesktop : styles.headingSize,
+const getClassName = (invert, desktop) =>
+  joinClassNames(
+    desktop ? styles.headingDesktop : styles.heading,
     invert ? styles.inverted : styles.default
   )
-}
 
 /**
  * Large page titles. Renders an HTML `<h1>` element.

src/components/Typography/DisplayHeading/DisplayHeading.modules.scss

@@ -7,13 +7,15 @@
   composes: baseSupSubScripts from '../Text/Text.modules.scss';
 }
 
-.heading {
+.base {
   composes: noSpacing from '../../Spacing.modules.scss';
 
   @include helvetica-neue-thin-35;
 }
 
-.headingSize {
+.heading {
+  composes: base;
+
   font-size: 2.75rem;
   line-height: 1.14; // 48px
 
@@ -23,7 +25,9 @@
   }
 }
 
-.headingSizeDesktop {
+.headingDesktop {
+  composes: base;
+
   font-size: 4.5rem;
   line-height: 1.11; // 80px
   letter-spacing: 0.2px;

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

@@ -1,43 +1,62 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { mount, render } from 'enzyme'
 
 import DisplayHeading from '../DisplayHeading'
 
+import mockMatchMedia from '../../../../__mocks__/matchMedia'
+
 describe('DisplayHeading', () => {
-  const doShallow = ({ ...props }) =>
-    shallow(<DisplayHeading {...props}>Great Deals</DisplayHeading>)
-      .dive()
-      .dive()
+  const doMount = (props = {}) => {
+    const heading = mount(<DisplayHeading {...props}>Great Deals</DisplayHeading>)
+
+    return heading.find('h1')
+  }
+
+  beforeEach(() => {
+    mockMatchMedia()
+  })
 
   it('renders', () => {
-    const heading = doShallow()
+    const heading = render(<DisplayHeading>The heading</DisplayHeading>)
 
     expect(heading).toMatchSnapshot()
   })
 
   it('renders an h1', () => {
-    const displayHeading = doShallow()
+    const displayHeading = doMount()
 
     expect(displayHeading).toHaveTagName('h1')
   })
 
   it('can be inverted', () => {
-    let displayHeading = doShallow({ invert: true })
+    let displayHeading = doMount({ invert: true })
     expect(displayHeading).toHaveClassName('inverted')
 
-    displayHeading = doShallow()
+    displayHeading = doMount()
     expect(displayHeading).toHaveClassName('default')
   })
 
+  it('renders differently above the medium breakpoint', () => {
+    mockMatchMedia(768)
+
+    let heading = doMount()
+    expect(heading).toHaveClassName('headingDesktop')
+
+    mockMatchMedia(767)
+
+    heading = doMount()
+    expect(heading).toHaveClassName('heading')
+  })
+
   it('passes additional attributes to h1 element', () => {
-    const displayHeading = doShallow({ id: 'the-heading', tabindex: 1 })
+    const displayHeading = doMount({ id: 'the-heading', tabIndex: 1 })
 
     expect(displayHeading).toHaveProp('id', 'the-heading')
-    expect(displayHeading).toHaveProp('tabindex', 1)
+    expect(displayHeading).toHaveProp('tabIndex', 1)
   })
 
   it('does not allow custom CSS', () => {
-    const displayHeading = doShallow({
+    const displayHeading = doMount({
       className: 'my-custom-class',
       style: { color: 'hotpink' },
     })

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

@@ -2,8 +2,8 @@
 
 exports[`DisplayHeading renders 1`] = `
 <h1
-  className="heading headingSize default"
+  class="headingDesktop default"
 >
-  Great Deals
+  The heading
 </h1>
 `;

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { mount, render } from 'enzyme'
 
 import mockMatchMedia from '../../../../__mocks__/matchMedia'
 
@@ -25,7 +25,7 @@ describe('Heading', () => {
   })
 
   it('renders', () => {
-    const heading = doMount()
+    const heading = render(<Heading level="h2">The heading</Heading>)
 
     expect(heading).toMatchSnapshot()
   })

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Heading renders 1`] = `
-<h1
-  className="h1Desktop secondary"
+<h2
+  class="h2Desktop secondary"
 >
-  The content
-</h1>
+  The heading
+</h2>
 `;