From a5e59951431e7b8f4e583c722b36ccd76197b7f2 Mon Sep 17 00:00:00 2001 From: -l Date: Fri, 8 Nov 2024 14:09:08 +0100 Subject: [PATCH] add Value.Upload component --- .../forms/Value/SummaryList/Examples.tsx | 33 +- .../uilib/extensions/forms/Value/Upload.mdx | 26 + .../forms/Value/Upload/Examples.tsx | 443 ++++++++++++++++++ .../extensions/forms/Value/Upload/demos.mdx | 51 ++ .../extensions/forms/Value/Upload/info.mdx | 14 + .../forms/Value/Upload/properties.mdx | 20 + .../docs/uilib/extensions/forms/changelog.mdx | 4 + .../more-fields/Upload/info.mdx | 2 + .../src/components/list-format/ListFormat.tsx | 4 + .../list-format/__tests__/ListFormat.test.tsx | 13 + .../components/upload/UploadFileListCell.tsx | 25 +- .../__tests__/UploadFileListCell.test.tsx | 34 +- .../extensions/forms/Value/Upload/Upload.tsx | 131 ++++++ .../forms/Value/Upload/UploadDocs.ts | 17 + .../__tests__/Upload.screenshot.test.ts | 31 ++ .../Value/Upload/__tests__/Upload.test.tsx | 403 ++++++++++++++++ ...upload-have-to-list-upload-inline.snap.png | Bin 0 -> 12239 bytes ...eupload-have-to-list-upload-value.snap.png | Bin 0 -> 24042 bytes ...ave-to-match-default-upload-value.snap.png | Bin 0 -> 8051 bytes .../extensions/forms/Value/Upload/index.ts | 2 + .../Value/Upload/stories/Upload.stories.tsx | 75 +++ .../src/extensions/forms/Value/index.ts | 1 + 22 files changed, 1307 insertions(+), 22 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/info.mdx create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-inline.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-value.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-default-upload-value.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/index.ts create mode 100644 packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx index 93f658babe3..b60f2c2af3d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx @@ -2,6 +2,16 @@ import ComponentBox from '../../../../../../shared/tags/ComponentBox' import { Card } from '@dnb/eufemia/src' import { Field, Form, Value } from '@dnb/eufemia/src/extensions/forms' +function createMockFile(name: string, size: number, type: string) { + const file = new File([], name, { type }) + Object.defineProperty(file, 'size', { + get() { + return size + }, + }) + return file +} + export const DefaultLayout = () => { return ( @@ -132,15 +142,36 @@ export function InheritVisibility() { export function InheritLabel() { return ( - + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx new file mode 100644 index 00000000000..6333ac1a371 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx @@ -0,0 +1,26 @@ +--- +title: 'Upload' +description: '`Value.Upload` will render the selected country.' +componentType: 'feature-value' +showTabs: true +tabs: + - title: Info + key: '/info' + - title: Demos + key: '/demos' + - title: Properties + key: '/properties' +breadcrumb: + - text: Forms + href: /uilib/extensions/forms/ + - text: Value + href: /uilib/extensions/forms/Value/ + - text: Upload + href: /uilib/extensions/forms/Value/Upload/ +--- + +import Info from 'Docs/uilib/extensions/forms/Value/Upload/info' +import Demos from 'Docs/uilib/extensions/forms/Value/Upload/demos' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx new file mode 100644 index 00000000000..c020ed6b983 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx @@ -0,0 +1,443 @@ +import ComponentBox from '../../../../../../shared/tags/ComponentBox' +import { Form, Value, Field } from '@dnb/eufemia/src/extensions/forms' +import { Flex, Span } from '@dnb/eufemia/src' + +function createMockFile(name: string, size: number, type: string) { + const file = new File([], name, { type }) + Object.defineProperty(file, 'size', { + get() { + return size + }, + }) + return file +} + +export const Placeholder = () => { + return ( + + + + ) +} + +export const WithValue = () => { + return ( + + + + ) +} + +export const WithSize = () => { + return ( + + + + ) +} + +export const WithDownload = () => { + return ( + + + + ) +} + +export const WithCustomFormat = () => { + return ( + + + + + + ) +} + +export const FieldUploadSelectionPath = () => { + return ( + + + + + + + + + ) +} + +export const Label = () => { + return ( + + + + ) +} + +export const LabelAndValue = () => { + return ( + + + + ) +} + +export const Inline = () => { + return ( + + + This is before the component + + This is after the component + + + ) +} + +export const ListVariants = () => { + return ( + + + + + ) +} + +export const ListTypes = () => { + return ( + + + + + + + + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx new file mode 100644 index 00000000000..845ea216ee0 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx @@ -0,0 +1,51 @@ +--- +showTabs: true +--- + +import * as Examples from './Examples' + +## Demos + +### Placeholder + + + +### Value + + + +### With `displaySize` property + + + +### With `download` property + + + +### Custom format + + + +### Label + + + +### Label and value + + + +### Inline + + + +### List variants + + + +### List types + + + +### Field.Upload path + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/info.mdx new file mode 100644 index 00000000000..3238e262631 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/info.mdx @@ -0,0 +1,14 @@ +--- +showTabs: true +--- + +## Description + +`Value.Upload` is a wrapper component for displaying Upload files, with user experience tailored for an array of values. + +There is a corresponding [Field.Upload](/uilib/extensions/forms/feature-fields/more-fields/Upload) component. + +```jsx +import { Value } from '@dnb/eufemia/extensions/forms' +render() +``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx new file mode 100644 index 00000000000..a47f5154732 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx @@ -0,0 +1,20 @@ +--- +showTabs: true +--- + +import { UploadProperties } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs' +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs' + +## Properties + +### Value-specific properties + + + +### General properties + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx index fe03c63d274..85fbb373da0 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx @@ -11,6 +11,10 @@ breadcrumb: # Change log +## 10.55 + +- Added [Value.Upload](/uilib/extensions/forms/Value/Upload/) component to render a file value. + Change log for the Eufemia Forms extension. ## v10.54 diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/info.mdx index c2603ec6acc..58eeb8a6b50 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Upload/info.mdx @@ -11,6 +11,8 @@ import { Field } from '@dnb/eufemia/extensions/forms' render() ``` +There is a corresponding [Value.Upload](/uilib/extensions/forms/Value/Upload) component. + ## The data and file format The returned data is an array of objects containing a file object and a unique ID. The file object contains the file itself and some additional properties like an unique ID. diff --git a/packages/dnb-eufemia/src/components/list-format/ListFormat.tsx b/packages/dnb-eufemia/src/components/list-format/ListFormat.tsx index 339a08a6fd4..7a808062251 100644 --- a/packages/dnb-eufemia/src/components/list-format/ListFormat.tsx +++ b/packages/dnb-eufemia/src/components/list-format/ListFormat.tsx @@ -62,6 +62,10 @@ function ListFormat(localProps: ListFormatProps) { return [valueToUse] } + if (!Array.isArray(valueToUse)) { + return [valueToUse] + } + return isListVariant ? React.Children.map(valueToUse, (child: React.ReactNode, index) => { return
  • {child}
    • diff --git a/packages/dnb-eufemia/src/components/list-format/__tests__/ListFormat.test.tsx b/packages/dnb-eufemia/src/components/list-format/__tests__/ListFormat.test.tsx index d71dc1d1c46..cb0cf798427 100644 --- a/packages/dnb-eufemia/src/components/list-format/__tests__/ListFormat.test.tsx +++ b/packages/dnb-eufemia/src/components/list-format/__tests__/ListFormat.test.tsx @@ -226,6 +226,19 @@ describe('ListFormat', () => { expect(list('ul')).toContainHTML( '
  • 123
  • 456
  • 789
    • ' ) + + rerender( + + ) + expect(list('ul')).not.toHaveAttribute('type') + expect(list('ul')).toHaveClass('dnb-unstyled-list dnb-ul') + expect(list('ul')).toContainHTML( + '
  • 123
  • 456
  • 789
    • ' + ) }) it('should render different `listTypes` using children', () => { diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx index 34e55153e8c..45e1c8b2045 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx @@ -12,6 +12,9 @@ import ProgressIndicator from '../../components/progress-indicator' import { trash as TrashIcon, exclamation_medium as ExclamationIcon, + file_png_medium as png, + file_jpg_medium as jpg, + file_word_medium as doc, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, @@ -27,8 +30,15 @@ import { getPreviousSibling, warn } from '../../shared/component-helper' import useUpload from './useUpload' import { getFileTypeFromExtension } from './UploadVerify' -const images = { +// Will be deprecated - and then default to only showing the file icon, +// and not file icon per extension type +export const fileExtensionImages = { + png, + jpg, pdf, + doc, + docx: doc, + odt: doc, xls, ppt, csv, @@ -142,14 +152,21 @@ const UploadFileListCell = ({ if (!iconFileType) { const mimeParts = file.type.split('/') - iconFileType = images[mimeParts[0]] || images[mimeParts[1]] + iconFileType = + fileExtensionImages[mimeParts[0]] || + fileExtensionImages[mimeParts[1]] } - if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) { + if ( + !Object.prototype.hasOwnProperty.call( + fileExtensionImages, + iconFileType + ) + ) { iconFileType = 'file' } - return + return } function getTitle() { diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx index 748f2ed2d19..45a0184f6ab 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx +++ b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx @@ -40,23 +40,6 @@ describe('UploadFileListCell', () => { expect(element.className).toMatch('dnb-upload__file-cell--warning') }) - it('renders the upload attribute', () => { - render( - - ) - - const element = document.querySelector('.dnb-upload__file-cell a') - - expect(element).toHaveAttribute('download', 'file.png') - }) - it('supports special file extensions', async () => { render( { expect(anchorElement.href).toMatch(mockUrl) }) + it('renders the download attribute', () => { + render( + + ) + + const element = document.querySelector('.dnb-upload__file-cell a') + + expect(element).toHaveAttribute('download', 'file.png') + }) + it('renders without the error style', () => { const fileName = 'file.png' diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx new file mode 100644 index 00000000000..65bfb2592f0 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx @@ -0,0 +1,131 @@ +import React, { useMemo } from 'react' +import classnames from 'classnames' +import { useValueProps } from '../../hooks' +import { ValueProps } from '../../types' +import ValueBlock from '../../ValueBlock' +import { Anchor } from '../../../../components' +import Icon from '../../../../components/Icon' +import Span from '../../../../elements/Span' +import ListFormat, { + ListFormatProps, +} from '../../../../components/list-format' +import type { + UploadFile, + UploadProps, +} from '../../../../components/upload/types' +import { fileExtensionImages } from '../../../../components/upload/UploadFileListCell' +import { + BYTES_IN_A_MEGA_BYTE, + getFileTypeFromExtension, +} from '../../../../components/upload/UploadVerify' +import { format } from '../../../../components/number-format/NumberUtils' + +export type Props = ValueProps> & + Omit & + Pick & { + displaySize?: boolean + } + +function Upload(props: Props) { + const { + path, + value, + format, + className, + variant = 'text', + listType, + download = false, + displaySize = false, + ...rest + } = useValueProps(props) + + const list = useMemo(() => { + const valueToUse = + value?.map((uploadFile, index) => { + const { file } = uploadFile || {} + if (!file) { + return + } + const imageUrl = URL.createObjectURL(file) + return ( + + {getIcon(file)} + + {file.name} + {getSize(displaySize, file.size)} + + + ) + }) || undefined + + if (typeof valueToUse === 'undefined') { + return undefined + } + + return ( + + ) + }, [path, value, variant, listType]) + + return ( + + {list} + + ) +} + +function getSize(displaySize: boolean, size: number) { + if (!displaySize || !size) { + return + } + // Converts from b (binary) to MB (decimal) + const sizeInMb = size / BYTES_IN_A_MEGA_BYTE + return ` (${format(sizeInMb, { + decimals: 0, + })} MB)` +} + +function getIcon(file: File) { + if (!file) { + return + } + const fileType = getFileTypeFromExtension(file) + + let iconFileType = fileType + + if (!iconFileType) { + const mimeParts = file.type.split('/') + iconFileType = + fileExtensionImages[mimeParts[0]] || + fileExtensionImages[mimeParts[1]] + } + + if ( + !Object.prototype.hasOwnProperty.call( + fileExtensionImages, + iconFileType + ) + ) { + iconFileType = 'file' + } + + return +} + +Upload._supportsSpacingProps = true +export default Upload diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts new file mode 100644 index 00000000000..29ab7016fc9 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts @@ -0,0 +1,17 @@ +import { PropertiesTableProps } from '../../../../shared/types' + +import { ListFormatProperties } from '../../../../components/list-format/ListFormatDocs' + +export const UploadProperties: PropertiesTableProps = { + download: { + doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.', + type: 'boolean', + status: 'optional', + }, + displaySize: { + doc: 'Can be used to display the file size of the file. Defaults to `false`.', + type: 'boolean', + status: 'optional', + }, + ...ListFormatProperties, +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts new file mode 100644 index 00000000000..b7b8d6a333d --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts @@ -0,0 +1,31 @@ +import { + makeScreenshot, + setupPageScreenshot, +} from '../../../../../core/jest/jestSetupScreenshots' + +describe('Value.Upload', () => { + setupPageScreenshot({ + url: '/uilib/extensions/forms/Value/Upload/demos/', + }) + + it('have to match default upload value', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="upload-value-default"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to list upload inline', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="upload-value-inline"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to list upload value', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="upload-value-lists"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx new file mode 100644 index 00000000000..da1f60417e4 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx @@ -0,0 +1,403 @@ +import React from 'react' +import { screen, render } from '@testing-library/react' +import { Value, Form } from '../../..' +import { createMockFile } from '../../../../../components/upload/__tests__/testHelpers' + +global.URL.createObjectURL = jest.fn(() => 'url') + +const files = [ + { + file: createMockFile('foo.png', 1000000, 'image/png'), + exists: false, + id: '1', + }, + { + file: createMockFile('bar.png', 2000000, 'image/png'), + exists: false, + id: '2', + }, + { + file: createMockFile('baz.png', 3000000, 'image/png'), + exists: false, + id: '3', + }, +] + +describe('Value.Upload', () => { + it('renders file values', () => { + render() + + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('foo.png, bar.png og baz.png') + }) + + it('renders empty array of file values', () => { + render() + + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('') + }) + + it('renders array of falsy values', () => { + render() + + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('') + }) + + it('renders custom format', () => { + render( + + ) + + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('foo.png, bar.png eller baz.png') + }) + + it('should render different variants', () => { + const { rerender } = render( + + ) + + const valueBlock = document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + + const ol = valueBlock.querySelector('.dnb-ol') as HTMLOListElement + + expect(ol).toBeInTheDocument() + expect(ol.children.length).toBe(3) + + rerender() + + const ul = valueBlock.querySelector('.dnb-ul') as HTMLUListElement + + expect(ol).not.toBeInTheDocument() + expect(ul).toBeInTheDocument() + expect(ul.children.length).toBe(3) + + rerender() + + expect(ol).not.toBeInTheDocument() + expect(ul).not.toBeInTheDocument() + expect(valueBlock).toHaveTextContent('foo.png, bar.png og baz.png') + }) + + it('should render different `listTypes`', () => { + const { rerender } = render( + + ) + + const valueBlock = document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + + const list = (type: 'ol' | 'ul') => + valueBlock.querySelector(`.dnb-${type}`) + + expect(list('ol')).toHaveAttribute('type', 'a') + + rerender() + expect(list('ol')).toHaveAttribute('type', 'A') + + rerender() + expect(list('ol')).toHaveAttribute('type', 'i') + + rerender() + expect(list('ol')).toHaveAttribute('type', 'I') + + rerender() + expect(list('ul')).toHaveAttribute('type', 'circle') + + rerender() + expect(list('ul')).toHaveAttribute('type', 'disc') + + rerender() + expect(list('ul')).toHaveAttribute('type', 'square') + }) + + it('renders label when showEmpty is true', () => { + render() + expect(document.querySelector('.dnb-form-label')).toHaveTextContent( + 'My label' + ) + }) + + it('renders value and label', () => { + render() + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('foo.png, bar.png og baz.png') + + expect(document.querySelector('.dnb-form-label')).toHaveTextContent( + 'My selections' + ) + }) + + it('renders custom label', () => { + render() + expect(document.querySelector('.dnb-form-label')).toHaveTextContent( + 'Custom label' + ) + }) + + it('renders placeholder', () => { + render() + expect(screen.getByText('Please select a value')).toBeInTheDocument() + }) + + it('renders value from path', () => { + render( + + + + ) + + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('foo.png, bar.png og baz.png') + }) + + it('formats value in different locale', () => { + render( + + + + ) + + expect( + document.querySelector( + '.dnb-forms-value-upload .dnb-forms-value-block__content' + ) + ).toHaveTextContent('foo.png, bar.png and baz.png') + }) + + describe('Icons', () => { + it('renders the pdf icon', () => { + render( + + ) + + expect( + screen.queryByTestId('file pdf medium icon') + ).toBeInTheDocument() + }) + + it('renders the xls icon', () => { + render( + + ) + + expect( + screen.queryByTestId('file xls medium icon') + ).toBeInTheDocument() + }) + + it('renders the ppt icon', () => { + render( + + ) + + expect( + screen.queryByTestId('file ppt medium icon') + ).toBeInTheDocument() + }) + + it('renders the csv icon', () => { + render( + + ) + + expect( + screen.queryByTestId('file csv medium icon') + ).toBeInTheDocument() + }) + + it('renders the txt icon', () => { + render( + + ) + + expect( + screen.queryByTestId('file txt medium icon') + ).toBeInTheDocument() + }) + + it('renders the xml icon', () => { + render( + + ) + + expect( + screen.queryByTestId('file xml medium icon') + ).toBeInTheDocument() + }) + + it('renders the file icon as default', () => { + render( + + ) + + expect(screen.queryByTestId('file medium icon')).toBeInTheDocument() + }) + }) + + describe('File Anchor', () => { + it('renders the anchor', () => { + const fileName = 'file.png' + + render( + + ) + expect(screen.queryByText(fileName)).toBeInTheDocument() + }) + + it('renders the anchor href', () => { + const fileName = 'file.png' + const mockUrl = 'mock-url' + + global.URL.createObjectURL = jest.fn().mockReturnValueOnce(mockUrl) + + render( + + ) + const anchorElement = screen.queryByText( + fileName + ) as HTMLAnchorElement + expect(anchorElement.href).toMatch(mockUrl) + }) + + it('renders the download attribute', () => { + render( + + ) + + const element = document.querySelector('a') + + expect(element).toHaveAttribute('download', 'file.png') + }) + + it('renders the file size', () => { + const fileName = 'file.png' + + render( + + ) + + expect(screen.queryByText(`${fileName} (1 MB)`)).toBeInTheDocument() + }) + }) +}) diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-inline.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-inline.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..3cd85eb2135020fcc4eba85163bc9f5f0d47e57d GIT binary patch literal 12239 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 literal 0 HcmV?d00001 diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-value.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..d5d514f7f1f14b276bc190551e4cd82a71ba7b49 GIT binary patch literal 24042 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 literal 0 HcmV?d00001 diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-default-upload-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-default-upload-value.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..74789389807f6ae8e689d71e773d875498b43cd7 GIT binary patch literal 8051 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 Z9mH(TySz!a_qUm@rmU@0sbKx~zW`MFSoi<{ literal 0 HcmV?d00001 diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/index.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/index.ts new file mode 100644 index 00000000000..c2369c59991 --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/index.ts @@ -0,0 +1,2 @@ +export { default } from './Upload' +export * from './Upload' diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx new file mode 100644 index 00000000000..fdbff7d665e --- /dev/null +++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx @@ -0,0 +1,75 @@ +import { Form, Value } from '../../..' +import { Card } from '../../../../../components' + +export default { + title: 'Eufemia/Extensions/Forms/Value/Upload', +} + +function createMockFile(name: string, size: number, type: string) { + const file = new File([], name, { type }) + Object.defineProperty(file, 'size', { + get() { + return size + }, + }) + return file +} + +export function Upload() { + return ( + + + label.toUpperCase()} + > + + + + + + + label.toUpperCase()} + > + + + + + + + label.toUpperCase()} + > + + + + + + + ) +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/index.ts b/packages/dnb-eufemia/src/extensions/forms/Value/index.ts index 05e14cc75f4..bc35941251e 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Value/index.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Value/index.ts @@ -16,3 +16,4 @@ export { default as OrganizationNumber } from './OrganizationNumber' export { default as SelectCountry } from './SelectCountry' export { default as ArraySelection } from './ArraySelection' export { default as Selection } from './Selection' +export { default as Upload } from './Upload'