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);