[DW-50]: New features for accordion-group component (#1851)

[ADF-557] -  Add a new property called showIcon as input to hide/show filter icons.

ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html

@@ -1,15 +1,17 @@
 <div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
     <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
-        <div *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
+        <div (click)="onHeadingClick()">
-            <i class="material-icons">{{headingIcon}}</i>
+            <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
+                <i class="material-icons">{{headingIcon}}</i>
+            </div>
+            <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
         </div>
-        <div class="adf-panel-heading-text">{{heading}}</div>
+        <div id="accordion-button" *ngIf="!isGroupContentEmpty()" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
-        <div id="accordion-button" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
             <i class="material-icons">{{getAccordionIcon()}}</i>
         </div>
     </div>
     <div class="adf-panel-collapse" [hidden]="!isOpen">
-        <div class="adf-panel-body">
+        <div class="adf-panel-body" #contentWrapper>
             <ng-content></ng-content>
         </div>
     </div>

ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts

@@ -45,14 +45,15 @@ describe('AccordionGroupComponent', () => {
     it('should be closed by default', () => {
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
+            let headerText = element.querySelector('#heading-text');
-            expect(headerToggle.innerText).toEqual('expand_more');
-            let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
             expect(headerText.innerText).toEqual('Fake Header');
-            let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
             expect(headerIcon.innerText).toEqual('fake-icon');
+            let headerToggle = element.querySelector('#accordion-button .material-icons');
+            expect(headerToggle.innerText).toEqual('expand_more');
         });
     });
 
@@ -60,17 +61,53 @@ describe('AccordionGroupComponent', () => {
         component.isSelected = true;
         component.heading = 'Fake Header';
         component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
         fixture.detectChanges();
         element.querySelector('#accordion-button').click();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
+            let headerText = element.querySelector('#heading-text');
             expect(headerText.innerText).toEqual('Fake Header');
-            let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
             expect(headerIcon.innerText).toEqual('fake-icon');
-            let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
+            let headerToggle = element.querySelector('#accordion-button .material-icons');
             expect(headerToggle.innerText).toEqual('expand_less');
         });
     });
 
+    it('should hide expand icon by default', () => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerIcon = element.querySelector('#accordion-button');
+            expect(headerIcon).toBeNull();
+        });
+    });
+
+    it('should show expand icon by default', () => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerIcon = element.querySelector('#accordion-button');
+            expect(headerIcon).toBeDefined();
+        });
+    });
+
+    it('should emit an event when a heading clicked', (done) => {
+        component.heading = 'Fake Header';
+        fixture.detectChanges();
+        let heading: string = component.heading;
+        component.headingClick.subscribe((headName: string) => {
+            expect(headName).toBeDefined();
+            expect(headName).toEqual(heading);
+            done();
+        });
+
+        component.onHeadingClick();
+    });
+
 });

ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, Output, EventEmitter, ViewChild } from '@angular/core';
 import { AccordionComponent } from './accordion.component';
 
 @Component({
@@ -28,12 +28,18 @@ export class AccordionGroupComponent implements OnDestroy {
     private _isOpen: boolean = false;
     private _isSelected: boolean = false;
 
+    @ViewChild('contentWrapper')
+    contentWrapper: any;
+
     @Input()
     heading: string;
 
     @Input()
     headingIcon: string;
 
+    @Output()
+    headingClick: EventEmitter<any> = new EventEmitter<any>();
+
     @Input()
     set isOpen(value: boolean) {
         this._isOpen = value;
@@ -75,4 +81,12 @@ export class AccordionGroupComponent implements OnDestroy {
     getAccordionIcon(): string {
         return this.isOpen ? 'expand_less' : 'expand_more';
     }
+
+    onHeadingClick() {
+        this.headingClick.emit(this.heading);
+    }
+
+    isGroupContentEmpty() {
+        return this.contentWrapper.nativeElement.innerHTML.trim().length === 0;
+    }
 }