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

package/src/button/button.styles.js

@@ -0,0 +1,298 @@
+import { colors, theme, spacers } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css`
+    button {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        text-decoration: none;
+        cursor: pointer;
+        user-select: none;
+        color: ${colors.grey900};
+
+        /*medium*/
+        height: 36px;
+        padding: 0 ${spacers.dp12};
+        font-size: 14px;
+        line-height: 16px;
+
+        /*basic*/
+        border: 1px solid ${colors.grey500};
+        background-color: #f9fafb;
+    }
+
+    button:disabled {
+        cursor: not-allowed;
+    }
+
+    button:focus {
+        outline: 3px solid ${theme.focus};
+        outline-offset: -3px;
+        text-decoration: underline;
+    }
+
+    /* Prevent focus styles when mouse clicking */
+    button:focus:not(:focus-visible) {
+        outline: none;
+        text-decoration: none;
+    }
+
+    /* Prevent focus styles on active and disabled buttons */
+    button:active:focus,
+    button:disabled:focus {
+        outline: none;
+        text-decoration: none;
+    }
+
+    button:hover {
+        border-color: ${colors.grey500};
+        background-color: ${colors.grey200};
+    }
+
+    button:active,
+    button:active:focus {
+        border-color: ${colors.grey500};
+        background-color: ${colors.grey200};
+        box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.1) inset;
+    }
+
+    button:focus {
+        background-color: #f9fafb;
+    }
+
+    button:disabled {
+        border-color: ${colors.grey400};
+        background-color: #f9fafb;
+        box-shadow: none;
+        color: ${theme.disabled};
+        fill: ${theme.disabled};
+    }
+
+    .small {
+        height: 28px;
+        padding: 0 6px;
+        font-size: 14px;
+        line-height: 16px;
+    }
+
+    .large {
+        height: 43px;
+        padding: 0 ${spacers.dp24};
+        font-size: 16px;
+        letter-spacing: 0.57px;
+        line-height: 19px;
+    }
+
+    .primary {
+        border-color: ${theme.primary800};
+        background: linear-gradient(180deg, #1565c0 0%, #0650a3 100%);
+        background-color: #2b61b3;
+        color: ${colors.white};
+        fill: ${colors.white};
+        font-weight: 500;
+    }
+
+    .primary:hover {
+        border-color: ${theme.primary800};
+        background: linear-gradient(180deg, #054fa3 0%, #034793 100%);
+        background-color: #21539f;
+    }
+
+    .primary:active,
+    .primary:active:focus {
+        background: linear-gradient(180deg, #054fa3 0%, #034793 100%);
+        background-color: #1c4a90;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
+    }
+
+    .primary:focus {
+        background: ${colors.blue800};
+        border-color: ${colors.blue900};
+        outline-offset: -5px;
+    }
+
+    .primary:disabled {
+        border-color: #93a6bd;
+        background: #b3c6de;
+        box-shadow: none;
+        color: ${colors.white};
+        fill: ${colors.white};
+    }
+
+    .secondary {
+        border-color: rgba(74, 87, 104, 0.25);
+        background-color: transparent;
+    }
+
+    .secondary:hover {
+        border-color: rgba(74, 87, 104, 0.5);
+        background-color: rgba(160, 173, 186, 0.05);
+    }
+
+    .secondary:active,
+    .secondary:active:focus {
+        background-color: rgba(160, 173, 186, 0.2);
+        box-shadow: none;
+    }
+
+    .secondary:focus {
+        background-color: transparent;
+    }
+
+    .secondary:disabled {
+        border-color: rgba(74, 87, 104, 0.25);
+        background-color: transparent;
+        box-shadow: none;
+        color: ${theme.disabled};
+        fill: ${theme.disabled};
+    }
+
+    .destructive {
+        border-color: #a10b0b;
+        background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
+        background-color: #b9242b;
+        color: ${colors.white};
+        fill: ${colors.white};
+        font-weight: 500;
+    }
+
+    .destructive:hover {
+        border-color: #a10b0b;
+        background: linear-gradient(180deg, #b81c1c 0%, #b80c0b 100%);
+        background-color: #ac0f1a;
+    }
+
+    .destructive:active,
+    .destructive:active:focus {
+        background: linear-gradient(180deg, #b81c1c 0%, #b80c0b 100%);
+        background-color: #ac101b;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
+    }
+
+    .destructive:focus {
+        background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
+        background-color: #b72229;
+    }
+
+    .destructive:disabled {
+        border-color: #c59898;
+        background: #d6a8a8;
+        box-shadow: none;
+        color: ${colors.white};
+        fill: ${colors.white};
+    }
+
+    .destructive.secondary {
+        border-color: rgba(74, 87, 104, 0.25);
+        background: transparent;
+        color: ${colors.red700};
+        fill: ${colors.red700};
+        font-weight: 400;
+    }
+
+    .destructive.secondary:hover {
+        border-color: ${colors.red600};
+        background: ${colors.red050};
+        color: ${colors.red800};
+        fill: ${colors.red800};
+    }
+
+    .destructive.secondary:active,
+    .destructive.secondary:active:focus {
+        background: ${colors.red100};
+        border-color: ${colors.red700};
+        box-shadow: none;
+    }
+
+    .destructive.secondary:disabled {
+        background: transparent;
+        border-color: rgba(74, 87, 104, 0.25);
+        color: rgba(183, 28, 28, 0.6);
+        fill: rgba(183, 28, 28, 0.6);
+    }
+
+    .icon-only {
+        padding: 0 0 0 5px;
+    }
+
+    .button-icon {
+        margin-inline-end: 6px;
+        color: inherit;
+        fill: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+    }
+
+    .icon-only .button-icon {
+        margin-inline-end: 5px;
+    }
+
+    .small.icon-only {
+        padding-block: 0;
+        padding-inline-start: 5px;
+        padding-inline-end: 4px;
+    }
+
+    .small .button-icon {
+        margin-inline-end: 2px;
+    }
+
+    .small.icon-only .button-icon {
+        margin-inline-end: 1px;
+    }
+
+    .toggled {
+        background: ${colors.grey700};
+        border: 1px solid ${colors.grey900};
+        color: ${colors.grey050};
+        fill: ${colors.grey050};
+    }
+
+    .toggled:focus {
+        background: ${colors.grey800};
+    }
+
+    .toggled:hover {
+        background: ${colors.grey800};
+        border-color: ${colors.grey900};
+    }
+
+    .toggled:active,
+    .toggled:active:focus {
+        background: ${colors.grey900};
+        border-color: ${colors.grey900};
+    }
+
+    .toggled:disabled {
+        background: ${colors.grey500};
+        border-color: ${colors.grey600};
+        color: ${colors.grey050};
+        fill: ${colors.grey050};
+    }
+
+    .loader {
+        width: 16px;
+        height: 16px;
+        margin-inline-end: 8px;
+    }
+
+    .loader + .button-icon {
+        display: none;
+    }
+
+    .icon-only .loader {
+        margin: 0 8px 0 4px;
+        margin-inline-start: 4px;
+        margin-inline-end: 8px;
+    }
+    .small.icon-only .loader {
+        margin: 0 4px;
+    }
+`

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

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

