forked from Semantic-Org/Semantic-UI-React
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Breadcrumb component (Semantic-Org#321)
* Breadcrumb component * Breadcrumb.Section Semantic-Org#321 * Breadcrumb.Section Semantic-Org#321 * README.md update Semantic-Org#321 * (refactor) Breadcrumb.Section Semantic-Org#321 * (fix) Breadcrumb.Section test Semantic-Org#321 * (fix) Breadcrumb.Section Semantic-Org#321 * (fix) Breadcrumb.Section Semantic-Org#321 * (feat) Breadcrumb.Section Semantic-Org#321 * (fix) Breadcrumb.Divider Semantic-Org#321 * (feat) Breadcrumb Semantic-Org#321 * (fix) Breadcrumb.Section test Semantic-Org#321 * (fix) Breadcrumb.Section test Semantic-Org#321 * (fix) Breadcrumb Semantic-Org#321 * (feat) Breadcrumb Semantic-Org#321 * (fix) Breadcrumb key Semantic-Org#321 * (feat) Breadcrumb test Semantic-Org#321 * (feat) Breadcrumb tests Semantic-Org#321 * (feat) Breadcrumb docs Semantic-Org#321 * (fix) Breadcrumb docs Semantic-Org#321 * (fix) Breadcrumb Semantic-Org#321 * (fix) Breadcrumb docs * (fix) Breadcrumb * (Breadcrumb) Test update
- Loading branch information
1 parent
ce9d0f3
commit b1ff4a7
Showing
26 changed files
with
635 additions
and
1 deletion.
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
62 changes: 62 additions & 0 deletions
62
docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.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,62 @@ | ||
import React, { Component } from 'react' | ||
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' | ||
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' | ||
|
||
export default class BreadcrumbExamples extends Component { | ||
render() { | ||
return ( | ||
<div> | ||
<ExampleSection title='Types'> | ||
<ComponentExample | ||
title='Breadcrumb' | ||
description='A standard breadcrumb' | ||
examplePath='collections/Breadcrumb/Types/BreadcrumbExample' | ||
/> | ||
<ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbDividerExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbPropExample' /> | ||
</ExampleSection> | ||
|
||
<ExampleSection title='Content'> | ||
<ComponentExample | ||
title='Divider' | ||
description={[ | ||
'A breadcrumb can contain a divider to show the relationship between sections,', | ||
'this can be formatted as an icon or text.', | ||
].join(' ')} | ||
examplePath='collections/Breadcrumb/Content/BreadcrumbDividerExample' | ||
/> | ||
<ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbDividerPropExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbIconDividerExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample' /> | ||
|
||
<ComponentExample | ||
title='Section' | ||
description='A breadcrumb can contain sections that can either be formatted as a link or text' | ||
examplePath='collections/Breadcrumb/Content/BreadcrumbSectionExample' | ||
/> | ||
<ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbSectionPropExample' /> | ||
|
||
<ComponentExample | ||
title='Link' | ||
description='A section may be linkable or contain a link' | ||
examplePath='collections/Breadcrumb/Content/BreadcrumbLinkExample' | ||
/> | ||
</ExampleSection> | ||
|
||
<ExampleSection title='Variations'> | ||
<ComponentExample | ||
title='Size' | ||
description='A breadcrumb can vary in size' | ||
examplePath='collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample' | ||
/> | ||
<ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbTinySizeExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbBigSizeExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample' /> | ||
<ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample' /> | ||
</ExampleSection> | ||
</div> | ||
) | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbDividerExample = () => ( | ||
<Breadcrumb> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider>/</Breadcrumb.Divider> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider>/</Breadcrumb.Divider> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbDividerExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const sections = [ | ||
{ text: 'Home', link: true }, | ||
{ text: 'Registration', link: true }, | ||
{ text: 'Personal Information', active: true }, | ||
] | ||
|
||
const BreadcrumbDividerPropExample = () => ( | ||
<Breadcrumb divider='/' sections={sections} /> | ||
) | ||
|
||
export default BreadcrumbDividerPropExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbIconDividerExample = () => ( | ||
<Breadcrumb> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right arrow' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbIconDividerExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const sections = [ | ||
{ text: 'Home', link: true }, | ||
{ text: 'Registration', link: true }, | ||
{ text: 'Personal Information', active: true }, | ||
] | ||
|
||
const BreadcrumbDividerPropExample = () => ( | ||
<Breadcrumb divider='/' sections={sections} /> | ||
) | ||
|
||
export default BreadcrumbDividerPropExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbLinkExample = () => ( | ||
<Breadcrumb> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider /> | ||
<Breadcrumb.Section link>Store</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right angle' /> | ||
<Breadcrumb.Section active>Search for: <a href='#'>paper towels</a></Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbLinkExample |
12 changes: 12 additions & 0 deletions
12
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.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,12 @@ | ||
import React from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbSectionExample = () => ( | ||
<Breadcrumb> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider /> | ||
<Breadcrumb.Section active>Search</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbSectionExample |
13 changes: 13 additions & 0 deletions
13
docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const sections = [ | ||
{ text: 'Home', link: true }, | ||
{ text: 'Search', active: true }, | ||
] | ||
|
||
const BreadcrumbSectionPropExample = () => ( | ||
<Breadcrumb sections={sections} /> | ||
) | ||
|
||
export default BreadcrumbSectionPropExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbDividerExample = () => ( | ||
<Breadcrumb> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right angle' /> | ||
<Breadcrumb.Section link>Store</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right angle' /> | ||
<Breadcrumb.Section active>T-Shirt</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbDividerExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbExample = () => ( | ||
<Breadcrumb> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider /> | ||
<Breadcrumb.Section link>Store</Breadcrumb.Section> | ||
<Breadcrumb.Divider /> | ||
<Breadcrumb.Section active>T-Shirt</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const sections = [ | ||
{ text: 'Home', link: true }, | ||
{ text: 'Store', link: true }, | ||
{ text: 'T-Shirt', active: true }, | ||
] | ||
|
||
const BreadcrumbPropExample = () => ( | ||
<Breadcrumb icon='right angle' sections={sections} /> | ||
) | ||
|
||
export default BreadcrumbPropExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbBigSizeExample = () => ( | ||
<Breadcrumb size='big'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbBigSizeExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbHugeSizeExample = () => ( | ||
<Breadcrumb size='huge'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbHugeSizeExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbLargeSizeExample = () => ( | ||
<Breadcrumb size='large'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbLargeSizeExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbMassiveSizeExample = () => ( | ||
<Breadcrumb size='massive'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbMassiveSizeExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbMiniSizeExample = () => ( | ||
<Breadcrumb size='mini'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbMiniSizeExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbSmallSizeExample = () => ( | ||
<Breadcrumb size='small'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbSmallSizeExample |
14 changes: 14 additions & 0 deletions
14
docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.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 from 'react' | ||
import { Breadcrumb } from 'stardust' | ||
|
||
const BreadcrumbTinySizeExample = () => ( | ||
<Breadcrumb size='tiny'> | ||
<Breadcrumb.Section link>Home</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section link>Registration</Breadcrumb.Section> | ||
<Breadcrumb.Divider icon='right chevron' /> | ||
<Breadcrumb.Section active>Personal Information</Breadcrumb.Section> | ||
</Breadcrumb> | ||
) | ||
|
||
export default BreadcrumbTinySizeExample |
Oops, something went wrong.