From 64c360ed8a0b517f343c30578dae6558ab56005e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rombol=C3=A0=20Gianluca?= <rag@ti8m.ch>
Date: Thu, 5 Sep 2019 09:33:55 +0200
Subject: [PATCH] feat(business/header): add back documentation

---
 .../app/business/examples/examples.module.ts  |  4 ++-
 .../app/public/examples/examples.module.ts    |  5 +--
 .../angular-business/src/lib/header/header.md | 32 +++++++++++++++++++
 .../header/header/header.component.spec.ts    | 14 +++++---
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 projects/sbb-esta/angular-business/src/lib/header/header.md

diff --git a/projects/angular-showcase/src/app/business/examples/examples.module.ts b/projects/angular-showcase/src/app/business/examples/examples.module.ts
index f45b00523e..2c5b89d60b 100644
--- a/projects/angular-showcase/src/app/business/examples/examples.module.ts
+++ b/projects/angular-showcase/src/app/business/examples/examples.module.ts
@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { HeaderModule } from '@sbb-esta/angular-business';
+
 @NgModule({
   declarations: [],
-  imports: [CommonModule]
+  imports: [CommonModule, HeaderModule]
 })
 export class ExamplesModule {}
diff --git a/projects/angular-showcase/src/app/public/examples/examples.module.ts b/projects/angular-showcase/src/app/public/examples/examples.module.ts
index 32e88c8e95..e5889b6b7a 100644
--- a/projects/angular-showcase/src/app/public/examples/examples.module.ts
+++ b/projects/angular-showcase/src/app/public/examples/examples.module.ts
@@ -42,8 +42,6 @@ import {
   UserMenuModule
 } from '@sbb-esta/angular-public';
 
-import { HeaderModule } from '@sbb-esta/angular-business';
-
 import { AccordionShowcaseComponent } from './accordion-showcase/accordion-showcase.component';
 import { AutocompleteShowcaseComponent } from './autocomplete-showcase/autocomplete-showcase.component';
 import { BadgeShowcaseComponent } from './badge-showcase/badge-showcase.component';
@@ -180,8 +178,7 @@ const exampleComponents = [
     BreadcrumbModule,
     UserMenuModule,
     GhettoboxModule,
-    BadgeModule,
-    HeaderModule
+    BadgeModule
   ]
 })
 export class ExamplesModule {}
diff --git a/projects/sbb-esta/angular-business/src/lib/header/header.md b/projects/sbb-esta/angular-business/src/lib/header/header.md
new file mode 100644
index 0000000000..8659b00bbb
--- /dev/null
+++ b/projects/sbb-esta/angular-business/src/lib/header/header.md
@@ -0,0 +1,32 @@
+# Header Overview
+
+Import header module in your application
+
+```ts
+import { HeaderModule } from '@sbb-esta/angular-business';
+```
+
+The header will appear at the top of the screen in a fixed position, and provide a container for navigation, usermenu, and eventually a logo.
+It supports &lt;a&gt; and &lt;button&gt; tags for navigation. Optionally an &lt;sbb-usermenu&gt; can be provided, as well as any element with a [brand] property, or .brand class, for replacing the standard logo.
+
+```html
+<sbb-header [label]="Title" [subtitle]="Subtitle" [environment]="dev" [environmentColor]="red">
+  <a routerLink="/">A tag</a>
+  <button sbbNavbutton type="button" [sbbDropdown]="dropdown">Button tag</button>
+  <button sbbNavbutton type="button">Button tag with dropdown</button>
+  <sbb-dropdown #dropdown="sbbDropdown">
+    <a sbbDropdownItem routerLink="/navigation1/section1" routerLinkActive="sbb-selected"
+      >Option 1</a
+    >
+    <a sbbDropdownItem routerLink="/navigation1/section2" routerLinkActive="sbb-selected"
+      >Option 2</a
+    >
+  </sbb-dropdown>
+  <sbb-usermenu ...>
+    <!-- A usermenu can be optionally included -->
+  </sbb-usermenu>
+  <svg brand>
+    <!-- A logo can be optionally included -->
+  </svg>
+</sbb-header>
+```
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
index 109df34950..a411241443 100644
--- 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,7 +18,7 @@ import { NavbuttonComponent } from '../navbutton/navbutton.component';
       [label]="'test'"
       [subtitle]="'test subtitle'"
     >
-      <a sbbNavbutton>link 1</a>
+      <a>link 1</a>
       <button sbbNavbutton [sbbDropdown]="dropdown">button 1</button>
       <sbb-dropdown #dropdown="sbbDropdown">
         <button sbbDropdownItem>dropdown button 1</button>
@@ -88,14 +88,18 @@ describe('HeaderComponent with everything set', () => {
     expect(mainnavigation).toBeTruthy();
   });
 
-  it('should have 2 navbuttons', () => {
+  it('should have 1 navbutton and a link', () => {
     const navbuttons = fixture.debugElement.queryAll(By.css('.sbb-navbutton'));
     expect(navbuttons).toBeTruthy();
-    expect(navbuttons.length).toBe(2);
+    expect(navbuttons.length).toBe(1);
+
+    const links = fixture.debugElement.queryAll(By.css('a'));
+    expect(links).toBeTruthy();
+    expect(links.length).toBe(1);
   });
 
-  it('should have second button with working dropdown', () => {
-    const dropdownButton = fixture.debugElement.queryAll(By.directive(NavbuttonComponent))[1];
+  it('should have button with working dropdown', () => {
+    const dropdownButton = fixture.debugElement.queryAll(By.directive(NavbuttonComponent))[0];
     expect(dropdownButton.componentInstance.isDropdown).toBeTruthy();
   });