OZG-4993 OZG-5147 Create primary and secondary button components

alfa-client/libs/admin-settings/src/lib/admin-settings.module.ts

@@ -9,6 +9,8 @@ import { PostfachFormComponent } from './postfach/postfach-container/postfach-fo
 import { TextFieldComponent } from './shared/text-field/text-field.component';
 import { OeidContainerComponent } from './oeid/oeid-container/oeid-container.component';
 import { OeidFormComponent } from './oeid/oeid-container/oeid-form/oeid-form.component';
+import { PrimaryButtonComponent } from './shared/primary-button/primary-button.component';
+import { SecondaryButtonComponent } from './shared/secondary-button/secondary-button.component';
 
 @NgModule({
   declarations: [
@@ -18,6 +20,8 @@ import { OeidFormComponent } from './oeid/oeid-container/oeid-form/oeid-form.com
     TextFieldComponent,
     OeidContainerComponent,
     OeidFormComponent,
+    PrimaryButtonComponent,
+    SecondaryButtonComponent,
   ],
   imports: [CommonModule, TechSharedModule, RouterModule, ReactiveFormsModule],
   exports: [PostfachContainerComponent, OeidContainerComponent, NavigationItemComponent],

alfa-client/libs/admin-settings/src/lib/oeid/oeid-container/oeid-container.component.html

 <h1 class="text-2xl font-bold">Organisationseinheiten</h1>
 <p id="absender-desc" class="p-1">Hinterlegen Sie Name und ID der Organisationseinheiten.</p>
 
-<dialog #CreateOEIDDialog>
-  <oeid-form (close)="CreateOEIDDialog.close()"></oeid-form>
+<dialog #NewOeidDialog>
+  <oeid-form (close)="NewOeidDialog.close()"></oeid-form>
 </dialog>
 
-<button
-  (click)="CreateOEIDDialog.showModal()"
+<admin-secondary-button
+  (clickEmitter)="NewOeidDialog.showModal()"
   data-test-id="create-oeid-dialog-button"
-  class="bg-transparent hover:bg-ozgblue-300 active:bg-ozgblue-300/90 border-gray-300 border-2 rounded-md px-3 py-2 text-sm font-semibold text-ozgblue-600 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
 >
   Neue Organisationseinheit anlegen
-</button>
+</admin-secondary-button>

alfa-client/libs/admin-settings/src/lib/oeid/oeid-container/oeid-container.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { OeidContainerComponent } from './oeid-container.component';
 import { OeidFormComponent } from './oeid-form/oeid-form.component';
 import { MockComponent } from 'ng-mocks';
+import { SecondaryButtonComponent } from '../../shared/secondary-button/secondary-button.component';
 
 describe('OeidContainerComponent', () => {
   let component: OeidContainerComponent;
@@ -9,7 +10,11 @@ describe('OeidContainerComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [OeidContainerComponent, MockComponent(OeidFormComponent)],
+      declarations: [
+        OeidContainerComponent,
+        MockComponent(SecondaryButtonComponent),
+        MockComponent(OeidFormComponent),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(OeidContainerComponent);

alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.html

@@ -43,11 +43,7 @@
     class="mb-2 mt-2 block h-40 w-96 p-1"
   ></textarea>
 
-  <button
-    (click)="submit()"
-    data-test-id="save-button"
-    class="bg-ozgblue-700 hover:bg-ozgblue-600 active:bg-ozgblue-600/90 focus-visible:outline-ozgblue-800 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-  >
+  <admin-primary-button (clickEmitter)="submit()" data-test-id="save-button">
     Speichern
-  </button>
+  </admin-primary-button>
 </form>

alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.spec.ts

@@ -10,6 +10,7 @@ import {
 import { PostfachFormService } from './postfach.formservice';
 import { MockComponent } from 'ng-mocks';
 import { TextFieldComponent } from '../../../shared/text-field/text-field.component';
+import { PrimaryButtonComponent } from '../../../shared/primary-button/primary-button.component';
 
 describe('PostfachFormComponent', () => {
   let component: PostfachFormComponent;
@@ -20,7 +21,7 @@ describe('PostfachFormComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [PostfachFormComponent, MockComponent(TextFieldComponent)],
+      declarations: [PostfachFormComponent, MockComponent(PrimaryButtonComponent), MockComponent(TextFieldComponent)],
       imports: [ReactiveFormsModule, FormsModule],
     }).compileComponents();
   });
@@ -85,7 +86,7 @@ describe('PostfachFormComponent', () => {
     it('should call submit on click', () => {
       component.submit = jest.fn();
 
-      dispatchEventFromFixture(fixture, saveButton, 'click');
+      dispatchEventFromFixture(fixture, saveButton, 'clickEmitter');
 
       expect(component.submit).toHaveBeenCalled();
     });

alfa-client/libs/admin-settings/src/lib/shared/primary-button/primary-button.component.html

+<!-- https://www.material-tailwind.com/docs/html/button -->
+<button
+  (click)="clickEmitter.emit($event)"
+  [disabled]="disabled"
+  class="rounded-md bg-ozgblue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ozgblue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ozgblue-800 active:bg-ozgblue-600/90"
+>
+  <ng-content></ng-content>
+</button>

alfa-client/libs/admin-settings/src/lib/shared/primary-button/primary-button.component.spec.ts

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

alfa-client/libs/admin-settings/src/lib/shared/primary-button/primary-button.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'admin-primary-button',
+  templateUrl: './primary-button.component.html',
+})
+export class PrimaryButtonComponent {
+
+  @Output()
+  clickEmitter = new EventEmitter<MouseEvent>();
+
+  @Input()
+  disabled: boolean;
+}

alfa-client/libs/admin-settings/src/lib/shared/secondary-button/secondary-button.component.html

+<!-- https://www.material-tailwind.com/docs/html/button -->
+<button
+  (click)="clickEmitter.emit($event)"
+  [disabled]="disabled"
+  class="select-none rounded-lg border border-gray-300 px-6 py-3 text-center align-middle font-sans text-xs font-bold uppercase text-ozgblue-600 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
+  type="button"
+>
+  <ng-content></ng-content>
+</button>

alfa-client/libs/admin-settings/src/lib/shared/secondary-button/secondary-button.component.spec.ts

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

alfa-client/libs/admin-settings/src/lib/shared/secondary-button/secondary-button.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'admin-secondary-button',
+  templateUrl: './secondary-button.component.html',
+})
+export class SecondaryButtonComponent {
+  @Output()
+  clickEmitter = new EventEmitter<MouseEvent>();
+
+  @Input()
+  disabled: boolean;
+}