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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/node",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Node",
     "repository": {
         "type": "git",
@@ -33,14 +33,15 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/loader": "10.16.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2-ui/loader": "10.16.3-alpha.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/features/accepts_children/index.js

@@ -0,0 +1,23 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a closed Node with children is rendered', () => {
+    cy.visitStory('Node', 'Closed with children')
+    cy.get('[data-test="dhis2-uicore-node"]').should('be.visible')
+})
+
+Given('an open Node with children is rendered', () => {
+    cy.visitStory('Node', 'Open with children')
+    cy.get('[data-test="dhis2-uicore-node"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.get('[data-test="dhis2-uicore-node-leaves"]')
+        .contains('I am a child')
+        .should('be.visible')
+})
+
+Then('the children are not visible', () => {
+    cy.get('[data-test="dhis2-uicore-node-leaves"]')
+        .contains('I am a child')
+        .should('not.be.visible')
+})

package/src/features/accepts_children.feature

@@ -0,0 +1,9 @@
+Feature: The Node renders children
+
+    Scenario: A closed Node with children
+        Given a closed Node with children is rendered
+        Then the children are not visible
+
+    Scenario: An open Node with children
+        Given an open Node with children is rendered
+        Then the children are visible

package/src/features/accepts_component/index.js

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

package/src/features/accepts_component.feature

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

package/src/features/accepts_icon/index.js

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

package/src/features/accepts_icon.feature

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

package/src/features/can_be_closed/index.js

@@ -0,0 +1,15 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an open Node with an onClose handler is rendered', () => {
+    cy.visitStory('Node', 'Open with on close')
+})
+
+When('the arrow is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-node-toggle"]').click()
+})
+
+Then('the onClose handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onClose).to.be.calledWith({ open: false })
+    })
+})

package/src/features/can_be_closed.feature

@@ -0,0 +1,6 @@
+Feature: The Node has an onClose api
+
+    Scenario: The user closes the Node
+        Given an open Node with an onClose handler is rendered
+        When the arrow is clicked
+        Then the onClose handler is called

package/src/features/can_be_opened/index.js

@@ -0,0 +1,15 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a closed Node with an onOpen handler is rendered', () => {
+    cy.visitStory('Node', 'Closed with on open')
+})
+
+When('the arrow is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-node-toggle"]').click()
+})
+
+Then('the onOpen handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onOpen).to.be.calledWith({ open: true })
+    })
+})

package/src/features/can_be_opened.feature

@@ -0,0 +1,6 @@
+Feature: The Node has an onOpen api
+
+    Scenario: The user opens the Node
+        Given a closed Node with an onOpen handler is rendered
+        When the arrow is clicked
+        Then the onOpen handler is called

package/src/index.js

@@ -0,0 +1 @@
+export { Node } from './node.js'

package/src/leaves.js

