Add file list component

projects/elonkit/src/public-api.ts

@@ -1,4 +1,5 @@
 export * from './ui/breadcrumbs';
+export * from './ui/file-list';
 export * from './ui/empty-state';
 export * from './ui/dropzone';
 export * from './ui/inline-form-field';

projects/elonkit/src/ui/file-list/__specs__/file-list.spec.ts

@@ -0,0 +1,138 @@
+import { render } from '@testing-library/angular';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
+
+import { ESFileListModule } from '../file-list.module';
+import { ESFileListComponent } from '../file-list.component';
+import { filesFixture } from '../fixtures/files.fixture';
+import { ESLocaleService, en, ru } from '../../locale';
+
+describe('File List', () => {
+  it('Should render all files', async () => {
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getAllByTestId('file')).toHaveLength(filesFixture.length);
+  });
+
+  it('Should accept typography classes', async () => {
+    const file = filesFixture[0];
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: [file],
+        fileNameTypography: 'app-body-1',
+        fileSizeTypography: 'app-caption'
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getByText(file.name)).toHaveClass('app-body-1');
+    expect(component.getByText(en.fileList.labelKB, { exact: false })).toHaveClass('app-caption');
+  });
+
+  it('Should render remove button on canRemove input', async () => {
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canRemove: true
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getAllByLabelText(en.fileList.labelRemove)).toHaveLength(filesFixture.length);
+  });
+
+  it('Should remove file on remove button click', async () => {
+    const onRemove = jest.fn();
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canRemove: true,
+        remove: {
+          emit: onRemove
+        } as any
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    const removeButtons = component.getAllByLabelText(en.fileList.labelRemove);
+    removeButtons.forEach((btn) => {
+      component.click(btn);
+    });
+    expect(onRemove).toHaveBeenCalledTimes(filesFixture.length);
+  });
+
+  it('Should render download icon on canDownload input', async () => {
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canDownload: true
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getAllByLabelText(en.fileList.labelDownload)).toHaveLength(
+      filesFixture.length
+    );
+  });
+
+  it('Should download file on download icon click', async () => {
+    const onDownload = jest.fn();
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canDownload: true,
+        download: {
+          emit: onDownload
+        } as any
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    const downloadButtons = component.getAllByLabelText(en.fileList.labelDownload);
+    downloadButtons.forEach((btn) => {
+      component.click(btn);
+    });
+    expect(onDownload).toHaveBeenCalledTimes(filesFixture.length);
+  });
+
+  it('Should not render image files on hideImages input', async () => {
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture,
+        hideImages: true
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    const nonImageFixture = filesFixture.filter((file) => !file.type.startsWith('image'));
+    expect(component.getAllByTestId('file')).toHaveLength(nonImageFixture.length);
+  });
+
+  it('Should change locale', async () => {
+    const localeService = new ESLocaleService();
+    localeService.register('ru', ru);
+    localeService.use('ru');
+
+    const component = await render(ESFileListComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canDownload: true,
+        canRemove: true
+      },
+      imports: [ESFileListModule, MatIconTestingModule],
+      providers: [{ provide: ESLocaleService, useValue: localeService }],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getAllByLabelText(ru.fileList.labelDownload)).toHaveLength(
+      filesFixture.length
+    );
+    expect(component.getAllByLabelText(ru.fileList.labelRemove)).toHaveLength(filesFixture.length);
+    expect(component.getAllByText(ru.fileList.labelKB, { exact: false })).toHaveLength(
+      filesFixture.length
+    );
+  });
+});

projects/elonkit/src/ui/file-list/__stories__/file-list-story-basic/file-list-story-basic.component.html

@@ -0,0 +1,9 @@
+<es-file-list
+  [imageTypes]="imageTypes"
+  [hideImages]="hideImages"
+  [canRemove]="canRemove"
+  [canDownload]="canDownload"
+  [files]="files"
+  (remove)="onRemove($event)"
+  (download)="onDownload($event)"
+></es-file-list>

