From 627c58561e819a8a44452eca0a373c21eeabe553 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 5 Sep 2024 13:53:45 +0200
Subject: [PATCH] OZG-6108 Fix story and add styling
---
.../lib/navbar/nav-item/nav-item.component.ts | 9 ++++++---
.../src/lib/navbar/navbar/navbar.component.ts | 6 ++++--
.../src/lib/navbar/navbar/navbar.stories.ts | 20 +++++++++++++++----
.../lib/tailwind-preset/tailwind.config.js | 4 ++++
4 files changed, 30 insertions(+), 9 deletions(-)
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
index 9982ffb79a..d0500aeedb 100644
--- 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
@@ -1,17 +1,20 @@
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
@Component({
selector: 'ods-nav-item',
standalone: true,
- imports: [CommonModule],
+ imports: [CommonModule, RouterModule],
template: `<a
[routerLink]="to"
+ routerLinkActive="bg-selected-light border-selected"
[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',
+ 'border border-transparent hover:border-primary',
+ 'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
]"
+ role="menuitem"
>
<ng-content select="[icon]" />
<p class="text-left text-sm text-text">{{ caption }}</p>
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
index 73614a5b1d..434dfd07e0 100644
--- 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
@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
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 />
+ template: `<nav class="h-full w-72 bg-ozggray p-4">
+ <div class="flex flex-col gap-2" role="menubar">
+ <ng-content />
+ </div>
</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
index 58e3326529..75c8278d68 100644
--- 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
@@ -1,4 +1,7 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { APP_BASE_HREF } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { applicationConfig, 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';
@@ -9,8 +12,17 @@ const meta: Meta<NavbarComponent> = {
excludeStories: /.*Data$/,
tags: ['autodocs'],
decorators: [
+ applicationConfig({
+ providers: [importProvidersFrom(RouterModule.forRoot([]))],
+ }),
moduleMetadata({
imports: [NavItemComponent, OfficeIconComponent],
+ providers: [
+ {
+ provide: APP_BASE_HREF,
+ useValue: '/',
+ },
+ ],
}),
],
};
@@ -22,9 +34,9 @@ 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-nav-item caption="First link" to="/"><ods-office-icon icon /></ods-nav-item>
+ <ods-nav-item caption="Second link" to="/second"><ods-office-icon icon /></ods-nav-item>
+ <ods-nav-item caption="Third link" to="/third"><ods-office-icon icon /></ods-nav-item>
</ods-navbar>`,
}),
};
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index f998ef8197..cb8ed07e1d 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -94,6 +94,10 @@ module.exports = {
700: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
DEFAULT: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
},
+ selected: {
+ light: 'hsl(212, 58%, 94%)',
+ DEFAULT: 'hsl(216, 85%, 34%)',
+ },
pdf: {
DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
},
--
GitLab