Add example and visual test

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx

@@ -421,3 +421,29 @@ export const OnFileClick = () => {
     </ComponentBox>
   )
 }
+
+export const DisplayFileAsNonClickable = () => {
+  return (
+    <ComponentBox
+      hideCode
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-display-file-as-non-clickable"
+    >
+      <Value.Upload
+        label="Label text"
+        value={[
+          {
+            file: createMockFile('35217511.jpg', 0, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('1501870.jpg', undefined, 'image/png'),
+            exists: false,
+            id: '2',
+          },
+        ]}
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx

@@ -53,3 +53,9 @@ import * as Examples from './Examples'
 ### Using `onFileClick`
 
 <Examples.OnFileClick />
+
+### Display files as non-clickable
+
+When file size is 0, the file is displayed as a span instead of an anchor.
+
+<Examples.DisplayFileAsNonClickable />

packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts

@@ -35,4 +35,12 @@ describe('Value.Upload', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match files as non-clickable', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="upload-value-display-file-as-non-clickable"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })