OZG-6731 Add person icon

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

@@ -22,6 +22,7 @@ export * from './lib/icons/logout-icon/logout-icon.component';
 export * from './lib/icons/mailbox-icon/mailbox-icon.component';
 export * from './lib/icons/office-icon/office-icon.component';
 export * from './lib/icons/orga-unit-icon/orga-unit-icon.component';
+export * from './lib/icons/person-icon/person-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/search-icon/search-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';

alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PersonIconComponent } from './person-icon.component';
+
+describe('PersonIconComponent', () => {
+  let component: PersonIconComponent;
+  let fixture: ComponentFixture<PersonIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PersonIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PersonIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.ts

+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-person-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    [ngClass]="[twMerge(iconVariants({ size }), 'stroke-gray-600', class)]"
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M20.4 22.8v-2.4a4.8 4.8 0 00-4.8-4.8H8.4a4.8 4.8 0 00-4.8 4.8v2.4m8.4-12a4.8 4.8 0 100-9.6 4.8 4.8 0 000 9.6z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>`,
+})
+export class PersonIconComponent {
+  @Input() size: IconVariants['size'] = 'small';
+  @Input() class: string = undefined;
+
+  iconVariants = iconVariants;
+  twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { PersonIconComponent } from './person-icon.component';
+
+const meta: Meta<PersonIconComponent> = {
+  title: 'Icons/Person icon',
+  component: PersonIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<PersonIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'small' },
+      },
+    },
+  },
+};