Add support for the disabled state

As a negative to active, add a disabled state that adds a class when
ALL child links are also disabled. Similarly, the class name draws from
the child `{{link-to}}` but can be overridden. Users can always opt-out
by defining `disabledClass=false`. Also added tests for this and
updated the README.

README.md

@@ -30,6 +30,7 @@ There are several options available to adjust functionality:
 |---------------|--------------|-----------------------------------------------------------------|
 | tagName       | 'li'         | Components HTML tag name                                        |
 | activeClass   | _Computed_** | Class name to apply when any child `{{link-to}}` is also active |
+| disabledClass | _Computed_** | Class name to apply when ALL child `{{link-to}}`'s are disabled |
 
 ** Default class names are pulled from the child `{{link-to}}`,
 which in turn defaults to 'active'. You can change it on either
@@ -54,7 +55,8 @@ Change the element type by defining the `tagName`.
 
 Changing the `activeClass` on the `{{link-to}}` will also change
 it on the `{{active-link}}`. Or, you can specifically define what
-the `activeClass` will be for the `{{active-link}}`.
+the `activeClass` will be for the `{{active-link}}`. Similarly,
+the `disabledClass` functions the same way.
 
 ```hbs
 {{#active-link}}
@@ -74,6 +76,22 @@ the `activeClass` will be for the `{{active-link}}`.
 </li>
 ```
 
+The active and/or disabled classes can be disabled (pun intended)
+by passing boolean `false`. This causes the class NOT to be applied,
+even if child `{{link-to}}`'s are active/disabled.
+
+```hbs
+{{#active-link disabledClass=false}}
+  {{link-to "Other" "other" disabled=true}}
+{{/active-link}}
+```
+
+```html
+<li>
+    <a href="/" class="disabled">Index</a>
+</li>
+```
+
 This wrapper is also very useful as a container of a dropdown.
 Here is an example of a bootstrap dropdown within a navbar.
 

addon/components/active-link.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'li',
-  classNameBindings: ['_active'],
+  classNameBindings: ['_active','_disabled'],
 
   init() {
     this._super( ...arguments );
@@ -33,6 +33,19 @@ export default Ember.Component.extend({
 
   _active: Ember.computed('hasActiveLinks', 'activeClass', function(){
     return (this.get('hasActiveLinks') ? this.get('activeClass') : false);
+  }),
+
+  allLinksDisabled: Ember.computed('childLinkViews.@each.disabled', function(){
+    return this.get('childLinkViews').isEvery('disabled');
+  }),
+
+  disabledClass: Ember.computed('childLinkViews.@each.disabled', function(){
+    let disabledLink = this.get('childLinkViews').findBy('disabled');
+    return (disabledLink ? disabledLink.get('disabled') : 'disabled');
+  }),
+
+  _disabled: Ember.computed('allLinksDisabled', 'disabledClass', function(){
+    return (this.get('allLinksDisabled') ? this.get('disabledClass') : false);
   })
 
 });

tests/acceptance/active-link-test.js

@@ -40,6 +40,16 @@ test('component should show correct active state', function(assert) {
   });
 });
 
+test('component should show correct disabled state', function(assert) {
+  visit('/');
+
+  andThen(function() {
+    assert.equal(currentPath(), 'index');
+    assert.equal(find('#index-link-disabled li.disabled').length, 1);
+    assert.equal(find('#index-link-disabled li.disabled a.disabled').length, 1);
+  });
+});
+
 test('changed active class should be applied to the proper elements', function(assert) {
   visit('/');
 
@@ -51,3 +61,15 @@ test('changed active class should be applied to the proper elements', function(a
     assert.equal(find('#activelink-active-class a.active').length, 1);
   });
 });
+
+test('changed disabled class should be applied to the proper elements', function(assert) {
+  visit('/');
+
+  andThen(function() {
+    assert.equal(currentPath(), 'index');
+    assert.equal(find('#linkto-disabled-class li.inactive').length, 1);
+    assert.equal(find('#linkto-disabled-class a.inactive').length, 1);
+    assert.equal(find('#activelink-disabled-class li.inactive').length, 1);
+    assert.equal(find('#activelink-disabled-class a.disabled').length, 1);
+  });
+});

tests/dummy/app/styles/app.css

@@ -1,12 +1,28 @@
-li.active {
+li.active,
+span.active {
   background-color: #f49c00;
 }
 a.active {
   background-color: #f45801;
 }
-li.enabled {
+li.enabled,
+span.enabled {
   background-color: #a3f500;
 }
 a.enabled {
   background-color: #47d600;
 }
+li.disabled,
+span.disabled {
+  background-color: #d6d6d6;
+}
+a.disabled {
+  background-color: #bababa;
+}
+li.inactive,
+span.inactive {
+  background-color: #7ec6f6;
+}
+a.inactive {
+  background-color: #2b9cf7;
+}

tests/dummy/app/templates/application.hbs

@@ -1,5 +1,11 @@
 <h2 id="title">Welcome to Ember</h2>
 
+<h4>Class Key</h4>
+<span class="active">.active</span>
+<span class="enabled">.enabled</span>
+<span class="disabled">.disabled</span>
+<span class="inactive">.inactive</span>
+
 <h4>Standard Usage</h4>
 <ul id="index-link">
   {{#active-link}}
@@ -11,6 +17,11 @@
     {{link-to "Other" "other"}}
   {{/active-link}}
 </ul>
+<ul id="index-link-disabled">
+  {{#active-link}}
+    {{link-to "Index (disabled)" "index" disabled=true}}
+  {{/active-link}}
+</ul>
 
 <h4>Changing Active Class</h4>
 <ul id="linkto-active-class">
@@ -24,4 +35,16 @@
   {{/active-link}}
 </ul>
 
+<h4>Changing Disabled Class</h4>
+<ul id="linkto-disabled-class">
+  {{#active-link}}
+    {{link-to "Other" "other" disabledClass="inactive" disabled=true}}
+  {{/active-link}}
+</ul>
+<ul id="activelink-disabled-class">
+  {{#active-link disabledClass="inactive"}}
+    {{link-to "Other" "other" disabled=true}}
+  {{/active-link}}
+</ul>
+
 {{outlet}}