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

package/src/data-table/table-elements/__tests__/table.test.js

@@ -0,0 +1,53 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { Table } from '../table.js'
+
+describe('<Table>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<Table>{children}</Table>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(<Table ref={ref} />)
+
+        expect(wrapper.find('table').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a borderless prop', () => {
+        const wrapper = shallow(<Table borderless />)
+
+        expect(wrapper.find('table').hasClass('borderless')).toBe(true)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<Table className={className} />)
+
+        expect(wrapper.find('table').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<Table dataTest={dataTest} />)
+
+        expect(wrapper.find('table').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a layout prop', () => {
+        const layout = 'fixed'
+        const wrapper = shallow(<Table layout={layout} />)
+
+        expect(wrapper.html()).toContain(`table-layout: ${layout};`)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<Table role={role} />)
+
+        expect(wrapper.find('table').prop('role')).toBe(role)
+    })
+    it('accepts a width prop', () => {
+        const width = '200px'
+        const wrapper = shallow(<Table width={width} />)
+
+        expect(wrapper.html()).toContain(`width: ${width};`)
+    })
+})

package/src/data-table/table-elements/features/can_scroll/index.js

@@ -0,0 +1,42 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a scrolling table is rendered', () => {
+    cy.visitStory('Table', 'Fixed Header And Columns')
+})
+When('the user scrolls down', () => {
+    cy.get('[data-test="dhis2-uicore-tablescrollbox"]').scrollTo('bottomLeft')
+})
+When('the user scrolls right', () => {
+    cy.get('[data-test="dhis2-uicore-tablescrollbox"]').scrollTo('topRight')
+})
+When('the user scrolls down and right', () => {
+    cy.get('[data-test="dhis2-uicore-tablescrollbox"]').scrollTo('bottomRight')
+})
+Then('the header row is visible', () => {
+    cy.get('thead > tr > th').should('be.visible')
+})
+Then('the first two table columns are visible', () => {
+    cy.get('tbody > tr > th:nth-child(1)').should('be.visible')
+    cy.get('tbody > tr > th:nth-child(2)').should('be.visible')
+})
+Then('the bottom right scrolling table cell is visible', () => {
+    cy.get('td').contains('scrolling bottom-right').should('be.visible')
+})
+Then('the top left scrolling table cell is not visible', () => {
+    cy.get('td').contains('scrolling top-left').should('not.be.visible')
+})
+Then('the bottom left scrolling table cell is not visible', () => {
+    cy.get('td').contains('scrolling bottom-left').should('not.be.visible')
+})
+Then('the top right scrolling table cell is not visible', () => {
+    cy.get('td').contains('scrolling top-right').should('not.be.visible')
+})
+Then('the top right scrolling table cell is visible', () => {
+    cy.get('td').contains('scrolling top-right').should('be.visible')
+})
+Then('the bottom left scrolling table cell is visible', () => {
+    cy.get('td').contains('scrolling bottom-left').should('be.visible')
+})
+Then('the bottom right scrolling table cell is not visible', () => {
+    cy.get('td').contains('scrolling bottom-right').should('not.be.visible')
+})

package/src/data-table/table-elements/features/can_scroll.feature

@@ -0,0 +1,31 @@
+Feature: Scrolling a Table
+
+    Scenario: The user vertically scrolls the Table
+        Given a scrolling table is rendered
+        When the user scrolls down
+        Then the header row is visible
+        And the first two table columns are visible
+        And the bottom left scrolling table cell is visible
+        But the bottom right scrolling table cell is not visible
+        And the top left scrolling table cell is not visible
+        And the top right scrolling table cell is not visible
+
+    Scenario: The user horizontally scrolls the Table
+        Given a scrolling table is rendered
+        When the user scrolls right
+        Then the header row is visible
+        And the first two table columns are visible
+        And the top right scrolling table cell is visible
+        But the bottom right scrolling table cell is not visible
+        And the top left scrolling table cell is not visible
+        And the bottom left scrolling table cell is not visible
+
+    Scenario: The user vertically and horizontally scrolls the Table
+        Given a scrolling table is rendered
+        When the user scrolls down and right
+        Then the header row is visible
+        And the first two table columns are visible
+        And the bottom right scrolling table cell is visible
+        But the top left scrolling table cell is not visible
+        And the bottom left scrolling table cell is not visible
+        And the top right scrolling table cell is not visible

