feat(system-header): add system-header pattern. close VilledeMontreal#55 (VilledeMontreal#171)

Signed-off-by: Maude Laflamme <maude.laflamme@montreal.ca>

Author: MaudeLaflamme

projects/angular-ui/src/lib/bao.module.ts

@@ -23,6 +23,7 @@ import { BaoHyperlinkModule } from './hyperlink';
 import { BaoDropdownMenuModule } from './dropdown-menu';
 import { BaoFileModule } from './file/module';
 import { BaoSnackBarModule } from './snack-bar/module';
+import { BaoSystemHeaderModule } from './system-header';
 
 @NgModule({
   imports: [
@@ -52,7 +53,8 @@ import { BaoSnackBarModule } from './snack-bar/module';
     BaoHyperlinkModule,
     BaoDropdownMenuModule,
     BaoFileModule,
-    BaoSnackBarModule
+    BaoSnackBarModule,
+    BaoSystemHeaderModule
     // TODO: reactivate once component does not depend on global css BaoBadgeModule,
   ]
 })

projects/angular-ui/src/lib/core/breakpoints.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2023 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+export const Breakpoints = {
+  XSmall: '(max-width: 575.98px)',
+  Small: '(min-width: 576px) and (max-width: 767.98px)',
+  Medium: '(min-width: 768px) and (max-width: 991.98px)',
+  Large: '(min-width: 992px) and (max-width: 1199.98px)',
+  XLarge: '(min-width: 1200px)'
+};

projects/angular-ui/src/lib/core/index.ts

@@ -4,3 +4,4 @@
  * See LICENSE file in the project root for full license information.
  */
 export * from './colors';
+export * from './breakpoints';

projects/angular-ui/src/lib/system-header/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2023 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+export * from './module';
+export * from './system-header.component';

projects/angular-ui/src/lib/system-header/module.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import {
+  BaoBackNavigationInsert,
+  BaoSystemHeaderComponent,
+  BaoBackNavigationComponent
+} from './system-header.component';
+import { BaoIconModule } from '../icon';
+
+const SYSTEM_HEADER_DIRECTIVES = [
+  BaoSystemHeaderComponent,
+  BaoBackNavigationInsert,
+  BaoBackNavigationComponent
+];
+
+@NgModule({
+  imports: [CommonModule, BaoIconModule],
+  declarations: [SYSTEM_HEADER_DIRECTIVES],
+  exports: [SYSTEM_HEADER_DIRECTIVES]
+})
+export class BaoSystemHeaderModule {}

projects/angular-ui/src/lib/system-header/system-header.component.html

@@ -0,0 +1,19 @@
+<div class="left-side-content">
+  <div class="back-navigation-container">
+    <ng-content select="a"></ng-content>
+    <ng-template backNavigationInsert></ng-template>
+  </div>
+  <div #textContainer class="text-content">
+    <ng-content select="bao-breadcrumb"></ng-content>
+    <ng-content select="h1"></ng-content>
+    <div class="tag-info-container">
+      <ng-content select="bao-tag"></ng-content>
+      <span class="additional-info">
+        <ng-content select="span"></ng-content>
+      </span>
+    </div>
+  </div>
+</div>
+<div class="button-container">
+  <ng-content></ng-content>
+</div>

projects/angular-ui/src/lib/system-header/system-header.component.scss

