docs(Step): refactor and fix an issue

docs/app/Examples/elements/Step/Content/Descriptions.js → docs/app/Examples/elements/Step/Content/StepExampleDescriptions.js

@@ -3,7 +3,7 @@ import { Step } from 'semantic-ui-react'
 
 const { Description, Group, Title } = Step
 
-const Descriptions = () => (
+const StepExampleDescriptions = () => (
   <div>
     <Group>
       <Step>
@@ -29,4 +29,4 @@ const Descriptions = () => (
   </div>
 )
 
-export default Descriptions
+export default StepExampleDescriptions

docs/app/Examples/elements/Step/Content/Icons.js → docs/app/Examples/elements/Step/Content/StepExampleIcons.js

@@ -3,7 +3,7 @@ import { Icon, Step } from 'semantic-ui-react'
 
 const { Content, Description, Group, Title } = Step
 
-const Icons = () => (
+const StepExampleIcons = () => (
   <Group>
     <Step>
       <Icon name='truck' />
@@ -22,4 +22,4 @@ const Icons = () => (
   </Group>
 )
 
-export default Icons
+export default StepExampleIcons

docs/app/Examples/elements/Step/Content/Links.js → docs/app/Examples/elements/Step/Content/StepExampleLinks.js

@@ -11,7 +11,7 @@ class ClickableStep extends Component {
   }
 }
 
-const Links = () => (
+const StepExampleLinks = () => (
   <div>
     <Step.Group>
       <Step active href='http://google.com' icon='truck' title='Shipping' description='Choose your shipping options' />
@@ -34,4 +34,4 @@ const Links = () => (
   </div>
 )
 
-export default Links
+export default StepExampleLinks

docs/app/Examples/elements/Step/Content/index.js

@@ -2,26 +2,26 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Content = () => (
+const StepContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Description'
       description='A step can contain a description.'
-      examplePath='elements/Step/Content/Descriptions'
+      examplePath='elements/Step/Content/StepExampleDescriptions'
     />
 
     <ComponentExample
       title='Icon'
       description='A step can contain an icon.'
-      examplePath='elements/Step/Content/Icons'
+      examplePath='elements/Step/Content/StepExampleIcons'
     />
 
     <ComponentExample
       title='Link'
       description='A step can link.'
-      examplePath='elements/Step/Content/Links'
+      examplePath='elements/Step/Content/StepExampleLinks'
     />
   </ExampleSection>
 )
 
-export default Content
+export default StepContentExamples

docs/app/Examples/elements/Step/Groups/Groups.js → docs/app/Examples/elements/Step/Groups/StepExampleGroups.js

@@ -8,7 +8,7 @@ const steps = [
   { disabled: true, icon: 'info', title: 'Confirm Order' },
 ]
 
-const Groups = () => (
+const StepExampleGroups = () => (
   <div>
     <Group>
       <Step>
@@ -33,4 +33,4 @@ const Groups = () => (
   </div>
 )
 
-export default Groups
+export default StepExampleGroups

docs/app/Examples/elements/Step/Groups/Ordered.js → docs/app/Examples/elements/Step/Groups/StepExampleOrdered.js

@@ -8,7 +8,7 @@ const steps = [
   { active: true, title: 'Confirm Order', description: 'Verify order details' },
 ]
 
-const Ordered = () => (
+const StepExampleOrdered = () => (
   <div>
     <Group ordered>
       <Step completed>
@@ -29,4 +29,4 @@ const Ordered = () => (
   </div>
 )
 
-export default Ordered
+export default StepExampleOrdered

docs/app/Examples/elements/Step/Groups/Vertical.js → docs/app/Examples/elements/Step/Groups/StepExampleVertical.js

@@ -8,7 +8,7 @@ const steps = [
   { active: true, icon: 'info', title: 'Confirm Order', description: 'Verify order details' },
 ]
 
-const Vertical = () => (
+const StepExampleVertical = () => (
   <div>
     <Group vertical>
       <Step completed>
@@ -33,4 +33,4 @@ const Vertical = () => (
   </div>
 )
 
-export default Vertical
+export default StepExampleVertical

docs/app/Examples/elements/Step/Groups/index.js

@@ -4,12 +4,12 @@ import { Icon, Message } from 'semantic-ui-react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Groups = () => (
+const StepGroupsExamples = () => (
   <ExampleSection title='Groups'>
     <ComponentExample
       title='Steps'
       description='A set of steps.'
-      examplePath='elements/Step/Groups/Groups'
+      examplePath='elements/Step/Groups/StepExampleGroups'
     >
       <Message positive icon>
         <Icon name='mobile' />
@@ -24,15 +24,15 @@ const Groups = () => (
     <ComponentExample
       title='Ordered'
       description='A step can show a ordered sequence of steps.'
-      examplePath='elements/Step/Groups/Ordered'
+      examplePath='elements/Step/Groups/StepExampleOrdered'
     />
 
     <ComponentExample
       title='Vertical'
       description='A step can be displayed stacked vertically.'
-      examplePath='elements/Step/Groups/Vertical'
+      examplePath='elements/Step/Groups/StepExampleVertical'
     />
   </ExampleSection>
 )
 
-export default Groups
+export default StepGroupsExamples

docs/app/Examples/elements/Step/States/Active.js → docs/app/Examples/elements/Step/States/StepExampleActive.js

@@ -3,7 +3,7 @@ import { Icon, Step } from 'semantic-ui-react'
 
 const { Content, Description, Group, Title } = Step
 
-const Active = () => (
+const StepExampleActive = () => (
   <Group>
     <Step active>
       <Icon name='credit card' />
@@ -17,4 +17,4 @@ const Active = () => (
   </Group>
 )
 
-export default Active
+export default StepExampleActive

docs/app/Examples/elements/Step/States/Completed.js → docs/app/Examples/elements/Step/States/StepExampleCompleted.js

@@ -3,7 +3,7 @@ import { Step } from 'semantic-ui-react'
 
 const { Group } = Step
 
-const Completed = () => (
+const StepExampleCompleted = () => (
   <div>
     <Group>
       <Step completed icon='payment' title='Billing' description='Enter billing information' />
@@ -17,4 +17,4 @@ const Completed = () => (
   </div>
 )
 
-export default Completed
+export default StepExampleCompleted

docs/app/Examples/elements/Step/States/Disabled.js → docs/app/Examples/elements/Step/States/StepExampleDisabled.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Step } from 'semantic-ui-react'
 
-const Disabled = () => (
+const StepExampleDisabled = () => (
   <Step.Group>
     <Step disabled>Billing</Step>
   </Step.Group>
 )
 
-export default Disabled
+export default StepExampleDisabled

docs/app/Examples/elements/Step/States/index.js

@@ -3,26 +3,24 @@ import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
 const States = () => (
-  <ExampleSection title='Groups'>
-    <ExampleSection title='States'>
-      <ComponentExample
-        title='Active'
-        description='A step can be highlighted as active.'
-        examplePath='elements/Step/States/Active'
-      />
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Active'
+      description='A step can be highlighted as active.'
+      examplePath='elements/Step/States/StepExampleActive'
+    />
 
-      <ComponentExample
-        title='Completed'
-        description='A step can show that a user has completed it.'
-        examplePath='elements/Step/States/Completed'
-      />
+    <ComponentExample
+      title='Completed'
+      description='A step can show that a user has completed it.'
+      examplePath='elements/Step/States/StepExampleCompleted'
+    />
 
-      <ComponentExample
-        title='Disabled'
-        description='A step can show that it cannot be selected.'
-        examplePath='elements/Step/States/Disabled'
-      />
-    </ExampleSection>
+    <ComponentExample
+      title='Disabled'
+      description='A step can show that it cannot be selected.'
+      examplePath='elements/Step/States/StepExampleDisabled'
+    />
   </ExampleSection>
 )
 

docs/app/Examples/elements/Step/Types/Basic.js → docs/app/Examples/elements/Step/Types/StepExampleBasic.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Step } from 'semantic-ui-react'
 
-const Basic = () => (
+const StepExampleBasic = () => (
   <Step.Group>
     <Step>Shipping</Step>
   </Step.Group>
 )
 
-export default Basic
+export default StepExampleBasic

docs/app/Examples/elements/Step/Types/index.js

@@ -2,14 +2,14 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Types = () => (
+const StepTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Step'
       description='A single step.'
-      examplePath='elements/Step/Types/Basic'
+      examplePath='elements/Step/Types/StepExampleBasic'
     />
   </ExampleSection>
 )
 
-export default Types
+export default StepTypesExamples

docs/app/Examples/elements/Step/Variations/Fluid.js → docs/app/Examples/elements/Step/Variations/StepExampleFluid.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Step } from 'semantic-ui-react'
 
-const Fluid = () => (
+const StepExampleFluid = () => (
   <Grid columns={2}>
     <Grid.Column>
       <Step.Group fluid vertical>
@@ -16,4 +16,4 @@ const Fluid = () => (
   </Grid>
 )
 
-export default Fluid
+export default StepExampleFluid

docs/app/Examples/elements/Step/Variations/Sizes.js → docs/app/Examples/elements/Step/Variations/StepExampleSizes.js

@@ -11,7 +11,7 @@ const simpleSteps = [
   { active: true, icon: 'payment', title: 'Billing' },
 ]
 
-const Sizes = () => (
+const StepExampleSizes = () => (
   <div>
     <Step.Group size='mini' items={steps} />
     <br />
@@ -35,4 +35,4 @@ const Sizes = () => (
   </div>
 )
 
-export default Sizes
+export default StepExampleSizes

docs/app/Examples/elements/Step/Variations/Stackable.js → docs/app/Examples/elements/Step/Variations/StepExampleStackable.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Step } from 'semantic-ui-react'
 
-const Stackable = () => (
+const StepExampleStackable = () => (
   <Step.Group stackable='tablet'>
     <Step icon='plane' title='Shipping' description='Choose your shipping options' />
     <Step active icon='dollar' title='Billing' description='Enter billing information' />
     <Step disabled icon='info circle' title='Confirm Order' description='Verify order details' />
   </Step.Group>
 )
 
-export default Stackable
+export default StepExampleStackable

docs/app/Examples/elements/Step/Variations/index.js

@@ -2,26 +2,26 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const Variations = () => (
+const StepVariationsExamples = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Stackable'
       description='A step can stack vertically only on smaller screens.'
-      examplePath='elements/Step/Variations/Stackable'
+      examplePath='elements/Step/Variations/StepExampleStackable'
     />
 
     <ComponentExample
       title='Fluid'
       description='A fluid step takes up the width of its container.'
-      examplePath='elements/Step/Variations/Fluid'
+      examplePath='elements/Step/Variations/StepExampleFluid'
     />
 
     <ComponentExample
       title='Size'
       description='Steps can have different sizes.'
-      examplePath='elements/Step/Variations/Sizes'
+      examplePath='elements/Step/Variations/StepExampleSizes'
     />
   </ExampleSection>
 )
 
-export default Variations
+export default StepVariationsExamples