package/src/data-table/table-elements/index.js

@@ -0,0 +1,10 @@
+export { Table } from './table.js'
+export { TableBody } from './table-body.js'
+export { TableDataCell } from './table-data-cell/table-data-cell.js'
+export { TableHeaderCell } from './table-header-cell/table-header-cell.js'
+export { TableHeaderCellAction } from './table-header-cell-action.js'
+export { TableFoot } from './table-foot.js'
+export { TableHead } from './table-head.js'
+export { TableRow } from './table-row.js'
+export { TableScrollBox } from './table-scroll-box.js'
+export { TableToolbar } from './table-toolbar.js'

package/src/data-table/table-elements/table-body.js

@@ -0,0 +1,75 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableBody = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablebody',
+            role,
+            loading,
+            ...props
+        },
+        ref
+    ) => (
+        <tbody
+            {...props}
+            className={cx(className, {
+                loading,
+            })}
+            data-test={dataTest}
+            ref={ref}
+            role={role}
+        >
+            {children}
+            <style jsx>{`
+                tbody {
+                    position: relative;
+                }
+                .loading:before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    inset-inline-start: 0;
+                    inset-inline-end: 0;
+                    background-color: rgba(255, 255, 255, 0.8);
+                }
+                .loading:after {
+                    content: '';
+                    position: absolute;
+                    top: calc(50% - 24px);
+                    inset-inline-start: calc(50% - 24px);
+                    width: 48px;
+                    height: 48px;
+                    border: 6px solid rgba(110, 122, 138, 0.15);
+                    border-bottom-color: ${colors.blue600};
+                    border-radius: 50%;
+                    animation: rotation 1s linear infinite;
+                }
+                @keyframes rotation {
+                    0% {
+                        transform: rotate(0);
+                    }
+
+                    100% {
+                        transform: rotate(360deg);
+                    }
+                }
+            `}</style>
+        </tbody>
+    )
+)
+TableBody.displayName = 'TableBody'
+
+TableBody.propTypes = {
+    /** Should be `<TableRow>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    loading: PropTypes.bool,
+    role: PropTypes.string,
+}

package/src/data-table/table-elements/table-data-cell/table-data-cell.js

@@ -0,0 +1,126 @@
+import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types'
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import styles from './table-data-cell.styles.js'
+
+const rtlCorrespondingAlignments = {
+    left: 'right',
+    right: 'left',
+    center: 'center',
+}
+
+export const TableDataCell = forwardRef(
+    (
+        {
+            active,
+
+            align = 'left',
+            backgroundColor,
+            bordered,
+            children,
+            className,
+            colSpan,
+            dataTest = 'dhis2-uicore-tabledatacel',
+            error,
+            large,
+            left = 'auto',
+            muted,
+            role,
+            rowSpan,
+            scope,
+            staticStyle,
+            valid,
+            width = 'auto',
+            onClick,
+            ...props
+        },
+        ref
+    ) => {
+        const rtlAlign = rtlCorrespondingAlignments[align] ?? align
+        return (
+            <td
+                {...props}
+                ref={ref}
+                colSpan={colSpan}
+                rowSpan={rowSpan}
+                onClick={onClick}
+                className={cx(className, {
+                    active,
+                    bordered,
+                    error,
+                    large,
+                    muted,
+                    staticStyle,
+                    valid,
+                })}
+                data-test={dataTest}
+                role={role}
+                scope={scope}
+            >
+                {children}
+                <style jsx>{styles}</style>
+                <style jsx>{`
+                    td {
+                        inset-inline-start: ${left};
+                        text-align: ${align};
+                        width: ${width};
+                        background-color: ${backgroundColor || colors.white};
+                    }
+                    :dir(rtl) {
+                        text-align: ${rtlAlign};
+                    }
+                    :global(tr.selected) > td {
+                        background-color: ${backgroundColor || colors.teal100};
+                    }
+                    :global(tr:hover) > td:not(.staticStyle) {
+                        background-color: ${backgroundColor || colors.grey100};
+                    }
+                    :global(tr:active) > td:not(.staticStyle) {
+                        background-color: ${backgroundColor || colors.grey200};
+                    }
+                    :global(tr.selected:hover) > td:not(.staticStyle) {
+                        background-color: ${backgroundColor || '#cdeae8'};
+                    }
+                `}</style>
+            </td>
+        )
+    }
+)
+
+TableDataCell.displayName = 'TableDataCell'
+
+const stylePropType = mutuallyExclusive(
+    ['valid', 'error', 'muted'],
+    PropTypes.bool
+)
+
+TableDataCell.propTypes = {
+    /** To toggle border color, for example for editing */
+    active: PropTypes.bool,
+    align: PropTypes.oneOf(['left', 'center', 'right']),
+    /** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
+    backgroundColor: PropTypes.string,
+    bordered: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Mutually exclusive with muted and valid */
+    error: stylePropType,
+    large: PropTypes.bool,
+    /** Required when fixed */
+    left: requiredIf((props) => props.fixed, PropTypes.string),
+    /** Mutually exclusive with error and valid */
+    muted: stylePropType,
+    role: PropTypes.string,
+    rowSpan: PropTypes.string,
+    scope: PropTypes.string,
+    /** Surpress hover and active event styles */
+    staticStyle: PropTypes.bool,
+    /** Mutually exclusive with error and muted */
+    valid: stylePropType,
+    width: PropTypes.string,
+    onClick: PropTypes.func,
+}

