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

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

@@ -0,0 +1,67 @@
+import React from 'react'
+import { DropdownButton } from './index.js'
+
+window.onClick = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'DropdownButton' }
+
+export const Default = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        component={<div>Content</div>}
+    >
+        Button
+    </DropdownButton>
+)
+export const WithOnClick = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        onClick={window.onClick}
+        component={<div>Content</div>}
+    >
+        Button
+    </DropdownButton>
+)
+export const WithChildren = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        component={<div>Component</div>}
+    >
+        I am a child
+    </DropdownButton>
+)
+export const WithComponent = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        component={<div>I am a component</div>}
+    />
+)
+export const WithIcon = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        component={<div>I am a component</div>}
+        icon={'Icon'}
+    />
+)
+export const WithInitialFocus = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        component={<div>Content</div>}
+        initialFocus
+    />
+)
+export const DisabledWithOnClick = () => (
+    <DropdownButton
+        name="Button"
+        value="default"
+        component={<div>Content</div>}
+        onClick={window.onClick}
+        disabled
+    />
+)

package/src/dropdown-button/dropdown-button.js

@@ -0,0 +1,239 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { spacers, sharedPropTypes } from '@dhis2/ui-constants'
+import { Layer } from '@dhis2-ui/layer'
+import { Popper } from '@dhis2-ui/popper'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Button } from '../button/index.js'
+
+function ArrowDown({ className }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 12"
+            className={className}
+        >
+            <path d="m5.29289 8.7071c.39053.3905 1.02369.3905 1.41422 0l2.99999-2.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-2.2929 2.2929-2.29289-2.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z" />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 12px;
+                    width: 12px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    )
+}
+ArrowDown.propTypes = {
+    className: PropTypes.string,
+}
+
+function ArrowUp({ className }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 12"
+            className={className}
+        >
+            <path
+                d="m5.29289 8.7071c.39053.3905 1.02369.3905 1.41422 0l2.99999-2.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-2.2929 2.2929-2.29289-2.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
+                transform="matrix(1 0 0 -1 0 12.999974)"
+            />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 12px;
+                    width: 12px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    )
+}
+ArrowUp.propTypes = {
+    className: PropTypes.string,
+}
+
+class DropdownButton extends Component {
+    state = {
+        open: false,
+    }
+
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-dropdownbutton',
+    }
+
+    anchorRef = React.createRef()
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown)
+    }
+
+    handleKeyDown = (event) => {
+        if (event.key === 'Escape' && this.state.open) {
+            event.preventDefault()
+            event.stopPropagation()
+            this.setState({ open: false })
+        }
+    }
+
+    onClickHandler = ({ name, value }, event) => {
+        const handleClick = (open) => {
+            if (this.props.onClick) {
+                this.props.onClick(
+                    {
+                        name,
+                        value,
+                        open,
+                    },
+                    event
+                )
+            }
+        }
+        if (typeof this.props.open === 'boolean') {
+            handleClick(!this.props.open)
+        } else {
+            this.setState({ open: !this.state.open }, () => {
+                handleClick(this.state.open)
+            })
+        }
+    }
+
+    render() {
+        const {
+            component,
+            children,
+            className,
+            destructive,
+            disabled,
+            icon,
+            large,
+            primary,
+            secondary,
+            small,
+            name,
+            value,
+            tabIndex,
+            type,
+            initialFocus,
+            dataTest = 'dhis2-uicore-dropdownbutton',
+        } = this.props
+        const open =
+            typeof this.props.open === 'boolean'
+                ? this.props.open
+                : this.state.open
+        const ArrowIconComponent = open ? ArrowUp : ArrowDown
+
+        return (
+            <div ref={this.anchorRef} data-test={dataTest}>
+                <Button
+                    className={className}
+                    destructive={destructive}
+                    disabled={disabled}
+                    icon={icon}
+                    large={large}
+                    primary={primary}
+                    secondary={secondary}
+                    small={small}
+                    onClick={this.onClickHandler}
+                    name={name}
+                    value={value}
+                    tabIndex={tabIndex}
+                    type={type}
+                    initialFocus={initialFocus}
+                    data-test="dhis2-uicore-dropdownbutton-toggle"
+                >
+                    {children}
+                    <ArrowIconComponent
+                        className={`arrow ${small && 'arrow-small'}`}
+                    />
+                </Button>
+
+                {open && (
+                    <Layer onBackdropClick={this.onClickHandler} transparent>
+                        <Popper
+                            dataTest={`${dataTest}-popper`}
+                            placement="bottom-start"
+                            reference={this.anchorRef}
+                        >
+                            {component}
+                        </Popper>
+                    </Layer>
+                )}
+
+                <style jsx>{`
+                    .arrow {
+                        margin-inline-start: ${spacers.dp8};
+                    }
+
+                    .arrow-small {
+                        margin-inline-start: ${spacers.dp4};
+                    }
+
+                    div {
+                        display: inline-flex;
+                        position: relative;
+                        color: inherit;
+                        white-space: nowrap;
+                    }
+                `}</style>
+            </div>
+        )
+    }
+}
+
+DropdownButton.propTypes = {
+    /** Children to render inside the buton */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /** Component to show/hide when button is clicked */
+    component: PropTypes.element,
+    dataTest: PropTypes.string,
+    /**
+     * Applies 'destructive' button appearance, implying a dangerous action.
+     */
+    destructive: PropTypes.bool,
+    /** Make the button non-interactive */
+    disabled: PropTypes.bool,
+    icon: PropTypes.element,
+    /** Grants button initial focus on the page */
+    initialFocus: PropTypes.bool,
+    /** 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,
+    /** Button size. Mutually exclusive with `large` prop */
+    small: sharedPropTypes.sizePropType,
+    tabIndex: PropTypes.string,
+    /** Type of button. Can take advantage of different default behavior */
+    type: PropTypes.oneOf(['submit', 'reset', 'button']),
+    value: PropTypes.string,
+    /**
+     * Callback triggered on click.
+     * Called with signature `({ name: string, value: string, open: bool }, event)`
+     * Is required when using the `open` prop to override the internal
+     * state.
+     */
+    onClick: requiredIf(
+        (props) => typeof props.open === 'boolean',
+        PropTypes.func
+    ),
+}
+
+export { DropdownButton }

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

@@ -0,0 +1,129 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu'
+import React, { useState } from 'react'
+import { DropdownButton } from './index.js'
+
+const description = `
+Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
+
+\`\`\`js
+import { DropdownButton } from '@dhis2/ui'
+\`\`\`
+`
+
+const Simple = <span>Simplest thing</span>
+
+const { sizeArgType, buttonVariantArgType } = sharedPropTypes
+
+export default {
+    title: 'Dropdown Button',
+    component: DropdownButton,
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        primary: { ...buttonVariantArgType },
+        secondary: { ...buttonVariantArgType },
+        destructive: { ...buttonVariantArgType },
+        small: { ...sizeArgType },
+        large: { ...sizeArgType },
+    },
+    // Default args for all stories (can be overridden)
+    args: {
+        name: 'buttonName',
+        value: 'buttonValue',
+        component: Simple,
+        children: 'Label me!',
+    },
+}
+
+const Template = (args) => <DropdownButton {...args} />
+
+export const Default = Template.bind({})
+
+export const WithClick = Template.bind({})
+WithClick.args = {
+    onClick: ({ open }) => console.log('onClick: the dropdown is open: ', open),
+}
+
+export const Primary = Template.bind({})
+Primary.args = { primary: true }
+
+export const Secondary = Template.bind({})
+Secondary.args = { secondary: true }
+
+export const Destructive = Template.bind({})
+Destructive.args = { 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 WithMenu = Template.bind({})
+WithMenu.args = {
+    component: (
+        <FlyoutMenu>
+            <MenuItem label="Item 1" />
+            <MenuItem label="Item 2" />
+            <MenuItem label="Item 3" />
+        </FlyoutMenu>
+    ),
+}
+// FlyoutMenu needs iframe
+// But docs page down too much with iframe, so disabled
+WithMenu.parameters = { docs: { disable: true } }
+
+export const InitialFocus = Template.bind({})
+InitialFocus.args = { initialFocus: true }
+/**
+ * 'Initial focus' stories cause the docs page to scroll away each time
+ * a control is changed, therefore it is omitted from the docs page (but
+ * not the normal 'canvas' story viewer)
+ */
+InitialFocus.parameters = { docs: { disable: true } }
+
+const OpenTemplate = (args) => {
+    return <DropdownButton {...args} />
+}
+export const Open = OpenTemplate.bind({})
+Open.args = {
+    open: true,
+    component: Simple,
+    onClick: () => {},
+}
+
+const ManualControlTemplate = (args) => {
+    const [isOpen, setIsOpen] = useState(true)
+
+    const handleOpen = () => setIsOpen(false)
+
+    const Menu = (
+        <ul>
+            <li>First option does nothing</li>
+            <li onClick={handleOpen}>Close the dropdown</li>
+        </ul>
+    )
+
+    return (
+        <DropdownButton
+            {...args}
+            onClick={() => setIsOpen(!isOpen)}
+            open={isOpen}
+            component={Menu}
+        />
+    )
+}
+export const ManualControl = ManualControlTemplate.bind({})
+ManualControl.args = {}
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <DropdownButton {...args} />
+    </div>
+)
+RTL.args = {
+    children: 'RTL text',
+}

package/src/dropdown-button/features/accepts_children/index.js

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

package/src/dropdown-button/features/accepts_children.feature

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

package/src/dropdown-button/features/accepts_component/index.js

@@ -0,0 +1,18 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a DropdownButton with a component prop and opened dropdown is rendered',
+    () => {
+        cy.visitStory('DropdownButton', 'With component')
+
+        cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible')
+        cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click()
+        cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should(
+            'exist'
+        )
+    }
+)
+
+Then('the component is visible', () => {
+    cy.contains('I am a component').should('be.visible')
+})

package/src/dropdown-button/features/accepts_component.feature

@@ -0,0 +1,5 @@
+Feature: The DropdownButton accepts a component prop
+
+    Scenario: A DropdownButton with a component
+        Given a DropdownButton with a component prop and opened dropdown is rendered
+        Then the component is visible

package/src/dropdown-button/features/accepts_icon/index.js

@@ -0,0 +1,10 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a DropdownButton with an icon prop is rendered', () => {
+    cy.visitStory('DropdownButton', 'With icon')
+    cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible')
+})
+
+Then('the icon is visible', () => {
+    cy.contains('Icon').should('be.visible')
+})

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

@@ -0,0 +1,5 @@
+Feature: The DropdownButton accepts an icon prop
+
+    Scenario: A DropdownButton with an icon
+        Given a DropdownButton with an icon prop is rendered
+        Then the icon is visible

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a disabled DropdownButton with onClick handler is rendered', () => {
+    cy.visitStory('DropdownButton', 'Disabled with on click')
+})
+
+Then('the onClick handler is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onClick).not.to.be.called
+    })
+})

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

@@ -0,0 +1,6 @@
+Feature: The DropdownButton can be disabled
+
+    Scenario: The user clicks a disabled DropdownButton
+        Given a disabled DropdownButton with onClick handler is rendered
+        When the DropdownButton is clicked
+        Then the onClick handler is not called

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

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

package/src/dropdown-button/features/opens_a_dropdown/index.js

@@ -0,0 +1,26 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a default DropdownButton is rendered', () => {
+    cy.visitStory('DropdownButton', 'Default')
+})
+
+Given('a DropdownButton with opened dropdown is rendered', () => {
+    cy.visitStory('DropdownButton', 'Default')
+
+    cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click()
+    cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist')
+})
+
+When('the user clicks the backdrop Layer', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').click()
+})
+
+Then('the dropdown is not rendered', () => {
+    cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should(
+        'not.exist'
+    )
+})
+
+Then('the dropdown is rendered', () => {
+    cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist')
+})

package/src/dropdown-button/features/opens_a_dropdown.feature

@@ -0,0 +1,11 @@
+Feature: The DropdownButton renders a dropdown
+
+    Scenario: The user opens the dropdown
+        Given a default DropdownButton is rendered
+        When the DropdownButton is clicked
+        Then the dropdown is rendered
+
+    Scenario: The user closes the dropdown
+        Given a DropdownButton with opened dropdown is rendered
+        When the user clicks the backdrop Layer
+        Then the dropdown is not rendered

package/src/dropdown-button/index.js

@@ -0,0 +1 @@
+export { DropdownButton } from './dropdown-button.js'

package/src/index.js

@@ -0,0 +1,4 @@
+export { Button } from './button/index.js'
+export { ButtonStrip } from './button-strip/index.js'
+export { SplitButton } from './split-button/index.js'
+export { DropdownButton } from './dropdown-button/index.js'

package/src/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Toggle dropdown": "Toggle dropdown"
+}

package/src/locales/index.js

@@ -0,0 +1,16 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n'
+
+import enTranslations from './en/translations.json'
+
+const namespace = 'default'
+i18n.addResources('en', namespace, enTranslations)
+
+export default i18n

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SplitButton with an icon is rendered', () => {
+    cy.visitStory('SplitButton', 'With icon')
+    cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible')
+})
+
+Then('the icon is visible on the left button only', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-splitbutton-button"] :contains("Icon")'
+    ).should('be.visible')
+
+    cy.get(
+        '[data-test="dhis2-uicore-splitbutton-toggle"] :contains("Icon")'
+    ).should('not.exist')
+})