feat(strong): add Strong component

config/styleguide.config.js

@@ -127,7 +127,8 @@ module.exports = {
             return compact([
               path.resolve('src/old-components/Card/Card.jsx'),
               toggle(path.resolve('src/components/Typography/Paragraph/Paragraph.jsx')),
-              toggle(path.resolve('src/components/Typography/Text/Text.jsx'))
+              toggle(path.resolve('src/components/Typography/Text/Text.jsx')),
+              toggle(path.resolve('src/components/Typography/Strong/Strong.jsx'))
             ])
           },
           sections: [

src/components/Typography/Paragraph/Paragraph.modules.scss

@@ -1,4 +1,5 @@
 @import '../../../scss/settings/colours';
+@import '../../../scss/settings/typography';
 
 .base {
   padding: 0;
@@ -7,32 +8,32 @@
   text-align: left;
 
   &.bold {
-    font-weight: 700; // Neue Medium 65
+    @include helvetica-neue-medium-65;
   }
 }
 
 .small {
   composes: base;
+  @include helvetica-neue-roman-55;
 
-  font-weight: 500; // Neue Roman 55
   font-size: .875rem;
   letter-spacing: -0.6px;
   line-height: 1.5;
 }
 
 .medium {
   composes: base;
+  @include helvetica-neue-light-45;
 
-  font-weight: 400; // neue 45 light
   font-size: 1rem;
   letter-spacing: -0.8px;
   line-height: 1.5;
 }
 
 .large {
   composes: base;
+  @include helvetica-neue-light-45;
 
-  font-weight: 400; // neue 45 light
   font-size: 1.25rem;
   letter-spacing: -1px;
   line-height: 2;

src/components/Typography/Strong/Strong.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '../../../safeRest'
+
+import styles from './Strong.modules.scss'
+
+const Strong = ({ children, ...rest }) => (
+  <strong {...safeRest(rest)} className={styles.strong}>
+    {children}
+  </strong>
+)
+
+Strong.propTypes = {
+  children: PropTypes.string.isRequired
+}
+export default Strong

src/components/Typography/Strong/Strong.md

@@ -0,0 +1,4 @@
+
+```
+<Strong>This text is bold</Strong>
+```

src/components/Typography/Strong/Strong.modules.scss

@@ -0,0 +1,5 @@
+@import '../../../scss/settings/typography';
+
+.strong {
+  @include helvetica-neue-medium-65;
+}

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

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

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

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

src/scss/settings/_typography.scss

@@ -15,14 +15,22 @@ $body-medium-line-height: 1.5; // 24px
 $body-small-text-size: 14px;
 $body-small-line-height: 1.71; // 24px
 
-@mixin helvetica-neue-medium-65 {
-  font-weight: 700;
+@mixin helvetica-neue-thin-35 {
+  font-weight: 300;
+}
+
+@mixin helvetica-neue-light-45 {
+  font-weight: 400;
 }
 
 @mixin helvetica-neue-roman-55 {
   font-weight: 500;
 }
 
+@mixin helvetica-neue-medium-65 {
+  font-weight: 700;
+}
+
 @function rem($size) {
   @return ($size / $font-size-base) * 1rem;
 }