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

package/build/cjs/alert-bar/action.js

@@ -4,33 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Action = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class Action extends _react.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "onClick", event => {
       this.props.onClick(event);
       this.props.hide(event);
     });
   }
-
   render() {
     return /*#__PURE__*/_react.default.createElement("span", {
       onClick: this.onClick,
@@ -39,11 +30,9 @@ class Action extends _react.Component {
     }, this.props.label, /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "918162538",
       dynamic: [_uiConstants.spacers.dp12]
-    }, ["span.__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp12, ";-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}"), "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
+    }, [`span.__jsx-style-dynamic-selector{margin-inline-end:${_uiConstants.spacers.dp12};-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}`, "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
   }
-
 }
-
 exports.Action = Action;
 Action.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/alert-bar/actions.js

@@ -4,53 +4,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.actionsPropType = exports.Actions = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _action = require("./action.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Actions = _ref => {
   let {
     actions,
     hide,
     dataTest
   } = _ref;
-
   if (!actions) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["793807948", [_uiConstants.spacers.dp48, _uiConstants.spacers.dp12]]])
   }, actions.map(action => /*#__PURE__*/_react.default.createElement(_action.Action, _extends({
     key: action.label
   }, action, {
     hide: hide,
-    dataTest: "".concat(dataTest, "-action")
+    dataTest: `${dataTest}-action`
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "793807948",
     dynamic: [_uiConstants.spacers.dp48, _uiConstants.spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(_uiConstants.spacers.dp48, ";margin-inline-end:-").concat(_uiConstants.spacers.dp12, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp48};margin-inline-end:-${_uiConstants.spacers.dp12};}`]));
 };
-
 exports.Actions = Actions;
-const actionsPropType = (0, _propTypes.arrayWithLength)(0, 2, _propTypes2.default.shape({
+const actionsPropType = exports.actionsPropType = (0, _propTypes.arrayWithLength)(0, 2, _propTypes2.default.shape({
   label: _propTypes2.default.string.isRequired,
   onClick: _propTypes2.default.func.isRequired
 }));
-exports.actionsPropType = actionsPropType;
 Actions.propTypes = {
   dataTest: _propTypes2.default.string.isRequired,
   hide: _propTypes2.default.func.isRequired,

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnHidden = exports.WithMessage = exports.PermanentWithActions = exports.Permanent = exports.HiddenProp = exports.DisabledIcon = exports.Default = exports.CustomIcon = exports.CustomDuration = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("./index.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+window.onHidden = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'AlertBar'
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, null, "Default");
+exports.Default = Default;
+const CustomDuration = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  duration: 2000
+}, "Custom duration");
+exports.CustomDuration = CustomDuration;
+const PermanentWithActions = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  permanent: true,
+  actions: [{
+    label: 'Save',
+    onClick: () => {}
+  }, {
+    label: 'Cancel',
+    onClick: () => {}
+  }]
+}, "With Actions");
+exports.PermanentWithActions = PermanentWithActions;
+const DisabledIcon = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  icon: false
+}, "Message");
+exports.DisabledIcon = DisabledIcon;
+const CustomIcon = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  icon: /*#__PURE__*/_react.default.createElement("span", null, "Custom icon")
+}, "Message");
+exports.CustomIcon = CustomIcon;
+const WithMessage = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, null, "With a message");
+exports.WithMessage = WithMessage;
+const WithOnHidden = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  onHidden: window.onHidden
+}, "Message");
+exports.WithOnHidden = WithOnHidden;
+const Permanent = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  permanent: true
+}, "Message");
+exports.Permanent = Permanent;
+const HiddenProp = () => {
+  const [hidden, setHidden] = (0, _react.useState)(true);
+  const toggleVisibility = () => setHidden(prevHidden => !prevHidden);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      display: 'block',
+      position: 'fixed',
+      bottom: 150,
+      left: 10
+    },
+    onClick: toggleVisibility
+  }, hidden ? 'Show' : 'Hide'), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+    permanent: true,
+    hidden: hidden,
+    onHidden: window.onHidden
+  }, "Short text"));
+};
+exports.HiddenProp = HiddenProp;

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

@@ -4,33 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertBar = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _actions = require("./actions.js");
-
 var _alertBarStyles = _interopRequireWildcard(require("./alert-bar.styles.js"));
-
 var _dismiss = require("./dismiss.js");
-
 var _icon = require("./icon.js");
-
 var _message = require("./message.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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AlertBar = _ref => {
   let {
     actions,
@@ -55,35 +41,29 @@ const AlertBar = _ref => {
   const displayTimeRemaining = (0, _react.useRef)(null);
   const info = !critical && !success && !warning;
   const shouldAutoHide = !(permanent || warning || critical);
-
   const show = () => {
     setInDOM(true);
     setInViewport(true);
   };
-
   const hide = () => {
     setInDOM(true);
     setInViewport(false);
   };
-
   const remove = () => {
     setInDOM(false);
     setInViewport(false);
     onHidden && onHidden({}, null);
   };
-
   const clearAllTimeouts = () => {
     clearTimeout(showTimeout.current);
     clearTimeout(displayTimeout.current);
     clearTimeout(hideTimeout.current);
   };
-
   const runHideAnimation = () => {
     clearAllTimeouts();
     hide();
     hideTimeout.current = setTimeout(remove, _alertBarStyles.ANIMATION_TIME);
   };
-
   const startDisplayTimeout = () => {
     if (shouldAutoHide) {
       clearAllTimeouts();
@@ -92,13 +72,11 @@ const AlertBar = _ref => {
       displayTimeout.current = setTimeout(runHideAnimation, displayTimeRemaining.current);
     }
   };
-
   const runShowAnimation = () => {
     clearAllTimeouts();
     show();
     showTimeout.current = setTimeout(startDisplayTimeout, _alertBarStyles.ANIMATION_TIME);
   };
-
   const pauseDisplayTimeout = () => {
     if (shouldAutoHide) {
       clearAllTimeouts();
@@ -106,32 +84,28 @@ const AlertBar = _ref => {
       displayTimeRemaining.current -= elapsedTime;
     }
   };
-
   const resumeDisplayTimeout = () => {
     if (shouldAutoHide) {
       clearAllTimeouts();
       displayTimeout.current = setTimeout(runHideAnimation, displayTimeRemaining.current);
     }
   };
-
   (0, _react.useEffect)(() => {
     // Additional check on inDOM prevents the AlertBar from briefly showing
     // when it is mounted with a hidden prop set to true
     if (hidden && inDOM) {
       runHideAnimation();
     }
-
     if (!hidden) {
       runShowAnimation();
     }
-
     return clearAllTimeouts;
   }, [hidden]);
   return !inDOM ? null : /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     onMouseEnter: pauseDisplayTimeout,
     onMouseLeave: resumeDisplayTimeout,
-    className: "jsx-".concat(_alertBarStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
+    className: `jsx-${_alertBarStyles.default.__hash}` + " " + ((0, _classnames.default)(className, {
       info,
       success,
       warning,
@@ -139,7 +113,7 @@ const AlertBar = _ref => {
       inViewport
     }) || "")
   }, /*#__PURE__*/_react.default.createElement(_icon.Icon, {
-    dataTest: "".concat(dataTest, "-icon"),
+    dataTest: `${dataTest}-icon`,
     icon: icon,
     critical: critical,
     success: success,
@@ -151,12 +125,11 @@ const AlertBar = _ref => {
     dataTest: dataTest
   }), /*#__PURE__*/_react.default.createElement(_dismiss.Dismiss, {
     onClick: runHideAnimation,
-    dataTest: "".concat(dataTest, "-dismiss")
+    dataTest: `${dataTest}-dismiss`
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _alertBarStyles.default.__hash
   }, _alertBarStyles.default));
 };
-
 exports.AlertBar = AlertBar;
 const alertTypePropType = (0, _propTypes.mutuallyExclusive)(['success', 'warning', 'critical'], _propTypes2.default.bool);
 AlertBar.defaultProps = {
@@ -168,31 +141,24 @@ AlertBar.propTypes = {
   /** An array of 0-2 action objects 
   `[{label: "Save", onClick: clickHandler}]`*/
   actions: _actions.actionsPropType,
-
   /** The message string for the alert */
   children: _propTypes2.default.string,
   className: _propTypes2.default.string,
-
   /** Alert bars with `critical` will not autohide */
   critical: alertTypePropType,
   dataTest: _propTypes2.default.string,
-
   /** How long you want the notification to display, in `ms`, when it's not permanent */
   duration: _propTypes2.default.number,
-
   /** AlertBar will be hidden on creation when this is set to true */
   hidden: _propTypes2.default.bool,
-
   /**
    * A specific icon to override the default icon in the bar.
    * If `false` is provided, no icon will be shown.
    */
   icon: _icon.iconPropType,
-
   /** When set, AlertBar will not autohide */
   permanent: _propTypes2.default.bool,
   success: alertTypePropType,
-
   /** Alert bars with `warning` will not autohide */
   warning: alertTypePropType,
   onHidden: _propTypes2.default.func

package/build/cjs/alert-bar/{alert-bar.stories.js → alert-bar.prod.stories.js}

@@ -4,20 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithActionsAndInsufficientSpace = exports.WithActions = exports.TextOverflow = exports.States = exports.RTL = exports.Icons = exports.HiddenProp = exports.Default = exports.AutoHiding = void 0;
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 var _react = _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; }
-
-const subtitle = "\nA floating alert that informs the user about temporary information\nin the context of the current screen.\n";
-const description = "\nAlert bars notify a user of some information. There are different types of\nalert bar for displaying different types of content. Use the alert bar type\nthat matches your content type and importance. Note that alert bar can be\nignored by the user, so they shouldn't be used for content that needs to\nblock an app flow, use a modal instead.\n\nAlert bars are always displayed at centered and fixed at the bottom of the\nscreen. Some types of alert bar dismiss after a set time, others must be\ndismissed by the user.\n\nSee specification: [Design System](https://github.com/dhis2/design-system/blob/master/molecules/alertbar.md)\n\n```js\nimport { AlertBar } from '@dhis2/ui'\n```\n";
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const subtitle = `
+A floating alert that informs the user about temporary information
+in the context of the current screen.
+`;
+const description = `
+Alert bars notify a user of some information. There are different types of
+alert bar for displaying different types of content. Use the alert bar type
+that matches your content type and importance. Note that alert bar can be
+ignored by the user, so they shouldn't be used for content that needs to
+block an app flow, use a modal instead.
+
+Alert bars are always displayed at centered and fixed at the bottom of the
+screen. Some types of alert bar dismiss after a set time, others must be
+dismissed by the user.
+
+See specification: [Design System](https://github.com/dhis2/design-system/blob/master/molecules/alertbar.md)
+
+\`\`\`js
+import { AlertBar } from '@dhis2/ui'
+\`\`\`
+`;
 const Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
   style: {
     height: '260px'
@@ -32,7 +44,6 @@ const Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
     paddingLeft: 16
   }
 }, fn()));
-
 const alertTypeArgType = {
   table: {
     type: {
@@ -58,7 +69,7 @@ const actionsArgType = {
     }
   }
 };
-var _default = {
+var _default = exports.default = {
   title: 'Alert Bar',
   component: _index.AlertBar,
   decorators: [Wrapper],
@@ -71,24 +82,25 @@ var _default = {
     }
   },
   argTypes: {
-    actions: { ...actionsArgType
+    actions: {
+      ...actionsArgType
     },
-    critical: { ...alertTypeArgType
+    critical: {
+      ...alertTypeArgType
     },
-    success: { ...alertTypeArgType
+    success: {
+      ...alertTypeArgType
     },
-    warning: { ...alertTypeArgType
+    warning: {
+      ...alertTypeArgType
     },
-    icon: { ...iconArgType
+    icon: {
+      ...iconArgType
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_index.AlertBar, args, "Default - I will autohide");
-
 exports.Default = Default;
-
 const States = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true
 }, "Default (info)"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
@@ -101,9 +113,7 @@ const States = () => /*#__PURE__*/_react.default.createElement(_react.default.Fr
   permanent: true,
   critical: true
 }, "Critical"));
-
 exports.States = States;
-
 const RTL = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
@@ -118,9 +128,7 @@ const RTL = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragm
   permanent: true,
   critical: true
 }, "Critical")));
-
 exports.RTL = RTL;
-
 const AutoHiding = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true
 }, "Permanent never auto-hides"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
@@ -139,10 +147,8 @@ const AutoHiding = () => /*#__PURE__*/_react.default.createElement(_react.defaul
     console.log('onHidden event', event);
   }
 }, "Default auto-hides after 8s"));
