From c482e5aa0d558930f91c45318276b36fa24e2189 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Fri, 21 Oct 2016 01:09:20 -0400
Subject: [PATCH] docs(Divider): refactor, use stateless functional express and
 add trailing . in description (#715)

---
 .../Divider/Types/DividerDividerExample.js    | 10 ---
 .../Divider/Types/DividerExampleDivider.js    |  8 +++
 .../Divider/Types/DividerExampleHorizontal.js | 12 ++++
 .../Divider/Types/DividerExampleVertical.js   | 26 ++++++++
 .../Divider/Types/DividerHorizontalExample.js | 14 ----
 .../Divider/Types/DividerVerticalExample.js   | 28 --------
 .../Examples/elements/Divider/Types/index.js  | 46 +++++++------
 .../Variations/DividerClearingExample.js      | 14 ----
 .../Variations/DividerExampleClearing.js      | 12 ++++
 ...ttedExample.js => DividerExampleFitted.js} |  2 +-
 ...ddenExample.js => DividerExampleHidden.js} |  2 +-
 ...edExample.js => DividerExampleInverted.js} |  2 +-
 ...ionExample.js => DividerExampleSection.js} |  2 +-
 .../elements/Divider/Variations/index.js      | 66 +++++++++----------
 docs/app/Examples/elements/Divider/index.js   | 20 +++---
 15 files changed, 125 insertions(+), 139 deletions(-)
 delete mode 100644 docs/app/Examples/elements/Divider/Types/DividerDividerExample.js
 create mode 100644 docs/app/Examples/elements/Divider/Types/DividerExampleDivider.js
 create mode 100644 docs/app/Examples/elements/Divider/Types/DividerExampleHorizontal.js
 create mode 100644 docs/app/Examples/elements/Divider/Types/DividerExampleVertical.js
 delete mode 100644 docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js
 delete mode 100644 docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js
 delete mode 100644 docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
 create mode 100644 docs/app/Examples/elements/Divider/Variations/DividerExampleClearing.js
 rename docs/app/Examples/elements/Divider/Variations/{DividerFittedExample.js => DividerExampleFitted.js} (87%)
 rename docs/app/Examples/elements/Divider/Variations/{DividerHiddenExample.js => DividerExampleHidden.js} (87%)
 rename docs/app/Examples/elements/Divider/Variations/{DividerInvertedExample.js => DividerExampleInverted.js} (80%)
 rename docs/app/Examples/elements/Divider/Variations/{DividerSectionExample.js => DividerExampleSection.js} (86%)

diff --git a/docs/app/Examples/elements/Divider/Types/DividerDividerExample.js b/docs/app/Examples/elements/Divider/Types/DividerDividerExample.js
deleted file mode 100644
index b3ce899cf3..0000000000
--- a/docs/app/Examples/elements/Divider/Types/DividerDividerExample.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { Component } from 'react'
-import { Divider } from 'semantic-ui-react'
-
-export default class DividerDividerExample extends Component {
-  render() {
-    return (
-      <Divider />
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Divider/Types/DividerExampleDivider.js b/docs/app/Examples/elements/Divider/Types/DividerExampleDivider.js
new file mode 100644
index 0000000000..06b290db27
--- /dev/null
+++ b/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
diff --git a/docs/app/Examples/elements/Divider/Types/DividerExampleHorizontal.js b/docs/app/Examples/elements/Divider/Types/DividerExampleHorizontal.js
new file mode 100644
index 0000000000..5ecebb2b19
--- /dev/null
+++ b/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
diff --git a/docs/app/Examples/elements/Divider/Types/DividerExampleVertical.js b/docs/app/Examples/elements/Divider/Types/DividerExampleVertical.js
new file mode 100644
index 0000000000..d79127fc91
--- /dev/null
+++ b/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
diff --git a/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js b/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js
deleted file mode 100644
index 0fc48d3185..0000000000
--- a/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-import { Segment, Button, Divider } from 'semantic-ui-react'
-
-export default class DividerHorizontalExample extends Component {
-  render() {
-    return (
-      <Segment padded>
-        <Button primary fluid>Login</Button>
-        <Divider horizontal>Or</Divider>
-        <Button secondary fluid>Sign Up Now</Button>
-      </Segment>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js b/docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js
deleted file mode 100644
index 0311bfcafa..0000000000
--- a/docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Component } from 'react'
-import { Grid, Segment, Divider } from 'semantic-ui-react'
-
-export default class DividerVerticalExample extends Component {
-  render() {
-    return (
-      <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>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Divider/Types/index.js b/docs/app/Examples/elements/Divider/Types/index.js
index 12b368991f..62dce9462c 100644
--- a/docs/app/Examples/elements/Divider/Types/index.js
+++ b/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
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js b/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
deleted file mode 100644
index 03a9d3f85b..0000000000
--- a/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-import { Segment, Button, Divider } from 'semantic-ui-react'
-
-export default class DividerClearingExample extends Component {
-  render() {
-    return (
-      <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>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerExampleClearing.js b/docs/app/Examples/elements/Divider/Variations/DividerExampleClearing.js
new file mode 100644
index 0000000000..96e2b1c5ce
--- /dev/null
+++ b/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
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js b/docs/app/Examples/elements/Divider/Variations/DividerExampleFitted.js
similarity index 87%
rename from docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js
rename to docs/app/Examples/elements/Divider/Variations/DividerExampleFitted.js
index 5261e2a0dc..b7f51ce858 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js
+++ b/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>
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js b/docs/app/Examples/elements/Divider/Variations/DividerExampleHidden.js
similarity index 87%
rename from docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js
rename to docs/app/Examples/elements/Divider/Variations/DividerExampleHidden.js
index 5e220113f9..23d516ea3e 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js
+++ b/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>
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js b/docs/app/Examples/elements/Divider/Variations/DividerExampleInverted.js
similarity index 80%
rename from docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js
rename to docs/app/Examples/elements/Divider/Variations/DividerExampleInverted.js
index b213dbfee7..546dc16551 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js
+++ b/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>
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js b/docs/app/Examples/elements/Divider/Variations/DividerExampleSection.js
similarity index 86%
rename from docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js
rename to docs/app/Examples/elements/Divider/Variations/DividerExampleSection.js
index 2d9261892b..b4f72305dc 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js
+++ b/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>
diff --git a/docs/app/Examples/elements/Divider/Variations/index.js b/docs/app/Examples/elements/Divider/Variations/index.js
index 846af1ea3e..4290c5c8f9 100644
--- a/docs/app/Examples/elements/Divider/Variations/index.js
+++ b/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
diff --git a/docs/app/Examples/elements/Divider/index.js b/docs/app/Examples/elements/Divider/index.js
index 86e4444e99..6552db145b 100644
--- a/docs/app/Examples/elements/Divider/index.js
+++ b/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