From b6aab3aed8d3feda7949579115f7a348cdb46887 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Wed, 9 Apr 2025 15:19:28 +0200
Subject: [PATCH] OZG-7773 Add mail-unread icon
---
alfa-client/libs/design-system/src/index.ts | 1 +
.../mail-unread-icon.component.spec.ts | 21 ++++++++
.../mail-unread-icon.component.ts | 26 ++++++++++
.../mail-unread-icon.stories.ts | 50 +++++++++++++++++++
4 files changed, 98 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.stories.ts
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index c17fdb29f5..f2fee23565 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -68,6 +68,7 @@ export * from './lib/icons/help-icon/help-icon.component';
export * from './lib/icons/iconVariants';
export * from './lib/icons/info-icon/info-icon.component';
export * from './lib/icons/logout-icon/logout-icon.component';
+export * from './lib/icons/mail-unread-icon/mail-unread-icon.component';
export * from './lib/icons/mailbox-icon/mailbox-icon.component';
export * from './lib/icons/more-icon/more-icon.component';
export * from './lib/icons/office-icon/office-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.spec.ts
new file mode 100644
index 0000000000..5a3fc54f43
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MailUnreadIconComponent } from './mail-unread-icon.component';
+
+describe('MailUnreadIconComponent', () => {
+ let component: MailUnreadIconComponent;
+ let fixture: ComponentFixture<MailUnreadIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [MailUnreadIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(MailUnreadIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.ts
new file mode 100644
index 0000000000..6808cc85c2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-mail-unread-icon',
+ standalone: true,
+ imports: [CommonModule],
+ template: `<svg
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ [ngClass]="twMerge(iconVariants({ size }), 'fill-text', class)"
+ >
+ <path
+ d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H14.1C14.0333 4.33333 14 4.66667 14 5C14 5.33333 14.0333 5.66667 14.1 6H4L12 11L15.65 8.725C15.8833 8.94167 16.1375 9.12917 16.4125 9.2875C16.6875 9.44583 16.975 9.58333 17.275 9.7L12 13L4 8V18H20V9.9C20.3833 9.81667 20.7417 9.7 21.075 9.55C21.4083 9.4 21.7167 9.21667 22 9V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM19 8C18.1667 8 17.4583 7.70833 16.875 7.125C16.2917 6.54167 16 5.83333 16 5C16 4.16667 16.2917 3.45833 16.875 2.875C17.4583 2.29167 18.1667 2 19 2C19.8333 2 20.5417 2.29167 21.125 2.875C21.7083 3.45833 22 4.16667 22 5C22 5.83333 21.7083 6.54167 21.125 7.125C20.5417 7.70833 19.8333 8 19 8Z"
+ />
+ </svg>`,
+})
+export class MailUnreadIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ protected readonly iconVariants = iconVariants;
+ protected readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.stories.ts
new file mode 100644
index 0000000000..971a3b6e86
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mail-unread-icon/mail-unread-icon.stories.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MailUnreadIconComponent } from './mail-unread-icon.component';
+
+const meta: Meta<MailUnreadIconComponent> = {
+ title: 'Icons/Mail unread icon',
+ component: MailUnreadIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<MailUnreadIconComponent>;
+
+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