[ACS-8249][ACS-8250] UI-header component

docs/README.md

@@ -81,11 +81,12 @@ for more information about installing and using the source code.
 
 A collection of Angular components for generic use.
 
-| Name                                              | Description                  |
-|---------------------------------------------------|------------------------------|
-| [Avatar](core/components/avatar.component.md)     | Displays user avatars.       |
-| [Button](core/components/button.component.md)     | A standard button component. |
-| [Progress](core/components/progress.component.md) | A progress bar component.    |
+| Name                                              | Description                                     |
+|---------------------------------------------------|-------------------------------------------------|
+| [Avatar](core/components/avatar.component.md)     | Displays user avatars.                          |
+| [Button](core/components/button.component.md)     | A standard button component.                    |
+| [Progress](core/components/progress.component.md) | A progress bar component.                       |
+| [Header](core/components/adf-header.component.md) | A simple reusable application header component. |
 
 ### Components
 

docs/core/components/adf-header.component.md

@@ -0,0 +1 @@
+../../../lib/core/src/lib/header/header.component.md

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

@@ -0,0 +1,43 @@
+<ng-container [ngSwitch]="variant">
+    <ng-container *ngSwitchCase="'minimal'">
+        <adf-toolbar [color]="color">
+            <adf-toolbar-title>
+                <ng-container *ngTemplateOutlet="toolbarTitleContent"></ng-container>
+            </adf-toolbar-title>
+            <ng-container *ngTemplateOutlet="navbarTemplate"></ng-container>
+            <div class="adf-toolbar--spacer"></div>
+            <ng-container *ngTemplateOutlet="toolbarActions"></ng-container>
+        </adf-toolbar>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'extended'">
+        <adf-toolbar [color]="color">
+            <adf-toolbar-title>
+                <ng-container *ngTemplateOutlet="toolbarTitleContent"></ng-container>
+            </adf-toolbar-title>
+            <ng-container *ngTemplateOutlet="toolbarActions"></ng-container>
+        </adf-toolbar>
+        <adf-toolbar [color]="color">
+            <ng-container *ngTemplateOutlet="navbarTemplate"></ng-container>
+        </adf-toolbar>
+    </ng-container>
+</ng-container>
+
+<ng-template #toolbarTitleContent>
+    <img *ngIf="logoSrc" [src]="logoSrc" [alt]="logoAlt" class="adf-toolbar-logo"/>
+    <span *ngIf="variant==='extended'">{{ title }}</span>
+</ng-template>
+
+<ng-template #toolbarActions>
+    <div class="adf-toolbar-actions">
+        <ng-content select="[adf-toolbar-actions]"></ng-content>
+    </div>
+</ng-template>
+
+<ng-template #navbarTemplate>
+    <adf-navbar [items]="navbarItems">
+        <ng-content select="adf-navbar-item"></ng-content>
+    </adf-navbar>
+</ng-template>
+
+

lib/core/src/lib/header/header.component.md

