From c6a546f345e0a55c0ff8a7a63e65083cb32d993b Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 7 Feb 2025 09:49:25 +0100
Subject: [PATCH] OZG-7474 Add arrow left icon
---
alfa-client/libs/design-system/src/index.ts | 1 +
.../arrow-left-icon.component.spec.ts | 21 +++++++++++++++
.../arrow-left-icon.component.ts | 25 +++++++++++++++++
.../arrow-left.icon.stories.ts | 27 +++++++++++++++++++
4 files changed, 74 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left.icon.stories.ts
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 638624f647..67b4390634 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -45,6 +45,7 @@ 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/arrow-left-icon/arrow-left-icon.component';
export * from './lib/icons/attachment-icon/attachment-icon.component';
export * from './lib/icons/back-arrow-icon/back-arrow-icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.spec.ts
new file mode 100644
index 0000000000..e80eb6b7be
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ArrowLeftIconComponent } from './arrow-left-icon.component';
+
+describe('ArrowLeftIconComponent', () => {
+ let component: ArrowLeftIconComponent;
+ let fixture: ComponentFixture<ArrowLeftIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ArrowLeftIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ArrowLeftIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.ts
new file mode 100644
index 0000000000..1dd1c837d2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left-icon.component.ts
@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-arrow-left-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="M20.75 11H8.58L14.17 5.41L12.75 4L4.75 12L12.75 20L14.16 18.59L8.58 13H20.75V11Z" />
+ </svg>`,
+})
+export class ArrowLeftIconComponent {
+ @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/arrow-left-icon/arrow-left.icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left.icon.stories.ts
new file mode 100644
index 0000000000..09bd3cd799
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/arrow-left-icon/arrow-left.icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { ArrowLeftIconComponent } from './arrow-left-icon.component';
+
+const meta: Meta<ArrowLeftIconComponent> = {
+ title: 'Icons/Arrow left icon',
+ component: ArrowLeftIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<ArrowLeftIconComponent>;
+
+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