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 38c4ad85981..44e857ffbb4 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 @@ -57,6 +57,35 @@ export const UploadPrefilledFileList = () => ( ) +export const UploadHideFileExtenstionText = () => ( + + {() => { + const Component = () => { + const { files, setFiles } = Upload.useUpload('my-file-list') + + if (files.length) { + console.log('files', files) + } + + useMockFiles(setFiles, {}) + + return ( + + ) + } + + return + }} + +) + export const UploadBasic = () => ( @@ -286,6 +315,7 @@ export const UploadFileMaxSizeBasedOnFileType = () => ( { fileType: 'txt', fileMaxSize: 0 }, { fileType: 'zip', fileMaxSize: 99 }, ]} + displayFileExtensionText={false} /> ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx index 2d85d0cadfa..f0b75b7b22b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx @@ -13,6 +13,7 @@ import { UploadDisabledFileMaxSize, UploadFileMaxSizeBasedOnFileType, UploadFileMaxSizeBasedOnFileTypeDisabled, + UploadHideFileExtenstionText, } from 'Docs/uilib/components/upload/Examples' ## Demos @@ -75,3 +76,7 @@ This can also be used to manually implement more complex file max size verificat + + + + diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx index fb065a95366..44fe41152c0 100644 --- a/packages/dnb-eufemia/src/components/upload/Upload.tsx +++ b/packages/dnb-eufemia/src/components/upload/Upload.tsx @@ -66,6 +66,7 @@ const Upload = (localProps: UploadAllProps) => { errorAmountLimit, // eslint-disable-line deleteButton, // eslint-disable-line fileListAriaLabel, // eslint-disable-line + displayFileExtensionText, // eslint-disable-line ...props } = extendedProps diff --git a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts index e094e1e2a2f..d36921e4730 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts +++ b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts @@ -7,12 +7,12 @@ export const UploadProperties: PropertiesTableProps = { status: 'required', }, filesAmountLimit: { - doc: 'Defines the amount of files the user can select and upload. Defaults to 100.', + doc: 'Defines the amount of files the user can select and upload. Defaults to `100`.', type: 'number', status: 'optional', }, fileMaxSize: { - doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.', + doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to `5`, 5 MB.', type: ['number', 'false'], status: 'optional', }, @@ -26,6 +26,11 @@ export const UploadProperties: PropertiesTableProps = { type: 'string', status: 'optional', }, + displayFileExtensionText: { + doc: 'Defines if the file extension should be displayed in the file list for each file. Defaults to `true`.', + type: 'boolean', + status: 'optional', + }, skeleton: { doc: 'Skeleton should be applied when loading content.', type: 'boolean', diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx index 7804e194122..3c6969f1a37 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx @@ -14,6 +14,7 @@ function UploadFileList() { loadingText, onFileDelete, onChange, + displayFileExtensionText, } = context const { files, setFiles, setInternalFiles } = useUpload(id) @@ -50,6 +51,7 @@ function UploadFileList() { onDelete={onDeleteHandler} deleteButtonText={deleteButton} loadingText={loadingText} + displayFileExtensionText={displayFileExtensionText} /> ) })} diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx index 0649fa26e92..7ec9f8d90ed 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx @@ -45,6 +45,11 @@ export type UploadFileListCellProps = { */ uploadFile: UploadFile + /** + * Wether or not to display the file extension text for the uploaded file + */ + displayFileExtensionText?: boolean + /** * Calls onDelete when clicking the delete button */ @@ -63,6 +68,7 @@ const UploadFileListCell = ({ onDelete, loadingText, deleteButtonText, + displayFileExtensionText = true, }: UploadFileListCellProps) => { const { file, errorMessage, isLoading } = uploadFile const hasWarning = errorMessage != null @@ -169,13 +175,15 @@ const UploadFileListCell = ({ > {file.name} -

- {humanFileType} -

+ {displayFileExtensionText && ( +

+ {humanFileType} +

+ )} ) } diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts index 181a9489042..b13387de88e 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts @@ -35,6 +35,13 @@ describe.each(['ui', 'sbanken'])('Upload for %s', (themeName) => { expect(screenshot).toMatchImageSnapshot() }) + it('have to hide the file extension text', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="upload-hides-file-extension-text"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match file max size based on file type table', async () => { const screenshot = await makeScreenshot({ selector: diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx index 3da15c7c38b..82908afaf12 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx +++ b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx @@ -65,8 +65,26 @@ describe('UploadFileListCell', () => { ) const element = document.querySelector('.dnb-upload__file-cell__title') + const fileExtension = document.querySelector( + '.dnb-upload__file-cell__subtitle' + ) expect(element.textContent).toMatch('file.dat') + expect(fileExtension.textContent).toMatch('DAT') + }) + + it('supports not displaying file extension text', async () => { + render( + + ) + + expect( + document.querySelector('.dnb-upload__file-cell__subtitle') + ).not.toBeInTheDocument() }) it('renders the no error styling', () => { diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-hide-the-file-extension-text.snap.png b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-hide-the-file-extension-text.snap.png new file mode 100644 index 00000000000..a859ba08817 Binary files /dev/null and b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-hide-the-file-extension-text.snap.png differ diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-hide-the-file-extension-text.snap.png b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-hide-the-file-extension-text.snap.png new file mode 100644 index 00000000000..5ce0838bcdf Binary files /dev/null and b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-hide-the-file-extension-text.snap.png differ diff --git a/packages/dnb-eufemia/src/components/upload/types.ts b/packages/dnb-eufemia/src/components/upload/types.ts index c93e10d2dd8..2860cbe0753 100644 --- a/packages/dnb-eufemia/src/components/upload/types.ts +++ b/packages/dnb-eufemia/src/components/upload/types.ts @@ -53,6 +53,12 @@ export type UploadProps = { */ onFileDelete?: ({ fileItem }: { fileItem: UploadFile }) => void + /** + * Defines if the file extension should be displayed in the file list for each file. + * Default: true + */ + displayFileExtensionText?: boolean + /** * Custom text properties */