-
Notifications
You must be signed in to change notification settings - Fork 355
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Grid): Add the react-bootstrap grid system
Add the react-bootstrap grid components to patternfly-react (Grid, Row, Col, Clearfix)
- Loading branch information
Showing
11 changed files
with
136 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Clearfix as default } from 'react-bootstrap'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Col as default } from 'react-bootstrap'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Grid as default } from 'react-bootstrap'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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><{'Col xs={12} md={8}'} /></code> | ||
</Col> | ||
<Col xs={6} md={4}> | ||
<code><{'Col xs={6} md={4}'} /></code> | ||
</Col> | ||
</Row> | ||
|
||
<Row className="show-grid"> | ||
<Col xs={6} md={4}> | ||
<code><{'Col xs={6} md={4}'} /></code> | ||
</Col> | ||
<Col xs={6} md={4}> | ||
<code><{'Col xs={6} md={4}'} /></code> | ||
</Col> | ||
<Col xsHidden md={4}> | ||
<code><{'Col xsHidden md={4}'} /></code> | ||
</Col> | ||
</Row> | ||
|
||
<Row className="show-grid"> | ||
<Col xs={6} xsOffset={6}> | ||
<code><{'Col xs={6} xsOffset={6}'} /></code> | ||
</Col> | ||
</Row> | ||
|
||
<Row className="show-grid"> | ||
<Col md={6} mdPush={6}> | ||
<code><{'Col md={6} mdPush={6}'} /></code> | ||
</Col> | ||
<Col md={6} mdPull={6}> | ||
<code><{'Col md={6} mdPull={6}'} /></code> | ||
</Col> | ||
</Row> | ||
</Grid> | ||
)); | ||
|
||
stories.addWithInfo('Clearfix', '', () => ( | ||
<Grid fluid={boolean('fluid', true)}> | ||
<Row className="show-grid"> | ||
<Col sm={6} md={3}> | ||
<code><{'Col sm={6} md={3}'} /></code> | ||
<br /> | ||
{dummySentences.slice(0, 10).join(' ')} | ||
</Col> | ||
<Col sm={6} md={3}> | ||
<code><{'Col sm={6} md={3}'} /></code> | ||
<br /> | ||
{dummySentences.slice(0, 4).join(' ')} | ||
</Col> | ||
{boolean('ShowClearfix', true) && ( | ||
<Clearfix visibleSmBlock> | ||
<code><{'Clearfix visibleSmBlock'} /></code> | ||
</Clearfix> | ||
)} | ||
<Col sm={6} md={3}> | ||
<code><{'Col sm={6} md={3}'} /></code> | ||
<br /> | ||
{dummySentences.slice(0, 2).join(' ')} | ||
</Col> | ||
<Col sm={6} md={3}> | ||
<code><{'Col sm={6} md={3}'} /></code> | ||
<br /> | ||
{dummySentences.slice(0, 6).join(' ')} | ||
</Col> | ||
</Row> | ||
</Grid> | ||
)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Row as default } from 'react-bootstrap'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} |