[ADF-2709] Replace the ADF accordion with material accordion (#3187)

* [DW-569] Replace the ADF accordion with material accordion

* * Added  testcases for the recent changes.

* * Used angular materail mat-accordion
* Refactored accordion/group component

* * Refactored accordion group component.

* * Refactored accordion scss

lib/core/collapsable/accordion-group.component.html

@@ -1,20 +1,26 @@
-<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
-    <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}" (click)="toggleOpen($event)">
-        <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
-            <mat-icon class="material-icons"
-               [matTooltip]="headingIconTooltip"
-               [matTooltipDisabled]="!headingIconTooltip">
-                {{headingIcon}}
-            </mat-icon>
-        </div>
-        <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
-        <div id="accordion-button" *ngIf="hasAccordionIcon" class="adf-panel-heading-toggle">
-            <i class="material-icons">{{getAccordionIcon()}}</i>
-        </div>
-    </div>
-    <div class="adf-panel-collapse" [hidden]="!isOpen">
-        <div class="adf-panel-body" #contentWrapper>
-            <ng-content></ng-content>
-        </div>
-    </div>
-</div>
+<mat-accordion class="adf-panel">
+    <mat-expansion-panel #expansionPanel 
+        id="adf-expansion-panel-id"
+        (click)="isExpandable($event)"
+        [expanded]="toggleExpansion()"
+        (opened)="onHeaderClick()"
+        [hideToggle]="!hasAccordionIcon">
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                <div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
+                    <div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
+                        <mat-icon class="material-icons"
+                            [matTooltip]="headingIconTooltip"
+                            [matTooltipDisabled]="!headingIconTooltip">
+                            {{headingIcon}}
+                        </mat-icon>
+                    </div>
+                    <div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
+                </div>
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+            <div id="adf-expansion-panel-content-id" #contentWrapper>
+                <ng-content></ng-content>
+            </div>
+    </mat-expansion-panel>
+</mat-accordion>

lib/core/collapsable/accordion-group.component.scss

@@ -18,12 +18,8 @@
         color: mat-color($primary);
     }
 
-    .adf-panel-heading-icon {
-        float: left;
-    }
-
-    .adf-panel-body {
-        display: inline-block;
+    .adf-panel-heading-icon {	
+         float: left;	
     }
 
     .adf-panel-heading-text {
@@ -32,12 +28,25 @@
         padding-top: 4px;
     }
 
-    .adf-panel-heading-toggle {
-        float: right;
-        cursor: pointer;
+    .mat-expansion-panel {
+        transition: none !important;
+        box-shadow: none !important;
+        background: none !important;
     }
 
-    .adf-panel-heading-toggle:hover {
-        opacity: 0.4;
+    .mat-expansion-panel-body {
+        padding: 1px !important;
+    }
+
+    .mat-expansion-panel-header {
+        padding: 0px !important;
+    }
+
+    .mat-expansion-panel-header-title {
+        margin-right: 0px !important;
+    }
+
+    .mat-expansion-indicator {
+            margin-right: 25px !important;
     }
 }

lib/core/collapsable/accordion-group.component.spec.ts

@@ -46,62 +46,68 @@ describe('AccordionGroupComponent', () => {
 
     });
 
-    it('should be closed by default', async(() => {
-        component.heading = 'Fake Header';
-        component.headingIcon = 'fake-icon';
-        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            let headerText = element.querySelector('#heading-text');
-            expect(headerText.innerText).toEqual('Fake Header');
-            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');
-        });
-    }));
-
-    it('should be open when click', async(() => {
+    it('should define mat-accordion ', async(() => {
         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 accordin = element.querySelector('mat-accordion');
+            let expansionPanel = element.querySelector('mat-expansion-panel');
+            let accordinHeader = element.querySelector('mat-expansion-panel-header');
+            let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
+            expect(accordin).toBeDefined();
+            expect(expansionPanel).toBeDefined();
+            expect(accordinHeader).toBeDefined();
+            expect(content).toEqual('<a>Test</a>');
+        });
+    }));
+
+    it('should be display accordion title and icon', async(() => {
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             let headerText = element.querySelector('#heading-text');
+            let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
             expect(headerText.innerText).toEqual('Fake Header');
-            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_less');
         });
     }));
 
