feat(business/header): implement header component

projects/angular-showcase/src/app/app.module.ts

@@ -1,11 +1,12 @@
+import { MonacoEditorModule } from 'ngx-monaco-editor';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ICON_COMPONENT_LIST, IconCollectionModule } from '@sbb-esta/angular-icons';
-import { MonacoEditorModule } from 'ngx-monaco-editor';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';

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

@@ -1,12 +1,10 @@
+import { MonacoEditorModule } from 'ngx-monaco-editor';
+
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { RouterModule } from '@angular/router';
-
-import { MonacoEditorModule } from 'ngx-monaco-editor';
-
 import { IconCollectionModule } from '@sbb-esta/angular-icons';
 import {
   AccordionModule,

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.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import {
+  IconChevronSmallDownModule,
+  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';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconHamburgerMenuModule,
+    IconChevronSmallDownModule,
+    IconChevronSmallUpModule,
+    DropdownModule
+  ],
+  declarations: [HeaderComponent, NavbuttonComponent],
+  exports: [HeaderComponent, NavbuttonComponent]
+})
+export class HeaderModule {}

projects/sbb-esta/angular-business/src/lib/header/header.ts

@@ -0,0 +1,3 @@
+export * from './header.module';
+
+export * from './header/header.component';

projects/sbb-esta/angular-business/src/lib/header/header/header.component.html

@@ -0,0 +1,41 @@
+<div class="sbb-header-ribbon" *ngIf="environment" [style.background]="environmentColor">
+  {{ environment }}
+</div>
+
+<div class="sbb-header-appchooser">
+  <span class="sbb-svgsprite-icon">
+    <!-- placeholder for other icon -->
+    <sbb-icon-hamburger-menu></sbb-icon-hamburger-menu>
+  </span>
+  <!-- Content here -->
+</div>
+
+<div class="sbb-header-titlebox">
+  <div class="sbb-header-titlebox-label">{{ label }}</div>
+  <div *ngIf="subtitle" class="sbb-header-titlebox-subtitle">{{ subtitle }}</div>
+</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">
+  <ng-content select="sbb-usermenu"></ng-content>
+</div>
+
+<!-- If an icon is provided, use that, otherwise use the sbb logo -->
+<!-- TODO: make cleaner -->
+<div #iconContent class="sbb-header-logo">
+  <ng-content select="[brand],.brand"></ng-content>
+</div>
+<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
+      d="M35.186 17.02h3.75l-5.047-5.163h6.265v5.163h2.96v-5.163h6.267l-5.05 5.163h3.752l6.427-6.708-6.426-6.73h-3.752l5.05 5.185h-6.266V3.583h-2.96v5.184h-6.267l5.047-5.184h-3.75l-6.43 6.73 6.43 6.707"
+      fill="#FFF"
+    ></path>
+  </svg>
+</div>

projects/sbb-esta/angular-business/src/lib/header/header/header.component.scss

@@ -0,0 +1,218 @@
+@import 'common';
+
+$border: solid 2px $sbbColorGranite;
+$buttonMarginTop: calc(54px / 2 - 15px);
+
+@mixin headerBlockComponent {
+  position: absolute;
+  top: 0px;
+  height: 54px;
+}
+
+@mixin smallIconDropdown() {
+  position: relative;
+  top: 3px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@mixin navButtonDefaultButton() {
+  @include buttonResetFrameless();
+
+  position: relative;
+  white-space: nowrap;
+  font-family: $fontSbbLight;
+  font-size: pxToRem(15);
+  text-decoration: none;
+  text-align: left;
+  background: $sbbColorWhite; //TODO: this is required for overlaps
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+    outline: none;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    left: 50%;
+    height: 1px;
+    border-bottom: 1px solid currentColor;
+    transition: width 0.3s, left 0.3s;
+  }
+
+  &.sbb-active::after,
+  &:not(.sbb-active):focus::after,
+  &:not(.sbb-active):hover::after {
+    left: 0;
+    width: 100%;
+  }
+
+  &:not(.sbb-active):focus &:not([aria-expanded='true']),
+  &:not(.sbb-active):hover {
+    color: $sbbColorRed125;
+
+    &::after {
+      border-bottom-color: $sbbColorRed125;
+    }
+  }
+
+  &[disabled] {
+    color: $sbbColorStorm;
+
+    &:hover,
+    &:focus {
+      color: $sbbColorStorm;
+      cursor: default;
+
+      &::after {
+        width: 0;
+      }
+    }
+  }
+
+  &.sbb-active:hover,
+  &.sbb-active:focus {
+    color: currentColor;
+    cursor: default;
+
+    &::after {
+      border-bottom-color: currentColor;
+    }
+  }
+}
+
+.sbb-header {
+  width: 100%;
+
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 1000;
+  height: 54px;
+
+  background-color: $sbbColorWhite;
+  border-bottom: solid 1px $sbbColorSilver;
+
+  &-ribbon {
+    width: 80px;
+    position: absolute;
+    top: 12px;
+    left: -20px;
+    text-align: center;
+    line-height: 12px;
+    letter-spacing: 0px;
+    font-size: 10px;
+    color: $sbbColorSilver;
+    transform: rotate(-45deg);
+  }
+
+  &-appchooser {
+    @include headerBlockComponent();
+
+    left: 46px;
+    width: 54px;
+    padding: 17px;
+  }
+
+  &-titlebox {
+    @include headerBlockComponent();
+
+    left: 100px;
+    width: 200px;
+    font-family: $fontSbbLight;
+    &-label {
+      height: 23px;
+      width: 200px;
+      color: $sbbColorBlack;
+      font-size: 15px;
+      line-height: 23px;
+
+      margin-top: 8px;
+    }
+    &-subtitle {
+      height: 16px;
+      width: 200px;
+      color: $sbbColorAnthracite;
+      font-size: 13px;
+      font-weight: 300;
+      line-height: 16px;
+
+      margin-bottom: 7px;
+    }
+  }
+
+  &-mainnavigation {
+    @include headerBlockComponent();
+    left: 350px;
+
+    a {
+      @include navButtonDefaultButton();
+      white-space: nowrap;
+      position: absolute;
+      height: 30px;
+      margin-top: $buttonMarginTop;
+      display: flex;
+    }
+
+    .sbb-navbutton {
+      @include navButtonDefaultButton();
+      white-space: nowrap;
+      position: absolute;
+      height: 30px;
+      // top: -1px;
+      // margin-top: $buttonMarginTop;
+      margin-top: -1px;
+      top: $buttonMarginTop;
+      display: flex;
+
+      .sbb-navbutton-icon-small {
+        @include smallIconDropdown();
+      }
+      .sbb-navbutton-icon-small-expanded {
+        @include smallIconDropdown();
+        position: absolute;
+        right: 5px;
+      }
+    }
+
+    .sbb-navbutton.sbb-navbutton-dropdown-expanded {
+      border: $border;
+      border-bottom: none;
+
+      z-index: 5;
+
+      padding-left: calc(15px - 2px);
+      margin-left: -15px;
+      margin-top: calc($buttonMarginTop - 7px);
+      height: 35px;
+
+      &::after {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &-usermenu {
+    @include headerBlockComponent();
+
+    right: 159px;
+    width: 200px;
+    z-index: 1;
+  }
+
+  &-logo {
+    @include headerBlockComponent();
+
+    top: 17px;
+    right: 35px;
+    width: 80px;
+  }
+}