From e8c7aa7c65bc9764ee441903143fd7c6790de0eb Mon Sep 17 00:00:00 2001
From: Donald Wasserman <djwasserman@gmail.com>
Date: Mon, 17 Apr 2017 07:01:26 -0400
Subject: [PATCH] Added hover options for #21

---
 addon/components/zf-dropdown.js               | 24 ++++++++++++++--
 bower.json                                    |  1 -
 package.json                                  |  2 +-
 .../components/zf-dropdown-test.js            | 28 +++++++++++++++++++
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/addon/components/zf-dropdown.js b/addon/components/zf-dropdown.js
index c941647..6e384d9 100644
--- a/addon/components/zf-dropdown.js
+++ b/addon/components/zf-dropdown.js
@@ -1,21 +1,41 @@
 import Ember from 'ember';
 import zfWidget from 'ember-cli-foundation-6-sass/mixins/zf-widget';
 
+const { computed, assert } = Ember;
+
 export default Ember.Component.extend(zfWidget, {
   /** @member Class names */
-  classNames: ['dropdown-pane'],
+  classNames: ['dropdown-pane', '_position'],
 
   /** @member Attribute bindings */
-  attributeBindings: ['data-dropdown', 'data-auto-focus'],
+  attributeBindings: ['data-dropdown', 'data-auto-focus', 'data-hover', 'data-hover-pane'],
 
   /** @member Makes the data attribute binding appear */
   'data-dropdown': ' ',
 
   'data-auto-focus': true,
 
+  /** @member enables hover options **/
+  'zfHover': false,
+  'data-hover': computed('zfHover', function() {
+    return this.get('zfHover');
+  }),
+  'data-hover-pane': computed('zfHover', function() {
+    return this.get('zfHover');
+  }),
+
   /** @member Foundation type */
   'zfType': 'Dropdown',
 
+  /** @private  Hanlde attribute bindings for position **/
+  _position: computed('positionClass', function() {
+    let allowedPositions = ['top', 'right', 'left', 'bottom'];
+    let position = this.get('positionClass');
+    assert('Must provide a valid foundation position for dropdown', allowedPositions.indexOf(position));
+
+    return position;
+  }),
+
   /** @member Foundation specific options */
   'zfOptions': ['hoverDelay', 'hover', 'hoverPane', 'vOffset', 'hOffset', 'positionClass',
                 'trapFocus', 'autoFocus', 'closeOnClick']
diff --git a/bower.json b/bower.json
index 6e5172d..8d96677 100644
--- a/bower.json
+++ b/bower.json
@@ -14,5 +14,4 @@
     "loader.js": "ember-cli/loader.js#3.4.0",
     "qunit": "~1.20.0"
   }
-
 }
diff --git a/package.json b/package.json
index a176010..85325ba 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "babel-register": "^6.18.0",
     "broccoli-funnel": "^1.1.0",
     "broccoli-merge-trees": "^1.2.1",
-    "ember-cli-babel": "^5.1.5",    
+    "ember-cli-babel": "^5.1.5",
     "ember-cli-htmlbars": "^1.0.2",
     "ember-cli-sass": "^6.0.0",
     "ember-cli-version-checker": "^1.2.0"
diff --git a/tests/integration/components/zf-dropdown-test.js b/tests/integration/components/zf-dropdown-test.js
index 7061a39..6c2bc51 100644
--- a/tests/integration/components/zf-dropdown-test.js
+++ b/tests/integration/components/zf-dropdown-test.js
@@ -36,3 +36,31 @@ test('it renders', function(assert) {
   assert.ok(this.$().text().indexOf('Example form in a dropdown.') > -1);
 
 });
+
+
+test('Handles hover and positioning properties', function(assert) {
+
+  this.render(hbs`
+    <button class="button" data-toggle="example-dropdown">Toggle Dropdown</button>
+    {{#zf-dropdown id="example-dropdown" positionClass="top"}}
+      Example form in a dropdown.
+      <form>
+        <div class="row">
+          <div class="medium-6 columns">
+            <label>Name
+              <input type="text" placeholder="Kirk, James T.">
+            </label>
+          </div>
+          <div class="medium-6 columns">
+            <label>Rank
+              <input type="text" placeholder="Captain">
+            </label>
+          </div>
+        </div>
+      </form>
+    {{/zf-dropdown}}
+  `);
+
+  assert.ok(this.$('#example-dropdown').hasClass('top'));
+
+});