@dhis2-ui/radio 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/radio",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Radio",
     "repository": {
         "type": "git",
@@ -33,13 +33,14 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.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/__tests__/radio.test.js

@@ -0,0 +1,31 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { Radio } from '../radio.js'
+
+describe('<Radio />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <Radio
+                name="foo"
+                value="bar"
+                checked={false}
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        fireEvent.keyDown(screen.getByRole('radio'), {
+            key: 'Enter',
+            code: 'Enter',
+            charCode: 13,
+        })
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { name: 'foo', value: 'bar', checked: true },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

package/src/features/accepts_initial_focus/index.js

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

package/src/features/accepts_initial_focus.feature

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

package/src/features/accepts_label/index.js

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

package/src/features/accepts_label.feature

@@ -0,0 +1,5 @@
+Feature: The Radio shows a label
+
+    Scenario: The Radio has a label
+        Given a Radio with a label is rendered
+        Then the label is shown

package/src/features/can_be_blurred/index.js

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

package/src/features/can_be_blurred.feature

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

package/src/features/can_be_changed/index.js

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

package/src/features/can_be_changed.feature

@@ -0,0 +1,6 @@
+Feature: The Radio has an onChange api
+
+    Scenario: The user checks the Radio
+        Given a Radio with onChange handler is rendered
+        When the Radio is checked
+        Then the onChange handler is called

package/src/features/can_be_disabled/index.js

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

package/src/features/can_be_disabled.feature

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

package/src/features/can_be_focused/index.js

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

package/src/features/can_be_focused.feature

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

package/src/index.js

@@ -0,0 +1 @@
+export { Radio } from './radio.js'

package/src/radio-icons.js

@@ -0,0 +1,106 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+
+const styles = css`
+    svg {
+        display: block;
+        pointer-events: none;
+    }
+
+    svg {
+        fill: ${colors.grey800};
+    }
+
+    circle.background {
+        fill: ${colors.white};
+    }
+
+    svg.checked {
+        fill: ${colors.teal700};
+    }
+
+    svg.disabled {
+        fill: ${colors.grey400};
+    }
+
+    svg.error {
+        fill: ${theme.error};
+    }
+
+    svg.valid {
+        fill: ${theme.valid};
+    }
+
+    svg.warning {
+        fill: ${theme.warning};
+    }
+
+    svg:not(.checked) .inner,
+    svg:not(.checked) .outer.checked {
+        fill: none;
+    }
+`
+
+export function RadioRegular({ className }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 18 18"
+            className={className}
+        >
+            <circle className="background" cx="9" cy="9" r="9"></circle>
+            <path
+                d="M9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 Z M9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 Z"
+                className="outer unchecked"
+            ></path>
+            <path
+                d="M9,18 C13.9705627,18 18,13.9705627 18,9 C18,4.02943725 13.9705627,0 9,0 C4.02943725,0 0,4.02943725 0,9 C0,13.9705627 4.02943725,18 9,18 Z M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z"
+                className="outer checked"
+            ></path>
+            <circle className="inner" cx="9" cy="9" r="5"></circle>
+            <style jsx>{`
+                svg {
+                    height: 18px;
+                    width: 18px;
+                }
+            `}</style>
+            <style jsx>{styles}</style>
+        </svg>
+    )
+}
+RadioRegular.propTypes = {
+    className: PropTypes.string,
+}
+
+export function RadioDense({ className }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 14 14"
+            className={className}
+        >
+            <circle className="background" cx="7" cy="7" r="7"></circle>
+            <path
+                d="M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,13 C3.6862915,13 1,10.3137085 1,7 C1,3.6862915 3.6862915,1 7,1 C10.3137085,1 13,3.6862915 13,7 C13,10.3137085 10.3137085,13 7,13 Z"
+                className="outer unchecked"
+            ></path>
+            <path
+                d="M7,14 C10.8659932,14 14,10.8659932 14,7 C14,3.13400675 10.8659932,0 7,0 C3.13400675,0 0,3.13400675 0,7 C0,10.8659932 3.13400675,14 7,14 Z M7,12 C4.23857625,12 2,9.76142375 2,7 C2,4.23857625 4.23857625,2 7,2 C9.76142375,2 12,4.23857625 12,7 C12,9.76142375 9.76142375,12 7,12 Z"
+                className="outer checked"
+            ></path>
+            <circle className="inner" cx="7" cy="7" r="3"></circle>
+            <style jsx>{`
+                svg {
+                    height: 14px;
+                    width: 14px;
+                }
+            `}</style>
+            <style jsx>{styles}</style>
+        </svg>
+    )
+}
+RadioDense.propTypes = {
+    className: PropTypes.string,
+}

