[Breadcrumbs]: Created breadcrumbs component

.prettierrc

@@ -1,3 +1,3 @@
 {
   "printWidth": 100
-}
+}

ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.html

@@ -0,0 +1,14 @@
+<nav [attr.aria-label]="breadcrumbsAriaLabel" *ngIf="links.length > 0">
+	<ul class="fudis-breadcrumbs">
+		<li class="fudis-breadcrumbs__item" *ngFor="let link of links; let last = last">
+			<fudis-link
+				[disabled]="last"
+				[color]="last ? 'default' : 'primary'"
+				[routerLinkUrl]="link.url"
+				*ngIf="link.url"
+				[linkTitle]="link.label"
+				[attr.aria-current]="last ? 'page' : null" />
+			<fudis-icon class="fudis-breadcrumbs__icon" aria-hidden="true" icon="chevron" *ngIf="!last" />
+		</li>
+	</ul>
+</nav>

ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.scss

@@ -0,0 +1,14 @@
+@use '../../foundations/typography/mixins.scss' as typography;
+
+.fudis-breadcrumbs {
+	@include typography.body-text-md-regular;
+
+	display: flex;
+	align-items: center;
+	list-style: none;
+
+	&__item {
+		display: flex;
+		align-items: center;
+	}
+}

ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.spec.ts

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+import { LinkComponent } from '../link/link.component';
+
+describe('BreadcrumbsComponent', () => {
+	let component: BreadcrumbsComponent;
+	let fixture: ComponentFixture<BreadcrumbsComponent>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [BreadcrumbsComponent, LinkComponent],
+			imports: [RouterTestingModule],
+		});
+		fixture = TestBed.createComponent(BreadcrumbsComponent);
+		component = fixture.componentInstance;
+	});
+
+	it('should render the correct number of breadcrumb items', () => {
+		component.links = [
+			{ label: 'Components', url: '/components' },
+			{ label: 'Breadcrumbs', url: '/breadcrumbs' },
+			{ label: 'Breadcrumb', url: '/breadcrumbs/breadcrumb' },
+		];
+		fixture.detectChanges();
+		const breadcrumbAnchors = fixture.debugElement.queryAll(By.css('a'));
+
+		expect(breadcrumbAnchors.length).toBe(3);
+	});
+
+	it('should display the correct breadcrumb labels', () => {
+		component.links = [
+			{ label: 'Components', url: '/components' },
+			{ label: 'Breadcrumbs', url: '/breadcrumbs' },
+		];
+		fixture.detectChanges();
+		const breadcrumbItems = fixture.debugElement.queryAll(By.css('a'));
+
+		expect(breadcrumbItems[0].nativeElement.textContent).toContain('Components');
+
+		expect(breadcrumbItems[1].nativeElement.textContent).toContain('Breadcrumbs');
+	});
+
+	it('should disable the last breadcrumb item', () => {
+		component.links = [
+			{ label: 'Components', url: '/components' },
+			{ label: 'Breadcrumbs', url: '/breadcrumbs' },
+		];
+		fixture.detectChanges();
+
+		const breadcrumbAnchors = fixture.debugElement.queryAll(By.css('a'));
+
+		expect(
+			breadcrumbAnchors[breadcrumbAnchors.length - 1].nativeElement.classList.contains('fudis-link__anchor--disabled')
+		).toBeTruthy();
+	});
+});

ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { FudisBreadcrumb } from '../../types/miscellaneous';
+
+@Component({
+	selector: 'fudis-breadcrumbs',
+	templateUrl: './breadcrumbs.component.html',
+	styleUrls: ['./breadcrumbs.component.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbsComponent {
+	@Input() breadcrumbsAriaLabel: string;
+
+	@Input() links: FudisBreadcrumb[] = [];
+}

ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.stories.ts

@@ -0,0 +1,38 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+
+export default {
+	title: 'Components/Breadcrumbs',
+	component: BreadcrumbsComponent,
+	decorators: [
+		moduleMetadata({
+			imports: [RouterTestingModule],
+		}),
+	],
+	argTypes: {
+		links: {
+			description: 'List of breadcrumb links.',
+			control: 'object',
+			table: {
+				type: {
+					summary: '{ label: string; url: string }[]',
+				},
+			},
+		},
+	},
+} as Meta;
+
+const Template: StoryFn<BreadcrumbsComponent> = (args: BreadcrumbsComponent) => ({
+	props: args,
+	template: '<fudis-breadcrumbs [links]="links"></fudis-breadcrumbs>',
+});
+
+export const Breadcrumbs = Template.bind({});
+Breadcrumbs.args = {
+	links: [
+		{ label: 'Components', url: '/Components' },
+		{ label: 'Breadcrumbs', url: '/components/breadcrumbs' },
+		{ label: 'Documentation', url: '/components/breadcrumbs/documentation' },
+	],
+};

ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.html

@@ -10,6 +10,8 @@
 	<ng-container *ngIf="!routerLinkUrl">
 		<a
 			#linkRef
+			[class.fudis-link__anchor--disabled]="disabled"
+			[attr.aria-disabled]="disabled"
 			class="fudis-link__anchor fudis-link__anchor__{{ size }} fudis-link__anchor__{{ color }}"
 			(focus)="_handleFocus($event)"
 			(blur)="_handleBlur($event)"
@@ -21,6 +23,8 @@
 		<a
 			#linkRef
 			class="fudis-link__anchor fudis-link__anchor__{{ size }} fudis-link__anchor__{{ color }}"
+			[class.fudis-link__anchor--disabled]="disabled"
+			[attr.aria-disabled]="disabled"
 			(focus)="_handleFocus($event)"
 			(blur)="_handleBlur($event)"
 			[routerLink]="routerLinkUrl"
@@ -35,6 +39,8 @@
 		#linkRef
 		(focus)="_handleFocus($event)"
 		(blur)="_handleBlur($event)"
+		[class.fudis-link__anchor--disabled]="disabled"
+		[attr.aria-disabled]="disabled"
 		attr.aria-label="{{ linkTitle ? linkTitle : href }}, {{ _externalLinkAriaLabel }}"
 		[href]="href ? href : null"
 		target="_blank"

ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.scss

@@ -43,5 +43,10 @@
 		&__lg {
 			@include typography.text-link-l-typography;
 		}
+
+		&--disabled {
+			text-decoration: none;
+			pointer-events: none;
+		}
 	}
 }

