OZG-7078 OZG-7202 Add ods-link component

alfa-client/libs/design-system/src/index.ts

@@ -43,6 +43,7 @@ export * from './lib/icons/user-icon/user-icon.component';
 export * from './lib/icons/users-icon/users-icon.component';
 export * from './lib/instant-search/instant-search/instant-search.component';
 export * from './lib/instant-search/instant-search/instant-search.model';
+export * from './lib/link/link.component';
 export * from './lib/list/list-item/list-item.component';
 export * from './lib/list/list.component';
 export * from './lib/navbar/nav-item/nav-item.component';

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LinkComponent } from './link.component';
+
+describe('LinkComponent', () => {
+  let component: LinkComponent;
+  let fixture: ComponentFixture<LinkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LinkComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+@Component({
+  selector: 'ods-link',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<a [target]="openInNewTab ? '_blank' : '_self'" [href]="url" [class]="twMerge('text-text outline-focus', class)">
+    <ng-content />
+  </a>`,
+})
+export class LinkComponent {
+  @Input({ required: true }) url!: string;
+  @Input() openInNewTab: boolean = false;
+  @Input() class: string = '';
+
+  readonly twMerge = twMerge;
+}

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

+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+import { AccessibilityIconComponent } from '../icons/accessibility-icon/accessibility-icon.component';
+import { LinkComponent } from './link.component';
+
+const meta: Meta<LinkComponent> = {
+  title: 'Link',
+  component: LinkComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [LinkComponent, AccessibilityIconComponent],
+    }),
+  ],
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<LinkComponent>;
+
+export const Default: Story = {
+  args: {
+    url: 'https://www.bundestag.de/',
+    openInNewTab: true,
+  },
+  argTypes: {
+    url: { description: 'Link to external url' },
+    openInNewTab: { description: 'Should the link be opened in new tab' },
+    class: { description: 'CSS/Tailwind class' },
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-link ${argsToTemplate(args)}>
+      Link with text
+    </ods-link>`,
+  }),
+};
+
+export const WithIcon: Story = {
+  args: {
+    url: 'https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html',
+    openInNewTab: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-link ${argsToTemplate(args)}>
+      <ods-accessibility-icon size="large" />
+    </ods-link>`,
+  }),
+};