diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index 590765895bf525a4794b12c0c7a02a729be8a92d..bea7dd92b8c992da24b67e34dbaeca1fa667600e 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/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'; diff --git a/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts b/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..3ddfc1899659b7c2723656a624184e9f989930e6 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/link/link.component.spec.ts @@ -0,0 +1,21 @@ +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(); + }); +}); 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 new file mode 100644 index 0000000000000000000000000000000000000000..104c43202797efeea26483abec9968f0c8a17247 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/link/link.component.ts @@ -0,0 +1,19 @@ +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; +} diff --git a/alfa-client/libs/design-system/src/lib/link/link.stories.ts b/alfa-client/libs/design-system/src/lib/link/link.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..f4cad5258e5bc811593066f13a2fa7b844dbcd58 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/link/link.stories.ts @@ -0,0 +1,50 @@ +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>`, + }), +};