Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Grid to v1 API #351

Merged
merged 34 commits into from
Aug 4, 2016
Merged

Update Grid to v1 API #351

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
95cfe48
(feat) Rail #181
Jul 12, 2016
d2cfef8
(feat) Rail #181
Jul 12, 2016
97aac53
(feat) Rail docs #181
Jul 14, 2016
d9c324b
(fix) Sort Rail props #181
Jul 14, 2016
8f7c2e5
Merge branch 'master' of https://github.com/TechnologyAdvice/stardust…
Jul 14, 2016
7db8305
(fix) Rail review fixes #181
Jul 14, 2016
bd296b5
(fix) Rail review fixes #181
layershifter Jul 14, 2016
c3682a0
(fix) Rail review fixes #181
layershifter Jul 14, 2016
d74e4f6
(fix) Rail sizes #181
layershifter Jul 14, 2016
3127c4a
(fix) Rail sizes in docs #181
layershifter Jul 14, 2016
6e0f10d
Merge branch 'master' of https://github.com/TechnologyAdvice/stardust
layershifter Jul 20, 2016
1ecea26
fix(Grid) Initial of update to v1 API
Jul 27, 2016
649c589
fix(Grid) Classname fix
Jul 27, 2016
7c405c2
Merge branch 'master' of https://github.com/TechnologyAdvice/stardust
layershifter Jul 27, 2016
bf14a62
Merge branch 'fix/grid' of https://github.com/layershifter/stardust i…
layershifter Jul 27, 2016
12f38a4
fix(Grid) First test
layershifter Jul 27, 2016
1a15d25
fix(Grid) More docs
Jul 28, 2016
4ef4316
feat(Grid) More docs
layershifter Jul 28, 2016
1011325
fix(Grid) More docs and prop fixes
Jul 29, 2016
94c0e2a
fix(Grid) More docs
Jul 29, 2016
f0b469d
fix(Grid) More docs
Jul 29, 2016
626c4e9
fix(Grid) More docs
Aug 1, 2016
4519061
fix(Grid) More docs
layershifter Aug 1, 2016
7b4530f
fix(Grid) Tests
Aug 2, 2016
1fa1ebc
fix(Grid) Update aligned prop, introduce textAlign and verticalAlign
Aug 3, 2016
283b959
fix(Grid) Update columns prop
Aug 3, 2016
f162c54
fix(Grid) Remove divider from docs
Aug 3, 2016
76d141a
fix(Grid) Fixes in docs
layershifter Aug 3, 2016
03e28da
fix(Grid) Fixes in JSDoc
layershifter Aug 3, 2016
bca95f9
fix(Grid) Fixes in JSDoc
layershifter Aug 3, 2016
b0f0bfb
fix(Grid) Fixes in tests
layershifter Aug 3, 2016
0b5345a
fix(Grid) Fixes in docs
layershifter Aug 3, 2016
a077c1e
Merge branch 'master' of https://github.com/TechnologyAdvice/stardust…
Aug 4, 2016
04285f3
Merge branch 'master' of https://github.com/TechnologyAdvice/stardust…
layershifter Aug 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/app/Examples/collections/Grid/Content/GridColumnsExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/Content/GridRowsExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridDeviceVisibilityExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridDoublingExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridResponsiveWidthExamples.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridReversedComputerExample.js
View file
Open in desktop
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 ...p/Examples/collections/Grid/ResponsiveVariations/GridReversedComputerVerticallyExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridReversedMobileExample.js
View file
Open in desktop
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 ...app/Examples/collections/Grid/ResponsiveVariations/GridReversedMobileVerticallyExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridReversedTabletExample.js
View file
Open in desktop
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 ...app/Examples/collections/Grid/ResponsiveVariations/GridReversedTabletVerticallyExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/ResponsiveVariations/GridStackableExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/Types/GridCelledExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/Types/GridDividedNumberExample.js
View file
Open in desktop
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 docs/app/Examples/collections/Grid/Types/GridDividedPhraseExample.js
View file
Open in desktop
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
15 changes: 15 additions & 0 deletions docs/app/Examples/collections/Grid/Types/GridExample.js
View file
Open in desktop
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
Loading