diff --git a/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.ts b/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.ts index 2a25cd22e5df3e74e404a3fd986d737b29ab5a2c..98346f3903e1cff4b363c5f4f4dc49243ce84c7d 100644 --- a/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.ts +++ b/alfa-client/libs/design-component/src/lib/routing-button/routing-button.component.ts @@ -1,22 +1,26 @@ import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; import { RouterLink } from '@angular/router'; +import { ButtonVariants, buttonVariants } from '@ods/system'; @Component({ selector: 'ods-routing-button', standalone: true, imports: [CommonModule, RouterLink], host: { class: 'block' }, - template: `<a - [routerLink]="'/' + linkPath" - [attr.data-test-id]="dataTestId" - class="block min-h-9 w-fit min-w-32 rounded bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm outline-focus hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" - > - {{ text }} + template: `<a [routerLink]="'/' + linkPath" [attr.data-test-id]="dataTestId" [ngClass]="buttonVariants({ size, variant })"> + <ng-content select="[icon]" /> + @if (text) { + <p class="flex-grow">{{ text }}</p> + } </a>`, }) export class RoutingButtonComponent { @Input() linkPath: string; @Input() text: string; @Input() dataTestId: string; + @Input() variant: ButtonVariants['variant']; + @Input() size: ButtonVariants['size']; + + readonly buttonVariants = buttonVariants; } diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts index 02456d40e38e340ae4bb846f68533173d12d047b..15a9b7efdc261b462f3dade0f93b2a6902e36507 100644 --- a/alfa-client/libs/design-system/src/lib/button/button.component.ts +++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts @@ -81,7 +81,7 @@ export const buttonVariants = cva( ], }, ); -type ButtonVariants = VariantProps<typeof buttonVariants>; +export type ButtonVariants = VariantProps<typeof buttonVariants>; @Component({ selector: 'ods-button',