From e07a5da744eb3a6c2cc319005df02941f1bfabd2 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Wed, 28 Aug 2024 11:05:59 +0200
Subject: [PATCH] OZG-6102 Add logout icon
---
alfa-client/libs/design-system/src/index.ts | 1 +
.../logout-icon/logout-icon.component.spec.ts | 21 +++++++++++++++
.../logout-icon/logout-icon.component.ts | 27 +++++++++++++++++++
.../icons/logout-icon/logout-icon.stories.ts | 27 +++++++++++++++++++
4 files changed, 76 insertions(+)
create mode 100644 alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.stories.ts
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 43915a1cbb..75cf45074d 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -19,6 +19,7 @@ export * from './lib/icons/collaboration-icon/collaboration-icon.component';
export * from './lib/icons/exclamation-icon/exclamation-icon.component';
export * from './lib/icons/file-icon/file-icon.component';
export * from './lib/icons/iconVariants';
+export * from './lib/icons/logout-icon/logout-icon.component';
export * from './lib/icons/office-icon/office-icon.component';
export * from './lib/icons/save-icon/save-icon.component';
export * from './lib/icons/search-icon/search-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.spec.ts
new file mode 100644
index 0000000000..480de053d2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LogoutIconComponent } from './logout-icon.component';
+
+describe('LogoutIconComponent', () => {
+ let component: LogoutIconComponent;
+ let fixture: ComponentFixture<LogoutIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [LogoutIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(LogoutIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.ts
new file mode 100644
index 0000000000..030b3a9502
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.component.ts
@@ -0,0 +1,27 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-logout-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ [ngClass]="twMerge(iconVariants({ size }), 'fill-text', class)"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H12V5H5V19H12V21H5ZM16 17L14.625 15.55L17.175 13H9V11H17.175L14.625 8.45L16 7L21 12L16 17Z"
+ />
+ </svg>`,
+})
+export class LogoutIconComponent {
+ @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/logout-icon/logout-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.stories.ts
new file mode 100644
index 0000000000..f09a093d05
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/logout-icon/logout-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { LogoutIconComponent } from './logout-icon.component';
+
+const meta: Meta<LogoutIconComponent> = {
+ title: 'Icons/Logout icon',
+ component: LogoutIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<LogoutIconComponent>;
+
+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