feat(Upload): singular texts when uploading single file

dnbexperience · Oct 23, 2023 · 8efb77c · 8efb77c
1 parent d0c4c6d
commit 8efb77c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx
@@ -26,11 +26,19 @@ export { defaultProps }
 const Upload = (localProps: UploadAllProps) => {
   const context = React.useContext(Context)
 
+  const { buttonTextSingular, textSingular, ...translations } =
+    context.getTranslation(localProps).Upload
+
+  if (localProps?.filesAmountLimit === 1) {
+    translations.buttonText = buttonTextSingular
+    translations.text = textSingular
+  }
+
   const extendedProps = extendPropsWithContext(
     localProps,
     defaultProps,
     { skeleton: context?.skeleton },
-    context.getTranslation(localProps).Upload,
+    translations,
     context.Upload
   )
 

diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx
@@ -251,6 +251,20 @@ describe('Upload', () => {
         expect.arrayContaining(['dnb-space', 'dnb-space__top--large'])
       )
     })
+
+    it('renders the singular upload button text when filesAmountLimit is 1', () => {
+      render(<Upload {...defaultProps} filesAmountLimit={1} />)
+
+      expect(screen.queryByText(nb.buttonText)).not.toBeInTheDocument()
+      expect(screen.queryByText(nb.buttonTextSingular)).toBeInTheDocument()
+    })
+
+    it('renders the singular text when filesAmountLimit is 1', () => {
+      render(<Upload {...defaultProps} filesAmountLimit={1} />)
+
+      expect(screen.queryByText(nb.text)).not.toBeInTheDocument()
+      expect(screen.queryByText(nb.textSingular)).toBeInTheDocument()
+    })
   })
 
   it('will only accept one file if filesAmountLimit is 1', async () => {
@@ -299,7 +313,7 @@ describe('Upload', () => {
 
     expect(
       screen.queryByRole('button', {
-        name: nb.buttonText,
+        name: nb.buttonTextSingular,
       })
     ).not.toHaveAttribute('disabled')
   })

diff --git a/packages/dnb-eufemia/src/shared/locales/en-GB.js b/packages/dnb-eufemia/src/shared/locales/en-GB.js
@@ -130,11 +130,14 @@ export default {
     Upload: {
       title: 'Upload documents',
       text: 'Drag & drop your files or choose files to upload.',
+      textSingular:
+        'Drag & drop your file or choose which file to upload.',
       fileTypeDescription: 'Allowed formats:',
       fileSizeDescription: 'Max. filesize:',
       fileAmountDescription: 'Max. number of files:',
       fileSizeContent: '%size MB',
       buttonText: 'Choose files',
+      buttonTextSingular: 'Choose file',
       loadingText: 'Uploading',
       errorLargeFile:
         'The file you are trying to upload is too big, the maximum size supported is %size MB.',

diff --git a/packages/dnb-eufemia/src/shared/locales/nb-NO.js b/packages/dnb-eufemia/src/shared/locales/nb-NO.js
@@ -130,11 +130,13 @@ export default {
     Upload: {
       title: 'Last opp dokumenter',
       text: 'Dra & slipp eller velg hvilke filer du vil laste opp.',
+      textSingular: 'Dra & slipp eller velg hvilken fil du vil laste opp.',
       fileTypeDescription: 'Tillatte filformater:',
       fileSizeDescription: 'Maks filstørrelse:',
       fileAmountDescription: 'Maks antall filer:',
       fileSizeContent: '%size MB',
       buttonText: 'Velg filer',
+      buttonTextSingular: 'Velg fil',
       loadingText: 'Laster opp',
       errorLargeFile:
         'Filen du prøver å laste opp er for stor, vi støtter ikke filer større enn %size MB.',