OZG-5592 design-system add input, textarea

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"

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',

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';

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

+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();
+  });
+});

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

+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 = '';
+}

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

+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();
+  });
+});

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

+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;
+}

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"]