-    it('should show expand icon by default', async(() => {
+    it('should be display only accordion title', async(() => {
         component.heading = 'Fake Header';
-        component.headingIcon = 'fake-icon';
+        component.headingIcon = '';
         component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            let headerIcon = element.querySelector('#accordion-button');
-            expect(headerIcon).toBeDefined();
-        });
-    }));
-
-    it('should hide expand icon', async(() => {
-        component.heading = 'Fake Header';
-        component.headingIcon = 'fake-icon';
-        component.hasAccordionIcon = false;
-        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            let headerIcon = element.querySelector('#accordion-button');
+            let headerText = element.querySelector('#heading-text');
+            let headerIcon = element.querySelector('#adf-expansion-panel-id .material-icons');
+            expect(headerText.innerText).toEqual('Fake Header');
             expect(headerIcon).toBeNull();
         });
     }));
 
+    it('should be display accordion title and content', async(() => {
+        component.isSelected = true;
+        component.heading = 'Fake Header';
+        component.headingIcon = 'fake-icon';
+        component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let headerText = element.querySelector('#heading-text');
+            let headerIcon = element.querySelector('#heading-icon .material-icons');
+            let content = element.querySelector('#adf-expansion-panel-content-id').innerHTML;
+            expect(headerText.innerText).toEqual('Fake Header');
+            expect(headerIcon.innerText).toEqual('fake-icon');
+            expect(content).toEqual('<a>Test</a>');
+        });
+    }));
+
     it('should emit an event when a heading clicked', async(() => {
         component.heading = 'Fake Header';
         fixture.detectChanges();

lib/core/collapsable/accordion-group.component.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { AccordionComponent } from './accordion.component';
+import { AfterViewInit , Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatExpansionPanel } from '@angular/material';
 
 @Component({
     selector: 'adf-accordion-group',
@@ -24,12 +24,14 @@ import { AccordionComponent } from './accordion.component';
     styleUrls: ['./accordion-group.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class AccordionGroupComponent implements OnDestroy {
+export class AccordionGroupComponent implements AfterViewInit {
     private _isOpen: boolean = false;
     private _isSelected: boolean = false;
 
     @ViewChild('contentWrapper')
-    contentWrapper: any;
+    contentWrapper: ElementRef;
+
+    @ViewChild('expansionPanel') expansionPanel: MatExpansionPanel;
 
     /** Title heading for the group. */
     @Input()
@@ -43,7 +45,7 @@ export class AccordionGroupComponent implements OnDestroy {
     @Input()
     headingIconTooltip: string;
 
-    /** Should the (expanded) accordion icon be shown? */
+   /** Should the (expanded) accordion icon be shown? */
     @Input()
     hasAccordionIcon: boolean = true;
 
@@ -55,9 +57,6 @@ export class AccordionGroupComponent implements OnDestroy {
     @Input()
     set isOpen(value: boolean) {
         this._isOpen = value;
-        if (value) {
-            this.accordion.closeOthers(this);
-        }
     }
 
     get isOpen() {
@@ -74,26 +73,33 @@ export class AccordionGroupComponent implements OnDestroy {
         return this._isSelected;
     }
 
-    constructor(private accordion: AccordionComponent) {
-        this.accordion.addGroup(this);
-    }
+    hasContent: boolean;
 
-    ngOnDestroy() {
-        this.accordion.removeGroup(this);
+    constructor() { }
+
+    ngAfterViewInit() {
+        this.hasContent = this.contentWrapper.nativeElement && this.contentWrapper.nativeElement.children.length > 0;
     }
 
     hasHeadingIcon() {
         return this.headingIcon ? true : false;
     }
 
-    toggleOpen(event: MouseEvent): void {
-        event.preventDefault();
-        this.isOpen = !this.isOpen;
+    onHeaderClick(): void {
         this.headingClick.emit(this.heading);
     }
 
-    getAccordionIcon(): string {
-        return this.isOpen ? 'expand_less' : 'expand_more';
+    isExpandable(event: any) {
+        if (!this.hasContent || !this.isOpen) {
+            this.expandPanel();
+        }
     }
 
+    expandPanel() {
+        this.expansionPanel.expanded = !this.expansionPanel.expanded;
+    }
+
+    toggleExpansion(): boolean {
+        return this.isOpen && this.isSelected;
+    }
 }

lib/core/collapsable/accordion.component.spec.ts

@@ -16,16 +16,12 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { AccordionGroupComponent } from './accordion-group.component';
 import { AccordionComponent } from './accordion.component';
 
 describe('AccordionComponent', () => {
 
     let fixture: ComponentFixture<AccordionComponent>;
     let component: AccordionComponent;
-    let componentGroup1: AccordionGroupComponent;
-    let componentGroup2: AccordionGroupComponent;
-    let componentGroup3: AccordionGroupComponent;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -40,42 +36,7 @@ describe('AccordionComponent', () => {
         component = fixture.componentInstance;
     });
 
-    afterEach(() => {
-        component.groups = [];
-    });
-
     it('should create the component', () => {
         expect(component).toBeTruthy();
     });
-
-    it('should add the AccordionGroup', () => {
-        component.addGroup(componentGroup1);
-        expect(component.groups.length).toBe(1);
-    });
-
-    it('should close all the other group', () => {
-        componentGroup1 = new AccordionGroupComponent(component);
-        componentGroup2 = new AccordionGroupComponent(component);
-        componentGroup3 = new AccordionGroupComponent(component);
-        componentGroup1.isOpen = false;
-        componentGroup2.isOpen = true;
-        componentGroup3.isOpen = false;
-
-        expect(component.groups[0].isOpen).toBeFalsy();
-        expect(component.groups[1].isOpen).toBeTruthy();
-        expect(component.groups[2].isOpen).toBeFalsy();
-
-        componentGroup1.isOpen = true;
-
-        expect(component.groups[0].isOpen).toBeTruthy();
-        expect(component.groups[1].isOpen).toBeFalsy();
-        expect(component.groups[2].isOpen).toBeFalsy();
-    });
-
-    it('should remove the AccordionGroup', () => {
-        component.addGroup(componentGroup1);
-        component.removeGroup(componentGroup1);
-        expect(component.groups.length).toBe(0);
-    });
-
 });

lib/core/collapsable/accordion.component.ts

@@ -16,7 +16,6 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { AccordionGroupComponent } from './accordion-group.component';
 
 @Component({
     selector: 'adf-accordion',
@@ -28,25 +27,4 @@ import { AccordionGroupComponent } from './accordion-group.component';
     },
     encapsulation: ViewEncapsulation.None
 })
-export class AccordionComponent {
-    groups: Array<AccordionGroupComponent> = [];
-
-    addGroup(group: AccordionGroupComponent): void {
-        this.groups.push(group);
-    }
-
-    closeOthers(openGroup: AccordionGroupComponent): void {
-        this.groups.forEach((group: AccordionGroupComponent) => {
-            if (group !== openGroup) {
-                group.isOpen = false;
-            }
-        });
-    }
-
-    removeGroup(group: AccordionGroupComponent): void {
-        const index = this.groups.indexOf(group);
-        if (index !== -1) {
-            this.groups.splice(index, 1);
-        }
-    }
-}
+export class AccordionComponent {}

lib/core/material.module.ts

@@ -24,7 +24,7 @@ import {
     MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
     MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
     MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
-    MatTooltipModule
+    MatTooltipModule, MatExpansionModule
 } from '@angular/material';
 
 export function modules() {
@@ -34,7 +34,7 @@ export function modules() {
         MatInputModule, MatListModule, MatNativeDateModule, MatOptionModule, MatProgressSpinnerModule, MatRadioModule,
         MatRippleModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule,
         MatMenuModule, MatProgressBarModule, MatSidenavModule, MatSnackBarModule, MatToolbarModule,
-        MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule
+        MatTooltipModule, MatDatetimepickerModule, MatNativeDatetimeModule, MatExpansionModule
     ];
 }