feat(Sidebar): add component

README.md

@@ -112,7 +112,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
 | ✓ List          |                 |                 | ✓ Rating        |                    |
 | ✓ Loader        |                 |                 | ✓ Search        |                    |
 | ✓ Rail          |                 |                 |   Shape         |                    |
-| ✓ Reveal        |                 |                 |   Sidebar       |                    |
+| ✓ Reveal        |                 |                 | ✓ Sidebar       |                    |
 | ✓ Segment       |                 |                 |   Sticky        |                    |
 | ✓ Step          |                 |                 |   Tab           |                    |
 |                 |                 |                 |   Transition    |                    |

src/collections/Sidebar/Sidebar.js

@@ -0,0 +1,84 @@
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+
+import {
+  AutoControlledComponent as Component,
+  META,
+  customPropTypes,
+  getUnhandledProps,
+  getElementType,
+  useKeyOnly,
+} from '../../lib'
+
+const _meta = {
+  name: 'Sidebar',
+  type: META.TYPES.MODULE,
+  props: {
+    animation: ['overlay', 'push', 'scale down', 'uncover', 'slide out', 'slide along'],
+    direction: ['top', 'right', 'bottom', 'left'],
+    width: ['very thin', 'thin', 'wide', 'very wide'],
+  },
+}
+
+/**
+ * A sidebar hides additional content beside a page.
+ */
+class Sidebar extends Component {
+  static _meta = _meta
+
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Animation style. */
+    animation: PropTypes.oneOf(Sidebar._meta.props.animation),
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /** Initial value of visible. */
+    defaultVisible: PropTypes.bool,
+
+    /** Direction the sidebar should appear on */
+    direction: PropTypes.oneOf(Sidebar._meta.props.direction),
+
+    /** Controls whether or not the sidebar is visible on the page. */
+    visible: PropTypes.bool,
+
+    /** Sidebar width */
+    width: PropTypes.oneOf(Sidebar._meta.props.width),
+  }
+
+  static defaultProps = {
+    direction: 'left',
+  }
+
+  static autoControlledProps = [
+    'visible',
+  ]
+
+  render() {
+    const { animation, className, children, direction, visible, width } = this.props
+
+    const classes = cx(
+      'ui',
+      'sidebar',
+      'animating', // should be dynamically set only when animating
+      direction,
+      width,
+      animation,
+      useKeyOnly(visible, 'visible'),
+      className
+    )
+
+    const rest = getUnhandledProps(Sidebar, this.props)
+    const ElementType = getElementType(Sidebar, this.props)
+
+    return <ElementType {...rest} className={classes}>{children}</ElementType>
+  }
+}
+
+export default Sidebar

src/collections/Sidebar/index.js

@@ -0,0 +1 @@
+export default from './Sidebar'

src/index.js

@@ -36,6 +36,8 @@ export { default as MessageHeader } from './collections/Message/MessageHeader'
 export { default as MessageItem } from './collections/Message/MessageItem'
 export { default as MessageList } from './collections/Message/MessageList'
 
+export { default as Sidebar } from './collections/Sidebar'
+
 export { default as Table } from './collections/Table'
 export { default as TableBody } from './collections/Table/TableBody'
 export { default as TableCell } from './collections/Table/TableCell'

test/specs/collections/Sidebar/Sidebar-test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import _ from 'lodash'
+
+import Sidebar from 'src/collections/Sidebar/Sidebar'
+import * as common from 'test/specs/commonTests'
+
+describe('Sidebar', () => {
+  common.isConformant(Sidebar)
+  common.rendersChildren(Sidebar)
+  common.hasUIClassName(Sidebar)
+
+  common.propKeyOnlyToClassName(Sidebar, 'visible')
+  common.propValueOnlyToClassName(Sidebar, 'width')
+  common.propValueOnlyToClassName(Sidebar, 'animation')
+
+  it('renders a <div /> element', () => {
+    shallow(<Sidebar />)
+      .should.have.tagName('div')
+  })
+  it('renders children of the sidebar', () => {
+    const wrapper = mount(<Sidebar><span /></Sidebar>)
+    wrapper.children().at(0).should.have.tagName('span')
+  })
+  it('adds direction value to className', () => {
+    _.each(_.get(Sidebar, '_meta.props.direction'), propValue => {
+      shallow(<Sidebar direction={propValue} />).should.have.className(propValue)
+    })
+  })
+})