docs(Breadcrumb): refactor and use index.js

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDivider.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbDividerExample = () => (
+const BreadcrumbExampleDivider = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider>/</Breadcrumb.Divider>
@@ -11,4 +11,4 @@ const BreadcrumbDividerExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbDividerExample
+export default BreadcrumbExampleDivider

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerProps.js

@@ -7,8 +7,8 @@ const sections = [
   { text: 'Personal Information', active: true },
 ]
 
-const BreadcrumbDividerPropExample = () => (
+const BreadcrumbExampleDividerProps = () => (
   <Breadcrumb divider='/' sections={sections} />
 )
 
-export default BreadcrumbDividerPropExample
+export default BreadcrumbExampleDividerProps

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDivider.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbIconDividerExample = () => (
+const BreadcrumbExampleIconDivider = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbIconDividerExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbIconDividerExample
+export default BreadcrumbExampleIconDivider

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps.js

@@ -7,8 +7,8 @@ const sections = [
   { text: 'Personal Information', active: true },
 ]
 
-const BreadcrumbDividerPropExample = () => (
+const BreadcrumbExampleIconDividerProps = () => (
   <Breadcrumb divider='/' sections={sections} />
 )
 
-export default BreadcrumbDividerPropExample
+export default BreadcrumbExampleIconDividerProps

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleLink.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbLinkExample = () => (
+const BreadcrumbExampleLink = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider />
@@ -11,4 +11,4 @@ const BreadcrumbLinkExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbLinkExample
+export default BreadcrumbExampleLink

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSection.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbSectionExample = () => (
+const BreadcrumbExampleSection = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider />
     <Breadcrumb.Section active>Search</Breadcrumb.Section>
   </Breadcrumb>
 )
 
-export default BreadcrumbSectionExample
+export default BreadcrumbExampleSection

docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js → docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbExampleSectionProps.js

@@ -6,8 +6,8 @@ const sections = [
   { text: 'Search', active: true },
 ]
 
-const BreadcrumbSectionPropExample = () => (
+const BreadcrumbExampleSectionProps = () => (
   <Breadcrumb sections={sections} />
 )
 
-export default BreadcrumbSectionPropExample
+export default BreadcrumbExampleSectionProps

docs/app/Examples/collections/Breadcrumb/Content/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreadcrumbContentExamples = () => (
+  <div>
+    <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/BreadcrumbExampleDivider'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleDividerProps' />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleIconDivider' />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleIconDividerProps' />
+
+      <ComponentExample
+        title='Section'
+        description='A breadcrumb can contain sections that can either be formatted as a link or text.'
+        examplePath='collections/Breadcrumb/Content/BreadcrumbExampleSection'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleSectionProps' />
+
+      <ComponentExample
+        title='Link'
+        description='A section may be linkable or contain a link.'
+        examplePath='collections/Breadcrumb/Content/BreadcrumbExampleLink'
+      />
+    </ExampleSection>
+  </div>
+)
+
+export default BreadcrumbContentExamples

docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js → docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleDivider.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbDividerExample = () => (
+const BreadcrumbExampleDivider = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right angle' />
@@ -11,4 +11,4 @@ const BreadcrumbDividerExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbDividerExample
+export default BreadcrumbExampleDivider

docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js → docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js

@@ -7,8 +7,8 @@ const sections = [
   { text: 'T-Shirt', active: true },
 ]
 
-const BreadcrumbPropExample = () => (
+const BreadcrumbExampleProps = () => (
   <Breadcrumb icon='right angle' sections={sections} />
 )
 
-export default BreadcrumbPropExample
+export default BreadcrumbExampleProps

docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js → docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExampleStandard.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbExample = () => (
+const BreadcrumbExampleStandard = () => (
   <Breadcrumb>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider />
@@ -11,4 +11,4 @@ const BreadcrumbExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbExample
+export default BreadcrumbExampleStandard

docs/app/Examples/collections/Breadcrumb/Types/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreadcrumbTypesExamples = () => (
+  <div>
+    <ExampleSection title='Types'>
+      <ComponentExample
+        title='Breadcrumb'
+        description='A standard breadcrumb.'
+        examplePath='collections/Breadcrumb/Types/BreadcrumbExampleStandard'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleDivider' />
+      <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleProps' />
+    </ExampleSection>
+  </div>
+)
+
+export default BreadcrumbTypesExamples

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleBigSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbBigSizeExample = () => (
+const BreadcrumbExampleBigSize = () => (
   <Breadcrumb size='big'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbBigSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbBigSizeExample
+export default BreadcrumbExampleBigSize

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleHugeSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbHugeSizeExample = () => (
+const BreadcrumbExampleHugeSize = () => (
   <Breadcrumb size='huge'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbHugeSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbHugeSizeExample
+export default BreadcrumbExampleHugeSize

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleLargeSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbLargeSizeExample = () => (
+const BreadcrumbExampleLargeSize = () => (
   <Breadcrumb size='large'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbLargeSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbLargeSizeExample
+export default BreadcrumbExampleLargeSize

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMassiveSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbMassiveSizeExample = () => (
+const BreadcrumbExampleMassiveSize = () => (
   <Breadcrumb size='massive'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbMassiveSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbMassiveSizeExample
+export default BreadcrumbExampleMassiveSize

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbMiniSizeExample = () => (
+const BreadcrumbExampleMiniSize = () => (
   <Breadcrumb size='mini'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbMiniSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbMiniSizeExample
+export default BreadcrumbExampleMiniSize

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleSmallSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbSmallSizeExample = () => (
+const BreadcrumbExampleSmallSize = () => (
   <Breadcrumb size='small'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbSmallSizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbSmallSizeExample
+export default BreadcrumbExampleSmallSize

docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js → docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbExampleTinySize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Breadcrumb } from 'semantic-ui-react'
 
-const BreadcrumbTinySizeExample = () => (
+const BreadcrumbExampleTinySize = () => (
   <Breadcrumb size='tiny'>
     <Breadcrumb.Section link>Home</Breadcrumb.Section>
     <Breadcrumb.Divider icon='right chevron' />
@@ -11,4 +11,4 @@ const BreadcrumbTinySizeExample = () => (
   </Breadcrumb>
 )
 
-export default BreadcrumbTinySizeExample
+export default BreadcrumbExampleTinySize

docs/app/Examples/collections/Breadcrumb/Variations/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreadcrumbVariationsExamples = () => (
+  <div>
+    <ExampleSection title='Variations'>
+      <ComponentExample
+        title='Size'
+        description='A breadcrumb can vary in size.'
+        examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize'
+      />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleTinySize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleSmallSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleLargeSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleBigSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleHugeSize' />
+      <ComponentExample examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleMassiveSize' />
+    </ExampleSection>
+  </div>
+)
+
+export default BreadcrumbVariationsExamples

docs/app/Examples/collections/Breadcrumb/index.js

@@ -1,59 +1,13 @@
 import React from 'react'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import Types from './Types'
+import Content from './Content'
+import Variations from './Variations'
 
 const BreadcrumbExamples = () => (
   <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>
+    <Types />
+    <Content />
+    <Variations />
   </div>
 )