OZG-6237 Replace component with heading styles

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;
+}

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

-<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

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

 <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"

alfa-client/libs/design-system/.storybook/styles.scss

 @import '../src/lib/tailwind-preset/root.css';
+@import '../../../apps/admin/src/styles.scss';

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';

alfa-client/libs/design-system/src/lib/heading/heading.component.spec.ts

-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');
-      });
-    });
-  });
-});

alfa-client/libs/design-system/src/lib/heading/heading.component.ts

-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;
-}

alfa-client/libs/design-system/src/lib/heading/heading.stories.ts

-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>',
+  }),
 };