From 85227358669e5a3d1ba3e3ee46c4614a6436a7bf Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Fri, 11 Nov 2016 19:52:37 -0500
Subject: [PATCH] style(Accordion): update docs to the latest standards

---
 .../modules/Accordion/Types/Accordion.js      | 47 -----------
 ...ndex.js => AccordionExampleActiveIndex.js} |  4 +-
 ...sProp.js => AccordionExamplePanelsProp.js} | 14 ++--
 .../Types/AccordionExampleStandard.js         | 45 +++++++++++
 .../AccordionExampleStyled.js}                | 14 ++--
 .../Examples/modules/Accordion/Types/index.js | 78 +++++++++----------
 .../AccordionExampleFluid.js}                 | 14 ++--
 .../Variations/AccordionExampleInverted.js    | 17 ++++
 .../modules/Accordion/Variations/Inverted.js  | 19 -----
 .../modules/Accordion/Variations/index.js     | 36 ++++-----
 docs/app/Examples/modules/Accordion/index.js  | 20 +++--
 11 files changed, 147 insertions(+), 161 deletions(-)
 delete mode 100644 docs/app/Examples/modules/Accordion/Types/Accordion.js
 rename docs/app/Examples/modules/Accordion/Types/{ActiveIndex.js => AccordionExampleActiveIndex.js} (90%)
 rename docs/app/Examples/modules/Accordion/Types/{PanelsProp.js => AccordionExamplePanelsProp.js} (52%)
 create mode 100644 docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js
 rename docs/app/Examples/modules/Accordion/{Variations/Fluid.js => Types/AccordionExampleStyled.js} (52%)
 rename docs/app/Examples/modules/Accordion/{Types/Styled.js => Variations/AccordionExampleFluid.js} (52%)
 create mode 100644 docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js
 delete mode 100644 docs/app/Examples/modules/Accordion/Variations/Inverted.js

diff --git a/docs/app/Examples/modules/Accordion/Types/Accordion.js b/docs/app/Examples/modules/Accordion/Types/Accordion.js
deleted file mode 100644
index d56394492b..0000000000
--- a/docs/app/Examples/modules/Accordion/Types/Accordion.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react'
-import { Accordion, Icon } from 'semantic-ui-react'
-
-export default class AccordionAccordionExample extends Component {
-  render() {
-    return (
-      <Accordion>
-        <Accordion.Title>
-          <Icon name='dropdown' />
-          What is a dog?
-        </Accordion.Title>
-        <Accordion.Content>
-          <p>
-            A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
-            {' '}it can be found as a welcome guest in many households across the world.
-          </p>
-        </Accordion.Content>
-        <Accordion.Title>
-          <Icon name='dropdown' />
-          What kinds of dogs are there?
-        </Accordion.Title>
-        <Accordion.Content>
-          <p>
-            There are many breeds of dogs. Each breed varies in size and temperament.
-            {' '}Owners often select a breed of dog that they find to be compatible
-            with their own lifestyle and desires from a companion.
-          </p>
-        </Accordion.Content>
-        <Accordion.Title>
-          <Icon name='dropdown' />
-          How do you acquire a dog?
-        </Accordion.Title>
-        <Accordion.Content>
-          <p>
-            Three common ways for a prospective owner to acquire a dog is from pet shops,
-            {' '}private owners, or shelters.
-          </p>
-          <p> A pet shop may be the most convenient way to buy a dog.
-            {' '}Buying a dog from a private owner allows you to assess the pedigree and
-            {' '}upbringing of your dog before choosing to take it home. Lastly, finding your dog
-            {' '}from a shelter, helps give a good home to a dog who may not find one so readily.
-          </p>
-        </Accordion.Content>
-      </Accordion>
-    )
-  }
-}
diff --git a/docs/app/Examples/modules/Accordion/Types/ActiveIndex.js b/docs/app/Examples/modules/Accordion/Types/AccordionExampleActiveIndex.js
similarity index 90%
rename from docs/app/Examples/modules/Accordion/Types/ActiveIndex.js
rename to docs/app/Examples/modules/Accordion/Types/AccordionExampleActiveIndex.js
index 9ce456d8b0..2bbc660738 100644
--- a/docs/app/Examples/modules/Accordion/Types/ActiveIndex.js
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExampleActiveIndex.js
@@ -8,7 +8,7 @@ const panels = _.times(3, () => ({
   content: faker.lorem.paragraphs(),
 }))
 
