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

package/build/es/alert-bar/dismiss.js

@@ -3,7 +3,6 @@ import { spacers } from '@dhis2/ui-constants';
 import { IconCross24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Dismiss = _ref => {
   let {
     onClick,
@@ -16,9 +15,8 @@ const Dismiss = _ref => {
   }, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1892313381",
     dynamic: [spacers.dp16]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(spacers.dp16, ";min-height:32px;min-width:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:5px;}"), "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
+  }, [`div.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp16};min-height:32px;min-width:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
 };
-
 Dismiss.propTypes = {
   dataTest: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired

package/build/es/alert-bar/features/api/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an AlertBar with onHidden handler is rendered', () => {
-  cy.visitStory('AlertBar', 'With onHidden');
+  cy.visitStory('AlertBar', 'With on hidden');
 });
 Given('an AlertBar with disabled icon is rendered', () => {
   cy.visitStory('AlertBar', 'Disabled icon');

package/build/es/alert-bar/features/hide/index.js

@@ -13,8 +13,11 @@ Given('a permanent AlertBar with actions is rendered', () => {
 When('the user clicks on the "Cancel" button', () => {
   cy.get('[data-test="dhis2-uicore-alertbar-action"]:contains("Cancel")').click();
 });
-When('the user click a button which toggles the hidden prop', () => {
-  cy.get('button').click();
+When('the user click a button which toggles the hidden prop to false', () => {
+  cy.get('button:contains("Show")').click();
+});
+When('the user click a button which toggles the hidden prop to true', () => {
+  cy.get('button:contains("Hide")').click();
 });
 When('the custom duration has passed', () => {
   cy.wait(2000);

package/build/es/alert-bar/features/hide.feature

@@ -19,8 +19,8 @@ Feature: Hiding the AlertBar
         Given a permanent AlertBar with hidden and onHidden is rendered
         Then the AlertBar is not rendered
         And the onHidden handler is not called
-        When the user click a button which toggles the hidden prop
+        When the user click a button which toggles the hidden prop to false
         Then the AlertBar is rendered
-        When the user click a button which toggles the hidden prop
+        When the user click a button which toggles the hidden prop to true
         Then the AlertBar is not rendered
         And the onHidden handler is called

package/build/es/alert-bar/icon.js

@@ -4,7 +4,6 @@ import { spacers, colors } from '@dhis2/ui-constants';
 import { IconErrorFilled24, IconInfoFilled24, IconWarningFilled24, IconCheckmark24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const StatusIcon = _ref => {
   let {
     error,
@@ -13,34 +12,28 @@ const StatusIcon = _ref => {
     info,
     defaultTo
   } = _ref;
-
   if (error) {
     return /*#__PURE__*/React.createElement(IconErrorFilled24, {
       color: colors.white
     });
   }
-
   if (warning) {
     return /*#__PURE__*/React.createElement(IconWarningFilled24, {
       color: colors.yellow900
     });
   }
-
   if (valid) {
     return /*#__PURE__*/React.createElement(IconCheckmark24, {
       color: colors.white
     });
   }
-
   if (info) {
     return /*#__PURE__*/React.createElement(IconInfoFilled24, {
       color: colors.white
     });
   }
-
   return defaultTo;
 };
-
 StatusIcon.defaultProps = {
   defaultTo: null
 };
@@ -51,7 +44,6 @@ StatusIcon.propTypes = {
   valid: PropTypes.bool,
   warning: PropTypes.bool
 };
-
 const Icon = _ref2 => {
   let {
     icon,
@@ -61,11 +53,9 @@ const Icon = _ref2 => {
     info,
     dataTest
   } = _ref2;
-
   if (icon === false) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["719386130", [spacers.dp16]]])
@@ -77,9 +67,8 @@ const Icon = _ref2 => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "719386130",
     dynamic: [spacers.dp16]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp16, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp16};}`]));
 };
