From 2106298188751b6efe35e1112fede5761dfe7b30 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 5 Sep 2024 13:54:22 +0200
Subject: [PATCH] OZG-6108 Add nwe icons for nav items
---
.../mailbox-icon.component.spec.ts | 21 ++++++++++
.../mailbox-icon/mailbox-icon.component.ts | 38 +++++++++++++++++++
.../mailbox-icon/mailbox-icon.stories.ts | 27 +++++++++++++
.../orga-unit-icon.component.spec.ts | 21 ++++++++++
.../orga-unit-icon.component.ts | 29 ++++++++++++++
.../orga-unit-icon/orga-unit-icon.stories.ts | 27 +++++++++++++
6 files changed, 163 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts
new file mode 100644
index 0000000000..6dea03dfe7
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MailboxIconComponent } from './mailbox-icon.component';
+
+describe('MailboxIconComponent', () => {
+ let component: MailboxIconComponent;
+ let fixture: ComponentFixture<MailboxIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [MailboxIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(MailboxIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
new file mode 100644
index 0000000000..84f8f446e5
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
@@ -0,0 +1,38 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-mailbox-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ [ngClass]="twMerge(iconVariants({ size }), 'stroke-text', class)"
+ >
+ <path
+ d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z"
+ stroke="black"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7"
+ stroke="black"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>`,
+})
+export class MailboxIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ readonly iconVariants = iconVariants;
+ readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts
new file mode 100644
index 0000000000..929efe4f35
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MailboxIconComponent } from './mailbox-icon.component';
+
+const meta: Meta<MailboxIconComponent> = {
+ title: 'Icons/Mailbox icon',
+ component: MailboxIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<MailboxIconComponent>;
+
+export const Default: Story = {
+ args: { size: 'medium' },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'full'],
+ description: 'Size of icon. Property "full" means 100%',
+ table: {
+ defaultValue: { summary: 'medium' },
+ },
+ },
+ },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts
new file mode 100644
index 0000000000..81b21beded
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OrgaUnitIconComponent } from './orga-unit-icon.component';
+
+describe('OrgaUnitIconComponent', () => {
+ let component: OrgaUnitIconComponent;
+ let fixture: ComponentFixture<OrgaUnitIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OrgaUnitIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OrgaUnitIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts
new file mode 100644
index 0000000000..43885aef2f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts
@@ -0,0 +1,29 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-orga-unit-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ [ngClass]="twMerge(iconVariants({ size }), 'fill-text', class)"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M3 2.25a.75.75 0 0 0 0 1.5v16.5h-.75a.75.75 0 0 0 0 1.5H15v-18a.75.75 0 0 0 0-1.5H3ZM6.75 19.5v-2.25a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75ZM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 0 1.5h-.75A.75.75 0 0 1 6 6.75ZM6.75 9a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM6 12.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM10.5 6a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75Zm-.75 3.75A.75.75 0 0 1 10.5 9h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM10.5 12a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM16.5 6.75v15h5.25a.75.75 0 0 0 0-1.5H21v-12a.75.75 0 0 0 0-1.5h-4.5Zm1.5 4.5a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Zm.75 2.25a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75v-.008a.75.75 0 0 0-.75-.75h-.008ZM18 17.25a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+ clip-rule="evenodd"
+ />
+ </svg>`,
+})
+export class OrgaUnitIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ readonly iconVariants = iconVariants;
+ readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts
new file mode 100644
index 0000000000..c1c03bf3a6
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { OrgaUnitIconComponent } from './orga-unit-icon.component';
+
+const meta: Meta<OrgaUnitIconComponent> = {
+ title: 'Icons/Orgaunit icon',
+ component: OrgaUnitIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<OrgaUnitIconComponent>;
+
+export const Default: Story = {
+ args: { size: 'medium' },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'full'],
+ description: 'Size of icon. Property "full" means 100%',
+ table: {
+ defaultValue: { summary: 'medium' },
+ },
+ },
+ },
+};
--
GitLab