OZG-5981 OZG-6091 Fix button size

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

@@ -8,8 +8,8 @@ import { Component, Input } from '@angular/core';
   styles: [
     ':host {@apply flex flex-col overflow-hidden rounded-md shadow shadow-grayborder border border-grayborder empty:hidden}',
   ],
-  template: `<div class="flex items-center justify-between p-3" *ngIf="title">
-      <h3 class="text-sm font-medium text-text">{{ title }}</h3>
+  template: `<div class="flex items-center justify-between px-3 py-2">
+      <h4 *ngIf="title" class="text-sm font-medium text-text">{{ title }}</h4>
       <ng-content select="[action-buttons]"></ng-content>
     </div>
     <ng-content></ng-content>`,

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

@@ -5,22 +5,23 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
 
 export const buttonVariants = cva(
-  'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ozgblue-800',
+  'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
   {
     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: 'hover:rounded-full hover:bg-background-200',
+        icon: 'border border-transparent hover:border-primary',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',
-        fit: 'h-fit w-fit p-2',
+        fit: 'h-fit p-2',
       },
     },
     defaultVariants: {
       variant: 'primary',
+      size: 'medium',
     },
   },
 );

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

@@ -23,6 +23,7 @@ export const Default: Story = {
     text: 'Hello world!',
     isLoading: false,
     variant: 'primary',
+    size: 'medium',
   },
   argTypes: {
     variant: {
@@ -37,6 +38,7 @@ export const WithIcon: Story = {
   args: {
     text: 'I have an icon',
     variant: 'outline',
+    size: 'medium',
   },
   render: (args) => ({
     props: args,
@@ -50,12 +52,14 @@ export const IsLoading: Story = {
   args: {
     text: 'Loading...',
     isLoading: true,
+    size: 'medium',
   },
 };
 
 export const OnlyIcon: Story = {
   args: {
     variant: 'icon',
+    size: 'fit',
   },
   render: (args) => ({
     props: args,

alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts

 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { VariantProps, cva } from 'class-variance-authority';
 
 import { SpinnerIconComponent } from '../spinner-icon/spinner-icon.component';
@@ -76,13 +76,9 @@ type FileiconVariants = VariantProps<typeof fileiconVariants>;
     </g>
   </svg>`,
 })
-export class FileIconComponent implements OnInit {
+export class FileIconComponent {
   @Input() fileType: FileiconVariants['fileType'];
   @Input() size: FileiconVariants['size'];
 
   fileiconVariants = fileiconVariants;
-
-  ngOnInit(): void {
-    console.log(this.fileType);
-  }
 }