From 1f4cd343b9cade2216a23d54ca1af4639d62d372 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Thu, 6 Mar 2025 15:57:19 +0100
Subject: [PATCH] OZG-725 Add forwarding item component Sub-Task: OZG-7895
---
alfa-client/libs/design-system/src/index.ts | 1 +
.../forwarding-item.component.spec.ts | 44 +++++++++
.../forwarding-item.component.ts | 57 ++++++++++++
.../forwarding-item.stories.ts | 92 +++++++++++++++++++
4 files changed, 194 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index eda6684097..d05d44db8c 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -41,6 +41,7 @@ export * from './lib/form/file-upload-button/file-upload-button.component';
export * from './lib/form/radio-button-card/radio-button-card.component';
export * from './lib/form/text-input/text-input.component';
export * from './lib/form/textarea/textarea.component';
+export * from './lib/forwarding-item/forwarding-item.component';
export * from './lib/icons/accessibility-icon/accessibility-icon.component';
export * from './lib/icons/account-circle-icon/account-circle-icon.component';
export * from './lib/icons/admin-logo-icon/admin-logo-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.spec.ts
new file mode 100644
index 0000000000..5700f02837
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ForwardingItemComponent } from './forwarding-item.component';
+
+describe('ForwardingItemComponent', () => {
+ let component: ForwardingItemComponent;
+ let fixture: ComponentFixture<ForwardingItemComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ForwardingItemComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ForwardingItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts
new file mode 100644
index 0000000000..f358004819
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.component.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ForwardVorgangIconComponent } from '../icons/forward-vorgang-icon/forward-vorgang-icon.component';
+
+export enum ForwardingDirection {
+ FROM = 'Weitergeleitet von',
+ TO = 'An',
+}
+
+@Component({
+ selector: 'ods-forwarding-item',
+ standalone: true,
+ imports: [CommonModule, ForwardVorgangIconComponent],
+ template: `<div
+ class="flex flex-col items-start justify-between gap-2 rounded-lg border border-grayborder p-3 md:flex-row md:items-center md:gap-0"
+ >
+ <div class="flex gap-3">
+ <ods-forward-vorgang-icon class="fill-text" />
+ <p class="text-gray-500">{{ direction }}:</p>
+ <div>
+ <p class="font-medium">{{ label }}</p>
+ <p>{{ address }}</p>
+ </div>
+ </div>
+ <div class="self-end text-end empty:hidden">
+ <ng-content />
+ </div>
+ </div>`,
+})
+export class ForwardingItemComponent {
+ @Input({ required: true }) label!: string;
+ @Input({ required: true }) address!: string;
+ @Input() direction: ForwardingDirection = ForwardingDirection.TO;
+}
diff --git a/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts
new file mode 100644
index 0000000000..53d2116e9f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/forwarding-item/forwarding-item.stories.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { ButtonComponent } from '../button/button.component';
+import { ForwardingDirection, ForwardingItemComponent } from './forwarding-item.component';
+
+const label: string = 'Bund für Umwelt und Naturschutz Kreisgruppe Kiel';
+const address: string = 'Kaiserstraße 25, 12443 Kiel';
+
+const meta: Meta<ForwardingItemComponent> = {
+ title: 'Forwarding item',
+ component: ForwardingItemComponent,
+ parameters: {
+ docs: {
+ description: {
+ component: 'Information of forwarded item',
+ },
+ },
+ },
+ decorators: [
+ moduleMetadata({
+ imports: [ForwardingItemComponent, ButtonComponent],
+ }),
+ ],
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ForwardingItemComponent>;
+
+export const Default: Story = {
+ args: {
+ label: label,
+ address: address,
+ direction: ForwardingDirection.TO,
+ },
+ argTypes: {
+ direction: { control: 'select', options: [ForwardingDirection.TO, ForwardingDirection.FROM] },
+ },
+};
+
+export const WithButton: Story = {
+ args: {
+ label: label,
+ address: address,
+ },
+
+ render: (args: ForwardingItemComponent) => ({
+ props: args,
+ template: `<ods-forwarding-item ${argsToTemplate(args)}>
+ <ods-button variant="outline" text="Stelle ändern" />
+ </ods-forwarding-item>`,
+ }),
+};
+
+export const WithCreationInfo: Story = {
+ args: {
+ label: label,
+ address: address,
+ direction: ForwardingDirection.FROM,
+ },
+ render: (args: ForwardingItemComponent) => ({
+ props: args,
+ template: `<ods-forwarding-item ${argsToTemplate(args)}>
+ <p>20. Dez. 09:35</p>
+ <p class="text-sm">Karin Wanowski-Müller</p>
+ </ods-forwarding-item>`,
+ }),
+};
--
GitLab