feat(Upload): adds property displayFileExtensionText to hide file extension text

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

@@ -57,6 +57,35 @@ export const UploadPrefilledFileList = () => (
   </ComponentBox>
 )
 
+export const UploadHideFileExtenstionText = () => (
+  <ComponentBox
+    data-visual-test="upload-hides-file-extension-text"
+    scope={{ useMockFiles }}
+  >
+    {() => {
+      const Component = () => {
+        const { files, setFiles } = Upload.useUpload('my-file-list')
+
+        if (files.length) {
+          console.log('files', files)
+        }
+
+        useMockFiles(setFiles, {})
+
+        return (
+          <Upload
+            acceptedFileTypes={['jpg', 'png']}
+            id="my-file-list"
+            displayFileExtensionText={false}
+          />
+        )
+      }
+
+      return <Component />
+    }}
+  </ComponentBox>
+)
+
 export const UploadBasic = () => (
   <ComponentBox data-visual-test="upload-basic">
     <Upload acceptedFileTypes={['jpg', 'png']} id="upload-basic" />
@@ -286,6 +315,7 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
         { fileType: 'txt', fileMaxSize: 0 },
         { fileType: 'zip', fileMaxSize: 99 },
       ]}
+      displayFileExtensionText={false}
     />
   </ComponentBox>
 )

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
 <VisibleWhenNotVisualTest>
   <UploadDisabledFileMaxSize />
 </VisibleWhenNotVisualTest>
+
+<VisibleWhenVisualTest>
+  <UploadHideFileExtenstionText />
+</VisibleWhenVisualTest>

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
 

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',

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}
           />
         )
       })}

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>
     )
   }

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:

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', () => {

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
    */