feat(display-heading): add sup/sub components

config/styleguide.config.js

@@ -180,6 +180,8 @@ module.exports = {
               components() {
                 return [
                   path.resolve('src/components/Typography/DisplayHeading/DisplayHeading.jsx'),
+                  path.resolve('src/components/Typography/DisplayHeading/DisplayHeadingSup/DisplayHeadingSup.jsx'),
+                  path.resolve('src/components/Typography/DisplayHeading/DisplayHeadingSub/DisplayHeadingSub.jsx'),
                   path.resolve('src/components/Typography/Heading/Heading.jsx'),
                   path.resolve('src/components/Typography/Heading/HeadingSup/HeadingSup.jsx'),
                   path.resolve('src/components/Typography/Heading/HeadingSub/HeadingSub.jsx')

src/components/Typography/DisplayHeading/DisplayHeading.jsx

@@ -2,6 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import safeRest from '../../../safeRest'
 
+import DisplayHeadingSup from './DisplayHeadingSup/DisplayHeadingSup'
+import DisplayHeadingSub from './DisplayHeadingSub/DisplayHeadingSub'
+
 import styles from './DisplayHeading.modules.scss'
 
 const getClassName = invert => (
@@ -32,4 +35,7 @@ DisplayHeading.defaultProps = {
   invert: false
 }
 
+DisplayHeading.Sup = DisplayHeadingSup
+DisplayHeading.Sub = DisplayHeadingSub
+
 export default DisplayHeading

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

@@ -3,6 +3,20 @@
 @import '../../../scss/settings/responsive-grid';
 @import '../../../scss/utility/responsive';
 
+.baseHeadingSupSubScripts {
+  @include telus-font-family;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.sup {
+  composes: baseHeadingSupSubScripts;
+}
+
+.sub {
+  composes: baseHeadingSupSubScripts;
+}
+
 .displayHeading {
   composes: noSpacing from '../../Spacing.modules.scss';
 
@@ -11,10 +25,26 @@
   font-size: 2.75rem;
   line-height: 1.14; // 48px
 
+  .sup, .sub {
+    font-size: 1.25rem;
+  }
+
+  .sup {
+    top: -1.2em;
+  }
+
+  .sub {
+    bottom: -.5em;
+  }
+
   @include from-breakpoint(medium) {
     font-size: 4.5rem;
     line-height: 1.11; // 80px
     letter-spacing: .2px;
+
+    .sup {
+      top: -2.2em;
+    }
   }
 }
 

src/components/Typography/DisplayHeading/DisplayHeadingSub/DisplayHeadingSub.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import safeRest from '../../../../safeRest'
+
+import styles from '../DisplayHeading.modules.scss'
+
+/**
+ * Subscript text for headings.
+ */
+const DisplayHeadingSub = ({ children, ...rest }) => (
+  <sub {...safeRest(rest)} className={styles.sub}>{children}</sub>
+)
+
+DisplayHeadingSub.propTypes = {
+  children: PropTypes.string.isRequired
+}
+
+export default DisplayHeadingSub

src/components/Typography/DisplayHeading/DisplayHeadingSub/DisplayHeadingSub.md

@@ -0,0 +1,5 @@
+```
+<div>
+  <DisplayHeading>Great Deals<DisplayHeading.Sub>1</DisplayHeading.Sub></DisplayHeading>
+</div>
+```

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+
+import DisplayHeadingSub from '../DisplayHeadingSub'
+
+describe('DisplayHeadingSub', () => {
+  const doShallow = props => (
+    shallow(<DisplayHeadingSub {...props}>Some content</DisplayHeadingSub>)
+  )
+
+  it('renders', () => {
+    const displayHeadingSub = doShallow()
+
+    expect(toJson(displayHeadingSub)).toMatchSnapshot()
+  })
+
+  it('renders an HTML sub tag', () => {
+    const displayHeadingSub = doShallow()
+
+    expect(displayHeadingSub).toHaveTagName('sub')
+  })
+
+  it('passes additional attributes to the sup element', () => {
+    const displayHeadingSub = doShallow({ id: 'the-sub-text' })
+
+    expect(displayHeadingSub).toHaveProp('id', 'the-sub-text')
+  })
+
+  it('does not allow custom CSS', () => {
+    const displayHeadingSub = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(displayHeadingSub).not.toHaveProp('className', 'my-custom-class')
+    expect(displayHeadingSub).not.toHaveProp('style')
+  })
+})

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisplayHeadingSub renders 1`] = `
+<sub
+  className="sub"
+>
+  Some content
+</sub>
+`;

src/components/Typography/DisplayHeading/DisplayHeadingSup/DisplayHeadingSup.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import safeRest from '../../../../safeRest'
+
+import styles from '../DisplayHeading.modules.scss'
+
+/**
+ * Superscript text for headings.
+ */
+const DisplayHeadingSup = ({ children, ...rest }) => (
+  <sup {...safeRest(rest)} className={styles.sup}>{children}</sup>
+)
+
+DisplayHeadingSup.propTypes = {
+  children: PropTypes.string.isRequired
+}
+
+export default DisplayHeadingSup

src/components/Typography/DisplayHeading/DisplayHeadingSup/DisplayHeadingSup.md

@@ -0,0 +1,5 @@
+```
+<div>
+  <DisplayHeading>Great Deals<DisplayHeading.Sup>1</DisplayHeading.Sup></DisplayHeading>
+</div>
+```

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+
+import DisplayHeadingSup from '../DisplayHeadingSup'
+
+describe('DisplayHeadingSup', () => {
+  const doShallow = props => (
+    shallow(<DisplayHeadingSup {...props}>Some content</DisplayHeadingSup>)
+  )
+
+  it('renders', () => {
+    const displayHeadingSup = doShallow()
+
+    expect(toJson(displayHeadingSup)).toMatchSnapshot()
+  })
+
+  it('renders an HTML sub tag', () => {
+    const displayHeadingSup = doShallow()
+
+    expect(displayHeadingSup).toHaveTagName('sup')
+  })
+
+  it('passes additional attributes to the sup element', () => {
+    const displayHeadingSup = doShallow({ id: 'the-sup-text' })
+
+    expect(displayHeadingSup).toHaveProp('id', 'the-sup-text')
+  })
+
+  it('does not allow custom CSS', () => {
+    const displayHeadingSup = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(displayHeadingSup).not.toHaveProp('className', 'my-custom-class')
+    expect(displayHeadingSup).not.toHaveProp('style')
+  })
+})

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DisplayHeadingSup renders 1`] = `
+<sup
+  className="sup"
+>
+  Some content
+</sup>
+`;