ngx-fudis/projects/ngx-fudis/src/lib/components/link/link.component.ts

@@ -60,6 +60,11 @@ export class LinkComponent implements AfterViewInit {
 	 */
 	@ViewChild('linkRef') linkRef: ElementRef;
 
+	/**
+	 * Determines if the link is disabled or not. When disabled, the link won't be interactive.
+	 */
+	@Input() disabled: boolean = false;
+
 	/**
 	 * Link URL using native href
 	 */

ngx-fudis/projects/ngx-fudis/src/lib/ngx-fudis.module.ts

@@ -96,6 +96,7 @@ import { AlertComponent } from './components/alert/alert/alert.component';
 import { AlertGroupComponent } from './components/alert/alert-group/alert-group.component';
 import { FudisAlertService } from './services/alert/alert.service';
 import { FudisBreakpointService } from './services/breakpoint/breakpoint.service';
+import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component';
 
 @NgModule({
 	/*
@@ -163,6 +164,7 @@ import { FudisBreakpointService } from './services/breakpoint/breakpoint.service
 		TextInputComponent,
 		TextAreaComponent,
 		TooltipDirective,
+		BreadcrumbsComponent,
 	],
 	/*
 	 * Include imports outside of Fudis components in 'imports' array below.
@@ -244,6 +246,7 @@ import { FudisBreakpointService } from './services/breakpoint/breakpoint.service
 		TextAreaComponent,
 		TextInputComponent,
 		TooltipDirective,
+		BreadcrumbsComponent,
 	],
 	providers: [
 		FudisAlertService,

ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts

@@ -120,3 +120,8 @@ export interface FudisTranslationLanguageBadgeAriaLabel {
 	SELECTED: string;
 	MISSING_TRANSLATION: string;
 }
+
+export interface FudisBreadcrumb {
+	label: string;
+	url: string;
+}

ngx-fudis/projects/ngx-fudis/src/public-api.ts

@@ -77,3 +77,5 @@ export { AlertComponent } from './lib/components/alert/alert/alert.component';
 export { AlertGroupComponent } from './lib/components/alert/alert-group/alert-group.component';
 export { FudisAlertService } from './lib/services/alert/alert.service';
 export { FudisBreakpointService } from './lib/services/breakpoint/breakpoint.service';
+
+export { BreadcrumbsComponent } from './lib/components/breadcrumbs/breadcrumbs.component';