OZG-6242 Add ghost variant

alfa-client/libs/bescheid/src/lib/bescheid-wizard-container/bescheid-wizard-container.component.html

@@ -31,7 +31,7 @@
       >
         <ng-container *ngIf="bescheidDraftStateResource$ | async as bescheidStateResource">
           <ods-button
-            variant="icon"
+            variant="ghost"
             size="fit"
             class="absolute right-0 top-0 text-text"
             (clickEmitter)="cancelWizard(bescheidStateResource.resource)"

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

@@ -36,7 +36,7 @@ type IconVariants = VariantProps<typeof iconVariants>;
   imports: [CommonModule, ButtonComponent, SaveIconComponent],
   template: `<ods-button
     [dataTestId]="dataTestId"
-    variant="icon"
+    variant="ghost"
     size="fit"
     spinnerSize="small"
     [isLoading]="isLoading"

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

@@ -30,16 +30,15 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
 
 export const buttonVariants = cva(
   [
-    'flex items-center gap-4 rounded-md disabled:cursor-wait text-sm font-medium box-border',
+    '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',
   ],
   {
     variants: {
       variant: {
         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',
-        icon: 'border border-transparent hover:border-primary',
+        outline: 'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
+        ghost: 'border-2 border-transparent hover:border-primary-hover text-primary',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',
@@ -61,8 +60,8 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   template: `<button
     type="button"
     [ngClass]="buttonVariants({ size, variant })"
-    [disabled]="isLoading"
-    [attr.aria-disabled]="isLoading"
+    [disabled]="isDisabled"
+    [attr.aria-disabled]="isDisabled"
     [attr.aria-label]="text"
     [attr.data-test-id]="dataTestId"
     (click)="clickEmitter.emit()"
@@ -75,6 +74,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 export class ButtonComponent {
   @Input() text: string = '';
   @Input() dataTestId: string = '';
+  @Input() disabled: boolean = false;
   @Input() isLoading: boolean = false;
   @Input() variant: ButtonVariants['variant'];
   @Input() size: ButtonVariants['size'];
@@ -82,5 +82,9 @@ export class ButtonComponent {
 
   @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
-  buttonVariants = buttonVariants;
+  get isDisabled() {
+    return this.disabled || this.isLoading;
+  }
+
+  readonly buttonVariants = buttonVariants;
 }

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

@@ -45,6 +45,7 @@ export const Default: Story = {
   args: {
     text: 'Hello world!',
     isLoading: false,
+    disabled: false,
     variant: 'primary',
     size: 'medium',
     spinnerSize: 'medium',
@@ -55,19 +56,43 @@ export const Default: Story = {
       control: { type: 'radio' },
       table: { defaultValue: { summary: 'primary' } },
     },
+    size: {
+      options: ['medium', 'fit'],
+      control: { type: 'select' },
+      table: { defaultValue: { summary: 'medium' } },
+    },
+    spinnerSize: {
+      description: 'Size of loading spinner',
+      options: ['small', 'medium', 'large', 'extra-large', 'xxl', 'full'],
+      control: { type: 'select' },
+      table: { defaultValue: { summary: 'medium' } },
+    },
+    isLoading: { description: 'Show spinner icon if true' },
   },
 };
 
-export const WithIcon: Story = {
+export const PrimaryWithIcon: Story = {
   args: {
     text: 'I have an icon',
+    variant: 'primary',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-button ${argsToTemplate(args)}>
+      <ods-save-icon icon size="small" class="fill-whitetext" />
+    </ods-button>`,
+  }),
+};
+
+export const SecondaryWithIcon: Story = {
+  args: {
+    text: 'I have an icon too',
     variant: 'outline',
-    size: 'medium',
   },
   render: (args) => ({
     props: args,
     template: `<ods-button ${argsToTemplate(args)}>
-      <ods-save-icon icon size='small'></ods-save-icon>
+      <ods-save-icon icon size="small" />
     </ods-button>`,
   }),
 };
@@ -80,15 +105,36 @@ export const IsLoading: Story = {
   },
 };
 
-export const OnlyIcon: Story = {
+export const GhostIcon: Story = {
+  args: {
+    variant: 'ghost',
+    size: 'fit',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-button ${argsToTemplate(args)}>
+      <ods-save-icon icon size='medium' />
+    </ods-button>`,
+  }),
+};
+
+export const GhostLoadingIcon: Story = {
   args: {
-    variant: 'icon',
+    variant: 'ghost',
     size: 'fit',
+    isLoading: true,
   },
   render: (args) => ({
     props: args,
     template: `<ods-button ${argsToTemplate(args)}>
-      <ods-save-icon icon size='medium'></ods-save-icon>
+      <ods-save-icon icon size='medium' />
     </ods-button>`,
   }),
 };
+
+export const GhostButton: Story = {
+  args: {
+    variant: 'ghost',
+    text: 'I am ghosted',
+  },
+};

alfa-client/libs/zustaendige-stelle/src/lib/edit-zustaendige-stelle-button/edit-zustaendige-stelle-button.component.html

@@ -24,7 +24,7 @@
 
 -->
 <ods-button
-  variant="icon"
+  variant="ghost"
   size="fit"
   data-test-class="edit-zustaendige-stelle-button"
   [dataTestId]="dataTestId"

alfa-client/libs/zustaendige-stelle/src/lib/search-zustaendige-stelle-dialog/search-zustaendige-stelle-dialog.component.html

@@ -26,7 +26,7 @@
 <div class="my-32 flex h-screen flex-col gap-2">
   <div class="flex gap-48 py-6 lg:gap-96">
     <h1 class="text-xl font-bold text-primary">{{ title }}</h1>
-    <ods-button variant="icon" size="fit" (clickEmitter)="closeDialog()" dataTestId="close-search-dialog">
+    <ods-button variant="ghost" size="fit" (clickEmitter)="closeDialog()" dataTestId="close-search-dialog">
       <ods-close-icon class="fill-primary" icon />
     </ods-button>
   </div>