@@ -0,0 +1,132 @@
+# Header Component
+
+`standalone`, `component`
+
+The Header component is a versatile component used to display a header section in applications. It supports various configurations including minimal and extended variants, customizable logo, title, and navigation items.
+
+## Usage
+
+Displaying a minimal header with a logo and navbar:
+
+```html
+<adf-header
+    variant="minimal"
+    headerHeight="64px"
+    color="primary"
+    [logoSrc]="src"
+    [logoAlt]="alt"
+    [logoHeight]="logoHeight"
+    [logoWidth]="logoWidth"
+    [title]="title"
+    [navbarItems]="items"
+>
+</adf-header>
+```
+
+Toolbar actions can be added to the header by placing them inside an element with the `adf-toolbar-actions` attribute.
+
+```html
+<adf-header
+    variant="minimal"
+    [logoSrc]="src"
+    [title]="title"
+    [navbarItems]="items"
+>
+    <div adf-toolbar-actions>
+        <adf-toolbar-divider></adf-toolbar-divider>
+        <adf-button variant="icon" icon="search" (click)="onSearchClick()"></adf-button>
+        <adf-avatar [src]="src"></adf-avatar>
+    </div>
+</adf-header>
+```
+
+![adf-header-extended.png](docs-images/adf-header-minimal.png)
+
+Displaying an extended header with toolbar actions:
+
+```html
+<adf-header variant="extended" [logoSrc]="src" [title]="title" [navbarItems]="items">
+    <div adf-toolbar-actions>
+        <adf-button variant="flat">Secondary</adf-button>
+        <adf-button variant="flat" color="accent">Primary</adf-button>
+
+        <adf-toolbar-divider></adf-toolbar-divider>
+
+        <adf-button variant="icon" icon="search"></adf-button>
+        <adf-button variant="icon" [matMenuTriggerFor]="menu" icon="apps"></adf-button>
+        <mat-menu #menu="matMenu">
+            ...
+        </mat-menu>
+
+        <adf-avatar
+            initials="HU"
+            cursor="pointer"
+            [matMenuTriggerFor]="userMenu">
+        </adf-avatar>
+        <mat-menu #userMenu="matMenu">
+            ...
+        </mat-menu>
+    </div>
+</adf-header>
+```
+
+![adf-header-extended.png](docs-images/adf-header-extended.png)
+
+## API
+
+Import the following standalone components:
+
+```typescript
+import { HeaderComponent } from '@alfresco/adf-core';
+```
+
+## Properties
+
+| Name           | Type            | Default      | Description                                                |
+|----------------|-----------------|--------------|------------------------------------------------------------|
+| `variant`      | `HeaderVariant` | `minimal`    | The variant of the header. Can be `minimal` or `extended`. |
+| `headerHeight` | `string`        | `100%`       | The height of the header.                                  |
+| `logoSrc`      | `string`        |              | The URL of the logo to display.                            |
+| `logoAlt`      | `string`        |              | The alt text for the logo.                                 |
+| `logoHeight`   | `string`        | `36px`       | The height of the logo.                                    |
+| `logoWidth`    | `string`        | `logoHeight` | The width of the logo.                                     |
+| `title`        | `string`        |              | The title to display in the header.                        |
+| `color`        | `ThemePalette`  |              | The theme color palette for the header.                    |
+| `navbarItems`  | `NavbarItem[]`  | `[]`         | Navigation items to display in the header.                 |
+
+## Theming
+
+The following CSS classes are available for theming:
+
+| Name                  | Description                         |
+|-----------------------|-------------------------------------|
+| `adf-header`          | The host element.                   |
+| `adf-toolbar`         | The toolbar element (single row).   |
+| `adf-toolbar-title`   | The toolbar title element.          |
+| `adf-toolbar-logo`    | The logo element inside the header. |
+| `adf-toolbar-actions` | Toolbar actions container.          |
+
+### CSS Variables
+
+| Name                              | Description                                       |
+|-----------------------------------|---------------------------------------------------|
+| `--adf-header-width`              | The width of the header.                          |
+| `--adf-header-height`             | The height of the header.                         |
+| `--adf-toolbar-width`             | The width of the toolbar.                         |
+| `--adf-toolbar-height`            | The height of the toolbar.                        |
+| `--adf-toolbar-title-width`       | The width of the toolbar title.                   |
+| `--adf-toolbar-title-font-size`   | The size of the title font.                       |
+| `--adf-toolbar-title-font-weight` | The wight of the title font.                      |
+| `--adf-toolbar-title-color`       | The color of the title font.                      |
+| `--adf-toolbar-title-gap`         | The gap of the toolbar title.                     |
+| `--adf-toolbar-title-gap`         | The gap of the toolbar title.                     |
+| `--adf-header-logo-height`        | The height of the logo within the header.         |
+| `--adf-header-logo-width`         | The width of the logo within the header.          |
+| `--adf-toolbar-actions-gap`       | The gap of the toolbar actions within the header. |
+
+## See Also
+
+-   [Navbar component](./navbar/navbar.component.md)
+-   [Navbar Item component](./navbar/navbar-item.component.md)
+-   [Avatar component](../avatar/avatar.component.md)
+-   [Button component](../button/button.component.md)

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

