From fe4e3bcf4ff40cb2a38766ad43081020dc2cdf19 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Wed, 6 Mar 2024 23:37:09 +0100
Subject: [PATCH] OZG-5008-OZG-5104 add radio-button-card
---
.../apps/demo/src/app/app.component.html | 25 ++++++
.../apps/demo/src/app/app.component.ts | 8 ++
alfa-client/libs/design-system/.eslintrc.json | 76 +++++++++----------
alfa-client/libs/design-system/src/index.ts | 1 +
.../radio-button-card.component.html | 18 +++++
.../radio-button-card.component.spec.ts | 21 +++++
.../radio-button-card.component.ts | 20 +++++
.../src/lib/tailwind-preset/root.css | 12 +++
.../lib/tailwind-preset/tailwind.config.js | 10 +++
alfa-client/libs/design-system/tsconfig.json | 60 +++++++--------
10 files changed, 183 insertions(+), 68 deletions(-)
create mode 100644 alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
create mode 100644 alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-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 4a44b0f2d6..1ae5b075b4 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/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>
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index 76c526c664..a03f6b9b4a 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/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()));
diff --git a/alfa-client/libs/design-system/.eslintrc.json b/alfa-client/libs/design-system/.eslintrc.json
index 971cfea2ae..b11b611dfd 100644
--- a/alfa-client/libs/design-system/.eslintrc.json
+++ b/alfa-client/libs/design-system/.eslintrc.json
@@ -1,40 +1,40 @@
{
- "extends": ["../../.eslintrc.json"],
- "ignorePatterns": ["!**/*"],
- "overrides": [
- {
- "files": ["*.ts"],
- "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
- "rules": {
- "@angular-eslint/directive-selector": [
- "error",
- {
- "type": "attribute",
- "prefix": "lib",
- "style": "camelCase"
- }
- ],
- "@angular-eslint/component-selector": [
- "error",
- {
- "type": "element",
- "prefix": "lib",
- "style": "kebab-case"
- }
- ]
- }
- },
- {
- "files": ["*.html"],
- "extends": ["plugin:@nx/angular-template"],
- "rules": {}
- },
- {
- "files": ["*.json"],
- "parser": "jsonc-eslint-parser",
- "rules": {
- "@nx/dependency-checks": "error"
- }
- }
- ]
+ "extends": ["../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "ozgdesign",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "ozgdesign",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ },
+ {
+ "files": ["*.json"],
+ "parser": "jsonc-eslint-parser",
+ "rules": {
+ "@nx/dependency-checks": "error"
+ }
+ }
+ ]
}
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index a7ea040ebc..e3a4f7b400 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1 +1,2 @@
export * from './lib/testbtn/testbtn.component';
+export * from './lib/form/radio-button-card/radio-button-card.component';
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
new file mode 100644
index 0000000000..e2ab62432b
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.html
@@ -0,0 +1,18 @@
+<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>
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts
new file mode 100644
index 0000000000..d64246447b
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.spec.ts
@@ -0,0 +1,21 @@
+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();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts
new file mode 100644
index 0000000000..5bc58d07b0
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.component.ts
@@ -0,0 +1,20 @@
+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';
+}
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
index f2ce959a3b..6169e03781 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
+++ b/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 {
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index e0b5124312..30e8966a84 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/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>)',
diff --git a/alfa-client/libs/design-system/tsconfig.json b/alfa-client/libs/design-system/tsconfig.json
index 832897bd73..c5ab1e5582 100644
--- a/alfa-client/libs/design-system/tsconfig.json
+++ b/alfa-client/libs/design-system/tsconfig.json
@@ -1,32 +1,32 @@
{
- "compilerOptions": {
- "target": "es2022",
- "useDefineForClassFields": false,
- "forceConsistentCasingInFileNames": true,
- "strict": true,
- "noImplicitOverride": true,
- "noPropertyAccessFromIndexSignature": true,
- "noImplicitReturns": true,
- "noFallthroughCasesInSwitch": true
- },
- "files": [],
- "include": [],
- "references": [
- {
- "path": "./tsconfig.lib.json"
- },
- {
- "path": "./tsconfig.spec.json"
- },
- {
- "path": "./.storybook/tsconfig.json"
- }
- ],
- "extends": "../../tsconfig.base.json",
- "angularCompilerOptions": {
- "enableI18nLegacyMessageIdFormat": false,
- "strictInjectionParameters": true,
- "strictInputAccessModifiers": true,
- "strictTemplates": true
- }
+ "compilerOptions": {
+ "target": "es2022",
+ "useDefineForClassFields": false,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ },
+ {
+ "path": "./.storybook/tsconfig.json"
+ }
+ ],
+ "extends": "../../tsconfig.base.json",
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
}
--
GitLab