diff --git a/config/styleguide.config.js b/config/styleguide.config.js
index b6fca99a67..90742799cf 100644
--- a/config/styleguide.config.js
+++ b/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'))
+ ])
+ }
}
]
},
diff --git a/src/components/Dividers/WaveDivider/WaveDivider.jsx b/src/components/Dividers/WaveDivider/WaveDivider.jsx
new file mode 100644
index 0000000000..5c7c684844
--- /dev/null
+++ b/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 }) => (
+
+)
+
+export default WaveDivider
diff --git a/src/components/Dividers/WaveDivider/WaveDivider.md b/src/components/Dividers/WaveDivider/WaveDivider.md
new file mode 100644
index 0000000000..d8048aecbb
--- /dev/null
+++ b/src/components/Dividers/WaveDivider/WaveDivider.md
@@ -0,0 +1,3 @@
+```
+
+```
diff --git a/src/components/Dividers/WaveDivider/WaveDivider.modules.scss b/src/components/Dividers/WaveDivider/WaveDivider.modules.scss
new file mode 100644
index 0000000000..f3ff570926
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Dividers/WaveDivider/__tests__/WaveDivider.spec.jsx b/src/components/Dividers/WaveDivider/__tests__/WaveDivider.spec.jsx
new file mode 100644
index 0000000000..3e64e71b06
--- /dev/null
+++ b/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()
+
+ it('renders', () => {
+ const waveDivider = render()
+
+ expect(toJson(waveDivider)).toMatchSnapshot()
+ })
+
+ it('renders an
', () => {
+ 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')
+ })
+})
diff --git a/src/components/Dividers/WaveDivider/__tests__/__snapshots__/WaveDivider.spec.jsx.snap b/src/components/Dividers/WaveDivider/__tests__/__snapshots__/WaveDivider.spec.jsx.snap
new file mode 100644
index 0000000000..439ff2ef61
--- /dev/null
+++ b/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`] = `
+
+`;