@@ -0,0 +1,27 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Leaves = ({ children, open, dataTest }) => (
+    <div className={cx({ open })} data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                height: 0;
+                overflow: hidden;
+                flex-grow: 1;
+            }
+
+            .open {
+                height: auto;
+            }
+        `}</style>
+    </div>
+)
+
+Leaves.propTypes = {
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+    open: PropTypes.bool,
+}

package/src/node.e2e.stories.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Node } from './node.js'
+
+window.onClose = window.Cypress && window.Cypress.cy.stub()
+window.onOpen = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'Node' }
+export const OpenWithOnClose = () => (
+    <Node open onClose={window.onClose} component={<div>Component</div>}>
+        Children
+    </Node>
+)
+export const ClosedWithOnOpen = () => (
+    <Node onOpen={window.onOpen} component={<div>Component</div>}>
+        Children
+    </Node>
+)
+export const ClosedWithChildren = () => (
+    <Node component={<div>Component</div>}>I am a child</Node>
+)
+export const OpenWithChildren = () => (
+    <Node open component={<div>Component</div>}>
+        I am a child
+    </Node>
+)
+export const WithComponent = () => (
+    <Node component={<div>I am a component</div>}>Children</Node>
+)
+export const WithIcon = () => (
+    <Node component={<div>Component</div>} icon={<div>Icon</div>}>
+        Children
+    </Node>
+)

package/src/node.js

@@ -0,0 +1,66 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Leaves } from './leaves.js'
+import { Spacer } from './spacer.js'
+import { Toggle } from './toggle.js'
+
+export const Node = ({
+    open,
+    className,
+    component: label,
+    children,
+    icon,
+    onOpen,
+    onClose,
+    dataTest = 'dhis2-uicore-node',
+}) => {
+    const hasLeaves = !!React.Children.toArray(children).filter((i) => i).length
+    const showArrow = !icon && hasLeaves
+    const showSpacer = !icon && !hasLeaves
+
+    return (
+        <div className={cx('node', className)} data-test={dataTest}>
+            {icon && <div data-test={`${dataTest}-icon`}>{icon}</div>}
+
+            {showArrow && (
+                <Toggle
+                    open={open}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    dataTest={`${dataTest}-toggle`}
+                />
+            )}
+
+            {showSpacer && <Spacer />}
+
+            <div data-test={`${dataTest}-content`}>
+                <div data-test={`${dataTest}-label`}>{label}</div>
+
+                <Leaves open={open} dataTest={`${dataTest}-leaves`}>
+                    {children}
+                </Leaves>
+            </div>
+
+            <style jsx>{`
+                .node {
+                    display: flex;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Node.propTypes = {
+    /** Content below this level of the hierarchy; children are revealed when this leaf is 'open' */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /** Content/label for this leaf, for example a checkbox */
+    component: PropTypes.element,
+    dataTest: PropTypes.string,
+    /** A custom icon to use instead of a toggle arrow */
+    icon: PropTypes.node,
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    onOpen: PropTypes.func,
+}

package/src/node.prod.stories.js

@@ -0,0 +1,404 @@
+import { Checkbox } from '@dhis2-ui/checkbox'
+import { CircularLoader } from '@dhis2-ui/loader'
+import React from 'react'
+import { Node } from './node.js'
+
+const description = `
+A tool for creating hierarchical, multi-level selectors.  Applied in the Organisation Unit Tree component, for example.
+
+\`\`\`js
+import { Node } from '@dhis2/ui'
+\`\`\`
+`
+
+const say = (something) => () => alert(something)
+
+window.onOpen = (payload, event) => {
+    console.log('onOpen payload', payload)
+    console.log('onOpen event', event)
+}
+
+window.onClose = (payload, event) => {
+    console.log('onClose payload', payload)
+    console.log('onClose event', event)
+}
+
+const onOpen = (...args) => window.onOpen(...args)
+const onClose = (...args) => window.onClose(...args)
+
+export default {
+    title: 'Node',
+    component: Node,
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const CustomIcon = (args) => <Node {...args} />
+CustomIcon.args = {
+    icon: <CircularLoader small />,
+    open: false,
+    onOpen: onOpen,
+    onClose: onClose,
+    component: (
+        <Checkbox
+            label="Node label 1.1"
+            value="foobar"
+            name="l1.1"
+            onChange={say('checkbox 1.1 clicked')}
+            checked={false}
+        />
+    ),
+}
+CustomIcon.storyName = 'Custom icon'
+
+export const MultipleRoots = (args) => (
+    <div>
+        <Node
+            {...args}
+            component={
+                <Checkbox
+                    label="Node label 1.1"
+                    value="foobar"
+                    name="l1.1"
+                    onChange={say('checkbox 1.1 clicked')}
+                    checked={false}
+                />
+            }
+        >
+            <span>Placeholder content</span>
+        </Node>
+
+        <Node
+            {...args}
+            component={
+                <Checkbox
+                    label="Node label 1.2"
+                    value="foobar"
+                    name="l1.2"
+                    onChange={say('checkbox 1.2 clicked')}
+                    checked={false}
+                />
+            }
+        >
+            <span>Placeholder content</span>
+        </Node>
+    </div>
+)
+MultipleRoots.args = { open: false, onOpen, onClose }
+MultipleRoots.storyName = 'Multiple roots'
+
+export const _2LevelsOpen = () => (
+    <Node
+        open={true}
+        onOpen={onOpen}
+        onClose={onClose}
+        component={
+            <Checkbox
+                label="Node label"
+                value="foobar"
+                name="l1.1"
+                onChange={say('Check 1.1')}
+                checked={false}
+            />
+        }
+    >
+        <Node
+            open={true}
+            onOpen={onOpen}
+            onClose={onClose}
+            component={
+                <Checkbox
+                    label="Node label"
+                    value="foobar"
+                    name="l2.1"
+                    onChange={say('Check 2.1')}
+                    checked={false}
+                />
+            }
+        >
+            <Node
+                component={
+                    <Checkbox
+                        label="Node label"
+                        name="l3.1"
+                        value="foobar"
+                        onChange={say('Check 3.1')}
+                        checked={false}
+                    />
+                }
+            />
+            <Node
+                component={
+                    <Checkbox
+                        label="Node label"
+                        name="l3.2"
+                        onChange={say('Check 3.2')}
+                        value="foobar"
+                        checked={false}
+                    />
+                }
+            />
+            <Node
+                component={
+                    <Checkbox
+                        label="Node label"
+                        name="l3.3"
+                        onChange={say('Check 3.3')}
+                        checked={false}
+                        value="foobar"
+                    />
+                }
+            />
+        </Node>
+        <Node
+            open={false}
+            onOpen={onOpen}
+            onClose={say('close tree 2.2')}
+            component={
+                <Checkbox
+                    label="Node label"
+                    name="l3.1"
+                    onChange={say('Check 2.2')}
+                    value="foobar"
+                    checked={false}
+                />
+            }
+        >
+            <Node
+                component={
+                    <Checkbox
+                        label="Node label"
+                        name="l3.4"
+                        value="foobar"
+                        onChange={say('Check 3.4')}
+                        checked={false}
+                    />
+                }
+            />
+            <Node
+                component={
+                    <Checkbox
+                        label="Node label"
+                        name="l3.5"
+                        onChange={say('Check 3.5')}
+                        value="foobar"
+                        checked={false}
+                    />
+                }
+            />
+            <Node
+                component={
+                    <Checkbox
+                        label="Node label"
+                        name="l3.6"
+                        onChange={say('Check 3.6')}
+                        value="foobar"
+                        checked={false}
+                    />
+                }
+            />
+        </Node>
+        <Node
+            open={false}
+            onOpen={onOpen}
+            onClose={onClose}
+            component={
+                <Checkbox
+                    label="Node label"
+                    name="l2.3"
+                    value="foobar"
+                    onChange={say('Check 2.3')}
+                    checked={false}
+                />
+            }
+        />
+        <Node
+            open={false}
+            onOpen={onOpen}
+            onClose={onClose}
+            component={
+                <Checkbox
+                    label="Node label"
+                    name="l2.4"
+                    onChange={say('Check 2.4')}
+                    value="foobar"
+                    checked={false}
+                />
+            }
+        />
+        <Node
+            open={false}
+            onOpen={onOpen}
+            onClose={onClose}
+            component={
+                <Checkbox
+                    label="Node label"
+                    name="l2.5"
+                    value="foobar"
+                    onChange={say('Check 2.5')}
+                    checked={false}
+                />
+            }
+        />
+        <Node
+            open={false}
+            onOpen={onOpen}
+            onClose={onClose}
+            component={
+                <Checkbox
+                    label="Node label"
+                    name="l2.5"
+                    value="foobar"
+                    onChange={say('Check 2.5')}
+                    checked={false}
+                />
+            }
+        >
+            {false && 'Foo'}
+        </Node>
+    </Node>
+)
+_2LevelsOpen.storyName = '2 Levels open'
+
+export const TextLeaves = () => (
+    <div>
+        <Node
+            open={true}
+            onOpen={onOpen}
+            onClose={onClose}
+            arrowTopOffset="10px"
+            component={
+                <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
+            }
+        >
+            Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
+            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+            <div className="sub-tree sub-tree--open">
+                <Node
+                    open={true}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    component={
+                        <h2>
+                            Lorem ipsum dolor sit amet, consetetur sadipscing
+                            elitr
+                        </h2>
+                    }
+                >
+                    Sed diam nonumy eirmod tempor invidunt ut labore et dolore
+                    magna aliquyam erat, sed diam voluptua. At vero eos et
+                    accusam et justo duo dolores et ea rebum. Stet clita kasd
+                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+                    amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+                    elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                    dolore magna aliquyam erat, sed diam voluptua. At vero eos
+                    et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+                    amet.
+                </Node>
+            </div>
+            <div className="sub-tree">
+                <Node
+                    open={false}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    component={
+                        <h2>
+                            Lorem ipsum dolor sit amet, consetetur sadipscing
+                            elitr
+                        </h2>
+                    }
+                >
+                    <span>Dummy content</span>
+                </Node>
+            </div>
+            <div className="sub-tree">
+                <Node
+                    open={false}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    component={
+                        <h2>
+                            Lorem ipsum dolor sit amet, consetetur sadipscing
+                            elitr
+                        </h2>
+                    }
+                >
+                    <span>Dummy content</span>
+                </Node>
+            </div>
+            <div className="sub-tree">
+                <Node
+                    open={false}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    component={
+                        <h2>
+                            Lorem ipsum dolor sit amet, consetetur sadipscing
+                            elitr
+                        </h2>
+                    }
+                >
+                    <span>Dummy content</span>
+                </Node>
+            </div>
+            <div className="sub-tree">
+                <Node
+                    open={false}
+                    onOpen={onOpen}
+                    onClose={onClose}
+                    component={
+                        <h2>
+                            Lorem ipsum dolor sit amet, consetetur sadipscing
+                            elitr
+                        </h2>
+                    }
+                >
+                    <span>Dummy content</span>
+                </Node>
+            </div>
+        </Node>
+
+        <style jsx>{`
+            div {
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+            h2 {
+                font-size: 24px;
+                line-height: 32px;
+                margin: 0 0 10px;
+            }
+
+            .sub-tree {
+                margin-top: 10px;
+            }
+
+            .sub-tree--open {
+                margin-bottom: 20px;
+            }
+
+            div :global(.tree__arrow > span) {
+                padding-top: 4px;
+            }
+
+            div :global(.tree__arrow.open:after) {
+                top: 17px;
+                height: calc(100% - 28px);
+            }
+        `}</style>
+    </div>
+)
+TextLeaves.storyName = 'Text leaves'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <MultipleRoots {...args} />
+    </div>
+)

package/src/spacer.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const Spacer = () => (
+    <div>
+        <style jsx>{`
+            div {
+                width: 24px;
+            }
+        `}</style>
+    </div>
+)

package/src/toggle.js

@@ -0,0 +1,93 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const ArrowDown = () => (
+    <div className="nodeArrow">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 24px;
+                    width: 24px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    </div>
+)
+
+export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
+    const onClick = open ? onClose : onOpen
+
+    return (
+        <div
+            className={cx({ open })}
+            data-test={dataTest}
+            onClick={(event) => onClick && onClick({ open: !open }, event)}
+        >
+            <span>
+                <ArrowDown />
+            </span>
+
+            <style jsx>{`
+                div {
+                    width: 24px;
+                    position: relative;
+                    flex-shrink: 0;
+                }
+                div:after {
+                    background: ${colors.grey400};
+                    height: calc(100% - 24px);
+                    inset-inline-start: 12px;
+                    position: absolute;
+                    top: 15px;
+                    width: 1px;
+                    z-index: 1;
+                }
+                .open:after {
+                    content: '';
+                }
+                span {
+                    display: block;
+                    position: relative;
+                    z-index: 2;
+                    fill: ${colors.grey900};
+                }
+                div :global(.nodeArrow) {
+                    vertical-align: top;
+                    transform: rotate(-90deg);
+                    transition: transform 0.1s ease-out;
+                }
+                div :global(.nodeArrow:dir(rtl)) {
+                    transform: rotate(90deg);
+                }
+                .open :global(.nodeArrow) {
+                    transform: rotate(0);
+                }
+                .open :global(.nodeArrow:dir(rtl)) {
+                    transform: rotate(0);
+                }
+
+                div:hover {
+                    cursor: pointer;
+                    border-radius: 3px;
+                    background: ${colors.grey100};
+                }
+                div:hover:after {
+                    background: #bcc8d4;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Toggle.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    onOpen: PropTypes.func,
+}