OZG-5590 OZG-5594 update icons

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

@@ -14,6 +14,37 @@
       <nav>NAV</nav>
     </div>
     <main class="flex-auto bg-background-50 p-6">
+      <div class="w-96">
+        <ods-attachment-container>
+          <ods-attachment
+            documentName="Mein_2Bescheid.pdf"
+            description="234 kB"
+            fileType="pdf"
+            isLoading="true"
+          >
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.xml" description="234 kB" fileType="xml">
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.xml" description="234 kB" fileType="image">
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.doc" description="234 kB" fileType="doc">
+          </ods-attachment>
+          <ods-attachment documentName="Mein_Bescheid.doc" description="234 kB" fileType="doc">
+          </ods-attachment>
+          <ods-attachment
+            documentName="Mein_Bescheid.doc"
+            description="234 kB"
+            fileType="exclamation"
+          >
+          </ods-attachment>
+          <ods-attachment
+            documentName="Katzenanmeldung_1231231_eingsdfsdsdfdsfdsfsdfang.pdf"
+            description="234 kB"
+          >
+          </ods-attachment>
+        </ods-attachment-container>
+      </div>
+
       <form id="antrag_bescheiden_form" [formGroup]="exampleForm">
         <div class="my-10 flex gap-8">
           <ods-radio-button-card

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