-
 exports.AutoHiding = AutoHiding;
 AutoHiding.storyName = 'Auto hiding';
-
 const WithActions = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true,
   actions: [{
@@ -153,10 +159,8 @@ const WithActions = () => /*#__PURE__*/_react.default.createElement(_index.Alert
     onClick: () => {}
   }]
 }, "With Actions");
-
 exports.WithActions = WithActions;
 WithActions.storyName = 'With actions';
-
 const WithActionsAndInsufficientSpace = () => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true,
   actions: [{
@@ -167,10 +171,8 @@ const WithActionsAndInsufficientSpace = () => /*#__PURE__*/_react.default.create
     onClick: () => {}
   }]
 }, "Some text, a pretty normal amount, that conflicts with pretty long actions");
-
 exports.WithActionsAndInsufficientSpace = WithActionsAndInsufficientSpace;
 WithActionsAndInsufficientSpace.storyName = 'With actions and insufficient space';
-
 const Icons = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true
 }, "Default icon"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
@@ -180,23 +182,17 @@ const Icons = () => /*#__PURE__*/_react.default.createElement(_react.default.Fra
   permanent: true,
   icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconFile16, null)
 }, "Custom icon"));
-
 exports.Icons = Icons;
-
 const TextOverflow = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true
 }, "Short text"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true
 }, "If the alert bar gets a ver long text, it will grow to a maximum of 600px and the text will overflow across several lines. If there are multiple AlertBars in a stack, they will all grow to the size of the widest sibling."));
