Merge pull request 'OZG-6237-heading-component' (#756) from OZG-6237-heading-component into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/756


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

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/lib/heading/heading.stories.ts

+import { type Meta, type StoryObj } from '@storybook/angular';
+
+const meta: Meta = {
+  title: 'Typography/Heading',
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The headings are native HTML h-elements, styled with additional classes (see code)',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => ({
+    template: '<h1 class="heading-1">Heading 1</h1><h2 class="heading-2">Heading 2</h2>',
+  }),
+};