feature(digi-migrering): Flytta in digi-ng-navigation-breadcrumbs till vårt ui. (TV-867)

Merge in TEA/mina-sidor-fa-web from feature/TV-867-digi-ng-navigation-breadcrumbs to develop

Squashed commit of the following:

commit bbb1c239a796479d783d664fad3567eb7a7f45c5
Merge: 7418748b dc1523d7
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Nov 26 09:33:06 2021 +0100

    Merge branch 'develop' into feature/TV-867-digi-ng-navigation-breadcrumbs

commit 7418748b553a7749c734cf36fa849103acd7e61a
Merge: 729f5ec4 d307bd13
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 24 11:08:20 2021 +0100

    Merge branch 'develop' into feature/TV-867-digi-ng-navigation-breadcrumbs

commit 729f5ec4dde250ddfbf709f554c981f94bc1048e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 24 11:08:10 2021 +0100

    Amends from PR

commit d32a5a0554d5d0d274c3a9c97fb6e13d638b48e5
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 23 16:00:27 2021 +0100

    Amends after PR

commit af988214e2cccbea445b5f2b68454243afc8c645
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 23 10:48:12 2021 +0100

    Created ui-breadcrumbs and replaced digi-ng´s breadcrumbs with it.

apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html

@@ -7,12 +7,7 @@
 
   <msfa-sidebar class="msfa__sidebar" [userRoles]="roles$ | async"></msfa-sidebar>
   <main id="msfa-main-content" class="msfa__content">
-    <digi-ng-navigation-breadcrumbs
+    <ui-breadcrumbs *ngIf="showBreadCrumbs" class="msfa__breadcrumbs" [uiItems]="breadcrumbsItems"></ui-breadcrumbs>
-      *ngIf="showBreadCrumbs"
-      class="msfa__breadcrumbs"
-      [afItems]="breadcrumbsItems"
-    ></digi-ng-navigation-breadcrumbs>
-
     <ng-content></ng-content>
   </main>
 

apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts

@@ -1,9 +1,9 @@
-import { DigiNgNavigationBreadcrumbsModule } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiBreadcrumbsModule } from '@ui/breadcrumbs/breadcrumbs.module';
 import { MarkdownModule } from 'ngx-markdown';
 import { FooterModule } from './components/footer/footer.module';
 import { NavigationModule } from './components/navigation/navigation.module';
@@ -22,8 +22,8 @@ import { LayoutComponent } from './layout.component';
     SidebarModule,
     FooterModule,
     MarkdownModule.forRoot({ loader: HttpClient }),
-    DigiNgNavigationBreadcrumbsModule,
     UiLoaderModule,
+    UiBreadcrumbsModule,
   ],
   exports: [LayoutComponent],
 })

libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts

@@ -0,0 +1,5 @@
+export interface BreadcrumbsItem {
+  text: string;
+  href?: string;
+  routerLink?: string;
+}

libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts

@@ -0,0 +1,4 @@
+export enum BreadcrumbsLinkTarget {
+  SELF = '_self',
+  BLANK = '_blank',
+}

libs/ui/src/breadcrumbs/breadcrumbs.component.html

@@ -0,0 +1,27 @@
+<nav class="ui-breadcrumbs" [attr.aria-label]="uiAriaLabel" data-digi-ng-component>
+  <ol class="ui-breadcrumbs__items">
+    <li class="ui-breadcrumbs__item" *ngFor="let item of parents">
+      <a
+        *ngIf="item.routerLink"
+        class="ui-breadcrumbs__link"
+        [routerLink]="item.routerLink"
+        [queryParams]="uiQueryParams"
+        [queryParamsHandling]="uiQueryParamsHandling"
+      >
+        {{ item.text }}
+      </a>
+      <a
+        *ngIf="!item.routerLink"
+        class="ui-breadcrumbs__link"
+        [attr.rel]="rel"
+        [attr.type]="uiType"
+        [attr.download]="uiDownload"
+        [attr.target]="uiTarget"
+        [href]="uiHref"
+      >
+        {{ item.text }}
+      </a>
+    </li>
+    <li class="ui-breadcrumbs__item" aria-current="page">{{ currentItem.text }}</li>
+  </ol>
+</nav>

libs/ui/src/breadcrumbs/breadcrumbs.component.scss

@@ -0,0 +1,28 @@
+.ui-breadcrumbs {
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    font-family: var(--digi--typography--font-family);
+    font-size: var(--digi--typography--font-size--xs);
+    color: var(--digi--typography--color--text);
+
+    &:not(:last-child) {
+      padding-right: var(--digi--layout--padding--10);
+
+      &::after {
+        content: '/';
+        padding-left: var(--digi--layout--padding--10);
+      }
+    }
+  }
+
+  &__link {
+    text-decoration: none;
+  }
+}

libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts

@@ -0,0 +1,10 @@
+/* tslint:disable:no-unused-variable */
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+
+describe('BreadcrumbsComponent', () => {
+  let component: BreadcrumbsComponent;
+  it('should create', () => {
+    component = new BreadcrumbsComponent();
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts

@@ -0,0 +1,41 @@
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+import { UiBreadcrumbsModule } from './breadcrumbs.module';
+import { BreadcrumbsItem } from './breadcrumbs-item.model';
+
+export default { title: 'Breadcrumbs', component: BreadcrumbsComponent };
+
+const componentModule = {
+  moduleMetadata: {
+    declarations: [],
+    imports: [UiBreadcrumbsModule],
+  },
+};
+
+const items: BreadcrumbsItem[] = [
+  {
+    text: 'Start',
+    href: '/',
+  },
+  {
+    text: 'Sub-page 1',
+    href: '#',
+  },
+  {
+    text: 'Sub-page 2',
+    href: '#',
+  },
+  {
+    text: 'Current page',
+    href: 'i-will-not-be-used-because-i-am-the-last-item',
+  },
+];
+
+export const standard = () => ({
+  ...componentModule,
+  template: `
+    <ui-breadcrumbs [uiItems]="items"></ui-breadcrumbs>
+  `,
+  props: {
+    items,
+  },
+});

libs/ui/src/breadcrumbs/breadcrumbs.component.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { BreadcrumbsItem } from './breadcrumbs-item.model';
+import { BreadcrumbsLinkTarget } from './breadcrumbs-link-target.enum';
+/**
+ * This is a breadcrumbs component. Provide an array of BreadcrumbsItem and it will create a list of links.
+ * If the BreadcrumbsItem contains both href and routerLink, the routerLink takes presedence.
+ */
+@Component({
+  selector: 'ui-breadcrumbs',
+  templateUrl: './breadcrumbs.component.html',
+  styleUrls: ['./breadcrumbs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbsComponent {
+  /**
+   * A list of navigation items.
+   */
+  @Input() uiItems: BreadcrumbsItem[] = [];
+
+  /**
+   * An optional aria-label for the nav element. Defaults to 'breadcrumbs'.
+   */
+  @Input() uiAriaLabel: string = 'breadcrumbs';
+
+  /**
+   * The element's target attribute. If target is BreadcrumbsLinkTarget.BLANK, the component will add necessary rel attribute
+   * for security reasons.
+   */
+  @Input() uiTarget?: BreadcrumbsLinkTarget;
+
+  /**
+   * Optional download attribute
+   */
+  @Input() uiDownload?: boolean | string;
+
+  /**
+   * Optional type attribute
+   */
+  @Input() uiType?: string;
+
+  /**
+   * A href string.
+   */
+  @Input() uiHref: string = ' ';
+
+  /**
+   * Optional rel attribute
+   */
+  @Input() uiRel?: string;
+
+  /**
+   * Angular router queryParams. F.e. `{ lorem: "ipsum" }`
+   */
+  @Input() uiQueryParams?: { [key: string]: string };
+
+  /**
+   * How to handle query parameters in a router link. One of:
+   * - merge : Merge new with current parameters.
+   * - preserve : Preserve current parameters.
+   */
+  @Input() uiQueryParamsHandling: 'merge' | 'preserve' = 'merge';
+
+  get parents(): BreadcrumbsItem[] {
+    return this.uiItems.slice(0, this.uiItems.length - 1);
+  }
+
+  get currentItem(): BreadcrumbsItem {
+    return this.uiItems[this.uiItems.length - 1];
+  }
+
+  get rel() {
+    if (this.uiTarget === BreadcrumbsLinkTarget.BLANK) {
+      return 'noopener noreferrer';
+    } else if (this.uiRel) {
+      return this.uiRel;
+    } else {
+      return null;
+    }
+  }
+}

libs/ui/src/breadcrumbs/breadcrumbs.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, RouterModule],
+  declarations: [BreadcrumbsComponent],
+  exports: [BreadcrumbsComponent],
+})
+export class UiBreadcrumbsModule {}