diff --git a/alfa-client/apps/admin/src/styles.scss b/alfa-client/apps/admin/src/styles.scss index e9a497ed35ba9c4e1b93a5e8b51ffd2d909d9bd7..d4e151f329f1cefda33709ace138cd39fb383a7a 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 dbc6d9eddd9d63fb982da496a7a4636210670ce8..d324f8d83fe91defe9b5066f4f24d230bc33eb4f 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 5ebfbc7da60ca54abbabb4135ce809216b274f88..cf06ca1af3045314ba30e32d03ac45b8aa5c7203 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 4a89ff65290c2820edbc6553fd53888807a98bd7..070e34c4f9df1c9fd2e82dba14fe52f4133d4290 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/lib/heading/heading.stories.ts b/alfa-client/libs/design-system/src/lib/heading/heading.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..6eac165bb7e17ffa37fb79dcf4372a8273af1609 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/heading/heading.stories.ts @@ -0,0 +1,24 @@ +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>', + }), +};