OZG-5590-OZG-5595 Use button-card as button with two rows of text

- Add story with icon to button

alfa-client/apps/demo/src/app/app.component.html

@@ -83,22 +83,26 @@
       <hr />
       <div class="flex flex-col gap-4 bg-background-200 p-6">
         <div class="mt-4">
-          <ods-button-card class="w-72" [isLoading]="false">
+          <ods-button-card
+            class="w-72"
+            [isLoading]="false"
+            text="Bescheid-Dokument"
+            subText="automatisch erstellen"
+          >
             <ods-icon icon name="file-generate" class="size-10 fill-primary" />
             <ods-spinner-icon spinner class="size-10" />
-            <p text class="text-center">
-              Bescheid-Dokument<br />automatisch erstellen
-            </p></ods-button-card
-          >
+          </ods-button-card>
         </div>
         <div class="mt-4">
-          <ods-button-card class="w-72" [isLoading]="true">
+          <ods-button-card
+            class="w-72"
+            [isLoading]="true"
+            text="Bescheid-Dokument"
+            subText="automatisch erstellen"
+          >
             <ods-icon icon name="file-generate" class="size-10 fill-primary" />
             <ods-spinner-icon spinner class="size-10" />
-            <p text class="text-center">
-              Bescheid-Dokument<br />automatisch erstellen
-            </p></ods-button-card
-          >
+          </ods-button-card>
         </div>
 
         <div class="mt-4">

alfa-client/libs/design-system/src/index.ts

 export * from './lib/attachment/attachment.component';
-export * from './lib/form/button-card/button-card.component';
+export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
 export * from './lib/form/file-upload-button/file-upload-button.component';
 export * from './lib/form/radio-button-card/radio-button-card.component';

alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.ts → alfa-client/libs/design-system/src/lib/button-card/button-card.component.ts

@@ -6,9 +6,21 @@ import { Component, Input } from '@angular/core';
   standalone: true,
   imports: [CommonModule],
   styles: [':host {@apply inline-flex}'],
-  templateUrl: './button-card.component.html',
+  template: `<button
+    type="button"
+    class="flex flex-grow items-center justify-center gap-4 whitespace-nowrap rounded-md bg-background-50 py-3 pl-6 pr-6 text-text hover:bg-background-100 focus:outline-none focus:ring-2 focus:ring-primary"
+    [disabled]="isLoading"
+  >
+    <ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
+    <ng-content *ngIf="isLoading" select="[spinner]"></ng-content>
+    <div class="flex flex-grow flex-col gap-1">
+      <div class="leading-none">{{ text }}</div>
+      <div class="leading-none">{{ subText }}</div>
+    </div>
+  </button>`,
 })
 export class ButtonCardComponent {
   @Input() text: string = '';
+  @Input() subText: string = '';
   @Input() isLoading: boolean = false;
 }

alfa-client/libs/design-system/src/lib/button/button.component.html

-<button
-  type="button"
-  [ngClass]="buttonVariants({ size, type })"
-  [disabled]="isLoading"
-  (click)="clickEmitter.emit()"
->
-  <ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
-  <ods-spinner-icon *ngIf="isLoading" class="h-full"></ods-spinner-icon>
-  <div class="flex-grow" [innerHTML]="text | safe: 'html'"></div>
-</button>

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

@@ -3,7 +3,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { VariantProps, cva } from 'class-variance-authority';
 
 import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
-import { SafePipe } from '../utils/safe.pipe';
 
 const buttonVariants = cva(
   'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm min-w-32',
@@ -15,8 +14,8 @@ const buttonVariants = cva(
           'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
       },
       size: {
-        small: 'h-9 py-1 px-2',
-        medium: 'h-12 py-2 px-4',
+        small: 'h-9 py-2 px-4',
+        medium: 'h-12 py-3 px-6',
       },
     },
     defaultVariants: {
@@ -30,8 +29,17 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 @Component({
   selector: 'ods-button',
   standalone: true,
-  imports: [CommonModule, SpinnerIconComponent, SafePipe],
-  templateUrl: './button.component.html',
+  imports: [CommonModule, SpinnerIconComponent],
+  template: `<button
+    type="button"
+    [ngClass]="buttonVariants({ size, type })"
+    [disabled]="isLoading"
+    (click)="clickEmitter.emit()"
+  >
+    <ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
+    <ods-spinner-icon *ngIf="isLoading" class="h-full"></ods-spinner-icon>
+    <div class="flex-grow">{{ text }}</div>
+  </button>`,
 })
 export class ButtonComponent {
   @Input() text: string = '';

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

-import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 
+import { IconComponent } from '../icon/icon.component';
 import { ButtonComponent } from './button.component';
 
 const meta: Meta<ButtonComponent> = {
   title: 'Button',
   component: ButtonComponent,
+  subcomponents: { IconComponent },
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonComponent, IconComponent],
+    }),
+  ],
   excludeStories: /.*Data$/,
   tags: ['autodocs'],
 };
@@ -25,3 +32,12 @@ export const Default: Story = {
     },
   },
 };
+export const WithIcon: Story = {
+  args: { text: 'I have an icon', isLoading: false, type: 'secondary', size: 'medium' },
+  render: (args: ButtonComponent) => ({
+    props: args,
+    template: `<ods-button ${argsToTemplate(args)}>
+      <ods-icon icon name="file-pdf" class="h-full"></ods-icon>
+    </ods-button>`,
+  }),
+};

alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.html

-<button
-  type="button"
-  class="flex flex-grow items-center justify-center gap-4 whitespace-nowrap rounded-md bg-background-50 py-3 pl-6 pr-6 text-text hover:bg-background-100 focus:outline-none focus:ring-2 focus:ring-primary"
-  [disabled]="isLoading"
->
-  <ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
-  <ng-content *ngIf="isLoading" select="[spinner]"></ng-content>
-  <div class="flex-grow">
-    <ng-content select="[text]"></ng-content>
-  </div>
-</button>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-dokumente-hinzufuegen/vorgang-detail-bescheiden-bescheid-automatisch-erstellen/vorgang-detail-bescheiden-bescheid-automatisch-erstellen.component.html

-<ng-container *ngIf="bescheidDraftStateResource.resource as bescheidDraft">
+<ng-container>
   <div class="mt-4">
     <ods-button-card
-      *ngIf="bescheidDraft | hasLink: bescheidLinkRel.CREATE_DOCUMENT"
       class="w-72"
       [isLoading]="(createBescheidDocumentInProgress$ | async).loading"
       (click)="createBescheidDocument()"
       data-test-id="create-bescheid-document-button"
+      text="Bescheid-Dokument"
+      subText="automatisch erstellen"
     >
       <ods-bescheid-generate-icon icon />
       <ods-spinner-icon spinner class="size-10" />
-      <div text class="text-center">
-        Bescheid-Dokument<br />automatisch erstellen
-      </div></ods-button-card
-    >
+    </ods-button-card>
   </div>
 </ng-container>