diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index 467032047c06e4ae9c4a6e3948cc13a704b8761d..e7ae662925633f6c656ce0c64ba919debf94b774 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/alfa-client/libs/design-system/src/index.ts @@ -52,6 +52,7 @@ export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component'; export * from './lib/icons/check-circle-icon/check-circle-icon.component'; export * from './lib/icons/check-icon/check-icon.component'; export * from './lib/icons/close-icon/close-icon.component'; +export * from './lib/icons/delete-icon/delete-icon.component'; export * from './lib/icons/delete-vorgang-finally-icon/delete-vorgang-finally-icon.component'; export * from './lib/icons/discard-vorgang-icon/discard-vorgang-icon.component'; export * from './lib/icons/edit-icon/edit-icon.component'; diff --git a/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..354449bdfb0652606ec23dee7b970a5d793fd292 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { DeleteIconComponent } from './delete-icon.component'; + +describe('DeleteIconComponent', () => { + let component: DeleteIconComponent; + let fixture: ComponentFixture<DeleteIconComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DeleteIconComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(DeleteIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..fc768c6b8e61042be52f57786907a907415d2b3d --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-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-delete-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="M6.75 19C6.75 20.1 7.65 21 8.75 21H16.75C17.85 21 18.75 20.1 18.75 19V7H6.75V19ZM8.75 9H16.75V19H8.75V9ZM16.25 4L15.25 3H10.25L9.25 4H5.75V6H19.75V4H16.25Z" + /> + </svg> `, +}) +export class DeleteIconComponent { + @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/delete-icon/delete-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..4602289bc57c1be551e4bf2ba29003ab4bd7de31 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/angular'; + +import { DeleteIconComponent } from './delete-icon.component'; + +const meta: Meta<DeleteIconComponent> = { + title: 'Icons/Delete icon', + component: DeleteIconComponent, + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<DeleteIconComponent>; + +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' }, + }, + }, + }, +};