package/src/radio.e2e.stories.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Radio } from './radio.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: 'Radio' }
+export const WithOnChange = () => (
+    <Radio name="Ex" label="Radio" value="default" onChange={window.onChange} />
+)
+export const WithInitialFocusAndOnBlur = () => (
+    <Radio
+        name="Ex"
+        label="Radio"
+        value="default"
+        initialFocus
+        onBlur={window.onBlur}
+    />
+)
+export const WithOnFocus = () => (
+    <Radio
+        initialFocus
+        name="Ex"
+        label="Radio"
+        value="default"
+        onFocus={window.onFocus}
+    />
+)
+export const WithDisabled = () => (
+    <Radio name="Ex" label="Radio" value="default" disabled />
+)
+export const WithLabel = () => (
+    <Radio name="Ex" label="The label" value="default" />
+)
+export const WithInitialFocus = () => (
+    <Radio name="Ex" label="The label" value="default" initialFocus />
+)

package/src/radio.js

@@ -0,0 +1,199 @@
+import { colors, spacers, theme, sharedPropTypes } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component, createRef } from 'react'
+import { RadioRegular, RadioDense } from './radio-icons.js'
+
+class Radio extends Component {
+    ref = createRef()
+
+    componentDidMount() {
+        if (this.props.initialFocus) {
+            this.ref.current.focus()
+        }
+    }
+
+    handleChange = (e) => {
+        if (this.props.onChange) {
+            this.props.onChange(this.createHandlerPayload(), e)
+        }
+    }
+
+    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 {
+            value: this.props.value,
+            name: this.props.name,
+            checked: !this.props.checked,
+        }
+    }
+
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-radio',
+    }
+
+    render() {
+        const {
+            checked = false,
+            className,
+            disabled,
+            error,
+            label,
+            name,
+            tabIndex,
+            valid,
+            value,
+            warning,
+            dense,
+            dataTest = 'dhis2-uicore-radio',
+        } = this.props
+
+        const classes = cx({
+            checked,
+            disabled,
+            valid,
+            error,
+            warning,
+        })
+
+        return (
+            <label
+                className={cx(className, {
+                    disabled,
+                    dense,
+                })}
+                data-test={dataTest}
+            >
+                <input
+                    type="radio"
+                    ref={this.ref}
+                    name={name}
+                    value={value}
+                    checked={checked}
+                    disabled={disabled}
+                    tabIndex={tabIndex}
+                    onChange={this.handleChange}
+                    onFocus={this.handleFocus}
+                    onKeyDown={this.handleKeyDown}
+                    onBlur={this.handleBlur}
+                />
+
+                <div className={cx('icon', { dense })}>
+                    {dense ? (
+                        <RadioDense className={classes} />
+                    ) : (
+                        <RadioRegular className={classes} />
+                    )}
+                </div>
+
+                {label}
+
+                <style jsx>{`
+                    label {
+                        display: flex;
+                        position: relative;
+                        flex-direction: row;
+                        align-items: center;
+                        justify-content: flex-start;
+                        color: ${colors.grey900};
+                        font-size: 14px;
+                        line-height: 19px;
+                    }
+
+                    label.dense {
+                        font-size: 14px;
+                        line-height: 16px;
+                    }
+
+                    label.disabled {
+                        cursor: not-allowed;
+                        color: ${theme.disabled};
+                    }
+
+                    input {
+                        opacity: 0;
+                        position: absolute;
+
+                        /* The same size as the icon */
+                        height: 18px;
+                        width: 18px;
+
+                        /* The same offset as the icon, 2px border, 1px padding */
+                        inset-inline-start: 3px;
+                    }
+
+                    label.dense input {
+                        /* The same size as the dense icon */
+                        height: 14px;
+                        width: 14px;
+                    }
+
+                    .icon {
+                        user-select: none;
+                        margin-inline-end: ${label ? spacers.dp4 : 0};
+                        border: 2px solid transparent;
+                        padding: 1px;
+                        border-radius: 50%;
+                    }
+
+                    label.dense .icon {
+                        margin-inline-end: 3px;
+                    }
+
+                    input:focus + .icon {
+                        outline: 3px solid ${theme.focus};
+                        outline-offset: -3px;
+                    }
+                `}</style>
+            </label>
+        )
+    }
+}
+
+Radio.propTypes = {
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    disabled: PropTypes.bool,
+    /** Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props */
+    error: sharedPropTypes.statusPropType,
+    initialFocus: PropTypes.bool,
+    label: PropTypes.node,
+    /** Name associated with this element. Passed in object to event handler functions  */
+    name: PropTypes.string,
+    tabIndex: PropTypes.string,
+    /** Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Value associated with this element. Passed in object to event handler functions */
+    value: PropTypes.string,
+    /** Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+    /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
+    onBlur: PropTypes.func,
+    /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
+    onChange: PropTypes.func,
+    /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with the signature `({ name: string, value: string, checked: bool }, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+export { Radio }

package/src/radio.prod.stories.js

@@ -0,0 +1,159 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { Radio } from './radio.js'
+
+const subtitle = `A control that allows a user to select a single option from a choice of several`
+
+const description = `
+Radio buttons are used where a user has the choice of several options but must select only one. Radio buttons should be used where the user has to make a choice, there is no 'off' or 'none' state unless explicitly defined. Radio buttons should be used when there are 5 or less options available. With more than five, a dropdown/Select menu should be used instead.
+
+Do not use a radio button if only a single option is available; use a Checkbox here instead.
+
+If there are many options that need to select from, consider using a Select instead.
+
+#### Size
+
+Radio buttons are available in Regular and Dense sizes. Regular size is usually used in forms and whenever radio buttons are used standalone. Dense size radio buttons are used inside other complex components, not as main elements of a UI.
+
+#### See more
+
+Learn more about Radio buttons at [Design System: Radio](https://github.com/dhis2/design-system/blob/master/atoms/radio.md).
+
+\`\`\`js
+import { Radio } from '@dhis2/ui'
+\`\`\`
+`
+
+window.onChange = (payload, event) => {
+    console.log('onChange payload', payload)
+    console.log('onChange event', event)
+}
+
+window.onFocus = (payload, event) => {
+    console.log('onFocus payload', payload)
+    console.log('onFocus event', event)
+}
+
+window.onBlur = (payload, event) => {
+    console.log('onBlur payload', payload)
+    console.log('onBlur event', event)
+}
+
+const onChange = (...args) => window.onChange(...args)
+const onFocus = (...args) => window.onFocus(...args)
+const onBlur = (...args) => window.onBlur(...args)
+
+export default {
+    title: 'Radio',
+    component: Radio,
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    // Default args for all stories
+    args: {
+        name: 'Ex',
+        label: 'Radio',
+        value: 'default',
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+    },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <Radio {...args} />
+
+const CheckedUncheckedTemplate = (args) => (
+    <>
+        <Radio {...args} />
+        <Radio {...args} checked />
+    </>
+)
+
+export const Default = Template.bind({})
+
+export const FocusedUnchecked = (args) => (
+    <>
+        <Radio {...args} initialFocus className="initially-focused" />
+        <Radio {...args} className="initially-unfocused" />
+    </>
+)
+// Stories with initial focus are distracting on docs page
+FocusedUnchecked.parameters = { docs: { disable: true } }
+
+export const FocusedChecked = FocusedUnchecked.bind({})
+FocusedChecked.args = { checked: true }
+FocusedChecked.parameters = { docs: { disable: true } }
+
+export const Checked = Template.bind({})
+Checked.args = { checked: true, value: 'checked' }
+
+export const Disabled = CheckedUncheckedTemplate.bind({})
+Disabled.args = { disabled: true, value: 'disabled' }
+
+export const Valid = CheckedUncheckedTemplate.bind({})
+Valid.args = { valid: true, value: 'valid' }
+
+export const Warning = CheckedUncheckedTemplate.bind({})
+Warning.args = { warning: true, value: 'warning' }
+
+export const Error = CheckedUncheckedTemplate.bind({})
+Error.args = { error: true, value: 'error' }
+
+export const ImageLabel = Template.bind({})
+ImageLabel.args = {
+    label: <img src="https://picsum.photos/id/82/200/100" />,
+    value: 'with-help',
+}
+
+export const DefaultDense = Template.bind({})
+DefaultDense.args = { dense: true }
+DefaultDense.storyName = 'Default - Dense'
+
+export const FocusedUncheckedDense = FocusedUnchecked.bind({})
+FocusedUncheckedDense.args = { ...DefaultDense.args }
+FocusedUncheckedDense.storyName = 'Focused unchecked - Dense'
+FocusedUncheckedDense.parameters = { docs: { disable: true } }
+
+export const FocusedCheckedDense = FocusedUnchecked.bind({})
+FocusedCheckedDense.args = { ...DefaultDense.args, checked: true }
+FocusedCheckedDense.storyName = 'Focused checked - Dense'
+FocusedCheckedDense.parameters = { docs: { disable: true } }
+
+export const CheckedDense = Template.bind({})
+CheckedDense.args = { ...Checked.args, ...DefaultDense.args }
+CheckedDense.storyName = 'Checked - Dense'
+
+export const DisabledDense = CheckedUncheckedTemplate.bind({})
+DisabledDense.args = { ...Disabled.args, ...DefaultDense.args }
+DisabledDense.storyName = 'Disabled - Dense'
+
+export const ValidDense = CheckedUncheckedTemplate.bind({})
+ValidDense.args = { ...Valid.args, ...DefaultDense.args }
+ValidDense.storyName = 'Valid - Dense'
+
+export const WarningDense = CheckedUncheckedTemplate.bind({})
+WarningDense.args = { ...Warning.args, ...DefaultDense.args }
+WarningDense.storyName = 'Warning - Dense'
+
+export const ErrorDense = CheckedUncheckedTemplate.bind({})
+ErrorDense.args = { ...Error.args, ...DefaultDense.args }
+ErrorDense.storyName = 'Error - Dense'
+
+export const ImageLabelDense = Template.bind({})
+ImageLabelDense.args = { ...ImageLabel.args, ...DefaultDense.args }
+ImageLabelDense.storyName = 'Image label - Dense'
+
+export const NoLabel = Template.bind({})
+NoLabel.args = { label: null, className: 'some-name' }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)