package/src/button/features/can_be_blurred.feature

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

package/src/button/features/can_be_clicked/index.js

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

package/src/button/features/can_be_clicked.feature

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

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

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

package/src/button/features/can_be_focused.feature

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

package/src/button/index.js

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

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

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

package/src/button-strip/button-strip.js

@@ -0,0 +1,58 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import { spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Children } from 'react'
+
+const ButtonStrip = ({
+    className,
+    children,
+    middle,
+    end,
+    dataTest = 'dhis2-uicore-buttonstrip',
+}) => (
+    <div
+        className={cx(className, { start: !middle && !end, middle, end })}
+        data-test={dataTest}
+    >
+        {Children.map(children, (child) => (
+            <div className="box">{child}</div>
+        ))}
+
+        <style jsx>{`
+            div {
+                display: flex;
+            }
+
+            div.middle {
+                justify-content: center;
+            }
+
+            div.end {
+                justify-content: flex-end;
+            }
+
+            .box {
+                margin-inline-start: ${spacers.dp8};
+            }
+
+            .box:first-child {
+                margin-inline-start: 0;
+            }
+        `}</style>
+    </div>
+)
+
+const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool)
+
+ButtonStrip.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Horizontal alignment for buttons. Mutually exclusive with `middle` prop */
+    end: alignmentPropType,
+    /** Horizontal alignment. Mutually exclusive with `end` prop */
+    middle: alignmentPropType,
+}
+
+export { ButtonStrip }

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Button, SplitButton } from '../index.js'
+import { ButtonStrip } from './index.js'
+
+const description = `
+A wrapper for buttons to add spacing and alignment.
+
+\`\`\`js
+import { ButtonStrip } from '@dhis2/ui'
+\`\`\`
+`
+
+const Wrapper = (fn) => (
+    <div
+        style={{
+            width: '100%',
+            border: '1px solid #c4c9cc',
+            padding: 8,
+        }}
+    >
+        {fn()}
+    </div>
+)
+
+const alignmentArgType = {
+    table: {
+        type: {
+            summary: 'bool',
+            detail: "'middle' and 'end' are mutually exclusive props",
+        },
+    },
+    control: { type: 'boolean' },
+}
+
+export default {
+    title: 'Button Strip',
+    component: ButtonStrip,
+    decorators: [Wrapper],
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        middle: { ...alignmentArgType },
+        end: { ...alignmentArgType },
+    },
+}
+
+export const Default = (args) => (
+    <ButtonStrip {...args}>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <SplitButton>Label?</SplitButton>
+    </ButtonStrip>
+)
+
+export const DefaultAlignedMiddle = (args) => (
+    <ButtonStrip {...args}>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <Button>Save</Button>
+    </ButtonStrip>
+)
+DefaultAlignedMiddle.args = { middle: true }
+DefaultAlignedMiddle.storyName = 'Default - aligned middle'
+
+export const DefaultAlignedRight = (args) => (
+    <ButtonStrip {...args}>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <Button>Save</Button>
+        <Button>Save</Button>
+    </ButtonStrip>
+)
+DefaultAlignedRight.args = { end: true }
+DefaultAlignedRight.storyName = 'Default - aligned right'
+
+export const DefaultRTL = (args) => (
+    <div dir="rtl">
+        <ButtonStrip {...args}>
+            <Button>Save</Button>
+            <Button>Save</Button>
+            <Button>Save</Button>
+            <Button>Save</Button>
+        </ButtonStrip>
+    </div>
+)
+DefaultRTL.storyName = 'Default - RTL'

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

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

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

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

