Add example and visual test

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

@@ -524,3 +524,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

@@ -54,6 +54,12 @@ import * as Examples from './Examples'
 
 <Examples.OnFileClick />
 
+### Display files as non-clickable
+
+When file size is 0 or not given (`new File([], name, { type })`), the file is displayed as a span instead of an anchor. How ever, when `onFileClick` is given, the file will be clickable as a button.
+
+<Examples.DisplayFileAsNonClickable />
+
 <VisibleWhenVisualTest>
   <Examples.LabelAndValueOnFileClick />
   <Examples.ListVariantsOnFileClick />

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

@@ -57,4 +57,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()
+  })
 })