docs(Breadcrumb): rework and clarify component examples

docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerProps.js → docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleDividerShorthand.js

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

docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleSectionProps.js → docs/src/examples/collections/Breadcrumb/Content/BreadcrumbExampleSectionShorthand.js

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

docs/src/examples/collections/Breadcrumb/Content/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/src/components/ComponentDoc/ShorthandExample'
 
 const BreadcrumbContentExamples = () => (
   <div>
@@ -9,20 +11,24 @@ const BreadcrumbContentExamples = () => (
         title='Divider'
         description={[
           'A breadcrumb can contain a divider to show the relationship between sections,',
-          'this can be formatted as an icon or text.',
+          'this can be formatted as 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' />
+      <ShorthandExample examplePath='collections/Breadcrumb/Content/BreadcrumbExampleDividerShorthand' />
+
+      <ComponentExample
+        title='Divider as icon'
+        description='It can be also formatted as icon.'
+        examplePath='collections/Breadcrumb/Content/BreadcrumbExampleIconDivider'
+      />
 
       <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 examplePath='collections/Breadcrumb/Content/BreadcrumbExampleSectionShorthand' />
 
       <ComponentExample
         title='Link'

docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExampleStandard.js → docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExample.js

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

docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExampleProps.js → docs/src/examples/collections/Breadcrumb/Types/BreadcrumbExampleShorthand.js

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

docs/src/examples/collections/Breadcrumb/Types/index.js

@@ -1,17 +1,18 @@
 import React from 'react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+import ShorthandExample from 'docs/src/components/ComponentDoc/ShorthandExample'
 
 const BreadcrumbTypesExamples = () => (
   <div>
     <ExampleSection title='Types'>
       <ComponentExample
         title='Breadcrumb'
         description='A standard breadcrumb.'
-        examplePath='collections/Breadcrumb/Types/BreadcrumbExampleStandard'
+        examplePath='collections/Breadcrumb/Types/BreadcrumbExample'
       />
-      <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleDivider' />
-      <ComponentExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleProps' />
+      <ShorthandExample examplePath='collections/Breadcrumb/Types/BreadcrumbExampleShorthand' />
     </ExampleSection>
   </div>
 )

docs/src/examples/collections/Breadcrumb/Variations/BreadcrumbExampleSize.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Breadcrumb, Divider } from 'semantic-ui-react'
+
+const sizes = ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive']
+
+const BreadcrumbExampleSize = () => (
+  <React.Fragment>
+    {sizes.map(size => (
+      <React.Fragment key={size}>
+        <Breadcrumb size={size}>
+          <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>
+        <Divider hidden />
+      </React.Fragment>
+    ))}
+  </React.Fragment>
+)
+
+export default BreadcrumbExampleSize

docs/src/examples/collections/Breadcrumb/Variations/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
@@ -8,14 +9,8 @@ const BreadcrumbVariationsExamples = () => (
       <ComponentExample
         title='Size'
         description='A breadcrumb can vary in size.'
-        examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleMiniSize'
+        examplePath='collections/Breadcrumb/Variations/BreadcrumbExampleSize'
       />
-      <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>
 )