package/src/button-strip/index.js

@@ -0,0 +1 @@
+export { ButtonStrip } from './button-strip.js'

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

@@ -0,0 +1,135 @@
+import { Layer } from '@dhis2-ui/layer'
+import { Popper } from '@dhis2-ui/popper'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import { mount } from 'enzyme'
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+import { Modal } from '../../../../modal/src/modal/modal.js'
+import { Button } from '../../index.js'
+import { DropdownButton } from '../dropdown-button.js'
+
+describe('<DropdownButton>', () => {
+    describe('controlled mode', () => {
+        describe('open state', () => {
+            const onClick = jest.fn()
+            const Component = (
+                <DropdownButton
+                    onClick={onClick}
+                    open={true}
+                    component={<span>test</span>}
+                />
+            )
+            it('shows the Popper when open is true', async () => {
+                // TODO: https://github.com/popperjs/react-popper/issues/350
+                const wrapper = mount(Component)
+                await act(async () => await null)
+
+                const popper = wrapper.find(Popper)
+                expect(popper).toHaveLength(1)
+                expect(popper.find('span').text()).toEqual('test')
+            })
+            it('passes an "open" property to the callback payload with the next open state', async () => {
+                // TODO: https://github.com/popperjs/react-popper/issues/350
+                const wrapper = mount(Component)
+                await act(async () => await null)
+
+                wrapper.find(Layer).find('.backdrop').simulate('click')
+                expect(onClick).toHaveBeenCalledTimes(1)
+
+                const args = onClick.mock.calls[0]
+
+                expect(args).toHaveLength(2)
+                expect(args[0]).toEqual(
+                    expect.objectContaining({
+                        open: false,
+                    })
+                )
+            })
+            it('closes dropdown when escape key is pressed', async () => {
+                const componentText = 'Dropdown Content'
+
+                const { getByTestId, queryByText } = render(
+                    <DropdownButton component={componentText} />
+                )
+
+                const toggleButton = getByTestId(
+                    'dhis2-uicore-dropdownbutton-toggle'
+                )
+                fireEvent.click(toggleButton)
+
+                await waitFor(() => {
+                    expect(queryByText(componentText)).toBeInTheDocument()
+                })
+
+                fireEvent.keyDown(document, { key: 'Escape' })
+
+                await waitFor(() => {
+                    expect(queryByText(componentText)).not.toBeInTheDocument()
+                })
+            })
+            test('modal remains open when dropdown button is closed on escape click', async () => {
+                const dropdownButtonText = 'Dropdown Content'
+                const headingText = 'Heading Text'
+                const modalContent = (
+                    <div>
+                        <h1>{headingText}</h1>
+                        <DropdownButton component={dropdownButtonText} />
+                    </div>
+                )
+
+                const { getByTestId, queryByText } = render(
+                    <Modal hide={false} onClose={() => {}}>
+                        {modalContent}
+                    </Modal>
+                )
+
+                const toggleButton = getByTestId(
+                    'dhis2-uicore-dropdownbutton-toggle'
+                )
+                fireEvent.click(toggleButton)
+
+                await waitFor(() => {
+                    expect(queryByText(dropdownButtonText)).toBeInTheDocument()
+                })
+
+                fireEvent.keyDown(document, { key: 'Escape' })
+
+                await waitFor(() => {
+                    expect(
+                        queryByText(dropdownButtonText)
+                    ).not.toBeInTheDocument()
+                    expect(queryByText(headingText)).toBeInTheDocument()
+                })
+            })
+        })
+
+        describe('closed state', () => {
+            const onClick = jest.fn()
+            const wrapper = mount(
+                <DropdownButton
+                    onClick={onClick}
+                    open={false}
+                    component={<span>test</span>}
+                />
+            )
+
+            it('it does not show the Popper when open is false', () => {
+                const popper = wrapper.find(Popper)
+                expect(popper).toHaveLength(0)
+            })
+            it('passes an "open" property to the callback payload with the next open state (false)', () => {
+                wrapper.find(Button).simulate('click')
+                expect(onClick).toHaveBeenCalledTimes(1)
+
+                const args = onClick.mock.calls[0]
+
+                expect(args).toHaveLength(2)
+                expect(args[0]).toEqual(
+                    expect.objectContaining({
+                        open: true,
+                    })
+                )
+            })
+        })
+    })
+})