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 b8fd6d96a0f..f1d08743a88 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 @@ -365,6 +365,9 @@ export const UploadOnFileClick = () => ( { file: createMockFile('1501870.jpg', 123, 'image/png'), }, + { + file: createMockFile('35217511.jpg', 123, 'image/png'), + }, ]) }, []) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx index 2f5ba725e3e..4914aecf77e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx @@ -10,6 +10,8 @@ tabs: key: '/demos' - title: Properties key: '/properties' + - title: Events + key: '/events' breadcrumb: - text: Forms href: /uilib/extensions/forms/ diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx index 97c24738739..e77ff37b67d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx @@ -393,3 +393,31 @@ export const ListTypes = () => { ) } + +export const OnFileClick = () => { + return ( + + { + window.open( + 'https://eufemia.dnb.no/images/avatars/' + fileItem.file.name, + '_blank', + ) + }} + /> + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx index 845ea216ee0..0ea47024a75 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx @@ -49,3 +49,7 @@ import * as Examples from './Examples' ### Field.Upload path + +### Using `onFileClick` + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/events.mdx new file mode 100644 index 00000000000..ed52d1722e8 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/events.mdx @@ -0,0 +1,10 @@ +--- +showTabs: true +--- + +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { UploadValueEvents } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs' + +## Events + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx index a47f5154732..6c96248b14c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx @@ -2,7 +2,7 @@ showTabs: true --- -import { UploadProperties } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs' +import { UploadValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs' import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs' @@ -10,7 +10,7 @@ import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDo ### Value-specific properties - + ### General properties diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx index b18719552f5..817f0677a72 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx @@ -191,10 +191,7 @@ const UploadFileListCell = ({ {onClick ? ( + ) : ( + + {file.name} + {displaySize && getSize(file.size)} + + )} ) }) || undefined diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts index 29ab7016fc9..552c42334b8 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts @@ -2,7 +2,9 @@ import { PropertiesTableProps } from '../../../../shared/types' import { ListFormatProperties } from '../../../../components/list-format/ListFormatDocs' -export const UploadProperties: PropertiesTableProps = { +import { UploadFieldEvents } from '../../Field/Upload/UploadDocs' + +export const UploadValueProperties: PropertiesTableProps = { download: { doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.', type: 'boolean', @@ -15,3 +17,7 @@ export const UploadProperties: PropertiesTableProps = { }, ...ListFormatProperties, } + +export const UploadValueEvents: PropertiesTableProps = { + onFileClick: UploadFieldEvents.onFileClick, +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx index da1f60417e4..a5e2478714e 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { screen, render } from '@testing-library/react' +import { screen, render, fireEvent } from '@testing-library/react' import { Value, Form } from '../../..' import { createMockFile } from '../../../../../components/upload/__tests__/testHelpers' @@ -339,6 +339,30 @@ describe('Value.Upload', () => { expect(screen.queryByText(fileName)).toBeInTheDocument() }) + it('executes onFileClick event when button is clicked', () => { + const fileName = 'file.png' + const onFileClick = jest.fn() + + render( + + ) + const buttonElement = screen.queryByText( + fileName + ) as HTMLAnchorElement + fireEvent.click(buttonElement) + + expect(onFileClick).toHaveBeenCalledTimes(1) + }) + it('renders the anchor href', () => { const fileName = 'file.png' const mockUrl = 'mock-url'