fix(Box): Support responsive padding, margin and display (#100)

lib/components/Box/Box.tsx

@@ -9,18 +9,36 @@ import {
   BorderWidthVariants,
   BorderRadiusVariants,
   BackgroundColorVariants,
-  BorderColorVariants
+  BorderColorVariants,
+  DisplayVariants
 } from '../../themes/theme';
 
+function getResponsiveClasses<AtomName extends string>(
+  atoms: Record<AtomName, string>,
+  desktopAtoms: Record<AtomName, string>,
+  propValue: ResponsiveProp<AtomName>
+) {
+  if (typeof propValue === 'string') {
+    return atoms[propValue!];
+  } else if (propValue instanceof Array) {
+    return propValue[0] !== propValue[1]
+      ? `${atoms[propValue[0]!] || ''} ${desktopAtoms[propValue[1]!] || ''}`
+      : atoms[propValue[0]!];
+  }
+}
+
+type ResponsiveProp<AtomName> = AtomName | [AtomName, AtomName];
+
 export interface BoxProps extends ResetProps {
-  paddingTop?: SpacingVariants;
-  paddingBottom?: SpacingVariants;
-  paddingLeft?: HorizontalSpacingVariants;
-  paddingRight?: HorizontalSpacingVariants;
-  marginTop?: SpacingVariants;
-  marginBottom?: SpacingVariants;
-  marginLeft?: HorizontalSpacingVariants;
-  marginRight?: HorizontalSpacingVariants;
+  paddingTop?: ResponsiveProp<SpacingVariants>;
+  paddingBottom?: ResponsiveProp<SpacingVariants>;
+  paddingLeft?: ResponsiveProp<HorizontalSpacingVariants>;
+  paddingRight?: ResponsiveProp<HorizontalSpacingVariants>;
+  marginTop?: ResponsiveProp<SpacingVariants>;
+  marginBottom?: ResponsiveProp<SpacingVariants>;
+  marginLeft?: ResponsiveProp<HorizontalSpacingVariants>;
+  marginRight?: ResponsiveProp<HorizontalSpacingVariants>;
+  display?: ResponsiveProp<DisplayVariants>;
   borderWidth?: BorderWidthVariants;
   borderRadius?: BorderRadiusVariants;
   backgroundColor?: BackgroundColorVariants;
@@ -40,6 +58,7 @@ export default class Box extends Component<BoxProps> {
       marginBottom,
       marginLeft,
       marginRight,
+      display,
       borderWidth,
       borderRadius,
       backgroundColor,
@@ -50,27 +69,75 @@ export default class Box extends Component<BoxProps> {
 
     return (
       <ThemeConsumer>
-        {theme => (
-          <Reset
-            className={classnames(
-              className,
-              styles.root,
-              theme.atoms.backgroundColor[backgroundColor!],
-              theme.atoms.borderColor[borderColor!],
-              theme.atoms.borderWidth[borderWidth!],
-              theme.atoms.borderRadius[borderRadius!],
-              theme.atoms.marginTop[marginTop!],
-              theme.atoms.marginRight[marginRight!],
-              theme.atoms.marginBottom[marginBottom!],
-              theme.atoms.marginLeft[marginLeft!],
-              theme.atoms.paddingTop[paddingTop!],
-              theme.atoms.paddingRight[paddingRight!],
-              theme.atoms.paddingBottom[paddingBottom!],
-              theme.atoms.paddingLeft[paddingLeft!]
-            )}
-            {...restProps}
-          />
-        )}
+        {({ atoms }) => {
+          return (
+            <Reset
+              className={classnames(
+                className,
+                styles.root,
+                atoms.backgroundColor[backgroundColor!],
+                atoms.borderColor[borderColor!],
+                atoms.borderWidth[borderWidth!],
+                atoms.borderRadius[borderRadius!],
+                marginTop &&
+                  getResponsiveClasses(
+                    atoms.marginTop,
+                    atoms.marginTopDesktop,
+                    marginTop
+                  ),
+                marginRight &&
+                  getResponsiveClasses(
+                    atoms.marginRight,
+                    atoms.marginRightDesktop,
+                    marginRight
+                  ),
+                marginBottom &&
+                  getResponsiveClasses(
+                    atoms.marginBottom,
+                    atoms.marginBottomDesktop,
+                    marginBottom
+                  ),
+                marginLeft &&
+                  getResponsiveClasses(
+                    atoms.marginLeft,
+                    atoms.marginLeftDesktop,
+                    marginLeft
+                  ),
+                paddingTop &&
+                  getResponsiveClasses(
+                    atoms.paddingTop,
+                    atoms.paddingTopDesktop,
+                    paddingTop
+                  ),
+                paddingRight &&
+                  getResponsiveClasses(
+                    atoms.paddingRight,
+                    atoms.paddingRightDesktop,
+                    paddingRight
+                  ),
+                paddingBottom &&
+                  getResponsiveClasses(
+                    atoms.paddingBottom,
+                    atoms.paddingBottomDesktop,
+                    paddingBottom
+                  ),
+                paddingLeft &&
+                  getResponsiveClasses(
+                    atoms.paddingLeft,
+                    atoms.paddingLeftDesktop,
+                    paddingLeft
+                  ),
+                display &&
+                  getResponsiveClasses(
+                    atoms.display,
+                    atoms.displayDesktop,
+                    display
+                  )
+              )}
+              {...restProps}
+            />
+          );
+        }}
       </ThemeConsumer>
     );
   }

lib/themes/jobStreet/atoms/atoms.ts

@@ -19,10 +19,34 @@ export { default as marginTop } from './margin/marginTop.css.js';
 export { default as marginRight } from './margin/marginRight.css.js';
 export { default as marginBottom } from './margin/marginBottom.css.js';
 export { default as marginLeft } from './margin/marginLeft.css.js';
+export { default as marginTopDesktop } from './margin/marginTopDesktop.css.js';
+export {
+  default as marginRightDesktop
+} from './margin/marginRightDesktop.css.js';
+export {
+  default as marginBottomDesktop
+} from './margin/marginBottomDesktop.css.js';
+export {
+  default as marginLeftDesktop
+} from './margin/marginLeftDesktop.css.js';
 export { default as paddingTop } from './padding/paddingTop.css.js';
 export { default as paddingRight } from './padding/paddingRight.css.js';
 export { default as paddingBottom } from './padding/paddingBottom.css.js';
 export { default as paddingLeft } from './padding/paddingLeft.css.js';
+export {
+  default as paddingTopDesktop
+} from './padding/paddingTopDesktop.css.js';
+export {
+  default as paddingRightDesktop
+} from './padding/paddingRightDesktop.css.js';
+export {
+  default as paddingBottomDesktop
+} from './padding/paddingBottomDesktop.css.js';
+export {
+  default as paddingLeftDesktop
+} from './padding/paddingLeftDesktop.css.js';
+export { default as display } from './display.css.js';
+export { default as displayDesktop } from './displayDesktop.css.js';
 export { default as transform } from './transform.css.js';
 export { default as transition } from './transition.css.js';
 export { default as width } from './width.css.js';

lib/themes/jobStreet/atoms/display.css.js

@@ -0,0 +1,7 @@
+export default {
+  '.block': { display: 'block' },
+  '.inline': { display: 'inline' },
+  '.none': { display: 'none' },
+  '.inlineBlock': { display: 'inline-block' },
+  '.flex': { display: 'flex' }
+};

lib/themes/jobStreet/atoms/display.css.js.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const block: string;
+export const flex: string;
+export const inline: string;
+export const inlineBlock: string;
+export const none: string;

lib/themes/jobStreet/atoms/displayDesktop.css.js

@@ -0,0 +1,13 @@
+import createDesktopRules from '../../utils/createDesktopRules';
+import tokens from '../tokens/tokens';
+
+export default createDesktopRules({
+  tokens,
+  css: {
+    '.block': { display: 'block' },
+    '.inline': { display: 'inline' },
+    '.none': { display: 'none' },
+    '.inlineBlock': { display: 'inline-block' },
+    '.flex': { display: 'flex' }
+  }
+});

lib/themes/jobStreet/atoms/displayDesktop.css.js.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const block: string;
+export const flex: string;
+export const inline: string;
+export const inlineBlock: string;
+export const none: string;

lib/themes/jobStreet/atoms/margin/marginBottomDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import rowSpacingForCssRule from '../../../utils/rowSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: rowSpacingForCssRule('marginBottom', tokens)
+});

lib/themes/jobStreet/atoms/margin/marginBottomDesktop.css.js.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/margin/marginLeftDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import columnSpacingForCssRule from '../../../utils/columnSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: columnSpacingForCssRule('marginLeft', tokens)
+});

