-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
Feature/divider component #103
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
09ce496
add folder and files
kyleturco 4ed51a7
code cleanup, add divider to index
kyleturco 2207e56
code cleanup, finish component
kyleturco ca75209
add divider examples
kyleturco 57f8db3
update vertical example
kyleturco 874bcc5
fix typos
kyleturco e57d51f
add grid and column, fix typos
kyleturco File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,14 @@ | ||
import React, {Component} from 'react'; | ||
import DividerTypesExamples from './Types/DividerTypesExamples'; | ||
import DividerVariationsExamples from './Variations/DividerVariationsExamples'; | ||
|
||
export default class DividerExamples extends Component { | ||
render() { | ||
return ( | ||
<div> | ||
<DividerTypesExamples /> | ||
<DividerVariationsExamples /> | ||
</div> | ||
); | ||
} | ||
} |
10 changes: 10 additions & 0 deletions
10
docs/app/Examples/elements/Divider/Types/DividerDividerExample.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,10 @@ | ||
import React, {Component} from 'react'; | ||
import {Divider} from 'stardust'; | ||
|
||
export default class DividerDividerExample extends Component { | ||
render() { | ||
return ( | ||
<Divider /> | ||
); | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.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,14 @@ | ||
import React, {Component} from 'react'; | ||
import {Segment, Button, Divider} from 'stardust'; | ||
|
||
export default class DividerHorizontalExample extends Component { | ||
render() { | ||
return ( | ||
<Segment className='padded'> | ||
<Button className='primary fluid'>Login</Button> | ||
<Divider className='large horizontal'>Or</Divider> | ||
<Button className='secondary fluid'>Sign Up Now</Button> | ||
</Segment> | ||
); | ||
} | ||
} |
27 changes: 27 additions & 0 deletions
27
docs/app/Examples/elements/Divider/Types/DividerTypesExamples.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,27 @@ | ||
import React, {Component} from 'react'; | ||
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'; | ||
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'; | ||
|
||
export default class DividerTypesExamples extends Component { | ||
render() { | ||
return ( | ||
<ExampleSection title='Types'> | ||
<ComponentExample | ||
title='Divider' | ||
description='A standard divider' | ||
examplePath='elements/Divider/Types/DividerDividerExample' | ||
/> | ||
<ComponentExample | ||
title='Vertical Divider' | ||
description='A divider can segment content vertically' | ||
examplePath='elements/Divider/Types/DividerVerticalExample' | ||
/> | ||
<ComponentExample | ||
title='Horizontal Divider' | ||
description='A divider can segement content horizontally' | ||
examplePath='elements/Divider/Types/DividerHorizontalExample' | ||
/> | ||
</ExampleSection> | ||
); | ||
} | ||
} |
28 changes: 28 additions & 0 deletions
28
docs/app/Examples/elements/Divider/Types/DividerVerticalExample.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,28 @@ | ||
import React, {Component} from 'react'; | ||
import {Grid, Column, Segment, Divider} from 'stardust'; | ||
|
||
export default class DividerVerticalExample extends Component { | ||
render() { | ||
return ( | ||
<Grid className='three column relaxed'> | ||
<Column> | ||
<Segment className='basic'> | ||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. | ||
</Segment> | ||
</Column> | ||
<Divider className='vertical'>Or</Divider> | ||
<Column> | ||
<Segment className='basic'> | ||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. | ||
</Segment> | ||
</Column> | ||
<Divider className='vertical'>And</Divider> | ||
<Column> | ||
<Segment className='basic'> | ||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. | ||
</Segment> | ||
</Column> | ||
</Grid> | ||
); | ||
} | ||
} | ||
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/elements/Divider/Variations/DividerClearingExample.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,14 @@ | ||
import React, {Component} from 'react'; | ||
import {Segment, Button, Divider} from 'stardust'; | ||
|
||
export default class DividerClearingExample extends Component { | ||
render() { | ||
return ( | ||
<Segment> | ||
<Button className='right floated'>Floated Button</Button> | ||
<Divider className='clearing' /> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
</Segment> | ||
); | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/elements/Divider/Variations/DividerFittedExample.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,14 @@ | ||
import React, {Component} from 'react'; | ||
import {Segment, Divider} from 'stardust'; | ||
|
||
export default class DividerFittedExample extends Component { | ||
render() { | ||
return ( | ||
<Segment> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
<Divider className='fitted' /> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
</Segment> | ||
); | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.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,14 @@ | ||
import React, {Component} from 'react'; | ||
import {Segment, Divider} from 'stardust'; | ||
|
||
export default class DividerHiddenExample extends Component { | ||
render() { | ||
return ( | ||
<Segment> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
<Divider className='hidden' /> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
</Segment> | ||
); | ||
} | ||
} |
13 changes: 13 additions & 0 deletions
13
docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.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,13 @@ | ||
import React, {Component} from 'react'; | ||
import {Segment, Divider} from 'stardust'; | ||
|
||
export default class DividerInvertedExample extends Component { | ||
render() { | ||
return ( | ||
<Segment className='inverted'> | ||
<Divider className='inverted' /> | ||
<Divider className='horizontal inverted'>Horizontal</Divider> | ||
</Segment> | ||
); | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/elements/Divider/Variations/DividerSectionExample.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,14 @@ | ||
import React, {Component} from 'react'; | ||
import {Segment, Divider} from 'stardust'; | ||
|
||
export default class DividerSectionExample extends Component { | ||
render() { | ||
return ( | ||
<Segment> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
<Divider className='section' /> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore... | ||
</Segment> | ||
); | ||
} | ||
} |
37 changes: 37 additions & 0 deletions
37
docs/app/Examples/elements/Divider/Variations/DividerVariationsExamples.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,37 @@ | ||
import React, {Component} from 'react'; | ||
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'; | ||
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'; | ||
|
||
export default class DividerVariationsExamples extends Component { | ||
render() { | ||
return ( | ||
<ExampleSection title='Types'> | ||
<ComponentExample | ||
title='Inverted' | ||
description='A divider can have its colors inverted' | ||
examplePath='elements/Divider/Variations/DividerInvertedExample' | ||
/> | ||
<ComponentExample | ||
title='Fitted' | ||
description='A divider can be fitted, without any space above or below it' | ||
examplePath='elements/Divider/Variations/DividerFittedExample' | ||
/> | ||
<ComponentExample | ||
title='Hidden' | ||
description='A hidden divider divides content without creating a dividing line' | ||
examplePath='elements/Divider/Variations/DividerHiddenExample' | ||
/> | ||
<ComponentExample | ||
title='Section' | ||
description='A divider can provide greater margins to divide sections of content' | ||
examplePath='elements/Divider/Variations/DividerSectionExample' | ||
/> | ||
<ComponentExample | ||
title='Clearing' | ||
description='A divider can clear the contents above it' | ||
examplePath='elements/Divider/Variations/DividerClearingExample' | ||
/> | ||
</ExampleSection> | ||
); | ||
} | ||
} |
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,30 @@ | ||
import React, {Component, PropTypes} from 'react'; | ||
import classNames from 'classnames'; | ||
import META from 'src/utils/Meta'; | ||
|
||
export default class Divider extends Component { | ||
static propTypes = { | ||
children: PropTypes.node, | ||
className: PropTypes.string, | ||
}; | ||
|
||
static _meta = { | ||
library: META.library.semanticUI, | ||
name: 'Divider', | ||
type: META.type.element, | ||
}; | ||
|
||
render() { | ||
const classes = classNames( | ||
'sd-divider', | ||
'ui', | ||
this.props.className, | ||
'divider' | ||
); | ||
return ( | ||
<div {...this.props} className={classes}> | ||
{this.props.children} | ||
</div> | ||
); | ||
} | ||
} |
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does SD have a
<Column>
component? I used regular<div>
and set the className to column in this example. We do need the columns though to get the proper formatting to show the vertical dividersThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oops, comments on this above before seeing your comment. Yep, just add
Grid, Column
to the import from stardust. Like other components, they include all the necessary base classes so you only need to add modifier classes (likethree column relaxed
to the<Grid />
).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Roger that, both
Column
andGrid
work 👍