@@ -0,0 +1,36 @@
+.adf-header {
+    display: flex;
+    flex-direction: column;
+    width: var(--adf-header-width, 100%);
+    height: var(--adf-header-height, 100%);
+
+    .adf-toolbar {
+        width: var(--adf-toolbar-width, 100%);
+        height: var(--adf-toolbar-height, 100%);
+
+        .adf-toolbar-title {
+            width: var(--adf-toolbar-title-width, 100%);
+            align-items: center;
+            font-size: var(--adf-toolbar-title-font-size, 16px);
+            font-weight: var(--adf-toolbar-title-font-weight, 500);
+            color: var(--adf-toolbar-title-color, #000);
+            gap: var(--adf-toolbar-title-gap, 25px);
+        }
+
+        .adf-toolbar-logo {
+            height: var(--adf-header-logo-height, 36px);
+            width: var(--adf-header-logo-width, --adf-header-logo-height);
+        }
+
+        .adf-toolbar-actions > * {
+            display: flex;
+            align-items: center;
+            gap: var(--adf-toolbar-actions-gap, 10px);
+        }
+
+        .adf-toolbar-container.adf-toolbar-container-row {
+            height: 100%;
+            column-gap: 10px;
+        }
+    }
+}

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

@@ -0,0 +1,109 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+    let component: HeaderComponent;
+    let fixture: ComponentFixture<HeaderComponent>;
+
+    const getLogoImgElement = () => fixture.nativeElement.querySelector('.adf-toolbar-logo');
+    const getTitleElement = () => fixture.nativeElement.querySelector('.adf-toolbar-title');
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [CommonModule, HeaderComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HeaderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should have default variant as "minimal"', () => {
+        expect(component.variant).toEqual('minimal');
+    });
+
+    it('should update title width based on variant', () => {
+        component.variant = 'extended';
+        fixture.detectChanges();
+        expect(fixture.nativeElement.style.getPropertyValue('--adf-toolbar-title-width')).toBe('100%');
+
+        component.variant = 'minimal';
+        fixture.detectChanges();
+        expect(fixture.nativeElement.style.getPropertyValue('--adf-toolbar-title-width')).toBe('auto');
+    });
+
+    it('should set correct logoSrc when provided', () => {
+        const testLogoSrc = 'https://example.com/new-logo.png';
+        component.logoSrc = testLogoSrc;
+        fixture.detectChanges();
+        expect(getLogoImgElement().src).toEqual(testLogoSrc);
+    });
+
+    it('should set correct logoAlt when provided', () => {
+        const testLogoAlt = 'New Logo';
+        component.logoAlt = testLogoAlt;
+        component.logoSrc = 'test.png';
+        fixture.detectChanges();
+        expect(getLogoImgElement().getAttribute('alt')).toEqual(testLogoAlt);
+    });
+
+    it('should set correct logo height and width when provided', () => {
+        const logoHeight = '50px';
+        const logoWidth = '100px';
+        component.logoSrc = 'test.png';
+        component.logoHeight = logoHeight;
+        component.logoWidth = logoWidth;
+        fixture.detectChanges();
+        const style = getComputedStyle(getLogoImgElement());
+        expect(style.height).toEqual(logoHeight);
+        expect(style.width).toEqual(logoWidth);
+    });
+
+    it('should set correct title when provided', () => {
+        const title = 'Test Title';
+        component.variant = 'extended';
+        component.title = title;
+        fixture.detectChanges();
+        expect(getTitleElement().textContent).toEqual(title);
+    });
+
+    it('should not display title if variant = minimal', () => {
+        const title = 'Test Title';
+        component.variant = 'minimal';
+        component.title = title;
+        fixture.detectChanges();
+        expect(getTitleElement().textContent).toBeFalsy();
+    });
+
+    it('should not display logo if src is not provided', () => {
+        component.logoSrc = '';
+        fixture.detectChanges();
+        expect(getLogoImgElement()).toBeFalsy();
+    });
+
+    it('should set correct header height if provided', () => {
+        const headerHeight = '150px';
+        component.headerHeight = headerHeight;
+        fixture.detectChanges();
+        const style = getComputedStyle(fixture.nativeElement);
+        expect(style.height).toEqual(headerHeight);
+    });
+});