feat(responsiveBox): Apply new responsive skill to box component

src/components/Box/Box.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Responsive from '../Responsive/Responsive'
 
 import safeRest from '../../utils/safeRest'
 import joinClassNames from '../../utils/joinClassNames'
@@ -11,7 +12,6 @@ const getClassName = (spacing, location, scale) => {
   if (!scale) {
     return undefined
   }
-
   return styles[`${location}${capitalize(spacing)}-${scale}`]
 }
 
@@ -47,15 +47,21 @@ const Box = ({
   const xSize = inset || horizontal
   const ySize = inset || vertical
 
-  const classes = joinClassNames(
-    getClassName('padding', 'horizontal', xSize),
-    getClassName('padding', 'vertical', ySize),
-    getClassName('margin', 'bottom', below),
-    getBetweenClasses(between, inline),
-    dangerouslyAddClassName
+  return (
+    <Responsive minWidth="md">
+      {isDesktop => {
+        const classes = joinClassNames(
+          styles[isDesktop ? 'desktop' : 'mobile'],
+          getClassName('padding', 'horizontal', xSize),
+          getClassName('padding', 'vertical', ySize),
+          getClassName('margin', 'bottom', below),
+          getBetweenClasses(between, inline),
+          dangerouslyAddClassName
+        )
+        return React.createElement(tag, { ...safeRest(rest), className: classes }, children)
+      }}
+    </Responsive>
   )
-
-  return React.createElement(tag, { ...safeRest(rest), className: classes }, children)
 }
 
 Box.propTypes = {

src/components/Box/Box.modules.scss

@@ -3,7 +3,7 @@
 
 $spacing-base: 1rem; // 16px
 
-$spacings: (
+$mobile: (
   1: $spacing-base * 0.25,
   2: $spacing-base * 0.5,
   3: $spacing-base,
@@ -14,15 +14,15 @@ $spacings: (
   8: $spacing-base * 4
 );
 
-$responsive-spacings: (
-  medium:
-    (
-      4: $spacing-base * 2,
-      5: $spacing-base * 3,
-      6: $spacing-base * 4,
-      7: $spacing-base * 4.5,
-      8: $spacing-base * 6
-    )
+$desktop: (
+  1: $spacing-base * 0.25,
+  2: $spacing-base * 0.5,
+  3: $spacing-base,
+  4: $spacing-base * 2,
+  5: $spacing-base * 3,
+  6: $spacing-base * 4,
+  7: $spacing-base * 4.5,
+  8: $spacing-base * 6
 );
 
 .betweenRight {
@@ -59,18 +59,14 @@ $responsive-spacings: (
   }
 }
 
-@mixin responsiveSpacingClasses ($bp, $map) {
-  @include from-breakpoint($bp) {
-    @each $level, $value in $map {
-      @include spacingClasses($level, $value);
-    }
+.desktop {
+  @each $level, $value in $desktop {
+    @include spacingClasses($level, $value);
   }
 }
 
-@each $level, $value in $spacings {
-  @include spacingClasses($level, $value);
-}
-
-@each $bp, $map in $responsive-spacings {
-  @include responsiveSpacingClasses($bp, $map);
+.mobile {
+  @each $level, $value in $mobile {
+    @include spacingClasses($level, $value);
+  }
 }

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

@@ -11,6 +11,8 @@ describe('Box', () => {
         Some content
       </Box>
     )
+      .dive()
+      .dive()
 
   it('renders', () => {
     const box = doShallow()

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

@@ -2,7 +2,7 @@
 
 exports[`Box renders 1`] = `
 <div
-  className="betweenBottomMargin-3 betweenBottom"
+  className="mobile betweenBottomMargin-3 betweenBottom"
 >
   Some content
 </div>