feat(Upload): text and title is possible to remove (#4163)

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

@@ -312,3 +312,14 @@ export const UploadDisabledFileMaxSize = () => (
     />
   </ComponentBox>
 )
+
+export const UploadNoTitleNoText = () => (
+  <ComponentBox data-visual-test="upload-no-title-no-text">
+    <Upload
+      title={false}
+      text={false}
+      acceptedFileTypes={['jpg', 'png']}
+      id="upload-no-title-no-text"
+    />
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx

@@ -13,6 +13,7 @@ import {
   UploadDisabledFileMaxSize,
   UploadFileMaxSizeBasedOnFileType,
   UploadFileMaxSizeBasedOnFileTypeDisabled,
+  UploadNoTitleNoText,
 } 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>
+
+### Upload without title and text
+
+<UploadNoTitleNoText />

packages/dnb-eufemia/src/components/upload/UploadDocs.ts

@@ -17,12 +17,12 @@ export const UploadProperties: PropertiesTableProps = {
     status: 'optional',
   },
   title: {
-    doc: 'Custom text property. Replaces the default title.',
+    doc: 'Custom text property. Replaces the default title. Can be disabled using `false`.',
     type: 'string',
     status: 'optional',
   },
   text: {
-    doc: 'Custom text property. Replaces the default text.',
+    doc: 'Custom text property. Replaces the default text. Can be disabled using `false`.',
     type: 'string',
     status: 'optional',
   },

packages/dnb-eufemia/src/components/upload/UploadInfo.tsx

@@ -58,11 +58,13 @@ const UploadInfo = () => {
 
   return (
     <>
-      <Lead space="0">{title}</Lead>
+      {title && <Lead space="0">{title}</Lead>}
 
-      <P top="xx-small" className="dnb-upload__text">
-        {text}
-      </P>
+      {text && (
+        <P top="xx-small" className="dnb-upload__text">
+          {text}
+        </P>
+      )}
 
       {children}
 

packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts

@@ -42,6 +42,13 @@ describe.each(['ui', 'sbanken'])('Upload for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match when not providing title and text', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="upload-no-title-no-text"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Upload', () => {

packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx

@@ -96,6 +96,30 @@ describe('Upload', () => {
       ).toBeInTheDocument()
     })
 
+    it('does not render text when text is false', () => {
+      render(<Upload {...defaultProps} text={false} />)
+
+      expect(screen.queryByText(nb.text)).not.toBeInTheDocument()
+    })
+
+    it('does not render text when text is empty string', () => {
+      render(<Upload {...defaultProps} text="" />)
+
+      expect(screen.queryByText(nb.text)).not.toBeInTheDocument()
+    })
+
+    it('does not render title when title is false', () => {
+      render(<Upload {...defaultProps} title={false} />)
+
+      expect(screen.queryByText(nb.title)).not.toBeInTheDocument()
+    })
+
+    it('does not render title when title is empty string', () => {
+      render(<Upload {...defaultProps} title="" />)
+
+      expect(screen.queryByText(nb.title)).not.toBeInTheDocument()
+    })
+
     it('does not render fileTypeDescription when acceptedFileTypes is empty', () => {
       const acceptedFileTypes = []