Hidden columns

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 = () => (
  <Markdown html = {responsiveMD} />
  </Row>
  </Section>
+ <Section title = "Hidden" description = "Set column size option to 0 to hide the contents of a column">
+ <h3><code>Medium and Large Only</code></h3>
+ <Row>
+ <Box type="row" xs={0} sm={0} md={2} lg={9} />
+ <Box type="row" xs={0} sm={0} md={2} lg={1} />
+ <Box type="row" xs={0} sm={0} md={4} lg={1} />
+ <Box type="row" xs={0} sm={0} md={4} lg={1} />
+ </Row>
+ <h3><code>XS and Small Only</code></h3>
+ <Row>
+ <Box type="row" xs={2} sm={1} md={0} lg={0} />
+ <Box type="row" xs={4} sm={1} md={0} lg={0} />
+ <Box type="row" xs={4} sm={9} md={0} lg={0} />
+ <Box type="row" xs={2} sm={1} md={0} lg={0} />
+ </Row>
+ <Row>
+ <Markdown html = {responsiveHideMD} />
+ </Row>
+ </Section>
  <Section title = "Fluid" description = "Percent based width allow fluid resizing of columns and rows.">
  <Row>
  <Box type="row" xs={12} sm={3} md={2} lg={1} />

doc/app/components/home/responsiveHide.md

@@ -0,0 +1,14 @@
+```jsx
+<Row>
+ <Col xs={0} sm={0} md={2} lg={9} />
+ <Col xs={0} sm={0} md={2} lg={1} />
+ <Col xs={0} sm={0} md={4} lg={1} />
+ <Col xs={0} sm={0} md={4} lg={1} />
+</Row>
+<Row>
+ <Col xs={2} sm={1} md={0} lg={0} />
+ <Col xs={4} sm={1} md={0} lg={0} />
+ <Col xs={4} sm={9} md={0} lg={0} />
+ <Col xs={2} sm={1} md={0} lg={0} />
+</Row>
+```

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",

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(' ');
 }

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(<Col xs={0} sm={0} md={0} lg={0} />);
+ 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(<Col reverse/>);
  expect(renderer.getRenderOutput().props.className).toContain(style.reverse);