[AAE-15251] Making header component more customizable (#8670)

docs/core/components/header.component.md

@@ -46,6 +46,8 @@ body of the element:
 | showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
 | title | `string` |  | Title of the application. |
 | tooltip | `string` |  | The tooltip text for the application logo. |
+| toggleIcon | `string` | "menu" | The toggle icon that will be used inside header. |
+| showLogo | `boolean` | true | Toggles whether the logo will be displayed inside the header or not. |
 
 ### Events
 

lib/core/src/lib/layout/components/header/header.component.html

@@ -13,10 +13,10 @@
         <mat-icon
             class="mat-icon material-icon"
             role="img"
-            aria-hidden="true">menu</mat-icon>
+            aria-hidden="true">{{ toggleIcon }}</mat-icon>
     </button>
 
-    <a [routerLink]="redirectUrl" title="{{ tooltip }}">
+    <a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
         <img
             src="{{ logo }}"
             class="adf-app-logo"
@@ -48,6 +48,6 @@
         <mat-icon
             class="mat-icon material-icon"
             role="img"
-            aria-hidden="true">menu</mat-icon>
+            aria-hidden="true">{{ toggleIcon }}</mat-icon>
     </button>
 </mat-toolbar>

lib/core/src/lib/layout/components/header/header.component.spec.ts

@@ -175,6 +175,43 @@ describe('HeaderLayoutComponent', () => {
             expect(buttonStart === null).toBeFalsy();
             expect(buttonEnd === null).toBeTruthy();
         });
+
+        it('should display the logo image when the input is set to true [showLogo=true]', () => {
+            component.showLogo = true;
+            fixture.detectChanges();
+
+            const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
+
+            expect(logo.nativeElement).not.toBeNull();
+        });
+
+        it('should NOT display the logo image when the input is set to false [showLogo=false]', () => {
+            component.showLogo = false;
+            fixture.detectChanges();
+
+            const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
+
+            expect(logo).toBeNull();
+        });
+
+        it('should display the default toggle icon', () => {
+            component.showSidenavToggle = true;
+            fixture.detectChanges();
+
+            const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
+
+            expect(toggleIcon.nativeElement.textContent).toBe('menu');
+        });
+
+        it('should display the correct toggle icon', () => {
+            component.showSidenavToggle = true;
+            component.toggleIcon = 'apps';
+            fixture.detectChanges();
+
+            const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
+
+            expect(toggleIcon.nativeElement.textContent).toBe('apps');
+        });
     });
 
     describe('Template transclusion', () => {

lib/core/src/lib/layout/components/header/header.component.ts

@@ -33,6 +33,9 @@ export class HeaderLayoutComponent implements OnInit {
     /** Path to an image file for the application logo. */
     @Input() logo: string;
 
+    /** Toggles whether the logo will be displayed inside the header or not. */
+    @Input() showLogo: boolean = true;
+
     /** The router link for the application logo, when clicked. */
     @Input() redirectUrl: string | any[] = '/';
 
@@ -51,6 +54,9 @@ export class HeaderLayoutComponent implements OnInit {
      */
     @Input() showSidenavToggle: boolean = true;
 
+    /** The toggle icon that will be used inside header. */
+    @Input() toggleIcon = 'menu';
+
     /** Emitted when the sidenav button is clicked. */
     @Output() clicked = new EventEmitter<boolean>();