Merge pull request #64 from donaldwasserman/bug/#21

Added Dropdown/Positioning Options

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']

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'));
+
+});