diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 693f99b0c88cd5577c6d4b42c9cab445ab2554a8..4ecd2941d74717e3ef1791e8a0c1e4e039da9b66 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 error="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 error="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 65263c1f0a8ff35aa02f6bc28dfe2d6620362897..84341ceacd7a96a6037b2b2ce647c34085c0e4fa 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
@@ -2,7 +2,7 @@ import { StateResource, createEmptyStateResource } from '@alfa-client/tech-share
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Resource } from '@ngxp/rest';
-import { ButtonComponent, buttonVariants } from '@ods/system';
+import { ButtonComponent, ErrorMessageComponent, buttonVariants } from '@ods/system';
import { VariantProps } from 'class-variance-authority';
import { isNil } from 'lodash-es';
@@ -11,16 +11,23 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
@Component({
selector: 'ods-button-with-spinner',
standalone: true,
- imports: [CommonModule, ButtonComponent],
- template: `<ods-button
- [text]="text"
- [variant]="variant"
- [size]="size"
- [dataTestId]="dataTestId"
- [isLoading]="isLoading"
- (click)="clickEmitter.emit()"
- >
- </ods-button>`,
+ imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
+ styles: [':host {@apply flex flex-col}'],
+ template: `<ods-error-message
+ *ngIf="stateResource.error"
+ text="Ein Fehler ist aufgetreten."
+ subText="Versuchen Sie es nocheinmal."
+ >
+ </ods-error-message>
+ <ods-button
+ [text]="text"
+ [variant]="variant"
+ [size]="size"
+ [dataTestId]="dataTestId"
+ [isLoading]="isLoading"
+ (click)="clickEmitter.emit()"
+ >
+ </ods-button>`,
})
export class ButtonWithSpinnerComponent implements OnInit {
@Input() text: string = '';
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 debe6e6618368635a879ad3723eb4cc245f92909..703f757c2b17228e8cdfb7d158a7bb7e6a058a93 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 [error]="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/index.ts b/alfa-client/libs/design-system/src/index.ts
index a9985e3b05d257cb3b535c1b79ca6cbdfa1a252a..c4553cf30882baa5265e0189b4ac320dafee551b 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -13,6 +13,7 @@ export * from './lib/icons/attachment-icon/attachment-icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
export * from './lib/icons/close-icon/close-icon.component';
+export * from './lib/icons/exclamate-icon/exclamate-icon.component';
export * from './lib/icons/file-icon/file-icon.component';
export * from './lib/icons/save-icon/save-icon.component';
export * from './lib/icons/send-icon/send-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.spec.ts
index 841f14c8b7ce7b54a913e221b416ba95fc53f422..2ca00ff49bcf029d32498a692af9368217ac19f2 100644
--- a/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/form/error-message/error-message.component.spec.ts
@@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
import { ErrorMessageComponent } from './error-message.component';
describe('ErrorMessageComponent', () => {
@@ -7,7 +8,7 @@ describe('ErrorMessageComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [ErrorMessageComponent],
+ imports: [ErrorMessageComponent, ExclamateIconComponent],
}).compileComponents();
fixture = TestBed.createComponent(ErrorMessageComponent);
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 14676069eea4d270c58fc711ba9e1720dafef696..8fc3456345c220e957ee99aaf370dd2cb21b172f 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,12 +1,20 @@
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
+import { ExclamateIconComponent } from '../../icons/exclamate-icon/exclamate-icon.component';
@Component({
selector: 'ods-error-message',
standalone: true,
- imports: [CommonModule],
- template: `<p *ngIf="error" error class="text-error mt-2 text-sm">{{ error }}</p>`,
+ 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>
+ <div class="flex-grow break-all">
+ {{ text }}
+ <br *ngIf="subText" aria-hidden="true" />
+ {{ subText }}
+ </div> `,
})
export class ErrorMessageComponent {
- @Input() error: string;
+ @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 7a3537402744cf3da587a4ac3bfeecf4b8382dd6..b52ddc18e842cdac34d2fea37397c8a63f0f75be 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> = {
@@ -19,6 +18,16 @@ type Story = StoryObj<ErrorMessageComponent>;
export const Default: Story = {
args: {
- error: 'Text of error',
+ 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>`,
+ }),
};
diff --git a/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26417da63df4fe5d7d59b0ffcbf3e5a712a17410
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ExclamateIconComponent } from './exclamate-icon.component';
+
+describe('ExclamateIconComponent', () => {
+ let component: ExclamateIconComponent;
+ let fixture: ComponentFixture<ExclamateIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ExclamateIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ExclamateIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dec6b285ff6324df13d45bd1cfca115843b524af
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.component.ts
@@ -0,0 +1,29 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+import { IconVariants, iconVariants } from '../IconClasses';
+
+@Component({
+ selector: 'ods-exclamate-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ xmlns="http://www.w3.org/2000/svg"
+ [ngClass]="[twMerge(iconVariants({ size }), 'fill-error', class)]"
+ aria-hidden="true"
+ viewBox="0 0 20 20"
+ fill="inherit"
+ >
+ <path
+ d="M10.3069 14.7308C10.5416 14.7308 10.7383 14.6533 10.8971 14.4985C11.0559 14.3437 11.1353 14.1518 11.1353 13.923C11.1353 13.6942 11.0559 13.5023 10.8971 13.3475C10.7383 13.1928 10.5416 13.1155 10.3069 13.1155C10.0722 13.1155 9.87548 13.1928 9.71668 13.3475C9.55789 13.5023 9.47849 13.6942 9.47849 13.923C9.47849 14.1518 9.55789 14.3437 9.71668 14.4985C9.87548 14.6533 10.0722 14.7308 10.3069 14.7308ZM10.3072 11.077C10.5253 11.077 10.7079 11.0051 10.8551 10.8613C11.0024 10.7176 11.0761 10.5395 11.0761 10.327V5.827C11.0761 5.6145 11.0023 5.43633 10.8548 5.2925C10.7073 5.14883 10.5246 5.077 10.3066 5.077C10.0885 5.077 9.9059 5.14883 9.75873 5.2925C9.61139 5.43633 9.53772 5.6145 9.53772 5.827V10.327C9.53772 10.5395 9.61148 10.7176 9.75899 10.8613C9.9065 11.0051 10.0892 11.077 10.3072 11.077ZM10.3087 19.5C8.96109 19.5 7.69442 19.2507 6.50868 18.752C5.32295 18.2533 4.29156 17.5766 3.41452 16.7218C2.53748 15.8669 1.84308 14.8617 1.33132 13.706C0.81973 12.5503 0.563934 11.3156 0.563934 10.0017C0.563934 8.68775 0.819644 7.45267 1.33106 6.2965C1.84248 5.14033 2.53654 4.13467 3.41324 3.2795C4.28994 2.42433 5.3209 1.74725 6.50612 1.24825C7.69134 0.749417 8.95767 0.5 10.3051 0.5C11.6527 0.5 12.9194 0.749333 14.1051 1.248C15.2909 1.74667 16.3222 2.42342 17.1993 3.27825C18.0763 4.13308 18.7707 5.13833 19.2825 6.294C19.7941 7.44967 20.0499 8.68442 20.0499 9.99825C20.0499 11.3123 19.7942 12.5473 19.2827 13.7035C18.7713 14.8597 18.0773 15.8653 17.2006 16.7205C16.3239 17.5757 15.2929 18.2528 14.1077 18.7518C12.9225 19.2506 11.6561 19.5 10.3087 19.5Z"
+ />
+ </svg>`,
+})
+export class ExclamateIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ iconVariants = iconVariants;
+ twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..502a70571ec5c26bcfbc9f4121a1b0dfbd761cfd
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/exclamate-icon/exclamate-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { ExclamateIconComponent } from './exclamate-icon.component';
+
+const meta: Meta<ExclamateIconComponent> = {
+ title: 'Icons/Exclamate icon',
+ component: ExclamateIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ExclamateIconComponent>;
+
+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' },
+ },
+ },
+ },
+};
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
index 69241c6fd1be29d963aa274d18b2cbaa855d0543..756a87e840c127ae44ec8199bb63bc53c0332063 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
@@ -56,6 +56,7 @@ import {
ButtonCardComponent,
ButtonComponent,
CloseIconComponent,
+ ErrorMessageComponent,
RadioButtonCardComponent,
SaveIconComponent,
SendIconComponent,
@@ -159,6 +160,7 @@ const routes: Routes = [
TextEditorComponent,
TextareaEditorComponent,
BescheidStatusTextComponent,
+ ErrorMessageComponent,
],
declarations: [
VorgangDetailPageComponent,