Dropdown

examples/index.js

@@ -19,6 +19,7 @@ import {
   Details,
   DonutChart,
   DonutSlice,
+  Dropdown,
   Flash,
   Heading,
   Label,
@@ -181,7 +182,7 @@ const Index = props => (
           </Details>
         </Block>
         <Block my={4}>
-          <Heading tag='h2'>With render prop</Heading>
+          <Heading tag='h2'>With children as a function</Heading>
           <Details>{({open, toggle}) => (
             <React.Fragment>
               <summary className='btn' onClick={toggle}>{open ? 'Hide' : 'Show'}</summary>
@@ -190,6 +191,42 @@ const Index = props => (
           )}
           </Details>
         </Block>
+        <Block my={4}>
+          <Heading tag='h2'>With render prop</Heading>
+          <Details render={() => 'hi'}/>
+        </Block>
+      </Example>
+      <Example name="Dropdown">
+        <Block my={4}>
+          <Heading tag="h2">Dropdown Primary</Heading>
+          <Dropdown scheme={"primary"}>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+          </Dropdown>
+        </Block>
+        <Block my={4}>
+          <Heading tag="h2">Dropdown</Heading>
+          <Dropdown>
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+          </Dropdown>
+        </Block>
+        <Block my={4}>
+          <Heading tag="h2">Dropdown with title</Heading>
+          <Dropdown title="Options">
+            <ul>
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+          </Dropdown>
+        </Block>
       </Example>
       <Example name='DonutChart'>
         <Box mb={2}>

src/Button.js

@@ -1,31 +1,47 @@
 import React from 'react'
 import classnames from 'classnames'
+import PropTypes from 'prop-types'
 
-const Button = ({
-  block,
+function Button({
+  tag: Tag = 'button',
   children,
-  disabled,
+  size,
+  block,
   linkStyle,
-  onClick,
+  grouped,
   scheme,
-  size
-}) => (
-    <button
-      disabled={disabled}
-      onClick={disabled ? undefined : onClick}
-      type="button"
-      className={classnames(
-        linkStyle ? 'btn-link' : 'btn',
-        scheme ? `btn-${scheme}` : null,
-        {
-          'btn-sm': size === 'small',
-          'btn-large': size === 'large',
-          'btn-block': block,
-        }
-      )}
-    >
+  onClick,
+  disabled,
+  ...props
+}) {
+  const classes = classnames(
+    {
+      'btn': !linkStyle,
+      'btn-link': linkStyle,
+      'btn-sm': size === 'sm',
+      'btn-large': size === 'large',
+      'btn-block': block,
+      'BtnGroup-item': grouped,
+    },
+    scheme ? `btn-${scheme}` : null
+  );
+
+  return (
+    <Tag {...props} type="button" disabled={disabled} onClick={disabled ? undefined : onClick} className={classes}>
       {children}
-    </button>
-)
+    </Tag>
+  )
+}
+
+Button.propTypes = {
+  block: PropTypes.bool,
+  grouped: PropTypes.bool,
+  scheme: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'large']),
+  tag: PropTypes.oneOf(['button', 'a', 'summary']),
+  linkStyle: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+}
 
 export default Button

src/ButtonPrimary.js

@@ -1,24 +1,6 @@
 import React from 'react'
-import classnames from 'classnames'
+import Button from './Button'
 
-const ButtonPrimary = ({ size, disabled, block, linkStyle, onClick, children }) => (
-    <button
-      disabled={disabled}
-      onClick={onClick}
-      type="button"
-      className={classnames(
-        'btn-primary',
-        {
-          'btn': !linkStyle,
-          'btn-link': linkStyle,
-          'btn-sm': size === 'small',
-          'btn-large': size === 'large',
-          'btn-block': block,
-        }
-      )}
-    >
-      {children}
-    </button>
-)
+const ButtonPrimary = props => <Button {...props} scheme='primary' />
 
 export default ButtonPrimary

src/Details.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 function getRenderer(children) {
-  return typeof children === 'function'
-    ? children
-    : () => children
+  return typeof children === 'function' ? children : () => children
 }
 
-export default class Details extends React.PureComponent {
+export default class Details extends React.Component {
   constructor(props) {
     super(props)
     this.state = {open: Boolean(props.open)}
@@ -18,17 +17,20 @@ export default class Details extends React.PureComponent {
     if (event) {
       event.preventDefault()
     }
-    this.setState({open: !this.state.open})
+    this.setState({ open: !this.state.open })
   }
 
   render() {
     const {
+      className,
       children,
       render = getRenderer(children),
+      ...props
     } = this.props
-    const {open} = this.state
+    const { open } = this.state
+
     return (
-      <details open={open} className='details-reset'>
+      <details {...props} className={classnames('details-reset', className)} open={open}>
         {render({open, toggle: this.toggle})}
       </details>
     )