feat(dividers): Add hairline divider

config/styleguide.config.js

@@ -193,7 +193,8 @@ module.exports = {
               components() {
                 return compact([
                   toggleByEnv('Dividers', path.resolve('src/components/Dividers/WaveDivider/WaveDivider.jsx')),
-                  toggleByEnv('Dividers', path.resolve('src/components/Dividers/DimpleDivider/DimpleDivider.jsx'))
+                  toggleByEnv('Dividers', path.resolve('src/components/Dividers/DimpleDivider/DimpleDivider.jsx')),
+                  toggleByEnv('Dividers', path.resolve('src/components/Dividers/HairlineDivider/HairlineDivider.jsx'))
                 ])
               }
             }

src/components/Dividers/DimpleDivider/DimpleDivider.jsx

@@ -5,7 +5,7 @@ import safeRest from '../../../utils/safeRest'
 import styles from './DimpleDivider.modules.scss'
 
 /**
- * Separate content.
+ * Separate modules.
  */
 const DimpleDivider = ({ ...rest }) => (
   <hr {...safeRest(rest)} className={styles.dimple} />

src/components/Dividers/HairlineDivider/HairlineDivider.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '../../../utils/safeRest'
+
+import joinClassNames from '../../../utils/joinClassNames'
+import styles from './HairlineDivider.modules.scss'
+
+/**
+ * Separate content.
+ */
+const HairlineDivider = ({ vertical, gradient, ...rest }) => {
+  const classes = joinClassNames(
+    vertical ? styles.vertical : styles.horizontal,
+    gradient ? styles.gradient : styles.thin
+  )
+
+  return (
+    <hr {...safeRest(rest)} className={classes} />
+  )
+}
+
+HairlineDivider.propTypes = {
+  vertical: PropTypes.bool,
+  gradient: PropTypes.bool
+}
+
+HairlineDivider.defaultProps = {
+  vertical: false,
+  gradient: false
+}
+
+export default HairlineDivider

src/components/Dividers/HairlineDivider/HairlineDivider.md

@@ -0,0 +1,3 @@
+```
+<HairlineDivider />
+```

src/components/Dividers/HairlineDivider/HairlineDivider.modules.scss

@@ -0,0 +1,32 @@
+@import '../../../scss/settings/colours';
+
+.horizontal {
+
+  composes: noSpacing from '../../Spacing/Spacing.modules.scss';
+}
+
+.vertical {
+  composes: noSpacing from '../../Spacing/Spacing.modules.scss';
+
+  width: 1px;
+  height: 100%;
+
+  border: none;
+
+  border-left: 1px solid;
+  border-color: $color-gainsboro;
+}
+
+.thin {
+  border: none;
+
+  border-top: 1px solid;
+  border-color: $color-gainsboro;
+}
+
+.gradient {
+  border: none;
+  height: 1px;
+
+  background-image: linear-gradient(90deg, rgba(216, 216, 216, 0) 0%, $color-gainsboro 2%, $color-gainsboro 98%, rgba(216, 216, 216, 0) 100%);
+}

src/components/Dividers/HairlineDivider/__tests__/HairlineDivider.spec.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { shallow, render } from 'enzyme'
+import toJson from 'enzyme-to-json'
+
+import HairlineDivider from '../HairlineDivider'
+
+describe('HairlineDivider', () => {
+  const doShallow = (props = {}) => shallow(<HairlineDivider {...props} />)
+
+  it('renders', () => {
+    const hairlineDivider = render(<HairlineDivider />)
+
+    expect(toJson(hairlineDivider)).toMatchSnapshot()
+  })
+
+  it('is an HTMl hr element', () => {
+    const hairlineDivider = doShallow()
+
+    expect(hairlineDivider).toHaveTagName('hr')
+  })
+
+  it('can be horizontal or vertical', () => {
+    let hairlineDivider = doShallow()
+    expect(hairlineDivider).toHaveClassName('horizontal')
+
+    hairlineDivider = doShallow({ vertical: true })
+    expect(hairlineDivider).toHaveClassName('vertical')
+  })
+
+  it('can have a gradient', () => {
+    let hairlineDivider = doShallow()
+    expect(hairlineDivider).toHaveClassName('thin')
+
+    hairlineDivider = doShallow({ gradient: true })
+    expect(hairlineDivider).toHaveClassName('gradient')
+  })
+
+  it('passes additional attributes to the element', () => {
+    const hairlineDivider = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
+
+    expect(hairlineDivider).toHaveProp('id', 'the-id')
+    expect(hairlineDivider).toHaveProp('data-some-attr', 'some value')
+  })
+
+  it('does not allow custom CSS', () => {
+    const hairlineDivider = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(hairlineDivider).not.toHaveProp('className', 'my-custom-class')
+    expect(hairlineDivider).not.toHaveProp('style')
+  })
+})

src/components/Dividers/HairlineDivider/__tests__/__snapshots__/HairlineDivider.spec.jsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HairlineDivider renders 1`] = `
+<hr
+  class="horizontal thin"
+/>
+`;