From 3a6eb63c9c4986d445b07cc4b777c9f3375f9d2a Mon Sep 17 00:00:00 2001
From: Anders <anderslangseth@gmail.com>
Date: Mon, 9 Dec 2024 10:03:18 +0100
Subject: [PATCH] chore(Upload): improves readability in examples (#4373)

---
 .../docs/uilib/components/upload/Examples.tsx | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
index 85555e17f28..2b3ad520a00 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
@@ -24,21 +24,10 @@ export function createMockFile(name: string, size: number, type: string) {
   return file
 }
 
-const useMockFiles = (setFiles, extend) => {
-  React.useEffect(() => {
-    setFiles([
-      {
-        file: createMockFile('fileName.png', 123, 'image/png'),
-        ...extend,
-      },
-    ])
-  }, [])
-}
-
 export const UploadPrefilledFileList = () => (
   <ComponentBox
     data-visual-test="upload-file-list"
-    scope={{ useMockFiles }}
+    scope={{ createMockFile }}
   >
     {() => {
       const Component = () => {
@@ -48,7 +37,14 @@ export const UploadPrefilledFileList = () => (
           console.log('files', files)
         }
 
-        useMockFiles(setFiles, { errorMessage: 'This is no real file!' })
+        React.useEffect(() => {
+          setFiles([
+            {
+              file: createMockFile('fileName.png', 123, 'image/png'),
+              errorMessage: 'This is no real file!',
+            },
+          ])
+        }, [])
 
         return <Upload acceptedFileTypes={['jpg', 'png']} id="file-list" />
       }
@@ -157,14 +153,21 @@ export const UploadRemoveFile = () => (
 
 export const UploadIsLoading = () => (
   <ComponentBox
-    scope={{ useMockFiles }}
     data-visual-test="upload-is-loading"
+    scope={{ createMockFile }}
   >
     {() => {
       const Component = () => {
         const { files, setFiles } = Upload.useUpload('upload-is-loading')
 
-        useMockFiles(setFiles, { isLoading: true })
+        React.useEffect(() => {
+          setFiles([
+            {
+              file: createMockFile('fileName.png', 123, 'image/png'),
+              isLoading: true,
+            },
+          ])
+        }, [])
 
         return (
           <>