OZG-6242 Add destructive option

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

@@ -31,7 +31,7 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
 export const buttonVariants = cva(
   [
     'flex items-center gap-4 rounded-md text-sm font-medium box-border',
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
   ],
   {
     variants: {
@@ -39,8 +39,7 @@ export const buttonVariants = cva(
         primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
         outline:
           'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100 focus-visible:border-background-200',
-        ghost:
-          'border-2 border-transparent hover:border-primary-hover text-primary focus-visible:border-background-200 hover:disabled:border-transparent',
+        ghost: 'border-2 border-transparent hover:enabled:border-primary-hover text-primary focus-visible:border-background-200',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',
@@ -50,12 +49,33 @@ export const buttonVariants = cva(
         false: null,
         true: ['opacity-70', 'cursor-not-allowed'],
       },
+      destructive: {
+        false: 'outline-focus',
+        true: 'outline-error',
+      },
     },
     defaultVariants: {
       variant: 'primary',
       size: 'medium',
       disabled: false,
     },
+    compoundVariants: [
+      {
+        variant: 'primary',
+        destructive: true,
+        class: 'hover:enabled:bg-error/90 bg-error outline-error',
+      },
+      {
+        variant: 'outline',
+        destructive: true,
+        class: '[&]:border-error [&]:text-error',
+      },
+      {
+        variant: 'ghost',
+        destructive: true,
+        class: '[&]:text-error hover:enabled:border-error',
+      },
+    ],
   },
 );
 type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -66,7 +86,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   imports: [CommonModule, SpinnerIconComponent],
   template: `<button
     type="button"
-    [ngClass]="buttonVariants({ size, variant, disabled })"
+    [ngClass]="buttonVariants({ size, variant, disabled, destructive })"
     [disabled]="isDisabled"
     [attr.aria-disabled]="isDisabled"
     [attr.aria-label]="text"
@@ -83,6 +103,7 @@ export class ButtonComponent {
   @Input() dataTestId: string = '';
   @Input() disabled: boolean = false;
   @Input() isLoading: boolean = false;
+  @Input() destructive: boolean = false;
   @Input() variant: ButtonVariants['variant'];
   @Input() size: ButtonVariants['size'];
   @Input() spinnerSize: IconVariants['size'] = 'medium';

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

@@ -46,6 +46,7 @@ export const Default: Story = {
     text: 'Hello world!',
     isLoading: false,
     disabled: false,
+    destructive: false,
     variant: 'primary',
     size: 'medium',
     spinnerSize: 'medium',
@@ -68,6 +69,7 @@ export const Default: Story = {
       table: { defaultValue: { summary: 'medium' } },
     },
     isLoading: { description: 'Show spinner icon if true' },
+    destructive: { description: 'Red version of a button' },
   },
 };