feat(box): Add left prop so we can easily set margin left for Chevron…

…Link and refactor how to calcul

src/components/Box/Box.jsx

@@ -3,39 +3,16 @@ 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 getHorizontalClasses = xSize => {
-  if (!xSize) {
+const getClassName = (spacing, location, scale) => {
+  if (!scale) {
     return undefined
   }
 
-  return styles[`horizontalPadding-${xSize}`]
-}
-
-const getVerticalClasses = ySize => {
-  if (!ySize) {
-    return undefined
-  }
-
-  return styles[`verticalPadding-${ySize}`]
-}
-
-const getBelowClass = belowSize => {
-  if (!belowSize) {
-    return undefined
-  }
-
-  return styles[`bottomMargin-${belowSize}`]
-}
-
-const getRightClass = rightSize => {
-  if (!rightSize) {
-    return undefined
-  }
-
-  return styles[`rightMargin-${rightSize}`]
+  return styles[`${location}${capitalize(spacing)}-${scale}`]
 }
 
 const getBetweenClasses = betweenSize => {
@@ -54,6 +31,7 @@ const Box = ({
   inset,
   below,
   right,
+  left,
   between,
   dangerouslyAddClassName,
   children,
@@ -72,10 +50,11 @@ const Box = ({
   }
 
   const classes = joinClassNames(
-    getHorizontalClasses(xSize),
-    getVerticalClasses(ySize),
-    getBelowClass(below),
-    getRightClass(right),
+    getClassName('padding', 'horizontal', xSize),
+    getClassName('padding', 'vertical', ySize),
+    getClassName('margin', 'bottom', below),
+    getClassName('margin', 'right', right),
+    getClassName('margin', 'left', left),
     getBetweenClasses(between),
     dangerouslyAddClassName
   )
@@ -95,6 +74,7 @@ Box.propTypes = {
   inset: 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]),
+  left: 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,
@@ -108,6 +88,7 @@ Box.defaultProps = {
   inset: undefined,
   below: undefined,
   right: undefined,
+  left: undefined,
   between: undefined,
   dangerouslyAddClassName: undefined,
 }

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

@@ -52,6 +52,7 @@ exports[`ExpandCollapse renders 1`] = `
               horizontal={undefined}
               inline={false}
               inset={undefined}
+              left={undefined}
               right={undefined}
               tag={undefined}
               vertical={3}
@@ -73,6 +74,7 @@ exports[`ExpandCollapse renders 1`] = `
                       horizontal={undefined}
                       inline={false}
                       inset={undefined}
+                      left={undefined}
                       right={3}
                       tag={undefined}
                       vertical={undefined}
@@ -159,6 +161,7 @@ exports[`ExpandCollapse renders 1`] = `
                   horizontal={undefined}
                   inline={false}
                   inset={undefined}
+                  left={undefined}
                   right={undefined}
                   tag={undefined}
                   vertical={3}
@@ -229,6 +232,7 @@ exports[`ExpandCollapse renders 1`] = `
               horizontal={undefined}
               inline={false}
               inset={undefined}
+              left={undefined}
               right={undefined}
               tag={undefined}
               vertical={3}
@@ -250,6 +254,7 @@ exports[`ExpandCollapse renders 1`] = `
                       horizontal={undefined}
                       inline={false}
                       inset={undefined}
+                      left={undefined}
                       right={3}
                       tag={undefined}
                       vertical={undefined}
@@ -336,6 +341,7 @@ exports[`ExpandCollapse renders 1`] = `
                   horizontal={undefined}
                   inline={false}
                   inset={undefined}
+                  left={undefined}
                   right={undefined}
                   tag={undefined}
                   vertical={3}

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -23,7 +23,7 @@ const getIcon = (symbol, className) => {
   const direction = symbol === 'leftChevron' ? {right: 2} : {left: 2}
 
   return (
-    <Box inline spacing="margin" {...direction} dangerouslyAddClassName={className}>
+    <Box inline {...direction} dangerouslyAddClassName={className}>
       <DecorativeIcon symbol={symbol} size={16} />
     </Box>
   )

src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { shallow, render } from 'enzyme'
+import {shallow, render} from 'enzyme'
 
-
-import { warn } from '../../../../utils/warn'
+import {warn} from '../../../../utils/warn'
 
 import ChevronLink from '../ChevronLink'
 import DecorativeIcon from '../../../Icons/DecorativeIcon/DecorativeIcon'
@@ -11,9 +10,7 @@ import Box from '../../../Box/Box'
 jest.mock('../../../../utils/warn')
 
 describe('ChevronLink', () => {
-  const doShallow = (overrides = {}) => shallow(
-    <ChevronLink {...overrides}>Go home</ChevronLink>
-  )
+  const doShallow = (overrides = {}) => shallow(<ChevronLink {...overrides}>Go home</ChevronLink>)
 
   afterEach(() => {
     jest.clearAllMocks()
@@ -26,72 +23,72 @@ describe('ChevronLink', () => {
   })
 
   it('is an anchor HTML element when using the href attribute', () => {
-    const link = doShallow({ href: 'http://telus.com' })
+    const link = doShallow({href: 'http://telus.com'})
 
     expect(link).toHaveTagName('a')
     expect(link).toHaveProp('href', 'http://telus.com')
   })
 
   it('renders a react router link element when passed as a prop', () => {
     const MyLink = () => <span />
-    const link = doShallow({ reactRouterLinkComponent: MyLink })
+    const link = doShallow({reactRouterLinkComponent: MyLink})
 
     expect(link).toMatchSelector('MyLink')
   })
 
   it('must use `reactRouterLinkComponent` and `to` props together', () => {
     const MyLink = () => <span />
-    doShallow({ reactRouterLinkComponent: MyLink })
+    doShallow({reactRouterLinkComponent: MyLink})
 
     expect(warn).toHaveBeenCalled()
 
     jest.clearAllMocks()
 
-    const link = doShallow({ to: '/about' })
+    const link = doShallow({to: '/about'})
 
     expect(link).toHaveProp('to')
     expect(warn).toHaveBeenCalled()
   })
 
   it('has a chevron icon', () => {
-    let link = doShallow({ href: 'https://telus.com' })
+    let link = doShallow({href: 'https://telus.com'})
     expect(link).toContainReact(
-      <Box inline spacing="margin" left={2} dangerouslyAddClassName="rightChevron">
+      <Box inline left={2} dangerouslyAddClassName="rightChevron">
         <DecorativeIcon symbol="chevron" size={16} />
       </Box>
     )
 
-    link = doShallow({ href: 'https://telus.com', direction: 'left' })
+    link = doShallow({href: 'https://telus.com', direction: 'left'})
     expect(link).toContainReact(
-      <Box inline spacing="margin" right={2} dangerouslyAddClassName="leftChevron">
+      <Box inline right={2} dangerouslyAddClassName="leftChevron">
         <DecorativeIcon symbol="leftChevron" size={16} />
       </Box>
     )
   })
 
   it('can have specific variants', () => {
-    let link = doShallow({ href: 'https://telus.com' })
+    let link = doShallow({href: 'https://telus.com'})
     expect(link).toHaveClassName('primary')
 
-    link = doShallow({ href: 'https://telus.com', variant: 'secondary' })
+    link = doShallow({href: 'https://telus.com', variant: 'secondary'})
     expect(link).toHaveClassName('secondary')
 
-    link = doShallow({ href: 'https://telus.com', variant: 'primary' })
+    link = doShallow({href: 'https://telus.com', variant: 'primary'})
     expect(link).toHaveClassName('primary')
 
-    link = doShallow({ href: 'https://telus.com', variant: 'inverted' })
+    link = doShallow({href: 'https://telus.com', variant: 'inverted'})
     expect(link).toHaveClassName('inverted')
   })
 
   it('passes additional attributes to the link element', () => {
-    const link = doShallow({ id: 'the-link', role: 'button' })
+    const link = doShallow({id: 'the-link', role: 'button'})
 
     expect(link).toHaveProp('id', 'the-link')
     expect(link).toHaveProp('role', 'button')
   })
 
   it('does not allow custom CSS', () => {
-    const link = doShallow({ className: 'my-custom-class', style: { color: 'hotpink' } })
+    const link = doShallow({className: 'my-custom-class', style: {color: 'hotpink'}})
 
     expect(link).not.toHaveProp('className', 'my-custom-class')
     expect(link).not.toHaveProp('style')

src/components/Link/ChevronLink/__tests__/__snapshots__/ChevronLink.spec.jsx.snap

@@ -7,9 +7,7 @@ exports[`ChevronLink renders 1`] = `
 >
   Go home
   <span
-    class="rightChevron"
-    left="2"
-    spacing="margin"
+    class="leftMargin-2 rightChevron"
   >
     <i
       aria-hidden="true"