docs(progress): refactor, add trailing . to description and use state…

…less functional expression (#664)

* docs(Radio): refactor, remove trailing period in description and use stateless functional expression

* docs(Radio): add trailing . in description and fix a typo

* docs(Confirm): add trailing . in description

* docs(Progress): refactor, add trailing . in description and use stateless functional expression

* Revert "docs(Confirm): add trailing . in description"

This reverts commit 5918057.

* Revert "docs(Radio): add trailing . in description and fix a typo"

This reverts commit fcbf5dc.

* Revert "docs(Radio): refactor, remove trailing period in description and use stateless functional expression"

This reverts commit 1df9246.

docs/app/Examples/modules/Progress/Content/Bar.js → docs/app/Examples/modules/Progress/Content/ProgressExampleBar.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressBarExample = () => (
+const ProgressExampleBar = () => (
   <Progress percent={33} />
 )
 
-export default ProgressBarExample
+export default ProgressExampleBar

docs/app/Examples/modules/Progress/Content/Label.js → docs/app/Examples/modules/Progress/Content/ProgressExampleLabel.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressLabelExample = () => (
+const ProgressExampleLabel = () => (
   <Progress percent={55}>Label</Progress>
 )
 
-export default ProgressLabelExample
+export default ProgressExampleLabel

docs/app/Examples/modules/Progress/Content/Progress.js → docs/app/Examples/modules/Progress/Content/ProgressExampleProgress.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressExample = () => (
+const ProgressExampleProgress = () => (
   <Progress percent={44} progress />
 )
 
-export default ProgressExample
+export default ProgressExampleProgress

docs/app/Examples/modules/Progress/Content/index.js

@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class ProgressContentExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Content'>
-        <ComponentExample
-          title='Bar'
-          description='A progress element can contain a bar visually indicating progress.'
-          examplePath='modules/Progress/Content/Bar'
-        />
-        <ComponentExample
-          title='Progress'
-          description='A progress bar can contain a text value indicating current progress.'
-          examplePath='modules/Progress/Content/Progress'
-        />
-        <ComponentExample
-          title='Label'
-          description='A progress element can contain a label.'
-          examplePath='modules/Progress/Content/Label'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressContentExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Bar'
+      description='A progress element can contain a bar visually indicating progress.'
+      examplePath='modules/Progress/Content/ProgressExampleBar'
+    />
+    <ComponentExample
+      title='Progress'
+      description='A progress bar can contain a text value indicating current progress.'
+      examplePath='modules/Progress/Content/ProgressExampleProgress'
+    />
+    <ComponentExample
+      title='Label'
+      description='A progress element can contain a label.'
+      examplePath='modules/Progress/Content/ProgressExampleLabel'
+    />
+  </ExampleSection>
+)
+
+export default ProgressContentExamples

docs/app/Examples/modules/Progress/States/Active.js → docs/app/Examples/modules/Progress/States/ProgressExampleActive.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressActiveExample = () => (
+const ProgressExampleActive = () => (
   <Progress percent={60} active>
     Active
   </Progress>
 )
 
-export default ProgressActiveExample
+export default ProgressExampleActive

docs/app/Examples/modules/Progress/States/Disabled.js → docs/app/Examples/modules/Progress/States/ProgressExampleDisabled.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressDisabledExample = () => (
+const ProgressExampleDisabled = () => (
   <Progress percent={60} disabled>
     Disabled
   </Progress>
 )
 
-export default ProgressDisabledExample
+export default ProgressExampleDisabled

docs/app/Examples/modules/Progress/States/Error.js → docs/app/Examples/modules/Progress/States/ProgressExampleError.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressErrorExample = () => (
+const ProgressExampleError = () => (
   <Progress percent={100} error>
     There was an error
   </Progress>
 )
 
-export default ProgressErrorExample
+export default ProgressExampleError

docs/app/Examples/modules/Progress/States/Success.js → docs/app/Examples/modules/Progress/States/ProgressExampleSuccess.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressSuccessExample = () => (
+const ProgressExampleSuccess = () => (
   <Progress percent={100} success>
     The progress was successful
   </Progress>
 )
 
-export default ProgressSuccessExample
+export default ProgressExampleSuccess

docs/app/Examples/modules/Progress/States/Warning.js → docs/app/Examples/modules/Progress/States/ProgressExampleWarning.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressWarningExample = () => (
+const ProgressExampleWarning = () => (
   <Progress percent={100} warning>
     I am warning you
   </Progress>
 )
 
-export default ProgressWarningExample
+export default ProgressExampleWarning

docs/app/Examples/modules/Progress/States/index.js

@@ -1,42 +1,40 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import { Message } from 'semantic-ui-react'
 
-export default class ProgressStatesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='States'>
-        <Message info>
-          Semantic UI states <code>success</code>, <code>warning</code>, and <code>error</code>
-          {' '}are only retained at 100% completion.
-        </Message>
-        <ComponentExample
-          title='Active'
-          description='A progress bar can show activity'
-          examplePath='modules/Progress/States/Active'
-        />
-        <ComponentExample
-          title='Success'
-          description='A progress bar can show a success state.'
-          examplePath='modules/Progress/States/Success'
-        />
-        <ComponentExample
-          title='Warning'
-          description='A progress bar can show a warning state.'
-          examplePath='modules/Progress/States/Warning'
-        />
-        <ComponentExample
-          title='Error'
-          description='A progress bar can show an error state.'
-          examplePath='modules/Progress/States/Error'
-        />
-        <ComponentExample
-          title='Disabled'
-          description='A progress bar can be disabled.'
-          examplePath='modules/Progress/States/Disabled'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressStatesExamples = () => (
+  <ExampleSection title='States'>
+    <Message info>
+      Semantic UI states <code>success</code>, <code>warning</code>, and <code>error</code>
+      {' '}are only retained at 100% completion.
+    </Message>
+    <ComponentExample
+      title='Active'
+      description='A progress bar can show activity.'
+      examplePath='modules/Progress/States/ProgressExampleActive'
+    />
+    <ComponentExample
+      title='Success'
+      description='A progress bar can show a success state.'
+      examplePath='modules/Progress/States/ProgressExampleSuccess'
+    />
+    <ComponentExample
+      title='Warning'
+      description='A progress bar can show a warning state.'
+      examplePath='modules/Progress/States/ProgressExampleWarning'
+    />
+    <ComponentExample
+      title='Error'
+      description='A progress bar can show an error state.'
+      examplePath='modules/Progress/States/ProgressExampleError'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='A progress bar can be disabled.'
+      examplePath='modules/Progress/States/ProgressExampleDisabled'
+    />
+  </ExampleSection>
+)
+
+export default ProgressStatesExamples

docs/app/Examples/modules/Progress/Types/AutoSuccess.js → docs/app/Examples/modules/Progress/Types/ProgressExampleAutoSuccess.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Button, Progress } from 'semantic-ui-react'
 
-export default class ProgressAutoSuccessExample extends Component {
+export default class ProgressExampleAutoSuccess extends Component {
   state = { percent: 0 }
 
   toggle = () => this.setState({ percent: this.state.percent === 0 ? 100 : 0 })

docs/app/Examples/modules/Progress/Types/Indicating.js → docs/app/Examples/modules/Progress/Types/ProgressExampleIndicating.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Button, Progress } from 'semantic-ui-react'
 
-export default class ProgressIndicatingExample extends Component {
+export default class ProgressExampleIndicating extends Component {
   state = { percent: 33 }
 
   increment = () => this.setState({

docs/app/Examples/modules/Progress/Types/Standard.js → docs/app/Examples/modules/Progress/Types/ProgressExampleStandard.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressStandardExample = () => (
+const ProgressExampleStandard = () => (
   <Progress percent={11} />
 )
 
-export default ProgressStandardExample
+export default ProgressExampleStandard

docs/app/Examples/modules/Progress/Types/index.js

@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class ProgressTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Types'>
-        <ComponentExample
-          title='Standard'
-          description='A standard progress bar.'
-          examplePath='modules/Progress/Types/Standard'
-        />
-        <ComponentExample
-          title='Indicating'
-          description='An indicating progress bar visually indicates the current level of progress of a task.'
-          examplePath='modules/Progress/Types/Indicating'
-        />
-        <ComponentExample
-          title='Auto Success'
-          description='A progress bar can automatically trigger the success state when progress completes.'
-          examplePath='modules/Progress/Types/AutoSuccess'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Standard'
+      description='A standard progress bar.'
+      examplePath='modules/Progress/Types/ProgressExampleStandard'
+    />
+    <ComponentExample
+      title='Indicating'
+      description='An indicating progress bar visually indicates the current level of progress of a task.'
+      examplePath='modules/Progress/Types/ProgressExampleIndicating'
+    />
+    <ComponentExample
+      title='Auto Success'
+      description='A progress bar can automatically trigger the success state when progress completes.'
+      examplePath='modules/Progress/Types/ProgressExampleAutoSuccess'
+    />
+  </ExampleSection>
+)
+
+export default ProgressTypesExamples

docs/app/Examples/modules/Progress/Variations/Attached.js → docs/app/Examples/modules/Progress/Variations/ProgressExampleAttached.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Progress, Segment } from 'semantic-ui-react'
 
-const ProgressAttachedExample = () => (
+const ProgressExampleAttached = () => (
   <Segment>
     <Progress percent={50} attached='top' />
     La la la la
     <Progress percent={50} attached='bottom' />
   </Segment>
 )
 
-export default ProgressAttachedExample
+export default ProgressExampleAttached

docs/app/Examples/modules/Progress/Variations/Color.js → docs/app/Examples/modules/Progress/Variations/ProgressExampleColor.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressColorExample = () => (
+const ProgressExampleColor = () => (
   <div>
     <Progress percent={32} color='red' />
     <Progress percent={59} color='orange' />
@@ -19,4 +19,4 @@ const ProgressColorExample = () => (
   </div>
 )
 
-export default ProgressColorExample
+export default ProgressExampleColor

docs/app/Examples/modules/Progress/Variations/Inverted.js → docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress, Segment } from 'semantic-ui-react'
 
-const ProgressInvertedExample = () => (
+const ProgressExampleInverted = () => (
   <Segment inverted>
     <Progress percent={21} inverted label>
       Uploading Files
@@ -17,4 +17,4 @@ const ProgressInvertedExample = () => (
     </Progress>
   </Segment>
 )
-export default ProgressInvertedExample
+export default ProgressExampleInverted

docs/app/Examples/modules/Progress/Variations/InvertedColor.js → docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress, Segment } from 'semantic-ui-react'
 
-const ProgressInvertedColorExample = () => (
+const ProgressExampleInvertedColor = () => (
   <Segment inverted>
     <Progress percent={32} inverted color='red' label />
     <Progress percent={59} inverted color='orange' label />
@@ -19,4 +19,4 @@ const ProgressInvertedColorExample = () => (
   </Segment>
 )
 
-export default ProgressInvertedColorExample
+export default ProgressExampleInvertedColor

docs/app/Examples/modules/Progress/Variations/Size.js → docs/app/Examples/modules/Progress/Variations/ProgressExampleSize.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressSizeExample = () => (
+const ProgressExampleSize = () => (
   <div>
     <Progress percent={10} size='tiny'>
       tiny
@@ -20,4 +20,4 @@ const ProgressSizeExample = () => (
     </Progress>
   </div>
 )
-export default ProgressSizeExample
+export default ProgressExampleSize