Skip to content

Commit

Permalink
feat(Grid): Add the react-bootstrap grid system
Browse files Browse the repository at this point in the history
Add the react-bootstrap grid components to patternfly-react (Grid, Row, Col, Clearfix)
  • Loading branch information
Avi Sharvit authored and sharvit committed Dec 6, 2017
1 parent 803fc66 commit b1bc843
Show file tree
Hide file tree
Showing 11 changed files with 136 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/components/Grid/Clearfix.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Clearfix as default } from 'react-bootstrap';
1 change: 1 addition & 0 deletions src/components/Grid/Col.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Col as default } from 'react-bootstrap';
1 change: 1 addition & 0 deletions src/components/Grid/Grid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Grid as default } from 'react-bootstrap';
112 changes: 112 additions & 0 deletions src/components/Grid/Grid.stories.js
Original file line number Diff line number Diff line change
@@ -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>
));
1 change: 1 addition & 0 deletions src/components/Grid/Row.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Row as default } from 'react-bootstrap';
4 changes: 4 additions & 0 deletions src/components/Grid/index.js
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 1 addition & 1 deletion src/components/ListView/ListView.stories.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion src/components/ListView/ListView.test.js
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions storybook/less/base.less
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/**
Third Party / Dependency LESS imports here
*/
@import 'show-grid.less';

/**
Patternfly React Specific Extensions
Expand Down
12 changes: 12 additions & 0 deletions storybook/less/show-grid.less
Original file line number Diff line number Diff line change
@@ -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);
}
}

0 comments on commit b1bc843

Please sign in to comment.