feat(breadcrumb): add link appearance (#305)

allianz · May 20, 2021 · 303b7b1 · 303b7b1
1 parent 43e31bf
commit 303b7b1
Show file tree

Hide file tree

Showing 13 changed files with 121 additions and 16 deletions.
diff --git a/projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb-examples.module.ts b/projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb-examples.module.ts
@@ -5,10 +5,12 @@ import { NxBreadcrumbModule } from '@aposin/ng-aquila/breadcrumb';
 import { NgModule } from '@angular/core';
 import { BreadcrumbExampleComponent } from './breadcrumb/breadcrumb-example';
 import { BreadcrumbNegativeExampleComponent } from './breadcrumb-negative/breadcrumb-negative-example';
+import { BreadcrumbLinkExampleComponent } from './breadcrumb-link/breadcrumb-link-example';
 
 const EXAMPLES = [
   BreadcrumbExampleComponent,
-  BreadcrumbNegativeExampleComponent
+  BreadcrumbNegativeExampleComponent,
+  BreadcrumbLinkExampleComponent
 ];
 
  @NgModule({
@@ -25,6 +27,7 @@ export class BreadcrumbExamplesModule {
     return {
       'breadcrumb': BreadcrumbExampleComponent,
       'breadcrumb-negative': BreadcrumbNegativeExampleComponent,
+      'breadcrumb-link': BreadcrumbLinkExampleComponent,
     };
   }
 }
diff --git a/...s/ng-aquila/documentation/examples/breadcrumb/breadcrumb-link/breadcrumb-link-example.css b/...s/ng-aquila/documentation/examples/breadcrumb/breadcrumb-link/breadcrumb-link-example.css
diff --git a/.../ng-aquila/documentation/examples/breadcrumb/breadcrumb-link/breadcrumb-link-example.html b/.../ng-aquila/documentation/examples/breadcrumb/breadcrumb-link/breadcrumb-link-example.html
@@ -0,0 +1,9 @@
+<nav aria-label="Breadcrumb">
+  <ol nxBreadcrumb appearance="link">
+    <li *ngFor="let item of items; let i = index">
+      <a nxBreadcrumbItem (click)="goToItem(i)" routerLink="#">
+        {{ item }}
+      </a>
+    </li>
+  </ol>
+</nav>
diff --git a/...ts/ng-aquila/documentation/examples/breadcrumb/breadcrumb-link/breadcrumb-link-example.ts b/...ts/ng-aquila/documentation/examples/breadcrumb/breadcrumb-link/breadcrumb-link-example.ts
@@ -0,0 +1,22 @@
+
+import { Component } from '@angular/core';
+
+/**
+* @title Appearance link
+*/
+@Component({
+  selector: 'breadcrumb-link-example',
+  templateUrl: './breadcrumb-link-example.html',
+  styleUrls: ['./breadcrumb-link-example.css']
+})
+export class BreadcrumbLinkExampleComponent {
+  items = [
+    'Home',
+    'Insurance',
+    'Health Insurance',
+  ];
+
+  goToItem(i: number) {
+    this.items = this.items.slice(0, i + 1);
+  }
+}
diff --git a/projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb/breadcrumb-example.html b/projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb/breadcrumb-example.html
@@ -1,6 +1,6 @@
 <nav aria-label="Breadcrumb">
   <ol nxBreadcrumb>
-    <li *ngFor="let item of dynamicItems; let i = index">
+    <li *ngFor="let item of items; let i = index">
       <a nxBreadcrumbItem (click)="goToItem(i)" routerLink="#">
         {{ item }}
       </a>

diff --git a/projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb/breadcrumb-example.ts b/projects/ng-aquila/documentation/examples/breadcrumb/breadcrumb/breadcrumb-example.ts
@@ -10,16 +10,13 @@ import { Component } from '@angular/core';
   styleUrls: ['./breadcrumb-example.css']
 })
 export class BreadcrumbExampleComponent {
-
   items = [
     'Home',
     'Insurance',
     'Health Insurance',
   ];
 
-  dynamicItems = this.items;
-
   goToItem(i: number) {
-    this.dynamicItems = this.items.slice(0, i + 1);
+    this.items = this.items.slice(0, i + 1);
   }
 }
diff --git a/projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.scss b/projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.scss
@@ -25,5 +25,5 @@
 
 :host.cdk-keyboard-focused .nx-breadcrumb-item__text {
   @include focus-style();
-  border-radius: nx-border-radius(xl);
+  border-radius: nx-border-radius(s);
 }
diff --git a/projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.ts b/projects/ng-aquila/src/breadcrumb/breadcrumb-item.component.ts
@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { Component, Renderer2, ElementRef, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Component, Renderer2, ElementRef, ChangeDetectionStrategy, OnDestroy, Input } from '@angular/core';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -8,7 +8,7 @@ import { Component, Renderer2, ElementRef, ChangeDetectionStrategy, OnDestroy }
   styleUrls: ['breadcrumb-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    'class': 'nx-breadcrumb-item',
+    'class': 'nx-breadcrumb-item'
   }
 })
 export class NxBreadcrumbItemComponent implements OnDestroy {

diff --git a/projects/ng-aquila/src/breadcrumb/breadcrumb.component.scss b/projects/ng-aquila/src/breadcrumb/breadcrumb.component.scss
@@ -7,16 +7,32 @@
   padding: 0;
 }
 
