feat(Upload): hides file extension text

dnbexperience · Oct 18, 2024 · f8d689b · f8d689b
1 parent 47bd8d3
commit f8d689b
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 9 deletions.
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
@@ -286,6 +286,7 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
         { fileType: 'txt', fileMaxSize: 0 },
         { fileType: 'zip', fileMaxSize: 99 },
       ]}
+      displayFileExtensionText={false}
     />
   </ComponentBox>
 )

diff --git 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
@@ -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
@@ -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
@@ -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}
         </a>
-        <P
-          className="dnb-upload__file-cell__subtitle"
-          size="x-small"
-          top="xx-small"
-        >
-          {humanFileType}
-        </P>
+        {displayFileExtensionText && (
+          <P
+            className="dnb-upload__file-cell__subtitle"
+            size="x-small"
+            top="xx-small"
+          >
+            {humanFileType}
+          </P>
+        )}
       </div>
     )
   }

diff --git 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(
+      <UploadFileListCell
+        {...defaultProps}
+        uploadFile={{ file: createMockFile('file.dat', 100, 'dat') }}
+        displayFileExtensionText={false}
+      />
+    )
+
+    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/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
    */