@@ -5,8 +5,10 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import {
   AttachmentComponent,
+  AttachmentContainerComponent,
   ButtonCardComponent,
   ButtonComponent,
+  FileIconComponent,
   FileUploadButtonComponent,
   IconComponent,
   RadioButtonCardComponent,
@@ -23,6 +25,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
   imports: [
     CommonModule,
     AttachmentComponent,
+    AttachmentContainerComponent,
     ButtonComponent,
     ButtonCardComponent,
     FileUploadButtonComponent,
@@ -36,6 +39,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
     ReactiveFormsModule,
     IconComponent,
     SpinnerIconComponent,
+    FileIconComponent,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',

alfa-client/libs/binary-file-shared/src/lib/binary-file.util.ts

@@ -9,15 +9,15 @@ export function getBinaryFiles(
 }
 
 export enum BinaryFileIcon {
-  'application/pdf' = 'file-pdf',
-  'application/json' = 'file-json',
-  'application/msword' = 'file-doc',
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document' = 'file-doc',
-  'application/xml' = 'file-xml',
-  'text/xml' = 'file-xml',
-  'image/apng' = 'file-image',
-  'image/gif' = 'file-image',
-  'image/jpeg' = 'file-image',
-  'image/png' = 'file-image',
-  'image/svg+xml' = 'file-image',
+  'application/pdf' = 'pdf',
+  'application/json' = 'json',
+  'application/msword' = 'doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document' = 'doc',
+  'application/xml' = 'xml',
+  'text/xml' = 'xml',
+  'image/apng' = 'image',
+  'image/gif' = 'image',
+  'image/jpeg' = 'image',
+  'image/png' = 'image',
+  'image/svg+xml' = 'image',
 }

alfa-client/libs/binary-file/src/lib/binary-file.module.ts

@@ -27,6 +27,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import {
   AttachmentComponent,
+  AttachmentContainerComponent,
   CloseIconComponent,
   IconComponent,
   SpinnerIconComponent,
@@ -45,6 +46,7 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver
     UiModule,
     TechSharedModule,
     AttachmentComponent,
+    AttachmentContainerComponent,
     IconComponent,
     SpinnerIconComponent,
     CloseIconComponent,

alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2-container.component.html

+<ods-attachment-container>
   <alfa-binary-file2
     [attr.data-test-id]="(file.name | convertForDataTest) + '-file-item'"
     [file]="file"
@@ -10,3 +11,4 @@
     (getDownloadToken)="getDownloadToken()"
   >
   </alfa-binary-file2>
+</ods-attachment-container>

alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html

 <ods-attachment
   [documentName]="file.name"
   [description]="file.size | fileSizePlain"
+  [fileType]="getIconType(file.contentType)"
   (click)="downloadFile()"
   [attr.aria-label]="'Anhang: Dateiname: ' + file.name"
+  [isLoading]="isLoading"
 >
-  <ods-spinner-icon spinner *ngIf="isLoading" size="xl" class="mr-3" />
-  <ods-icon
-    icon
-    [name]="getIconType(file.contentType)"
-    class="mr-3 size-10 fill-primary"
-  ></ods-icon>
   <button
     close
     *ngIf="deletable"

alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts

@@ -13,7 +13,6 @@ import { isEmpty, isNil } from 'lodash-es';
 @Component({
   selector: 'alfa-binary-file2',
   templateUrl: './binary-file2.component.html',
-  styles: [':host {@apply flex flex-grow}'],
 })
 export class BinaryFile2Component {
   @Input() file: BinaryFileResource;

alfa-client/libs/design-system/src/index.ts

+export * from './lib/attachment-container/attachment-container.component';
 export * from './lib/attachment/attachment.component';
 export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
@@ -8,6 +9,7 @@ export * from './lib/icons/attachment-icon/attachment-icon.component';
 export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
 export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
 export * from './lib/icons/close-icon/close-icon.component';
+export * from './lib/icons/file-icon/file-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';
 export * from './lib/icons/spinner-icon/spinner-icon.component';

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AttachmentContainerComponent } from './attachment-container.component';
+
+describe('AttachmentContainerComponent', () => {
+  let component: AttachmentContainerComponent;
+  let fixture: ComponentFixture<AttachmentContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AttachmentContainerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttachmentContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ods-attachment-container',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div class="mb-6 block rounded-md border border-black/25 shadow">
+    <ng-content></ng-content>
+  </div>`,
+})
+export class AttachmentContainerComponent {}

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

-<button
-  class="relative mb-2 flex flex-grow items-center rounded-md border border-black/25 bg-background-100 px-3 pb-3 pt-2 hover:bg-ozggray-200"
->
-  <ng-content select="[spinner]"></ng-content>
-  <ng-content select="[icon]"></ng-content>
-  <div class="flex w-full flex-col items-start">
-    <p class="text-sm text-start">{{ documentName }}</p>
-    <p class="text-xs text-ozggray-600">{{ description }}</p>
-  </div>
-  <ng-content select="[close]"></ng-content>
-</button>

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

 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 
+import { FileIconComponent } from '../icons/file-icon/file-icon.component';
+import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
+
 @Component({
   selector: 'ods-attachment',
   standalone: true,
-  imports: [CommonModule],
-  styles: [':host {@apply flex flex-grow}'],
-  templateUrl: './attachment.component.html',
+  imports: [CommonModule, SpinnerIconComponent, FileIconComponent],
+  styles: [':host {@apply flex border-b border-black/25 last:border-b-0}'],
+  template: `<button
+    class="relative flex w-full gap-3 rounded-md border bg-background-100 px-3 py-2 last:border-none hover:bg-ozggray-200"
+  >
+    <div class="flex-shrink">
+      <ods-file-icon *ngIf="!isLoading" [fileType]="fileType" size="large" />
+      <ods-spinner-icon *ngIf="isLoading" size="lg" />
+    </div>
+    <div class="flex grow flex-col items-start break-all text-text">
+      <p class="text-start text-sm">{{ documentName }}</p>
+      <p class="text-xs text-ozggray-600">{{ description }}</p>
+    </div>
+    <ng-content select="[close]"></ng-content>
+  </button>`,
 })
 export class AttachmentComponent {
   @Input() documentName!: string;
   @Input() description = '';
+  @Input() fileType!: string;
+  @Input() isLoading: boolean = false;
 }

alfa-client/libs/design-system/src/lib/icons/IconClasses.ts

@@ -18,7 +18,7 @@ export const iconVariants = cva('', {
       pdf: 'fill-pdf',
       primary: 'fill-primary',
       spinner: 'fill-primary text-gray-200 dark:text-gray-600',
-      xml: 'fill-ozggray-300'
+      xml: 'fill-ozggray-300',
     },
   },
 });

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

 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { VariantProps, cva } from 'class-variance-authority';
 
-import { IconVariants, iconVariants } from '../IconClasses';
+import { SpinnerIconComponent } from '../spinner-icon/spinner-icon.component';
+
+const fileiconVariants = cva('', {
+  variants: {
+    fileType: {
+      doc: 'fill-doc',
+      image: 'fill-ozggray-800',
+      json: 'fill-ozggray-300',
+      pdf: 'fill-pdf',
+      xml: 'fill-ozggray-300',
+      exclamation: 'fill-warning',
+      loading: 'fill-warning',
+    },
+    size: {
+      small: 'w-4 h-5',
+      large: 'w-8 h-10',
+    },
+  },
+  defaultVariants: {
+    size: 'large',
+    fileType: 'xml',
+  },
+});
+type FileiconVariants = VariantProps<typeof fileiconVariants>;
 
 @Component({
   selector: 'ods-file-icon',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, SpinnerIconComponent],
   template: `<svg
     xmlns="http://www.w3.org/2000/svg"
-    [ngClass]="iconVariants({ size, color })"
+    [ngClass]="fileiconVariants({ size, fileType })"
     viewBox="0 0 32 40"
     aria-hidden="true"
     fill="none"
@@ -18,7 +42,8 @@ import { IconVariants, iconVariants } from '../IconClasses';
       d="M32 12L20 0H4C1.8 0 0.0200005 1.8 0.0200005 4L0 36C0 38.2 1.78 40 3.98 40H28C30.2 40 32 38.2 32 36V12ZM28 36H4V4H18V14H28V36Z"
     />
     <path d="M18.2731 2.85965H2.85642V37.1454H29.285V13.5739H18.2731V2.85965Z" />
-    <g [ngSwitch]="type">
+
+    <g [ngSwitch]="fileType">
       <path
         *ngSwitchCase="'pdf'"
         d="M5.91553 24.634V16.634H9.07178C9.67855 16.634 10.1955 16.7499 10.6226 16.9817C11.0496 17.2109 11.3752 17.5299 11.5991 17.9387C11.8257 18.345 11.939 18.8137 11.939 19.345C11.939 19.8762 11.8244 20.345 11.5952 20.7512C11.366 21.1575 11.034 21.4739 10.5991 21.7004C10.1668 21.927 9.64339 22.0403 9.02881 22.0403H7.01709V20.6848H8.75537C9.08089 20.6848 9.34912 20.6288 9.56006 20.5168C9.7736 20.4023 9.93245 20.2447 10.0366 20.0442C10.1434 19.8411 10.1968 19.608 10.1968 19.345C10.1968 19.0793 10.1434 18.8476 10.0366 18.6497C9.93245 18.4491 9.7736 18.2942 9.56006 18.1848C9.34652 18.0728 9.07568 18.0168 8.74756 18.0168H7.60693V24.634H5.91553ZM15.8735 24.634H13.0376V16.634H15.897C16.7017 16.634 17.3944 16.7942 17.9751 17.1145C18.5558 17.4322 19.0024 17.8892 19.3149 18.4856C19.63 19.0819 19.7876 19.7955 19.7876 20.6262C19.7876 21.4596 19.63 22.1757 19.3149 22.7747C19.0024 23.3736 18.5532 23.8333 17.9673 24.1536C17.384 24.4739 16.686 24.634 15.8735 24.634ZM14.729 23.1848H15.8032C16.3032 23.1848 16.7238 23.0963 17.0649 22.9192C17.4087 22.7395 17.6665 22.4622 17.8384 22.0872C18.0129 21.7096 18.1001 21.2226 18.1001 20.6262C18.1001 20.0351 18.0129 19.552 17.8384 19.177C17.6665 18.802 17.41 18.526 17.0688 18.3489C16.7277 18.1718 16.3071 18.0833 15.8071 18.0833H14.729V23.1848ZM21.0405 24.634V16.634H26.3374V18.0286H22.7319V19.9348H25.9858V21.3293H22.7319V24.634H21.0405Z"
@@ -53,9 +78,10 @@ import { IconVariants, iconVariants } from '../IconClasses';
   </svg>`,
 })
 export class FileIconComponent {
-  @Input() type: 'pdf' | 'doc' | 'image' | 'xml' | 'exclamation' | 'json' = 'pdf';
-  @Input() size: IconVariants['size'] = 'xl';
-  @Input() color: IconVariants['color'] = 'spinner';
+  // @Input() type: 'pdf' | 'doc' | 'image' | 'xml' | 'exclamation' | 'json' = 'pdf';
+  @Input() fileType: FileiconVariants['fileType'];
+  @Input() size: FileiconVariants['size'];
+  @Input() isLoading: boolean = false;
 
-  iconVariants = iconVariants;
+  fileiconVariants = fileiconVariants;
 }

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

@@ -7,6 +7,7 @@ import { IconVariants, iconVariants } from '../IconClasses';
   selector: 'ods-spinner-icon',
   standalone: true,
   imports: [NgClass],
+  styles: [':host {@apply flex}'],
   template: `<svg
       xmlns="http://www.w3.org/2000/svg"
       [ngClass]="iconVariants({ size, color })"