Add Breadcrumb component (#321)

* Breadcrumb component * Breadcrumb.Section #321 * Breadcrumb.Section #321 * README.md update #321 * (refactor) Breadcrumb.Section #321 * (fix) Breadcrumb.Section test #321 * (fix) Breadcrumb.Section #321 * (fix) Breadcrumb.Section #321 * (feat) Breadcrumb.Section #321 * (fix) Breadcrumb.Divider #321 * (feat) Breadcrumb #321 * (fix) Breadcrumb.Section test #321 * (fix) Breadcrumb.Section test #321 * (fix) Breadcrumb #321 * (feat) Breadcrumb #321 * (fix) Breadcrumb key #321 * (feat) Breadcrumb test #321 * (feat) Breadcrumb tests #321 * (feat) Breadcrumb docs #321 * (fix) Breadcrumb docs #321 * (fix) Breadcrumb #321 * (fix) Breadcrumb docs * (fix) Breadcrumb * (Breadcrumb) Test update
Semantic-Org · Jul 17, 2016 · 63ac495 · 63ac495
1 parent b6d9e94
commit 63ac495
Show file tree

Hide file tree

Showing 26 changed files with 635 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -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      |                    |

diff --git a/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js
@@ -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>
+    )
+  }
+}
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js
@@ -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
diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js
@@ -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