[AAE-15298] added tokens to HeaderLayout (#9074)

* [AAE-15298] added tokens to HeaderLayout

* [AAE-15298] removed obsolete class

* AAE-15298: Code improvement

* AAE-15298: Updated unit tests

* AAE-15298: Removed duplicate keys

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>

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

@@ -6,7 +6,7 @@
         *ngIf="showSidenavToggle && position === 'start'"
         id="adf-sidebar-toggle-start"
         data-automation-id="adf-menu-icon"
-        class="mat-icon-button adf-menu-icon"
+        class="adf-menu-icon adf-header-icon-button"
         mat-icon-button
         (click)="toggleMenu()"
         [attr.aria-expanded]="expandedSidenav"
@@ -14,7 +14,8 @@
         <mat-icon
             class="mat-icon material-icon"
             role="img"
-            aria-hidden="true">{{ toggleIcon }}</mat-icon>
+            aria-hidden="true">{{ toggleIcon }}
+        </mat-icon>
     </button>
 
     <a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
@@ -40,15 +41,15 @@
         *ngIf="showSidenavToggle && position === 'end'"
         id="adf-sidebar-toggle-end"
         data-automation-id="adf-menu-icon"
-        class="mat-icon-button adf-menu-icon"
+        class="adf-menu-icon adf-header-icon-button"
         mat-icon-button
         (click)="toggleMenu()"
         [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
-    >
         <mat-icon
             class="mat-icon material-icon"
             role="img"
-            aria-hidden="true">{{ toggleIcon }}</mat-icon>
+            aria-hidden="true">{{ toggleIcon }}
+        </mat-icon>
     </button>
 </mat-toolbar>

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

@@ -58,6 +58,19 @@ adf-layout-header .mat-toolbar-single-row {
             display: none;
         }
     }
+
+    .adf-header-icon-button {
+        color: var(--adf-header-icon-button-default-color);
+        border-radius: var(--adf-header-icon-button-default-border-radius);
+
+        &:hover {
+            color: var(--adf-header-icon-button-hover-color);
+        }
+
+        &:active {
+            color: var(--adf-header-icon-button-pressed-color);
+        }
+    }
 }
 
 [dir='rtl'] adf-layout-header .mat-toolbar-single-row {

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

@@ -240,7 +240,7 @@ describe('HeaderLayoutComponent', () => {
 
             const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
 
-            expect(toggleIcon.nativeElement.textContent).toBe('menu');
+            expect(toggleIcon.nativeElement.textContent.trim()).toBe('menu');
         });
 
         it('should display the correct toggle icon', () => {
@@ -250,7 +250,7 @@ describe('HeaderLayoutComponent', () => {
 
             const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
 
-            expect(toggleIcon.nativeElement.textContent).toBe('apps');
+            expect(toggleIcon.nativeElement.textContent.trim()).toBe('apps');
         });
     });
 

lib/core/src/lib/styles/_components-variables.scss

@@ -90,7 +90,12 @@
         --adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
         --adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary),
 
-        --adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card)
+        --adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card),
+        --adf-header-icon-button-default-color: $adf-ref-header-icon-color,
+        --adf-header-icon-button-default-border-radius: $adf-ref-header-icon-border-radius,
+        --adf-header-icon-button-hover-color: $adf-ref-header-icon-color,
+        --adf-header-icon-button-pressed-color: $adf-ref-header-icon-color,
+        --adf-header-icon-button-disabled-color: $adf-ref-header-icon-color,
     );
 
     // propagates SCSS variables into the CSS variables scope

lib/core/src/lib/styles/_reference-variables.scss

@@ -23,3 +23,5 @@ $adf-ref-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698);
 $adf-ref-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
 $adf-ref-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
 $adf-ref-metadata-property-panel-title-color: rgb(33, 33, 33);
+$adf-ref-header-icon-color: inherit;
+$adf-ref-header-icon-border-radius: 50%;