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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/input",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Input",
     "repository": {
         "type": "git",
@@ -33,19 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "10.16.2",
-        "@dhis2-ui/field": "10.16.2",
-        "@dhis2-ui/input": "10.16.2",
-        "@dhis2-ui/loader": "10.16.2",
-        "@dhis2-ui/status-icon": "10.16.2",
-        "@dhis2/ui-constants": "10.16.2",
-        "@dhis2/ui-icons": "10.16.2",
+        "@dhis2-ui/box": "10.16.3-alpha.1",
+        "@dhis2-ui/field": "10.16.3-alpha.1",
+        "@dhis2-ui/input": "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": {
         "react": "^18.3.1",

package/src/index.js

@@ -0,0 +1,2 @@
+export { Input } from './input/index.js'
+export { InputField, InputFieldProps } from './input-field/index.js'

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

@@ -0,0 +1,29 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import { shallow } from 'enzyme'
+import React from 'react'
+import { Input } from '../input.js'
+
+describe('<Input>', () => {
+    it('passes min, max, and step props as attributes to the native <input> element', () => {
+        const testProps = { min: '0', max: '10', step: '0.5' }
+        const wrapper = shallow(<Input type="number" {...testProps} />)
+
+        const inputEl = wrapper.find('input')
+        expect(inputEl.props()).toMatchObject(testProps)
+    })
+
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(<Input name="foo" value="bar" onKeyDown={onKeyDown} />)
+
+        fireEvent.keyDown(screen.getByRole('textbox'), {})
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { name: 'foo', value: 'bar' },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

package/src/input/features/accepts_initial_focus/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Input with initialFocus is rendered', () => {
+    cy.visitStory('Input', 'With initial focus')
+})
+
+Then('the Input is focused', () => {
+    cy.focused().parent('[data-test="dhis2-uicore-input"]').should('exist')
+})

package/src/input/features/accepts_initial_focus.feature

@@ -0,0 +1,5 @@
+Feature: Focusing the Input on mount
+
+    Scenario: The Input renders with focus
+        Given a Input with initialFocus is rendered
+        Then the Input is focused

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

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

package/src/input/features/can_be_blurred.feature

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

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

@@ -0,0 +1,18 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Input with onChange handler is rendered', () => {
+    cy.visitStory('Input', 'With on change')
+})
+
+When('the Input is filled with a character', () => {
+    cy.get('[data-test="dhis2-uicore-input"]').click().type('a')
+})
+
+Then('the onChange handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onChange).to.be.calledWith({
+            value: 'a',
+            name: 'Default',
+        })
+    })
+})

package/src/input/features/can_be_changed.feature

@@ -0,0 +1,6 @@
+Feature: The Input has an onChange api
+
+    Scenario: The user types a character into the Input
+        Given a Input with onChange handler is rendered
+        When the Input is filled with a character
+        Then the onChange handler is called

package/src/input/features/can_be_disabled/index.js

@@ -0,0 +1,13 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a disabled Input is rendered', () => {
+    cy.visitStory('Input', 'With disabled')
+})
+
+When('the user clicks the input', () => {
+    cy.get('[data-test="dhis2-uicore-input"] input').click({ force: true })
+})
+
+Then('the Input is not focused', () => {
+    cy.focused().should('not.exist')
+})

package/src/input/features/can_be_disabled.feature

@@ -0,0 +1,6 @@
+Feature: The Input can be disabled
+
+    Scenario: The user clicks a disabled Input
+        Given a disabled Input is rendered
+        When the user clicks the input
+        Then the Input is not focused

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

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

package/src/input/features/can_be_focused.feature

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

package/src/input/index.js

@@ -0,0 +1,2 @@
+export { Input } from './input.js'
+export { inputTypes } from './inputTypes.js'

