From b3ef58e0ce52a0e9de3c3aebb77bd20708eca8d5 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Wed, 4 Sep 2024 11:03:56 +0200
Subject: [PATCH] OZG-6108 Add navigation components
---
alfa-client/libs/design-system/src/index.ts | 2 ++
.../nav-item/nav-item.component.spec.ts | 21 +++++++++++++
.../lib/navbar/nav-item/nav-item.component.ts | 23 ++++++++++++++
.../navbar/navbar/navbar.component.spec.ts | 21 +++++++++++++
.../src/lib/navbar/navbar/navbar.component.ts | 12 ++++++++
.../src/lib/navbar/navbar/navbar.stories.ts | 30 +++++++++++++++++++
6 files changed, 109 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 75cf45074d..96f436e7bc 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -28,6 +28,8 @@ export * from './lib/icons/spinner-icon/spinner-icon.component';
export * from './lib/icons/stamp-icon/stamp-icon.component';
export * from './lib/instant-search/instant-search/instant-search.component';
export * from './lib/instant-search/instant-search/instant-search.model';
+export * from './lib/navbar/nav-item/nav-item.component';
+export * from './lib/navbar/navbar/navbar.component';
export * from './lib/popup/popup-list-item/popup-list-item.component';
export * from './lib/popup/popup/popup.component';
export * from './lib/testbtn/testbtn.component';
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
new file mode 100644
index 0000000000..40e017cc07
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavItemComponent } from './nav-item.component';
+
+describe('NavItemComponent', () => {
+ let component: NavItemComponent;
+ let fixture: ComponentFixture<NavItemComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NavItemComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NavItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
new file mode 100644
index 0000000000..9982ffb79a
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-nav-item',
+ standalone: true,
+ imports: [CommonModule],
+ template: `<a
+ [routerLink]="to"
+ [ngClass]="[
+ 'flex min-h-8 items-center gap-2 rounded-2xl px-4 py-2',
+ 'border-2 border-transparent hover:border-primary',
+ 'outline-2 outline-offset-2 focus-visible:outline-focus',
+ ]"
+ >
+ <ng-content select="[icon]" />
+ <p class="text-left text-sm text-text">{{ caption }}</p>
+ </a>`,
+})
+export class NavItemComponent {
+ @Input({ required: true }) caption!: string;
+ @Input() to: string;
+}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts
new file mode 100644
index 0000000000..b507306575
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+ let component: NavbarComponent;
+ let fixture: ComponentFixture<NavbarComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NavbarComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
new file mode 100644
index 0000000000..73614a5b1d
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ods-navbar',
+ standalone: true,
+ imports: [CommonModule],
+ template: `<nav class="flex h-full w-72 flex-col gap-1 bg-ozggray p-4">
+ <ng-content />
+ </nav>`,
+})
+export class NavbarComponent {}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
new file mode 100644
index 0000000000..58e3326529
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
@@ -0,0 +1,30 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { OfficeIconComponent } from '../../icons/office-icon/office-icon.component';
+import { NavItemComponent } from '../nav-item/nav-item.component';
+import { NavbarComponent } from './navbar.component';
+
+const meta: Meta<NavbarComponent> = {
+ title: 'Navbar',
+ component: NavbarComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ imports: [NavItemComponent, OfficeIconComponent],
+ }),
+ ],
+};
+
+export default meta;
+type Story = StoryObj<NavbarComponent>;
+
+export const Default: Story = {
+ args: {},
+ render: () => ({
+ template: `<ods-navbar>
+ <ods-nav-item caption="First link"><ods-office-icon icon /></ods-nav-item>
+ <ods-nav-item caption="Second link"><ods-office-icon icon /></ods-nav-item>
+ <ods-nav-item caption="Third link"><ods-office-icon icon /></ods-nav-item>
+ </ods-navbar>`,
+ }),
+};
--
GitLab