OZG-5981 OZG-6091 Add barrier free design

alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html

@@ -27,7 +27,6 @@
   <ods-attachment-wrapper [title]="title" data-test-id="file-list">
     <alfa-download-archive-file-button-container
       *ngIf="archiveDownloadUri"
-      class="p-1"
       data-test-class="download-archive-file-button"
       [downloadUri]="archiveDownloadUri"
       action-buttons

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

+import { createEmptyStateResource } from '@alfa-client/tech-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DownloadButtonComponent } from './download-button.component';
 
@@ -18,4 +19,30 @@ describe('DownloadButtonComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('isLoading', () => {
+    it('should return false', () => {
+      component.stateResource = createEmptyStateResource();
+
+      const isLoading: boolean = component.isLoading;
+
+      expect(isLoading).toBeFalsy();
+    });
+
+    it('should return true if stateResource is loading', () => {
+      component.stateResource = createEmptyStateResource(true);
+
+      const isLoading: boolean = component.isLoading;
+
+      expect(isLoading).toBeTruthy();
+    });
+
+    it('should return true if stateResource is reloading', () => {
+      component.stateResource = { ...createEmptyStateResource(), reload: true };
+
+      const isLoading: boolean = component.isLoading;
+
+      expect(isLoading).toBeTruthy();
+    });
+  });
 });

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

+import { CommandResource } from '@alfa-client/command-shared';
+import { StateResource } from '@alfa-client/tech-shared';
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ButtonComponent, SaveIconComponent, iconVariants } from '@ods/system';
@@ -10,9 +12,10 @@ type IconVariants = VariantProps<typeof iconVariants>;
   standalone: true,
   imports: [CommonModule, ButtonComponent, SaveIconComponent],
   template: `<ods-button
-    size="fit"
-    variant="onlyIcon"
     [dataTestId]="dataTestId"
+    variant="icon"
+    size="fit"
+    [isLoading]="isLoading"
     (click)="clickEmitter.emit()"
   >
     <ods-save-icon icon [size]="size" class="fill-text"></ods-save-icon>
@@ -21,6 +24,11 @@ type IconVariants = VariantProps<typeof iconVariants>;
 export class DownloadButtonComponent {
   @Input() dataTestId: string = '';
   @Input() size: IconVariants['size'] = 'small';
+  @Input() set stateResource(resource: StateResource<CommandResource>) {
+    this.isLoading = resource.loading || resource.reload;
+  }
 
   @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  isLoading: boolean = false;
 }

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

@@ -9,7 +9,7 @@ import { Component, Input } from '@angular/core';
     ':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">
-      <p class="text-sm font-medium">{{ title }}</p>
+      <h3 class="text-sm font-medium text-text">{{ title }}</h3>
       <ng-content select="[action-buttons]"></ng-content>
     </div>
     <ng-content></ng-content>`,

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

@@ -12,16 +12,15 @@ 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',
-        onlyIcon: '',
+        icon: 'hover:rounded-full hover:bg-background-200',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',
-        fit: 'w-fit h-fit p-0',
+        fit: 'h-fit w-fit p-2',
       },
     },
     defaultVariants: {
       variant: 'primary',
-      size: 'medium',
     },
   },
 );

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

@@ -55,8 +55,7 @@ export const IsLoading: Story = {
 
 export const OnlyIcon: Story = {
   args: {
-    variant: 'onlyIcon',
-    size: 'fit',
+    variant: 'icon',
   },
   render: (args) => ({
     props: args,

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-dateien-container/vorgang-detail-dateien-container.component.html

-<div class="flex flex-col gap-6 p-3 xl:flex-row">
-  <ng-container *ngIf="representationListStateResource$ | async as representationListStateResource">
+<div class="flex w-full flex-col gap-6 py-4 xl:flex-row">
+  <div class="flex-1">
+    <ng-container
+      *ngIf="representationListStateResource$ | async as representationListStateResource"
+    >
       <alfa-vertical-binary-file-list
         *ngIf="representationListStateResource.resource"
-      class="flex-1"
         title="Antrag"
         data-test-id="representation-list"
         [binaryFileListStateResource]="representationListStateResource"
@@ -10,10 +12,11 @@
       >
       </alfa-vertical-binary-file-list>
     </ng-container>
+  </div>
+  <div class="flex-1">
     <ng-container *ngIf="attachmentListStateResource$ | async as attachmentListStateResource">
       <alfa-vertical-binary-file-list
         *ngIf="attachmentListStateResource.resource"
-      class="flex-1"
         title="Anhänge"
         data-test-id="attachment-list"
         [binaryFileListStateResource]="attachmentListStateResource"
@@ -23,3 +26,4 @@
       </alfa-vertical-binary-file-list>
     </ng-container>
   </div>
+</div>