feat(Upload): adds onFileClick event

packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx

@@ -350,3 +350,42 @@ export const UploadOnFileDeleteAsync = () => (
     }}
   </ComponentBox>
 )
+
+export const UploadOnFileClick = () => (
+  <ComponentBox
+    scope={{ createMockFile }}
+    data-visual-test="upload-on-file-click"
+  >
+    {() => {
+      const Component = () => {
+        const { setFiles } = Upload.useUpload('upload-on-file-click')
+
+        React.useEffect(() => {
+          setFiles([
+            {
+              file: createMockFile('1501870.jpg', 123, 'image/png'),
+            },
+          ])
+        }, [])
+
+        return (
+          <>
+            <Upload
+              acceptedFileTypes={['jpg', 'png']}
+              id="upload-on-file-click"
+              onFileClick={({ fileItem }) => {
+                window.open(
+                  'https://eufemia.dnb.no/images/avatars/' +
+                    fileItem.file.name,
+                  '_blank',
+                )
+              }}
+            />
+          </>
+        )
+      }
+
+      return <Component />
+    }}
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx

@@ -15,6 +15,7 @@ import {
   UploadFileMaxSizeBasedOnFileTypeDisabled,
   UploadNoTitleNoText,
   UploadOnFileDeleteAsync,
+  UploadOnFileClick,
 } from 'Docs/uilib/components/upload/Examples'
 
 ## Demos
@@ -83,3 +84,7 @@ This can also be used to manually implement more complex file max size verificat
 ### Upload with async `onFileDelete`
 
 <UploadOnFileDeleteAsync />
+
+### Upload with `onFileClick`
+
+<UploadOnFileClick />

packages/dnb-eufemia/src/components/upload/Upload.tsx

@@ -52,6 +52,7 @@ const Upload = (localProps: UploadAllProps) => {
     fileMaxSize,
     onChange,
     onFileDelete, // eslint-disable-line
+    onFileClick, // eslint-disable-line
     download, // eslint-disable-line
     title, // eslint-disable-line
     text, // eslint-disable-line

packages/dnb-eufemia/src/components/upload/UploadDocs.ts

@@ -67,4 +67,9 @@ export const UploadEvents: PropertiesTableProps = {
     type: 'function',
     status: 'optional',
   },
+  onFileClick: {
+    doc: 'Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.',
+    type: 'function',
+    status: 'optional',
+  },
 }

packages/dnb-eufemia/src/components/upload/UploadFileList.tsx

@@ -15,6 +15,7 @@ function UploadFileList() {
     download,
     loadingText,
     onFileDelete,
+    onFileClick,
     onChange,
   } = context
 
@@ -96,12 +97,19 @@ function UploadFileList() {
           }
         }
 
+        const onFileClickHandler = () => {
+          if (typeof onFileClick === 'function') {
+            onFileClick({ fileItem: uploadFile })
+          }
+        }
+
         return (
           <UploadFileListCell
             key={index}
             id={id}
             uploadFile={uploadFile}
             onDelete={onDeleteHandler}
+            onClick={onFileClick && onFileClickHandler}
             deleteButtonText={deleteButton}
             loadingText={loadingText}
             download={download}

packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx

@@ -60,6 +60,11 @@ export type UploadFileListCellProps = {
    */
   onDelete: () => void
 
+  /**
+   * Calls onClick when clicking the file name
+   */
+  onClick?: () => void
+
   /**
    * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.
    * Default: false
@@ -77,6 +82,7 @@ const UploadFileListCell = ({
   id,
   uploadFile,
   onDelete,
+  onClick,
   loadingText,
   deleteButtonText,
   download,
@@ -182,18 +188,31 @@ const UploadFileListCell = ({
       </div>
     ) : (
       <div className="dnb-upload__file-cell__text-container">
-        <Anchor
-          target="_blank"
-          href={imageUrl}
-          download={download ? file.name : null}
-          className={classnames(
-            'dnb-anchor--no-launch-icon',
-            'dnb-upload__file-cell__title'
-          )}
-          rel="noopener noreferrer"
-        >
-          {file.name}
-        </Anchor>
+        {onClick ? (
+          <Button
+            variant="tertiary"
+            className={classnames(
+              'dnb-anchor--no-launch-icon',
+              'dnb-upload__file-cell__title'
+            )}
+            onClick={onClick}
+          >
+            {file.name}
+          </Button>
+        ) : (
+          <Anchor
+            target="_blank"
+            href={imageUrl}
+            download={download ? file.name : null}
+            className={classnames(
+              'dnb-anchor--no-launch-icon',
+              'dnb-upload__file-cell__title'
+            )}
+            rel="noopener noreferrer"
+          >
+            {file.name}
+          </Anchor>
+        )}
       </div>
     )
   }

packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts

@@ -57,6 +57,13 @@ describe.each(['ui', 'sbanken'])('Upload for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match anchor looks when displaying a button', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="upload-on-file-click"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Upload', () => {

packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx

@@ -2,7 +2,7 @@ import UploadFileListCell, {
   UploadFileListCellProps,
 } from '../UploadFileListCell'
 import { createMockFile } from './testHelpers'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 
 global.URL.createObjectURL = jest.fn(() => 'url')
@@ -272,6 +272,27 @@ describe('UploadFileListCell', () => {
         'dnb-upload__file-cell--error'
       )
     })
+
+    it('executes onClick event when button is clicked', () => {
+      const onClick = jest.fn()
+
+      render(
+        <UploadFileListCell
+          {...defaultProps}
+          uploadFile={{
+            file: createMockFile('file.png', 100, 'image/png'),
+          }}
+          onClick={onClick}
+        />
+      )
+      const element = document.querySelector(
+        '.dnb-upload__file-cell button'
+      )
+
+      fireEvent.click(element)
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('Delete Button', () => {
@@ -322,6 +343,25 @@ describe('UploadFileListCell', () => {
       ).toBeInTheDocument()
     })
 
+    it('executes onDelete event when delete button is clicked', () => {
+      const onDelete = jest.fn()
+
+      render(
+        <UploadFileListCell
+          {...defaultProps}
+          uploadFile={{
+            file: createMockFile('file.png', 100, 'image/png'),
+          }}
+          onDelete={onDelete}
+        />
+      )
+      const element = screen.getByRole('button')
+
+      fireEvent.click(element)
+
+      expect(onDelete).toHaveBeenCalledTimes(1)
+    })
+
     it('renders the delete button as disabled when loading state', () => {
       render(
         <UploadFileListCell

packages/dnb-eufemia/src/components/upload/types.ts

@@ -57,6 +57,11 @@ export type UploadProps = {
     fileItem: UploadFile
   }) => void | Promise<void>
 
+  /**
+   * Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.
+   */
+  onFileClick?: ({ fileItem }: { fileItem: UploadFile }) => void
+
   /**
    * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.
    * Default: false