diff --git a/doc/app/components/home/index.jsx b/doc/app/components/home/index.jsx index 674c0b0..8d1c725 100644 --- a/doc/app/components/home/index.jsx +++ b/doc/app/components/home/index.jsx @@ -8,6 +8,7 @@ import Section from '../section'; import Box from '../box'; import responsiveMD from './responsive'; +import responsiveHideMD from './responsiveHide'; import fluidMD from './fluid'; import offsetMD from './offset'; import autoWidthMD from './auto-width'; @@ -44,6 +45,25 @@ const Home = () => ( +
+

Medium and Large Only

+ + + + + + +

XS and Small Only

+ + + + + + + + + +
diff --git a/doc/app/components/home/responsiveHide.md b/doc/app/components/home/responsiveHide.md new file mode 100644 index 0000000..e964dd1 --- /dev/null +++ b/doc/app/components/home/responsiveHide.md @@ -0,0 +1,14 @@ +```jsx + + + + + + + + + + + + +``` diff --git a/package.json b/package.json index 444a5c8..822762a 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "expect": "^1.13.0", "express": "^4.13.3", "extract-text-webpack-plugin": "^0.8.2", - "flexboxgrid": "^6.3.0", + "flexboxgrid": "Zetoff/flexboxgrid#hidden-columns", "isparta": "^4.0.0", "jsdom": "^7.0.2", "karma": "^0.13.3", diff --git a/src/components/Col.js b/src/components/Col.js index f0bc2f8..bf5fedb 100644 --- a/src/components/Col.js +++ b/src/components/Col.js @@ -30,6 +30,13 @@ const classMap = { lgOffset: 'col-lg-offset' }; +const hiddenMap = { + xs: 'hidden-xs', + sm: 'hidden-sm', + md: 'hidden-md', + lg: 'hidden-lg', +}; + function getClassNames(props) { const extraClasses = []; @@ -43,7 +50,15 @@ function getClassNames(props) { return Object.keys(props) .filter(key => classMap[key]) - .map(key => style[Number.isInteger(props[key]) ? (classMap[key] + '-' + props[key]) : classMap[key]]) + .map(key => { + const colsAmount = props[key]; + if ( Number.isInteger(colsAmount) && colsAmount === 0 ) { + return style[hiddenMap[key]]; + } else if ( Number.isInteger(colsAmount) ) { + return style[`${classMap[key]}-${colsAmount}`]; + } + return style[classMap[key]]; + }) .concat(extraClasses) .join(' '); } diff --git a/test/components/Col.spec.js b/test/components/Col.spec.js index 1a681ee..6310df6 100644 --- a/test/components/Col.spec.js +++ b/test/components/Col.spec.js @@ -17,6 +17,17 @@ describe('Col', () => { expect(className).toContain(style['col-lg-4']); }); + it('Should hide elements when cols is 0', () => { + renderer.render(); + const { type, props: { className } } = renderer.getRenderOutput(); + expect(type).toBe('div'); + expect(className).toContain('hidden-xs'); + expect(className).toContain('hidden-sm'); + expect(className).toContain('hidden-md'); + expect(className).toContain('hidden-lg'); + }); + + it('Should add "reverse" class if "reverse" property is true', () => { renderer.render(); expect(renderer.getRenderOutput().props.className).toContain(style.reverse);