projects/elonkit/src/ui/file-list/__stories__/file-list-story-basic/file-list-story-basic.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+import { ESFileListFile } from '../../file-list.types';
+import { filesFixture } from '../../fixtures/files.fixture';
+
+@Component({
+  selector: 'es-file-list-basic',
+  templateUrl: './file-list-story-basic.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FileListStoryBasicComponent {
+  @Input()
+  public canRemove: boolean;
+  @Input()
+  public canDownload: boolean;
+  @Input()
+  public hideImages: boolean;
+  @Input()
+  public imageTypes: string;
+
+  public files: ESFileListFile[] = filesFixture;
+}

projects/elonkit/src/ui/file-list/__stories__/file-list-story-basic/file-list-story-basic.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FileListStoryBasicComponent } from './file-list-story-basic.component';
+import { ESFileListModule } from '../../file-list.module';
+
+@NgModule({
+  declarations: [FileListStoryBasicComponent],
+  imports: [CommonModule, ESFileListModule],
+  exports: [FileListStoryBasicComponent]
+})
+export class FileListStoryBasicModule {}

projects/elonkit/src/ui/file-list/__stories__/file-list-story-basic/file-list-story-basic.source.ts

@@ -0,0 +1,54 @@
+export const FILE_LIST_STORY_BASIC_SOURCE = {
+  ts: `
+  @Component({
+    ...
+  })
+  export class AppComponent {
+    public files: ESFileListFile[] = [
+      {
+        id: 1,
+        type: 'image/jpg',
+        file: 'https://dummyimage.com/400x400/405ed6/fff.jpg&text=ES',
+        name: 'FileName1.jpg',
+        size: 45678,
+        content: null
+      },
+      {
+        id: 2,
+        type: 'image/jpg',
+        file: 'https://dummyimage.com/400x400/228a0f/fff.jpg&text=ES',
+        name: 'FileName2.jpg',
+        size: 456789,
+        content: null
+      },
+      {
+        id: 3,
+        type: 'application/pdf',
+        file: 'https://dummyimage.com/400x400/d6761c/fff.jpg&text=ES',
+        name: 'FileName3.pdf',
+        size: 4567,
+        content: null
+      },
+      {
+        id: 4,
+        type: 'image/jpg',
+        file: 'https://dummyimage.com/400x400/2dbdb8/fff.jpg&text=ES',
+        name: 'FileName4.jpg',
+        size: 456,
+        content: null
+      }
+    ];
+  }
+  `,
+  html: `
+  <es-file-list
+    [imageTypes]="imageTypes"
+    [hideImages]="hideImages"
+    [canRemove]="canRemove"
+    [canDownload]="canDownload"
+    [files]="files"
+    (remove)="onRemove($event)"
+    (download)="onDownload($event)"
+  ></es-file-list>
+  `
+};

projects/elonkit/src/ui/file-list/__stories__/file-list-story-basic/index.ts

@@ -0,0 +1,3 @@
+export { FileListStoryBasicComponent } from './file-list-story-basic.component';
+export { FileListStoryBasicModule } from './file-list-story-basic.module';
+export { FILE_LIST_STORY_BASIC_SOURCE } from './file-list-story-basic.source';

projects/elonkit/src/ui/file-list/__stories__/file-list-story-custom-icon/file-list-story-custom-icon.component.html

@@ -0,0 +1,8 @@
+<es-file-list
+  [imageTypes]="imageTypes"
+  [hideImages]="hideImages"
+  [canRemove]="canRemove"
+  [canDownload]="canDownload"
+  [files]="files"
+  [fileIconSrc]="customIcon"
+></es-file-list>

projects/elonkit/src/ui/file-list/__stories__/file-list-story-custom-icon/file-list-story-custom-icon.component.ts

