feat(hairline-divider): Add styles for 4 different options

src/components/Dividers/HairlineDivider/HairlineDivider.jsx

@@ -3,20 +3,30 @@ import PropTypes from 'prop-types'
 
 import safeRest from '../../../utils/safeRest'
 
-import joinClassNames from '../../../utils/joinClassNames'
 import styles from './HairlineDivider.modules.scss'
 
+const getClassName = (vertical, gradient) => {
+  let hrClass
+
+  if (vertical && gradient) {
+    hrClass = 'verticalGradient'
+  } else if (vertical && !gradient) {
+    hrClass = 'verticalThin'
+  } else if (!vertical && gradient) {
+    hrClass = 'horizontalGradient'
+  } else {
+    hrClass = 'horizontalThin'
+  }
+
+  return hrClass
+}
+
 /**
  * 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} />
+    <hr {...safeRest(rest)} className={styles[getClassName(vertical, gradient)]} />
   )
 }
 

src/components/Dividers/HairlineDivider/HairlineDivider.md

@@ -1,3 +1,19 @@
 ```
-<HairlineDivider />
+<div>
+  <HairlineDivider />
+  <br/>
+  <HairlineDivider gradient={true} />
+</div>
+```
+
+```
+<div style={{height: '100px'}}>
+  <HairlineDivider vertical={true} />
+</div>
+```
+
+```
+<div style={{height: '100px'}}>
+  <HairlineDivider vertical={true} gradient={true} />
+</div>
 ```

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

@@ -1,32 +1,38 @@
 @import '../../../scss/settings/colours';
 
-.horizontal {
-
+.base {
   composes: noSpacing from '../../Spacing/Spacing.modules.scss';
+  border: none;
 }
 
-.vertical {
-  composes: noSpacing from '../../Spacing/Spacing.modules.scss';
-
-  width: 1px;
+.verticalHeight {
   height: 100%;
+}
 
-  border: none;
+.horizontalThin {
+  composes: base;
 
-  border-left: 1px solid;
-  border-color: $color-gainsboro;
+  border-top: 1px solid $color-gainsboro;
 }
 
-.thin {
-  border: none;
+.verticalThin {
+  composes: base;
+  composes: verticalHeight;
 
-  border-top: 1px solid;
-  border-color: $color-gainsboro;
+  border-left: 1px solid $color-gainsboro;
 }
 
-.gradient {
-  border: none;
-  height: 1px;
+.horizontalGradient {
+  composes: base;
 
+  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%);
 }
+
+.verticalGradient {
+  composes: base;
+  composes: verticalHeight;
+
+  width: 1px;
+  background-image: linear-gradient(180deg, rgba(216, 216, 216, 0) 0%, $color-gainsboro 5%, $color-gainsboro 95%, rgba(216, 216, 216, 0) 100%);
+}

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

@@ -21,18 +21,18 @@ describe('HairlineDivider', () => {
 
   it('can be horizontal or vertical', () => {
     let hairlineDivider = doShallow()
-    expect(hairlineDivider).toHaveClassName('horizontal')
+    expect(hairlineDivider).toHaveClassName('horizontalThin')
 
     hairlineDivider = doShallow({ vertical: true })
-    expect(hairlineDivider).toHaveClassName('vertical')
+    expect(hairlineDivider).toHaveClassName('verticalThin')
   })
 
   it('can have a gradient', () => {
     let hairlineDivider = doShallow()
-    expect(hairlineDivider).toHaveClassName('thin')
+    expect(hairlineDivider).toHaveClassName('horizontalThin')
 
     hairlineDivider = doShallow({ gradient: true })
-    expect(hairlineDivider).toHaveClassName('gradient')
+    expect(hairlineDivider).toHaveClassName('horizontalGradient')
   })
 
   it('passes additional attributes to the element', () => {

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

@@ -2,6 +2,6 @@
 
 exports[`HairlineDivider renders 1`] = `
 <hr
-  class="horizontal thin"
+  class="horizontalThin"
 />
 `;