package/src/data-table/table-elements/table-data-cell/table-data-cell.styles.js

@@ -0,0 +1,42 @@
+import { colors } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css`
+    td {
+        padding: 14px 12px;
+        font-size: 14px;
+        border: 1px solid transparant;
+        border-bottom: 1px solid ${colors.grey300};
+        color: ${colors.grey900};
+    }
+    td.active {
+        outline: 2px solid ${colors.grey600};
+        outline-offset: -2px;
+    }
+    td.bordered {
+        border-inline-end: 1px solid ${colors.grey300};
+    }
+    td.bordered:last-child {
+        border-inline-end: 1px solid transparent;
+    }
+    td.error {
+        color: ${colors.red700};
+    }
+    td.muted {
+        color: ${colors.grey700};
+        font-style: italic;
+    }
+    td.valid {
+        color: ${colors.green700};
+    }
+    td.large {
+        padding: 20px 12px;
+        font-size: 16px;
+    }
+    :global(tr:last-child) td {
+        border-bottom: 1px solid transparent;
+    }
+    :global(tfoot) :global(tr:first-child) td {
+        border-top: 1px solid ${colors.grey300};
+    }
+`

package/src/data-table/table-elements/table-foot.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableFoot = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablefoot',
+            role,
+            ...props
+        },
+        ref
+    ) => (
+        <tfoot
+            {...props}
+            className={className}
+            data-test={dataTest}
+            ref={ref}
+            role={role}
+        >
+            {children}
+        </tfoot>
+    )
+)
+
+TableFoot.displayName = 'TableFoot'
+
+TableFoot.propTypes = {
+    /** Should be `<TableRow>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+}

package/src/data-table/table-elements/table-head.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableHead = forwardRef(
+    ({ children, className, dataTest, role, ...props }, ref) => (
+        <thead
+            {...props}
+            className={className}
+            data-test={dataTest}
+            ref={ref}
+            role={role}
+        >
+            {children}
+        </thead>
+    )
+)
+
+TableHead.displayName = 'TableHead'
+
+TableHead.propTypes = {
+    /** Should be `<TableRowHead>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+}

package/src/data-table/table-elements/table-header-cell/table-header-cell.js

@@ -0,0 +1,121 @@
+import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types'
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import styles from './table-header-cell.styles.js'
+
+const AUTO = 'auto'
+
+export const TableHeaderCell = forwardRef(
+    (
+        {
+            active,
+            align = 'left',
+            backgroundColor,
+            bordered,
+            children,
+            className,
+            colSpan,
+            dataTest = 'dhis2-uicore-tablecell',
+            error,
+            fixed,
+            large,
+            left = AUTO,
+            muted,
+            rowSpan,
+            role,
+            scope,
+            staticStyle,
+            top = AUTO,
+            valid,
+            width = AUTO,
+            onClick,
+            ...props
+        },
+        ref
+    ) => (
+        <th
+            {...props}
+            ref={ref}
+            colSpan={colSpan}
+            rowSpan={rowSpan}
+            onClick={onClick}
+            className={cx(className, {
+                active,
+                bordered,
+                error,
+                fixed,
+                fixedHorizontally: fixed && left !== AUTO,
+                large,
+                muted,
+                staticStyle,
+                valid,
+            })}
+            data-test={dataTest}
+            role={role}
+            scope={scope}
+        >
+            {children}
+            <style jsx>{styles}</style>
+            <style jsx>{`
+                th {
+                    inset-inline-start: ${left};
+                    top: ${top};
+                    text-align: ${align};
+                    width: ${width};
+                    background-color: ${backgroundColor || colors.grey200};
+                }
+                :global(thead) th.fixedHorizontally {
+                    background-color: ${backgroundColor || colors.grey300};
+                }
+                :global(tbody) > :global(tr:hover) > th:not(.staticStyle),
+                :global(tfoot) > :global(tr:hover) > th:not(.staticStyle) {
+                    background-color: ${backgroundColor || colors.grey300};
+                }
+                :global(tbody) > :global(tr:active) > th:not(.staticStyle) {
+                    background-color: ${backgroundColor || colors.grey200};
+                }
+            `}</style>
+        </th>
+    )
+)
+
+TableHeaderCell.displayName = 'TableHeaderCell'
+
+const stylePropType = mutuallyExclusive(
+    ['valid', 'error', 'muted'],
+    PropTypes.bool
+)
+
+TableHeaderCell.propTypes = {
+    /** To toggle border color, for example for editing */
+    active: PropTypes.bool,
+    align: PropTypes.oneOf(['left', 'center', 'right']),
+    /** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
+    backgroundColor: PropTypes.string,
+    bordered: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Mutually exclusive with muted and valid */
+    error: stylePropType,
+    fixed: PropTypes.bool,
+    large: PropTypes.bool,
+    /** Left or top required when fixed */
+    left: requiredIf((props) => props.fixed && !props.top, PropTypes.string),
+    /** Mutually exclusive with error and valid */
+    muted: stylePropType,
+    role: PropTypes.string,
+    rowSpan: PropTypes.string,
+    scope: PropTypes.string,
+    /** Surpress hover and active event styles */
+    staticStyle: PropTypes.bool,
+    /** Left or top required when fixed */
+    top: requiredIf((props) => props.fixed && !props.left, PropTypes.string),
+    /** Mutually exclusive with error and muted */
+    valid: stylePropType,
+    width: PropTypes.string,
+    onClick: PropTypes.func,
+}

