Skip to content

Commit

Permalink
Add Breadcrumb component (Semantic-Org#321)
Browse files Browse the repository at this point in the history
* 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
layershifter authored and jhill committed Jul 19, 2016
1 parent ce9d0f3 commit b1ff4a7
Show file tree
Hide file tree
Showing 26 changed files with 635 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ Be sure to check out the above migrations before embarking on a new component.

| Elements | Collections | Views | Modules | Behaviors |
|-----------------|-----------------|-----------------|-----------------|--------------------|
| x Button | _ Breadcrumb | _ Advertisement | x Accordion | x Form Validation |
| x Button | x Breadcrumb | _ Advertisement | x Accordion | x Form Validation |
| x Container | x Form | _ Card | x Checkbox | *API (NA)* |
| x Divider | x Grid | _ Comment | _ Dimmer | *Visibility (NA)* |
| x Flag | x Menu | _ Feed | x Dropdown | |
Expand Down
62 changes: 62 additions & 0 deletions docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
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>
)
}
}
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Loading

0 comments on commit b1ff4a7

Please sign in to comment.