feat(util-helpers): add handle responsive styles for use in box and card

packages/helpers/__tests__/generateResponsiveStyles.spec.js

@@ -1,4 +1,4 @@
-import { prepareArray, generateStyles } from '../generateResponsiveStyles'
+import { prepareArray, generateStyles, handleResponsiveStyles } from '../generateResponsiveStyles'
 
 describe('generateResponsiveStyles', () => {
   describe('prepareArray', () => {
@@ -346,4 +346,31 @@ describe('generateResponsiveStyles', () => {
       })
     })
   })
+
+  describe('handleResponsiveStyle', () => {
+    const props = {
+      vertical: { xs: 4, md: 8 },
+    }
+    const styleFn = ({ vertical }) => {
+      if (vertical === undefined) {
+        return undefined
+      }
+
+      return { paddingTop: vertical, paddingBottom: vertical }
+    }
+
+    it('works', () => {
+      const styles = handleResponsiveStyles(props, styleFn)
+      expect(styles).toEqual({
+        '@media (max-width: 767px)': {
+          paddingTop: 4,
+          paddingBottom: 4,
+        },
+        '@media (min-width: 768px)': {
+          paddingTop: 8,
+          paddingBottom: 8,
+        },
+      })
+    })
+  })
 })

packages/helpers/generateResponsiveStyles.js

@@ -102,9 +102,37 @@ export const generateStyles = (breakpoints, style) => {
   return styles
 }
 
+const handleBoundaryCrossing = (acc, curr) => {
+  if (
+    isMobileBreakpoint(curr.from) &&
+    ((curr.until !== 'md' && isDesktopBreakpoint(curr.until)) || typeof curr.until === 'undefined')
+  ) {
+    const props = Object.keys(curr.props).filter(
+      prop => typeof curr.props[prop] === 'number' && curr.props[prop] > 3
+    )
+    if (props.length !== 0) {
+      const mobileBreakpoint = { ...curr, props: curr.props }
+      const desktopBreakpoint = { ...curr, props: curr.props }
+
+      mobileBreakpoint.until = 'md'
+      desktopBreakpoint.from = 'md'
+
+      return acc.concat([mobileBreakpoint, desktopBreakpoint])
+    }
+  }
+  return acc.concat([curr])
+}
+
 export const generateResponsiveStyles = (props, styleFn) => {
   const breakpoints = prepareArray(props)
   return generateStyles(breakpoints, styleFn)
 }
 
+export const handleResponsiveStyles = (props, styleFn) => {
+  const breakpoints = prepareArray(props)
+    .filter(bp => Object.keys(bp.props).length > 0)
+    .reduce(handleBoundaryCrossing, [])
+  return generateStyles(breakpoints, styleFn)
+}
+
 export default generateResponsiveStyles

packages/helpers/index.js

@@ -7,4 +7,5 @@ export {
   default as generateResponsiveStyles,
   prepareArray,
   generateStyles,
+  handleResponsiveStyles,
 } from './generateResponsiveStyles'