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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/file-input",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI FileInput",
     "repository": {
         "type": "git",
@@ -34,19 +34,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.16.1",
-        "@dhis2-ui/field": "10.16.1",
-        "@dhis2-ui/label": "10.16.1",
-        "@dhis2-ui/loader": "10.16.1",
-        "@dhis2-ui/status-icon": "10.16.1",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.1",
+        "@dhis2-ui/button": "10.16.3-alpha.1",
+        "@dhis2-ui/field": "10.16.3-alpha.1",
+        "@dhis2-ui/label": "10.16.3-alpha.1",
+        "@dhis2-ui/loader": "10.16.3-alpha.1",
+        "@dhis2-ui/status-icon": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",

package/src/file-input/__tests__/file-input.test.js

@@ -0,0 +1,28 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { FileInput } from '../file-input.js'
+
+describe('<FileInput />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <FileInput
+                name="foo"
+                value="bar"
+                checked={false}
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        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/features/accepts_multiple_files/index.js

@@ -0,0 +1,32 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileInput with multiple and onChange handler is rendered', () => {
+    cy.visitStory('FileInput', 'With on change and multiple')
+})
+
+When('the user selected multiple files', () => {
+    cy.get('[data-test="dhis2-uicore-fileinput"] input').uploadMultipleFiles(
+        [
+            { fileType: 'md', fixture: 'FileInput/file.md' },
+            { fileType: 'txt', fixture: 'FileInput/file.txt' },
+        ],
+        true
+    )
+})
+
+Then("the onChange handler's payload contains multiple files", () => {
+    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 file1 = files[0]
+        expect(file1.name).to.equal('file.md')
+
+        const file2 = files[1]
+        expect(file2.name).to.equal('file.txt')
+    })
+})

package/src/file-input/features/accepts_multiple_files.feature

@@ -0,0 +1,8 @@
+Feature: The FileInput can handle multiple files
+
+    Scenario: The user selects multiple files
+        Given a FileInput with multiple and onChange handler is rendered
+        And the FileInput does not have any files
+        When the user selected multiple files
+        Then the onChange handler is called
+        Then the onChange handler's payload contains multiple files

package/src/file-input/features/can_be_blurred/index.js

@@ -0,0 +1,23 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an FileInput with initialFocus and onBlur handler is rendered', () => {
+    cy.visitStory('FileInput', 'With initial focus and on blur')
+})
+
+When('the FileInput is blurred', () => {
+    cy.focused()
+    cy.get('[data-test="dhis2-uicore-fileinput"] button').blur()
+})
+
+Then('the onBlur handler is called', () => {
+    cy.window().then((win) => {
+        cy.get('[data-test="dhis2-uicore-fileinput"] input').should(
+            (fileInput) => {
+                expect(win.onBlur).to.be.calledWith({
+                    name: 'upload',
+                    files: fileInput[0].files,
+                })
+            }
+        )
+    })
+})

package/src/file-input/features/can_be_blurred.feature

@@ -0,0 +1,6 @@
+Feature: The FileInput has an onBlur api
+
+    Scenario: The user blurs the FileInput
+        Given an FileInput with initialFocus and onBlur handler is rendered
+        When the FileInput is blurred
+        Then the onBlur handler is called

package/src/file-input/features/can_be_changed/index.js

@@ -0,0 +1,26 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileInput with onChange handler is rendered', () => {
+    cy.visitStory('FileInput', 'With on change')
+})
+
+When('a file is selected', () => {
+    cy.get('[data-test="dhis2-uicore-fileinput"] input').uploadSingleFile(
+        '.md',
+        'FileInput/file.md'
+    )
+})
+
+Then("the onChange handler's payload contains the 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(1)
+
+        const file1 = files[0]
+        expect(file1.name).to.equal('file.md')
+    })
+})

package/src/file-input/features/can_be_changed.feature

@@ -0,0 +1,8 @@
+Feature: The FIleInput has an onChange api
+
+    Scenario: The user selects a file
+        Given a FileInput with onChange handler is rendered
+        And the FileInput does not have any files
+        When a file is selected
+        Then the onChange handler is called
+        Then the onChange handler's payload contains the file

package/src/file-input/features/can_be_focused/index.js

@@ -0,0 +1,22 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileInput with onFocus handler is rendered', () => {
+    cy.visitStory('FileInput', 'With on focus')
+})
+
+When('the FileInput is focused', () => {
+    cy.get('[data-test="dhis2-uicore-fileinput"] button').focus()
+})
+
+Then('the onFocus handler is called', () => {
+    cy.window().then((win) => {
+        cy.get('[data-test="dhis2-uicore-fileinput"] input').should(
+            (fileInput) => {
+                expect(win.onFocus).to.be.calledWith({
+                    name: 'upload',
+                    files: fileInput[0].files,
+                })
+            }
+        )
+    })
+})

