feat: Add File List component to display below a File Input

packages/css/src/components/file-list/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# File List
+
+An overview of files, showing their name, type, size, and a preview.

packages/css/src/components/file-list/file-list.scss

@@ -0,0 +1,54 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset-ol {
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.ams-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-file-list-gap);
+  padding-block: var(--ams-file-list-padding-block);
+
+  @include text-rendering;
+  @include reset-ol;
+}
+
+.ams-file-list__file {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--ams-file-list-file-font-family);
+  font-size: var(--ams-file-list-file-font-size);
+  font-weight: var(--ams-file-list-file-font-weight);
+  gap: var(--ams-file-list-file-gap);
+  line-height: var(--ams-file-list-file-line-height);
+}
+
+.ams-file-list__file-preview {
+  display: grid;
+  flex: 0 0 var(--ams-file-list-file-preview-width);
+  place-items: center;
+
+  img {
+    inline-size: 100%;
+    min-block-size: auto;
+  }
+}
+
+.ams-file-list__file-info {
+  flex: 1;
+  gap: var(--ams-file-list-file-gap);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ams-file-input__file-details {
+  color: var(--ams-file-list-file-details-color);
+}

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./file-list/file-list";
 @import "./action-group/action-group";
 @import "./breakout/breakout";
 @import "./hint/hint";

packages/react/src/FileList/FileList.test.tsx

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { FileList } from './FileList'
+import '@testing-library/jest-dom'
+
+var files = [
+  new File(['sample1'], 'sample1.txt', { type: 'text/plain', lastModified: Date.now() }),
+] as unknown as FileList // This is a workaround because jest-dom does not support DataTransfer
+
+describe('FileList', () => {
+  it('renders', () => {
+    const { container } = render(<FileList files={files} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<FileList files={files} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-file-list')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<FileList files={files} className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-file-list extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLOListElement>()
+
+    const { container } = render(<FileList files={files} ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/FileList/FileList.tsx

@@ -0,0 +1,52 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { DocumentIcon } from '@amsterdam/design-system-react-icons'
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
+import { Button } from '../Button'
+import { Icon } from '../Icon'
+import { formatFileSize } from '../common/formatFileSize'
+import { formatFileType } from '../common/formatFileType'
+
+export type FileListProps = {
+  files: FileList
+  // eslint-disable-next-line no-unused-vars
+  onDelete?: (index: number) => void
+} & HTMLAttributes<HTMLOListElement>
+
+export const FileList = forwardRef(
+  ({ files, onDelete, className, ...restProps }: FileListProps, ref: ForwardedRef<HTMLOListElement>) => (
+    <ul {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
+      {Array.from(files).map((file, index) => (
+        <li key={index} className="ams-file-list__file">
+          <div className="ams-file-list__file-preview">
+            {file.type.includes('image') ? (
+              <img src={URL.createObjectURL(file)} alt={file.name} />
+            ) : (
+              <Icon svg={DocumentIcon} size="level-3" square />
+            )}
+          </div>
+          <div className="ams-file-list__file-info">
+            {file.name}
+            <div className="ams-file-input__file-details">
+              ({formatFileType(file.type)}, {formatFileSize(file.size)})
+            </div>
+          </div>
+          {onDelete && (
+            <div>
+              <Button variant="tertiary" onClick={() => onDelete(index)}>
+                Verwijder
+              </Button>
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  ),
+)
+
+FileList.displayName = 'FileList'

packages/react/src/FileList/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React FileList component
+
+[FileList documentation](../../../css/src/components/file-list/README.md)

packages/react/src/FileList/index.ts

@@ -0,0 +1,2 @@
+export { FileList } from './FileList'
+export type { FileListProps } from './FileList'

packages/react/src/common/formatFileSize.test.tsx

@@ -0,0 +1,22 @@
+import { formatFileSize } from './formatFileSize'
+
+describe('formatFileSize', () => {
+  it('formats bytes correctly', () => {
+    expect(formatFileSize(500)).toBe('500 bytes')
+  })
+
+  it('formats kilobytes correctly', () => {
+    expect(formatFileSize(1024, 1)).toBe('1 kB')
+    expect(formatFileSize(2048, 1)).toBe('2 kB')
+  })
+
+  it('formats megabytes correctly', () => {
+    expect(formatFileSize(1048576, 1)).toBe('1 MB')
+    expect(formatFileSize(2097152, 1)).toBe('2 MB')
+  })
+
+  it('formats gigabytes correctly', () => {
+    expect(formatFileSize(1073741824, 1)).toBe('1 GB')
+    expect(formatFileSize(2147483648, 1)).toBe('2 GB')
+  })
+})

packages/react/src/common/formatFileSize.tsx

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/**
+ *
+ * @param fileType
+ * @returns Human readable file size
+ */
+export const formatFileSize = (fileSize: number, precision = 3) => {
+  const UNITS = ['bytes', 'kB', 'MB', 'GB']
+
+  if (fileSize === 0) return '0 bytes'
+
+  const exponent = Math.floor(Math.log10(fileSize) / 3)
+  const size = (fileSize / Math.pow(1000, exponent)).toPrecision(precision)
+
+  return `${size} ${UNITS[exponent]}`
+}

packages/react/src/common/formatFileType.test.tsx

@@ -0,0 +1,29 @@
+import { formatFileType } from './formatFileType'
+
+describe('formatFileType', () => {
+  it('formats image types correctly', () => {
+    expect(formatFileType('image/gif')).toBe('gif')
+    expect(formatFileType('image/jpeg')).toBe('jpg')
+    expect(formatFileType('image/png')).toBe('png')
+  })
+
+  it('formats text types correctly', () => {
+    expect(formatFileType('text/plain')).toBe('txt')
+  })
+
+  it('formats application types correctly', () => {
+    expect(formatFileType('application/pdf')).toBe('pdf')
+    expect(formatFileType('application/msword')).toBe('Word')
+    expect(formatFileType('application/vnd.openxmlformats-officedocument.wordprocessingml.document')).toBe('Word')
+    expect(formatFileType('application/vnd.ms-excel')).toBe('Excel')
+    expect(formatFileType('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')).toBe('Excel')
+    expect(formatFileType('application/vnd.ms-powerpoint')).toBe('PowerPoint')
+    expect(formatFileType('application/vnd.openxmlformats-officedocument.presentationml.presentation')).toBe(
+      'PowerPoint',
+    )
+  })
+
+  it('returns the original file type for unknown types', () => {
+    expect(formatFileType('unknown/type')).toBe('Document')
+  })
+})

packages/react/src/common/formatFileType.tsx

@@ -0,0 +1,35 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/**
+ *
+ * @param fileType
+ * @returns Human readable file type
+ */
+export const formatFileType = (fileType: string) => {
+  switch (fileType) {
+    case 'image/gif':
+      return 'gif'
+    case 'image/jpeg':
+      return 'jpg'
+    case 'image/png':
+      return 'png'
+    case 'text/plain':
+      return 'txt'
+    case 'application/pdf':
+      return 'pdf'
+    case 'application/msword':
+    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      return 'Word'
+    case 'application/vnd.ms-excel':
+    case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      return 'Excel'
+    case 'application/vnd.ms-powerpoint':
+    case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      return 'PowerPoint'
+    default:
+      return 'Document'
+  }
+}

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './FileList'
 export * from './ActionGroup'
 export * from './Breakout'
 export * from './Hint'

proprietary/tokens/src/components/ams/file-list.tokens.json

@@ -0,0 +1,21 @@
+{
+  "ams": {
+    "file-list": {
+      "gap": { "value": "{ams.space.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "file": {
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "gap": { "value": "{ams.space.sm}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" },
+        "details": {
+          "color": { "value": "{ams.brand.color.neutral.60}" }
+        },
+        "preview": {
+          "width": { "value": "clamp(2.5rem, 10vw, 5rem)" }
+        }
+      }
+    }
+  }
+}

storybook/src/components/FileList/FileInputWithFileList.tsx

@@ -0,0 +1,33 @@
+import { FileInput, FileList } from '@amsterdam/design-system-react'
+import { useRef, useState } from 'react'
+
+export const FileInputWithFileList = () => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [files, setFiles] = useState<FileList | null>(null)
+
+  const changeFiles = () => {
+    if (inputRef.current) {
+      setFiles(inputRef.current.files)
+    }
+  }
+
+  const removeFile = (index: number) => {
+    if (files) {
+      const newFiles = new DataTransfer()
+      Array.from(files).forEach((file, i) => {
+        if (i !== index) newFiles.items.add(file)
+      })
+      if (inputRef.current) {
+        inputRef.current.files = newFiles.files
+      }
+      setFiles(newFiles.files)
+    }
+  }
+
+  return (
+    <>
+      <FileInput multiple ref={inputRef} onChange={changeFiles} />
+      {files && <FileList files={files} onDelete={removeFile} />}
+    </>
+  )
+}

storybook/src/components/FileList/FileList.docs.mdx

@@ -0,0 +1,25 @@
+{/* @license CC0-1.0 */}
+
+import { Canvas, Controls, Markdown, Meta, Primary, Source } from "@storybook/blocks";
+import FileInputWithFileList from "./FileInputWithFileList?raw";
+import * as FileListStories from "./FileList.stories.tsx";
+import README from "../../../../packages/css/src/components/file-list/README.md?raw";
+
+<Meta of={FileListStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
+
+## Examples
+
+### Using a file input
+
+To connect a File Input to a File List, use the `onChange` event to update the
+list of files and use `onDelete` when removing a file from the list.
+
+<Canvas of={FileListStories.WithInput} />
+
+<Source code={FileInputWithFileList} language="jsx" />