feat(box): Aligned on new interface. Renamed x and y props to horizon…

…tal and vertical and refactored right prop to add right margin. Also refactored the Input component to use the new interface. WIP because there are a few more components to fix

src/components/Box/Box.jsx

@@ -3,35 +3,42 @@ import PropTypes from 'prop-types'
 
 import safeRest from '../../utils/safeRest'
 import joinClassNames from '../../utils/joinClassNames'
-// import capitalize from '../../utils/capitalize'
 
 import styles from './Box.modules.scss'
 
-const getXClasses = xSize => {
+const getHorizontalClasses = xSize => {
   if (!xSize) {
     return undefined
   }
 
   return styles[`horizontalPadding-${xSize}`]
 }
 
-const getYClasses = ySize => {
+const getVerticalClasses = ySize => {
   if (!ySize) {
     return undefined
   }
 
   return styles[`verticalPadding-${ySize}`]
 }
 
-const getBelowClasses = belowSize => {
+const getBelowClass = belowSize => {
   if (!belowSize) {
     return undefined
   }
 
   return styles[`bottomMargin-${belowSize}`]
 }
 
-const getBetweenClasses = (betweenSize, inline) => {
+const getRightClass = rightSize => {
+  if (!rightSize) {
+    return undefined
+  }
+
+  return styles[`rightMargin-${rightSize}`]
+}
+
+const getBetweenClasses = betweenSize => {
   if (!betweenSize) {
     return undefined
   }
@@ -42,25 +49,18 @@ const getBetweenClasses = (betweenSize, inline) => {
 const Box = ({
   inline,
   tag,
-  spacing,
-  all,
   vertical,
   horizontal,
-  top,
-  right,
-  bottom,
-  left,
   inset,
-  x,
-  y,
   below,
+  right,
   between,
   dangerouslyAddClassName,
   children,
   ...rest
 }) => {
-  const xSize = inset || x
-  const ySize = inset || y
+  const xSize = inset || horizontal
+  const ySize = inset || vertical
 
   let Tag = ''
   if (tag) {
@@ -72,10 +72,11 @@ const Box = ({
   }
 
   const classes = joinClassNames(
-    getXClasses(xSize),
-    getYClasses(ySize),
-    getBelowClasses(below),
-    getBetweenClasses(between, inline),
+    getHorizontalClasses(xSize),
+    getVerticalClasses(ySize),
+    getBelowClass(below),
+    getRightClass(right),
+    getBetweenClasses(between),
     dangerouslyAddClassName
   )
 
@@ -89,18 +90,11 @@ const Box = ({
 Box.propTypes = {
   inline: PropTypes.bool,
   tag: PropTypes.string,
-  spacing: PropTypes.oneOf(['margin', 'padding']),
-  all: PropTypes.oneOf([1, 2, 3, 4, 6]),
   vertical: PropTypes.oneOf([1, 2, 3, 4, 6]),
   horizontal: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  top: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  right: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  bottom: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  left: PropTypes.oneOf([1, 2, 3, 4, 6]),
   inset: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  x: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  y: PropTypes.oneOf([1, 2, 3, 4, 6]),
   below: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
+  right: PropTypes.oneOf([1, 2, 3, 4, 6]),
   between: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
   dangerouslyAddClassName: PropTypes.string,
   children: PropTypes.node.isRequired,
@@ -109,18 +103,11 @@ Box.propTypes = {
 Box.defaultProps = {
   inline: false,
   tag: undefined,
-  spacing: undefined,
-  all: undefined,
   vertical: undefined,
   horizontal: undefined,
-  top: undefined,
-  right: undefined,
-  bottom: undefined,
-  left: undefined,
   inset: undefined,
-  x: undefined,
-  y: undefined,
   below: undefined,
+  right: undefined,
   between: undefined,
   dangerouslyAddClassName: undefined,
 }

src/components/Box/__tests__/Box.spec.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import {shallow} from 'enzyme'
 
 import Box from '../Box'
 
@@ -17,24 +17,24 @@ describe.skip('Box deprecated', () => {
     )
 
   it('can have padding or margin', () => {
-    let box = doShallow({ spacing: 'padding', all: 1 })
+    let box = doShallow({spacing: 'padding', all: 1})
     expect(box).toHaveClassName('allPadding-1')
 
-    box = doShallow({ spacing: 'margin', all: 1 })
+    box = doShallow({spacing: 'margin', all: 1})
     expect(box).toHaveClassName('allMargin-1')
   })
 
   it('can have directional spacing', () => {
-    let box = doShallow({ spacing: 'padding', top: 1 })
+    let box = doShallow({spacing: 'padding', top: 1})
     expect(box).toHaveClassName('topPadding-1')
 
-    box = doShallow({ spacing: 'padding', top: 1, right: 2 })
+    box = doShallow({spacing: 'padding', top: 1, right: 2})
     expect(box).toHaveClassName('topPadding-1 rightPadding-2')
 
-    box = doShallow({ spacing: 'padding', top: 1, right: 2, bottom: 3 })
+    box = doShallow({spacing: 'padding', top: 1, right: 2, bottom: 3})
     expect(box).toHaveClassName('topPadding-1 rightPadding-2 bottomPadding-3')
 
-    box = doShallow({ spacing: 'padding', top: 1, right: 2, bottom: 3, left: 4 })
+    box = doShallow({spacing: 'padding', top: 1, right: 2, bottom: 3, left: 4})
     expect(box).toHaveClassName('topPadding-1 rightPadding-2 bottomPadding-3 leftPadding-4')
   })
 })
@@ -62,44 +62,68 @@ describe('Box', () => {
     let box = doShallow()
     expect(box).toHaveTagName('div')
 
-    box = doShallow({ inline: true })
+    box = doShallow({inline: true})
     expect(box).toHaveTagName('span')
   })
 
   it('can render as other elements', () => {
-    const box = doShallow({ tag: 'ul' })
+    const box = doShallow({tag: 'ul'})
     expect(box).toHaveTagName('ul')
   })
 
   it('can have vertical or horizontal spacing', () => {
-    let box = doShallow({ y: 1 })
+    let box = doShallow({vertical: 1})
     expect(box).toHaveClassName('verticalPadding-1')
 
-    box = doShallow({ x: 1 })
+    box = doShallow({horizontal: 1})
     expect(box).toHaveClassName('horizontalPadding-1')
   })
 
   it('can have horizontal and vertical spacing of different scales', () => {
-    const box = doShallow({ y: 1, x: 2 })
+    const box = doShallow({vertical: 1, horizontal: 2})
 
     expect(box).toHaveClassName('verticalPadding-1 horizontalPadding-2')
   })
 
+  it('can have inset padding', () => {
+    const box = doShallow({inset: 3})
+
+    expect(box).toHaveClassName('verticalPadding-3 horizontalPadding-3')
+  })
+
+  it('can have bottom margin', () => {
+    const box = doShallow({below: 2})
+
+    expect(box).toHaveClassName('bottomMargin-2')
+  })
+
+  it('can have right margin', () => {
+    const box = doShallow({right: 4})
+
+    expect(box).toHaveClassName('rightMargin-4')
+  })
+
+  it('can have between margin', () => {
+    const box = doShallow({between: 2})
+
+    expect(box).toHaveClassName('betweenBottomMargin-2')
+  })
+
   it('passes additional attributes to the element', () => {
-    const box = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
+    const box = doShallow({id: 'the-id', 'data-some-attr': 'some value'})
 
     expect(box).toHaveProp('id', 'the-id')
     expect(box).toHaveProp('data-some-attr', 'some value')
   })
 
   it('will add additional arbitrary class names', () => {
-    const box = doShallow({ inset: 3, dangerouslyAddClassName: 'a-class' })
+    const box = doShallow({dangerouslyAddClassName: 'a-class'})
 
-    expect(box).toHaveClassName('verticalPadding-3 horizontalPadding-3 a-class')
+    expect(box).toHaveClassName('a-class')
   })
 
   it('does not allow custom CSS', () => {
-    const box = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+    const box = doShallow({className: 'my-custom-class', style: {color: 'hotpink'}})
 
     expect(box).not.toHaveProp('className', 'my-custom-class')
     expect(box).not.toHaveProp('style')

src/components/Box/__tests__/__snapshots__/Box.spec.jsx.snap

@@ -2,7 +2,8 @@
 
 exports[`Box renders 1`] = `
 <div
-  className=""
+  className="verticalPadding-2"
+  spacing="padding"
 >
   Some content
 </div>

src/components/Card/__tests__/__snapshots__/Card.spec.jsx.snap

@@ -2,7 +2,9 @@
 
 exports[`<Card /> renders 1`] = `
 <div
-  class="horizontalPadding-3 verticalPadding-4 white"
+  class="white"
+  x="3"
+  y="4"
 >
   Children
 </div>