-
 const iconPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.element]);
 const alertStatePropType = mutuallyExclusive(['success', 'warning', 'critical', 'info'], PropTypes.bool);
 Icon.propTypes = {

package/build/es/alert-bar/message.js

@@ -1,7 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Message = _ref => {
   let {
     children
@@ -12,7 +11,6 @@ const Message = _ref => {
     id: "2181391309"
   }, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
 };
-
 Message.propTypes = {
   children: PropTypes.string.isRequired
 };

package/build/es/alert-stack/{alert-stack.stories.e2e.js → alert-stack.e2e.stories.js}

@@ -1,11 +1,13 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { AlertBar } from '../alert-bar/index.js';
 import { AlertStack } from './alert-stack.js';
-storiesOf('AlertStack', module).add('Default', () => /*#__PURE__*/React.createElement(AlertStack, null, /*#__PURE__*/React.createElement(AlertBar, {
+export default {
+  title: 'AlertStack'
+};
+export const Default = () => /*#__PURE__*/React.createElement(AlertStack, null, /*#__PURE__*/React.createElement(AlertBar, {
   permanent: true
 }, "Message"), /*#__PURE__*/React.createElement(AlertBar, {
   permanent: true
 }, "Message"), /*#__PURE__*/React.createElement(AlertBar, {
   permanent: true
-}, "Message")));
+}, "Message"));

package/build/es/alert-stack/alert-stack.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { Portal } from '@dhis2-ui/portal';
 import { layers } from '@dhis2/ui-constants';
+import { Portal } from '@dhis2-ui/portal';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -16,7 +16,7 @@ export const AlertStack = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1009591311",
     dynamic: [layers.alert]
-  }, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:".concat(layers.alert, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}"), "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
+  }, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:${layers.alert};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}`, "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
 };
 AlertStack.defaultProps = {
   dataTest: 'dhis2-uicore-alertstack'

package/build/es/alert-stack/{alert-stack.stories.js → alert-stack.prod.stories.js}

@@ -1,7 +1,15 @@
 import React, { useEffect } from 'react';
 import { AlertBar } from '../alert-bar/index.js';
 import { AlertStack } from './alert-stack.js';
-const description = "\nA container for Alert Bars.\n\n_**Note:** The demos on this page may be slow._\n\n```js\nimport { AlertStack } from '@dhis2/ui'\n```\n";
+const description = `
+A container for Alert Bars.
+
+_**Note:** The demos on this page may be slow._
+
+\`\`\`js
+import { AlertStack } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Alert Stack',
   component: AlertStack,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -22,20 +22,20 @@
         "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/portal": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2-ui/portal": "9.11.1-beta.2",
+        "@dhis2/ui-constants": "9.11.1-beta.2",
+        "@dhis2/ui-icons": "9.11.1-beta.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/alert-bar/alert-bar.stories.e2e.js

@@ -1,51 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireWildcard(require("react"));
-
-var _index = require("./index.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-window.onHidden = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('AlertBar', module).add('Default', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, null, "Default")).add('Custom duration', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  duration: 2000
-}, "Custom duration")).add('Permanent with actions', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  permanent: true,
-  actions: [{
-    label: 'Save',
-    onClick: () => {}
-  }, {
-    label: 'Cancel',
-    onClick: () => {}
-  }]
-}, "With Actions")).add('Disabled icon', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  icon: false
-}, "Message")).add('Custom icon', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  icon: /*#__PURE__*/_react2.default.createElement("span", null, "Custom icon")
-}, "Message")).add('With message', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, null, "With a message")).add('With onHidden', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  onHidden: window.onHidden
-}, "Message")).add('Permanent', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  permanent: true
-}, "Message")).add('Hidden prop', () => {
-  const [hidden, setHidden] = (0, _react2.useState)(true);
-
-  const toggleVisibility = () => setHidden(prevHidden => !prevHidden);
-
-  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("button", {
-    style: {
-      display: 'block',
-      position: 'fixed',
-      bottom: 150,
-      left: 10
-    },
-    onClick: toggleVisibility
-  }, hidden ? 'Show' : 'Hide'), /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-    permanent: true,
-    hidden: hidden,
-    onHidden: window.onHidden
-  }, "Short text"));
-});

package/build/cjs/alert-stack/alert-stack.stories.e2e.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("../alert-bar/index.js");
-
-var _alertStack = require("./alert-stack.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('AlertStack', module).add('Default', () => /*#__PURE__*/_react2.default.createElement(_alertStack.AlertStack, null, /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  permanent: true
-}, "Message"), /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  permanent: true
-}, "Message"), /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
-  permanent: true
-}, "Message")));