Merge branch 'feature/guard-master' of https://github.com/stipsan/uik…

…it-react into feature/guard-master

.storybook/webpack.config.js

@@ -1,14 +1,12 @@
 const path = require('path')
 const webpack = require('webpack')
 const autoprefixer = require('autoprefixer')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 module.exports = {
   plugins: [
     new webpack.ProvidePlugin({
       React: 'react',
     }),
-    new ExtractTextPlugin('styles.css', { disable: true }),
   ],
   resolve: {
     root: path.join(__dirname, '..'),
@@ -23,9 +21,7 @@ module.exports = {
     loaders: [
       {
         test: /\.less/,
-        loader: ExtractTextPlugin.extract(
-          'style-loader', 'css!postcss!less'
-        ),
+        loader: 'style-loader!css-loader!postcss-loader!less-loader',
       },
       { test: /\.css$/, loaders: ['style', 'css'] },
       { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [2.3.0] - 2017-03-09
+### Bugfixes
+* Clicking inside a `Dropdown` when in hover mode closes it.
+
 ## [2.2.0] - 2017-03-02
 ### Bugfixes
 * `Dropdown` component was not clearing its hover timeout when unmounting.
@@ -137,7 +141,8 @@ But instead of a conventional OSS project site we decided to host the React Stor
 
 Proved stable enough for a stable semver major version 💃
 
-[Unreleased]: https://github.com/stipsan/uikit-react/compare/v2.2.0...HEAD
+[Unreleased]: https://github.com/stipsan/uikit-react/compare/v2.3.0...HEAD
+[2.3.0]: https://github.com/stipsan/uikit-react/compare/v2.2.0...v2.3.0
 [2.2.0]: https://github.com/stipsan/uikit-react/compare/v2.1.1...v2.2.0
 [2.1.1]: https://github.com/stipsan/uikit-react/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/stipsan/uikit-react/compare/v2.0.0...v2.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uikit-react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "UIkit components built with React",
   "main": "./lib",
   "scripts": {
@@ -53,38 +53,37 @@
     "@kadira/react-storybook-addon-info": "3.3.0",
     "@kadira/storybook": "2.35.3",
     "@kadira/storybook-deployer": "1.2.0",
-    "autoprefixer": "6.7.5",
+    "autoprefixer": "6.7.7",
     "babel-cli": "6.23.0",
-    "babel-core": "6.23.1",
+    "babel-core": "6.24.0",
     "babel-eslint": "7.1.1",
     "babel-jest": "19.0.0",
     "babel-plugin-react-transform": "2.0.2",
     "babel-plugin-transform-react-constant-elements": "6.23.0",
     "babel-plugin-transform-react-inline-elements": "6.22.0",
     "babel-polyfill": "6.23.0",
-    "babel-preset-es2015": "6.22.0",
+    "babel-preset-es2015": "6.24.0",
     "babel-preset-react": "6.23.0",
     "babel-preset-stage-0": "6.22.0",
-    "babel-register": "6.23.0",
+    "babel-register": "6.24.0",
     "coveralls": "2.12.0",
-    "css-loader": "0.26.4",
+    "css-loader": "0.27.3",
     "eslint": "3.16.1",
     "eslint-config-airbnb": "14.1.0",
     "eslint-plugin-import": "2.2.0",
     "eslint-plugin-jsx-a11y": "4.0.0",
     "eslint-plugin-react": "6.10.0",
     "expect": "1.20.2",
-    "extract-text-webpack-plugin": "2.1.0",
     "file-loader": "0.10.1",
     "gh-release": "2.2.1",
     "growl": "1.9.2",
     "jest-cli": "19.0.2",
-    "jsdom": "9.11.0",
+    "jsdom": "9.12.0",
     "json-loader": "0.5.4",
     "less": "2.7.2",
     "less-loader": "3.0.0",
     "mocha": "3.2.0",
-    "postcss-loader": "1.3.2",
+    "postcss-loader": "1.3.3",
     "raw-loader": "^0.5.1",
     "react": "15.4.2",
     "react-addons-test-utils": "15.4.2",
@@ -93,7 +92,7 @@
     "react-height": "2.2.0",
     "react-motion": "0.4.7",
     "react-test-renderer": "15.4.2",
-    "style-loader": "0.13.2",
+    "style-loader": "0.14.1",
     "uikit": "2.27.2",
     "url-loader": "0.5.8"
   },

src/Dropdown.js

@@ -91,7 +91,12 @@ export default class Dropdown extends Component {
       }
       this.setState({ isOpen: true })
     }
+
+    if (this.props.mode === 'hover') {
+      this.setState({ isOpen: true })
+    }
   }
+
   handleMouseLeave = () => {
     if (this.props.remainTime) {
       this.leaveTimeout = setTimeout(() => {
@@ -101,25 +106,35 @@ export default class Dropdown extends Component {
       this.setState({ isOpen: false })
     }
   }
+
   handleClick = () => {
-    this.setState({ isOpen: !this.state.isOpen })
+    if (this.props.mode === 'click') {
+      this.setState({ isOpen: !this.state.isOpen })
+    }
+
+    if (this.props.mode === 'hover') {
+      this.setState({ isOpen: false })
+    }
   }
 
   render() {
+    const { handleMouseEnter, handleMouseLeave, handleClick } = this
+    const { mode, children, component } = this.props
+    const { isOpen } = this.state
     const className = cx(this.props.className, {
-      'uk-open': this.state.isOpen,
+      'uk-open': isOpen,
     })
     const DropdownProps = {
-      'aria-expanded': this.state.isOpen,
+      'aria-expanded': 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,
+      onClick: handleClick,
+      onMouseEnter: mode === 'hover' && handleMouseEnter,
+      onMouseLeave: mode === 'hover' && handleMouseLeave,
+      children,
     }
     return (
-      createElement(this.props.component, DropdownProps)
+      createElement(component, DropdownProps)
     )
   }
 }

src/__tests__/Dropdown-test.js

@@ -45,13 +45,13 @@ describe('Dropdown', () => {
     expect(instance.state.isOpen).toBeTruthy()
 
     component = renderer.create(
-      <Dropdown delay={400} remainTime={0}>
+      <Dropdown delay={400} mode="hover" remainTime={0}>
         <button className="uk-button">Hover <i className="uk-icon-caret-down" /></button>
       </Dropdown>
     )
     instance = component.getInstance()
     instance.handleMouseEnter()
-    expect(instance.state.isOpen).toBeFalsy()
+    expect(instance.state.isOpen).toBeTruthy()
 
     jest.runAllTimers()
     tree = component.toJSON()
@@ -135,7 +135,7 @@ describe('Dropdown', () => {
     unsubscribe()
   })
 
-  it.skip('closes when clicked when in hover mode', () => {
+  it('closes when clicked when in hover mode', () => {
     const component = renderer.create(
       <Dropdown mode="hover">
         <button className="uk-button">Hover <i className="uk-icon-caret-down" /></button>

src/__tests__/__snapshots__/Dropdown-test.js.snap

@@ -65,7 +65,7 @@ exports[`Dropdown changes the class when hovered 1`] = `
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-button-dropdown"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -85,7 +85,7 @@ exports[`Dropdown changes the class when hovered 2`] = `
   aria-expanded={true}
   aria-haspopup={true}
   className="uk-button-dropdown uk-open"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -105,7 +105,7 @@ exports[`Dropdown changes the class when hovered 3`] = `
   aria-expanded={true}
   aria-haspopup={true}
   className="uk-button-dropdown uk-open"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -125,7 +125,7 @@ exports[`Dropdown changes the class when hovered 4`] = `
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-button-dropdown"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -145,7 +145,7 @@ exports[`Dropdown changes the class when hovered 5`] = `
   aria-expanded={true}
   aria-haspopup={true}
   className="uk-button-dropdown uk-open"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -165,7 +165,7 @@ exports[`Dropdown changes the class when hovered 6`] = `
   aria-expanded={true}
   aria-haspopup={true}
   className="uk-button-dropdown uk-open"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -185,7 +185,7 @@ exports[`Dropdown closes sibling Dropdown on open 1`] = `
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-button-dropdown"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -205,7 +205,7 @@ exports[`Dropdown closes sibling Dropdown on open 2`] = `
   aria-expanded={true}
   aria-haspopup={true}
   className="uk-button-dropdown uk-open"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -225,7 +225,7 @@ exports[`Dropdown closes sibling Dropdown on open 3`] = `
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-button-dropdown"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -240,12 +240,72 @@ exports[`Dropdown closes sibling Dropdown on open 3`] = `
 </div>
 `;
 
+exports[`Dropdown closes when clicked when in hover mode 1`] = `
+<div
+  aria-expanded={true}
+  aria-haspopup={true}
+  className="uk-button-dropdown uk-open"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    className="uk-button"
+  >
+    Hover 
+    <i
+      className="uk-icon-caret-down"
+    />
+  </button>
+</div>
+`;
+
+exports[`Dropdown closes when clicked when in hover mode 2`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="uk-button-dropdown"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    className="uk-button"
+  >
+    Hover 
+    <i
+      className="uk-icon-caret-down"
+    />
+  </button>
+</div>
+`;
+
+exports[`Dropdown closes when clicked when in hover mode 3`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="uk-button-dropdown"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <button
+    className="uk-button"
+  >
+    Hover 
+    <i
+      className="uk-icon-caret-down"
+    />
+  </button>
+</div>
+`;
+
 exports[`Dropdown renders correctly 1`] = `
 <div
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-button-dropdown"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -265,7 +325,7 @@ exports[`Dropdown renders correctly 2`] = `
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-parent"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -283,7 +343,7 @@ exports[`should be closed 1`] = `
   aria-expanded={false}
   aria-haspopup={true}
   className="uk-button-dropdown"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
@@ -303,7 +363,7 @@ exports[`should be open 1`] = `
   aria-expanded={true}
   aria-haspopup={true}
   className="uk-button-dropdown uk-open"
-  onClick={false}
+  onClick={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >