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

package/src/split-button/features/accepts_icon.feature

@@ -0,0 +1,5 @@
+Feature: The SplitButton renders icon
+
+    Scenario: A SplitButton with an icon
+        Given a SplitButton with an icon is rendered
+        Then the icon is visible on the left button only

package/src/split-button/features/accepts_initial_focus/index.js

@@ -0,0 +1,13 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SplitButton with initialFocus is rendered', () => {
+    cy.visitStory('SplitButton', 'With initial focus')
+})
+
+Then('the SplitButton button is focused', () => {
+    cy.focused().should(
+        'have.attr',
+        'data-test',
+        'dhis2-uicore-splitbutton-button'
+    )
+})

package/src/split-button/features/accepts_initial_focus.feature

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

package/src/split-button/features/arrow_opens_menu/index.js

@@ -0,0 +1,34 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SplitButton is rendered', () => {
+    cy.visitStory('SplitButton', 'Default')
+})
+
+Given('the SplitButton menu is open', () => {
+    cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click()
+    cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('be.visible')
+})
+
+Given('the SplitButton menu is closed', () => {
+    cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('not.exist')
+})
+
+When('the user clicks the backdrop Layer', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').click()
+})
+
+Then('the menu is not visible', () => {
+    cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('not.exist')
+})
+
+Then('the component is not visible', () => {
+    cy.contains('Component').should('not.exist')
+})
+
+Then('the menu is visible', () => {
+    cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('be.visible')
+})
+
+Then('the component is visible', () => {
+    cy.contains('Component').should('be.visible')
+})

package/src/split-button/features/arrow_opens_menu.feature

@@ -0,0 +1,15 @@
+Feature: The SplitButton renders a Popper
+
+    Scenario: The user opens the Popper
+        Given a SplitButton is rendered
+        And the SplitButton menu is closed
+        When the SplitButton toggle is clicked
+        Then the menu is visible
+        And the component is visible
+
+    Scenario: The user closes the Popper
+        Given a SplitButton is rendered
+        And the SplitButton menu is open
+        When the user clicks the backdrop Layer
+        Then the menu is not visible
+        And the component is not visible

package/src/split-button/features/button_is_clickable/index.js

@@ -0,0 +1,13 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SplitButton with onClick hander is rendered', () => {
+    cy.visitStory('SplitButton', 'With on click')
+})
+
+Then('the onClick handler is called', () => {
+    cy.window().its('onClick').should('be.calledWith', {
+        name: 'Button',
+        value: 'default',
+        open: false,
+    })
+})

package/src/split-button/features/button_is_clickable.feature

@@ -0,0 +1,6 @@
+Feature: The SplitButton has an onClick api
+
+    Scenario: The user clicks on the SplitButton
+        Given a SplitButton with onClick hander is rendered
+        When the SplitButton is clicked
+        Then the onClick handler is called

package/src/split-button/features/can_be_disabled/index.js

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

package/src/split-button/features/can_be_disabled.feature

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

package/src/split-button/features/common/index.js

@@ -0,0 +1,9 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+
+When('the SplitButton is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-splitbutton-button"]').click()
+})
+
+When('the SplitButton toggle is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click()
+})

package/src/split-button/index.js

@@ -0,0 +1 @@
+export { SplitButton } from './split-button.js'

package/src/split-button/split-button.e2e.stories.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import { SplitButton } from './split-button.js'
+
+window.onClick = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'SplitButton' }
+export const Default = () => (
+    <SplitButton name="Button" value="default" component={<div>Component</div>}>
+        Label me!
+    </SplitButton>
+)
+export const WithOnClick = () => (
+    <SplitButton
+        name="Button"
+        value="default"
+        component={<div>Component</div>}
+        onClick={window.onClick}
+    >
+        Label me!
+    </SplitButton>
+)
+export const WithChildren = () => (
+    <SplitButton name="Button" value="default" component={<div>Component</div>}>
+        I am a child
+    </SplitButton>
+)
+export const WithIcon = () => (
+    <SplitButton
+        name="Button"
+        value="default"
+        component={<div>Component</div>}
+        icon={<div>Icon</div>}
+    >
+        Children
+    </SplitButton>
+)
+export const WithInitialFocus = () => (
+    <SplitButton
+        name="Button"
+        value="default"
+        component={<div>Component</div>}
+        initialFocus
+    >
+        Children
+    </SplitButton>
+)
+export const WithDisabled = () => (
+    <SplitButton
+        name="Button"
+        value="default"
+        component={<div>Component</div>}
+        disabled
+    >
+        Children
+    </SplitButton>
+)

package/src/split-button/split-button.js

@@ -0,0 +1,273 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { spacers, sharedPropTypes } from '@dhis2/ui-constants'
+import { IconChevronUp16, IconChevronDown16 } from '@dhis2/ui-icons'
+import { Layer } from '@dhis2-ui/layer'
+import { Popper } from '@dhis2-ui/popper'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import css from 'styled-jsx/css'
+import { Button } from '../button/index.js'
+import i18n from '../locales/index.js'
+
+const rightButton = css.resolve`
+    button {
+        padding: 0 ${spacers.dp12};
+    }
+`
+
+class SplitButton extends Component {
+    state = {
+        open: false,
+    }
+
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-splitbutton',
+    }
+
+    anchorRef = React.createRef()
+
+    isControlled = () => typeof this.props.open === 'boolean'
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown)
+    }
+
+    handleKeyDown = (event) => {
+        const open = this.isControlled() ? this.props.open : this.state.open
+        if (event.key === 'Escape' && open) {
+            event.preventDefault()
+            event.stopPropagation()
+            if (this.isControlled()) {
+                if (this.props.onToggle) {
+                    this.props.onToggle(
+                        {
+                            name: this.props.name,
+                            value: this.props.value,
+                            open: false,
+                        },
+                        event
+                    )
+                }
+            } else {
+                this.setState({ open: false })
+            }
+            this.anchorRef.current && this.anchorRef.current.focus()
+        }
+    }
+
+    handlePrimaryAction = (payload, event) => {
+        if (this.props.onClick) {
+            this.props.onClick(
+                {
+                    name: payload.name,
+                    value: payload.value,
+                    open: this.isControlled()
+                        ? this.props.open
+                        : this.state.open,
+                },
+                event
+            )
+        }
+    }
+
+    handleToggle = (payload, event) => {
+        if (this.isControlled()) {
+            if (this.props.onToggle) {
+                this.props.onToggle(
+                    {
+                        name: payload.name,
+                        value: payload.value,
+                        open: !this.props.open,
+                    },
+                    event
+                )
+            }
+        } else {
+            this.setState((prevState) => ({ open: !prevState.open }))
+        }
+    }
+
+    handleBackdropClick = (event) => {
+        if (this.isControlled()) {
+            if (this.props.onToggle) {
+                this.props.onToggle(
+                    {
+                        name: this.props.name,
+                        value: this.props.value,
+                        open: false,
+                    },
+                    event
+                )
+            }
+        } else {
+            this.setState({ open: false })
+        }
+    }
+
+    render() {
+        const open = this.isControlled() ? this.props.open : this.state.open
+        const {
+            component,
+            children,
+            className,
+            name,
+            value,
+            icon,
+            small,
+            large,
+            primary,
+            secondary,
+            destructive,
+            disabled,
+            type,
+            tabIndex,
+            dataTest = 'dhis2-uicore-splitbutton',
+            initialFocus,
+        } = this.props
+
+        const arrow = open ? <IconChevronUp16 /> : <IconChevronDown16 />
+
+        return (
+            <div ref={this.anchorRef} data-test={dataTest}>
+                <Button
+                    name={name}
+                    value={value}
+                    icon={icon}
+                    small={small}
+                    large={large}
+                    primary={primary}
+                    secondary={secondary}
+                    destructive={destructive}
+                    disabled={disabled}
+                    onClick={this.handlePrimaryAction}
+                    type={type}
+                    tabIndex={tabIndex}
+                    className={cx(className)}
+                    initialFocus={initialFocus}
+                    dataTest={`${dataTest}-button`}
+                >
+                    {children}
+                </Button>
+
+                <Button
+                    name={name}
+                    value={value}
+                    small={small}
+                    large={large}
+                    primary={primary}
+                    secondary={secondary}
+                    destructive={destructive}
+                    disabled={disabled}
+                    onClick={this.handleToggle}
+                    type={type}
+                    tabIndex={tabIndex}
+                    className={cx(className, rightButton.className)}
+                    dataTest={`${dataTest}-toggle`}
+                    title={i18n.t('Toggle dropdown')}
+                    aria-label={i18n.t('Toggle dropdown')}
+                >
+                    {arrow}
+                </Button>
+
+                {open && (
+                    <Layer
+                        onBackdropClick={this.handleBackdropClick}
+                        transparent
+                    >
+                        <Popper
+                            dataTest={`${dataTest}-menu`}
+                            placement="bottom-end"
+                            reference={this.anchorRef}
+                        >
+                            {component}
+                        </Popper>
+                    </Layer>
+                )}
+
+                {rightButton.styles}
+                <style jsx>{`
+                    div {
+                        display: inline-flex;
+                        color: inherit;
+                        white-space: nowrap;
+                        // create a stacking context for the children
+                        position: relative;
+                        z-index: 0;
+                    }
+
+                    div > :global(button:first-child) {
+                        border-start-end-radius: 0;
+                        border-end-end-radius: 0;
+                        border-inline-end: 0;
+                    }
+
+                    div > :global(button:last-child) {
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
+                    }
+                `}</style>
+            </div>
+        )
+    }
+}
+
+SplitButton.propTypes = {
+    children: PropTypes.string,
+    className: PropTypes.string,
+    /** Component to render when the dropdown is opened */
+    component: PropTypes.element,
+    dataTest: PropTypes.string,
+    /**
+     * Applies 'destructive' button appearance, implying a dangerous action.
+     */
+    destructive: PropTypes.bool,
+    /** Disables the button and makes it uninteractive */
+    disabled: PropTypes.bool,
+    /** An icon to add inside the button */
+    icon: PropTypes.element,
+    /** Grants the button the initial focus */
+    initialFocus: PropTypes.bool,
+    /** Changes button size. Mutually exclusive with `small` prop */
+    large: sharedPropTypes.sizePropType,
+    name: PropTypes.string,
+    /**
+     * Controls popper visibility. When implementing this prop the component becomes a controlled component
+     */
+    open: PropTypes.bool,
+    /**
+     * Applies 'primary' button appearance, implying the most important action.
+     */
+    primary: PropTypes.bool,
+    /**
+     * Applies 'secondary' button appearance.
+     */
+    secondary: PropTypes.bool,
+    /** Changes button size. Mutually exclusive with `large` prop */
+    small: sharedPropTypes.sizePropType,
+    tabIndex: PropTypes.string,
+    /** Type of button. Applied to html `button` element */
+    type: PropTypes.oneOf(['submit', 'reset', 'button']),
+    /** Value associated with the button. Passed in object to onClick handler */
+    value: PropTypes.string,
+    /**
+     * Callback triggered when the main button is clicked.
+     * Called with signature `({ name: string, value: string, open: bool }, event)`
+     */
+    onClick: PropTypes.func,
+    /**
+     * Callback triggered when the dropdown is toggled (by clicking the chevron, pressing Escape, or clicking the backdrop).
+     * Called with signature `({ name: string, value: string, open: bool }, event)`.
+     * Required if `open` prop is used (controlled component).
+     */
+    onToggle: requiredIf(
+        (props) => typeof props.open === 'boolean',
+        PropTypes.func
+    ),
+}
+
+export { SplitButton }

package/src/split-button/split-button.prod.stories.js

@@ -0,0 +1,162 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu'
+import { Modal, ModalContent, ModalTitle, ModalActions } from '@dhis2-ui/modal'
+import React from 'react'
+import { Button } from '../button/button.js'
+import { ButtonStrip } from '../button-strip/button-strip.js'
+import { SplitButton } from './split-button.js'
+
+const description = `
+Similar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be "Save and add another" and "Save and open".
+
+\`\`\`js
+import { SplitButton } from '@dhis2/ui'
+\`\`\`
+`
+
+window.onClick = (payload, event) => {
+    console.log('onClick payload', payload)
+    console.log('onClick event', event)
+}
+
+const onClick = (...args) => window.onClick(...args)
+
+const DropdownComponent = <span>Dropdown component</span>
+
+export default {
+    title: 'Split Button',
+    component: SplitButton,
+    parameters: { docs: { description: { component: description } } },
+    args: {
+        name: 'buttonName',
+        value: 'buttonValue',
+        component: DropdownComponent,
+        onClick: onClick,
+        children: 'Label me!',
+    },
+    argTypes: {
+        small: { ...sharedPropTypes.sizeArgType },
+        large: { ...sharedPropTypes.sizeArgType },
+        primary: { ...sharedPropTypes.buttonVariantArgType },
+        secondary: { ...sharedPropTypes.buttonVariantArgType },
+        destructive: { ...sharedPropTypes.buttonVariantArgType },
+    },
+}
+
+const Template = (args) => <SplitButton {...args} />
+
+export const Default = Template.bind({})
+
+export const Primary = Template.bind({})
+Primary.args = { primary: true }
+Primary.parameters = {
+    docs: {
+        description: {
+            story: `_**Note**: The dropdown components in the following examples do not appear in the right place on this page. View the following examples in the 'Canvas' tab for the correct placement._`,
+        },
+    },
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = { secondary: true }
+
+export const Destructive = Template.bind({})
+Destructive.props = { destructive: true }
+
+export const Disabled = Template.bind({})
+Disabled.args = { disabled: true }
+
+export const Small = Template.bind({})
+Small.args = { small: true }
+
+export const Large = Template.bind({})
+Large.args = { large: true }
+
+export const InitialFocus = Template.bind({})
+InitialFocus.args = { initialFocus: true }
+// Disable this on docs page because grabbing focus repeatedly is annoying
+InitialFocus.parameters = { docs: { disable: true } }
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+    children: 'Children',
+    component: <div>Component</div>,
+    icon: <div>Icon</div>,
+}
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <SplitButton {...args} />
+    </div>
+)
+RTL.args = {
+    children: 'RTL text',
+}
+
+export const ControlledOpen = (args) => {
+    const [openFlyout, setOpenFlyout] = React.useState(false)
+    const [openModal, setOpenModal] = React.useState(false)
+
+    const handleClick = () => {
+        console.log('Main button clicked. This will not open the flyout menu.')
+    }
+
+    const handleToggle = () => {
+        setOpenFlyout((prevState) => !prevState)
+    }
+
+    const component = (
+        <FlyoutMenu>
+            <MenuItem
+                onClick={() => {
+                    console.log('Console log and close flyout')
+                    setOpenFlyout(false)
+                }}
+                label="Action 1"
+            />
+            <MenuItem
+                onClick={() => {
+                    console.log('Open modal and close flyout')
+                    setOpenFlyout(false)
+                    setOpenModal(true)
+                }}
+                label="Open modal"
+            />
+        </FlyoutMenu>
+    )
+
+    return (
+        <div>
+            <SplitButton
+                {...args}
+                open={openFlyout}
+                onClick={handleClick}
+                onToggle={handleToggle}
+                component={component}
+            />
+
+            {openModal && (
+                <Modal onClose={() => setOpenModal(false)}>
+                    <ModalTitle>Modal</ModalTitle>
+                    <ModalContent>
+                        <p>Modal content</p>
+                    </ModalContent>
+                    <ModalActions>
+                        <ButtonStrip>
+                            <Button onClick={() => setOpenModal(false)}>
+                                Close
+                            </Button>
+                        </ButtonStrip>
+                    </ModalActions>
+                </Modal>
+            )}
+        </div>
+    )
+}
+ControlledOpen.parameters = {
+    docs: {
+        description: {
+            story: 'This story demonstrates how the `SplitButton` can be controlled from the outside using the `open` prop and an `onToggle` handler that updates the external state.',
+        },
+    },
+}