Merge pull request #77 from sharvit/feature/page-layout

feat(Grid): Add the react-bootstrap grid system

src/components/Grid/Clearfix.js

@@ -0,0 +1 @@
+export { Clearfix as default } from 'react-bootstrap';

src/components/Grid/Col.js

@@ -0,0 +1 @@
+export { Col as default } from 'react-bootstrap';

src/components/Grid/Grid.js

@@ -0,0 +1 @@
+export { Grid as default } from 'react-bootstrap';

src/components/Grid/Grid.stories.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { Grid, Row, Col, Clearfix } from './index';
+
+const stories = storiesOf('Grid', module);
+stories.addDecorator(withKnobs);
+
+const description = (
+  <p>
+    This component is based on React Bootstrap Grid component. Grids are used to
+    structure and present data. See{' '}
+    <a href="https://react-bootstrap.github.io/components.html#grid">
+      React Bootstrap Docs
+    </a>{' '}
+    for complete Grid component documentation.
+  </p>
+);
+
+const dummySentences = [
+  'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+  'Donec hendrerit tempor tellus.',
+  'Donec pretium posuere tellus.',
+  'Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.',
+  'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+  'Nulla posuere.',
+  'Donec vitae dolor.',
+  'Nullam tristique diam non turpis.',
+  'Cras placerat accumsan nulla.',
+  'Nullam rutrum.',
+  'Nam vestibulum accumsan nisl.',
+];
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Grid',
+    description: description,
+  }),
+);
+
+stories.addWithInfo('Basic Grid', '', () => (
+  <Grid fluid={boolean('fluid', true)}>
+    <Row className="show-grid">
+      <Col xs={12} md={8}>
+        <code>&lt;{'Col xs={12} md={8}'} /&gt;</code>
+      </Col>
+      <Col xs={6} md={4}>
+        <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
+      </Col>
+    </Row>
+
+    <Row className="show-grid">
+      <Col xs={6} md={4}>
+        <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
+      </Col>
+      <Col xs={6} md={4}>
+        <code>&lt;{'Col xs={6} md={4}'} /&gt;</code>
+      </Col>
+      <Col xsHidden md={4}>
+        <code>&lt;{'Col xsHidden md={4}'} /&gt;</code>
+      </Col>
+    </Row>
+
+    <Row className="show-grid">
+      <Col xs={6} xsOffset={6}>
+        <code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code>
+      </Col>
+    </Row>
+
+    <Row className="show-grid">
+      <Col md={6} mdPush={6}>
+        <code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code>
+      </Col>
+      <Col md={6} mdPull={6}>
+        <code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code>
+      </Col>
+    </Row>
+  </Grid>
+));
+
+stories.addWithInfo('Clearfix', '', () => (
+  <Grid fluid={boolean('fluid', true)}>
+    <Row className="show-grid">
+      <Col sm={6} md={3}>
+        <code>&lt;{'Col sm={6} md={3}'} /&gt;</code>
+        <br />
+        {dummySentences.slice(0, 10).join(' ')}
+      </Col>
+      <Col sm={6} md={3}>
+        <code>&lt;{'Col sm={6} md={3}'} /&gt;</code>
+        <br />
+        {dummySentences.slice(0, 4).join(' ')}
+      </Col>
+      {boolean('ShowClearfix', true) && (
+        <Clearfix visibleSmBlock>
+          <code>&lt;{'Clearfix visibleSmBlock'} /&gt;</code>
+        </Clearfix>
+      )}
+      <Col sm={6} md={3}>
+        <code>&lt;{'Col sm={6} md={3}'} /&gt;</code>
+        <br />
+        {dummySentences.slice(0, 2).join(' ')}
+      </Col>
+      <Col sm={6} md={3}>
+        <code>&lt;{'Col sm={6} md={3}'} /&gt;</code>
+        <br />
+        {dummySentences.slice(0, 6).join(' ')}
+      </Col>
+    </Row>
+  </Grid>
+));

src/components/Grid/Row.js

@@ -0,0 +1 @@
+export { Row as default } from 'react-bootstrap';

src/components/Grid/index.js

@@ -0,0 +1,4 @@
+export { default as Grid } from './Grid';
+export { default as Row } from './Row';
+export { default as Col } from './Col';
+export { default as Clearfix } from './Clearfix';

src/components/ListView/ListView.stories.js

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col } from '../Grid';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
 

src/components/ListView/ListView.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col } from '../Grid';
 
 import { ListView } from './index';
 import {

src/index.js

@@ -4,6 +4,7 @@ export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/Dropdown';
 export * from './components/DropdownKebab';
+export * from './components/Grid';
 export * from './components/Icon';
 export * from './components/ListGroup';
 export * from './components/ListView';

storybook/less/base.less

@@ -6,6 +6,7 @@
 /**
   Third Party / Dependency LESS imports here
 */
+@import 'show-grid.less';
 
 /**
   Patternfly React Specific Extensions

storybook/less/show-grid.less

@@ -0,0 +1,12 @@
+.show-grid {
+    margin-bottom: 15px;
+
+    [class^=col-] {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background-color: #eee;
+        background-color: rgba(86,61,124,.15);
+        border: 1px solid #ddd;
+        border: 1px solid rgba(86,61,124,.2);
+    }
+}