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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/field",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Field",
     "repository": {
         "type": "git",
@@ -33,16 +33,17 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "10.16.2",
-        "@dhis2-ui/help": "10.16.2",
-        "@dhis2-ui/label": "10.16.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2-ui/box": "10.16.3-alpha.1",
+        "@dhis2-ui/help": "10.16.3-alpha.1",
+        "@dhis2-ui/label": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "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/field/features/accepts_children/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Field with children is rendered', () => {
+    cy.visitStory('Field', 'With children')
+    cy.get('[data-test="dhis2-uicore-field"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

package/src/field/features/accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The Field renders children
+
+    Scenario: A Field with children
+        Given a Field with children is rendered
+        Then the children are visible

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

@@ -0,0 +1,5 @@
+import React from 'react'
+import { Field } from './field.js'
+
+export default { title: 'Field' }
+export const WithChildren = () => <Field>I am a child</Field>

package/src/field/field.js

@@ -0,0 +1,93 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Box } from '@dhis2-ui/box'
+import { Help } from '@dhis2-ui/help'
+import { Label } from '@dhis2-ui/label'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Field = ({
+    children,
+    className,
+    disabled,
+    helpText,
+    label,
+    labelId,
+    name,
+    validationText,
+    required,
+    dataTest = 'dhis2-uicore-field',
+    valid,
+    error,
+    warning,
+}) => (
+    <Box className={className} dataTest={dataTest}>
+        {label && (
+            <Label
+                id={labelId}
+                dataTest={`${dataTest}-label`}
+                required={required}
+                disabled={disabled}
+                htmlFor={name}
+            >
+                {label}
+            </Label>
+        )}
+
+        <Box dataTest={`${dataTest}-content`} marginTop={label ? '2px' : '0'}>
+            {children}
+        </Box>
+
+        {helpText && <Help dataTest={`${dataTest}-help`}>{helpText}</Help>}
+
+        {validationText && (
+            <Help
+                error={error}
+                warning={warning}
+                valid={valid}
+                dataTest={`${dataTest}-validation`}
+            >
+                {validationText}
+            </Help>
+        )}
+    </Box>
+)
+
+Field.propTypes = {
+    children: PropTypes.node,
+
+    className: PropTypes.string,
+
+    dataTest: PropTypes.string,
+
+    /** Disabled status, shown when mouse is over label */
+    disabled: PropTypes.bool,
+
+    /** Field status. Mutually exclusive with `valid` and `warning` props */
+    error: sharedPropTypes.statusPropType,
+
+    /** Useful text within the field */
+    helpText: PropTypes.string,
+
+    /** Label at the top of the field */
+    label: PropTypes.string,
+
+    /** id passed to the label element */
+    labelId: PropTypes.string,
+
+    /** `name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element */
+    name: PropTypes.string,
+
+    /** Inidcates this field is required */
+    required: PropTypes.bool,
+
+    /** Field status. Mutually exclusive with `error` and `warning` props */
+    valid: sharedPropTypes.statusPropType,
+
+    /** Feedback given related to validation status of field */
+    validationText: PropTypes.string,
+
+    /** Field status. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+}
+
+export { Field }

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

@@ -0,0 +1,51 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Input } from '@dhis2-ui/input'
+import React from 'react'
+import { Field } from './field.js'
+
+const description = `
+A useful container for form components, including a label, help text, and validation text.
+
+\`\`\`js
+import { Field } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Field',
+    component: Field,
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const Default = (args) => (
+    <>
+        <Field {...args}>
+            <Input
+                onChange={() => {
+                    console.log('Nothing happens')
+                }}
+                name="input"
+                label="An input"
+            />
+        </Field>
+        <Field helpText="Help!" label="Second field">
+            <Input
+                onChange={() => {
+                    console.log('Nothing happens')
+                }}
+                name="input2"
+                label="An second input"
+            />
+        </Field>
+    </>
+)
+Default.args = {
+    label: 'First field (change me with controls)',
+    helpText: 'Help text!',
+    validationText: "I'm validation text",
+}

package/src/field/index.js

@@ -0,0 +1 @@
+export { Field } from './field.js'

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { Checkbox } from '@dhis2-ui/checkbox'
+import React from 'react'
+import { FieldGroup } from './field-group.js'
+
+export default { title: 'FieldGroup' }
+export const WithLabelAndRequired = () => (
+    <FieldGroup
+        label="I am a required label"
+        name="required"
+        value={['second', 'third']}
+        required
+    >
+        <Checkbox value="first" label="First" />
+        <Checkbox value="second" label="Second" />
+        <Checkbox value="third" label="Third" />
+    </FieldGroup>
+)

package/src/field-group/field-group.js

@@ -0,0 +1,61 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Field } from '../field/index.js'
+import { FieldSet } from '../field-set/index.js'
+const FieldGroup = ({
+    children,
+    className,
+    disabled,
+    helpText,
+    validationText,
+    label,
+    name,
+    required,
+    dataTest = 'dhis2-uiwidgets-fieldsetfield',
+    valid,
+    error,
+    warning,
+}) => (
+    <FieldSet classname={className} dataTest={dataTest}>
+        <Field
+            label={label}
+            disabled={disabled}
+            required={required}
+            helpText={helpText}
+            validationText={validationText}
+            error={error}
+            warning={warning}
+            valid={valid}
+            name={name}
+        >
+            {children}
+        </Field>
+    </FieldSet>
+)
+
+FieldGroup.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Disables the form controls within */
+    disabled: PropTypes.bool,
+    /** Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props */
+    error: sharedPropTypes.statusPropType,
+    /** Useful instructions for the user */
+    helpText: PropTypes.string,
+    /** Labels the Field Group */
+    label: PropTypes.string,
+    /** Name associate with the Field Group. Passed in object as argument to event handlers */
+    name: PropTypes.string,
+    /** Adds an asterisk to indicate this field is required */
+    required: PropTypes.bool,
+    /** Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
+    validationText: PropTypes.string,
+    /** Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+}
+
+export { FieldGroup }

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

@@ -0,0 +1,110 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Checkbox } from '@dhis2-ui/checkbox'
+import { Radio } from '@dhis2-ui/radio'
+import { Switch } from '@dhis2-ui/switch'
+import React from 'react'
+import { FieldGroup } from './field-group.js'
+
+const description = `
+Wraps a group of form components like Radios, Checkboxes, or Switches. The FieldGroup wraps the form controls in a FieldSet and a Field component to group them and add a label, help text, and/or validation text.
+
+\`\`\`js
+import { FieldGroup } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Field Group',
+    component: FieldGroup,
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+export const WithCheckbox = (args) => (
+    <FieldGroup {...args}>
+        <Checkbox value="first" label="First" />
+        <Checkbox value="second" label="Second" />
+        <Checkbox value="third" label="Third" />
+    </FieldGroup>
+)
+
+export const WithRadio = (args) => (
+    <FieldGroup {...args}>
+        <Radio value="first" label="First" />
+        <Radio value="second" label="Second" checked />
+        <Radio value="third" label="Third" />
+        <Radio value="fourth" label="Fourth" />
+    </FieldGroup>
+)
+
+export const WithSwitch = (args) => (
+    <FieldGroup {...args}>
+        <Switch value="first" label="First" />
+        <Switch value="second" label="Second" />
+        <Switch value="third" label="Third" />
+        <Switch value="fourth" label="Fourth" />
+    </FieldGroup>
+)
+
+export const WithLabel = (args) => (
+    <>
+        <FieldGroup {...args}>
+            <Checkbox value="first" label="First" />
+            <Checkbox value="second" label="Second" />
+            <Checkbox value="third" label="Third" />
+        </FieldGroup>
+        <FieldGroup label="I am a required field" required>
+            <Checkbox value="first" label="First" />
+            <Checkbox value="second" label="Second" />
+            <Checkbox value="third" label="Third" />
+        </FieldGroup>
+    </>
+)
+WithLabel.args = { label: 'I am a label/legend' }
+
+export const HelpAndValidationTexts = (args) => (
+    <>
+        <FieldGroup {...args}>
+            <Checkbox value="first" label="First" />
+            <Checkbox value="second" label="Second" />
+            <Checkbox value="third" label="Third" />
+        </FieldGroup>
+        <FieldGroup label="I am a legend" helpText="I am disabled" disabled>
+            <Checkbox value="first" label="First" disabled />
+            <Checkbox value="second" label="Second" disabled />
+            <Checkbox value="third" label="Third" disabled />
+        </FieldGroup>
+        <FieldGroup label="I am a legend" valid validationText="I am valid">
+            <Checkbox value="first" label="First" />
+            <Checkbox value="second" label="Second" checked />
+            <Checkbox value="third" label="Third" checked />
+        </FieldGroup>
+        <FieldGroup
+            label="I am a legend"
+            name="warning"
+            warning
+            validationText="I have a warning"
+        >
+            <Checkbox value="first" label="First" />
+            <Checkbox value="second" label="Second" />
+            <Checkbox value="third" label="Third" />
+        </FieldGroup>
+        <FieldGroup
+            label="I am a legend"
+            error
+            validationText="I have an error"
+        >
+            <Checkbox value="first" label="First" />
+            <Checkbox value="second" label="Second" />
+            <Checkbox value="third" label="Third" />
+        </FieldGroup>
+    </>
+)
+HelpAndValidationTexts.args = {
+    label: 'I am a field',
+    helpText: 'I am help text!',
+}

package/src/field-group/index.js

@@ -0,0 +1 @@
+export { FieldGroup } from './field-group.js'

package/src/field-set/features/accepts_children/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a FieldSet with children is rendered', () => {
+    cy.visitStory('FieldSet', 'With children')
+    cy.get('[data-test="dhis2-uicore-fieldset"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.contains('I am a child').should('be.visible')
+})

package/src/field-set/features/accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The FieldSet renders children
+
+    Scenario: A FieldSet with children
+        Given a FieldSet with children is rendered
+        Then the children are visible

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

@@ -0,0 +1,5 @@
+import React from 'react'
+import { FieldSet } from './field-set.js'
+
+export default { title: 'FieldSet' }
+export const WithChildren = () => <FieldSet>I am a child</FieldSet>

package/src/field-set/field-set.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const FieldSet = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-fieldset',
+}) => (
+    <fieldset className={className} data-test={dataTest}>
+        {children}
+        <style jsx>{`
+            fieldset {
+                border: none;
+                margin: 0;
+                padding: 0;
+            }
+        `}</style>
+    </fieldset>
+)
+
+FieldSet.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}
+
+export { FieldSet }

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

@@ -0,0 +1,66 @@
+import { Help } from '@dhis2-ui/help'
+import { Legend } from '@dhis2-ui/legend'
+import { Radio } from '@dhis2-ui/radio'
+import React from 'react'
+import { Field } from '../index.js'
+import { FieldSet } from './field-set.js'
+
+const description = `
+A container for grouping several Field components together. Use a \`<Legend>\` component to add helpful guiding text.
+
+\`\`\`js
+import { FieldSet } from '@dhis2/ui'
+\`\`\`
+`
+
+const onChange = () => {
+    console.log('Radio was clicked, nothing else will happen')
+}
+
+export default {
+    title: 'Field Set',
+    component: FieldSet,
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const Default = (args) => (
+    <FieldSet {...args}>
+        It renders something in a fieldset element without the browser styles
+    </FieldSet>
+)
+
+export const UsageExampleARadioButtonGroupWithErrorStatus = (args) => (
+    <FieldSet {...args}>
+        <Legend required>Choose an option</Legend>
+        <Field>
+            <Radio
+                onChange={onChange}
+                name="radio"
+                value="first"
+                label="First"
+                error
+            />
+        </Field>
+        <Field>
+            <Radio
+                onChange={onChange}
+                name="radio"
+                value="second"
+                label="Second"
+                error
+            />
+        </Field>
+        <Field>
+            <Radio
+                onChange={onChange}
+                name="radio"
+                value="third"
+                label="Third"
+                error
+            />
+        </Field>
+        <Help error>You really have to choose something!</Help>
+    </FieldSet>
+)
+UsageExampleARadioButtonGroupWithErrorStatus.storyName =
+    'Usage example - a radio button group with error status'

package/src/field-set/index.js

@@ -0,0 +1 @@
+export { FieldSet } from './field-set.js'

package/src/index.js

@@ -0,0 +1,3 @@
+export { Field } from './field/index.js'
+export { FieldGroup } from './field-group/index.js'
+export { FieldSet } from './field-set/index.js'