feat(business/header): change header to new specification

- Cleaned code - Removed MutationObservers - Removed extra markup files - Refactored sbb-navbutton to button[sbbNavbutton]
sbb-design-systems · Sep 2, 2019 · a7bd5fe · a7bd5fe
1 parent 2484423
commit a7bd5fe
Show file tree

Hide file tree

Showing 14 changed files with 220 additions and 311 deletions.
diff --git a/projects/angular-showcase/src/app/examples/examples.module.ts b/projects/angular-showcase/src/app/examples/examples.module.ts
@@ -42,7 +42,7 @@ import {
   UserMenuModule
 } from '@sbb-esta/angular-public';
 
-import { HeaderModule } from '../../../../sbb-esta/angular-business/src/lib/header/header.module';
+import { HeaderModule } from '@sbb-esta/angular-business';
 
 import { AccordionShowcaseComponent } from './accordion-showcase/accordion-showcase.component';
 import { AutocompleteShowcaseComponent } from './autocomplete-showcase/autocomplete-showcase.component';

diff --git a/projects/angular-showcase/src/app/examples/header-showcase/header-showcase.component.html b/projects/angular-showcase/src/app/examples/header-showcase/header-showcase.component.html
@@ -4,10 +4,12 @@
   [environment]="'dev'"
   [environmentColor]="'darkgreen'"
 >
-  <a routerLink="/">Home</a>
-  <a routerLink="/navigation1">Another module</a>
-  <button type="button" [sbbDropdown]="dropdown">Navigation 1</button>
-  <button type="button">Navigation 2</button>
+  <a sbbNavbutton routerLink="/">Home</a>
+  <a sbbNavbutton routerLink="/navigation1">Another module</a>
+  <button sbbNavbutton type="button" [sbbDropdown]="dropdown">
+    Navigation 1
+  </button>
+  <button sbbNavbutton type="button">Navigation 2</button>
   <sbb-dropdown #dropdown="sbbDropdown">
     <a sbbDropdownItem routerLink="/navigation1/section1" routerLinkActive="sbb-selected"
       >Section 1</a

diff --git a/projects/angular-showcase/src/app/examples/header-showcase/header-showcase.component.ts b/projects/angular-showcase/src/app/examples/header-showcase/header-showcase.component.ts
@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'sbb-header-showcase',
   templateUrl: './header-showcase.component.html',
   styleUrls: ['./header-showcase.component.scss']
 })
-export class HeaderShowcaseComponent implements OnInit {
+export class HeaderShowcaseComponent {
   label: String = 'Example Header';
   loggedUser = {
     userName: 'example user',
@@ -17,10 +17,6 @@ export class HeaderShowcaseComponent implements OnInit {
   };
   user = this.loggedUser;
 
-  constructor() {}
-
-  ngOnInit() {}
-
   login() {
     this.user = this.loggedUser;
   }

diff --git a/projects/sbb-esta/angular-business/src/lib/header/header.module.ts b/projects/sbb-esta/angular-business/src/lib/header/header.module.ts
@@ -5,6 +5,7 @@ import {
   IconChevronSmallUpModule,
   IconHamburgerMenuModule
 } from '@sbb-esta/angular-icons';
+import { DropdownModule } from '@sbb-esta/angular-public';
 
 import { HeaderComponent } from './header/header.component';
 import { NavbuttonComponent } from './navbutton/navbutton.component';
@@ -14,10 +15,10 @@ import { NavbuttonComponent } from './navbutton/navbutton.component';
     CommonModule,
     IconHamburgerMenuModule,
     IconChevronSmallDownModule,
-    IconChevronSmallUpModule
+    IconChevronSmallUpModule,
+    DropdownModule
   ],
   declarations: [HeaderComponent, NavbuttonComponent],
-  exports: [HeaderComponent],
-  entryComponents: [NavbuttonComponent]
+  exports: [HeaderComponent, NavbuttonComponent]
 })
 export class HeaderModule {}
diff --git a/projects/sbb-esta/angular-business/src/lib/header/header/header.component.html b/projects/sbb-esta/angular-business/src/lib/header/header/header.component.html
@@ -16,6 +16,9 @@
 </div>
 
 <div class="sbb-header-mainnavigation">
+  <div #content>
+    <ng-content select="a,button[sbbNavbutton]"></ng-content>
+  </div>
   <template #navigationButtons></template>
 </div>
 <div class="sbb-header-usermenu">
@@ -27,7 +30,7 @@
 <div #iconContent class="sbb-header-logo">
   <ng-content select="[brand],.brand"></ng-content>
 </div>
-<div *ngIf="!isIconProvided" class="sbb-header-logo">
+<div *ngIf="!iconContent.childElementCount" class="sbb-header-logo">
   <svg viewBox="0 0 80 21" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 0h59.233v20.603H0V0z" fill="#EC0000"></path>
     <path
@@ -36,7 +39,3 @@
     ></path>
   </svg>
 </div>
