Merge branch 'master' into OZG-4528-show-firmaname

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

+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { AttachmentComponent } from '../attachment/attachment.component';
+import { AttachmentContainerComponent } from './attachment-container.component';
+
+const meta: Meta<AttachmentContainerComponent> = {
+  title: 'Containers/Attachment container',
+  component: AttachmentContainerComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Container for multiple attachments',
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [AttachmentContainerComponent, AttachmentComponent],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<AttachmentContainerComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<ods-attachment-container>
+        <ods-attachment caption="Attachment" description="200 kB" fileType="pdf"></ods-attachment>
+        <ods-attachment caption="Second attachment" description="432 kB" fileType="doc"></ods-attachment>
+    </ods-attachment-container>`,
+  }),
+};

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

@@ -12,6 +12,8 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
   styles: [':host {@apply flex}'],
   template: `<button
     class="relative flex w-full items-start gap-3 border-b border-b-grayborder bg-background-100 px-3 py-2 hover:bg-background-200"
+    [disabled]="isLoading"
+    [attr.aria-disabled]="isLoading"
   >
     <div class="flex-shrink">
       <ods-file-icon

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

@@ -15,19 +15,37 @@ export const Default: Story = {
   name: 'File with pdf icon',
   args: {
     caption: 'Katzenanmeldung_1231231_eingang.pdf',
+    errorCaption: 'Error!',
+    loadingCaption: 'Loading...',
     description: '450 kB',
     fileType: 'pdf',
+    isLoading: false,
+    errorMessages: [],
   },
   argTypes: {
     caption: {
-      table: {
-        type: { summary: 'Name of the document or title' },
+      description: 'Name of the document',
+    },
+    errorCaption: {
+      description: 'Error text appears when eror messages array is not empty',
     },
+    loadingCaption: {
+      description: 'Loading text appears when isLoading flag is true',
     },
     description: {
+      description: 'Description can contain size of file or e.g. loading progress',
+    },
+    fileType: {
+      description: 'Type of file icon',
+    },
+    isLoading: {
+      description: 'Boolean flag for loading state',
       table: {
-        type: { summary: 'Description can contain size of file or e.g. loading progress' },
+        defaultValue: { summary: 'false' },
+      },
     },
+    errorMessages: {
+      description: 'The array containing strings with errors text',
     },
   },
 };
@@ -44,7 +62,7 @@ export const Doc: Story = {
 export const Loading: Story = {
   name: 'File with loading icon',
   args: {
-    caption: 'Katzenanmeldung_1231231_eingang.doc',
+    loadingCaption: 'Katzenanmeldung_1231231_eingang.doc',
     description: '573 kB',
     fileType: 'doc',
     isLoading: true,
@@ -54,7 +72,7 @@ export const Loading: Story = {
 export const Error: Story = {
   name: 'Error message in file',
   args: {
-    caption: 'Fehler beim Hochladen',
+    errorCaption: 'Fehler beim Hochladen',
     errorMessages: ['Erlaubte Dateiendungen: pdf, jpg, png, jpeg'],
   },
 };

alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-comtainer.stories.ts

+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { AttachmentContainerComponent } from '../attachment-container/attachment-container.component';
+import { AttachmentComponent } from '../attachment/attachment.component';
+import { BescheidStatusTextComponent } from '../bescheid-status-text/bescheid-status-text.component';
+import { BescheidContainerComponent } from './bescheid-container.component';
+
+const meta: Meta<BescheidContainerComponent> = {
+  title: 'Containers/Bescheid container',
+  component: BescheidContainerComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Container for bescheid information',
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        AttachmentComponent,
+        AttachmentContainerComponent,
+        BescheidContainerComponent,
+        BescheidStatusTextComponent,
+      ],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<BescheidContainerComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<ods-bescheid-container>
+        <ods-bescheid-status-text
+            bewilligt="true"
+            dateText="13.11.2024"
+            [hasBescheidDraft]="false"
+        ></ods-bescheid-status-text>
+        <ods-attachment-container>
+            <ods-attachment caption="Attachment" description="200 kB" fileType="pdf"></ods-attachment>
+            <ods-attachment caption="Second attachment" description="432 kB" fileType="doc"></ods-attachment>
+        </ods-attachment-container>
+    </ods-bescheid-container>`,
+  }),
+};

alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.stories.ts

+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { BescheidStatusTextComponent } from './bescheid-status-text.component';
+
+const meta: Meta<BescheidStatusTextComponent> = {
+  title: 'Bescheid status text',
+  component: BescheidStatusTextComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [BescheidStatusTextComponent],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<BescheidStatusTextComponent>;
+
+export const Default: Story = {
+  args: { dateText: '31.12.1999', bewilligt: true, hasBescheidDraft: false },
+  argTypes: {
+    dateText: { description: 'Date of decision' },
+    bewilligt: { table: { defaultValue: { summary: 'false' } } },
+    hasBescheidDraft: { table: { defaultValue: { summary: 'false' } } },
+  },
+};

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

+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { BescheidGenerateIconComponent } from '../icons/bescheid-generate-icon/bescheid-generate-icon.component';
+import { ButtonCardComponent } from './button-card.component';
+
+const meta: Meta<ButtonCardComponent> = {
+  title: 'Button card',
+  component: ButtonCardComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A button with two lines of text',
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonCardComponent, BescheidGenerateIconComponent],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ButtonCardComponent>;
+
+export const Default: Story = {
+  args: {
+    text: 'Bescheiddokument',
+    subText: 'automatisch erstellen',
+    isLoading: false,
+  },
+  argTypes: {
+    text: { description: 'First line of text' },
+    subText: { description: 'Second line of text' },
+  },
+  render: (args: ButtonCardComponent) => ({
+    props: args,
+    template: `<ods-button-card ${argsToTemplate(args)} class="w-72">
+        <ods-bescheid-generate-icon icon fileType="auto"></ods-bescheid-generate-icon>
+      </ods-button-card>`,
+  }),
+};

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

@@ -6,7 +6,6 @@ import { ButtonComponent } from './button.component';
 const meta: Meta<ButtonComponent> = {
   title: 'Button',
   component: ButtonComponent,
-  subcomponents: { FileIconComponent },
   decorators: [
     moduleMetadata({
       imports: [ButtonComponent, FileIconComponent],
@@ -20,21 +19,36 @@ export default meta;
 type Story = StoryObj<ButtonComponent>;
 
 export const Default: Story = {
-  args: { text: 'Hello world!', isLoading: false, variant: 'primary' },
+  args: {
+    text: 'Hello world!',
+    isLoading: false,
+    variant: 'primary',
+  },
   argTypes: {
     variant: {
       options: ['primary', 'outline'],
       control: { type: 'radio' },
+      table: { defaultValue: { summary: 'primary' } },
     },
   },
 };
 
 export const WithIcon: Story = {
-  args: { text: 'I have an icon', isLoading: false, variant: 'outline' },
-  render: (args: ButtonComponent) => ({
+  args: {
+    text: 'I have an icon',
+    variant: 'outline',
+  },
+  render: (args) => ({
     props: args,
     template: `<ods-button ${argsToTemplate(args)}>
-      <ods-file-icon icon fileType='pdf' size='extra-large'></ods-file-icon>
+      <ods-file-icon icon fileType='pdf' size='small'></ods-file-icon>
     </ods-button>`,
   }),
 };
+
+export const IsLoading: Story = {
+  args: {
+    text: 'Loading...',
+    isLoading: true,
+  },
+};

alfa-client/libs/design-system/src/lib/form/error-message/error-message.stories.ts

+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { ErrorMessageComponent } from './error-message.component';
+
+const meta: Meta<ErrorMessageComponent> = {
+  title: 'Error message',
+  component: ErrorMessageComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ErrorMessageComponent],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ErrorMessageComponent>;
+
+export const Default: Story = {
+  args: {
+    error: 'Text of error',
+  },
+};

alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.component.ts

@@ -11,7 +11,6 @@ import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 })
 export class FileUploadButtonComponent {
   @Input({ required: true }) id!: string;
-  @Input() text: string = '';
   @Input() isLoading: boolean = false;
   @Input() accept: string = '*/*';
 

alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts

@@ -2,15 +2,20 @@ import { CommonModule } from '@angular/common';
 import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 
 import { AttachmentIconComponent } from '../../icons/attachment-icon/attachment-icon.component';
+import { SpinnerIconComponent } from '../../icons/spinner-icon/spinner-icon.component';
 import { FileUploadButtonComponent } from './file-upload-button.component';
 
 const meta: Meta<FileUploadButtonComponent> = {
   title: 'File upload button',
   component: FileUploadButtonComponent,
-  subcomponents: { AttachmentIconComponent },
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, FileUploadButtonComponent, AttachmentIconComponent],
+      imports: [
+        CommonModule,
+        FileUploadButtonComponent,
+        AttachmentIconComponent,
+        SpinnerIconComponent,
+      ],
     }),
   ],
   excludeStories: /.*Data$/,
@@ -22,13 +27,15 @@ type Story = StoryObj<FileUploadButtonComponent>;
 
 export const Upload: Story = {
   args: {
-    text: 'Anhang hochladen',
+    id: '1',
     isLoading: false,
   },
   render: (args: FileUploadButtonComponent) => ({
     props: args,
     template: `<ods-file-upload-button ${argsToTemplate(args)}>
-      <ods-attachment-icon></ods-attachment-icon>
+      <ods-attachment-icon icon></ods-attachment-icon>
+      <ods-spinner-icon spinner size="medium"></ods-spinner-icon>
+      <p text>Anhang hochladen</p>
     </ods-file-upload-button>`,
   }),
 };

alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts

+import { CommonModule } from '@angular/common';
+import { FormGroupDirective } from '@angular/forms';
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { CloseIconComponent } from '../../icons/close-icon/close-icon.component';
+import { SaveIconComponent } from '../../icons/save-icon/save-icon.component';
+import { SendIconComponent } from '../../icons/send-icon/send-icon.component';
+import { StampIconComponent } from '../../icons/stamp-icon/stamp-icon.component';
+import { RadioButtonCardComponent } from './radio-button-card.component';
+
+const meta: Meta<RadioButtonCardComponent> = {
+  title: 'Radio button card',
+  component: RadioButtonCardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        RadioButtonCardComponent,
+        StampIconComponent,
+        CloseIconComponent,
+        SaveIconComponent,
+        SendIconComponent,
+      ],
+      providers: [FormGroupDirective],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<RadioButtonCardComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'bewilligt',
+    name: 'exampleName',
+    value: 'bewilligt',
+    variant: 'bescheid_bewilligt',
+    fullWidthText: false,
+  },
+  render: (args: RadioButtonCardComponent) => ({
+    props: args,
+    template: `<div class="my-10 flex gap-8">
+    <ods-radio-button-card
+      ${argsToTemplate(args)}
+    >
+      <ods-stamp-icon />
+    </ods-radio-button-card>
+    <ods-radio-button-card
+      label="abgelehnt"
+      name="exampleName"
+      value="abgelehnt"
+      variant="bescheid_abgelehnt"
+    >
+      <ods-close-icon class="fill-abgelehnt" />
+    </ods-radio-button-card>
+  </div>`,
+  }),
+};
+
+export const Message: Story = {
+  args: {
+    label: 'bewilligt',
+    name: 'exampleName',
+    value: 'bewilligt',
+    variant: 'bescheid_bewilligt',
+    fullWidthText: false,
+  },
+  render: (args: RadioButtonCardComponent) => ({
+    props: args,
+    template: `<div
+    class="flex w-full max-w-72 flex-col gap-4"
+  >
+      <ods-radio-button-card
+        label="Als neue Nachricht an den Antragsteller senden"
+        value="NACHRICHT"
+        name="nachrichtOrManual"
+        variant="bescheid_save"
+        [fullWidthText]="true"
+        ><ods-send-icon></ods-send-icon
+      ></ods-radio-button-card>
+      <ods-radio-button-card
+        label="Nur speichern"
+        value="MANUAL"
+        name="nachrichtOrManual"
+        variant="bescheid_save"
+        [fullWidthText]="true"
+        ><ods-save-icon></ods-save-icon
+      ></ods-radio-button-card>
+  </div>`,
+  }),
+};

alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts

@@ -48,7 +48,6 @@ type TextInputVariants = VariantProps<typeof textInputVariants>;
 export class TextInputComponent {
   @Input({ required: true }) label: string;
   @Input() placeholder: string = '';
-  @Input() error: string;
   @Input() autocomplete: string = 'off';
   @Input() variant: TextInputVariants['variant'];
   @Input() fieldControl: FormControl;

alfa-client/libs/design-system/src/lib/form/text-input/text-input.stories.ts

+import { ReactiveFormsModule } from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { TextInputComponent } from './text-input.component';
+
+const meta: Meta<TextInputComponent> = {
+  title: 'Text input',
+  component: TextInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TextInputComponent, ReactiveFormsModule],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<TextInputComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'This is text input',
+    placeholder: 'Input your text',
+    variant: 'default',
+    required: false,
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'error'],
+      table: { defaultValue: { summary: 'default' } },
+    },
+    required: { table: { defaultValue: { summary: 'false' } } },
+  },
+};

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

+import { ReactiveFormsModule } from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { TextareaComponent } from './textarea.component';
+
+const meta: Meta<TextareaComponent> = {
+  title: 'Text area',
+  component: TextareaComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TextareaComponent, ReactiveFormsModule],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<TextareaComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'This is text area',
+    placeholder: 'Input your text',
+    variant: 'default',
+    required: false,
+    rows: 3,
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'error'],
+      table: { defaultValue: { summary: 'default' } },
+    },
+    rows: { table: { defaultValue: { summary: '3' } } },
+    required: { table: { defaultValue: { summary: 'false' } } },
+  },
+};

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

@@ -12,4 +12,16 @@ const meta: Meta<AttachmentIconComponent> = {
 export default meta;
 type Story = StoryObj<AttachmentIconComponent>;
 
-export const Default: Story = {};
\ No newline at end of file
+export const Default: Story = {
+  args: { size: 'large' },
+  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/icons/bescheid-generate-icon/bescheid-generate-icon.stories.ts

@@ -12,4 +12,16 @@ const meta: Meta<BescheidGenerateIconComponent> = {
 export default meta;
 type Story = StoryObj<BescheidGenerateIconComponent>;
 
-export const Default: Story = {};
\ No newline at end of file
+export const Default: Story = {
+  args: { size: 'extra-large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'extra-large' },
+      },
+    },
+  },
+};

alfa-client/libs/design-system/src/lib/icons/bescheid-upload-icon/bescheid-upload-icon.stories.ts

@@ -12,4 +12,16 @@ const meta: Meta<BescheidUploadIconComponent> = {
 export default meta;
 type Story = StoryObj<BescheidUploadIconComponent>;
 
-export const Default: Story = {};
\ No newline at end of file
+export const Default: Story = {
+  args: { size: 'extra-large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'extra-large' },
+      },
+    },
+  },
+};

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

@@ -12,4 +12,16 @@ const meta: Meta<CloseIconComponent> = {
 export default meta;
 type Story = StoryObj<CloseIconComponent>;
 
-export const Default: Story = {};
\ No newline at end of file
+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: 'small' },
+      },
+    },
+  },
+};

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

@@ -13,7 +13,6 @@ const fileiconVariants = cva('', {
       pdf: 'fill-pdf',
       xml: 'fill-ozggray-300',
       exclamation: 'fill-error',
-      loading: 'fill-warning',
     },
     size: {
       small: 'w-4 h-5',

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

@@ -13,5 +13,23 @@ export default meta;
 type Story = StoryObj<FileIconComponent>;
 
 export const Default: Story = {
-  args: { fileType: 'pdf', size: 'large' },
+  args: { size: 'large', fileType: 'pdf' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'large'],
+      description: 'Size of icon',
+      table: {
+        defaultValue: { summary: 'large' },
+      },
+    },
+    fileType: {
+      control: 'select',
+      options: ['pdf', 'xml', 'doc', 'image', 'json', 'exclamation'],
+      description: 'Type of file icon',
+      table: {
+        defaultValue: { summary: 'xml' },
+      },
+    },
+  },
 };