Accordion component (#36)

* adding the accordion component and one example of Accordion with nested list

Author: alinais

docs/src/examples/components/Accordion/Types/AccordionExample.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Accordion } from 'stardust'
+import faker from 'faker'
+
+const panels = [
+  {
+    title: 'What is a point?',
+    content: faker.hacker.phrase(),
+  },
+  {
+    title: 'What is a dimension of a point?',
+    content: faker.hacker.phrase(),
+  },
+]
+
+const AccordionExample = () => <Accordion panels={panels} />
+
+export default AccordionExample

docs/src/examples/components/Accordion/Types/AccordionExclusiveExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Accordion } from 'stardust'
+
+const panels = [
+  {
+    title: 'One',
+    content: '2 3 4',
+  },
+  {
+    title: 'Five',
+    content: '6 7 8 9',
+  },
+  {
+    title: "What's next?",
+    content: '10',
+  },
+]
+
+const AccordionExclusiveExample = () => <Accordion panels={panels} exclusive />
+
+export default AccordionExclusiveExample

docs/src/examples/components/Accordion/Types/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Accordion."
+      examplePath="components/Accordion/Types/AccordionExample"
+    />
+    <ComponentExample
+      title="Exclusive"
+      description="An exclusive Accordion."
+      examplePath="components/Accordion/Types/AccordionExclusiveExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Accordion/Variations/AccordionExampleList.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Accordion, List, Image, Button } from 'stardust'
+import { render } from 'react-dom'
+
+class AccordionExampleList extends React.Component {
+  imgStyle = { display: 'block', width: '2rem' }
+  getAvatar = () => <Image src="//placehold.it/100" style={this.imgStyle} />
+
+  firstGroupList = [
+    { key: 'g11', media: this.getAvatar(), header: 'cat' },
+    { key: 'g12', media: this.getAvatar(), header: 'dog' },
+    { key: 'g13', media: this.getAvatar(), header: 'mouse' },
+  ]
+
+  render() {
+    const buttonStyle = { marginLeft: '1.3rem' }
+    const accContent = [
+      <List key="firstGroupList" items={this.firstGroupList} />,
+      <Button key="firstButton" style={buttonStyle}>
+        Add pet
+      </Button>,
+    ]
+
+    const panels = [{ title: 'Pets', content: accContent }]
+
+    return <Accordion panels={panels} />
+  }
+}
+
+export default AccordionExampleList

docs/src/examples/components/Accordion/Variations/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Accordion containing lists as children (non exclusive)"
+      description="An accordion can have different children."
+      examplePath="components/Accordion/Variations/AccordionExampleList"
+    />
+  </ExampleSection>
+)
+
+export default Variations

