diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index e030a77354778be905c8b0fcfe3e14ddb6872d8d..2734b503f2543a33fbb5fc6eeb32f29434fce50a 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/alfa-client/libs/design-system/src/index.ts @@ -41,6 +41,7 @@ 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/icons/accessibility-icon/accessibility-icon.component'; +export * from './lib/icons/account-circle-icon/account-circle-icon.component'; export * from './lib/icons/admin-logo-icon/admin-logo-icon.component'; export * from './lib/icons/archive-icon/archive-icon.component'; export * from './lib/icons/attachment-icon/attachment-icon.component'; diff --git a/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..e50bb31c690ce54140e686a5a50d38d22ee42e22 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AccountCircleIconComponent } from './account-circle-icon.component'; + +describe('AccountCircleIconComponent', () => { + let component: AccountCircleIconComponent; + let fixture: ComponentFixture<AccountCircleIconComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AccountCircleIconComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(AccountCircleIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..b762c6cbe32f662f51bb5cb52effd1a267fa3602 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.component.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input } from '@angular/core'; +import { twMerge } from 'tailwind-merge'; +import { iconVariants, IconVariants } from '../iconVariants'; + +@Component({ + selector: 'ods-account-circle-icon', + standalone: true, + imports: [CommonModule], + template: `<svg + viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg" + [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]" + aria-hidden="true" + > + <path + d="M12.75 2C7.23 2 2.75 6.48 2.75 12C2.75 17.52 7.23 22 12.75 22C18.27 22 22.75 17.52 22.75 12C22.75 6.48 18.27 2 12.75 2ZM7.82 18.28C8.25 17.38 10.87 16.5 12.75 16.5C14.63 16.5 17.26 17.38 17.68 18.28C16.32 19.36 14.61 20 12.75 20C10.89 20 9.18 19.36 7.82 18.28ZM19.11 16.83C17.68 15.09 14.21 14.5 12.75 14.5C11.29 14.5 7.82 15.09 6.39 16.83C5.37 15.49 4.75 13.82 4.75 12C4.75 7.59 8.34 4 12.75 4C17.16 4 20.75 7.59 20.75 12C20.75 13.82 20.13 15.49 19.11 16.83ZM12.75 6C10.81 6 9.25 7.56 9.25 9.5C9.25 11.44 10.81 13 12.75 13C14.69 13 16.25 11.44 16.25 9.5C16.25 7.56 14.69 6 12.75 6ZM12.75 11C11.92 11 11.25 10.33 11.25 9.5C11.25 8.67 11.92 8 12.75 8C13.58 8 14.25 8.67 14.25 9.5C14.25 10.33 13.58 11 12.75 11Z" + /> + </svg>`, +}) +export class AccountCircleIconComponent { + @Input() size: IconVariants['size'] = 'medium'; + @Input() class: string = ''; + + readonly iconVariants = iconVariants; + readonly twMerge = twMerge; +} diff --git a/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..46eae30d492ba7cee189fb67b1f5c63e6f69ba51 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/account-circle-icon/account-circle-icon.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/angular'; + +import { AccountCircleIconComponent } from './account-circle-icon.component'; + +const meta: Meta<AccountCircleIconComponent> = { + title: 'Icons/Account circle icon', + component: AccountCircleIconComponent, + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<AccountCircleIconComponent>; + +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: 'medium' }, + }, + }, + }, +};