-::ng-deep li:last-child ::ng-deep .nx-breadcrumb-item {
+:host(.is-link) {
+  ::ng-deep .nx-breadcrumb-item {
+    color: var(--breadcrumb-link-color);
+  }
+
+  ::ng-deep .nx-breadcrumb-item__text {
+    &:hover {
+      color: var(--breadcrumb-link-hover-color);
+    }
+
+    &:active {
+      color: var(--breadcrumb-link-active-color);
+    }
+  }
+}
+
+::ng-deep li:last-child .nx-breadcrumb-item {
   font-weight: nx-font-weight(semibold);
   cursor: auto;
 }
 
-::ng-deep li:last-child ::ng-deep .nx-breadcrumb-item__chevron {
+::ng-deep li:last-child .nx-breadcrumb-item__chevron {
   display: none;
 }
 
-::ng-deep li + li ::ng-deep .nx-breadcrumb-item {
+::ng-deep li + li .nx-breadcrumb-item {
   margin-left: nx-spacer(3xs);
 
   :host-context([dir="rtl"]) & {
@@ -27,7 +43,7 @@
 
 :host(.is-negative) {
   ::ng-deep .nx-breadcrumb-item {
-    @include var(color, negative);
+    color: var(--negative);
   }
 }
 

diff --git a/projects/ng-aquila/src/breadcrumb/breadcrumb.component.spec.ts b/projects/ng-aquila/src/breadcrumb/breadcrumb.component.spec.ts
@@ -31,7 +31,8 @@ describe('NxBreadcrumbComponent', () => {
       declarations: [
         BasicBreadcrumbComponent,
         BreadcrumbOnPushComponent,
-        DynamicBreadcrumbComponent
+        DynamicBreadcrumbComponent,
+        LinkBreadcrumbComponent
       ]
     }).compileComponents();
   }));
@@ -59,6 +60,11 @@ describe('NxBreadcrumbComponent', () => {
     expect(testInstance.breadcrumbInstance.negative).toBe(true);
   });
 
+  it('should have appearence "link"', () => {
+    createTestComponent(LinkBreadcrumbComponent);
+    expect(fixture.nativeElement.querySelector('ol')).toHaveClass('is-link');
+  });
+
   it('sets aria-current to last item', () => {
     createTestComponent(DynamicBreadcrumbComponent);
     expect(breadcrumbItemInstances[0].getAttribute('aria-current')).toBeFalsy();
@@ -131,3 +137,23 @@ class DynamicBreadcrumbComponent extends BreadcrumbTest {
     'Test2'
   ];
 }
+
+@Component({
+  template: `
+    <ol nxBreadcrumb [appearance]="appearance">
+      <li>
+        <a nxBreadcrumbItem>
+          test
+        </a>
+      </li>
+      <li>
+        <a nxBreadcrumbItem>
+          test 2
+        </a>
+      </li>
+    </ol>
+  `
+})
+class LinkBreadcrumbComponent extends BreadcrumbTest {
+  appearance = 'link';
+}
diff --git a/projects/ng-aquila/src/breadcrumb/breadcrumb.component.ts b/projects/ng-aquila/src/breadcrumb/breadcrumb.component.ts
@@ -5,14 +5,20 @@ import { NxBreadcrumbItemComponent } from './breadcrumb-item.component';
 import { startWith, takeUntil, filter } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
+/**
+ * The appearance of the breadcrumb.
+ */
+export type NxBreadcrumpAppearance = 'default' | 'link';
+
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'ol[nxBreadcrumb]',
   templateUrl: './breadcrumb.component.html',
   styleUrls: ['./breadcrumb.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class.is-negative]': 'negative'
+    '[class.is-negative]': 'negative',
+    '[class.is-link]': 'appearance === "link"'
   }
 })
 export class NxBreadcrumbComponent implements AfterContentInit, OnDestroy  {
@@ -21,6 +27,21 @@ export class NxBreadcrumbComponent implements AfterContentInit, OnDestroy  {
 
   private _negative: boolean = false;
 
+  private _appeareance: NxBreadcrumpAppearance = 'default';
+
+  /**
+   * Sets the appearance of the breadcrumb. default: 'default'
+   */
+  @Input()
+  set appearance(value: NxBreadcrumpAppearance) {
+    this._appeareance = value;
+    this._cdr.markForCheck();
+  }
+
+  get appearance() {
+    return this._appeareance;
+  }
+
   /** Whether the component uses the negative styling. */
   @Input()
   set negative(value: boolean) {
@@ -33,7 +54,8 @@ export class NxBreadcrumbComponent implements AfterContentInit, OnDestroy  {
   }
 
   /**@docs-private */
-  @ContentChildren(NxBreadcrumbItemComponent, {descendants: true}) breadcrumbItems: QueryList<NxBreadcrumbItemComponent>;
+  @ContentChildren(NxBreadcrumbItemComponent, {descendants: true})
+  breadcrumbItems: QueryList<NxBreadcrumbItemComponent>;
 
   constructor(private _cdr: ChangeDetectorRef) { }
 

diff --git a/projects/ng-aquila/src/breadcrumb/breadcrumb.md b/projects/ng-aquila/src/breadcrumb/breadcrumb.md
@@ -15,6 +15,12 @@ You can see the basic behaviour of the breadcrumb component in the example below
 
 <!-- example(breadcrumb) -->
 
+### Link appearance
+
+You can select the style of the breadcrump via the `appearance` input.
+
+<!-- example(breadcrumb-link) -->
+
 ### Negative styling
 
 <!-- example(breadcrumb-negative) -->

diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -484,6 +484,10 @@ $nx-theme: (
   breadcrumb-font-weight: 400,
   breadcrumb-chevron-color: text-01,
 
+  breadcrumb-link-color: interactive-text,
+  breadcrumb-link-hover-color: hover-link,
+  breadcrumb-link-active-color: active-primary,
+
   icon-button-small-icon-size: 16px,
   icon-button-small-medium-icon-size: 24px,
   icon-button-medium-icon-size: 24px,