@@ -0,0 +1,71 @@
+@import '../core/colors';
+@import '../core/grid';
+@import '../core/typography';
+
+.bao-system-header {
+  display: flex;
+  justify-content: flex-start;
+  .left-side-content {
+    display: inline-flex;
+    width: 75%;
+    .back-navigation-container {
+      a {
+        margin-right: 1.25rem;
+        border-bottom: none;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+    .text-content {
+      width: 100%;
+      h1 {
+        font-weight: 700;
+        color: $ground-reversed;
+        font-size: 1.5rem;
+        line-height: 2rem;
+        margin-bottom: 0.5rem;
+      }
+      .tag-info-container {
+        width: 100%;
+        display: block;
+        > span:nth-child(2) {
+          &:before {
+            content: '·';
+            margin: 0 0.5rem;
+          }
+        }
+        .additional-info > * {
+          @include typo-interface-small;
+        }
+        &.mobile {
+          .bao-tag {
+            margin-bottom: 0.25rem;
+          }
+          .additional-info {
+            display: block;
+            &:before {
+              content: none;
+            }
+          }
+        }
+        > .bao-tag {
+          max-width: 100%;
+          > span {
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+  }
+  .button-container {
+    flex-shrink: 0;
+    margin-left: auto;
+    .bao-button {
+      margin-left: 1rem;
+    }
+  }
+}

projects/angular-ui/src/lib/system-header/system-header.component.spec.ts

@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2023 Ville de Montreal. All rights reserved.
+ * Licensed under the MIT license.
+ * See LICENSE file in the project root for full license information.
+ */
+
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+  TestSystemHeaderHostComponent,
+  TestBackNavigationHostComponent
+} from './tests/system-header.hostcomponent.spec';
+import {
+  BaoSystemHeaderComponent,
+  BaoBackNavigationInsert,
+  BaoBackNavigationComponent
+} from './system-header.component';
+import { BaoTagComponent } from '../tag/tag.component';
+import { BaoIconComponent } from '../icon/icon.component';
+import { BaoBreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import {
+  BaoDropdownMenuComponent,
+  BaoDropdownMenuTrigger,
+  BaoDropdownMenuItem,
+  BaoDropdownMenuItemLabel
+} from '../dropdown-menu/dropdown-menu.component';
+import { DebugElement } from '@angular/core';
+
+declare const viewport;
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+describe('BaoSystemHeaderComponent', () => {
+  let testComponent: TestSystemHeaderHostComponent;
+  let fixture: ComponentFixture<TestSystemHeaderHostComponent>;
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          BaoSystemHeaderComponent,
+          BaoBackNavigationInsert,
+          BaoBackNavigationComponent,
+          BaoIconComponent,
+          BaoDropdownMenuComponent,
+          BaoDropdownMenuTrigger,
+          BaoDropdownMenuItem,
+          BaoDropdownMenuItemLabel,
+          BaoTagComponent,
+          BaoBreadcrumbComponent,
+          TestSystemHeaderHostComponent,
+          TestBackNavigationHostComponent
+        ],
+        imports: [],
+        providers: []
+      });
+      return TestBed.compileComponents();
+    })
+  );
+  describe('Desktop screen', () => {
+    beforeEach(() => {
+      viewport.set('xl');
+      fixture = TestBed.createComponent(TestSystemHeaderHostComponent);
+      testComponent = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+    it('should create', () => {
+      expect(testComponent).toBeTruthy();
+    });
+    it('should display breadcrumb on desktop screen', () => {
+      const breadcrumb = fixture.debugElement.query(By.css('bao-breadcrumb'));
+      expect(breadcrumb).toBeDefined();
+    });
+  });
+  describe('Tablet screen', () => {
+    beforeEach(() => {
+      viewport.set('md');
+      fixture = TestBed.createComponent(TestSystemHeaderHostComponent);
+      testComponent = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+    it('should display back button on tablet screen', () => {
+      const backButton = fixture.debugElement.query(
+        By.css('.bao-system-header-back-button')
+      );
+      expect(backButton).toBeDefined();
+    });
+  });
+  describe('Mobile screen', () => {
+    beforeEach(() => {
+      viewport.set('sm');
+      fixture = TestBed.createComponent(TestSystemHeaderHostComponent);
+      testComponent = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+    it('should display back button on mobile screen', () => {
+      const backButton = fixture.debugElement.query(
+        By.css('.bao-system-header-back-button')
+      );
+      expect(backButton).toBeDefined();
+    });
+    it('should apply mobile css class', () => {
+      const tagInfoContainer = fixture.debugElement.query(
+        By.css('.tag-info-container')
+      );
+      expect(tagInfoContainer).toBeDefined();
+      expect(
+        tagInfoContainer.nativeNode.classList.contains('mobile')
+      ).toBeTrue();
+    });
+  });
+  describe('BaoBackNavigationComponent', () => {
+    let testComponent: TestBackNavigationHostComponent;
+    let fixture: ComponentFixture<TestBackNavigationHostComponent>;
+    let debugElement: DebugElement;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TestBackNavigationHostComponent);
+      testComponent = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+    it('should create', () => {
+      expect(testComponent).toBeTruthy();
+    });
+    it('should set link input as href attribute', () => {
+      const parentLink = 'parent-page.ca';
+      testComponent.link = parentLink;
+      fixture.detectChanges();
+      debugElement = fixture.debugElement.query(By.css('a'));
+      expect(debugElement.nativeNode.attributes['href'].value).toBe(parentLink);
+    });
+  });
+});