-
-<div #content>
-  <ng-content select="a,button"></ng-content>
-</div>
diff --git a/projects/sbb-esta/angular-business/src/lib/header/header/header.component.scss b/projects/sbb-esta/angular-business/src/lib/header/header/header.component.scss
@@ -1,4 +1,10 @@
-@import '../styles/header';
+@import 'common';
+
+@mixin headerBlockComponent {
+  position: absolute;
+  top: 0px;
+  height: 54px;
+}
 
 .sbb-header {
   width: 100%;
@@ -9,8 +15,8 @@
   z-index: 1000;
   height: 54px;
 
-  background-color: white;
-  border-bottom: solid 1px #dcdcdc;
+  background-color: $sbbColorWhite;
+  border-bottom: solid 1px $sbbColorSilver;
 
   &-ribbon {
     width: 80px;
@@ -21,9 +27,8 @@
     line-height: 12px;
     letter-spacing: 0px;
     font-size: 10px;
-    color: #f0f0f0;
+    color: $sbbColorSilver;
     transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
   }
 
   &-appchooser {
@@ -43,7 +48,7 @@
     &-label {
       height: 23px;
       width: 200px;
-      color: #000000;
+      color: $sbbColorBlack;
       font-size: 15px;
       line-height: 23px;
 
@@ -52,7 +57,7 @@
     &-subtitle {
       height: 16px;
       width: 200px;
-      color: #9b9b9b;
+      color: $sbbColorAnthracite;
       font-size: 13px;
       font-weight: 300;
       line-height: 16px;

diff --git a/projects/sbb-esta/angular-business/src/lib/header/header/header.component.spec.ts b/projects/sbb-esta/angular-business/src/lib/header/header/header.component.spec.ts
@@ -18,8 +18,8 @@ import { NavbuttonComponent } from '../navbutton/navbutton.component';
       [label]="'test'"
       [subtitle]="'test subtitle'"
     >
-      <a>link 1</a>
-      <button [sbbDropdown]="dropdown">button 1</button>
+      <a sbbNavbutton>link 1</a>
+      <button sbbNavbutton [sbbDropdown]="dropdown">button 1</button>
       <sbb-dropdown #dropdown="sbbDropdown">
         <button sbbDropdownItem>dropdown button 1</button>
       </sbb-dropdown>
@@ -95,7 +95,7 @@ describe('HeaderComponent with everything set', () => {
   });
 
   it('should have second button with working dropdown', () => {
-    const dropdownButton = fixture.debugElement.queryAll(By.directive(NavbuttonComponent))[0];
+    const dropdownButton = fixture.debugElement.queryAll(By.directive(NavbuttonComponent))[1];
     expect(dropdownButton.componentInstance.isDropdown).toBeTruthy();
   });
 

diff --git a/projects/sbb-esta/angular-business/src/lib/header/header/header.component.ts b/projects/sbb-esta/angular-business/src/lib/header/header/header.component.ts
@@ -1,8 +1,7 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  ComponentFactory,
-  ComponentFactoryResolver,
   ElementRef,
   HostBinding,
   Input,
@@ -12,19 +11,15 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { NavbuttonComponent } from '../navbutton/navbutton.component';
-
 @Component({
   selector: 'sbb-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HeaderComponent implements OnInit {
-  /**
-   * Css class of a sbb-header
-   */
+export class HeaderComponent implements OnInit, AfterViewInit {
+  /** @docs-private */
   @HostBinding('class.sbb-header') cssClass = true;
 
   /**
@@ -64,51 +59,38 @@ export class HeaderComponent implements OnInit {
   @ViewChild('navigationButtons', { static: true, read: ViewContainerRef })
   navigationButtons: ViewContainerRef;
 
+  /**
+   * Reference to icon, if given through projection.
+   */
   @ViewChild('iconContent', { static: true })
   iconContent: ElementRef;
 
-  private _buttonSpacing = 70;
-  private _componentFactory: ComponentFactory<NavbuttonComponent>;
-  private _left = 0;
+  /**
+   * Distance between navigation buttons, handled through code.
+   */
+  buttonSpacing = 70;
 
-  constructor(private _resolver: ComponentFactoryResolver) {}
+  /** @docs-private */
+  private _left = 0;
 
   ngOnInit() {
     this._checkLabel();
-    const element = this.ngContent.nativeElement;
-    this._componentFactory = this._resolver.resolveComponentFactory(NavbuttonComponent);
+  }
 
-    while (element.children.length > 0) {
-      this._addElementToNavbar(element.children[0]);
+  ngAfterViewInit() {
+    // Absolute positioning of buttons so that they're all 70px apart and won't
+    // move when one is expanded due to dropdowns, is decided here
+    const element = this.ngContent.nativeElement;
+    for (let k = 0; k < element.children.length; k++) {
+      const child = element.children[k];
+      child.style.left = this._left + 'px';
+      this._left += child.clientWidth + this.buttonSpacing;
     }
   }
 
   /**
-   * Wrap an element inside a navbutton and add it to this components children
-   * The element is shifted to the right so that it shows correctly in absolute
-   * positioning.
-   * @param element Element to add
+   * Validates required inputs.
    */
-  private _addElementToNavbar(element: any) {
-    const wrapperButton = this.navigationButtons.createComponent(
-      this._componentFactory,
-      0,
-      undefined,
-      [[element]]
-    );
-    wrapperButton.location.nativeElement.style.left = this._left + 'px';
-    this._left +=
-      element.offsetWidth + this._buttonSpacing + (wrapperButton.instance.isDropdown ? 20 : 0);
-  }
-
-  get isIconProvided() {
-    return (
-      this.iconContent &&
-      this.iconContent.nativeElement &&
-      this.iconContent.nativeElement.children.length > 0
-    );
-  }
-
   private _checkLabel() {
     if (!this.label) {
       throw new Error('You must set [label] for sbb-header.');