@dhis2-ui/cover 9.11.0 → 9.11.1-beta.2

package/build/cjs/{cover.stories.e2e.js → cover.e2e.stories.js}

@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithClickHandler = exports.WithChildren = exports.Blocking = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _cover = require("./cover.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 window.onButtonClick = window.Cypress && window.Cypress.cy.stub();
 window.onCover = window.Cypress && window.Cypress.cy.stub();
-var _default = {
+var _default = exports.default = {
   title: 'Cover',
   component: _cover.Cover,
   decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
@@ -24,22 +19,17 @@ var _default = {
     id: "1235544169"
   }, ["div.jsx-1235544169{width:400px;height:400px;position:relative;border:1px dotted grey;}"]))]
 };
-exports.default = _default;
-
 const WithChildren = () => /*#__PURE__*/_react.default.createElement(_cover.Cover, null, /*#__PURE__*/_react.default.createElement("p", null, "I am a child"));
-
 exports.WithChildren = WithChildren;
-
 const Blocking = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+  "data-test": "button",
   onClick: window.onButtonClick
 }, "Test"), /*#__PURE__*/_react.default.createElement(_cover.Cover, null));
-
 exports.Blocking = Blocking;
-
 const WithClickHandler = () => /*#__PURE__*/_react.default.createElement(_cover.Cover, {
   onClick: window.onCover
 }, /*#__PURE__*/_react.default.createElement("button", {
+  "data-test": "button",
   onClick: window.onButtonClick
 }, "Test"));
-
 exports.WithClickHandler = WithClickHandler;

package/build/cjs/cover.js

@@ -4,26 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Cover = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const createClickHandler = onClick => event => {
   // don't respond to clicks that originated in the children
   if (onClick && event.target === event.currentTarget) {
     onClick({}, event);
   }
 };
-
 const Cover = _ref => {
   let {
     children,
@@ -41,9 +33,8 @@ const Cover = _ref => {
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3798453419",
     dynamic: [_uiConstants.layers.applicationTop]
-  }, ["div.__jsx-style-dynamic-selector{position:absolute;top:0;right:0;bottom:0;left:0;z-index:".concat(_uiConstants.layers.applicationTop, ";}"), "div.translucent.__jsx-style-dynamic-selector{background:rgba(33,43,54,0.4);}"]));
+  }, [`div.__jsx-style-dynamic-selector{position:absolute;top:0;right:0;bottom:0;left:0;z-index:${_uiConstants.layers.applicationTop};}`, "div.translucent.__jsx-style-dynamic-selector{background:rgba(33,43,54,0.4);}"]));
 };
