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..0af781bad7a 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 @@ -312,3 +312,14 @@ export const UploadDisabledFileMaxSize = () => ( /> ) + +export const UploadNoTitleNoText = () => ( + + + +) 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..62b9d326202 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, + 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 + +### Upload without title and text + + diff --git a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts index e094e1e2a2f..46749aebc69 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts +++ b/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', }, diff --git a/packages/dnb-eufemia/src/components/upload/UploadInfo.tsx b/packages/dnb-eufemia/src/components/upload/UploadInfo.tsx index 41761147856..6f8f76d5fed 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadInfo.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadInfo.tsx @@ -58,11 +58,13 @@ const UploadInfo = () => { return ( <> - {title} + {title && {title}} -

- {text} -

+ {text && ( +

+ {text} +

+ )} {children} 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..256ede9c8d6 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 @@ -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', () => { diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx index eef3f212aa0..2cb5e8050e8 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx +++ b/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() + + expect(screen.queryByText(nb.text)).not.toBeInTheDocument() + }) + + it('does not render text when text is empty string', () => { + render() + + expect(screen.queryByText(nb.text)).not.toBeInTheDocument() + }) + + it('does not render title when title is false', () => { + render() + + expect(screen.queryByText(nb.title)).not.toBeInTheDocument() + }) + + it('does not render title when title is empty string', () => { + render() + + expect(screen.queryByText(nb.title)).not.toBeInTheDocument() + }) + it('does not render fileTypeDescription when acceptedFileTypes is empty', () => { const acceptedFileTypes = [] diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-match-when-not-providing-title-and-text.snap.png b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-match-when-not-providing-title-and-text.snap.png new file mode 100644 index 00000000000..b5a409f0537 Binary files /dev/null and b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-match-when-not-providing-title-and-text.snap.png differ diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-match-when-not-providing-title-and-text.snap.png b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-match-when-not-providing-title-and-text.snap.png new file mode 100644 index 00000000000..3f9dd022ce9 Binary files /dev/null and b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-match-when-not-providing-title-and-text.snap.png differ