Cde design system

apps/cde-ui/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 
-import { HeaderComponent } from './components/header/header.component';
 import { ScreenSizeNoticeComponent } from './components/screen-size-notice/screen-size-notice.component';
 
 /** Max width to show screen size notice */
@@ -14,7 +13,7 @@ export const SCREEN_SIZE_NOTICE_MAX_HEIGHT = 832;
  */
 @Component({
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent],
+  imports: [RouterOutlet],
   selector: 'cde-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/cde-ui/src/app/components/file-upload/file-upload.component.html

@@ -1,27 +1,9 @@
-@if (!file && actionNotification()) {
-  <h3 class="action-required">
-    <mat-icon class="alert">settings_alert</mat-icon>
-    {{ actionNotification() }}
-  </h3>
-}
-
 @if (!file && errorMessage()) {
-  <div class="error">
-    <mat-icon class="material-symbols-rounded alert">error</mat-icon>
-    <div class="error-messages">
-      <span class="message">{{ errorMessage() }}</span>
-      <span class="action">{{ errorActionMessage() }}</span>
-    </div>
-  </div>
+  <hra-error-indicator [errors]="[errorMessage(), errorActionMessage()]"></hra-error-indicator>
 }
 
 @if (file && !errorMessage()) {
-  <div class="upload-success">
-    <div class="filename">
-      <span class="column-info-list mat-body-2 file-name">{{ file ? file.name : '' }}</span>
-    </div>
-    <mat-icon class="material-symbols-rounded remove-file" (click)="cancelLoad()">delete</mat-icon>
-  </div>
+  <hra-delete-file-button [fileName]="file.name" (cancelLoad)="cancelLoad()"></hra-delete-file-button>
 } @else {
   <button mat-flat-button class="upload" (click)="fileInput.click()" hraPrimaryButton hraButtonSize="large">
     Upload CSV

apps/cde-ui/src/app/components/file-upload/file-upload.component.scss

@@ -1,55 +1,29 @@
 :host {
-  .upload-success {
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    padding: 0 1rem;
-    background: var(--sys-surface-container);
-    gap: 0.5rem;
-    border-radius: 1rem;
-    font: var(--sys-label-large);
+  // .upload-success {
+  //   height: 2.5rem;
+  //   display: flex;
+  //   align-items: center;
+  //   padding: 0 1rem;
+  //   background: var(--sys-surface-container);
+  //   gap: 0.5rem;
+  //   border-radius: 1rem;
+  //   font: var(--sys-label-large);
 
-    .filename {
-      display: flex;
-    }
+  //   .filename {
+  //     display: flex;
+  //   }
 
-    .file-name {
-      color: var(--sys-primary);
-    }
+  //   .file-name {
+  //     color: var(--sys-primary);
+  //   }
 
-    .remove-file {
-      color: var(--sys-secondary);
-      cursor: pointer;
-    }
-  }
-
-  .error {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 2rem;
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
-    font: var(--sys-label-large);
-    width: fit-content;
+  //   .remove-file {
+  //     color: var(--sys-secondary);
+  //     cursor: pointer;
+  //   }
+  // }
 
-    .error-messages {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .action-required {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+  hra-error-indicator {
     margin-bottom: 2rem;
-    position: relative;
-    left: -3rem;
-
-    mat-icon {
-      width: 2rem;
-      height: 2rem;
-      font-size: 2rem;
-    }
   }
 }

apps/cde-ui/src/app/components/file-upload/file-upload.component.spec.ts

@@ -1,18 +1,11 @@
 import { Injector, OutputEmitterRef, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { render, screen } from '@testing-library/angular';
+import { render } from '@testing-library/angular';
 
 import { FileUploadComponent } from './file-upload.component';
 
 describe('FileUploadComponent', () => {
   const loader = jest.fn();
-  const mockFiles = {
-    0: {
-      name: 'nodes.csv',
-      type: 'text/csv',
-    } as File,
-    length: 1,
-  } as unknown as FileList;
 
   beforeEach(() => {
     loader.mockReturnValue({
@@ -21,29 +14,12 @@ describe('FileUploadComponent', () => {
     });
   });
 
-  it('should load', async () => {
-    const {
-      fixture: { componentInstance: instance },
-    } = await render(FileUploadComponent, {
-      componentInputs: {
-        actionNotification: 'test',
-        accept: 'csv',
-        loader: loader,
-        options: {},
-      },
-    });
-
-    instance.load({ files: mockFiles } as HTMLInputElement);
-    expect(screen.getByText(/test/i)).toBeInTheDocument();
-  });
-
   it('should cancel load', async () => {
     const loadCancelled = jest.fn();
     const {
       fixture: { componentInstance: instance },
     } = await render(FileUploadComponent, {
       componentInputs: {
-        actionNotification: 'test',
         accept: 'csv',
         loader: loader,
         options: {},

apps/cde-ui/src/app/components/file-upload/file-upload.component.ts

@@ -2,7 +2,9 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, Injector, input, output, Type } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { FileLoader, FileLoaderEvent } from '@hra-ui/cde-visualization';
+import { DeleteFileButtonComponent } from '@hra-ui/design-system/delete-file-button';
 import { ButtonModule } from '@hra-ui/design-system/button';
+import { ErrorIndicatorComponent } from '@hra-ui/design-system/error-indicator';
 import { reduce, Subscription } from 'rxjs';
 
 /**
@@ -34,19 +36,16 @@ export type FileLoadError = FileTypeError | FileParseError;
 @Component({
   selector: 'cde-file-upload',
   standalone: true,
-  imports: [CommonModule, MatIconModule, ButtonModule],
+  imports: [CommonModule, MatIconModule, ButtonModule, ErrorIndicatorComponent, DeleteFileButtonComponent],
   templateUrl: './file-upload.component.html',
   styleUrl: './file-upload.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileUploadComponent<T, OptionsT> {
-  /** Notification for action required */
-  readonly actionNotification = input<string>();
-
   /** Upload error message */
-  readonly errorMessage = input<string>();
+  readonly errorMessage = input<string>('');
   /** Upload error action message */
-  readonly errorActionMessage = input<string>();
+  readonly errorActionMessage = input<string>('');
 
   /** Accepted file types */
   readonly accept = input.required<string>();