From 9ed2911ee0516b3bd3bacbebf69ab1ad82f98513 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 2 May 2024 11:41:03 +0200
Subject: [PATCH] OZG-5592 design-system add input, textarea
---
.../apps/demo/src/app/app.component.html | 22 +++++++++++++
.../apps/demo/src/app/app.component.ts | 4 +++
alfa-client/libs/design-system/src/index.ts | 2 ++
.../text-input/text-input.component.spec.ts | 21 +++++++++++++
.../form/text-input/text-input.component.ts | 29 +++++++++++++++++
.../form/textarea/textarea.component.spec.ts | 21 +++++++++++++
.../lib/form/textarea/textarea.component.ts | 31 +++++++++++++++++++
alfa-client/tsconfig.base.json | 4 +--
8 files changed, 132 insertions(+), 2 deletions(-)
create mode 100644 alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/form/textarea/textarea.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 91e8c3f79a..458cfa1ddb 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -15,6 +15,28 @@
</div>
<main class="flex-auto bg-background-50 p-6">
<form id="antrag_bescheiden_form" [formGroup]="exampleForm">
+ <div class="mb-6">
+ <label
+ for="default-input"
+ class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+ >Default input</label
+ >
+ <input
+ type="text"
+ id="default-input"
+ class="block w-full rounded-lg border border-gray-300 bg-background-50 p-2.5 text-base text-text focus:border-blue-500 focus:ring-blue-500"
+ />
+ </div>
+ <div>
+ <ods-text-input
+ id="test-input-id"
+ label="Betreff"
+ placeholder="hier muss der Betreff rein"
+ />
+ </div>
+ <div>
+ <ods-textarea />
+ </div>
<div class="my-10 flex gap-8">
<ods-radio-button-card
label="bewilligt"
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index 634638e056..35c94d3162 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -11,6 +11,8 @@ import {
IconComponent,
RadioButtonCardComponent,
SpinnerIconComponent,
+ TextInputComponent,
+ TextareaComponent,
} from '@ods/system';
import { BescheidDialogExampleComponent } from './components/bescheid-dialog/bescheid-dialog.component';
@@ -36,6 +38,8 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
ReactiveFormsModule,
IconComponent,
SpinnerIconComponent,
+ TextareaComponent,
+ TextInputComponent,
],
selector: 'app-root',
templateUrl: './app.component.html',
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index f7dfe57c3c..00e8a89ec6 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -3,6 +3,8 @@ 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';
+export * from './lib/form/text-input/text-input.component';
+export * from './lib/form/textarea/textarea.component';
export * from './lib/icon/icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.spec.ts
new file mode 100644
index 0000000000..e154ebed4a
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextInputComponent } from './text-input.component';
+
+describe('TextInputComponent', () => {
+ let component: TextInputComponent;
+ let fixture: ComponentFixture<TextInputComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TextInputComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TextInputComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts
new file mode 100644
index 0000000000..634781aaef
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-text-input',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ <div>
+ <label [for]="id" class="block text-sm font-medium leading-6 text-gray-900">{{
+ label
+ }}</label>
+ <div class="mt-2">
+ <input
+ type="text"
+ name="email"
+ [id]="id"
+ class="block w-full rounded-lg border border-gray-300 bg-background-50 p-2.5 text-base text-text focus:border-blue-500 focus:ring-blue-500"
+ [placeholder]="placeholder"
+ />
+ </div>
+ </div>
+ `,
+})
+export class TextInputComponent {
+ @Input({ required: true }) id!: string;
+ @Input() label: string = '';
+ @Input() placeholder: string = '';
+}
diff --git a/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.spec.ts
new file mode 100644
index 0000000000..31abe191e8
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextareaComponent } from './textarea.component';
+
+describe('TextareaComponent', () => {
+ let component: TextareaComponent;
+ let fixture: ComponentFixture<TextareaComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TextareaComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TextareaComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts
new file mode 100644
index 0000000000..3ec25e20a3
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-textarea',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ <div class="mt-2">
+ <textarea
+ rows="4"
+ name="comment"
+ id="comment"
+ class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+ ></textarea>
+ <label for="description" class="sr-only">Description</label>
+ <textarea
+ rows="2"
+ name="description"
+ id="description"
+ class="block w-full resize-none border-0 py-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+ placeholder="Write a description..."
+ ></textarea>
+ </div>
+ `,
+})
+export class TextareaComponent {
+ @Input() label!: string;
+ @Input() placeholder: string = '';
+ @Input() value!: string;
+}
diff --git a/alfa-client/tsconfig.base.json b/alfa-client/tsconfig.base.json
index 485fa33d9e..b8645da774 100644
--- a/alfa-client/tsconfig.base.json
+++ b/alfa-client/tsconfig.base.json
@@ -53,9 +53,9 @@
"@alfa-client/vorgang-shared-ui": ["libs/vorgang-shared-ui/src/index.ts"],
"@alfa-client/wiedervorlage": ["libs/wiedervorlage/src/index.ts"],
"@alfa-client/wiedervorlage-shared": ["libs/wiedervorlage-shared/src/index.ts"],
- "authentication": ["libs/authentication/src/index.ts"],
"@ods/component": ["libs/design-component/src/index.ts"],
- "@ods/system": ["libs/design-system/src/index.ts"]
+ "@ods/system": ["libs/design-system/src/index.ts"],
+ "authentication": ["libs/authentication/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
--
GitLab