feat(divider): add wave divider component

config/styleguide.config.js

@@ -187,6 +187,14 @@ module.exports = {
                   path.resolve('src/old-components/ExpandCollapse/Panel.jsx')
                 ]
               }
+            },
+            {
+              name: 'Dividers',
+              components() {
+                return compact([
+                  toggleByEnv('Dividers', path.resolve('src/components/Dividers/WaveDivider/WaveDivider.jsx'))
+                ])
+              }
             }
           ]
         },

src/components/Dividers/WaveDivider/WaveDivider.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import safeRest from '../../../utils/safeRest'
+
+import styles from './WaveDivider.modules.scss'
+
+const WaveDivider = ({ ...rest }) => (
+  <hr {...safeRest(rest)} className={styles.wave} />
+)
+
+export default WaveDivider

src/components/Dividers/WaveDivider/WaveDivider.md

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

src/components/Dividers/WaveDivider/WaveDivider.modules.scss

@@ -0,0 +1,12 @@
+@import "../../../scss/settings/colours";
+
+$transparent-white: rgba(255, 255, 255, 0);
+$transparent-black: rgba(0, 0, 0, 0.13);
+
+.wave {
+  height: 200px;
+  background-image: linear-gradient(-1deg, $color-white 40%, $color-gainsboro 100%), linear-gradient(-172deg, $transparent-white 6%, $color-white 48%), linear-gradient(-90deg, $transparent-white 53%, $color-white 100%);
+  // background-size need to do this later comma-separated as well
+  box-shadow: inset 0 10px 16px 0 $transparent-black;
+  opacity: 0.3;
+}

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { shallow, render } from 'enzyme'
+import toJson from 'enzyme-to-json'
+
+import WaveDivider from '../WaveDivider'
+
+describe('WaveDivider', () => {
+  const doShallow = (props = {}) => shallow(<WaveDivider {...props} />)
+
+  it('renders', () => {
+    const waveDivider = render(<WaveDivider />)
+
+    expect(toJson(waveDivider)).toMatchSnapshot()
+  })
+
+  it('renders an <hr>', () => {
+    const waveDivider = doShallow()
+
+    expect(waveDivider).toHaveTagName('hr')
+  })
+
+  it('passes additional attributes to the element', () => {
+    const waveDivider = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
+
+    expect(waveDivider).toHaveProp('id', 'the-id')
+    expect(waveDivider).toHaveProp('data-some-attr', 'some value')
+  })
+
+  it('does not allow custom CSS', () => {
+    const waveDivider = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(waveDivider).not.toHaveProp('className', 'my-custom-class')
+    expect(waveDivider).not.toHaveProp('style')
+  })
+})

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

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