feat(business/header): move sbbNavbutton to button only

- Merged css for header components to allow <a> tags to keep button styling
sbb-design-systems · Sep 3, 2019 · 4959258 · 4959258
1 parent a7bd5fe
commit 4959258
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 154 deletions.
diff --git a/projects/angular-showcase/src/app/examples/header-showcase/header-showcase.component.html b/projects/angular-showcase/src/app/examples/header-showcase/header-showcase.component.html
@@ -4,8 +4,8 @@
   [environment]="'dev'"
   [environmentColor]="'darkgreen'"
 >
-  <a sbbNavbutton routerLink="/">Home</a>
-  <a sbbNavbutton routerLink="/navigation1">Another module</a>
+  <a routerLink="/">Home</a>
+  <a routerLink="/navigation1">Another module</a>
   <button sbbNavbutton type="button" [sbbDropdown]="dropdown">
     Navigation 1
   </button>
@@ -28,11 +28,11 @@
       <button sbbDropdownItem type="button" (click)="logout(user)">Logout</button>
     </sbb-dropdown>
   </sbb-usermenu>
-  <svg brand viewBox="0 0 80 21" xmlns="http://www.w3.org/2000/svg">
+  <!-- <svg brand viewBox="0 0 80 21" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 0h59.233v20.603H0V0z" fill="#c0c0c0"></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>
+  </svg> -->
 </sbb-header>
diff --git a/projects/sbb-esta/angular-business/src/lib/header/header/header.component.scss b/projects/sbb-esta/angular-business/src/lib/header/header/header.component.scss
@@ -1,11 +1,94 @@
 @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%;
 
@@ -69,6 +152,52 @@
   &-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 {

diff --git a/projects/sbb-esta/angular-business/src/lib/header/navbutton/navbutton.component.html b/projects/sbb-esta/angular-business/src/lib/header/navbutton/navbutton.component.html
@@ -1,6 +1,4 @@
-<div #button class="sbb-navbutton-button">
-  <ng-content></ng-content>
-</div>
+<ng-content></ng-content>
 <span class="sbb-svgsprite-icon sbb-navbutton-icon-small" *ngIf="isDropdown && !isDropdownExpanded">
   <sbb-icon-chevron-small-down></sbb-icon-chevron-small-down>
 </span>

diff --git a/projects/sbb-esta/angular-business/src/lib/header/navbutton/navbutton.component.scss b/projects/sbb-esta/angular-business/src/lib/header/navbutton/navbutton.component.scss
diff --git a/projects/sbb-esta/angular-business/src/lib/header/navbutton/navbutton.component.ts b/projects/sbb-esta/angular-business/src/lib/header/navbutton/navbutton.component.ts
@@ -9,6 +9,7 @@ import {
   ElementRef,
   HostBinding,
   OnDestroy,
+  Optional,
   SkipSelf,
   ViewChild,
   ViewEncapsulation
@@ -17,9 +18,9 @@ import { DropdownTriggerDirective } from '@sbb-esta/angular-public';
 
 @Component({
   // tslint:disable-next-line:component-selector
-  selector: 'button[sbbNavbutton],a[sbbNavbutton]',
+  selector: 'button[sbbNavbutton]',
   templateUrl: './navbutton.component.html',
-  styleUrls: ['./navbutton.component.scss'],
+  styleUrls: ['../header/header.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -32,12 +33,6 @@ export class NavbuttonComponent implements AfterViewInit, OnDestroy {
    */
   @ViewChild('button', { static: true }) childButton: ElementRef;
 
-  /**
-   * Dropdown trigger on host, if present, for dropdown interaction and detection.
-   */
-  @ContentChild(DropdownTriggerDirective, { static: true })
-  dropdownTrigger: DropdownTriggerDirective;
-
   /**
    * Returns whether childButton's dropdown is expanded.
    */
@@ -55,13 +50,17 @@ export class NavbuttonComponent implements AfterViewInit, OnDestroy {
   /** @docs-private */
   private _subscriptions: Subscription[] = [];
 
-  constructor(@SkipSelf() private _changeDetectorRef: ChangeDetectorRef, private _el: ElementRef) {}
+  constructor(
+    @SkipSelf() private _changeDetectorRef: ChangeDetectorRef,
+    private _el: ElementRef,
+    @Optional() private _dropdownTrigger: DropdownTriggerDirective
+  ) {}
 
   ngAfterViewInit() {
-    if (this.dropdownTrigger) {
+    if (this._dropdownTrigger) {
       this._subscriptions = [
-        this.dropdownTrigger.dropdown.opened.subscribe(() => this._toggleDropdown(true)),
-        this.dropdownTrigger.dropdown.closed.subscribe(() => this._toggleDropdown(false))
+        this._dropdownTrigger.dropdown.opened.subscribe(() => this._toggleDropdown(true)),
+        this._dropdownTrigger.dropdown.closed.subscribe(() => this._toggleDropdown(false))
       ];
     }
   }
@@ -84,14 +83,14 @@ export class NavbuttonComponent implements AfterViewInit, OnDestroy {
    * @param expanded Whether the dropdown has been expanded or not
    */
   private _toggleDropdown(expanded: boolean) {
-    if (this.dropdownTrigger) {
+    if (this._dropdownTrigger) {
       this._isDropdownExpanded = expanded;
       this._el.nativeElement.style.width = expanded ? this.dropdownWidth : null;
-      this.dropdownTrigger.dropdown.panelWidth = expanded ? this.dropdownWidth : null;
+      this._dropdownTrigger.dropdown.panelWidth = expanded ? this.dropdownWidth : null;
 
       if (expanded) {
         // This will update the panel with the new width
-        this.dropdownTrigger.openPanel();
+        this._dropdownTrigger.openPanel();
       }
       this._changeDetectorRef.detectChanges();
     }