From 83973b2862eefd40299e50fec3c88f211b52cece Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Wed, 29 Jan 2025 11:23:23 +0100
Subject: [PATCH] OZG-7161 Add styling
---
.../dropdown-menu-link.component.ts | 11 ++--
.../open-link-icon.component.spec.ts | 44 ++++++++++++++++
.../open-link-icon.component.ts | 49 ++++++++++++++++++
.../open-link-icon/open-link-icon.stories.ts | 50 +++++++++++++++++++
.../src/lib/link/link.component.ts | 2 +-
alfa-client/tsconfig.base.json | 4 +-
6 files changed, 152 insertions(+), 8 deletions(-)
create mode 100644 alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.spec.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts
create mode 100644 alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.stories.ts
diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link/dropdown-menu-link.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link/dropdown-menu-link.component.ts
index 79dd738778..0e58ea4b29 100644
--- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link/dropdown-menu-link.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link/dropdown-menu-link.component.ts
@@ -1,15 +1,16 @@
import { Component, Input } from '@angular/core';
-import { AttachmentIconComponent, LinkComponent } from '@ods/system';
+import { LinkComponent } from '@ods/system';
+import { OpenLinkIconComponent } from '../../icons/open-link-icon/open-link-icon.component';
@Component({
selector: 'ods-dropdown-menu-link',
standalone: true,
- imports: [LinkComponent, AttachmentIconComponent],
+ imports: [LinkComponent, OpenLinkIconComponent],
styles: [':host {@apply first:mt-2}'],
template: ` <ods-link [url]="url">
- <div class="mb-2 block flex gap-4 border-b border-b-grayborder border-t-grayborder bg-whitetext pb-4 pl-4 pt-4">
- <ods-attachment-icon />
- <div class="text-primary">{{ text }}</div>
+ <div class="flex items-center gap-2 px-4 py-3">
+ <p class="text-primary">{{ text }}</p>
+ <ods-open-link-icon size="small" />
</div>
</ods-link>`,
})
diff --git a/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.spec.ts
new file mode 100644
index 0000000000..391bb8a99d
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OpenLinkIconComponent } from './open-link-icon.component';
+
+describe('OpenLinkIconComponent', () => {
+ let component: OpenLinkIconComponent;
+ let fixture: ComponentFixture<OpenLinkIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OpenLinkIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OpenLinkIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts
new file mode 100644
index 0000000000..3e0eac83af
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-open-link-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ [ngClass]="twMerge(iconVariants({ size }), 'fill-primary', class)"
+ >
+ <path
+ d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h7v2H5v14h14v-7h2v7c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm4.7-5.3-1.4-1.4L17.6 5H14V3h7v7h-2V6.4l-9.3 9.3Z"
+ />
+ </svg>`,
+})
+export class OpenLinkIconComponent {
+ @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/open-link-icon/open-link-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.stories.ts
new file mode 100644
index 0000000000..8941a073fa
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-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 { OpenLinkIconComponent } from './open-link-icon.component';
+
+const meta: Meta<OpenLinkIconComponent> = {
+ title: 'Icons/Open link icon',
+ component: OpenLinkIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<OpenLinkIconComponent>;
+
+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/link/link.component.ts b/alfa-client/libs/design-system/src/lib/link/link.component.ts
index 3331d0c65b..91b0976289 100644
--- a/alfa-client/libs/design-system/src/lib/link/link.component.ts
+++ b/alfa-client/libs/design-system/src/lib/link/link.component.ts
@@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge';
[href]="url"
[class]="
twMerge(
- 'block rounded border-2 border-transparent text-text outline-2 outline-offset-2 outline-focus hover:border-primary-600 focus-visible:border-transparent focus-visible:outline',
+ 'block rounded border-2 border-transparent bg-whitetext text-text hover:border-primary-600 focus:bg-neutral-200 focus:outline-none dark:focus:bg-neutral-600',
class
)
"
diff --git a/alfa-client/tsconfig.base.json b/alfa-client/tsconfig.base.json
index 645b71e1ce..6850f74e4e 100644
--- a/alfa-client/tsconfig.base.json
+++ b/alfa-client/tsconfig.base.json
@@ -18,7 +18,6 @@
"paths": {
"@admin-client/configuration": ["libs/admin/configuration/src/index.ts"],
"@admin-client/configuration-shared": ["libs/admin/configuration-shared/src/index.ts"],
- "@admin/keycloak-shared": ["libs/admin/keycloak-shared/src/index.ts"],
"@admin-client/organisations-einheit": ["libs/admin/organisations-einheit/src/index.ts"],
"@admin-client/organisations-einheit-shared": ["libs/admin/organisations-einheit-shared/src/index.ts"],
"@admin-client/postfach": ["libs/admin/postfach/src/index.ts"],
@@ -28,6 +27,7 @@
"@admin-client/statistik": ["libs/admin/statistik/src/index.ts"],
"@admin-client/user": ["libs/admin/user/src/index.ts"],
"@admin-client/user-shared": ["libs/admin/user-shared/src/index.ts"],
+ "@admin/keycloak-shared": ["libs/admin/keycloak-shared/src/index.ts"],
"@alfa-client/api-root-shared": ["libs/api-root-shared/src/index.ts"],
"@alfa-client/app-shared": ["libs/app-shared/src/index.ts"],
"@alfa-client/bescheid": ["libs/bescheid/src/index.ts"],
@@ -77,7 +77,7 @@
"@alfa-client/zustaendige-stelle-shared": ["libs/zustaendige-stelle-shared/src/index.ts"],
"@authentication": ["libs/authentication/src/index.ts"],
"@ods/component": ["libs/design-component/src/index.ts"],
- "@ods/system": ["libs/design-system/src/index.ts"],
+ "@ods/system": ["libs/design-system/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
--
GitLab