@@ -0,0 +1,23 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+import { ESFileListFile } from '../../file-list.types';
+import { filesFixture } from '../../fixtures/files.fixture';
+
+@Component({
+  selector: 'es-file-list-custom-icon',
+  templateUrl: './file-list-story-custom-icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FileListStoryCustomIconComponent {
+  @Input()
+  public canRemove: boolean;
+  @Input()
+  public canDownload: boolean;
+  @Input()
+  public hideImages: boolean;
+  @Input()
+  public imageTypes: string;
+
+  public files: ESFileListFile[] = filesFixture;
+  public customIcon = '/icons/file-list/file.svg';
+}

projects/elonkit/src/ui/file-list/__stories__/file-list-story-custom-icon/file-list-story-custom-icon.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FileListStoryCustomIconComponent } from './file-list-story-custom-icon.component';
+import { ESFileListModule } from '../../file-list.module';
+
+@NgModule({
+  declarations: [FileListStoryCustomIconComponent],
+  imports: [CommonModule, ESFileListModule],
+  exports: [FileListStoryCustomIconComponent]
+})
+export class FileListStoryCustomIconModule {}

projects/elonkit/src/ui/file-list/__stories__/file-list-story-custom-icon/file-list-story-custom-icon.source.ts

@@ -0,0 +1,4 @@
+export const FILE_LIST_STORY_CUSTOM_ICON_SOURCE = {
+  html: `
+  <es-file-list [files]="files" [fileIconSrc]="customIconPath"></es-file-list>`
+};

projects/elonkit/src/ui/file-list/__stories__/file-list-story-custom-icon/index.ts

@@ -0,0 +1,3 @@
+export { FileListStoryCustomIconComponent } from './file-list-story-custom-icon.component';
+export { FileListStoryCustomIconModule } from './file-list-story-custom-icon.module';
+export { FILE_LIST_STORY_CUSTOM_ICON_SOURCE } from './file-list-story-custom-icon.source';

projects/elonkit/src/ui/file-list/__stories__/file-list-story-typography/file-list-story-typography.component.html

@@ -0,0 +1,9 @@
+<es-file-list
+  [imageTypes]="imageTypes"
+  [hideImages]="hideImages"
+  [canRemove]="canRemove"
+  [canDownload]="canDownload"
+  fileNameTypography="typography-body-1"
+  fileSizeTypography="typography-caption"
+  [files]="files"
+></es-file-list>

projects/elonkit/src/ui/file-list/__stories__/file-list-story-typography/file-list-story-typography.component.scss

@@ -0,0 +1,15 @@
+.typography {
+  &-body-1 {
+    color: rgba(0, 0, 0, 0.88);
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &-caption {
+    color: rgba(0, 0, 0, 0.54);
+    font-family: 'Roboto', sans-serif;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}

projects/elonkit/src/ui/file-list/__stories__/file-list-story-typography/file-list-story-typography.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+import { ESFileListFile } from '../../file-list.types';
+import { filesFixture } from '../../fixtures/files.fixture';
+
+@Component({
+  selector: 'es-file-list-typography',
+  templateUrl: './file-list-story-typography.component.html',
+  styleUrls: ['./file-list-story-typography.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class FileListStoryTypographyComponent {
+  @Input()
+  public canRemove: boolean;
+  @Input()
+  public canDownload: boolean;
+  @Input()
+  public hideImages: boolean;
+  @Input()
+  public imageTypes: string;
+
+  public files: ESFileListFile[] = filesFixture;
+}

projects/elonkit/src/ui/file-list/__stories__/file-list-story-typography/file-list-story-typography.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FileListStoryTypographyComponent } from './file-list-story-typography.component';
+import { ESFileListModule } from '../../file-list.module';
+
+@NgModule({
+  declarations: [FileListStoryTypographyComponent],
+  imports: [CommonModule, ESFileListModule],
+  exports: [FileListStoryTypographyComponent]
+})
+export class FileListStoryTypographyModule {}