feat(styleProps): Responsive spacing props

The style props for margin and padding
are now responsive, i.e. they can be
specified as an array when a breakpoints prop is also present

src/Box/README.mdx

@@ -24,7 +24,7 @@ The following properties can be changed:
 	<Box border="bottom" pb="s">
 		Hello
 	</Box>
-	<Box bold mt="s" p="s">
+	<Box bold breakpoints="s" mt={['xs', 'l']} p="s">
 		Hello
 	</Box>
 </Playground>

src/styleProps/borderProps.js

@@ -1,4 +1,4 @@
-import {checkTheme} from '../utils/theme';
+import {checkTheme} from '../utils/styleProps';
 
 import {borderValue} from '../mixins';
 

src/styleProps/marginProps.js

@@ -1,34 +1,42 @@
 import {getSpacing} from '../utils/spacing';
-import {checkTheme} from '../utils/theme';
+import {createStyleFunction} from '../utils/styleProps';
 
-function marginProps(props) {
-	const {m, mx, my, mt, mr, mb, ml, theme} = props;
-
-	checkTheme(theme);
-
-	return {
-		margin: m ? getSpacing(m, theme) : undefined,
-		marginTop: my
-			? getSpacing(my, theme)
-			: mt
-			? getSpacing(mt, theme)
-			: undefined,
-		marginRight: mx
-			? getSpacing(mx, theme)
-			: mr
-			? getSpacing(mr, theme)
-			: undefined,
-		marginBottom: my
-			? getSpacing(my, theme)
-			: mb
-			? getSpacing(mb, theme)
-			: undefined,
-		marginLeft: mx
-			? getSpacing(mx, theme)
-			: ml
-			? getSpacing(ml, theme)
-			: undefined,
-	};
-}
+const marginProps = createStyleFunction([
+	{
+		styleProp: 'm',
+		properties: ['margin'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'mt',
+		properties: ['marginTop'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'mr',
+		properties: ['marginRight'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'mb',
+		properties: ['marginBottom'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'ml',
+		properties: ['marginLeft'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'mx',
+		properties: ['marginLeft', 'marginRight'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'my',
+		properties: ['marginTop', 'marginBottom'],
+		getValue: getSpacing,
+	},
+]);
 
 export default marginProps;

src/styleProps/paddingProps.js

@@ -1,34 +1,42 @@
 import {getSpacing} from '../utils/spacing';
-import {checkTheme} from '../utils/theme';
+import {createStyleFunction} from '../utils/styleProps';
 
-function paddingProps(props) {
-	const {p, px, py, pt, pr, pb, pl, theme} = props;
-
-	checkTheme(theme);
-
-	return {
-		padding: p ? getSpacing(p, theme) : undefined,
-		paddingTop: py
-			? getSpacing(py, theme)
-			: pt
-			? getSpacing(pt, theme)
-			: undefined,
-		paddingRight: px
-			? getSpacing(px, theme)
-			: pr
-			? getSpacing(pr, theme)
-			: undefined,
-		paddingBottom: py
-			? getSpacing(py, theme)
-			: pb
-			? getSpacing(pb, theme)
-			: undefined,
-		paddingLeft: px
-			? getSpacing(px, theme)
-			: pl
-			? getSpacing(pl, theme)
-			: undefined,
-	};
-}
+const paddingProps = createStyleFunction([
+	{
+		styleProp: 'p',
+		properties: ['padding'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'pt',
+		properties: ['paddingTop'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'pr',
+		properties: ['paddingRight'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'pb',
+		properties: ['paddingBottom'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'pl',
+		properties: ['paddingLeft'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'px',
+		properties: ['paddingLeft', 'paddingRight'],
+		getValue: getSpacing,
+	},
+	{
+		styleProp: 'py',
+		properties: ['paddingTop', 'paddingBottom'],
+		getValue: getSpacing,
+	},
+]);
 
 export default paddingProps;

src/styleProps/positionProps.js

@@ -1,5 +1,5 @@
 import {getSpacing} from '../utils/spacing';
-import {checkTheme} from '../utils/theme';
+import {checkTheme} from '../utils/styleProps';
 
 function positionProps(props) {
 	const {pos, position, top, left, bottom, right, z, theme} = props;

src/styleProps/textProps.js

@@ -1,5 +1,5 @@
 import {alpha} from '../utils/colors';
-import {checkTheme} from '../utils/theme';
+import {checkTheme} from '../utils/styleProps';
 import {ellipsis, overflowWrap as wrap} from '../mixins';
 
 const textTransformMap = {

src/utils/styleProps.js

@@ -0,0 +1,112 @@
+import {ThemeSectionError} from '../ThemeSection';
+
+function checkTheme(theme) {
+	if (!theme || !theme.globals) {
+		throw new ThemeSectionError();
+	}
+}
+
+/**
+ * Retrieve a responsive style prop's value.
+ * If prop is not an array, return raw value
+ *
+ * @param {string|number|Array} prop - Prop passed to the component
+ * @param {number} index - index used to retrieve value if prop is an array
+ */
+
+function getValueByIndex(prop, index = 0) {
+	if (Array.isArray(prop)) {
+		return prop[index];
+	}
+	if (index > 0) {
+		return undefined;
+	}
+	return prop;
+}
+
+/**
+ * Builds a CSS ruleset based on the props passed to the component.
+ *
+ * @param {object[]} stylePropConfig - Style prop configuration objects
+ * @param {string} stylePropConfig[].styleProp - Name of the style prop
+ * @param {Array|Function} stylePropConfig[].properties - Array of the CSS properties
+ * to set, or a function to create such an array
+ * @param {Function} stylePropConfig[].getValue - Transforms the prop value into a
+ * valid CSS property value
+ * @param {object} passedProps
+ * @param {number} breakpointIndex
+ */
+
+function getStylePropRules(stylePropConfig, passedProps, breakpointIndex) {
+	const rules = {};
+	stylePropConfig.forEach(
+		({styleProp: stylePropKey, properties, getValue}) => {
+			const styleProp = getValueByIndex(
+				passedProps[stylePropKey],
+				breakpointIndex
+			);
+			const definedProps =
+				typeof properties === 'function'
+					? properties(styleProp)
+					: properties;
+			if (styleProp) {
+				definedProps.forEach(prop => {
+					rules[prop] = getValue(styleProp, passedProps.theme);
+				});
+			}
+		}
+	);
+	return rules;
+}
+
+function getResponsiveRules(stylePropConfig, passedProps) {
+	// Get baseline styles
+	const rules = getStylePropRules(stylePropConfig, passedProps, 0);
+
+	const {breakpoints} = passedProps;
+	if (!breakpoints) {
+		return rules;
+	}
+
+	// If any breakpoints exist, add them to the rule set
+	const bps = Array.isArray(breakpoints) ? breakpoints : [breakpoints];
+	bps.forEach((breakpoint, index) => {
+		const breakpointWidth =
+			passedProps.theme.globals.breakpoints[breakpoint] || breakpoint;
+		const breakpointQuery = `@media screen and (min-width: ${breakpointWidth})`;
+		rules[breakpointQuery] = getStylePropRules(
+			stylePropConfig,
+			passedProps,
+			index + 1
+		);
+	});
+
+	return rules;
+}
+
+/**
+ * Generates a style prop function that can be used directly in a styled
+ * component, e.g.
+ * ```
+ * const MyLink = styled.a`
+ *   ${myStyleProp}
+ * `
+ * ```
+ *
+ * @param {object[]} stylePropConfig - Style prop configuration objects
+ * @param {string} stylePropConfig[].styleProp - Name of the style prop
+ * @param {Array|Function} stylePropConfig[].properties - Array of the CSS properties
+ * to set, or a function to create such an array
+ * @param {Function} stylePropConfig[].getValue - Transforms the prop value into a
+ * valid CSS property value
+ */
+
+function createStyleFunction(stylePropConfig) {
+	return function styleFunction(props) {
+		checkTheme(props.theme);
+		const rules = getResponsiveRules(stylePropConfig, props);
+		return rules;
+	};
+}
+
+export {checkTheme, createStyleFunction};