OZG-5590 OZG-5595 refactor button variants

alfa-client/apps/demo/src/app/app.component.html

@@ -58,10 +58,9 @@
       </form>
       <app-bescheid-dialog-button></app-bescheid-dialog-button>
       <div class="my-4 flex gap-4">
-        <ods-button size="small" text="Button 1" />
+        <ods-button text="Button 1" />
         <ods-button size="medium" [isLoading]="true" text="Button 2" />
-        <ods-button size="small" type="secondary" text="Button 3" />
-        <ods-button size="medium" />
+        <ods-button type="outline" text="Button 3" />
       </div>
       <div class="text-warning">Achtung</div>
       <div class="text-primary">Achtung</div>

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

@@ -10,12 +10,11 @@ const buttonVariants = cva(
     variants: {
       type: {
         primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
-        secondary:
+        outline:
           'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
       },
       size: {
-        small: 'h-9 py-2 px-4',
-        medium: 'h-12 py-3 px-6',
+        medium: 'h-9 py-2 px-4',
       },
     },
     defaultVariants: {
@@ -34,6 +33,8 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
     type="button"
     [ngClass]="buttonVariants({ size, type })"
     [disabled]="isLoading"
+    [attr.aria-disabled]="isLoading"
+    [attr.aria-label]="text"
     (click)="clickEmitter.emit()"
   >
     <ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
@@ -45,7 +46,7 @@ export class ButtonComponent {
   @Input() text: string = '';
   @Input() isLoading: boolean = false;
   @Input() type: ButtonVariants['type'] = 'primary';
-  @Input() size: ButtonVariants['size'] = 'small';
+  @Input() size: ButtonVariants['size'] = 'medium';
 
   @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 

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

@@ -20,20 +20,16 @@ export default meta;
 type Story = StoryObj<ButtonComponent>;
 
 export const Default: Story = {
-  args: { text: 'Hello world!', isLoading: false, type: 'primary', size: 'small' },
+  args: { text: 'Hello world!', isLoading: false, type: 'primary' },
   argTypes: {
     type: {
-      options: ['primary', 'secondary'],
-      control: { type: 'radio' },
-    },
-    size: {
-      options: ['small', 'medium'],
+      options: ['primary', 'outline'],
       control: { type: 'radio' },
     },
   },
 };
 export const WithIcon: Story = {
-  args: { text: 'I have an icon', isLoading: false, type: 'secondary', size: 'medium' },
+  args: { text: 'I have an icon', isLoading: false, type: 'outline' },
   render: (args: ButtonComponent) => ({
     props: args,
     template: `<ods-button ${argsToTemplate(args)}>

alfa-client/package.json

@@ -42,7 +42,8 @@
     "cypress:version": "npx cypress version",
     "cypress:install": "npx cypress install",
     "cypress:open": "npx cypress open --project apps/alfa-e2e",
-    "workspace-generator": "nx workspace-generator"
+    "workspace-generator": "nx workspace-generator",
+    "storybook": "nx storybook design-system"
   },
   "private": true,
   "dependencies": {