breaking(Accordion): Refactor component

docs/app/Examples/modules/Accordion/Advanced/AccordionExampleForm.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Accordion, Button, Form, Segment } from 'semantic-ui-react'
+
+const panels = [
+  {
+    title: 'Optional Details',
+    content: {
+      as: Form.Input,
+      key: 'content',
+      label: 'Maiden Name',
+      placeholder: 'Maiden Name',
+    },
+  },
+]
+
+const AccordionExampleForm = () => (
+  <Segment>
+    <Form>
+      <Form.Group widths={2}>
+        <Form.Input label='First Name' placeholder='First Name' />
+        <Form.Input label='First Name' placeholder='Last Name' />
+      </Form.Group>
+      <Accordion as={Form.Field} panels={panels} />
+
+      <Button secondary>Sign Up</Button>
+    </Form>
+  </Segment>
+)
+
+export default AccordionExampleForm

docs/app/Examples/modules/Accordion/Advanced/AccordionExampleMenu.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import { Accordion, Form, Menu } from 'semantic-ui-react'
+
+const ColorForm = (
+  <Form>
+    <Form.Group grouped>
+      <Form.Checkbox label='Red' name='color' value='red' />
+      <Form.Checkbox label='Orange' name='color' value='orange' />
+      <Form.Checkbox label='Green' name='color' value='green' />
+      <Form.Checkbox label='Blue' name='color' value='blue' />
+    </Form.Group>
+  </Form>
+)
+
+const SizeForm = (
+  <Form>
+    <Form.Group grouped>
+      <Form.Radio label='Small' name='size' type='radio' value='small' />
+      <Form.Radio label='Medium' name='size' type='radio' value='medium' />
+      <Form.Radio label='Large' name='size' type='radio' value='large' />
+      <Form.Radio label='X-Large' name='size' type='radio' value='x-large' />
+    </Form.Group>
+  </Form>
+)
+
+export default class AccordionExampleMenu extends Component {
+  state = { activeIndex: 0 }
+
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
+
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Accordion as={Menu} vertical>
+        <Menu.Item>
+          <Accordion.Title
+            active={activeIndex === 0}
+            content='Size'
+            index={0}
+            onClick={this.handleClick}
+          />
+          <Accordion.Content active={activeIndex === 0} content={SizeForm} />
+        </Menu.Item>
+
+        <Menu.Item>
+          <Accordion.Title
+            active={activeIndex === 1}
+            content='Colors'
+            index={1}
+            onClick={this.handleClick}
+          />
+          <Accordion.Content active={activeIndex === 1} content={ColorForm} />
+        </Menu.Item>
+      </Accordion>
+    )
+  }
+}

docs/app/Examples/modules/Accordion/Advanced/AccordionExampleNested.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const level1Panels = [
+  { title: 'Level 1A', content: 'Level 1A Contents' },
+  { title: 'Level 1B', content: 'Level 1B Contents' },
+]
+
+const Level1Content = (
+  <div>
+    Welcome to level 1
+    <Accordion.Accordion panels={level1Panels} />
+  </div>
+)
+
+const level2Panels = [
+  { title: 'Level 2A', content: 'Level 2A Contents' },
+  { title: 'Level 2B', content: 'Level 2B Contents' },
+]
+
+const Level2Content = (
+  <div>
+    Welcome to level 2
+    <Accordion.Accordion panels={level2Panels} />
+  </div>
+)
+
+const rootPanels = [
+  { title: 'Level 1', content: { content: Level1Content, key: 'content-1' } },
+  { title: 'Level 2', content: { content: Level2Content, key: 'content-2' } },
+]
+
+const AccordionExampleNested = () => (
+  <Accordion defaultActiveIndex={0} panels={rootPanels} styled />
+)
+
+export default AccordionExampleNested

docs/app/Examples/modules/Accordion/Advanced/AccordionExampleShorthand.js

@@ -0,0 +1,27 @@
+import faker from 'faker'
+import _ from 'lodash'
+import React from 'react'
+import { Accordion, Label, Message } from 'semantic-ui-react'
+
+const panels = _.times(3, i => ({
+  title: {
+    content: <Label color='blue' content={faker.lorem.sentence()} />,
+    key: `title-${i}`,
+  },
+  content: {
+    content: (
+      <Message
+        info
+        header={faker.lorem.sentence()}
+        content={faker.lorem.paragraph()}
+      />
+    ),
+    key: `content-${i}`,
+  },
+}))
+
+const AccordionExampleShorthand = () => (
+  <Accordion defaultActiveIndex={1} panels={panels} />
+)
+
+export default AccordionExampleShorthand

docs/app/Examples/modules/Accordion/Advanced/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const AccordionAdvancedExamples = () => (
+  <ExampleSection title='Advanced'>
+    <ComponentExample
+      title='Nested Accordions'
+      description='An accordion can have multiple levels of nested content.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleNested'
+    />
+    <ComponentExample
+      title='Form Fields'
+      description={[
+        'An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form',
+        'fields.',
+      ].join(' ')}
+      examplePath='modules/Accordion/Advanced/AccordionExampleForm'
+    />
+    <ComponentExample
+      title='Accordion Menu'
+      description='An accordion can be used to create content drawers inside a menu.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleMenu'
+    />
+    <ComponentExample
+      title='Shorthand'
+      description='Panels of Accordion can be rendered via shorthand prop.'
+      examplePath='modules/Accordion/Advanced/AccordionExampleShorthand'
+    />
+  </ExampleSection>
+)
+
+export default AccordionAdvancedExamples

docs/app/Examples/modules/Accordion/Types/AccordionExampleStandard.js

@@ -1,45 +1,59 @@
-import React from 'react'
+import React, { Component } 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 class AccordionExampleStandard extends Component {
+  state = { activeIndex: 0 }
 
-export default AccordionExampleStandard
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
+
+    this.setState({ activeIndex: newIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+
+    return (
+      <Accordion>
+        <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What is a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          <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 active={activeIndex === 1} index={1} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          What kinds of dogs are there?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          <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 active={activeIndex === 2} index={2} onClick={this.handleClick}>
+          <Icon name='dropdown' />
+          How do you acquire a dog?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          <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>
+    )
+  }
+}

docs/app/Examples/modules/Accordion/Types/AccordionExampleStandardShorthand.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Accordion } from 'semantic-ui-react'
+
+const panels = [
+  {
+    title: 'What is a dog?',
+    content: [
+      '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.',
+    ].join(' '),
+  },
+  {
+    title: 'What kinds of dogs are there?',
+    content: [
+      '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.',
+    ].join(' '),
+  },
+  {
+    title: 'How do you acquire a dog?',
+    content: {
+      content: (
+        <div>
+          <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>
+        </div>
+      ),
+      key: 'content-dog',
+    },
+  },
+]
+
+const AccordionExampleStandardShorthand = () => (
+  <Accordion defaultActiveIndex={0} panels={panels} />
+)
+
+export default AccordionExampleStandardShorthand