OZG-6237 Add heading component

alfa-client/libs/design-system/src/index.ts

@@ -10,6 +10,7 @@ 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';
+
+const meta: Meta<HeadingComponent> = {
+  title: 'Heading',
+  component: HeadingComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [HeadingComponent],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<HeadingComponent>;
+
+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' },
+  },
+};