From 5e4c61eb6ea75d28224c972e720e78d95e3cbaa6 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Thu, 13 Feb 2025 14:37:51 +0100
Subject: [PATCH] OZG-7510 OZG-7738 Add delete icon
---
alfa-client/libs/design-system/src/index.ts | 1 +
.../delete-icon/delete-icon.component.spec.ts | 21 +++++++++++++++
.../delete-icon/delete-icon.component.ts | 27 +++++++++++++++++++
.../icons/delete-icon/delete-icon.stories.ts | 27 +++++++++++++++++++
4 files changed, 76 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/delete-icon/delete-icon.stories.ts
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 467032047c..e7ae662925 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 0000000000..354449bdfb
--- /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 0000000000..fc768c6b8e
--- /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 0000000000..4602289bc5
--- /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' },
+ },
+ },
+ },
+};
--
GitLab