package/src/file-input/features/can_be_focused.feature

@@ -0,0 +1,6 @@
+Feature: The FileInput has an onFocus api
+
+    Scenario: The user focuses the FileInput
+        Given a FileInput with onFocus handler is rendered
+        When the FileInput is focused
+        Then the onFocus handler is called

package/src/file-input/features/common/index.js

@@ -0,0 +1,21 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the FileInput does not have any files', () => {
+    cy.get('[data-test="dhis2-uicore-fileinput"] input').then(($input) => {
+        const files = $input[0].files
+        expect(files).to.have.lengthOf(0)
+    })
+})
+
+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/file-input.e2e.stories.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { FileInput } from './index.js'
+
+window.onBlur = window.Cypress && window.Cypress.cy.stub()
+window.onFocus = window.Cypress && window.Cypress.cy.stub()
+window.onChange = window.Cypress && window.Cypress.cy.stub()
+
+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: 'FileInput' }
+export const WithOnChange = () => (
+    <FileInput onChange={onChange} buttonLabel="Upload file" name="upload" />
+)
+export const WithOnChangeAndMultiple = () => (
+    <FileInput
+        name="upload"
+        onChange={onChange}
+        buttonLabel="Upload files"
+        multiple
+    />
+)
+export const WithInitialFocusAndOnBlur = () => (
+    <FileInput
+        buttonLabel="Upload file"
+        name="upload"
+        initialFocus
+        onBlur={window.onBlur}
+    />
+)
+export const WithOnFocus = () => (
+    <FileInput
+        buttonLabel="Upload file"
+        name="upload"
+        onFocus={window.onFocus}
+    />
+)

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

