OZG-5008-OZG-5104 add radio-button-card

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

@@ -14,6 +14,30 @@
       <nav>NAV</nav>
     </div>
     <main class="flex-auto bg-background-50 p-6">
+      <form id="antrag_bescheiden_form" [formGroup]="exampleForm">
+        <div class="my-10 flex gap-8">
+          <ozgdesign-radio-button-card
+            label="bewilligt"
+            name="exampleName"
+            value="bewilligt"
+            backgroudColorChecked="bg-bewilligt-100"
+            borderColorChecked="border-bewilligt"
+            ><div>
+              <!--<mat-icon svgIcon="stamp" class="text-bewilligt"></mat-icon>-->ICON
+            </div></ozgdesign-radio-button-card
+          >
+          <ozgdesign-radio-button-card
+            label="abgelehnt"
+            name="exampleName"
+            value="abgelehnt"
+            backgroudColorChecked="bg-abgelehnt-100"
+            borderColorChecked="border-abgelehnt"
+            ><div>
+              <!--<mat-icon class="text-abgelehnt">close</mat-icon>-->ICON
+            </div></ozgdesign-radio-button-card
+          >
+        </div>
+      </form>
       <app-bescheid-dialog-button></app-bescheid-dialog-button>
       <ozg-testbtn />
       <div class="text-warning">Achtung</div>
@@ -33,6 +57,7 @@
           <p>sjdkflsd sdjsdsjdlfj</p>
         </cdk-step>
       </app-custom-stepper>
+
       <router-outlet></router-outlet>
     </main>
   </div>

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

@@ -2,11 +2,13 @@ import { Component, HostBinding, effect, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { CdkStepperModule } from '@angular/cdk/stepper';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { TestbtnComponent } from 'design-system';
 import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.component';
 import { BescheidStepperComponent } from './components/bescheid-stepper/bescheid-stepper.component';
 import { BescheidDialogExampleComponent } from './components/bescheid-dialog/bescheid-dialog.component';
 import { BescheidPaperComponent } from './components/bescheid-paper/bescheid-paper.component';
+import { RadioButtonCardComponent } from 'design-system';
 
 @Component({
   standalone: true,
@@ -19,6 +21,8 @@ import { BescheidPaperComponent } from './components/bescheid-paper/bescheid-pap
     BescheidDialogExampleComponent,
     BescheidStepperComponent,
     BescheidPaperComponent,
+    RadioButtonCardComponent,
+    ReactiveFormsModule,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -32,6 +36,10 @@ export class AppComponent {
     return this.darkMode();
   }
 
+  exampleForm = new FormGroup({
+    exampleName: new FormControl('bewilligt'),
+  });
+
   constructor() {
     effect(() => {
       window.localStorage.setItem('darkMode', JSON.stringify(this.darkMode()));

alfa-client/libs/design-system/.eslintrc.json

@@ -10,7 +10,7 @@
           "error",
           {
             "type": "attribute",
-						"prefix": "lib",
+            "prefix": "ozgdesign",
             "style": "camelCase"
           }
         ],
@@ -18,7 +18,7 @@
           "error",
           {
             "type": "element",
-						"prefix": "lib",
+            "prefix": "ozgdesign",
             "style": "kebab-case"
           }
         ]

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

 export * from './lib/testbtn/testbtn.component';
+export * from './lib/form/radio-button-card/radio-button-card.component';

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

+<input
+  #someInput
+  type="radio"
+  class="peer hidden"
+  id="{{ name }}_{{ value }}"
+  name="{{ name }}"
+  formControlName="{{ name }}"
+  value="{{ value }}"
+/>
+<label
+  for="{{ name }}_{{ value }}"
+  class="flex flex-1 cursor-pointer select-none justify-center gap-2 rounded-lg border bg-white px-12 py-5 text-center align-middle text-base peer-checked:font-semibold peer-checked:{{
+    backgroudColorChecked
+  }} peer-checked:{{ borderColorChecked }}"
+>
+  <ng-content />
+  <span>{{ label }}</span>
+</label>

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RadioButtonCardComponent } from './radio-button-card.component';
+
+describe('RadioButtonCardComponent', () => {
+  let component: RadioButtonCardComponent;
+  let fixture: ComponentFixture<RadioButtonCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RadioButtonCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RadioButtonCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, Input, ElementRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroupDirective, ControlContainer, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'ozgdesign-radio-button-card',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './radio-button-card.component.html',
+  styles: [':host {@apply flex flex-1}'],
+  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
+})
+export class RadioButtonCardComponent {
+  @Input() tabindex?: number;
+  @Input() label!: string;
+  @Input() name!: string;
+  @Input() value!: string;
+  @Input() backgroudColorChecked: string = 'bg-bewilligt-100';
+  @Input() borderColorChecked: string = 'border-bewilligt';
+}

alfa-client/libs/design-system/src/lib/tailwind-preset/root.css

@@ -15,6 +15,12 @@
   --color-background-50: 0 0% 100%;
   --color-background-100: 0 0% 98%;
   --color-background-200: 0 0% 90%;
+
+  --color-bewilligt-100: 122 100% 92%;
+  --color-bewilligt-700: 122 100% 29%;
+
+  --color-abgelehnt-100: 0 100% 92%;
+  --color-abgelehnt-500: 0 100% 60%;
 }
 
 .dark {
@@ -26,6 +32,12 @@
   --color-background-50: 0 0% 0%;
   --color-background-100: 0 0% 8%;
   --color-background-200: 0 0% 16%;
+
+  --color-bewilligt-100: 122 100% 92%;
+  --color-bewilligt-700: 122 100% 29%;
+
+  --color-abgelehnt-100: 0 100% 92%;
+  --color-abgelehnt-500: 0 100% 60%;
 }
 
 .bescheid-dialog-backdrop {

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -33,6 +33,16 @@ module.exports = {
           200: 'hsl(var(--color-background-200) / <alpha-value>)',
           DEFAULT: 'hsl(var(--color-background-100) / <alpha-value>)',
         },
+        bewilligt: {
+          100: 'hsl(var(--color-bewilligt-100) / <alpha-value>)',
+          700: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
+          DEFAULT: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
+        },
+        abgelehnt: {
+          100: 'hsl(var(--color-abgelehnt-100) / <alpha-value>)',
+          700: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
+          DEFAULT: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
+        },
         mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
         primary: {
           600: 'hsl(var(--color-primary-600) / <alpha-value>)',