diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index 63a5e88f33e0e73a391336af483a86d8b6828a04..2c2e721b540b78198bfa25b5d8d3627dc824f1ef 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/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'; diff --git a/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..652bfa8bc67ef5656971452b96f76272c06ecbdc --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.spec.ts @@ -0,0 +1,21 @@ +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(); + }); +}); diff --git a/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..ecb1845e5141a2c498b0118b7416d4515e303f1a --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.component.ts @@ -0,0 +1,33 @@ +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; +} diff --git a/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..61ef6271736032c9a31a5695d62303bc77fdd373 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/person-icon/person-icon.stories.ts @@ -0,0 +1,27 @@ +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' }, + }, + }, + }, +};