style(Accordion): update docs to the latest standards

docs/app/Examples/modules/Accordion/Types/ActiveIndex.js → 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

docs/app/Examples/modules/Accordion/Types/PanelsProp.js → 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

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

docs/app/Examples/modules/Accordion/Variations/Fluid.js → docs/app/Examples/modules/Accordion/Types/AccordionExampleStyled.js

@@ -1,17 +1,15 @@
 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, () => ({
   title: faker.lorem.sentence(),
   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

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

docs/app/Examples/modules/Accordion/Types/Styled.js → docs/app/Examples/modules/Accordion/Variations/AccordionExampleFluid.js

@@ -1,17 +1,15 @@
 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, () => ({
   title: faker.lorem.sentence(),
   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

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

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

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