From 6a3d598a5c0e9ea37f1928ab43d71cbda0daaea6 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Mon, 9 Sep 2024 13:16:41 +0200
Subject: [PATCH] OZG-6237 Replace component with heading styles
---
alfa-client/apps/admin/src/styles.scss | 8 ++
...anisationseinheit-container.component.html | 2 +-
.../postfach-form.component.html | 5 +-
.../libs/design-system/.storybook/styles.scss | 3 +-
alfa-client/libs/design-system/src/index.ts | 1 -
.../src/lib/heading/heading.component.spec.ts | 75 -------------------
.../src/lib/heading/heading.component.ts | 40 ----------
.../src/lib/heading/heading.stories.ts | 40 ++++------
8 files changed, 28 insertions(+), 146 deletions(-)
delete mode 100644 alfa-client/libs/design-system/src/lib/heading/heading.component.spec.ts
delete mode 100644 alfa-client/libs/design-system/src/lib/heading/heading.component.ts
diff --git a/alfa-client/apps/admin/src/styles.scss b/alfa-client/apps/admin/src/styles.scss
index e9a497ed35..d4e151f329 100644
--- a/alfa-client/apps/admin/src/styles.scss
+++ b/alfa-client/apps/admin/src/styles.scss
@@ -3,3 +3,11 @@
@tailwind utilities;
@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;
+}
diff --git a/alfa-client/libs/admin-settings/src/lib/organisationseinheit/organisationseinheit-container/organisationseinheit-container.component.html b/alfa-client/libs/admin-settings/src/lib/organisationseinheit/organisationseinheit-container/organisationseinheit-container.component.html
index dbc6d9eddd..d324f8d83f 100644
--- a/alfa-client/libs/admin-settings/src/lib/organisationseinheit/organisationseinheit-container/organisationseinheit-container.component.html
+++ b/alfa-client/libs/admin-settings/src/lib/organisationseinheit/organisationseinheit-container/organisationseinheit-container.component.html
@@ -1,4 +1,4 @@
-<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>
<admin-organisationseinheit-form
diff --git a/alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.html b/alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.html
index 5ebfbc7da6..cf06ca1af3 100644
--- a/alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.html
+++ b/alfa-client/libs/admin-settings/src/lib/postfach/postfach-container/postfach-form/postfach-form.component.html
@@ -1,5 +1,6 @@
<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>
<div
[formGroupName]="PostfachFormService.ASBSENDER_GROUP"
@@ -33,7 +34,7 @@
></text-field>
</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>
<textarea
data-test-id="signatur-text"
diff --git a/alfa-client/libs/design-system/.storybook/styles.scss b/alfa-client/libs/design-system/.storybook/styles.scss
index 4a89ff6529..070e34c4f9 100644
--- a/alfa-client/libs/design-system/.storybook/styles.scss
+++ b/alfa-client/libs/design-system/.storybook/styles.scss
@@ -1 +1,2 @@
-@import '../src/lib/tailwind-preset/root.css';
\ No newline at end of file
+@import '../src/lib/tailwind-preset/root.css';
+@import '../../../apps/admin/src/styles.scss';
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 79c0844756..8adc00f2d8 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -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/text-input/text-input.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/attachment-icon/attachment-icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/heading/heading.component.spec.ts b/alfa-client/libs/design-system/src/lib/heading/heading.component.spec.ts
deleted file mode 100644
index 50a934b9fe..0000000000
--- a/alfa-client/libs/design-system/src/lib/heading/heading.component.spec.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-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');
- });
- });
- });
-});
diff --git a/alfa-client/libs/design-system/src/lib/heading/heading.component.ts b/alfa-client/libs/design-system/src/lib/heading/heading.component.ts
deleted file mode 100644
index d958e24a13..0000000000
--- a/alfa-client/libs/design-system/src/lib/heading/heading.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-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;
-}
diff --git a/alfa-client/libs/design-system/src/lib/heading/heading.stories.ts b/alfa-client/libs/design-system/src/lib/heading/heading.stories.ts
index f38efcb047..e5deb76751 100644
--- a/alfa-client/libs/design-system/src/lib/heading/heading.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/heading/heading.stories.ts
@@ -1,35 +1,23 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { HeadingComponent } from './heading.component';
+import { type Meta, type StoryObj } from '@storybook/angular';
-const meta: Meta<HeadingComponent> = {
- title: 'Heading',
- component: HeadingComponent,
+const meta: Meta = {
+ title: 'Typography/Heading',
excludeStories: /.*Data$/,
tags: ['autodocs'],
- decorators: [
- moduleMetadata({
- imports: [HeadingComponent],
- }),
- ],
+ parameters: {
+ docs: {
+ description: {
+ component: 'These are styles for headings (see code)',
+ },
+ },
+ },
};
export default meta;
-type Story = StoryObj<HeadingComponent>;
+type Story = StoryObj;
export const Default: Story = {
- args: {
- level: '1',
- 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' },
- },
+ render: () => ({
+ template: '<h1 class="heading-1">Heading 1</h1><h2 class="heading-2">Heading 2</h2>',
+ }),
};
--
GitLab