Refactor the Dropdown

stipsan · Aug 11, 2016 · 849fc3c · 849fc3c
1 parent 8ebc30b
commit 849fc3c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -17,7 +17,7 @@ export default class Dropdown extends Component {
     remainTime: 800,
     delay: 0,
     component: 'div',
-    'aria-haspopup': true,
+    className: 'uk-button-dropdown',
   }
 
   state = {
@@ -49,7 +49,7 @@ 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 = {

diff --git a/src/stories/dropdown.js b/src/stories/dropdown.js
@@ -27,17 +27,14 @@ storiesOf('Dropdown', module)
     `,
     () => (
       <div className="uk-margin-bottom">
-        <Dropdown component="div">
+        <Dropdown>
           <button className="uk-button">
             Hover <i className="uk-icon-caret-down" />
           </button>
           <Menu />
         </Dropdown>
         <br /> <br />
-        <Dropdown
-          component="div"
-          mode="click"
-        >
+        <Dropdown mode="click">
           <button className="uk-button">
             Click me <i className="uk-icon-caret-down" />
           </button>
@@ -53,11 +50,21 @@ storiesOf('Dropdown', module)
           <ul className="uk-navbar-nav">
             <li className="uk-active"><a>Active</a></li>
             <li><a href="">Item</a></li>
-            <Dropdown component="li">
-              <a className="uk-button">
-                Hover <i className="uk-icon-caret-down" />
+            <Dropdown className="uk-parent" component="li" >
+              <a>
+                Parent <i className="uk-icon-caret-down" />
               </a>
-              <Menu />
+              <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>