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