feat(business/header): add back documentation

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 {}

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 {}

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 <a> and <button> tags for navigation. Optionally an <sbb-usermenu> 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>
+```

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();
   });