refactor(Accordion): use title and content sub components

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

@@ -1,29 +1,46 @@
 import React, { Component } from 'react'
-import { Accordion } from 'stardust'
+import { Accordion, Icon } from 'stardust'
 
 export default class AccordionStyledExample extends Component {
   render() {
     return (
       <Accordion>
-        <Accordion.Panel title='What is a dog?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='What kinds of dogs are there?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='How do you acquire a dog?'>
-          Three common ways for a prospective owner to acquire a dog is from pet shops,
-          {' '}private owners, or shelters.
-          <br />
-          <br />
-          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.
-        </Accordion.Panel>
+        <Accordion.Title>
+          <Icon className='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 className='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 className='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>
     )
   }

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

@@ -0,0 +1,42 @@
+import faker from 'faker'
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Accordion } from 'stardust'
+
+const panels = _.times(3, () => ({
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(),
+}))
+
+export default class AccordionActiveIndexExample extends Component {
+  state = { activeIndex: 0 }
+
+  handleSliderChange = (e) => this.setState({
+    activeIndex: Number(e.target.value),
+  })
+
+  handleTitleClick = (e, i) => this.setState({
+    activeIndex: this.state.activeIndex === i ? -1 : i,
+  })
+
+  render() {
+    const { activeIndex } = this.state
+    return (
+      <div>
+        <div>activeIndex: {activeIndex}</div>
+        <input
+          type='range'
+          min='-1'
+          max={panels.length - 1}
+          value={activeIndex}
+          onChange={this.handleSliderChange}
+        />
+        <Accordion
+          activeIndex={activeIndex}
+          panels={panels}
+          onTitleClick={this.handleTitleClick}
+        />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Accordion } from 'stardust'
+import faker from 'faker'
+import _ from 'lodash'
+
+const panels = _.times(3, () => ({
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(),
+}))
+
+export default class AccordionPanelsPropExample extends Component {
+  render() {
+    return (
+      <Accordion panels={panels} />
+    )
+  }
+}

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

@@ -1,30 +1,17 @@
+import _ from 'lodash'
+import faker from 'faker'
 import React, { Component } from 'react'
 import { Accordion } from 'stardust'
 
+const panels = _.times(3, () => ({
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(),
+}))
+
 export default class AccordionStyledExample extends Component {
   render() {
     return (
-      <Accordion styled>
-        <Accordion.Panel title='What is a dog?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='What kinds of dogs are there?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='How do you acquire a dog?'>
-          Three common ways for a prospective owner to acquire a dog is from pet shops,
-          {' '}private owners, or shelters.
-          <br />
-          <br />
-          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.
-        </Accordion.Panel>
-      </Accordion>
+      <Accordion panels={panels} styled />
     )
   }
 }

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

@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
+import { Message } from 'stardust'
+
 export default class AccordionTypesExamples extends Component {
   render() {
     return (
@@ -11,6 +13,26 @@ export default class AccordionTypesExamples extends Component {
           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 className='info'>
+            Panel objects can also define an <code>active</code> key to open/close the panel.
+          </Message>
+        </ComponentExample>
+        <ComponentExample
+          title='Active Index'
+          description='The `activeIndex` prop controls which panel is open.'
+          examplePath='modules/Accordion/Types/ActiveIndex'
+        >
+          <Message className='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'

docs/app/Examples/modules/Accordion/Variations/Fluid.js

@@ -1,30 +1,17 @@
+import _ from 'lodash'
+import faker from 'faker'
 import React, { Component } from 'react'
 import { Accordion } from 'stardust'
 
+const panels = _.times(3, () => ({
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(),
+}))
+
 export default class AccordionFluidExample extends Component {
   render() {
     return (
-      <Accordion fluid>
-        <Accordion.Panel title='What is a dog?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='What kinds of dogs are there?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='How do you acquire a dog?'>
-          Three common ways for a prospective owner to acquire a dog is from pet shops,
-          {' '}private owners, or shelters.
-          <br />
-          <br />
-          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.
-        </Accordion.Panel>
-      </Accordion>
+      <Accordion panels={panels} fluid />
     )
   }
 }

docs/app/Examples/modules/Accordion/Variations/Inverted.js

@@ -1,30 +1,19 @@
+import _ from 'lodash'
+import faker from 'faker'
 import React, { Component } from 'react'
-import { Accordion } from 'stardust'
+import { Accordion, Segment } from 'stardust'
+
+const panels = _.times(3, () => ({
+  title: faker.lorem.sentence(),
+  content: faker.lorem.paragraphs(),
+}))
 
 export default class AccordionInvertedExample extends Component {
   render() {
     return (
-      <Accordion inverted>
-        <Accordion.Panel title='What is a dog?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='What kinds of dogs are there?'>
-          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.
-        </Accordion.Panel>
-        <Accordion.Panel title='How do you acquire a dog?'>
-          Three common ways for a prospective owner to acquire a dog is from pet shops,
-          {' '}private owners, or shelters.
-          <br />
-          <br />
-          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.
-        </Accordion.Panel>
-      </Accordion>
+      <Segment className='inverted'>
+        <Accordion panels={panels} inverted />
+      </Segment>
     )
   }
 }