feat(daffio): add active router styles to nav header items (#3127)

apps/daffio/src/app/core/header/components/header-item/header-item.directive.spec.ts

@@ -1,38 +1,65 @@
-import { Component } from '@angular/core';
 import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  waitForAsync,
   ComponentFixture,
   TestBed,
-  waitForAsync,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { DaffioHeaderItemDirective } from './header-item.directive';
 
-@Component({ template: '<div daffioHeaderItem>Item</div>' })
-
-class WrapperComponent {}
+@Component({
+  template: `<a daffioHeaderItem [active]="active">Header Item</a>`,
+})
+class WrapperComponent {
+  active: boolean;
+}
 
-describe('DaffioHeaderItemComponent', () => {
-  let component: WrapperComponent;
+describe('DaffioHeaderItemDirective', () => {
   let fixture: ComponentFixture<WrapperComponent>;
+  let de: DebugElement;
+  let wrapper: WrapperComponent;
+  let component: DaffioHeaderItemDirective;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        WrapperComponent,
         DaffioHeaderItemDirective,
+        WrapperComponent,
       ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(WrapperComponent);
-    component = fixture.componentInstance;
-
+    wrapper = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('[daffioHeaderItem]'));
+    component = de.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should add a class of "daffio-header-item" to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daffio-header-item': true,
+    }));
+  });
+
+  it('should be able to take `active` as an input', () => {
+    expect(component.active).toEqual(wrapper.active);
+  });
+
+  it('should add a class of "active" to the host element when active is true', () => {
+    wrapper.active = true;
+    fixture.detectChanges();
+
+    expect(de.classes['active']).toBeTrue();
   });
 });

apps/daffio/src/app/core/header/components/header-item/header-item.directive.ts

@@ -1,11 +1,15 @@
 import {
   Directive,
   HostBinding,
+  Input,
 } from '@angular/core';
 
 @Directive({
   selector: '[daffioHeaderItem]',
 })
 export class DaffioHeaderItemDirective {
-  @HostBinding('class.daffio-header__item') class = true;
+  @HostBinding('class.daffio-header-item') class = true;
+
+  /** Whether or not the header item is active */
+  @Input() @HostBinding('class.active') active = false;
 }

apps/daffio/src/app/core/header/components/header/header-theme.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use 'theme' as daff-theme;
+
+@mixin daffio-header-theme($theme) {
+	$primary: map.get($theme, primary);
+
+	.daffio-header-item {
+		&.active {
+			color: daff-theme.daff-color($primary);
+		}
+	}
+}

apps/daffio/src/app/core/header/components/header/header.component.scss

@@ -1,20 +1,22 @@
 @use 'utilities' as daff;
-@import 'theme';
 
 :host {
   $root: '.daffio-header';
   display: block;
 
   ::ng-deep {
-    #{$root}__item {
+    .daffio-header-item {
       display: none;
-      color: currentColor;
-      font-size: daff.$normal-font-size;
-      padding: 0.25rem 1rem;
-      text-decoration: none;
 
-      @include daff.breakpoint(tablet) {
+      @include daff.breakpoint(big-tablet) {
         display: block;
+        color: currentColor;
+        font-size: daff.$normal-font-size;
+        font-weight: 500;
+        line-height: 64px;
+        padding: 0 1rem;
+        position: relative;
+        text-decoration: none;
       }
     }
   }
@@ -39,7 +41,7 @@
   &__theme-toggle {
     margin-right: 0.25rem;
 
-    @include daff.breakpoint(tablet) {
+    @include daff.breakpoint(big-tablet) {
       margin-right: 0;
     }
   }
@@ -48,7 +50,7 @@
     margin: 0;
     padding: 0;
 
-    @include daff.breakpoint(tablet) {
+    @include daff.breakpoint(big-tablet) {
       display: flex;
       align-items: center;
       gap: 16px;
@@ -58,7 +60,7 @@
   &__button {
     display: none;
 
-    @include daff.breakpoint(tablet) {
+    @include daff.breakpoint(big-tablet) {
       display: flex;
       margin-left: 1rem;
     }
@@ -76,7 +78,7 @@
     display: flex;
     margin-right: -0.8125rem;
 
-    @include daff.breakpoint(tablet) {
+    @include daff.breakpoint(big-tablet) {
       display: none;
     }
   }

apps/daffio/src/app/core/nav/header/header.component.html

@@ -8,7 +8,7 @@
       @if (link.external) {
         <a daffioHeaderItem [href]="link.url" target="_blank">{{link.title}}</a>
       } @else {
-        <a daffioHeaderItem [routerLink]="link.url">{{ link.title }}</a>
+        <a daffioHeaderItem [routerLink]="link.url" [active]="rla.isActive" routerLinkActive #rla="routerLinkActive">{{ link.title }}</a>
       }
     </ng-container>
   }

apps/daffio/src/app/core/nav/header/header.component.ts

@@ -7,7 +7,10 @@ import {
   Component,
   OnInit,
 } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import {
+  RouterLink,
+  RouterLinkActive,
+} from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import {
@@ -35,6 +38,7 @@ import { DaffioNavLink } from '../link/type';
   imports: [
     DaffioHeaderComponentModule,
     RouterLink,
+    RouterLinkActive,
     DaffLogoModule,
     DaffThemeSwitchButtonModule,
     NgFor,

apps/daffio/src/scss/component-themes.scss

@@ -8,6 +8,7 @@
 @use '../app/docs/api/components/api-package/api-package-theme' as api-package;
 @use '../app/newsletter/newsletter-theme' as newsletter;
 @use '../app/core/sidebar/components/sidebar-footer/sidebar-footer-theme' as sidebar-footer;
+@use '../app/core/header/components/header/header-theme' as header;
 
 @mixin component-themes($theme) {
 	@include simple-footer.daffio-simple-footer-theme($theme);
@@ -20,4 +21,5 @@
 	@include api-package.daffio-api-package-theme($theme);
 	@include newsletter.daffio-newsletter-theme($theme);
 	@include sidebar-footer.daffio-sidebar-footer-theme($theme);
+	@include header.daffio-header-theme($theme);
 }