docs(Divider): refactor, use stateless functional express and add tra…

…iling . in description (#715)

docs/app/Examples/elements/Divider/Types/DividerExampleDivider.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Divider } from 'semantic-ui-react'
+
+const DividerExampleDivider = () => (
+  <Divider />
+)
+
+export default DividerExampleDivider

docs/app/Examples/elements/Divider/Types/DividerExampleHorizontal.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Segment, Button, Divider } from 'semantic-ui-react'
+
+const DividerExampleHorizontal = () => (
+  <Segment padded>
+    <Button primary fluid>Login</Button>
+    <Divider horizontal>Or</Divider>
+    <Button secondary fluid>Sign Up Now</Button>
+  </Segment>
+)
+
+export default DividerExampleHorizontal

docs/app/Examples/elements/Divider/Types/DividerExampleVertical.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Grid, Segment, Divider } from 'semantic-ui-react'
+
+const DividerExampleVertical = () => (
+  <Grid columns={3} relaxed>
+    <Grid.Column>
+      <Segment basic>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
+      </Segment>
+    </Grid.Column>
+    <Divider vertical>Or</Divider>
+    <Grid.Column>
+      <Segment basic>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
+      </Segment>
+    </Grid.Column>
+    <Divider vertical>And</Divider>
+    <Grid.Column>
+      <Segment basic>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
+      </Segment>
+    </Grid.Column>
+  </Grid>
+)
+
+export default DividerExampleVertical

docs/app/Examples/elements/Divider/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 DividerTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Types'>
-        <ComponentExample
-          title='Divider'
-          description='A standard divider'
-          examplePath='elements/Divider/Types/DividerDividerExample'
-        />
-        <ComponentExample
-          title='Vertical Divider'
-          description='A divider can segment content vertically'
-          examplePath='elements/Divider/Types/DividerVerticalExample'
-        />
-        <ComponentExample
-          title='Horizontal Divider'
-          description='A divider can segement content horizontally'
-          examplePath='elements/Divider/Types/DividerHorizontalExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const DividerTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Divider'
+      description='A standard divider.'
+      examplePath='elements/Divider/Types/DividerExampleDivider'
+    />
+    <ComponentExample
+      title='Vertical Divider'
+      description='A divider can segment content vertically.'
+      examplePath='elements/Divider/Types/DividerExampleVertical'
+    />
+    <ComponentExample
+      title='Horizontal Divider'
+      description='A divider can segement content horizontally.'
+      examplePath='elements/Divider/Types/DividerExampleHorizontal'
+    />
+  </ExampleSection>
+)
+
+export default DividerTypesExamples

docs/app/Examples/elements/Divider/Variations/DividerExampleClearing.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Segment, Button, Divider } from 'semantic-ui-react'
+
+const DividerExampleClearing = () => (
+  <Segment>
+    <Button floated='right'>Floated Button</Button>
+    <Divider clearing />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+  </Segment>
+)
+
+export default DividerExampleClearing

docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js → docs/app/Examples/elements/Divider/Variations/DividerExampleFitted.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Segment, Divider } from 'semantic-ui-react'
 
-export default class DividerFittedExample extends Component {
+export default class DividerExampleFitted extends Component {
   render() {
     return (
       <Segment>

docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js → docs/app/Examples/elements/Divider/Variations/DividerExampleHidden.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Segment, Divider } from 'semantic-ui-react'
 
-export default class DividerHiddenExample extends Component {
+export default class DividerExampleHidden extends Component {
   render() {
     return (
       <Segment>

docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js → docs/app/Examples/elements/Divider/Variations/DividerExampleInverted.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Segment, Divider } from 'semantic-ui-react'
 
-export default class DividerInvertedExample extends Component {
+export default class DividerExampleInverted extends Component {
   render() {
     return (
       <Segment inverted>

docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js → docs/app/Examples/elements/Divider/Variations/DividerExampleSection.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Segment, Divider } from 'semantic-ui-react'
 
-export default class DividerSectionExample extends Component {
+export default class DividerExampleSection extends Component {
   render() {
     return (
       <Segment>

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

@@ -1,37 +1,35 @@
-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 DividerVariationsExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Variations'>
-        <ComponentExample
-          title='Inverted'
-          description='A divider can have its colors inverted'
-          examplePath='elements/Divider/Variations/DividerInvertedExample'
-        />
-        <ComponentExample
-          title='Fitted'
-          description='A divider can be fitted, without any space above or below it'
-          examplePath='elements/Divider/Variations/DividerFittedExample'
-        />
-        <ComponentExample
-          title='Hidden'
-          description='A hidden divider divides content without creating a dividing line'
-          examplePath='elements/Divider/Variations/DividerHiddenExample'
-        />
-        <ComponentExample
-          title='Section'
-          description='A divider can provide greater margins to divide sections of content'
-          examplePath='elements/Divider/Variations/DividerSectionExample'
-        />
-        <ComponentExample
-          title='Clearing'
-          description='A divider can clear the contents above it'
-          examplePath='elements/Divider/Variations/DividerClearingExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const DividerVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Inverted'
+      description='A divider can have its colors inverted.'
+      examplePath='elements/Divider/Variations/DividerExampleInverted'
+    />
+    <ComponentExample
+      title='Fitted'
+      description='A divider can be fitted, without any space above or below it.'
+      examplePath='elements/Divider/Variations/DividerExampleFitted'
+    />
+    <ComponentExample
+      title='Hidden'
+      description='A hidden divider divides content without creating a dividing line.'
+      examplePath='elements/Divider/Variations/DividerExampleHidden'
+    />
+    <ComponentExample
+      title='Section'
+      description='A divider can provide greater margins to divide sections of content.'
+      examplePath='elements/Divider/Variations/DividerExampleSection'
+    />
+    <ComponentExample
+      title='Clearing'
+      description='A divider can clear the contents above it.'
+      examplePath='elements/Divider/Variations/DividerExampleClearing'
+    />
+  </ExampleSection>
+)
+
+export default DividerVariationsExamples

docs/app/Examples/elements/Divider/index.js

@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
-export default class DividerExamples extends Component {
-  render() {
-    return (
-      <div>
-        <Types />
-        <Variations />
-      </div>
-    )
-  }
-}
+const DividerExamples = () => (
+  <div>
+    <Types />
+    <Variations />
+  </div>
+)
+
+export default DividerExamples