From 594a5c6328f603dac01f917b503bf27d6e00285a Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 13 Jun 2024 14:13:11 +0200
Subject: [PATCH] OZG-5842 OZG-5851 Use dedicated input properties for first
and second text line
---
.../apps/demo/src/app/app.component.html | 4 ++--
.../button-with-spinner.component.ts | 8 +++++---
.../validation-error.component.html | 2 +-
.../error-message/error-message.component.ts | 14 +++++++++++---
.../error-message/error-message.stories.ts | 19 ++++++++++++++++---
5 files changed, 35 insertions(+), 12 deletions(-)
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 57eba743e6..4ecd2941d7 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -63,7 +63,7 @@
placeholder="Betreff hier eingeben"
variant="error"
>
- <ods-error-message>Betreff fehlt</ods-error-message
+ <ods-error-message text="Betreff fehlt"></ods-error-message
></ods-text-input>
</div>
<div class="my-4">
@@ -75,7 +75,7 @@
placeholder="Nachrichtentext hier eingeben"
variant="error"
>
- <ods-error-message>Nachrichtentext fehlt</ods-error-message>
+ <ods-error-message text="Nachrichtentext fehlt"></ods-error-message>
</ods-textarea>
</div>
diff --git a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts
index 215a5dbaa8..84341ceacd 100644
--- a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts
+++ b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts
@@ -13,9 +13,11 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
standalone: true,
imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
styles: [':host {@apply flex flex-col}'],
- template: `<ods-error-message *ngIf="stateResource.error">
- Ein Fehler ist aufgetreten. <br />
- Versuchen Sie es nocheinmal.
+ template: `<ods-error-message
+ *ngIf="stateResource.error"
+ text="Ein Fehler ist aufgetreten."
+ subText="Versuchen Sie es nocheinmal."
+ >
</ods-error-message>
<ods-button
[text]="text"
diff --git a/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html b/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html
index 4550ef590e..703f757c2b 100644
--- a/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html
+++ b/alfa-client/libs/design-component/src/lib/form/validation-error/validation-error.component.html
@@ -1,3 +1,3 @@
<ng-container *ngFor="let issue of issues"
- ><ods-error-message>{{ message(issue) }}</ods-error-message
+ ><ods-error-message [text]="message(issue)"></ods-error-message
></ng-container>
diff --git a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts
index bec8bcec6b..8fc3456345 100644
--- a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.ts
@@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
@Component({
@@ -7,6 +7,14 @@ import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-ico
standalone: true,
imports: [CommonModule, ExclamateIconComponent],
styles: [':host {@apply flex text-error my-2 text-sm items-center font-medium}'],
- template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon><ng-content></ng-content>`,
+ template: `<ods-exclamate-icon class="mr-1"></ods-exclamate-icon>
+ <div class="flex-grow break-all">
+ {{ text }}
+ <br *ngIf="subText" aria-hidden="true" />
+ {{ subText }}
+ </div> `,
})
-export class ErrorMessageComponent {}
+export class ErrorMessageComponent {
+ @Input({ required: true }) text!: string;
+ @Input() subText: string = '';
+}
diff --git a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts
index dc3d2aa289..b52ddc18e8 100644
--- a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts
@@ -1,5 +1,4 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { ErrorMessageComponent } from './error-message.component';
const meta: Meta<ErrorMessageComponent> = {
@@ -17,4 +16,18 @@ const meta: Meta<ErrorMessageComponent> = {
export default meta;
type Story = StoryObj<ErrorMessageComponent>;
-export const Default: Story = {};
+export const Default: Story = {
+ args: {
+ text: 'Ein Fehler ist aufgetreten.',
+ subText: 'Versuchen Sie es nocheinmal.',
+ },
+ argTypes: {
+ text: { description: 'First line of text' },
+ subText: { description: 'Second line of text' },
+ },
+ render: (args: ErrorMessageComponent) => ({
+ props: args,
+ template: `<ods-error-message ${argsToTemplate(args)} class="w-72">
+ </ods-error-message>`,
+ }),
+};
--
GitLab