From 24dda0bbe54da6f99cbac625ed19464a20bdd9e2 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 29 Nov 2024 09:25:40 +0100
Subject: [PATCH] refactor: update FileList component to use ordered list and
 improve styling

---
 .../css/src/components/file-list/file-list.scss | 12 +++++++++++-
 packages/react/src/FileList/FileList.test.tsx   |  2 +-
 packages/react/src/FileList/FileList.tsx        | 17 +++++++++--------
 packages/react/src/common/index.ts              |  8 --------
 packages/react/src/index.ts                     |  1 -
 5 files changed, 21 insertions(+), 19 deletions(-)
 delete mode 100644 packages/react/src/common/index.ts

diff --git a/packages/css/src/components/file-list/file-list.scss b/packages/css/src/components/file-list/file-list.scss
index a66d3f988f..f072b88370 100644
--- a/packages/css/src/components/file-list/file-list.scss
+++ b/packages/css/src/components/file-list/file-list.scss
@@ -3,11 +3,21 @@
  * 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 {
@@ -31,7 +41,7 @@
   }
 }
 
-.ams-file-list__file-name {
+.ams-file-list__file-info {
   flex: 1;
   gap: var(--ams-file-list-file-gap);
   overflow: hidden;
diff --git a/packages/react/src/FileList/FileList.test.tsx b/packages/react/src/FileList/FileList.test.tsx
index 30c425519a..77641058ef 100644
--- a/packages/react/src/FileList/FileList.test.tsx
+++ b/packages/react/src/FileList/FileList.test.tsx
@@ -34,7 +34,7 @@ describe('FileList', () => {
   })
 
   it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLDivElement>()
+    const ref = createRef<HTMLOListElement>()
 
     const { container } = render(<FileList files={files} ref={ref} />)
 
diff --git a/packages/react/src/FileList/FileList.tsx b/packages/react/src/FileList/FileList.tsx
index 2214b456e1..9b2d115cf6 100644
--- a/packages/react/src/FileList/FileList.tsx
+++ b/packages/react/src/FileList/FileList.tsx
@@ -9,19 +9,20 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
-import { formatFileSize, formatFileType } from '../common'
+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<HTMLDivElement>
+} & HTMLAttributes<HTMLOListElement>
 
 export const FileList = forwardRef(
-  ({ files, onDelete, className, ...restProps }: FileListProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
+  ({ files, onDelete, className, ...restProps }: FileListProps, ref: ForwardedRef<HTMLOListElement>) => (
+    <ol {...restProps} ref={ref} className={clsx('ams-file-list', className)}>
       {Array.from(files).map((file, index) => (
-        <div key={index} className="ams-file-list__file">
+        <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} />
@@ -29,7 +30,7 @@ export const FileList = forwardRef(
               <Icon svg={DocumentIcon} size="level-3" square />
             )}
           </div>
-          <div className="ams-file-list__file-name">
+          <div className="ams-file-list__file-info">
             {file.name}
             <div className="ams-file-input__file-details">
               ({formatFileType(file.type)}, {formatFileSize(file.size)})
@@ -42,9 +43,9 @@ export const FileList = forwardRef(
               </Button>
             </div>
           )}
-        </div>
+        </li>
       ))}
-    </div>
+    </ol>
   ),
 )
 
diff --git a/packages/react/src/common/index.ts b/packages/react/src/common/index.ts
deleted file mode 100644
index c3cd668913..0000000000
--- a/packages/react/src/common/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-export * from './formatFileType'
-export * from './formatFileSize'
-export * from './useKeyboardFocus'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 128a03c56c..5bb39cae01 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,7 +4,6 @@
  */
 
 /* Append here */
-export * from './common'
 export * from './FileList'
 export * from './ActionGroup'
 export * from './Breakout'