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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/cover",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Cover",
     "repository": {
         "type": "git",
@@ -33,13 +33,14 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@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/cover.e2e.stories.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Cover } from './cover.js'
+
+window.onButtonClick = window.Cypress && window.Cypress.cy.stub()
+window.onCover = window.Cypress && window.Cypress.cy.stub()
+
+export default {
+    title: 'Cover',
+    component: Cover,
+    decorators: [
+        (story) => (
+            <div>
+                {story()}
+                <style jsx>{`
+                    div {
+                        width: 400px;
+                        height: 400px;
+                        position: relative;
+                        border: 1px dotted grey;
+                    }
+                `}</style>
+            </div>
+        ),
+    ],
+}
+
+export const WithChildren = () => (
+    <Cover>
+        <p>I am a child</p>
+    </Cover>
+)
+
+export const Blocking = () => (
+    <>
+        <button data-test="button" onClick={window.onButtonClick}>
+            Test
+        </button>
+        <Cover />
+    </>
+)
+
+export const WithClickHandler = () => (
+    <Cover onClick={window.onCover}>
+        <button data-test="button" onClick={window.onButtonClick}>
+            Test
+        </button>
+    </Cover>
+)

package/src/cover.js

@@ -0,0 +1,51 @@
+import { layers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const createClickHandler = (onClick) => (event) => {
+    // don't respond to clicks that originated in the children
+    if (onClick && event.target === event.currentTarget) {
+        onClick({}, event)
+    }
+}
+
+const Cover = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-componentcover',
+    onClick,
+    translucent,
+}) => (
+    <div
+        className={cx(className, { translucent })}
+        onClick={createClickHandler(onClick)}
+        data-test={dataTest}
+    >
+        {children}
+        <style jsx>{`
+            div {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: ${layers.applicationTop};
+            }
+            div.translucent {
+                background: rgba(33, 43, 54, 0.4);
+            }
+        `}</style>
+    </div>
+)
+
+Cover.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Adds a semi-transparent background to the cover */
+    translucent: PropTypes.bool,
+    onClick: PropTypes.func,
+}
+
+export { Cover }

package/src/cover.prod.stories.js

@@ -0,0 +1,52 @@
+import { Center } from '@dhis2-ui/center'
+import { CircularLoader } from '@dhis2-ui/loader'
+import React from 'react'
+import { Cover } from './cover.js'
+
+const description = `
+Covers sibling components.  Useful for covering a component while it is loading.
+
+\`\`\`js
+import { Cover } from '@dhis2/ui'
+\`\`\`
+`
+
+export default {
+    title: 'Component Cover',
+    component: Cover,
+    parameters: { docs: { description: { component: description } } },
+}
+
+const Template = (args) => (
+    <div
+        style={{
+            width: '400px',
+            height: '200px',
+            position: 'relative',
+            border: '1px dotted grey',
+        }}
+    >
+        <Cover {...args} />
+
+        <h1>Text behind the cover</h1>
+        <p>Lorem ipsum</p>
+    </div>
+)
+
+export const Default = Template.bind({})
+
+export const Translucent = Template.bind({})
+Translucent.args = { translucent: true }
+
+export const WithClickHandler = Template.bind({})
+WithClickHandler.args = { onClick: () => alert('Cover was clicked') }
+
+export const WithCenteredContentCircularLoader = Template.bind({})
+WithCenteredContentCircularLoader.args = {
+    translucent: true,
+    children: (
+        <Center>
+            <CircularLoader />
+        </Center>
+    ),
+}

package/src/features/accepts_children/index.js

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

package/src/features/accepts_children.feature

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

package/src/features/click_behavior/index.js

@@ -0,0 +1,52 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Cover with a button below it is rendered', () => {
+    cy.visitStory('Cover', 'Blocking')
+})
+
+Given('a Cover with a button in it is rendered', () => {
+    cy.visitStory('Cover', 'With Click Handler')
+})
+
+When('the user clicks the button', () => {
+    cy.get('[data-test="button"]').click()
+})
+
+When('the user clicks on the Cover', () => {
+    cy.get('[data-test="dhis2-uicore-componentcover"]').click()
+})
+
+When('the user clicks on the button coordinates', () => {
+    cy.getPositionsBySelectors('button').then(([rect]) => {
+        // Get button center coordinates
+        const buttonCenterX = rect.left + rect.width / 2
+        const buttonCenterY = rect.top + rect.height / 2
+
+        // click body on the button center
+        cy.get('body').click(buttonCenterX, buttonCenterY)
+    })
+})
+
+Then('the onClick handler of the button is called', () => {
+    cy.window().should((win) => {
+        expect(win.onButtonClick).to.be.calledOnce
+    })
+})
+
+Then('the onClick handler of the Cover is called', () => {
+    cy.window().should((win) => {
+        expect(win.onCover).to.be.calledOnce
+    })
+})
+
+Then('the onClick handler of the button is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onButtonClick).to.have.callCount(0)
+    })
+})
+
+Then('the onClick handler of the Cover is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onCover).to.have.callCount(0)
+    })
+})

package/src/features/click_behavior.feature

@@ -0,0 +1,17 @@
+Feature: The Cover has configurable click behaviour
+
+    Scenario: A blocking Cover
+        Given a Cover with a button below it is rendered
+        When the user clicks on the button coordinates
+        Then the onClick handler of the button is not called
+
+    Scenario: A blocking Cover with an onClick handler
+        Given a Cover with a button in it is rendered
+        When the user clicks on the Cover
+        Then the onClick handler of the Cover is called
+
+    Scenario: Clicks orginating from children are ignored
+        Given a Cover with a button in it is rendered
+        When the user clicks the button
+        Then the onClick handler of the button is called
+        But the onClick handler of the Cover is not called

package/src/index.js

@@ -0,0 +1 @@
+export { Cover } from './cover.js'