-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* (feat) Rail #181 * (feat) Rail #181 * (feat) Rail docs #181 * (fix) Sort Rail props #181 * (fix) Rail review fixes #181 * (fix) Rail review fixes #181 * (fix) Rail review fixes #181 * (fix) Rail sizes #181 * (fix) Rail sizes in docs #181 * fix(Grid) Initial of update to v1 API * fix(Grid) Classname fix * fix(Grid) First test * fix(Grid) More docs * feat(Grid) More docs * fix(Grid) More docs and prop fixes * fix(Grid) More docs * fix(Grid) More docs * fix(Grid) More docs * fix(Grid) More docs * fix(Grid) Tests * fix(Grid) Update aligned prop, introduce textAlign and verticalAlign * fix(Grid) Update columns prop * fix(Grid) Remove divider from docs * fix(Grid) Fixes in docs * fix(Grid) Fixes in JSDoc * fix(Grid) Fixes in JSDoc * fix(Grid) Fixes in tests * fix(Grid) Fixes in docs
- Loading branch information
1 parent
0c2edfb
commit d17b252
Showing
55 changed files
with
1,652 additions
and
157 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
docs/app/Examples/collections/Grid/Content/GridColumnsExample.js
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,20 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridColumnsExample = () => ( | ||
| <Grid> | ||
| <Grid.Row> | ||
| <Grid.Column width='eight'>{image}</Grid.Column> | ||
| <Grid.Column width={8}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column width='eight'>{image}</Grid.Column> | ||
| <Grid.Column width={8}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridColumnsExample |
21 changes: 21 additions & 0 deletions
21
docs/app/Examples/collections/Grid/Content/GridRowsExample.js
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,21 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridRowsExample = () => ( | ||
| <Grid columns={3}> | ||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridRowsExample |
74 changes: 74 additions & 0 deletions
74
docs/app/Examples/collections/Grid/ResponsiveVariations/GridDeviceVisibilityExample.js
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,74 @@ | ||
| import React from 'react' | ||
| import { Grid, Segment } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridDeviceVisibilityExample = () => ( | ||
| <Grid> | ||
| <Row columns={2} only='large screen'> | ||
| <Column> | ||
| <Segment>Large Screen</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Large Screen</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row columns={2} only='widescreen'> | ||
| <Column> | ||
| <Segment>Widescreen</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Widescreen</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row columns={2} only='mobile'> | ||
| <Column> | ||
| <Segment>Mobile</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Mobile</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row columns={3}> | ||
| <Column only='computer'> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column only='tablet mobile'> | ||
| <Segment>Tablet and Mobile</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>All Sizes</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>All Sizes</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row columns={4} only='computer'> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row only='tablet'> | ||
| <Column> | ||
| <Segment>Tablet</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Tablet</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Tablet</Segment> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridDeviceVisibilityExample |
17 changes: 17 additions & 0 deletions
17
docs/app/Examples/collections/Grid/ResponsiveVariations/GridDoublingExample.js
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,17 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
| const image = <Image src='http://semantic-ui.com/images/wireframe/image.png' /> | ||
|
|
||
| const GridDoublingExample = () => ( | ||
| <Grid doubling columns={5}> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridDoublingExample |
26 changes: 26 additions & 0 deletions
26
docs/app/Examples/collections/Grid/ResponsiveVariations/GridResponsiveWidthExamples.js
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,26 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridResponsiveWidthExamples = () => ( | ||
| <div> | ||
| <Grid> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile='sixteen' tablet='eight' computer='four'>{image}</Column> | ||
| </Grid> | ||
|
|
||
| <Grid> | ||
| <Column largeScreen={2} widescreen={1}>{image}</Column> | ||
| <Column largeScreen={2} widescreen={1}>{image}</Column> | ||
| <Column largeScreen='two' widescreen='one'>{image}</Column> | ||
| <Column largeScreen='two' widescreen='one'>{image}</Column> | ||
| </Grid> | ||
| </div> | ||
| ) | ||
|
|
||
| export default GridResponsiveWidthExamples |
23 changes: 23 additions & 0 deletions
23
docs/app/Examples/collections/Grid/ResponsiveVariations/GridReversedComputerExample.js
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,23 @@ | ||
| import React from 'react' | ||
| import { Grid } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridReversedComputerExample = () => ( | ||
| <Grid reversed='computer' columns='equal'> | ||
| <Row> | ||
| <Column>Computer A Fourth</Column> | ||
| <Column>Computer A Third</Column> | ||
| <Column>Computer A Second</Column> | ||
| <Column>Computer A First</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer B Fourth</Column> | ||
| <Column>Computer B Third</Column> | ||
| <Column>Computer B Second</Column> | ||
| <Column>Computer B First</Column> | ||
| </Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridReversedComputerExample |
23 changes: 23 additions & 0 deletions
23
...p/Examples/collections/Grid/ResponsiveVariations/GridReversedComputerVerticallyExample.js
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,23 @@ | ||
| import React from 'react' | ||
| import { Grid } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridReversedComputerVerticallyExample = () => ( | ||
| <Grid reversed='computer vertically'> | ||
| <Row> | ||
| <Column>Computer Row 4</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer Row 3</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer Row 2</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer Row 1</Column> | ||
| </Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridReversedComputerVerticallyExample |
15 changes: 15 additions & 0 deletions
15
docs/app/Examples/collections/Grid/ResponsiveVariations/GridReversedMobileExample.js
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,15 @@ | ||
| import React from 'react' | ||
| import { Grid } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
|
|
||
| const GridReversedMobileExample = () => ( | ||
| <Grid reversed='mobile' columns='equal'> | ||
| <Column>Mobile Fourth</Column> | ||
| <Column>Mobile Third</Column> | ||
| <Column>Mobile Second</Column> | ||
| <Column>Mobile First</Column> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridReversedMobileExample |
23 changes: 23 additions & 0 deletions
23
...app/Examples/collections/Grid/ResponsiveVariations/GridReversedMobileVerticallyExample.js
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,23 @@ | ||
| import React from 'react' | ||
| import { Grid } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridReversedMobileVerticallyExample = () => ( | ||
| <Grid reversed='mobile vertically'> | ||
| <Row> | ||
| <Column>Mobile Row 4</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Mobile Row 3</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Mobile Row 2</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Mobile Row 1</Column> | ||
| </Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridReversedMobileVerticallyExample |
15 changes: 15 additions & 0 deletions
15
docs/app/Examples/collections/Grid/ResponsiveVariations/GridReversedTabletExample.js
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,15 @@ | ||
| import React from 'react' | ||
| import { Grid } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
|
|
||
| const GridReversedTabletExample = () => ( | ||
| <Grid reversed='tablet' columns='equal'> | ||
| <Column>Tablet Fourth</Column> | ||
| <Column>Tablet Third</Column> | ||
| <Column>Tablet Second</Column> | ||
| <Column>Tablet First</Column> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridReversedTabletExample |
23 changes: 23 additions & 0 deletions
23
...app/Examples/collections/Grid/ResponsiveVariations/GridReversedTabletVerticallyExample.js
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,23 @@ | ||
| import React from 'react' | ||
| import { Grid } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridReversedTabletVerticallyExample = () => ( | ||
| <Grid reversed='tablet vertically'> | ||
| <Row> | ||
| <Column>Tablet Row 4</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Tablet Row 3</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Tablet Row 2</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Tablet Row 1</Column> | ||
| </Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridReversedTabletVerticallyExample |
18 changes: 18 additions & 0 deletions
18
docs/app/Examples/collections/Grid/ResponsiveVariations/GridStackableExample.js
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,18 @@ | ||
| import React from 'react' | ||
| import { Image, Grid, Segment } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridStackableExample = () => ( | ||
| <Grid stackable columns={2}> | ||
| <Column> | ||
| <Segment>{image}</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>{image}</Segment> | ||
| </Column> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridStackableExample |
23 changes: 23 additions & 0 deletions
23
docs/app/Examples/collections/Grid/Types/GridCelledExample.js
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,23 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/image.png' /> | ||
|
|
||
| const GridCelledExample = () => ( | ||
| <Grid celled> | ||
| <Grid.Row> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| <Grid.Column width='thirteen'> | ||
| <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' /> | ||
| </Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| <Grid.Column width='ten'><Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /></Grid.Column> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridCelledExample |
22 changes: 22 additions & 0 deletions
22
docs/app/Examples/collections/Grid/Types/GridDividedNumberExample.js
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,22 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' /> | ||
|
|
||
| const GridDividedExample = () => ( | ||
| <Grid columns={3} divided> | ||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridDividedExample |
22 changes: 22 additions & 0 deletions
22
docs/app/Examples/collections/Grid/Types/GridDividedPhraseExample.js
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,22 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' /> | ||
|
|
||
| const GridDividedExample = () => ( | ||
| <Grid columns='three' divided> | ||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridDividedExample |
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,15 @@ | ||
| import _ from 'lodash' | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const columns = _.times(16, (i) => ( | ||
| <Grid.Column key={i}> | ||
| <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' /> | ||
| </Grid.Column> | ||
| )) | ||
|
|
||
| const GridExample = () => ( | ||
| <Grid>{columns}</Grid> | ||
| ) | ||
|
|
||
| export default GridExample |
Oops, something went wrong.