fix(accordion): apply disabled style to accordion-header

- Disable the header if `is-disabled` is true

Closes #3599
Fixes #3233

Author: rvanbaalen

src/accordion/accordion.js

@@ -121,8 +121,8 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
     link: function(scope, element, attr, controller) {
       scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
         if ( heading ) {
-          element.html('');
-          element.append(heading);
+          element.find('span').html('');
+          element.find('span').append(heading);
         }
       });
     }

src/accordion/test/accordion.spec.js

@@ -126,10 +126,10 @@ describe('accordion', function () {
     describe('with static panels', function () {
       beforeEach(function () {
         var tpl =
-          '<accordion>' +
-            '<accordion-group heading="title 1">Content 1</accordion-group>' +
-            '<accordion-group heading="title 2">Content 2</accordion-group>' +
-            '</accordion>';
+              '<accordion>' +
+              '<accordion-group heading="title 1">Content 1</accordion-group>' +
+              '<accordion-group heading="title 2">Content 2</accordion-group>' +
+              '</accordion>';
         element = angular.element(tpl);
         $compile(element)(scope);
         scope.$digest();
@@ -172,9 +172,9 @@ describe('accordion', function () {
       var model;
       beforeEach(function () {
         var tpl =
-          '<accordion>' +
-            '<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
-          '</accordion>';
+              '<accordion>' +
+              '<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
+              '</accordion>';
         element = angular.element(tpl);
         model = [
           {name: 'title 1', content: 'Content 1'},
@@ -217,10 +217,10 @@ describe('accordion', function () {
     describe('is-open attribute', function() {
       beforeEach(function () {
         var tpl =
-          '<accordion>' +
-            '<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
-            '<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
-            '</accordion>';
+              '<accordion>' +
+              '<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
+              '<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
+              '</accordion>';
         element = angular.element(tpl);
         scope.open = { first: false, second: true };
         $compile(element)(scope);
@@ -247,10 +247,10 @@ describe('accordion', function () {
     describe('is-open attribute with dynamic content', function() {
       beforeEach(function () {
         var tpl =
-          '<accordion>' +
-            '<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
-            '<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
-            '</accordion>';
+              '<accordion>' +
+              '<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
+              '<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
+              '</accordion>';
         element = angular.element(tpl);
         scope.items = ['Item 1', 'Item 2', 'Item 3'];
         scope.open1 = true;
@@ -274,9 +274,9 @@ describe('accordion', function () {
     describe('is-open attribute with dynamic groups', function () {
       beforeEach(function () {
         var tpl =
-          '<accordion>' +
-            '<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
-          '</accordion>';
+              '<accordion>' +
+              '<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
+              '</accordion>';
         element = angular.element(tpl);
         scope.groups = [
           {name: 'title 1', content: 'Content 1', open: false},
@@ -310,9 +310,9 @@ describe('accordion', function () {
       var groupBody;
       beforeEach(function () {
         var tpl =
-          '<accordion>' +
-            '<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
-            '</accordion>';
+              '<accordion>' +
+              '<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
+              '</accordion>';
         element = angular.element(tpl);
         scope.disabled = true;
         $compile(element)(scope);
@@ -340,17 +340,38 @@ describe('accordion', function () {
         scope.$digest();
         expect(groupBody.scope().isOpen).toBeTruthy();
       });
+
+      it('should have text-muted styling', function () {
+        expect(findGroupLink(0).find('span:first')).toHaveClass('text-muted');
+      });
     });
 
+    // This is re-used in both the accordion-heading element and the accordion-heading attribute tests
+    function isDisabledStyleCheck() {
+        var tpl =
+              '<accordion ng-init="a = [1,2,3]">' +
+              '<accordion-group heading="I get overridden" is-disabled="true">' +
+              '<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
+              'Body' +
+              '</accordion-group>' +
+              '</accordion>';
+        scope.disabled = true;
+        element = $compile(tpl)(scope);
+        scope.$digest();
+        groups = element.find('.panel');
+
+        expect(findGroupLink(0).find('span').hasClass('text-muted')).toBe(true);
+    }
+
     describe('accordion-heading element', function() {
       beforeEach(function() {
         var tpl =
-          '<accordion ng-init="a = [1,2,3]">' +
-            '<accordion-group heading="I get overridden">' +
+              '<accordion ng-init="a = [1,2,3]">' +
+              '<accordion-group heading="I get overridden">' +
               '<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
               'Body' +
-            '</accordion-group>' +
-          '</accordion>';
+              '</accordion-group>' +
+              '</accordion>';
         element = $compile(tpl)(scope);
         scope.$digest();
         groups = element.find('.panel');
@@ -359,20 +380,25 @@ describe('accordion', function () {
         expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
       });
       it('attaches the same scope to the transcluded heading and body', function() {
-        expect(findGroupLink(0).find('span').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
+        expect(findGroupLink(0).find('span.ng-scope').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
       });
+      it('should wrap the transcluded content in a span', function () {
+        expect(findGroupLink(0).find('span:first').length).toEqual(1);
+      });
+
+      it('should have disabled styling when is-disabled is true', isDisabledStyleCheck);
 
     });
 
     describe('accordion-heading attribute', function() {
       beforeEach(function() {
         var tpl =
-          '<accordion ng-init="a = [1,2,3]">' +
-            '<accordion-group heading="I get overridden">' +
+              '<accordion ng-init="a = [1,2,3]">' +
+              '<accordion-group heading="I get overridden">' +
               '<div accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
               'Body' +
-            '</accordion-group>' +
-          '</accordion>';
+              '</accordion-group>' +
+              '</accordion>';
         element = $compile(tpl)(scope);
         scope.$digest();
         groups = element.find('.panel');
@@ -381,9 +407,11 @@ describe('accordion', function () {
         expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
       });
       it('attaches the same scope to the transcluded heading and body', function() {
-        expect(findGroupLink(0).find('span').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
+        expect(findGroupLink(0).find('span.ng-scope').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
       });
 
+      it('should have disabled styling when is-disabled is true', isDisabledStyleCheck);
+
     });
 
     describe('accordion-heading, with repeating accordion-groups', function() {