@@ -0,0 +1,159 @@
+import { colors, spacers, sharedPropTypes } from '@dhis2/ui-constants'
+import { IconUpload24 } from '@dhis2/ui-icons'
+import { Button } from '@dhis2-ui/button'
+import { StatusIcon } from '@dhis2-ui/status-icon'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { createRef, Component } from 'react'
+
+class FileInput extends Component {
+    static defaultProps = {
+        accept: '*',
+        dataTest: 'dhis2-uicore-fileinput',
+    }
+
+    ref = createRef()
+
+    handleClick = () => {
+        this.ref.current.click()
+    }
+
+    handleChange = (e) => {
+        if (this.props.onChange) {
+            this.props.onChange(this.createHandlerPayload(), e)
+        }
+
+        // reset the file input so it won't prevent on-change
+        // if the same file was added in a second attempt
+        this.ref.current.value = ''
+    }
+
+    handleBlur = (e) => {
+        if (this.props.onBlur) {
+            this.props.onBlur(this.createHandlerPayload(), e)
+        }
+    }
+
+    handleFocus = (e) => {
+        if (this.props.onFocus) {
+            this.props.onFocus(this.createHandlerPayload(), e)
+        }
+    }
+
+    handleKeyDown = (e) => {
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(this.createHandlerPayload(), e)
+        }
+    }
+
+    createHandlerPayload() {
+        return {
+            files: this.ref.current.files,
+            name: this.props.name,
+        }
+    }
+
+    render() {
+        const {
+            accept = '*',
+            buttonLabel,
+            className,
+            dataTest = 'dhis2-uicore-fileinput',
+            disabled,
+            error,
+            initialFocus,
+            large,
+            multiple,
+            name,
+            small,
+            tabIndex,
+            valid,
+            warning,
+        } = this.props
+
+        return (
+            <div className={cx('file-input', className)} data-test={dataTest}>
+                <div>
+                    <input
+                        id={name}
+                        name={name}
+                        type="file"
+                        ref={this.ref}
+                        onChange={this.handleChange}
+                        accept={accept}
+                        multiple={multiple}
+                        disabled={disabled}
+                        data-test={`${dataTest}-input`}
+                    />
+                    <Button
+                        disabled={disabled}
+                        icon={<IconUpload24 color={colors.grey700} />}
+                        initialFocus={initialFocus}
+                        large={large}
+                        onBlur={this.handleBlur}
+                        onClick={this.handleClick}
+                        onFocus={this.handleFocus}
+                        onKeyDown={this.handleKeyDown}
+                        small={small}
+                        tabIndex={tabIndex}
+                        type="button"
+                    >
+                        {buttonLabel}
+                    </Button>
+                </div>
+                <StatusIcon error={error} valid={valid} warning={warning} />
+
+                <style jsx>{`
+                    input {
+                        display: none;
+                    }
+
+                    .file-input {
+                        display: flex;
+                        align-items: center;
+                        gap: ${spacers.dp8};
+                        padding-bottom: ${spacers.dp4};
+                    }
+                `}</style>
+            </div>
+        )
+    }
+}
+
+FileInput.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,
+    buttonLabel: PropTypes.string,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    /** Input status. Mutually exclusive with `warning` and `valid` */
+    error: sharedPropTypes.statusPropType,
+    initialFocus: PropTypes.bool,
+    /** Button size. Mutually exclusive with `small` */
+    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: PropTypes.string,
+    /** Button size. Mutually exclusive with `large` */
+    small: sharedPropTypes.sizePropType,
+    tabIndex: PropTypes.string,
+    /** Input status. Mutually exclusive with `warning` and `error` */
+    valid: sharedPropTypes.statusPropType,
+    /** Input status. Mutually exclusive with `valid` and `error` */
+    warning: sharedPropTypes.statusPropType,
+    /** Called with signature `(object, event)` */
+    onBlur: PropTypes.func,
+    /** Called with signature `(object, event)` */
+    onChange: PropTypes.func,
+    /** Called with signature `(object, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `(object, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+export { FileInput }

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

@@ -0,0 +1,82 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { FileInput } from './index.js'
+
+const subtitle = `The file input component allows users to select and upload files from their local machine.`
+
+const description = `
+Use a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.
+
+\`\`\`js
+import { FileInput } from '@dhis2/ui'
+\`\`\`
+`
+
+const onChange = (payload, event) => {
+    console.log('onChange payload', payload)
+    console.log('onChange event', event)
+
+    // NOTE: if files is not transformed into an array,
+    // cypress will get an empty file list!
+    window.onChange &&
+        window.onChange(
+            {
+                ...payload,
+                files: [...payload.files],
+            },
+            event
+        )
+}
+
+const { sizeArgType, statusArgType } = sharedPropTypes
+
+export default {
+    title: 'File Input',
+    component: FileInput,
+    // Default args for each story unless overridden
+    args: { buttonLabel: 'Upload file', name: 'upload', onChange },
+    argTypes: {
+        valid: { ...statusArgType },
+        warning: { ...statusArgType },
+        error: { ...statusArgType },
+        small: { ...sizeArgType },
+        large: { ...sizeArgType },
+    },
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+}
+
+const Template = (args) => <FileInput {...args} />
+
+export const Default = Template.bind({})
+
+export const Multiple = Template.bind({})
+Multiple.args = { multiple: true, buttonLabel: 'Upload files' }
+
+export const Disabled = Template.bind({})
+Disabled.args = { disabled: true }
+
+export const Sizes = (args) => (
+    <>
+        <FileInput {...args} buttonLabel="Default size" name="default" />
+        <FileInput {...args} small buttonLabel="Small" name="small" />
+        <FileInput {...args} large buttonLabel="Large" name="large" />
+    </>
+)
+
+export const Statuses = (args) => (
+    <>
+        <FileInput {...args} buttonLabel="Default" name="default" />
+        <FileInput {...args} buttonLabel="Valid" name="valid" valid />
+        <FileInput {...args} buttonLabel="Warning" name="warning" warning />
+        <FileInput {...args} buttonLabel="Error" name="error" error />
+    </>
+)
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <FileInput {...args} buttonLabel="Default" name="default" />
+    </div>
+)

package/src/file-input/index.js

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

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

@@ -0,0 +1,29 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { FileInputField } from '../file-input-field.js'
+
+describe('<FileInputField />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <FileInputField
+                label="Label"
+                name="foo"
+                value="bar"
+                checked={false}
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        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/features/can_be_required/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FileInputField with label and a required flag is rendered', () => {
+    cy.visitStory('FileInputField', 'With label and required')
+})
+
+Then('the required indicator is visible', () => {
+    cy.get('[data-test="dhis2-uicore-label-required"]').should('be.visible')
+})

package/src/file-input-field/features/can_be_required.feature

@@ -0,0 +1,5 @@
+Feature: Required status for the FileInputField
+
+    Scenario: Rendering a FileInputField that is required
+        Given a FileInputField with label and a required flag is rendered
+        Then the required indicator is visible

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { FileInputField } from './file-input-field.js'
+
+export default { title: 'FileInputField' }
+export const WithLabelAndRequired = () => (
+    <FileInputField
+        name="upload"
+        label="upload something"
+        buttonLabel="Upload file"
+        required
+    />
+)
+export const Default = () => (
+    <FileInputField name="upload" label="upload something" />
+)