-export default class AccordionActiveIndexExample extends Component {
+class AccordionExampleActiveIndex extends Component {
   state = { activeIndex: 0 }
 
   handleSliderChange = (e) => this.setState({
@@ -40,3 +40,5 @@ export default class AccordionActiveIndexExample extends Component {
     )
   }
 }
+
+export default AccordionExampleActiveIndex
diff --git a/docs/app/Examples/modules/Accordion/Types/PanelsProp.js b/docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js
similarity index 52%
rename from docs/app/Examples/modules/Accordion/Types/PanelsProp.js
rename to docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js
index 47748dca70..9740e2436f 100644
--- a/docs/app/Examples/modules/Accordion/Types/PanelsProp.js
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExamplePanelsProp.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Accordion } from 'semantic-ui-react'
 import faker from 'faker'
 import _ from 'lodash'
@@ -8,10 +8,8 @@ const panels = _.times(3, () => ({
   content: faker.lorem.paragraphs(),
 }))
 
-export default class AccordionPanelsPropExample extends Component {
-  render() {
-    return (
-      <Accordion panels={panels} />
-    )
-  }
-}
+const AccordionExamplePanelsProp = () => (
+  <Accordion panels={panels} />
+)
+
+export default AccordionExamplePanelsProp
diff --git a/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js
new file mode 100644
index 0000000000..6976ce0308
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Accordion, Icon } from 'semantic-ui-react'
+
+const AccordionExampleStandard = () => (
+  <Accordion>
+    <Accordion.Title>
+      <Icon name='dropdown' />
+      What is a dog?
+    </Accordion.Title>
+    <Accordion.Content>
+      <p>
+        A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
+        {' '}it can be found as a welcome guest in many households across the world.
+      </p>
+    </Accordion.Content>
+    <Accordion.Title>
+      <Icon name='dropdown' />
+      What kinds of dogs are there?
+    </Accordion.Title>
+    <Accordion.Content>
+      <p>
+        There are many breeds of dogs. Each breed varies in size and temperament.
+        {' '}Owners often select a breed of dog that they find to be compatible
+        with their own lifestyle and desires from a companion.
+      </p>
+    </Accordion.Content>
+    <Accordion.Title>
+      <Icon name='dropdown' />
+      How do you acquire a dog?
+    </Accordion.Title>
+    <Accordion.Content>
+      <p>
+        Three common ways for a prospective owner to acquire a dog is from pet shops,
+        {' '}private owners, or shelters.
+      </p>
+      <p> A pet shop may be the most convenient way to buy a dog.
+        {' '}Buying a dog from a private owner allows you to assess the pedigree and
+        {' '}upbringing of your dog before choosing to take it home. Lastly, finding your dog
+        {' '}from a shelter, helps give a good home to a dog who may not find one so readily.
+      </p>
+    </Accordion.Content>
+  </Accordion>
+)
+
+export default AccordionExampleStandard
diff --git a/docs/app/Examples/modules/Accordion/Variations/Fluid.js b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js
similarity index 52%
rename from docs/app/Examples/modules/Accordion/Variations/Fluid.js
rename to docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js
index 64ea0a24c9..e399c3c815 100644
--- a/docs/app/Examples/modules/Accordion/Variations/Fluid.js
+++ b/docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import faker from 'faker'
-import React, { Component } from 'react'
+import React from 'react'
 import { Accordion } from 'semantic-ui-react'
 
 const panels = _.times(3, () => ({
@@ -8,10 +8,8 @@ const panels = _.times(3, () => ({
   content: faker.lorem.paragraphs(),
 }))
 
-export default class AccordionFluidExample extends Component {
-  render() {
-    return (
-      <Accordion panels={panels} fluid />
-    )
-  }
-}
+const AccordionExampleStyled = () => (
+  <Accordion panels={panels} styled />
+)
+
+export default AccordionExampleStyled
diff --git a/docs/app/Examples/modules/Accordion/Types/index.js b/docs/app/Examples/modules/Accordion/Types/index.js
index d27a5918c9..27e4cd1550 100644
--- a/docs/app/Examples/modules/Accordion/Types/index.js
+++ b/docs/app/Examples/modules/Accordion/Types/index.js
@@ -1,45 +1,43 @@
-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 AccordionTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Types'>
-        <ComponentExample
-          title='Accordion'
-          description='A standard Accordion.'
-          examplePath='modules/Accordion/Types/Accordion'
-        />
-        <ComponentExample
-          title='Panels Prop'
-          description='Accordion panels can be define using the `panels` prop.'
-          examplePath='modules/Accordion/Types/PanelsProp'
-        >
-          <Message info>
-            Panel objects can define an <code>active</code> key to open/close the panel.
-            {' '}They can also define an <code>onClick</code> key to be applied to the <code>Accordion.Title</code>.
-          </Message>
-        </ComponentExample>
-        <ComponentExample
-          title='Active Index'
-          description='The `activeIndex` prop controls which panel is open.'
-          examplePath='modules/Accordion/Types/ActiveIndex'
-        >
-          <Message info>
-            An <code>active</code> prop on an
-            {' '}<code>&lt;Accordion.Title&gt;</code> or <code>&lt;Accordion.Content&gt;</code>
-            {' '}will override the <code>&lt;Accordion&gt;</code> <code>&lt;activeIndex&gt;</code> prop.
-          </Message>
-        </ComponentExample>
-        <ComponentExample
-          title='Styled'
-          description='A styled accordion adds basic formatting'
-          examplePath='modules/Accordion/Types/Styled'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const AccordionTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Accordion'
+      description='A standard Accordion.'
+      examplePath='modules/Accordion/Types/AccordionExampleStandard'
+    />
+    <ComponentExample
+      title='Panels Prop'
+      description='Accordion panels can be define using the `panels` prop.'
+      examplePath='modules/Accordion/Types/AccordionExamplePanelsProp'
+    >
+      <Message info>
+        Panel objects can define an <code>active</code> key to open/close the panel.
+        {' '}They can also define an <code>onClick</code> key to be applied to the <code>Accordion.Title</code>.
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Active Index'
+      description='The `activeIndex` prop controls which panel is open.'
+      examplePath='modules/Accordion/Types/AccordionExampleActiveIndex'
+    >
+      <Message info>
+        An <code>active</code> prop on an
+        {' '}<code>&lt;Accordion.Title&gt;</code> or <code>&lt;Accordion.Content&gt;</code>
+        {' '}will override the <code>&lt;Accordion&gt;</code> <code>&lt;activeIndex&gt;</code> prop.
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Styled'
+      description='A styled accordion adds basic formatting.'
+      examplePath='modules/Accordion/Types/AccordionExampleStyled'
+    />
+  </ExampleSection>
+)
+
+export default AccordionTypesExamples
diff --git a/docs/app/Examples/modules/Accordion/Types/Styled.js b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js
similarity index 52%
rename from docs/app/Examples/modules/Accordion/Types/Styled.js
rename to docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js
index 8c5b4b4fa1..9a68aed9cb 100644
--- a/docs/app/Examples/modules/Accordion/Types/Styled.js
+++ b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import faker from 'faker'
-import React, { Component } from 'react'
+import React from 'react'
 import { Accordion } from 'semantic-ui-react'
 
 const panels = _.times(3, () => ({
@@ -8,10 +8,8 @@ const panels = _.times(3, () => ({
   content: faker.lorem.paragraphs(),
 }))
 
-export default class AccordionStyledExample extends Component {
-  render() {
-    return (
-      <Accordion panels={panels} styled />
-    )
-  }
-}
+const AccordionExampleFluid = () => (
+  <Accordion panels={panels} fluid />
+)
+
+export default AccordionExampleFluid
diff --git a/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js
new file mode 100644
index 0000000000..485ba47c6a
--- /dev/null
+++ b/docs/app/Examples/modules/Accordion/Variations/AccordionExampleInverted.js
@@ -0,0 +1,17 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React from 'react'
+import { Accordion, Segment } from 'semantic-ui-react'
+
+const panels = _.times(3, () => ({
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(),
+}))
+
+const AccordionExampleInverted = () => (
+  <Segment inverted>
+    <Accordion panels={panels} inverted />
+  </Segment>
+)
+
+export default AccordionExampleInverted
diff --git a/docs/app/Examples/modules/Accordion/Variations/Inverted.js b/docs/app/Examples/modules/Accordion/Variations/Inverted.js
deleted file mode 100644
index 4cde6f7245..0000000000
--- a/docs/app/Examples/modules/Accordion/Variations/Inverted.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import _ from 'lodash'
-import faker from 'faker'
-import React, { Component } from 'react'
-import { Accordion, Segment } from 'semantic-ui-react'
-
-const panels = _.times(3, () => ({
-  title: faker.lorem.sentence(),
-  content: faker.lorem.paragraphs(),
-}))
-
-export default class AccordionInvertedExample extends Component {
-  render() {
-    return (
-      <Segment inverted>
-        <Accordion panels={panels} inverted />
-      </Segment>
-    )
-  }
-}
diff --git a/docs/app/Examples/modules/Accordion/Variations/index.js b/docs/app/Examples/modules/Accordion/Variations/index.js
index 8697bb29a6..4a39fdd6ac 100644
--- a/docs/app/Examples/modules/Accordion/Variations/index.js
+++ b/docs/app/Examples/modules/Accordion/Variations/index.js
@@ -1,22 +1,20 @@
-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 AccordionTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Variations'>
-        <ComponentExample
-          title='Fluid'
-          description='An accordion can take up the width of its container'
-          examplePath='modules/Accordion/Variations/Fluid'
-        />
-        <ComponentExample
-          title='Inverted'
-          description='An accordion can be formatted to appear on dark backgrounds'
-          examplePath='modules/Accordion/Variations/Inverted'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const AccordionTypesExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Fluid'
+      description='An accordion can take up the width of its container.'
+      examplePath='modules/Accordion/Variations/AccordionExampleFluid'
+    />
+    <ComponentExample
+      title='Inverted'
+      description='An accordion can be formatted to appear on dark backgrounds.'
+      examplePath='modules/Accordion/Variations/AccordionExampleInverted'
+    />
+  </ExampleSection>
+)
+
+export default AccordionTypesExamples
diff --git a/docs/app/Examples/modules/Accordion/index.js b/docs/app/Examples/modules/Accordion/index.js
index d0c39f3a2f..a452332fa4 100644
--- a/docs/app/Examples/modules/Accordion/index.js
+++ b/docs/app/Examples/modules/Accordion/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 AccordionExamples extends Component {
-  render() {
-    return (
-      <div>
-        <Types />
-        <Variations />
-      </div>
-    )
-  }
-}
+const AccordionExamples = () => (
+  <div>
+    <Types />
+    <Variations />
+  </div>
+)
+
+export default AccordionExamples