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 <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
+
+ A tag
+
+
+
+ Option 1
+ Option 2
+
+
+
+
+
+
+```
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'"
>
- link 1
+ link 1
@@ -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();
});