OZG-7161 Add styling

alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-link/dropdown-menu-link.component.ts

 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>`,
 })

alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.spec.ts

+/*
+ * 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();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.component.ts

+/*
+ * 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;
+}

alfa-client/libs/design-system/src/lib/icons/open-link-icon/open-link-icon.stories.ts

+/*
+ * 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' },
+      },
+    },
+  },
+};

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
       )
     "

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"]