-
 exports.TextOverflow = TextOverflow;
 TextOverflow.storyName = 'Text overflow';
-
 const HiddenProp = () => {
   const [hidden, setHidden] = (0, _react.useState)(true);
-
   const toggleVisibility = () => setHidden(prevHidden => !prevHidden);
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     style: {
       display: 'block',
@@ -210,6 +206,5 @@ const HiddenProp = () => {
     hidden: hidden
   }, "Short text"));
 };
-
 exports.HiddenProp = HiddenProp;
 HiddenProp.storyName = 'Hidden prop';

package/build/cjs/alert-bar/alert-bar.styles.js

@@ -4,12 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ANIMATION_TIME = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
-const ANIMATION_TIME = 350;
-exports.ANIMATION_TIME = ANIMATION_TIME;
-const _defaultExport = ["div.jsx-1114274882{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:".concat(_uiConstants.elevations.e300, ";padding-top:").concat(_uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp8, ";padding-bottom:").concat(_uiConstants.spacers.dp8, ";padding-inline-start:").concat(_uiConstants.spacers.dp24, ";margin-bottom:").concat(_uiConstants.spacers.dp16, ";max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}"), "div.info.jsx-1114274882{background-color:".concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.white, ";}"), "div.success.jsx-1114274882{background-color:".concat(_uiConstants.colors.green800, ";color:").concat(_uiConstants.colors.white, ";}"), "div.warning.jsx-1114274882{background-color:".concat(_uiConstants.colors.yellow300, ";color:").concat(_uiConstants.colors.yellow900, ";}"), "div.critical.jsx-1114274882{background-color:".concat(_uiConstants.colors.red800, ";color:").concat(_uiConstants.colors.white, ";}"), "@-webkit-keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@-webkit-keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "@keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "div.inViewport.jsx-1114274882{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slidein-jsx-1114274882;animation-name:slidein-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}"), "div.jsx-1114274882{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slideout-jsx-1114274882;animation-name:slideout-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}")];
+const ANIMATION_TIME = exports.ANIMATION_TIME = 350;
+const _defaultExport = [`div.jsx-1114274882{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:${_uiConstants.elevations.e300};padding-top:${_uiConstants.spacers.dp8};padding-inline-end:${_uiConstants.spacers.dp8};padding-bottom:${_uiConstants.spacers.dp8};padding-inline-start:${_uiConstants.spacers.dp24};margin-bottom:${_uiConstants.spacers.dp16};max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}`, `div.info.jsx-1114274882{background-color:${_uiConstants.colors.grey900};color:${_uiConstants.colors.white};}`, `div.success.jsx-1114274882{background-color:${_uiConstants.colors.green800};color:${_uiConstants.colors.white};}`, `div.warning.jsx-1114274882{background-color:${_uiConstants.colors.yellow300};color:${_uiConstants.colors.yellow900};}`, `div.critical.jsx-1114274882{background-color:${_uiConstants.colors.red800};color:${_uiConstants.colors.white};}`, "@-webkit-keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@-webkit-keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "@keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", `div.inViewport.jsx-1114274882{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slidein-jsx-1114274882;animation-name:slidein-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}`, `div.jsx-1114274882{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slideout-jsx-1114274882;animation-name:slideout-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}`];
 _defaultExport.__hash = "1114274882";
-var _default = _defaultExport;
-exports.default = _default;
+var _default = exports.default = _defaultExport;

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

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Dismiss = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 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 Dismiss = _ref => {
   let {
     onClick,
@@ -29,9 +22,8 @@ const Dismiss = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1892313381",
     dynamic: [_uiConstants.spacers.dp16]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(_uiConstants.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:${_uiConstants.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;}"]));
 };
-
 exports.Dismiss = Dismiss;
 Dismiss.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

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

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an AlertBar with onHidden handler is rendered', () => {
-  cy.visitStory('AlertBar', 'With onHidden');
+  cy.visitStory('AlertBar', 'With on hidden');
 });
 (0, _cypressCucumberPreprocessor.Given)('an AlertBar with disabled icon is rendered', () => {
   cy.visitStory('AlertBar', 'Disabled icon');

package/build/cjs/alert-bar/features/common/index.js

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

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a permanent AlertBar with hidden and onHidden is rendered', () => {
   cy.visitStory('AlertBar', 'Hidden prop');
 });
@@ -16,8 +15,11 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
 (0, _cypressCucumberPreprocessor.When)('the user clicks on the "Cancel" button', () => {
   cy.get('[data-test="dhis2-uicore-alertbar-action"]:contains("Cancel")').click();
 });
-(0, _cypressCucumberPreprocessor.When)('the user click a button which toggles the hidden prop', () => {
-  cy.get('button').click();
+(0, _cypressCucumberPreprocessor.When)('the user click a button which toggles the hidden prop to false', () => {
+  cy.get('button:contains("Show")').click();
+});
+(0, _cypressCucumberPreprocessor.When)('the user click a button which toggles the hidden prop to true', () => {
+  cy.get('button:contains("Hide")').click();
 });
 (0, _cypressCucumberPreprocessor.When)('the custom duration has passed', () => {
   cy.wait(2000);