[ADF-3358][ADF-3359][ADF-3360] Logo link and tooltip and hex colors (#3648)

* [ADF-3358] link on logo

* [ADF-3358] test link on logo

* [ADF-3360] tooltip on logo

* [ADF-3360] update logo docs

* [ADF-3359] allow hex color codes for the background color

* [ADF-3358] better name for property

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -2,7 +2,7 @@
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">
-            <adf-layout-header  id="adf-header" [title]="title | translate" [logo]="logo" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
+            <adf-layout-header  id="adf-header" [title]="title | translate" [redirectUrl]="['/home']" [logo]="logo" [tooltip]="title | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
 
             <div class="adf-app-layout-menu-spacer"></div>
 

docs/core/header.component.md

@@ -5,7 +5,7 @@ Status: Experimental
 
 ## Header component 
 
-Reuseble header for Alfresco applications
+Reusable header for Alfresco applications
 
 ## Basic usage
 
@@ -13,6 +13,7 @@ Reuseble header for Alfresco applications
 <adf-layout-header 
     title="title" 
     logo="logo.png" 
+    [redirectUrl]="'/home'"
     color="primary"
     (toggled)=toggleMenu($event)>
 
@@ -27,8 +28,10 @@ Reuseble header for Alfresco applications
 | Name | Type | Description |
 | -- | -- | -- |
 | title | string |  Title of the application
-| logo | string| Path to an image file for the application logo.
+| logo | string | Path to an image file for the application logo.
-| color | string | Primary color for the header
+| redirectUrl | string\|any[] | The router link for the application logo.
+| tooltip | string | The tooltip text for the application logo.
+| color | string | Background color for the header. It can be any hex color code or the Material theme colors: 'primary', 'accent' or 'warn'.
 | showSidenavToggle | boolean | Signals if the sidenav button will be displayed in the header or not. By default is true.
 
 ### Events

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

@@ -1,9 +1,11 @@
-<mat-toolbar color="{{color}}">
+<mat-toolbar color="{{color}}" [style.background-color]="color">
     <button *ngIf="showSidenavToggle" data-automation-id="adf-menu-icon" class="mat-icon-button adf-menu-icon" mat-icon-button (click)="toggleMenu()">
         <mat-icon class="mat-icon material-icon" role="img" aria-hidden="true">menu</mat-icon>
     </button>
 
-    <img src="{{logo}}" class="adf-app-logo">
+    <a [routerLink]="redirectUrl" title="{{ tooltip }}">
+        <img src="{{logo}}" class="adf-app-logo" />
+    </a>
 
     <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true" class="adf-app-title">{{title}}</span>
     <ng-content></ng-content>

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

@@ -22,6 +22,7 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { By } from '@angular/platform-browser';
 import { LayoutModule } from '../..';
 import { Component } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
 import { MaterialModule } from './../../../material.module';
 
 describe('HeaderLayoutComponent', () => {
@@ -78,6 +79,22 @@ describe('HeaderLayoutComponent', () => {
             expect(src).toEqual('logo.png');
         });
 
+        it('should have custom url link set on logo when the redirectUrl is set', () => {
+            component.redirectUrl = '/customHomePage';
+            fixture.detectChanges();
+
+            const logoAnchor = fixture.nativeElement.querySelector('mat-toolbar>a');
+            expect(/\/customHomePage$/.test(logoAnchor.href)).toEqual(true);
+        });
+
+        it('should have custom tooltip text set on logo when the tooltip parameter is set', () => {
+            component.tooltip = 'logo title';
+            fixture.detectChanges();
+
+            const logoAnchor = fixture.nativeElement.querySelector('mat-toolbar>a');
+            expect(logoAnchor.title).toEqual('logo title');
+        });
+
         it('test click on sidenav button', () => {
             component.showSidenavToggle = true;
             fixture.detectChanges();
@@ -117,7 +134,7 @@ describe('HeaderLayoutComponent', () => {
         beforeEach(async(() => {
             TestBed.configureTestingModule({
               declarations: [HeaderLayoutTesterComponent],
-              imports: [ LayoutModule, MaterialModule ]
+              imports: [ LayoutModule, MaterialModule, RouterTestingModule ]
             })
             .compileComponents();
           }));

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

@@ -26,6 +26,8 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } fro
 export class HeaderLayoutComponent implements OnInit {
     @Input() title: string;
     @Input() logo: string;
+    @Input() redirectUrl: string | any[] = '/';
+    @Input() tooltip: string;
     @Input() color: string;
     @Input() showSidenavToggle: boolean = true;
     @Output() clicked = new EventEmitter<any>();

lib/core/layout/layout.module.ts

@@ -17,6 +17,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { MaterialModule } from '../material.module';
 import { SidenavLayoutContentDirective } from './directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from './directives/sidenav-layout-header.directive';
@@ -29,7 +30,8 @@ import { HeaderLayoutComponent } from './components/header/header.component';
 @NgModule({
     imports: [
         CommonModule,
-        MaterialModule
+        MaterialModule,
+        RouterModule
     ],
     exports: [
         SidenavLayoutHeaderDirective,