docs/src/examples/components/Accordion/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Types from './Types'
+import Variations from './Variations'
+
+const AccordionExamples = () => (
+  <div>
+    <Types />
+    <Variations />
+  </div>
+)
+
+export default AccordionExamples

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,168 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React from 'react'
+import cx from 'classnames'
+
+import {
+  AutoControlledComponent as Component,
+  customPropTypes,
+  createComponent,
+  getElementType,
+  getUnhandledProps,
+  childrenExist,
+} from '../../lib'
+import accordionRules from './accordionRules'
+import AccordionTitle from './AccordionTitle'
+import AccordionContent from './AccordionContent'
+
+/**
+ * A standard Accordion.
+ */
+class Accordion extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Index of the currently active panel. */
+    activeIndex: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+    ]),
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /** Initial activeIndex value. */
+    defaultActiveIndex: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+    ]),
+
+    /** Only allow one panel open at a time. */
+    exclusive: PropTypes.bool,
+
+    /**
+     * Called when a panel title is clicked.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All item props.
+     */
+    onTitleClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]),
+
+    /** A bunch of styles we might not need. */
+    styles: PropTypes.object,
+
+    /** Shorthand array of props for Accordion. */
+    panels: customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          content: customPropTypes.itemShorthand,
+          title: customPropTypes.itemShorthand,
+        }),
+      ),
+    ]),
+  }
+
+  static handledProps = [
+    'activeIndex',
+    'as',
+    'children',
+    'className',
+    'defaultActiveIndex',
+    'exclusive',
+    'onTitleClick',
+    'panels',
+    'styles',
+  ]
+
+  static defaultProps = {
+    as: 'accordion',
+    panels: [],
+    exclusive: false,
+  }
+
+  static autoControlledProps = ['activeIndex']
+
+  static Title = AccordionTitle
+  static Content = AccordionContent
+
+  state: any = { activeIndex: [0] }
+
+  getInitialAutoControlledState({ exclusive }) {
+    return { activeIndex: exclusive ? -1 : [-1] }
+  }
+
+  computeNewIndex = index => {
+    const { activeIndex } = this.state
+    const { exclusive } = this.props
+
+    if (exclusive) return index === activeIndex ? -1 : index
+    // check to see if index is in array, and remove it, if not then add it
+    return _.includes(activeIndex, index) ? _.without(activeIndex, index) : [...activeIndex, index]
+  }
+
+  handleTitleOverrides = predefinedProps => ({
+    onClick: (e, titleProps) => {
+      const { index } = titleProps
+      const activeIndex = this.computeNewIndex(index)
+
+      this.trySetState({ activeIndex }, index)
+
+      _.invoke(predefinedProps, 'onClick', e, titleProps)
+      _.invoke(this.props, 'onTitleClick', e, titleProps)
+    },
+  })
+
+  isIndexActive = index => {
+    const { exclusive } = this.props
+    const { activeIndex } = this.state
+
+    return exclusive ? activeIndex === index : _.includes(activeIndex, index)
+  }
+
+  renderPanels = () => {
+    const children = []
+    const { panels } = this.props
+
+    _.each(panels, (panel, index) => {
+      const { content, title } = panel
+      const active = this.isIndexActive(index)
+
+      children.push(
+        AccordionTitle.create(title, {
+          autoGenerateKey: true,
+          defaultProps: { active, index },
+          overrideProps: this.handleTitleOverrides,
+        }),
+      )
+      children.push(
+        AccordionContent.create(content, {
+          autoGenerateKey: true,
+          defaultProps: { active },
+        }),
+      )
+    })
+
+    return children
+  }
+
+  render() {
+    const { styles, className, children } = this.props
+    const rest = getUnhandledProps(Accordion, this.props)
+    const ElementType = getElementType(Accordion, this.props)
+
+    return (
+      <ElementType {...rest} className={cx('ui-accordion', styles.root, className)}>
+        {childrenExist(children) ? children : this.renderPanels()}
+      </ElementType>
+    )
+  }
+}
+
+export default createComponent(Accordion, {
+  rules: accordionRules,
+})

src/components/Accordion/AccordionContent.tsx

@@ -0,0 +1,71 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React from 'react'
+import cx from 'classnames'
+
+import {
+  customPropTypes,
+  createComponent,
+  getElementType,
+  getUnhandledProps,
+  useKeyOnly,
+  childrenExist,
+} from '../../lib'
+import accordionContentRules from './accordionContentRules'
+import accordionContentVariables from './accordionContentVariables'
+
+/**
+ * A standard AccordionContent.
+ */
+const AccordionContent: any = (props: any) => {
+  const ElementType = getElementType(AccordionContent, props)
+  const rest = getUnhandledProps(AccordionContent, props)
+  const { active, children, className, content, styles } = props
+  const classes = cx(useKeyOnly(active, 'active'), 'ui-accordionContent', styles.root, className)
+
+  return (
+    <ElementType {...rest} className={classes}>
+      {childrenExist(children) ? children : content}
+    </ElementType>
+  )
+}
+
+AccordionContent.propTypes = {
+  /** An element type to render as (string or function). */
+  as: customPropTypes.as,
+
+  /** Whether or not the content is visible. */
+  active: PropTypes.bool,
+
+  /** Primary content. */
+  children: PropTypes.node,
+
+  /** Additional classes. */
+  className: PropTypes.string,
+
+  /** Shorthand for primary content. */
+  content: customPropTypes.contentShorthand,
+
+  /** A bunch of styles we might not need. */
+  styles: PropTypes.object,
+
+  /**
+   * Called on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClick: PropTypes.func,
+}
+
+AccordionContent.handledProps = ['as', 'className', 'styles', 'onClick']
+
+AccordionContent.defaultProps = {
+  as: 'accordionContent',
+}
+
+export default createComponent(AccordionContent, {
+  rules: accordionContentRules,
+  variables: accordionContentVariables,
+  shorthand: content => ({ content }),
+})