Skip to content
Snippets Groups Projects
Commit e023cfed authored by OZGCloud's avatar OZGCloud
Browse files

OZG-6676 OZG-7035 Adjust styling

parent 77ca924c
No related branches found
No related tags found
No related merge requests found
<ng-container *ngIf="externeFachstelleResource$ | async as externeFachstelleResource; else searchButton"> <ng-container *ngIf="externeFachstelleResource$ | async as externeFachstelleResource; else searchButton">
<alfa-zustaendige-stelle-header title="Externe Fachstelle" [subTitle]="externeFachstelleResource.name"> <alfa-zustaendige-stelle-header title="Externe Fachstelle" [subTitle]="externeFachstelleResource.name" [isSubTitleBold]="true">
<ods-external-unit-icon icon /> <ods-external-unit-icon icon />
<div class="flex flex-col text-sm text-text" info> <div class="flex flex-1 flex-col text-sm text-text" info>
<p>{{ externeFachstelleResource.anschrift }}</p> <p>{{ externeFachstelleResource.anschrift }}</p>
<p>{{ 'Email: ' + externeFachstelleResource.email }}</p> <p>{{ 'Email: ' + externeFachstelleResource.email }}</p>
</div> </div>
......
<p class="text-base text-text">{{ address }}</p> <p class="text-sm text-text">{{ address }}</p>
<ng-container *ngIf="organisationsEinheitResource$ | async as organisationsEinheitResource; else searchButton"> <ng-container *ngIf="organisationsEinheitResource$ | async as organisationsEinheitResource; else searchButton">
<alfa-zustaendige-stelle-header title="Öffentliche Verwaltung" [subTitle]="organisationsEinheitResource.name"> <alfa-zustaendige-stelle-header
title="Öffentliche Verwaltung"
[subTitle]="organisationsEinheitResource.name"
[isSubTitleBold]="true"
>
<ods-public-administration-icon icon /> <ods-public-administration-icon icon />
<alfa-organisations-einheit <alfa-organisations-einheit
data-test-id="organisations-einheit-in-collaboration" data-test-id="organisations-einheit-in-collaboration"
[organisationsEinheitResource]="organisationsEinheitResource" [organisationsEinheitResource]="organisationsEinheitResource"
class="flex-1"
info info
/> />
<alfa-edit-zustaendige-stelle-button title="Zuständige Stelle auswählen" dataTestId="edit-organisations-einheit-button" /> <alfa-edit-zustaendige-stelle-button title="Zuständige Stelle auswählen" dataTestId="edit-organisations-einheit-button" />
......
<div class="flex justify-between"> <div class="flex">
<div class="flex gap-3"> <div class="flex flex-1 gap-3">
<ng-content select="[icon]" /> <ng-content select="[icon]" />
<div class="flex flex-col text-base"> <div class="flex flex-1 flex-col text-base">
<p class="text-primary" data-test-id="zustaendige-stelle-header-title">{{ title }}</p> <p class="text-primary" data-test-id="zustaendige-stelle-header-title">{{ title }}</p>
<p class="text-text" data-test-id="zustaendige-stelle-header-sub-title">{{ subTitle }}</p> <p class="text-text" [class.font-medium]="isSubTitleBold" data-test-id="zustaendige-stelle-header-sub-title">
{{ subTitle }}
</p>
</div> </div>
<ng-content select="[info]" /> <ng-content select="[info]" />
</div> </div>
......
...@@ -45,5 +45,27 @@ describe('ZustaendigeStelleHeaderComponent', () => { ...@@ -45,5 +45,27 @@ describe('ZustaendigeStelleHeaderComponent', () => {
expect(subTitleElement.innerHTML).toContain('I am test sub title'); expect(subTitleElement.innerHTML).toContain('I am test sub title');
}); });
}); });
describe('isSubTitleBold', () => {
it('should add class if true', () => {
component.subTitle = 'I am test sub title';
component.isSubTitleBold = true;
fixture.detectChanges();
const subTitleElement: HTMLElement = getElementFromFixture(fixture, subTitleSelector);
expect(subTitleElement.classList).toContain('font-medium');
});
it('should not add class if false', () => {
component.subTitle = 'I am test sub title';
component.isSubTitleBold = false;
fixture.detectChanges();
const subTitleElement: HTMLElement = getElementFromFixture(fixture, subTitleSelector);
expect(subTitleElement.classList).not.toContain('font-medium');
});
});
}); });
}); });
...@@ -7,4 +7,5 @@ import { Component, Input } from '@angular/core'; ...@@ -7,4 +7,5 @@ import { Component, Input } from '@angular/core';
export class ZustaendigeStelleHeaderComponent { export class ZustaendigeStelleHeaderComponent {
@Input() title: string; @Input() title: string;
@Input() subTitle: string; @Input() subTitle: string;
@Input() isSubTitleBold: boolean = false;
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment