Fix: display override when setting display and width props (xs, sm etc)

src/components/Col/Col.js

@@ -38,6 +38,7 @@ Col.defaultProps = {
   flex: '0 0 auto',
 };
 
+const displayOptions = ['flex', 'inline-flex', 'block', 'none', 'inline-block'];
 export const alignSelfOptions = ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
 
 Col.propTypes = {
@@ -96,7 +97,15 @@ Col.propTypes = {
     PropTypes.string,
   ]),
 
-  display: PropTypes.string,
+  display: PropTypes.oneOfType([
+    PropTypes.oneOf(displayOptions),
+    PropTypes.shape({
+      xs: PropTypes.oneOf(displayOptions),
+      sm: PropTypes.oneOf(displayOptions),
+      md: PropTypes.oneOf(displayOptions),
+      lg: PropTypes.oneOf(displayOptions),
+    }),
+  ]),
 
   children: PropTypes.node,
 };

src/components/Col/Col.spec.js

@@ -26,6 +26,22 @@ describe('style rendering', () => {
     expect(tree).toHaveStyleRule('order', '2');
     expect(tree).toHaveStyleRule('align-self', 'flex-start');
   });
+
+  test('should render display to flex', () => {
+    const tree = renderer.create(<Col xs={2} display="flex" />).toJSON();
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('display', 'flex');
+  });
+
+  test('should render propper display none on xs and flex on sm', () => {
+    const tree = renderer.create(<Col xs="hidden" sm={1} display="flex" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('should render propper display none on xs, block on sm and flex on md', () => {
+    const tree = renderer.create(<Col xs="hidden" sm={1} display={{ md: 'flex' }} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('Create element', () => {

src/components/Col/__snapshots__/Col.spec.js.snap

@@ -55,3 +55,150 @@ exports[`style rendering renders corrects 1`] = `
   </Component>
 </Col>
 `;
+
+exports[`style rendering should render display to flex 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: calc(0.5rem / 2);
+  padding-right: calc(0.5rem / 2);
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-flex-basis: 16.666666666666664%;
+  -ms-flex-basis: 16.666666666666664%;
+  flex-basis: 16.666666666666664%;
+  max-width: 16.666666666666664%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@media (min-width: 30rem) {
+  .c0 {
+    padding-left: calc(0.5rem / 2);
+    padding-right: calc(0.5rem / 2);
+  }
+}
+
+@media (min-width: 48rem) {
+  .c0 {
+    padding-left: calc(1rem / 2);
+    padding-right: calc(1rem / 2);
+  }
+}
+
+@media (min-width: 60rem) {
+  .c0 {
+    padding-left: calc(1rem / 2);
+    padding-right: calc(1rem / 2);
+  }
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`style rendering should render propper display none on xs and flex on sm 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: calc(0.5rem / 2);
+  padding-right: calc(0.5rem / 2);
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  display: none;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+}
+
+@media (min-width: 30rem) {
+  .c0 {
+    padding-left: calc(0.5rem / 2);
+    padding-right: calc(0.5rem / 2);
+    -webkit-flex-basis: 8.333333333333332%;
+    -ms-flex-basis: 8.333333333333332%;
+    flex-basis: 8.333333333333332%;
+    max-width: 8.333333333333332%;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+@media (min-width: 48rem) {
+  .c0 {
+    padding-left: calc(1rem / 2);
+    padding-right: calc(1rem / 2);
+  }
+}
+
+@media (min-width: 60rem) {
+  .c0 {
+    padding-left: calc(1rem / 2);
+    padding-right: calc(1rem / 2);
+  }
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`style rendering should render propper display none on xs, block on sm and flex on md 1`] = `
+.c0 {
+  box-sizing: border-box;
+  padding-left: calc(0.5rem / 2);
+  padding-right: calc(0.5rem / 2);
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  display: none;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+}
+
+@media (min-width: 30rem) {
+  .c0 {
+    padding-left: calc(0.5rem / 2);
+    padding-right: calc(0.5rem / 2);
+    -webkit-flex-basis: 8.333333333333332%;
+    -ms-flex-basis: 8.333333333333332%;
+    flex-basis: 8.333333333333332%;
+    max-width: 8.333333333333332%;
+    display: block;
+  }
+}
+
+@media (min-width: 48rem) {
+  .c0 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding-left: calc(1rem / 2);
+    padding-right: calc(1rem / 2);
+  }
+}
+
+@media (min-width: 60rem) {
+  .c0 {
+    padding-left: calc(1rem / 2);
+    padding-right: calc(1rem / 2);
+  }
+}
+
+<div
+  className="c0"
+/>
+`;

src/helpers/columnWidth/columnWidth.js

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 import has from 'lodash/has';
+import isString from 'lodash/isString';
 
 import { themeProvider } from '../../theme';
 
@@ -8,6 +9,14 @@ const { theme } = themeProvider;
 export const percentage = (props, breakpoint) =>
   (Math.abs(props[breakpoint]) / theme(props).columns) * 100;
 
+export const display = (props, breakpoint) => {
+  if ((props.display && isString(props.display))) {
+    return css`display: ${props.display}`;
+  }
+
+  return !has(props.display, `${breakpoint}`) ? css`display: block` : null;
+};
+
 export const isHidden = (props, breakpoint) =>
   (props[breakpoint] === 0 || props[breakpoint] === 'hidden');
 
@@ -32,7 +41,7 @@ const columnWidth = (props, breakpoint) => {
   return has(props, `${breakpoint}`) ? css`
     flex-basis: ${width}%;
     max-width: ${width}%;
-    display: block;
+    ${display(props, breakpoint)}
   ` : null;
 };
 export default columnWidth;

src/helpers/columnWidth/columnWidth.spec.js

@@ -1,4 +1,4 @@
-import columnWidth, { percentage, isHidden, isAuto } from './columnWidth';
+import columnWidth, { percentage, isHidden, isAuto, display } from './columnWidth';
 
 const mockProps = { xs: -1, sm: 2, md: 0, lg: 6 };
 
@@ -32,6 +32,28 @@ describe('isAuto', () => {
   });
 });
 
+describe('display', () => {
+  test('should return block if no display is set', () => {
+    const value = display(mockProps, 'lg').join('');
+    expect(value).toContain('display: block');
+  });
+
+  test('should return display prop if set as string', () => {
+    const value = display({ sm: 1, display: 'flex' }, 'sm').join('');
+    expect(value).toContain('display: flex');
+  });
+
+  test('should return null prop if display is set to current breakpoint', () => {
+    const value = display({ sm: 1, display: { sm: 'flex' } }, 'sm');
+    expect(value).toEqual(null);
+  });
+
+  test('should return display prop if display does not have matching breakpoint', () => {
+    const value = display({ sm: 1, display: { md: 'flex' } }, 'sm').join('');
+    expect(value).toContain('display: block');
+  });
+});
+
 describe('columnWidth', () => {
   test('should generate column width css', () => {
     const width = columnWidth(mockProps, 'sm').join('');
@@ -44,6 +66,18 @@ describe('columnWidth', () => {
     expect(width).toEqual(null);
   });
 
+  test('should not return display:block', () => {
+    const displayProps = { xs: 1, display: 'flex' };
+    const width = columnWidth(displayProps, 'xs');
+    expect(width).not.toContain('display: block');
+  });
+
+  test('should only return display:block if display has not alreayd been set', () => {
+    const displayProps = { xs: 1 };
+    const width = columnWidth(displayProps, 'xs');
+    expect(width).toContain('display: block');
+  });
+
   test('should return "display:none" if breakpoint is explicity set to 0', () => {
     const width = columnWidth(mockProps, 'md').join('');
     expect(width).toContain('display: none');