From b1bc84341c54fff705df97dc2d8960b6d1db4fd9 Mon Sep 17 00:00:00 2001 From: Avi Sharvit Date: Thu, 16 Nov 2017 16:28:55 +0200 Subject: [PATCH] feat(Grid): Add the react-bootstrap grid system Add the react-bootstrap grid components to patternfly-react (Grid, Row, Col, Clearfix) --- src/components/Grid/Clearfix.js | 1 + src/components/Grid/Col.js | 1 + src/components/Grid/Grid.js | 1 + src/components/Grid/Grid.stories.js | 112 ++++++++++++++++++++ src/components/Grid/Row.js | 1 + src/components/Grid/index.js | 4 + src/components/ListView/ListView.stories.js | 2 +- src/components/ListView/ListView.test.js | 2 +- src/index.js | 1 + storybook/less/base.less | 1 + storybook/less/show-grid.less | 12 +++ 11 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 src/components/Grid/Clearfix.js create mode 100644 src/components/Grid/Col.js create mode 100644 src/components/Grid/Grid.js create mode 100644 src/components/Grid/Grid.stories.js create mode 100644 src/components/Grid/Row.js create mode 100644 src/components/Grid/index.js create mode 100644 storybook/less/show-grid.less diff --git a/src/components/Grid/Clearfix.js b/src/components/Grid/Clearfix.js new file mode 100644 index 00000000000..5e1f4a7dadb --- /dev/null +++ b/src/components/Grid/Clearfix.js @@ -0,0 +1 @@ +export { Clearfix as default } from 'react-bootstrap'; diff --git a/src/components/Grid/Col.js b/src/components/Grid/Col.js new file mode 100644 index 00000000000..cb4f8d07c6b --- /dev/null +++ b/src/components/Grid/Col.js @@ -0,0 +1 @@ +export { Col as default } from 'react-bootstrap'; diff --git a/src/components/Grid/Grid.js b/src/components/Grid/Grid.js new file mode 100644 index 00000000000..3351375e303 --- /dev/null +++ b/src/components/Grid/Grid.js @@ -0,0 +1 @@ +export { Grid as default } from 'react-bootstrap'; diff --git a/src/components/Grid/Grid.stories.js b/src/components/Grid/Grid.stories.js new file mode 100644 index 00000000000..87e8d2c4688 --- /dev/null +++ b/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 = ( +

+ This component is based on React Bootstrap Grid component. Grids are used to + structure and present data. See{' '} + + React Bootstrap Docs + {' '} + for complete Grid component documentation. +

+); + +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', '', () => ( + + + + <{'Col xs={12} md={8}'} /> + + + <{'Col xs={6} md={4}'} /> + + + + + + <{'Col xs={6} md={4}'} /> + + + <{'Col xs={6} md={4}'} /> + + + <{'Col xsHidden md={4}'} /> + + + + + + <{'Col xs={6} xsOffset={6}'} /> + + + + + + <{'Col md={6} mdPush={6}'} /> + + + <{'Col md={6} mdPull={6}'} /> + + + +)); + +stories.addWithInfo('Clearfix', '', () => ( + + + + <{'Col sm={6} md={3}'} /> +
+ {dummySentences.slice(0, 10).join(' ')} + + + <{'Col sm={6} md={3}'} /> +
+ {dummySentences.slice(0, 4).join(' ')} + + {boolean('ShowClearfix', true) && ( + + <{'Clearfix visibleSmBlock'} /> + + )} + + <{'Col sm={6} md={3}'} /> +
+ {dummySentences.slice(0, 2).join(' ')} + + + <{'Col sm={6} md={3}'} /> +
+ {dummySentences.slice(0, 6).join(' ')} + + + +)); diff --git a/src/components/Grid/Row.js b/src/components/Grid/Row.js new file mode 100644 index 00000000000..1df2bad882e --- /dev/null +++ b/src/components/Grid/Row.js @@ -0,0 +1 @@ +export { Row as default } from 'react-bootstrap'; diff --git a/src/components/Grid/index.js b/src/components/Grid/index.js new file mode 100644 index 00000000000..5725a8088fb --- /dev/null +++ b/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'; diff --git a/src/components/ListView/ListView.stories.js b/src/components/ListView/ListView.stories.js index 371940029eb..3fb21c3850d 100644 --- a/src/components/ListView/ListView.stories.js +++ b/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'; diff --git a/src/components/ListView/ListView.test.js b/src/components/ListView/ListView.test.js index 511532e5a3e..a180d3664c0 100644 --- a/src/components/ListView/ListView.test.js +++ b/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 { diff --git a/src/index.js b/src/index.js index 4b23e3586f5..e41a0fd8f69 100644 --- a/src/index.js +++ b/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'; diff --git a/storybook/less/base.less b/storybook/less/base.less index 9530fa6db53..6ea7d890db9 100644 --- a/storybook/less/base.less +++ b/storybook/less/base.less @@ -6,6 +6,7 @@ /** Third Party / Dependency LESS imports here */ +@import 'show-grid.less'; /** Patternfly React Specific Extensions diff --git a/storybook/less/show-grid.less b/storybook/less/show-grid.less new file mode 100644 index 00000000000..672dabd7b9d --- /dev/null +++ b/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); + } +}