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

OZG-6237 Replace component with heading styles

parent a2f3d210
No related branches found
No related tags found
No related merge requests found
...@@ -3,3 +3,11 @@ ...@@ -3,3 +3,11 @@
@tailwind utilities; @tailwind utilities;
@import 'libs/design-system/src/lib/tailwind-preset/root.css'; @import 'libs/design-system/src/lib/tailwind-preset/root.css';
.heading-1 {
@apply text-3xl font-medium text-text;
}
.heading-2 {
@apply py-4 text-2xl font-medium text-text;
}
<h1 class="text-2xl font-bold">Organisationseinheiten</h1> <h1 class="heading-1 pb-4">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>
<admin-organisationseinheit-form <admin-organisationseinheit-form
......
<form class="form flex-col" [formGroup]="formService.form"> <form class="form flex-col" [formGroup]="formService.form">
<h1 class="text-2xl font-bold">Absender</h1> <h1 class="heading-1">Postfach</h1>
<h2 class="heading-2">Absender</h2>
<p id="absender-desc" class="p-1">Hinterlegen Sie Absenderinformationen zu Ihrem Postfach.</p> <p id="absender-desc" class="p-1">Hinterlegen Sie Absenderinformationen zu Ihrem Postfach.</p>
<div <div
[formGroupName]="PostfachFormService.ASBSENDER_GROUP" [formGroupName]="PostfachFormService.ASBSENDER_GROUP"
...@@ -33,7 +34,7 @@ ...@@ -33,7 +34,7 @@
></text-field> ></text-field>
</div> </div>
<div class="h-20"></div> <div class="h-20"></div>
<h1 class="text-2xl font-bold">Signatur</h1> <h2 class="heading-2">Signatur</h2>
<p id="signatur-desc">Erstellen oder ändern Sie die Signatur für Nachrichten.</p> <p id="signatur-desc">Erstellen oder ändern Sie die Signatur für Nachrichten.</p>
<textarea <textarea
data-test-id="signatur-text" data-test-id="signatur-text"
......
@import '../src/lib/tailwind-preset/root.css'; @import '../src/lib/tailwind-preset/root.css';
@import '../../../apps/admin/src/styles.scss';
...@@ -10,7 +10,6 @@ export * from './lib/form/file-upload-button/file-upload-button.component'; ...@@ -10,7 +10,6 @@ export * from './lib/form/file-upload-button/file-upload-button.component';
export * from './lib/form/radio-button-card/radio-button-card.component'; export * from './lib/form/radio-button-card/radio-button-card.component';
export * from './lib/form/text-input/text-input.component'; export * from './lib/form/text-input/text-input.component';
export * from './lib/form/textarea/textarea.component'; export * from './lib/form/textarea/textarea.component';
export * from './lib/heading/heading.component';
export * from './lib/icons/admin-logo-icon/admin-logo-icon.component'; export * from './lib/icons/admin-logo-icon/admin-logo-icon.component';
export * from './lib/icons/attachment-icon/attachment-icon.component'; export * from './lib/icons/attachment-icon/attachment-icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component'; export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
......
import { getElementFromFixture } from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { HeadingComponent } from './heading.component';
describe('HeadingComponent', () => {
let component: HeadingComponent;
let fixture: ComponentFixture<HeadingComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HeadingComponent],
}).compileComponents();
fixture = TestBed.createComponent(HeadingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('input', () => {
describe('text', () => {
it('should set text as inner HTML', () => {
component.text = 'test';
fixture.detectChanges();
const heading: HTMLElement = getElementFromFixture(
fixture,
getDataTestIdOf('heading-test'),
);
expect(heading.innerHTML).toContain('test');
});
});
describe('level', () => {
it('should set aria level', () => {
component.level = '2';
component.text = 'test';
fixture.detectChanges();
const heading: HTMLElement = getElementFromFixture(
fixture,
getDataTestIdOf('heading-test'),
);
expect(heading.getAttribute('aria-level')).toBe('2');
});
});
describe('class', () => {
it('should get classes for level', () => {
component.headingVariants = jest.fn();
component.level = '2';
fixture.detectChanges();
expect(component.headingVariants).toHaveBeenCalledWith({ level: '2' });
});
it('should merge classes', () => {
component.twMerge = jest.fn();
component.headingVariants = jest.fn().mockReturnValue('test-class-2');
component.class = 'test-class-1';
fixture.detectChanges();
expect(component.twMerge).toHaveBeenCalledWith('test-class-1', 'test-class-2');
});
});
});
});
import { TechSharedModule } from '@alfa-client/tech-shared';
import { NgClass } from '@angular/common';
import { Component, Input } from '@angular/core';
import { VariantProps, cva } from 'class-variance-authority';
import { twMerge } from 'tailwind-merge';
export const headingVariants = cva('font-medium', {
variants: {
level: {
'1': 'text-3xl pb-6',
'2': 'text-2xl py-4',
},
},
defaultVariants: {
level: '1',
},
});
type HeadingVariants = VariantProps<typeof headingVariants>;
@Component({
selector: 'ods-heading',
standalone: true,
imports: [NgClass, TechSharedModule],
template: `<div
role="heading"
[attr.aria-level]="level"
[ngClass]="twMerge(class, headingVariants({ level }))"
[attr.data-test-id]="'heading-' + text | convertForDataTest"
>
{{ text }}
</div>`,
})
export class HeadingComponent {
@Input({ required: true }) text!: string;
@Input() level: HeadingVariants['level'] = '1';
@Input() class: string = '';
headingVariants = headingVariants;
twMerge = twMerge;
}
import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; import { type Meta, type StoryObj } from '@storybook/angular';
import { HeadingComponent } from './heading.component';
const meta: Meta<HeadingComponent> = { const meta: Meta = {
title: 'Heading', title: 'Typography/Heading',
component: HeadingComponent,
excludeStories: /.*Data$/, excludeStories: /.*Data$/,
tags: ['autodocs'], tags: ['autodocs'],
decorators: [ parameters: {
moduleMetadata({ docs: {
imports: [HeadingComponent], description: {
}), component: 'These are styles for headings (see code)',
], },
},
},
}; };
export default meta; export default meta;
type Story = StoryObj<HeadingComponent>; type Story = StoryObj;
export const Default: Story = { export const Default: Story = {
args: { render: () => ({
level: '1', template: '<h1 class="heading-1">Heading 1</h1><h2 class="heading-2">Heading 2</h2>',
text: 'This is awesome heading!', }),
class: '',
},
argTypes: {
level: {
description: 'Level of heading element',
control: 'select',
options: ['1', '2'],
table: { defaultValue: { summary: '1' } },
},
text: { description: 'Heading text' },
class: { description: 'Style class for element' },
},
}; };
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment