Submenu: add support for disabled attr (#11)

* update sub-menu component

* update css

* update changelog

Author: Loz Jackson

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+* [#11](https://github.com/lozjackson/ember-ui-components/pull/11) [BUGFIX] The `SubMenuComponent` now supports the `disabled` attribute.
+
 * [#10](https://github.com/lozjackson/ember-ui-components/pull/10) [FEATURE] Add `TabsComponent`.
 
 ### v0.9.2 2016-11-06

addon/components/uic-sub-menu.js

@@ -35,6 +35,21 @@ export default Ember.Component.extend( {
   */
   classNames: ['uic-sub-menu'],
 
+  /**
+    @property attributeBindings
+    @type {Array}
+    @private
+    @default `['disabled']`
+  */
+  attributeBindings: ['disabled'],
+
+  /**
+    @property disabled
+    @type {Boolean}
+    @default `false`
+  */
+  disabled: false,
+
   /**
     @property showMenu
     @type {Boolean}
@@ -67,7 +82,9 @@ export default Ember.Component.extend( {
   */
   mouseEnter() {
     run.cancel(this.get('_event'));
-    this.set('showMenu', true);
+    if (!this.get('disabled')) {
+      this.set('showMenu', true);
+    }
   },
 
   /**

addon/styles/ember-ui-components.css

@@ -1110,6 +1110,13 @@ li.uic-sub-menu:hover > div > svg.svg-triangle polygon {
   stroke:#ffffff;
   stroke-width:1;
 }
+menuitem[disabled].uic-sub-menu > div > svg.svg-triangle polygon,
+li[disabled].uic-sub-menu > div > svg.svg-triangle polygon,
+menuitem[disabled].uic-sub-menu:hover > div > svg.svg-triangle polygon,
+li[disabled].uic-sub-menu:hover > div > svg.svg-triangle polygon {
+	fill: #ccc !important;
+  stroke:#ccc !important;
+}
 .uic-context-menu-container menuitem[disabled],
 .uic-context-menu-container li[disabled],
 .uic-context-menu-container li.context-menu-disabled,

tests/integration/components/uic-sub-menu-test.js

@@ -6,24 +6,25 @@ moduleForComponent('uic-sub-menu', 'Integration | Component | uic sub menu', {
 });
 
 test('it renders', function(assert) {
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });"
-
   this.render(hbs`{{uic-sub-menu}}`);
-
   assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:"
   this.render(hbs`
     {{#uic-sub-menu showMenu=true}}
       sub menu...
     {{/uic-sub-menu}}
   `);
-
   assert.equal(this.$().text().trim(), 'sub menu...');
 });
 
 test('has correct tag and class', function(assert) {
   this.render(hbs`{{uic-sub-menu}}`);
   assert.equal(this.$('menuitem.uic-sub-menu').length, 1);
 });
+
+test('disabled', function(assert) {
+  this.set('disabled', true);
+  this.render(hbs`{{uic-sub-menu disabled=disabled}}`);
+  assert.equal(this.$('menuitem[disabled].uic-sub-menu').length, 1);
+  this.set('disabled', false);
+  assert.equal(this.$('menuitem[disabled].uic-sub-menu').length, 0);
+});

tests/unit/components/uic-sub-menu-test.js

@@ -35,6 +35,20 @@ test('classNames', function(assert) {
   assert.equal(component.get('classNames')[1], 'uic-sub-menu');
 });
 
+test('attributeBindings', function(assert) {
+  assert.expect(1);
+  let component = this.subject();
+  this.render();
+  assert.deepEqual(component.get('attributeBindings'), ['disabled']);
+});
+
+test('disabled should be false', function(assert) {
+  assert.expect(1);
+  let component = this.subject();
+  this.render();
+  assert.equal(component.get('disabled'), false);
+});
+
 test('showMenu', function(assert) {
   assert.expect(1);
   var component = this.subject();
@@ -58,6 +72,18 @@ test('mouseEnter', function(assert) {
   assert.equal(component.get('showMenu'), true);
 });
 
+test('mouseEnter - disabled', function(assert) {
+  assert.expect(1);
+  var component = this.subject();
+  component.setProperties({
+    showMenu: false,
+    disabled: true
+  });
+  this.render();
+  run(() => component.mouseEnter());
+  assert.equal(component.get('showMenu'), false);
+});
+
 test('mouseLeave', function(assert) {
   assert.expect(1);
   var component = this.subject();