-
 exports.Cover = Cover;
 Cover.defaultProps = {
   dataTest: 'dhis2-uicore-componentcover'
@@ -52,7 +43,6 @@ Cover.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Adds a semi-transparent background to the cover */
   translucent: _propTypes.default.bool,
   onClick: _propTypes.default.func

package/build/cjs/{cover.stories.js → cover.prod.stories.js}

@@ -4,19 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithClickHandler = exports.WithCenteredContentCircularLoader = exports.Translucent = exports.Default = void 0;
-
 var _center = require("@dhis2-ui/center");
-
 var _loader = require("@dhis2-ui/loader");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _cover = require("./cover.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nCovers sibling components.  Useful for covering a component while it is loading.\n\n```js\nimport { Cover } from '@dhis2/ui'\n```\n";
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+Covers sibling components.  Useful for covering a component while it is loading.
+
+\`\`\`js
+import { Cover } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Component Cover',
   component: _cover.Cover,
   parameters: {
@@ -27,8 +27,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement("div", {
   style: {
     width: '400px',
@@ -37,21 +35,16 @@ const Template = args => /*#__PURE__*/_react.default.createElement("div", {
     border: '1px dotted grey'
   }
 }, /*#__PURE__*/_react.default.createElement(_cover.Cover, args), /*#__PURE__*/_react.default.createElement("h1", null, "Text behind the cover"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum"));
-
-const Default = Template.bind({});
-exports.Default = Default;
-const Translucent = Template.bind({});
-exports.Translucent = Translucent;
+const Default = exports.Default = Template.bind({});
+const Translucent = exports.Translucent = Template.bind({});
 Translucent.args = {
   translucent: true
 };
-const WithClickHandler = Template.bind({});
-exports.WithClickHandler = WithClickHandler;
+const WithClickHandler = exports.WithClickHandler = Template.bind({});
 WithClickHandler.args = {
   onClick: () => alert('Cover was clicked')
 };
-const WithCenteredContentCircularLoader = Template.bind({});
-exports.WithCenteredContentCircularLoader = WithCenteredContentCircularLoader;
+const WithCenteredContentCircularLoader = exports.WithCenteredContentCircularLoader = Template.bind({});
 WithCenteredContentCircularLoader.args = {
   translucent: true,
   children: /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null))

package/build/cjs/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Cover with children is rendered', () => {
   cy.visitStory('Cover', 'With Children');
   cy.get('[data-test="dhis2-uicore-componentcover"]').should('be.visible');

package/build/cjs/features/click_behavior/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Cover with a button below it is rendered', () => {
   cy.visitStory('Cover', 'Blocking');
 });
@@ -9,7 +8,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.visitStory('Cover', 'With Click Handler');
 });
 (0, _cypressCucumberPreprocessor.When)('the user clicks the button', () => {
-  cy.get('button').click();
+  cy.get('[data-test="button"]').click();
 });
 (0, _cypressCucumberPreprocessor.When)('the user clicks on the Cover', () => {
   cy.get('[data-test="dhis2-uicore-componentcover"]').click();
@@ -19,8 +18,9 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
     let [rect] = _ref;
     // Get button center coordinates
     const buttonCenterX = rect.left + rect.width / 2;
-    const buttonCenterY = rect.top + rect.height / 2; // click body on the button center
+    const buttonCenterY = rect.top + rect.height / 2;
 
+    // click body on the button center
     cy.get('body').click(buttonCenterX, buttonCenterY);
   });
 });

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Cover", {
     return _cover.Cover;
   }
 });
-
 var _cover = require("./cover.js");

package/build/es/{cover.stories.e2e.js → cover.e2e.stories.js}

@@ -14,10 +14,12 @@ export default {
 };
 export const WithChildren = () => /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement("p", null, "I am a child"));
 export const Blocking = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+  "data-test": "button",
   onClick: window.onButtonClick
 }, "Test"), /*#__PURE__*/React.createElement(Cover, null));
 export const WithClickHandler = () => /*#__PURE__*/React.createElement(Cover, {
   onClick: window.onCover
 }, /*#__PURE__*/React.createElement("button", {
+  "data-test": "button",
   onClick: window.onButtonClick
 }, "Test"));

package/build/es/cover.js

@@ -3,14 +3,12 @@ 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 = _ref => {
   let {
     children,
@@ -28,9 +26,8 @@ const Cover = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3798453419",
     dynamic: [layers.applicationTop]
-  }, ["div.__jsx-style-dynamic-selector{position:absolute;top:0;right:0;bottom:0;left:0;z-index:".concat(layers.applicationTop, ";}"), "div.translucent.__jsx-style-dynamic-selector{background:rgba(33,43,54,0.4);}"]));
+  }, [`div.__jsx-style-dynamic-selector{position:absolute;top:0;right:0;bottom:0;left:0;z-index:${layers.applicationTop};}`, "div.translucent.__jsx-style-dynamic-selector{background:rgba(33,43,54,0.4);}"]));
 };
-
 Cover.defaultProps = {
   dataTest: 'dhis2-uicore-componentcover'
 };
@@ -38,7 +35,6 @@ 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

package/build/es/{cover.stories.js → cover.prod.stories.js}

@@ -2,7 +2,13 @@ import { Center } from '@dhis2-ui/center';
 import { CircularLoader } from '@dhis2-ui/loader';
 import React from 'react';
 import { Cover } from './cover.js';
-const description = "\nCovers sibling components.  Useful for covering a component while it is loading.\n\n```js\nimport { Cover } from '@dhis2/ui'\n```\n";
+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,
@@ -14,7 +20,6 @@ export default {
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement("div", {
   style: {
     width: '400px',
@@ -23,7 +28,6 @@ const Template = args => /*#__PURE__*/React.createElement("div", {
     border: '1px dotted grey'
   }
 }, /*#__PURE__*/React.createElement(Cover, args), /*#__PURE__*/React.createElement("h1", null, "Text behind the cover"), /*#__PURE__*/React.createElement("p", null, "Lorem ipsum"));
-
 export const Default = Template.bind({});
 export const Translucent = Template.bind({});
 Translucent.args = {

package/build/es/features/click_behavior/index.js

@@ -6,7 +6,7 @@ Given('a Cover with a button in it is rendered', () => {
   cy.visitStory('Cover', 'With Click Handler');
 });
 When('the user clicks the button', () => {
-  cy.get('button').click();
+  cy.get('[data-test="button"]').click();
 });
 When('the user clicks on the Cover', () => {
   cy.get('[data-test="dhis2-uicore-componentcover"]').click();
@@ -16,8 +16,9 @@ When('the user clicks on the button coordinates', () => {
     let [rect] = _ref;
     // Get button center coordinates
     const buttonCenterX = rect.left + rect.width / 2;
-    const buttonCenterY = rect.top + rect.height / 2; // click body on the button center
+    const buttonCenterY = rect.top + rect.height / 2;
 
+    // click body on the button center
     cy.get('body').click(buttonCenterX, buttonCenterY);
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/cover",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI Cover",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },