From 05575e6ac8abb36ec415259b83c5c24bdd9f3846 Mon Sep 17 00:00:00 2001 From: Nikola Holst Nikolic Date: Fri, 26 Nov 2021 09:47:07 +0100 Subject: [PATCH] =?UTF-8?q?feature(digi-migrering):=20Flytta=20in=20digi-n?= =?UTF-8?q?g-navigation-breadcrumbs=20till=20v=C3=A5rt=20ui.=20(TV-867)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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 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 Date: Wed Nov 24 11:08:10 2021 +0100 Amends from PR commit d32a5a0554d5d0d274c3a9c97fb6e13d638b48e5 Author: WP\holno Date: Tue Nov 23 16:00:27 2021 +0100 Amends after PR commit af988214e2cccbea445b5f2b68454243afc8c645 Author: WP\holno Date: Tue Nov 23 10:48:12 2021 +0100 Created ui-breadcrumbs and replaced digi-ng´s breadcrumbs with it. --- .../components/layout/layout.component.html | 7 +- .../shared/components/layout/layout.module.ts | 4 +- .../src/breadcrumbs/breadcrumbs-item.model.ts | 5 ++ .../breadcrumbs-link-target.enum.ts | 4 + .../breadcrumbs/breadcrumbs.component.html | 27 +++++++ .../breadcrumbs/breadcrumbs.component.scss | 28 +++++++ .../breadcrumbs/breadcrumbs.component.spec.ts | 10 +++ .../breadcrumbs.component.stories.ts | 41 ++++++++++ .../src/breadcrumbs/breadcrumbs.component.ts | 80 +++++++++++++++++++ libs/ui/src/breadcrumbs/breadcrumbs.module.ts | 11 +++ 10 files changed, 209 insertions(+), 8 deletions(-) create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs.component.html create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs.component.scss create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs.component.ts create mode 100644 libs/ui/src/breadcrumbs/breadcrumbs.module.ts diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html index e3ffb7f..39cac2d 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html @@ -7,12 +7,7 @@
- - +
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts index d16bb8e..d8fea45 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts +++ b/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], }) diff --git a/libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts b/libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts new file mode 100644 index 0000000..b83c092 --- /dev/null +++ b/libs/ui/src/breadcrumbs/breadcrumbs-item.model.ts @@ -0,0 +1,5 @@ +export interface BreadcrumbsItem { + text: string; + href?: string; + routerLink?: string; +} diff --git a/libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts b/libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts new file mode 100644 index 0000000..85c47ef --- /dev/null +++ b/libs/ui/src/breadcrumbs/breadcrumbs-link-target.enum.ts @@ -0,0 +1,4 @@ +export enum BreadcrumbsLinkTarget { + SELF = '_self', + BLANK = '_blank', +} diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.html b/libs/ui/src/breadcrumbs/breadcrumbs.component.html new file mode 100644 index 0000000..17b8c75 --- /dev/null +++ b/libs/ui/src/breadcrumbs/breadcrumbs.component.html @@ -0,0 +1,27 @@ + diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.scss b/libs/ui/src/breadcrumbs/breadcrumbs.component.scss new file mode 100644 index 0000000..b49cce4 --- /dev/null +++ b/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; + } +} diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts b/libs/ui/src/breadcrumbs/breadcrumbs.component.spec.ts new file mode 100644 index 0000000..919763b --- /dev/null +++ b/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(); + }); +}); diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts b/libs/ui/src/breadcrumbs/breadcrumbs.component.stories.ts new file mode 100644 index 0000000..a2639a5 --- /dev/null +++ b/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: ` + + `, + props: { + items, + }, +}); diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.component.ts b/libs/ui/src/breadcrumbs/breadcrumbs.component.ts new file mode 100644 index 0000000..9cfc566 --- /dev/null +++ b/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; + } + } +} diff --git a/libs/ui/src/breadcrumbs/breadcrumbs.module.ts b/libs/ui/src/breadcrumbs/breadcrumbs.module.ts new file mode 100644 index 0000000..c9338a7 --- /dev/null +++ b/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 {}