Merge branch 'master' into greenkeeper-eslint-plugin-jsx-a11y-2.1.0

stipsan · Aug 11, 2016 · 70b6d05 · 70b6d05
2 parents c7c4eb7 + 19f4013
commit 70b6d05
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import { Component, PropTypes } from 'react'
+import { Component, PropTypes, createElement } from 'react'
 
 export default class Dropdown extends Component {
   static propTypes = {
@@ -9,12 +9,15 @@ export default class Dropdown extends Component {
     mode: PropTypes.oneOf(['hover', 'click']).isRequired,
     remainTime: PropTypes.number.isRequired,
     className: PropTypes.string,
+    component: PropTypes.node,
   }
 
   static defaultProps = {
     mode: 'hover',
     remainTime: 800,
     delay: 0,
+    component: 'div',
+    className: 'uk-button-dropdown',
   }
 
   state = {
@@ -46,20 +49,20 @@ export default class Dropdown extends Component {
     this.setState({ isOpen: !this.state.isOpen })
   }
   render() {
-    const className = cx('uk-button-dropdown', {
+    const className = cx(this.props.className, {
       'uk-open': this.state.isOpen,
     })
+    const DropdownProps = {
+      'aria-expanded': this.state.isOpen,
+      'aria-haspopup': true,
+      className,
+      onClick: this.props.mode === 'click' && this.handleClick,
+      onMouseEnter: this.props.mode === 'hover' && this.handleMouseEnter,
+      onMouseLeave: this.props.mode === 'hover' && this.handleMouseLeave,
+      children: this.props.children,
+    }
     return (
-      <div
-        aria-expanded={this.state.isOpen}
-        aria-haspopup="true"
-        className={className}
-        onClick={this.props.mode === 'click' && this.handleClick}
-        onMouseEnter={this.props.mode === 'hover' && this.handleMouseEnter}
-        onMouseLeave={this.props.mode === 'hover' && this.handleMouseLeave}
-      >
-        {this.props.children}
-      </div>
+      createElement(this.props.component, DropdownProps)
     )
   }
 }
diff --git a/src/stories/dropdown.js b/src/stories/dropdown.js
@@ -41,6 +41,33 @@ storiesOf('Dropdown', module)
           <Menu />
         </Dropdown>
       </div>
-  ),
-  { header: false, inline: true, propTables: [Dropdown] }
-)
+    ),
+    { header: false, inline: true, propTables: [Dropdown] }
+    )
+    .add('Advanced', () => (
+      <div className="uk-margin-bottom">
+        <nav className="uk-navbar">
+          <ul className="uk-navbar-nav">
+            <li className="uk-active"><a>Active</a></li>
+            <li><a href="">Item</a></li>
+            <Dropdown className="uk-parent" component="li" >
+              <a>
+                Parent <i className="uk-icon-caret-down" />
+              </a>
+              <div className="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
+                <ul className="uk-nav uk-nav-dropdown">
+                  <li><a className="uk-warning" href="#">Item</a></li>
+                  <li><a href="#">Another item</a></li>
+                  <li className="uk-nav-header">Header</li>
+                  <li><a href="#">Item</a></li>
+                  <li><a href="#">Another item</a></li>
+                  <li className="uk-nav-divider" />
+                  <li><a href="#">Separated item</a></li>
+                </ul>
+              </div>
+            </Dropdown>
+          </ul>
+
+        </nav>
+      </div>
+    ))