Merge branch 'master' into OZG-5012-UsingNgrxForResourceState

alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts

+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-orga-unit-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    [ngClass]="twMerge(iconVariants({ size }), 'fill-text', class)"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M3 2.25a.75.75 0 0 0 0 1.5v16.5h-.75a.75.75 0 0 0 0 1.5H15v-18a.75.75 0 0 0 0-1.5H3ZM6.75 19.5v-2.25a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75ZM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 0 1.5h-.75A.75.75 0 0 1 6 6.75ZM6.75 9a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM6 12.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM10.5 6a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75Zm-.75 3.75A.75.75 0 0 1 10.5 9h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM10.5 12a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM16.5 6.75v15h5.25a.75.75 0 0 0 0-1.5H21v-12a.75.75 0 0 0 0-1.5h-4.5Zm1.5 4.5a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Zm.75 2.25a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75v-.008a.75.75 0 0 0-.75-.75h-.008ZM18 17.25a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+      clip-rule="evenodd"
+    />
+  </svg>`,
+})
+export class OrgaUnitIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { OrgaUnitIconComponent } from './orga-unit-icon.component';
+
+const meta: Meta<OrgaUnitIconComponent> = {
+  title: 'Icons/Orgaunit icon',
+  component: OrgaUnitIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<OrgaUnitIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'medium' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};

alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts

+import { getElementFromFixture, Mock, mock } from '@alfa-client/test-utils';
+import { importProvidersFrom } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router, RouterModule } from '@angular/router';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { NavItemComponent } from './nav-item.component';
+
+describe('NavItemComponent', () => {
+  let component: NavItemComponent;
+  let fixture: ComponentFixture<NavItemComponent>;
+
+  const router: Mock<Router> = mock(Router);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavItemComponent],
+      providers: [
+        {
+          provide: Router,
+          useValue: router,
+        },
+        importProvidersFrom(RouterModule.forRoot([])),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input', () => {
+    describe('caption', () => {
+      it('should set link text', () => {
+        component.caption = 'Test caption';
+        fixture.detectChanges();
+
+        const captionElement: HTMLParagraphElement = getElementFromFixture(
+          fixture,
+          getDataTestIdOf('link-caption'),
+        );
+
+        expect(captionElement.innerHTML).toBe('Test caption');
+      });
+    });
+
+    describe('to', () => {
+      it('should set href', () => {
+        component.to = '/';
+        fixture.detectChanges();
+
+        const linkElement: HTMLAnchorElement = getElementFromFixture(
+          fixture,
+          getDataTestIdOf('link-to-/'),
+        );
+
+        expect(linkElement).toHaveProperty('href');
+      });
+    });
+  });
+});

alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'ods-nav-item',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkActive],
+  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 border-transparent hover:border-primary',
+      'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
+    ]"
+    role="menuitem"
+    [attr.data-test-id]="'link-to-' + to"
+  >
+    <ng-content select="[icon]" />
+    <p class="text-left text-sm text-text" data-test-id="link-caption">{{ caption }}</p>
+  </a>`,
+})
+export class NavItemComponent {
+  @Input({ required: true }) caption!: string;
+  @Input() to: string;
+}

alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts

+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();
+  });
+});

alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts

+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ods-navbar',
+  standalone: true,
+  imports: [CommonModule],
+  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 {}

alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts

+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';
+
+const meta: Meta<NavbarComponent> = {
+  title: 'Navbar',
+  component: NavbarComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(RouterModule.forRoot([]))],
+    }),
+    moduleMetadata({
+      imports: [NavItemComponent, OfficeIconComponent],
+      providers: [
+        {
+          provide: APP_BASE_HREF,
+          useValue: '/',
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<NavbarComponent>;
+
+export const Default: Story = {
+  args: {},
+  render: () => ({
+    template: `<ods-navbar>
+      <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>
+      <hr />
+      <ods-nav-item caption="Third link" to="/third"><ods-office-icon icon /></ods-nav-item>
+    </ods-navbar>`,
+  }),
+};

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>)',
         },