@dhis2-ui/file-input 10.16.2 → 10.16.3-alpha.1

package/src/file-input-field/file-input-field.js

@@ -0,0 +1,139 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Field } from '@dhis2-ui/field'
+import { Label } from '@dhis2-ui/label'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { FileInput } from '../file-input/index.js'
+import { FileList, FileListPlaceholder } from '../file-list/index.js'
+import i18n from '../locales/index.js'
+
+// TODO: i18n
+const translate = (prop, interpolationObject) => {
+    if (typeof prop === 'function') {
+        return prop(interpolationObject)
+    }
+
+    return prop
+}
+
+const defaultButtonLabel = () => i18n.t('Upload a file')
+const defaultPlaceholder = () => i18n.t('No file uploaded yet')
+const FileInputField = ({
+    accept = '*',
+    buttonLabel = defaultButtonLabel,
+    children,
+    className,
+    dataTest = 'dhis2-uiwidgets-fileinputfield',
+    disabled,
+    error,
+    helpText,
+    initialFocus,
+    label,
+    large,
+    multiple,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    placeholder = defaultPlaceholder,
+    required,
+    small,
+    tabIndex,
+    valid,
+    validationText,
+    warning,
+}) => (
+    <Field
+        className={className}
+        dataTest={dataTest}
+        helpText={helpText}
+        validationText={validationText}
+        error={error}
+        warning={warning}
+        valid={valid}
+    >
+        {label && (
+            <Label required={required} disabled={disabled} htmlFor={name}>
+                {label}
+            </Label>
+        )}
+
+        <FileInput
+            accept={accept}
+            buttonLabel={translate(buttonLabel)}
+            className={className}
+            disabled={disabled}
+            error={error}
+            initialFocus={initialFocus}
+            large={large}
+            multiple={multiple}
+            name={name}
+            onBlur={onBlur}
+            onChange={onChange}
+            onFocus={onFocus}
+            onKeyDown={onKeyDown}
+            small={small}
+            tabIndex={tabIndex}
+            valid={valid}
+            warning={warning}
+        />
+
+        <FileList>
+            {children ? (
+                children
+            ) : (
+                <FileListPlaceholder>
+                    {translate(placeholder)}
+                </FileListPlaceholder>
+            )}
+        </FileList>
+    </Field>
+)
+
+FileInputField.propTypes = {
+    /** The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */
+    accept: PropTypes.string,
+    /** Text on the button */
+    buttonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Disables the button */
+    disabled: PropTypes.bool,
+    /** Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props */
+    error: sharedPropTypes.statusPropType,
+    /** Useful guiding text for the user */
+    helpText: PropTypes.string,
+    initialFocus: PropTypes.bool,
+    /** A descriptive label above the button */
+    label: PropTypes.string,
+    /** Size of the button. Mutually exclusive with the `small` prop */
+    large: sharedPropTypes.sizePropType,
+    /** The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) */
+    multiple: PropTypes.bool,
+    /** Name associated with input. Passed to event handler callbacks */
+    name: PropTypes.string,
+    /** Placeholder below the button */
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Adds an asterisk to indicate this field is required */
+    required: PropTypes.bool,
+    /** Size of the button. Mutually exclusive with the `large` prop */
+    small: sharedPropTypes.sizePropType,
+    tabIndex: PropTypes.string,
+    /** Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Text below the button that provides validation feedback */
+    validationText: PropTypes.string,
+    /** Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+    onBlur: PropTypes.func,
+    /** Called with signature `({ name: string, files: [] }, event)` */
+    onChange: PropTypes.func,
+    /** Called with signature `({ name: string, files: [] }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `({ name: string, files: [] }, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+export { FileInputField }

package/src/file-input-field/file-input-field.prod.stories.js

@@ -0,0 +1,167 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { FileListItem } from '../index.js'
+import { FileInputField } from './file-input-field.js'
+
+const description = `
+The \`FileInputField\` component wraps the \`FileInput\` component in a \`Field\` wrapper to add labels, help text, and validation text.
+
+\`\`\`js
+import { FileInputField, FileListItem } from '@dhis2/ui'
+\`\`\`
+`
+
+const onChange = (obj) => console.log('onChange', obj)
+const onRemove = () => console.log('onRemove')
+const onCancel = () => console.log('onCancel')
+
+export default {
+    title: 'File Input Field',
+    component: FileInputField,
+    parameters: { docs: { description: { component: description } } },
+    // Default args:
+    args: {
+        // Handle default values (see comment in Transfer.js)
+        accept: '*',
+        dataTest: 'dhis2-uiwidgets-fileinputfield',
+        placeholder: 'No file uploaded yet',
+        onChange: onChange,
+        name: 'uploadName',
+        label: 'Upload something',
+        buttonLabel: 'Upload a file',
+    },
+    argTypes: {
+        small: { ...sharedPropTypes.sizeArgType },
+        large: { ...sharedPropTypes.sizeArgType },
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <FileInputField {...args} />
+
+export const Default = Template.bind({})
+Default.args = { label: null }
+
+export const WithLabel = Template.bind({})
+
+export const Required = Template.bind({})
+Required.args = { required: true }
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+    multiple: true,
+    label: 'Upload multiple things',
+    buttonLabel: 'Upload files',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = { disabled: true }
+
+export const Sizes = (args) => (
+    <>
+        <FileInputField
+            {...args}
+            buttonLabel="Default size"
+            name="defaultName"
+        />
+        <FileInputField {...args} buttonLabel="Small" small name="smallName" />
+        <FileInputField {...args} buttonLabel="Large" large name="largeName" />
+    </>
+)
+
+export const Statuses = (args) => (
+    <>
+        <FileInputField {...args} buttonLabel="Default" name="defaultName" />
+        <FileInputField {...args} buttonLabel="Valid" name="validName" valid />
+        <FileInputField
+            {...args}
+            buttonLabel="Warning"
+            name="warningName"
+            warning
+        />
+        <FileInputField
+            {...args}
+            buttonLabel="Error"
+            name="errorName"
+            error
+            validationText="Something went wrong"
+        />
+    </>
+)
+
+export const FileList = (args) => (
+    <div style={{ width: 250 }}>
+        <FileInputField {...args}>
+            <FileListItem
+                label="picture1.jpg"
+                onRemove={onRemove}
+                onCancel={onCancel}
+                cancelText="Cancel"
+                removeText="Remove"
+            />
+            <FileListItem
+                label="image_that_is_uploading.jpg"
+                onRemove={onRemove}
+                onCancel={onCancel}
+                cancelText="Cancel"
+                removeText="Remove"
+                loading
+            />
+            <FileListItem
+                label="image_file_name_is_to_long_to_display_on_one_line.jpg"
+                onRemove={onRemove}
+                onCancel={onCancel}
+                cancelText="Cancel"
+                removeText="Remove"
+            />
+        </FileInputField>
+        <br />
+        <p style={{ color: 'grey' }}>
+            <em>Bounding box is 250px wide</em>
+        </p>
+    </div>
+)
+
+export const PlaceholderText = Template.bind({})
+PlaceholderText.args = { placeholder: 'No file(s) selected yet' }
+
+export const HelpText = Template.bind({})
+HelpText.args = { helpText: 'Please select any file type' }
+
+export const DesignSystemStackingOrder = (args) => (
+    <FileInputField {...args}>
+        <FileListItem
+            label="TestFile.txt"
+            onRemove={onRemove}
+            removeText="remove"
+        />
+        <FileListItem
+            label="BusyFile.txt"
+            onRemove={onRemove}
+            onCancel={onCancel}
+            cancelText="cancel"
+            removeText="remove"
+            loading
+        />
+    </FileInputField>
+)
+DesignSystemStackingOrder.args = {
+    error: true,
+    validationText: 'Oops!',
+    placeholder: 'Select a file',
+    helpText: 'Please upload something',
+}
+
+export const DesignSystemStackingOrderEmptyFileList = Template.bind({})
+DesignSystemStackingOrderEmptyFileList.args = {
+    ...DesignSystemStackingOrder.args,
+}
+DesignSystemStackingOrderEmptyFileList.storyName =
+    'Design system stacking order - empty file list'
+
+export const DefaultButtonLabelAndPlaceholder = Template.bind({})
+DefaultButtonLabelAndPlaceholder.args = { label: null }
+DefaultButtonLabelAndPlaceholder.storyName =
+    'Default: buttonLabel and placeholder'

package/src/file-input-field/index.js

@@ -0,0 +1 @@
+export { FileInputField } from './file-input-field.js'

package/src/file-input-field-with-list/__tests__/file-input-field-with-list.test.js

@@ -0,0 +1,30 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { FileInputFieldWithList } from '../file-input-field-with-list.js'
+
+describe('<FileInputFieldWithList />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <FileInputFieldWithList
+                label="Label"
+                name="foo"
+                value="bar"
+                checked={false}
+                onKeyDown={onKeyDown}
+                onChange={jest.fn()}
+            />
+        )
+
+        fireEvent.keyDown(screen.getByRole('button'), {})
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+
+        const input = screen.getByTestId('dhis2-uicore-fileinput-input')
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { name: 'foo', files: input.files },
+            expect.objectContaining({})
+        )
+    })
+})

package/src/file-input-field-with-list/features/common/index.js

@@ -0,0 +1,18 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileInputFieldWithList with multiple files is rendered', () => {
+    cy.visitStory('FileInputFieldWithList', 'Multiple files - with files')
+})
+
+Then('the onChange handler is called', () => {
+    cy.window().should((win) => {
+        const calls = win.onChange.getCalls()
+        expect(calls).to.have.lengthOf(1)
+
+        const callArgs = calls[0].args
+        expect(callArgs).to.have.lengthOf(2)
+
+        const payload = callArgs[0]
+        expect(Object.keys(payload)).to.include.members(['files', 'name'])
+    })
+})

package/src/file-input-field-with-list/features/deduplicates_the_file_list/index.js

@@ -0,0 +1,43 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the list contains the file duplicate.md', () => {
+    cy.contains('duplicate.md')
+        .should('have.lengthOf', 1)
+        .should('have.class', 'label')
+        .closest('[data-test="dhis2-uicore-filelistitem"]')
+        .should('have.lengthOf', 1)
+})
+
+When('the file duplicate.md is selected', () => {
+    cy.window().then((win) => {
+        cy.get('[data-test="dhis2-uicore-fileinput"] input')
+            .then(($input) => {
+                // name, lastModified, size and type are equal to the file created in the story
+                const duplicate = new File(...win.duplicateFileConstructorArgs)
+                const dataTransfer = new DataTransfer()
+
+                dataTransfer.items.add(duplicate)
+                $input[0].files = dataTransfer.files
+            })
+            .trigger('change', { force: true })
+    })
+})
+
+Then(
+    "the onChange handler's payload contains a single entry for file.md",
+    () => {
+        cy.window().should((win) => {
+            const calls = win.onChange.getCalls()
+            const callArgs = calls[0].args
+            const payload = callArgs[0]
+            const files = payload.files
+
+            expect(files).to.have.lengthOf(3)
+
+            const filesWithNameFileMd = files.filter(
+                (f) => f.name === 'duplicate.md'
+            )
+            expect(filesWithNameFileMd).to.have.lengthOf(1)
+        })
+    }
+)

package/src/file-input-field-with-list/features/deduplicates_the_file_list.feature

@@ -0,0 +1,8 @@
+Feature: The FileInputFieldWithList deduplicates the file list
+
+    Scenario: The file list is deduplicated
+        Given a FileInputFieldWithList with multiple files is rendered
+        And the list contains the file duplicate.md
+        When the file duplicate.md is selected
+        Then the onChange handler is called
+        Then the onChange handler's payload contains a single entry for file.md

package/src/file-input-field-with-list/features/disables_button_when_full/index.js

@@ -0,0 +1,13 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileInputFieldWithList without multiple is rendered', () => {
+    cy.visitStory('FileInputFieldWithList', 'Single file - with file')
+})
+
+Given('the FileInputFieldWithList holds a file', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem"]').should('have.lengthOf', 1)
+})
+
+Then('the button is disabled', () => {
+    cy.get('[data-test="dhis2-uicore-button"]').should('have.attr', 'disabled')
+})

package/src/file-input-field-with-list/features/disables_button_when_full.feature

@@ -0,0 +1,6 @@
+Feature: The FileInputFieldWithList disables its button when full
+
+    Scenario: The button is disabled when the fileInput is full
+        Given a FileInputFieldWithList without multiple is rendered
+        And the FileInputFieldWithList holds a file
+        Then the button is disabled

package/src/file-input-field-with-list/features/displays_files_in_a_list/index.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('the files are displayed in a list', () => {
+    cy.get('[data-test="dhis2-uicore-filelistitem"] .label')
+        .then(($labels) => $labels.map((_, el) => el.innerHTML).toArray())
+        .should('deep.equal', ['test1.md', 'duplicate.md', 'test2.md'])
+})

package/src/file-input-field-with-list/features/displays_files_in_a_list.feature

@@ -0,0 +1,5 @@
+Feature: The FileInputFieldWithList displays files in a list
+
+    Scenario: Files are displayed in a list
+        Given a FileInputFieldWithList with multiple files is rendered
+        Then the files are displayed in a list

package/src/file-input-field-with-list/features/files_can_be_removed/index.js

@@ -0,0 +1,24 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+When('the remove handle behind a file is clicked', () => {
+    cy.contains('test1.md')
+        .siblings('[data-test="dhis2-uicore-filelistitem-remove"]')
+        .click()
+})
+
+Then(
+    "the onChange handler's payload does not contain an entry for that file",
+    () => {
+        cy.window().should((win) => {
+            const calls = win.onChange.getCalls()
+            const callArgs = calls[0].args
+
+            const payload = callArgs[0]
+            const files = payload.files
+            expect(files).to.have.lengthOf(2)
+
+            const filtered = files.filter((file) => file.name === 'test1.md')
+            expect(filtered).to.have.lengthOf(0)
+        })
+    }
+)

package/src/file-input-field-with-list/features/files_can_be_removed.feature

@@ -0,0 +1,7 @@
+Feature: Files can be removed from FileInputFieldWithList
+
+    Scenario: Files can be removed from the file list
+        Given a FileInputFieldWithList with multiple files is rendered
+        When the remove handle behind a file is clicked
+        Then the onChange handler is called
+        Then the onChange handler's payload does not contain an entry for that file

package/src/file-input-field-with-list/features/has_default_button_label/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a default FileInputFieldWithList is rendered', () => {
+    cy.visitStory('FileInputFieldWithList', 'With default texts')
+})
+
+Then('the default button label is visible', () => {
+    cy.contains('Upload a file').should('be.visible')
+})

package/src/file-input-field-with-list/features/has_default_button_label.feature

@@ -0,0 +1,5 @@
+Feature: Button label for the FileInputFieldWithList
+
+    Scenario: Rendering a FileInputFieldWithList
+        Given a default FileInputFieldWithList is rendered
+        Then the default button label is visible

package/src/file-input-field-with-list/features/has_default_placeholder/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a default FileInputFieldWithList is rendered', () => {
+    cy.visitStory('FileInputFieldWithList', 'With default texts')
+})
+
+Then('the default placeholder is visible', () => {
+    cy.contains('No file uploaded yet').should('be.visible')
+})

package/src/file-input-field-with-list/features/has_default_placeholder.feature

@@ -0,0 +1,5 @@
+Feature: Placeholder for the FileInputFieldWithList
+
+    Scenario: Rendering a FileInputFieldWithList
+        Given a default FileInputFieldWithList is rendered
+        Then the default placeholder is visible

package/src/file-input-field-with-list/features/has_default_remove_text/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a default FileInputFieldWithList is rendered', () => {
+    cy.visitStory('FileInputFieldWithList', 'With file and default texts')
+})
+
+Then('the default remove text is visible', () => {
+    cy.contains('Remove').should('be.visible')
+})

package/src/file-input-field-with-list/features/has_default_remove_text.feature

@@ -0,0 +1,5 @@
+Feature: Placeholder for the FileInputFieldWithList
+
+    Scenario: Rendering a FileInputFieldWithList
+        Given a default FileInputFieldWithList is rendered
+        Then the default remove text is visible

package/src/file-input-field-with-list/file-input-field-with-list.e2e.stories.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { FileInputFieldWithList } from './index.js'
+
+window.onChange = window.Cypress && window.Cypress.cy.stub()
+
+const singleFileArray = [new File([], 'dummy.txt')]
+
+window.duplicateFileConstructorArgs = [
+    [],
+    'duplicate.md',
+    {
+        lastModified: 1581348175357,
+        type: 'text/markdown',
+    },
+]
+
+const multipleFileArray = [
+    new File([], 'test1.md'),
+    new File(...window.duplicateFileConstructorArgs),
+    new File([], 'test2.md'),
+]
+
+const onChange = (payload, event) => {
+    // NOTE: if files is not transformed into an array,
+    // cypress will get an empty file list!
+    window.onChange(
+        {
+            ...payload,
+            files: [...payload.files],
+        },
+        event
+    )
+}
+
+export default { title: 'FileInputFieldWithList' }
+export const SingleFileWithFile = () => (
+    <FileInputFieldWithList
+        buttonLabel="Upload file"
+        name="upload"
+        files={singleFileArray}
+        removeText="remove"
+        onChange={onChange}
+    />
+)
+export const MultipleFilesEmpty = () => (
+    <FileInputFieldWithList
+        buttonLabel="Upload file"
+        multiple
+        name="upload"
+        removeText="remove"
+        onChange={onChange}
+    />
+)
+export const MultipleFilesWithFiles = () => (
+    <FileInputFieldWithList
+        buttonLabel="Upload file"
+        multiple
+        name="upload"
+        files={multipleFileArray}
+        removeText="remove"
+        onChange={onChange}
+    />
+)
+export const WithFileAndDefaultTexts = () => (
+    <FileInputFieldWithList
+        name="upload"
+        files={singleFileArray}
+        onChange={onChange}
+    />
+)
+export const WithDefaultTexts = () => (
+    <FileInputFieldWithList name="upload" onChange={onChange} />
+)