feat(box): Add between prop to add bottom margin to all children exce…

…pt for last
telus · Nov 2, 2017 · 170d67e · 170d67e
1 parent 68bda42
commit 170d67e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/src/components/Box/Box.jsx b/src/components/Box/Box.jsx
@@ -15,6 +15,14 @@ const getXClasses = xSize => {
   return styles[`horizontalPadding-${xSize}`]
 }
 
+const getYClasses = ySize => {
+  if (!ySize) {
+    return undefined
+  }
+
+  return styles[`verticalPadding-${ySize}`]
+}
+
 const getBelowClasses = belowSize => {
   if (!belowSize) {
     return undefined
@@ -23,12 +31,12 @@ const getBelowClasses = belowSize => {
   return styles[`bottomMargin-${belowSize}`]
 }
 
-const getYClasses = ySize => {
-  if (!ySize) {
+const getBetweenClasses = (betweenSize, inline) => {
+  if (!betweenSize) {
     return undefined
   }
 
-  return styles[`verticalPadding-${ySize}`]
+  return styles[`betweenBottomMargin-${betweenSize}`]
 }
 
 const Box = ({
@@ -46,6 +54,7 @@ const Box = ({
   x,
   y,
   below,
+  between,
   dangerouslyAddClassName,
   children,
   ...rest
@@ -66,6 +75,7 @@ const Box = ({
     getXClasses(xSize),
     getYClasses(ySize),
     getBelowClasses(below),
+    getBetweenClasses(between, inline),
     dangerouslyAddClassName
   )
 
@@ -91,6 +101,7 @@ Box.propTypes = {
   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]),
+  between: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
   dangerouslyAddClassName: PropTypes.string,
   children: PropTypes.node.isRequired,
 }
@@ -110,6 +121,7 @@ Box.defaultProps = {
   x: undefined,
   y: undefined,
   below: undefined,
+  between: undefined,
   dangerouslyAddClassName: undefined,
 }
 

diff --git a/src/components/Box/Box.modules.scss b/src/components/Box/Box.modules.scss
@@ -55,6 +55,11 @@ $boxProps: ('margin': 'Margin', 'padding': 'Padding');
       #{$p}-bottom: $value;
     }
 
+    // TODO: refactor to not generate unnecessary .betweenBottomPadding-*
+    .betweenBottom#{$v}-#{$level} > *:not(:last-child) {
+      #{$p}-bottom: $value;
+    }
+
     .left#{$v}-#{$level} {
       #{$p}-left: $value;
     }

diff --git a/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap b/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.spec.jsx.snap
@@ -48,6 +48,7 @@ exports[`ExpandCollapse renders 1`] = `
             <Box
               all={undefined}
               below={undefined}
+              between={undefined}
               bottom={undefined}
               dangerouslyAddClassName={undefined}
               horizontal={undefined}
@@ -75,6 +76,7 @@ exports[`ExpandCollapse renders 1`] = `
                     <Box
                       all={undefined}
                       below={undefined}
+                      between={undefined}
                       bottom={undefined}
                       dangerouslyAddClassName={undefined}
                       horizontal={undefined}
@@ -167,6 +169,7 @@ exports[`ExpandCollapse renders 1`] = `
                 <Box
                   all={undefined}
                   below={undefined}
+                  between={undefined}
                   bottom={undefined}
                   dangerouslyAddClassName={undefined}
                   horizontal={undefined}
@@ -243,6 +246,7 @@ exports[`ExpandCollapse renders 1`] = `
             <Box
               all={undefined}
               below={undefined}
+              between={undefined}
               bottom={undefined}
               dangerouslyAddClassName={undefined}
               horizontal={undefined}
@@ -270,6 +274,7 @@ exports[`ExpandCollapse renders 1`] = `
                     <Box
                       all={undefined}
                       below={undefined}
+                      between={undefined}
                       bottom={undefined}
                       dangerouslyAddClassName={undefined}
                       horizontal={undefined}
@@ -362,6 +367,7 @@ exports[`ExpandCollapse renders 1`] = `
                 <Box
                   all={undefined}
                   below={undefined}
+                  between={undefined}
                   bottom={undefined}
                   dangerouslyAddClassName={undefined}
                   horizontal={undefined}