[ACA-3614] Add a way to not show info drawer header (#5848)

lib/core/info-drawer/info-drawer-layout.component.html

@@ -1,4 +1,4 @@
-<div class="adf-info-drawer-layout-header">
+<div *ngIf="showHeader" class="adf-info-drawer-layout-header">
     <div class="adf-info-drawer-layout-header-title">
         <ng-content select="[info-drawer-title]"></ng-content>
     </div>
@@ -8,4 +8,4 @@
 </div>
 <div class="adf-info-drawer-layout-content">
     <ng-content select="[info-drawer-content]"></ng-content>
-</div>
+</div>

lib/core/info-drawer/info-drawer-layout.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Directive, ViewEncapsulation } from '@angular/core';
+import { Component, Directive, Input, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'adf-info-drawer-layout',
@@ -24,7 +24,11 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
     encapsulation: ViewEncapsulation.None,
     host: { 'class': 'adf-info-drawer-layout' }
 })
-export class InfoDrawerLayoutComponent {}
+export class InfoDrawerLayoutComponent {
+    /** The visibility of the header. */
+    @Input()
+    showHeader: boolean = true;
+}
 
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0

lib/core/info-drawer/info-drawer.component.html

@@ -1,4 +1,4 @@
-<adf-info-drawer-layout>
+<adf-info-drawer-layout [showHeader]="showHeader">
     <div role="heading" aria-level="1" *ngIf="title" info-drawer-title>{{ title | translate }}</div>
     <ng-content *ngIf="!title" info-drawer-title select="[info-drawer-title]"></ng-content>
 

lib/core/info-drawer/info-drawer.component.spec.ts

@@ -138,3 +138,50 @@ describe('Custom InfoDrawer', () => {
         expect(tab[0].nativeElement.innerText).toContain('tab-icon');
     });
 });
+
+@Component({
+    template: `
+    <adf-info-drawer [showHeader]="showHeader" title="Fake Visibility Info Drawer Title">
+    </adf-info-drawer>
+       `
+})
+class VisibilityInfoDrawerComponent extends InfoDrawerComponent {
+    showHeader: boolean;
+}
+
+describe('Header visibility InfoDrawer', () => {
+    let fixture: ComponentFixture<VisibilityInfoDrawerComponent>;
+    let component: VisibilityInfoDrawerComponent;
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            CoreTestingModule
+        ],
+        declarations: [
+            VisibilityInfoDrawerComponent
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(VisibilityInfoDrawerComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should show info drawer header by default', () => {
+        fixture.detectChanges();
+        const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        expect(title.length).toBe(1);
+        expect(title[0].nativeElement.innerText).toBe('Fake Visibility Info Drawer Title');
+        expect(component.showHeader).toEqual(true);
+    });
+
+    it('should not show info drawer header when showHeader is false', () => {
+        fixture.detectChanges();
+        component.showHeader = false;
+        fixture.detectChanges();
+        const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        expect(title.length).toBe(0);
+    });
+});

lib/core/info-drawer/info-drawer.component.ts

@@ -50,6 +50,10 @@ export class InfoDrawerComponent {
     @Input()
     selectedIndex: number = 0;
 
+    /** The visibility of the header. */
+    @Input()
+    showHeader: boolean = true;
+
     /** Emitted when the currently active tab changes. */
     @Output()
     currentTab: EventEmitter<number> = new EventEmitter<number>();