feat(sup): Add Sup component as a dependent on Text

config/styleguide.config.js

@@ -131,7 +131,8 @@ module.exports = {
               toggle(path.resolve('src/components/Typography/Paragraph/Paragraph.jsx')),
               toggle(path.resolve('src/components/Typography/Text/Text.jsx')),
               toggle(path.resolve('src/components/Typography/Strong/Strong.jsx')),
-              toggle(path.resolve('src/components/Typography/Small/Small.jsx'))
+              toggle(path.resolve('src/components/Typography/Small/Small.jsx')),
+              toggle(path.resolve('src/components/Typography/Sup/Sup.jsx'))
             ])
           },
           sections: [

src/components/Typography/Sup/Sup.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '../../../safeRest'
+
+import textStyles from '../Text/Text.modules.scss'
+
+const Sup = ({ children, size, ...rest }) => {
+  return (
+    <sup {...safeRest(rest)} className={textStyles[`${size}Sup`]} >
+      {children}
+    </sup>
+  )
+}
+
+
+Sup.propTypes = {
+  children: PropTypes.string.isRequired,
+  size: PropTypes.oneOf([
+    'small',
+    'medium',
+    'large'
+  ])
+}
+
+Sup.defaultProps = {
+  size: 'medium'
+}
+
+export default Sup

src/components/Typography/Sup/Sup.md

@@ -0,0 +1,8 @@
+```
+<div>
+  <Paragraph><Text sup={String.fromCharCode(8482)}>Lorem</Text></Paragraph>
+  <Paragraph size="small"><Text size="small" sup="Ipsum">Lorem</Text> dolor sit amet.</Paragraph>
+  <Paragraph size="medium"><Text size="medium" sup="Ipsum">Lorem</Text> dolor sit amet.</Paragraph>
+  <Paragraph size="large"><Text size="large" sup={String.fromCharCode(169)}>Lorem</Text> dolor sit amet.</Paragraph>
+</div>
+```

src/components/Typography/Sup/Sup.modules.scss

@@ -0,0 +1,16 @@
+.base {
+  font-size: 0.28rem;
+}
+
+.sup, .sub {
+  font-size: .875rem;
+  color: orange;
+}
+
+.sup {
+  top: -.5em;
+}
+
+.sub {
+  bottom: -.5em;
+}

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

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

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

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

src/components/Typography/Text/Text.jsx

@@ -3,10 +3,26 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import safeRest from '../../../safeRest'
+import Sup from '../Sup/Sup'
 
 import styles from './Text.modules.scss'
 
-const Text = ({ bold, size, invert, children, ...rest }) => {
+
+const renderSup = (size, children) => {
+  let sup = null
+
+  if (children) {
+    sup = (
+      <Sup size={size}>
+        {children}
+      </Sup>
+    )
+  }
+
+  return sup
+}
+
+const Text = ({ bold, size, invert, children, sup, ...rest }) => {
   const classes = classnames(
     styles[size],
     bold ? styles.boldFont : styles[`${size}Font`],
@@ -16,6 +32,7 @@ const Text = ({ bold, size, invert, children, ...rest }) => {
   return (
     <span {...safeRest(rest)} className={classes}>
       {children}
+      {renderSup(size, sup)}
     </span>
   )
 }
@@ -27,14 +44,16 @@ Text.propTypes = {
     'medium',
     'large'
   ]),
+  sup: PropTypes.string,
   invert: PropTypes.bool,
   children: PropTypes.node.isRequired
 }
 
 Text.defaultProps = {
   bold: false,
   size: 'medium',
-  invert: false
+  invert: false,
+  sup: null
 }
 
 export default Text

src/components/Typography/Text/Text.modules.scss

@@ -1,11 +1,23 @@
 @import '../../../scss/settings/colours';
 @import '../../../scss/settings/typography';
 
+.sup {
+  top: -.5em;
+  position: relative;
+  vertical-align: baseline;
+}
+
 .small {
   font-size: .875rem;
   letter-spacing: -0.6px;
   line-height: 1.5;
 }
+
+.smallSup {
+  composes: sup;
+  font-size: .875rem;
+}
+
 .smallFont {
   @include helvetica-neue-roman-55;
 }
@@ -15,6 +27,12 @@
   letter-spacing: -0.8px;
   line-height: 1.5;
 }
+
+.mediumSup {
+  composes: sup;
+  font-size: .875rem;
+}
+
 .mediumFont {
   @include helvetica-neue-light-45;
 }
@@ -24,6 +42,12 @@
   letter-spacing: -1px;
   line-height: 2;
 }
+
+.largeSup {
+  composes: sup;
+  font-size: .875rem;
+}
+
 .largeFont {
   @include helvetica-neue-light-45;
 }