diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index ff7c3597c558ebf668c2c7fab101e062065a39da..e030a77354778be905c8b0fcfe3e14ddb6872d8d 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/alfa-client/libs/design-system/src/index.ts @@ -77,6 +77,7 @@ export * from './lib/icons/spinner-icon/spinner-icon.component'; export * from './lib/icons/stamp-icon/stamp-icon.component'; export * from './lib/icons/statistic-icon/statistic-icon.component'; export * from './lib/icons/undo-request-delition-icon/undo-request-deletion-icon.stories'; +export * from './lib/icons/update-icon/update-icon.component'; export * from './lib/icons/user-icon/user-icon.component'; export * from './lib/icons/users-icon/users-icon.component'; export * from './lib/instant-search/instant-search/instant-search.component'; diff --git a/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..d2e3620badccfec4c031b9d6bf8f700cb1e571c0 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { UpdateIconComponent } from './update-icon.component'; + +describe('UpdateIconComponent', () => { + let component: UpdateIconComponent; + let fixture: ComponentFixture<UpdateIconComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [UpdateIconComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(UpdateIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..34e40d8150deb19ab77923d576b6567e87cf2911 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-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-update-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="M21.75 10.12H14.97L17.71 7.3C14.98 4.6 10.56 4.5 7.83 7.2C5.1 9.91 5.1 14.28 7.83 16.99C10.56 19.7 14.98 19.7 17.71 16.99C19.07 15.65 19.75 14.08 19.75 12.1H21.75C21.75 14.08 20.87 16.65 19.11 18.39C15.6 21.87 9.9 21.87 6.39 18.39C2.89 14.92 2.86 9.28 6.37 5.81C9.88 2.34 15.51 2.34 19.02 5.81L21.75 3V10.12ZM13.25 8V12.25L16.75 14.33L16.03 15.54L11.75 13V8H13.25Z" + /> + </svg>`, +}) +export class UpdateIconComponent { + @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/update-icon/update-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..7814dc21f79f972ad09ff1aa1c1a93fc3d59ac98 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/update-icon/update-icon.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/angular'; + +import { UpdateIconComponent } from './update-icon.component'; + +const meta: Meta<UpdateIconComponent> = { + title: 'Icons/Update icon', + component: UpdateIconComponent, + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<UpdateIconComponent>; + +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' }, + }, + }, + }, +};