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`] = ` +
+`;