lib/themes/jobStreet/atoms/margin/marginLeftDesktop.css.js.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const gutter: string;
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/margin/marginRightDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import columnSpacingForCssRule from '../../../utils/columnSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: columnSpacingForCssRule('marginRight', tokens)
+});

lib/themes/jobStreet/atoms/margin/marginRightDesktop.css.js.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const gutter: string;
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/margin/marginTopDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import rowSpacingForCssRule from '../../../utils/rowSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: rowSpacingForCssRule('marginTop', tokens)
+});

lib/themes/jobStreet/atoms/margin/marginTopDesktop.css.js.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/padding/paddingBottomDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import rowSpacingForCssRule from '../../../utils/rowSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: rowSpacingForCssRule('paddingBottom', tokens)
+});

lib/themes/jobStreet/atoms/padding/paddingBottomDesktop.css.js.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/padding/paddingLeftDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import columnSpacingForCssRule from '../../../utils/columnSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: columnSpacingForCssRule('paddingLeft', tokens)
+});

lib/themes/jobStreet/atoms/padding/paddingLeftDesktop.css.js.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const gutter: string;
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/padding/paddingRightDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import columnSpacingForCssRule from '../../../utils/columnSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: columnSpacingForCssRule('paddingRight', tokens)
+});

lib/themes/jobStreet/atoms/padding/paddingRightDesktop.css.js.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const gutter: string;
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;

lib/themes/jobStreet/atoms/padding/paddingTopDesktop.css.js

@@ -0,0 +1,8 @@
+import tokens from '../../tokens/tokens';
+import rowSpacingForCssRule from '../../../utils/rowSpacingForCssRule';
+import createDesktopRules from '../../../utils/createDesktopRules';
+
+export default createDesktopRules({
+  tokens,
+  css: rowSpacingForCssRule('paddingTop', tokens)
+});

lib/themes/jobStreet/atoms/padding/paddingTopDesktop.css.js.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const large: string;
+export const medium: string;
+export const none: string;
+export const small: string;
+export const xlarge: string;
+export const xsmall: string;
+export const xxlarge: string;
+export const xxsmall: string;