package/src/input/input.e2e.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Input } from './index.js'
+
+window.onChange = window.Cypress && window.Cypress.cy.stub()
+window.onBlur = window.Cypress && window.Cypress.cy.stub()
+window.onFocus = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'Input' }
+export const WithOnChange = () => (
+    <Input
+        label="Default label"
+        name="Default"
+        value=""
+        onChange={window.onChange}
+    />
+)
+export const WithInitialFocusAndOnBlur = () => (
+    <Input
+        label="Default label"
+        name="Default"
+        value=""
+        initialFocus
+        onBlur={window.onBlur}
+    />
+)
+export const WithOnFocus = () => (
+    <Input
+        label="Default label"
+        name="Default"
+        value=""
+        onFocus={window.onFocus}
+    />
+)
+export const WithInitialFocus = () => (
+    <Input label="Default label" name="Default" value="" initialFocus />
+)
+export const WithDisabled = () => (
+    <Input label="Default label" name="Default" value="" disabled />
+)

package/src/input/input.js

@@ -0,0 +1,344 @@
+import { theme, colors, spacers, sharedPropTypes } from '@dhis2/ui-constants'
+import { IconCross16 } from '@dhis2/ui-icons'
+import { StatusIcon } from '@dhis2-ui/status-icon'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import css from 'styled-jsx/css'
+import { inputTypes } from './inputTypes.js'
+
+const styles = css`
+    .input {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        gap: ${spacers.dp8};
+    }
+
+    input {
+        box-sizing: border-box;
+
+        font-size: 14px;
+        line-height: 16px;
+        user-select: text;
+
+        color: ${colors.grey900};
+        background-color: white;
+
+        padding: 11px 12px;
+        max-height: 40px;
+
+        outline: 0;
+        border: 1px solid ${colors.grey500};
+        border-radius: 3px;
+        box-shadow: inset 0 0 1px 0 rgba(48, 54, 60, 0.1);
+        text-overflow: ellipsis;
+    }
+
+    input.dense {
+        max-height: 32px;
+        padding: 7px 8px;
+    }
+
+    input:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 2px ${theme.focus};
+        border-color: ${theme.focus};
+    }
+
+    input::placeholder {
+        color: ${colors.grey600};
+        opacity: 1;
+    }
+
+    input[type='date']::-webkit-inner-spin-button,
+    input[type='date']::-webkit-calendar-picker-indicator,
+    input[type='time']::-webkit-inner-spin-button,
+    input[type='time']::-webkit-calendar-picker-indicator,
+    input[type='datetime-local']::-webkit-inner-spin-button,
+    input[type='datetime-local']::-webkit-calendar-picker-indicator {
+        height: 14px;
+        padding-top: 1px;
+        padding-bottom: 1px;
+    }
+
+    input[type='date']::-webkit-datetime-edit-fields-wrapper,
+    input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper,
+    input[type='time']::-webkit-datetime-edit-fields-wrapper {
+        padding: 0;
+    }
+
+    input.warning {
+        border-color: ${theme.warning};
+    }
+
+    input.error {
+        border-color: ${theme.error};
+    }
+
+    input.read-only {
+        background-color: ${colors.grey050};
+        border-color: ${colors.grey300};
+        box-shadow: none;
+        cursor: text;
+    }
+
+    input.disabled {
+        background-color: ${colors.grey100};
+        border-color: ${colors.grey500};
+        color: ${theme.disabled};
+        cursor: not-allowed;
+    }
+`
+
+export class Input extends Component {
+    static defaultProps = {
+        type: 'text',
+        dataTest: 'dhis2-uicore-input',
+    }
+
+    inputRef = React.createRef()
+
+    componentDidMount() {
+        if (this.props.initialFocus) {
+            this.inputRef.current.focus()
+        }
+    }
+
+    handleChange = (e) => {
+        if (this.props.onChange) {
+            this.props.onChange(this.createHandlerPayload(e), e)
+        }
+    }
+
+    handleBlur = (e) => {
+        if (this.props.onBlur) {
+            this.props.onBlur(this.createHandlerPayload(e), e)
+        }
+    }
+
+    handleFocus = (e) => {
+        if (this.props.onFocus) {
+            this.props.onFocus(this.createHandlerPayload(e), e)
+        }
+    }
+
+    handleKeyDown = (e) => {
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(this.createHandlerPayload(e), e)
+        }
+    }
+
+    handleClear = () => {
+        if (this.props.onChange) {
+            this.props.onChange({
+                value: '',
+                name: this.props.name,
+            })
+        }
+    }
+
+    createHandlerPayload(e) {
+        return {
+            value: e.target.value,
+            name: this.props.name,
+        }
+    }
+
+    render() {
+        const {
+            role,
+            ariaLabel,
+            ariaControls,
+            ariaHaspopup,
+            className,
+            type = 'text',
+            dense,
+            disabled,
+            readOnly,
+            placeholder,
+            name,
+            valid,
+            error,
+            warning,
+            loading,
+            value,
+            tabIndex,
+            max,
+            min,
+            step,
+            autoComplete,
+            dataTest = 'dhis2-uicore-input',
+            clearable,
+            prefixIcon,
+            width,
+        } = this.props
+
+        const statusIcon = error || loading || valid || warning
+        const clearButtonPadding = statusIcon ? '40px' : '10px'
+
+        return (
+            <div
+                className={cx(
+                    'input',
+                    className,
+                    { 'input-prefix-icon': prefixIcon },
+                    { 'input-clearable': clearable }
+                )}
+                data-test={dataTest}
+            >
+                {prefixIcon && <span className="prefix">{prefixIcon}</span>}
+                <input
+                    aria-label={ariaLabel}
+                    aria-controls={ariaControls}
+                    aria-haspopup={ariaHaspopup}
+                    role={role}
+                    id={name}
+                    name={name}
+                    placeholder={placeholder}
+                    ref={this.inputRef}
+                    type={type}
+                    value={value}
+                    max={max}
+                    min={min}
+                    step={step}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    tabIndex={tabIndex}
+                    autoComplete={autoComplete}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
+                    onChange={this.handleChange}
+                    onKeyDown={this.handleKeyDown}
+                    className={cx({
+                        dense,
+                        disabled,
+                        error,
+                        valid,
+                        warning,
+                        'read-only': readOnly,
+                    })}
+                />
+                {clearable && value?.length ? (
+                    <button
+                        type="button"
+                        onClick={this.handleClear}
+                        className="clear-button"
+                    >
+                        <IconCross16 color={colors.white} />
+                    </button>
+                ) : null}
+                <StatusIcon
+                    error={error}
+                    valid={valid}
+                    loading={loading}
+                    warning={warning}
+                />
+
+                <style jsx>{styles}</style>
+                <style jsx>{`
+                    .input {
+                        width: ${width || `100%`};
+                    }
+
+                    input {
+                        width: 100%;
+                    }
+
+                    .input-prefix-icon input {
+                        padding-inline-start: 30px;
+                    }
+
+                    .input-clearable input {
+                        padding-inline-end: 30px;
+                    }
+
+                    .prefix {
+                        position: absolute;
+                        display: flex;
+                        align-items: center;
+                        pointer-events: none;
+                        inset-inline-start: 10px;
+                        padding: 0;
+                        color: ${colors.grey600};
+                    }
+
+                    .clear-button {
+                        position: absolute;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border: none;
+                        cursor: pointer;
+                        height: 16px;
+                        width: 16px;
+                        border-radius: 50%;
+                        inset-inline-end: ${clearButtonPadding};
+                        background: ${colors.grey500};
+                        padding: 1px;
+                    }
+                `}</style>
+            </div>
+        )
+    }
+}
+
+Input.propTypes = {
+    /** Add an aria-controls attribute to the input element **/
+    ariaControls: PropTypes.string,
+    /** Add an aria-haspopup attribute to the input element **/
+    ariaHaspopup: PropTypes.string,
+    /** Add an aria-label attribute to the input element **/
+    ariaLabel: PropTypes.string,
+    /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
+    autoComplete: PropTypes.string,
+    className: PropTypes.string,
+    /** Makes the input field clearable */
+    clearable: PropTypes.bool,
+    dataTest: PropTypes.string,
+    /** Makes the input smaller */
+    dense: PropTypes.bool,
+    /** Disables the input */
+    disabled: PropTypes.bool,
+    /** Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props */
+    error: sharedPropTypes.statusPropType,
+    /** The input grabs initial focus on the page */
+    initialFocus: PropTypes.bool,
+    /** Adds a loading indicator beside the input */
+    loading: PropTypes.bool,
+    /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` */
+    max: PropTypes.string,
+    /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` */
+    min: PropTypes.string,
+    /** Name associated with the input. Passed to event handler callbacks in object */
+    name: PropTypes.string,
+    /** Placeholder text for the input */
+    placeholder: PropTypes.string,
+    /** Add prefix icon */
+    prefixIcon: PropTypes.element,
+    /** Makes the input read-only */
+    readOnly: PropTypes.bool,
+    /** Sets a role attribute on the input */
+    role: PropTypes.string,
+    /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` */
+    step: PropTypes.string,
+    tabIndex: PropTypes.string,
+    /** The native input `type` attribute */
+    type: PropTypes.oneOf(inputTypes),
+    /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object */
+    value: PropTypes.string,
+    /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+    /** Defines the width of the input. Can be any valid CSS measurement */
+    width: PropTypes.string,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onBlur: PropTypes.func,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onChange: PropTypes.func,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onKeyDown: PropTypes.func,
+}

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

@@ -0,0 +1,134 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { Input } from './index.js'
+
+const description = `
+An input allows a user to enter data, usually text.
+
+Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
+
+To use a label and validation text, consider the \`InputField\` component.
+
+Read more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).
+
+\`\`\`js
+import { Input } from '@dhis/ui'
+\`\`\`
+`
+
+const inputTypeArgType = {
+    table: { type: { summary: 'string' } },
+    control: {
+        type: 'select',
+        options: [
+            'text',
+            'number',
+            'password',
+            'email',
+            'url',
+            'tel',
+            'date',
+            'datetime',
+            'datetime-local',
+            'month',
+            'week',
+            'time',
+            'search',
+        ],
+    },
+}
+
+const logger = ({ name, value }) =>
+    console.log(`Name: ${name}, value: ${value}`)
+
+export default {
+    title: 'Input',
+    component: Input,
+    parameters: {
+        docs: { description: { component: description } },
+    },
+    args: {
+        name: 'defaultName',
+        onChange: logger,
+    },
+    argTypes: {
+        type: { ...inputTypeArgType },
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <Input {...args} />
+
+export const Default = Template.bind({})
+
+export const NoPlaceholderNoValue = Template.bind({})
+NoPlaceholderNoValue.storyName = 'No placeholder, no value'
+
+export const PlaceholderNoValue = Template.bind({})
+PlaceholderNoValue.args = { placeholder: 'Hold the place' }
+PlaceholderNoValue.storyName = 'Placeholder, no value'
+
+export const WithValue = Template.bind({})
+WithValue.args = {
+    value: 'This is set through the value prop, which means the component is controlled.',
+}
+
+export const NumberMaxMinStep = Template.bind({})
+NumberMaxMinStep.args = {
+    type: 'number',
+    max: '3',
+    min: '0',
+    step: '0.5',
+}
+
+export const Focus = Template.bind({})
+Focus.args = { initialFocus: true }
+// Disabled initial focus stories on docs page
+Focus.parameters = { docs: { disable: true } }
+
+export const StatusValid = Template.bind({})
+StatusValid.args = { valid: true, value: 'This value is valid' }
+StatusValid.storyName = 'Status: Valid'
+
+export const StatusWarning = Template.bind({})
+StatusWarning.args = { warning: true, value: 'This value produces a warning' }
+StatusWarning.storyName = 'Status: Warning'
+
+export const StatusError = Template.bind({})
+StatusError.args = { error: true, value: 'This value produces an error' }
+StatusError.storyName = 'Status: Error'
+
+export const StatusLoading = Template.bind({})
+StatusLoading.args = {
+    loading: true,
+    value: 'This value produces a loading state',
+}
+StatusLoading.storyName = 'Status: Loading'
+
+export const Disabled = Template.bind({})
+Disabled.args = { disabled: true, value: 'This field is disabled' }
+
+export const ReadOnly = Template.bind({})
+ReadOnly.args = { readOnly: true, value: 'This field is read-only' }
+
+export const Dense = Template.bind({})
+Dense.args = { dense: true, value: 'This field is dense' }
+
+export const ValueTextOverflow = Template.bind({})
+ValueTextOverflow.args = {
+    value: "This value is too long in order to show on a single line of the input field. It should stay on one line, not in an extra line and which wouldn't look like a standard input",
+    dense: true,
+    warning: true,
+}
+
+export const RTLErrorPlaceholder = (args) => (
+    <div dir="rtl">
+        <Input {...args} />
+    </div>
+)
+RTLErrorPlaceholder.args = {
+    error: true,
+    placeholder: 'RTL placeholder',
+}

package/src/input/inputTypes.js

@@ -0,0 +1,15 @@
+export const inputTypes = [
+    'text',
+    'number',
+    'password',
+    'email',
+    'url',
+    'tel',
+    'date',
+    'datetime',
+    'datetime-local',
+    'month',
+    'week',
+    'time',
+    'search',
+]

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

@@ -0,0 +1,27 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { InputField } from '../input-field.js'
+
+describe('<Input>', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <InputField
+                label="label"
+                name="foo"
+                value="bar"
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        fireEvent.keyDown(screen.getByRole('textbox'), {})
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { name: 'foo', value: 'bar' },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

package/src/input-field/features/can_be_required/index.js

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

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

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

package/src/input-field/index.js

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

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

@@ -0,0 +1,7 @@
+import React from 'react'
+import { InputField } from './index.js'
+
+export default { title: 'InputField' }
+export const WithLabelAndRequired = () => (
+    <InputField label="Default label" name="Default" required />
+)

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

@@ -0,0 +1,156 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Box } from '@dhis2-ui/box'
+import { Field } from '@dhis2-ui/field'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Input, inputTypes } from '../input/index.js'
+
+class InputField extends React.Component {
+    static defaultProps = {
+        dataTest: 'dhis2-uiwidgets-inputfield',
+    }
+
+    render() {
+        const {
+            className,
+            onChange,
+            onFocus,
+            onKeyDown,
+            onBlur,
+            initialFocus,
+            type,
+            dense,
+            required,
+            label,
+            disabled,
+            readOnly,
+            placeholder,
+            name,
+            max,
+            min,
+            step,
+            valid,
+            error,
+            warning,
+            loading,
+            value,
+            tabIndex,
+            helpText,
+            validationText,
+            inputWidth,
+            autoComplete,
+            clearable,
+            prefixIcon,
+            dataTest = 'dhis2-uiwidgets-inputfield',
+        } = this.props
+
+        return (
+            <Field
+                className={className}
+                dataTest={dataTest}
+                error={error}
+                warning={warning}
+                valid={valid}
+                helpText={helpText}
+                validationText={validationText}
+                label={label}
+                name={name}
+                disabled={disabled}
+                required={required}
+            >
+                <Box width={inputWidth} minWidth="72px">
+                    <Input
+                        onFocus={onFocus}
+                        onKeyDown={onKeyDown}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        name={name}
+                        type={type}
+                        value={value || ''}
+                        placeholder={placeholder}
+                        disabled={disabled}
+                        max={max}
+                        min={min}
+                        step={step}
+                        valid={valid}
+                        warning={warning}
+                        error={error}
+                        loading={loading}
+                        dense={dense}
+                        tabIndex={tabIndex}
+                        initialFocus={initialFocus}
+                        readOnly={readOnly}
+                        autoComplete={autoComplete}
+                        clearable={clearable}
+                        prefixIcon={prefixIcon}
+                        width={inputWidth}
+                    />
+                </Box>
+            </Field>
+        )
+    }
+}
+
+const InputFieldProps = {
+    /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
+    autoComplete: PropTypes.string,
+    className: PropTypes.string,
+    /** Makes the input field clearable */
+    clearable: PropTypes.bool,
+    dataTest: PropTypes.string,
+    /** Makes the input smaller */
+    dense: PropTypes.bool,
+    /** Disables the input */
+    disabled: PropTypes.bool,
+    /** Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props */
+    error: sharedPropTypes.statusPropType,
+    /** Guiding text for how to use this input */
+    helpText: PropTypes.string,
+    /** The input grabs initial focus on the page */
+    initialFocus: PropTypes.bool,
+    /** Defines the width of the input. Can be any valid CSS measurement */
+    inputWidth: PropTypes.string,
+    /** Label text for the input */
+    label: PropTypes.string,
+    /** Adds a loading indicator beside the input */
+    loading: PropTypes.bool,
+    /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` */
+    max: PropTypes.string,
+    /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` */
+    min: PropTypes.string,
+    /** Name associated with the input. Passed to event handler callbacks in object */
+    name: PropTypes.string,
+    /** Placeholder text for the input */
+    placeholder: PropTypes.string,
+    /** Add prefix icon */
+    prefixIcon: PropTypes.element,
+    /** Makes the input read-only */
+    readOnly: PropTypes.bool,
+    /** Indicates this input is required */
+    required: PropTypes.bool,
+    /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` */
+    step: PropTypes.string,
+    tabIndex: PropTypes.string,
+    /** Type of input */
+    type: PropTypes.oneOf(inputTypes),
+    /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Text below input for validation feedback. Receives styles depending on validation status */
+    validationText: PropTypes.string,
+    /** Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object */
+    value: PropTypes.string,
+    /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onBlur: PropTypes.func,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onChange: PropTypes.func,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `({ name: string, value: string }, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+InputField.propTypes = InputFieldProps
+
+export { InputField, InputFieldProps }

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

@@ -0,0 +1,195 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { IconLocation16, IconSearch16 } from '@dhis2/ui-icons'
+import React, { useState } from 'react'
+import { InputField } from './index.js'
+
+const subtitle = 'Allows a user to enter data, usually text'
+
+const description = `
+Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
+
+InputField wraps an Input component with a label, help text, validation text, and some other features.
+
+Please see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).
+
+\`\`\`js
+import { InputField } from '@dhis2/ui'
+\`\`\`
+`
+
+const logger = ({ name, value }) =>
+    console.log(`Name: ${name}, value: ${value}`)
+
+const inputTypeArgType = {
+    table: { type: { summary: 'string' } },
+    control: {
+        type: 'select',
+        options: [
+            'text',
+            'number',
+            'password',
+            'email',
+            'url',
+            'tel',
+            'date',
+            'datetime',
+            'datetime-local',
+            'month',
+            'week',
+            'time',
+            'search',
+        ],
+    },
+}
+
+export default {
+    title: 'Input Field',
+    component: InputField,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    // Default args
+    args: {
+        label: 'Default label',
+        name: 'defaultName',
+        onChange: logger,
+    },
+    argTypes: {
+        type: { ...inputTypeArgType },
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <InputField {...args} />
+
+export const Default = Template.bind({})
+
+export const NoPlaceholderNoValue = Template.bind({})
+NoPlaceholderNoValue.storyName = 'No placeholder, no value'
+
+export const PlaceholderNoValue = Template.bind({})
+PlaceholderNoValue.args = { placeholder: 'Hold the place' }
+PlaceholderNoValue.storyName = 'Placeholder, no value'
+
+export const WithHelpText = Template.bind({})
+WithHelpText.args = {
+    ...PlaceholderNoValue.args,
+    helpText: 'With some helping text to guide the user along',
+}
+
+export const WithValue = Template.bind({})
+WithValue.args = {
+    value: 'This is set through the value prop, which means the component is controlled.',
+}
+
+export const Focus = Template.bind({})
+Focus.args = { initialFocus: true }
+// Disabled initial focus stories on docs page
+Focus.parameters = { docs: { disable: true } }
+
+export const StatusValid = Template.bind({})
+StatusValid.args = { valid: true, value: 'This value is valid' }
+StatusValid.storyName = 'Status: Valid'
+
+export const StatusWarning = Template.bind({})
+StatusWarning.args = { warning: true, value: 'This value produces a warning' }
+StatusWarning.storyName = 'Status: Warning'
+
+export const StatusError = Template.bind({})
+StatusError.args = {
+    error: true,
+    value: 'This value produces an error',
+    helpText: 'This is some help text to advise what this input actually is.',
+    validationText:
+        'This validation text describes the error, if a message is supplied.',
+}
+StatusError.storyName = 'Status: Error'
+
+export const StatusLoading = Template.bind({})
+StatusLoading.args = {
+    loading: true,
+    value: 'This value produces a loading state',
+}
+StatusLoading.storyName = 'Status: Loading'
+
+export const Disabled = Template.bind({})
+Disabled.args = { disabled: true, value: 'This field is disabled' }
+
+export const ReadOnly = Template.bind({})
+ReadOnly.args = { readOnly: true, value: 'This field is read-only' }
+
+export const Dense = Template.bind({})
+Dense.args = { dense: true, value: 'This field is dense' }
+
+export const InputWidth = (args) => (
+    <>
+        <InputField
+            {...args}
+            name="input1"
+            label="My inputField has a width of 100px"
+            inputWidth="100px"
+        />
+        <InputField
+            {...args}
+            name="input2"
+            label="My inputField has a width of 220px"
+            inputWidth="220px"
+        />
+    </>
+)
+
+export const LabelTextOverflow = Template.bind({})
+LabelTextOverflow.args = {
+    dense: true,
+    warning: true,
+    label: "This label is too long to show on a single line of the input field's label. We just let it flow to the next line so the user can still read it. However, we should always aim to keep it shorter than this!",
+}
+
+export const ValueTextOverflow = Template.bind({})
+ValueTextOverflow.args = {
+    value: "This value is too long in order to show on a single line of the input field. It should stay on one line, not in an extra line and which wouldn't look like a standard input",
+    dense: true,
+    warning: true,
+}
+
+export const Required = Template.bind({})
+Required.args = { required: true }
+
+export const InputWithPrefixIcon = (args) => (
+    <>
+        <InputField
+            {...args}
+            name="prefix-icon-input"
+            label="Search"
+            placeholder={'Search'}
+            prefixIcon={<IconSearch16 />}
+        />
+        <InputField
+            {...args}
+            name="prefix-icon-input"
+            label="Location"
+            placeholder={'Enter Location'}
+            prefixIcon={<IconLocation16 />}
+            inputWidth={'200px'}
+        />
+    </>
+)
+
+export const ClearableInput = (args) => {
+    const [value, setValue] = useState('value')
+    return (
+        <InputField
+            {...args}
+            name="clearable-input"
+            label="This field can be cleared"
+            placeholder={''}
+            onChange={(e) => setValue(e.value)}
+            clearable
+            clearText={() => setValue('')}
+            value={value}
+        />
+    )
+}