package/src/data-table/table-elements/table-header-cell/table-header-cell.styles.js

@@ -0,0 +1,71 @@
+import { colors } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+
+export default css`
+    th {
+        padding: 12px;
+        border: 1px solid transparant;
+        border-bottom: 1px solid ${colors.grey300};
+        color: ${colors.grey800};
+        font-weight: normal;
+        font-size: 14px;
+        vertical-align: top;
+    }
+    :global(thead) th {
+        padding: 8px 12px;
+        font-size: 13px;
+    }
+    th:last-of-type {
+        border-inline-end: 1px solid ${colors.grey300};
+    }
+    th.active {
+        outline: 2px solid ${colors.grey600};
+        outline-offset: -2px;
+    }
+    th.bordered {
+        border-inline-end: 1px solid ${colors.grey300};
+    }
+    th.bordered:last-child {
+        border-inline-end: 1px solid transparent;
+    }
+    th.error {
+        color: ${colors.red700};
+    }
+    th.muted {
+        color: ${colors.grey700};
+        font-style: italic;
+    }
+    th.valid {
+        color: ${colors.green700};
+    }
+    th.large {
+        padding: 14px 12px;
+        font-size: 16px;
+    }
+    :global(thead) th.large {
+        padding: 13px 12px;
+        font-size: 15px;
+    }
+    th.fixed {
+        position: sticky;
+        z-index: 1;
+    }
+    :global(thead) th.fixed {
+        position: sticky;
+        /* ensure on top of scrolling body cells */
+        z-index: 2;
+    }
+    :global(thead) th.fixedHorizontally {
+        /* ensure on top of all scrolling cells */
+        z-index: 3;
+    }
+    :global(tr:last-child) th {
+        border-bottom: 1px solid transparent;
+    }
+    :global(thead) :global(tr:last-child) th {
+        border-bottom: 1px solid ${colors.grey300};
+    }
+    :global(tfoot) > :global(tr:first-child) th {
+        border-top: 1px solid ${colors.grey300};
+    }
+`