Add Accordion Component

README.md

@@ -121,7 +121,7 @@ Be sure to check out the above migrations before embarking on a new component.
 
 |    Elements     |   Collections   |      Views      |     Modules     |     Behaviors      |
 |-----------------|-----------------|-----------------|-----------------|--------------------|
-| x Button        | _ Breadcrumb    | _ Advertisement | _ Accordion     | x Form Validation  |
+| x Button        | _ Breadcrumb    | _ Advertisement | x Accordion     | x Form Validation  |
 | x Container     | x Form          | _ Card          | x Checkbox      | *API (NA)*         |
 | x Divider       | x Grid          | _ Comment       | _ Dimmer        | *Visibility (NA)*  |
 | _ Flag          | x Menu          | _ Feed          | x Dropdown      |                    |

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

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import Types from './Types/Types'
+import Variations from './Variations/Variations'
+
+export default class AccordionExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Types />
+        <Variations />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { Accordion, Icon } from 'stardust'
+
+export default class AccordionStyledExample extends Component {
+  render() {
+    return (
+      <Accordion>
+        <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

@@ -0,0 +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 panels={panels} styled />
+    )
+  }
+}

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

@@ -0,0 +1,45 @@
+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 (
+      <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 className='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 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'
+          examplePath='modules/Accordion/Types/Styled'
+        />
+      </ExampleSection>
+    )
+  }
+}

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

@@ -0,0 +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 panels={panels} fluid />
+    )
+  }
+}

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

@@ -0,0 +1,19 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React, { Component } from 'react'
+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 (
+      <Segment className='inverted'>
+        <Accordion panels={panels} inverted />
+      </Segment>
+    )
+  }
+}

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

@@ -0,0 +1,22 @@
+import React, { Component } 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='Varations'>
+        <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>
+    )
+  }
+}

src/index.js

@@ -53,6 +53,7 @@ export Segments from './elements/Segment/SegmentSegments'
 // ----------------------------------------
 // Modules
 // ----------------------------------------
+export Accordion from './modules/Accordion/Accordion'
 export Checkbox from './modules/Checkbox/Checkbox'
 export Progress from './modules/Progress/Progress'