Skip to content
Snippets Groups Projects
Commit 564a58fc authored by Jan Zickermann's avatar Jan Zickermann
Browse files

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

parent 88d0bb3c
No related branches found
No related tags found
No related merge requests found
Showing
with 106 additions and 15 deletions
...@@ -9,6 +9,8 @@ import { PostfachFormComponent } from './postfach/postfach-container/postfach-fo ...@@ -9,6 +9,8 @@ import { PostfachFormComponent } from './postfach/postfach-container/postfach-fo
import { TextFieldComponent } from './shared/text-field/text-field.component'; import { TextFieldComponent } from './shared/text-field/text-field.component';
import { OeidContainerComponent } from './oeid/oeid-container/oeid-container.component'; import { OeidContainerComponent } from './oeid/oeid-container/oeid-container.component';
import { OeidFormComponent } from './oeid/oeid-container/oeid-form/oeid-form.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({ @NgModule({
declarations: [ declarations: [
...@@ -18,6 +20,8 @@ import { OeidFormComponent } from './oeid/oeid-container/oeid-form/oeid-form.com ...@@ -18,6 +20,8 @@ import { OeidFormComponent } from './oeid/oeid-container/oeid-form/oeid-form.com
TextFieldComponent, TextFieldComponent,
OeidContainerComponent, OeidContainerComponent,
OeidFormComponent, OeidFormComponent,
PrimaryButtonComponent,
SecondaryButtonComponent,
], ],
imports: [CommonModule, TechSharedModule, RouterModule, ReactiveFormsModule], imports: [CommonModule, TechSharedModule, RouterModule, ReactiveFormsModule],
exports: [PostfachContainerComponent, OeidContainerComponent, NavigationItemComponent], exports: [PostfachContainerComponent, OeidContainerComponent, NavigationItemComponent],
......
<h1 class="text-2xl font-bold">Organisationseinheiten</h1> <h1 class="text-2xl font-bold">Organisationseinheiten</h1>
<p id="absender-desc" class="p-1">Hinterlegen Sie Name und ID der Organisationseinheiten.</p> <p id="absender-desc" class="p-1">Hinterlegen Sie Name und ID der Organisationseinheiten.</p>
<dialog #CreateOEIDDialog> <dialog #NewOeidDialog>
<oeid-form (close)="CreateOEIDDialog.close()"></oeid-form> <oeid-form (close)="NewOeidDialog.close()"></oeid-form>
</dialog> </dialog>
<button <admin-secondary-button
(click)="CreateOEIDDialog.showModal()" (clickEmitter)="NewOeidDialog.showModal()"
data-test-id="create-oeid-dialog-button" 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 Neue Organisationseinheit anlegen
</button> </admin-secondary-button>
...@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; ...@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OeidContainerComponent } from './oeid-container.component'; import { OeidContainerComponent } from './oeid-container.component';
import { OeidFormComponent } from './oeid-form/oeid-form.component'; import { OeidFormComponent } from './oeid-form/oeid-form.component';
import { MockComponent } from 'ng-mocks'; import { MockComponent } from 'ng-mocks';
import { SecondaryButtonComponent } from '../../shared/secondary-button/secondary-button.component';
describe('OeidContainerComponent', () => { describe('OeidContainerComponent', () => {
let component: OeidContainerComponent; let component: OeidContainerComponent;
...@@ -9,7 +10,11 @@ describe('OeidContainerComponent', () => { ...@@ -9,7 +10,11 @@ describe('OeidContainerComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [OeidContainerComponent, MockComponent(OeidFormComponent)], declarations: [
OeidContainerComponent,
MockComponent(SecondaryButtonComponent),
MockComponent(OeidFormComponent),
],
}).compileComponents(); }).compileComponents();
fixture = TestBed.createComponent(OeidContainerComponent); fixture = TestBed.createComponent(OeidContainerComponent);
......
...@@ -43,11 +43,7 @@ ...@@ -43,11 +43,7 @@
class="mb-2 mt-2 block h-40 w-96 p-1" class="mb-2 mt-2 block h-40 w-96 p-1"
></textarea> ></textarea>
<button <admin-primary-button (clickEmitter)="submit()" data-test-id="save-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"
>
Speichern Speichern
</button> </admin-primary-button>
</form> </form>
...@@ -10,6 +10,7 @@ import { ...@@ -10,6 +10,7 @@ import {
import { PostfachFormService } from './postfach.formservice'; import { PostfachFormService } from './postfach.formservice';
import { MockComponent } from 'ng-mocks'; import { MockComponent } from 'ng-mocks';
import { TextFieldComponent } from '../../../shared/text-field/text-field.component'; import { TextFieldComponent } from '../../../shared/text-field/text-field.component';
import { PrimaryButtonComponent } from '../../../shared/primary-button/primary-button.component';
describe('PostfachFormComponent', () => { describe('PostfachFormComponent', () => {
let component: PostfachFormComponent; let component: PostfachFormComponent;
...@@ -20,7 +21,7 @@ describe('PostfachFormComponent', () => { ...@@ -20,7 +21,7 @@ describe('PostfachFormComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [PostfachFormComponent, MockComponent(TextFieldComponent)], declarations: [PostfachFormComponent, MockComponent(PrimaryButtonComponent), MockComponent(TextFieldComponent)],
imports: [ReactiveFormsModule, FormsModule], imports: [ReactiveFormsModule, FormsModule],
}).compileComponents(); }).compileComponents();
}); });
...@@ -85,7 +86,7 @@ describe('PostfachFormComponent', () => { ...@@ -85,7 +86,7 @@ describe('PostfachFormComponent', () => {
it('should call submit on click', () => { it('should call submit on click', () => {
component.submit = jest.fn(); component.submit = jest.fn();
dispatchEventFromFixture(fixture, saveButton, 'click'); dispatchEventFromFixture(fixture, saveButton, 'clickEmitter');
expect(component.submit).toHaveBeenCalled(); expect(component.submit).toHaveBeenCalled();
}); });
......
<!-- 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>
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();
});
});
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;
}
<!-- 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>
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();
});
});
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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment