From 0338cc3bdda5579b3b347c237e2c2363ea461605 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Mon, 29 Apr 2024 15:42:40 +0200
Subject: [PATCH] OZG-5590-OZG-5595 Use button-card as button with two rows of
text - Add story with icon to button
---
.../apps/demo/src/app/app.component.html | 24 ++++++++++-------
alfa-client/libs/design-system/src/index.ts | 2 +-
.../button-card/button-card.component.spec.ts | 0
.../lib/button-card/button-card.component.ts | 26 +++++++++++++++++++
.../src/lib/button/button.component.html | 10 -------
.../src/lib/button/button.component.ts | 18 +++++++++----
.../src/lib/button/button.stories.ts | 18 ++++++++++++-
.../button-card/button-card.component.html | 11 --------
.../form/button-card/button-card.component.ts | 14 ----------
...cheid-automatisch-erstellen.component.html | 10 +++----
10 files changed, 75 insertions(+), 58 deletions(-)
rename alfa-client/libs/design-system/src/lib/{form => }/button-card/button-card.component.spec.ts (100%)
create mode 100644 alfa-client/libs/design-system/src/lib/button-card/button-card.component.ts
delete mode 100644 alfa-client/libs/design-system/src/lib/button/button.component.html
delete mode 100644 alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.html
delete mode 100644 alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.ts
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index f7f8e26ea4..c6aceee870 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/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">
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 2178e0d97f..f7dfe57c3c 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1,5 +1,5 @@
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';
diff --git a/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.spec.ts b/alfa-client/libs/design-system/src/lib/button-card/button-card.component.spec.ts
similarity index 100%
rename from alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.spec.ts
rename to alfa-client/libs/design-system/src/lib/button-card/button-card.component.spec.ts
diff --git a/alfa-client/libs/design-system/src/lib/button-card/button-card.component.ts b/alfa-client/libs/design-system/src/lib/button-card/button-card.component.ts
new file mode 100644
index 0000000000..78e1f935fa
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/button-card/button-card.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-button-card',
+ standalone: true,
+ imports: [CommonModule],
+ styles: [':host {@apply inline-flex}'],
+ 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;
+}
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.html b/alfa-client/libs/design-system/src/lib/button/button.component.html
deleted file mode 100644
index 52f3f21253..0000000000
--- a/alfa-client/libs/design-system/src/lib/button/button.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<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>
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
index 477e76f9af..d9ade06f55 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.component.ts
+++ b/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 = '';
diff --git a/alfa-client/libs/design-system/src/lib/button/button.stories.ts b/alfa-client/libs/design-system/src/lib/button/button.stories.ts
index bd6947bf41..e888d33210 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.stories.ts
@@ -1,10 +1,17 @@
-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>`,
+ }),
+};
diff --git a/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.html b/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.html
deleted file mode 100644
index 623e97f8ca..0000000000
--- a/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<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>
diff --git a/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.ts b/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.ts
deleted file mode 100644
index 8a3e407839..0000000000
--- a/alfa-client/libs/design-system/src/lib/form/button-card/button-card.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-
-@Component({
- selector: 'ods-button-card',
- standalone: true,
- imports: [CommonModule],
- styles: [':host {@apply inline-flex}'],
- templateUrl: './button-card.component.html',
-})
-export class ButtonCardComponent {
- @Input() text: string = '';
- @Input() isLoading: boolean = false;
-}
diff --git a/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 b/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
index 30c6c4eef9..48123d83e5 100644
--- a/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
+++ b/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
@@ -1,17 +1,15 @@
-<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>
--
GitLab