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

package/build/cjs/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/cjs/alert-bar/icon.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.iconPropType = exports.Icon = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 var _propTypes2 = _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 StatusIcon = _ref => {
   let {
     error,
@@ -27,34 +19,28 @@ const StatusIcon = _ref => {
     info,
     defaultTo
   } = _ref;
-
   if (error) {
     return /*#__PURE__*/_react.default.createElement(_uiIcons.IconErrorFilled24, {
       color: _uiConstants.colors.white
     });
   }
-
   if (warning) {
     return /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningFilled24, {
       color: _uiConstants.colors.yellow900
     });
   }
-
   if (valid) {
     return /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckmark24, {
       color: _uiConstants.colors.white
     });
   }
-
   if (info) {
     return /*#__PURE__*/_react.default.createElement(_uiIcons.IconInfoFilled24, {
       color: _uiConstants.colors.white
     });
   }
-
   return defaultTo;
 };
-
 StatusIcon.defaultProps = {
   defaultTo: null
 };
@@ -65,7 +51,6 @@ StatusIcon.propTypes = {
   valid: _propTypes2.default.bool,
   warning: _propTypes2.default.bool
 };
-
 const Icon = _ref2 => {
   let {
     icon,
@@ -75,11 +60,9 @@ const Icon = _ref2 => {
     info,
     dataTest
   } = _ref2;
-
   if (icon === false) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     className: _style.default.dynamic([["719386130", [_uiConstants.spacers.dp16]]])
@@ -91,14 +74,10 @@ const Icon = _ref2 => {
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "719386130",
     dynamic: [_uiConstants.spacers.dp16]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp16, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{margin-inline-end:${_uiConstants.spacers.dp16};}`]));
 };
-
 exports.Icon = Icon;
-
-const iconPropType = _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.element]);
-
-exports.iconPropType = iconPropType;
+const iconPropType = exports.iconPropType = _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.element]);
 const alertStatePropType = (0, _propTypes.mutuallyExclusive)(['success', 'warning', 'critical', 'info'], _propTypes2.default.bool);
 Icon.propTypes = {
   dataTest: _propTypes2.default.string.isRequired,

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "AlertBar", {
     return _alertBar.AlertBar;
   }
 });
-
 var _alertBar = require("./alert-bar.js");

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

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Message = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 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 Message = _ref => {
   let {
     children
@@ -23,7 +18,6 @@ const Message = _ref => {
     id: "2181391309"
   }, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
 };
-
 exports.Message = Message;
 Message.propTypes = {
   children: _propTypes.default.string.isRequired

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../alert-bar/index.js");
+var _alertStack = require("./alert-stack.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'AlertStack'
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_alertStack.AlertStack, null, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  permanent: true
+}, "Message"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  permanent: true
+}, "Message"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+  permanent: true
+}, "Message"));
+exports.Default = Default;

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

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertStack = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _portal = require("@dhis2-ui/portal");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _portal = require("@dhis2-ui/portal");
 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 AlertStack = _ref => {
   let {
     className,
@@ -31,9 +23,8 @@ const AlertStack = _ref => {
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1009591311",
     dynamic: [_uiConstants.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(_uiConstants.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:${_uiConstants.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%);}"])));
 };
-
 exports.AlertStack = AlertStack;
 AlertStack.defaultProps = {
   dataTest: 'dhis2-uicore-alertstack'

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

@@ -4,19 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RTL = exports.Default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _index = require("../alert-bar/index.js");
-
 var _alertStack = require("./alert-stack.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; }
+const description = `
+A container for Alert Bars.
 
-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; }
+_**Note:** The demos on this page may be slow._
 
-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";
-var _default = {
+\`\`\`js
+import { AlertStack } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Alert Stack',
   component: _alertStack.AlertStack,
   // Use an iframe in docs to contain 'portal'
@@ -30,8 +32,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_alertStack.AlertStack, args, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
   permanent: true
 }, "First notification - I am at the bottom"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
@@ -44,9 +44,7 @@ const Default = args => /*#__PURE__*/_react.default.createElement(_alertStack.Al
   permanent: true,
   success: true
 }, "Fourth notification - I am at the top"));
-
 exports.Default = Default;
-
 const RTL = args => {
   (0, _react.useEffect)(() => {
     document.body.dir = 'rtl';
@@ -69,5 +67,4 @@ const RTL = args => {
     success: true
   }, "Fourth notification - I am at the top")));
 };
-
 exports.RTL = RTL;

package/build/cjs/alert-stack/features/render_children/alertbars.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an AlertStack with multiple AlertBars is rendered', () => {
   cy.visitStory('Alertstack', 'Default');
   cy.get('[data-test="dhis2-uicore-alertstack"]').should('be.visible');

package/build/cjs/alert-stack/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "AlertStack", {
     return _alertStack.AlertStack;
   }
 });
-
 var _alertStack = require("./alert-stack.js");

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "AlertStack", {
     return _index2.AlertStack;
   }
 });
-
 var _index = require("./alert-bar/index.js");
-
 var _index2 = require("./alert-stack/index.js");

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

@@ -1,21 +1,18 @@
 import _JSXStyle from "styled-jsx/style";
-
-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 _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); }
 import { spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-
 class Action extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "onClick", event => {
       this.props.onClick(event);
       this.props.hide(event);
     });
   }
-
   render() {
     return /*#__PURE__*/React.createElement("span", {
       onClick: this.onClick,
@@ -24,11 +21,9 @@ class Action extends Component {
     }, this.props.label, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "918162538",
       dynamic: [spacers.dp12]
-    }, ["span.__jsx-style-dynamic-selector{margin-inline-end:".concat(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:${spacers.dp12};-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}`, "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
   }
-
 }
-
 Action.propTypes = {
   dataTest: PropTypes.string.isRequired,
   hide: PropTypes.func.isRequired,

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

@@ -1,37 +1,31 @@
 import _JSXStyle from "styled-jsx/style";
-
-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 _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); }
 import { arrayWithLength } from '@dhis2/prop-types';
 import { spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Action } from './action.js';
-
 const Actions = _ref => {
   let {
     actions,
     hide,
     dataTest
   } = _ref;
-
   if (!actions) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["793807948", [spacers.dp48, spacers.dp12]]])
   }, actions.map(action => /*#__PURE__*/React.createElement(Action, _extends({
     key: action.label
   }, action, {
     hide: hide,
-    dataTest: "".concat(dataTest, "-action")
+    dataTest: `${dataTest}-action`
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "793807948",
     dynamic: [spacers.dp48, spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(spacers.dp48, ";margin-inline-end:-").concat(spacers.dp12, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp48};margin-inline-end:-${spacers.dp12};}`]));
 };
-
 const actionsPropType = arrayWithLength(0, 2, PropTypes.shape({
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired

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

@@ -1,10 +1,14 @@
-import { storiesOf } from '@storybook/react';
 import React, { useState } from 'react';
 import { AlertBar } from './index.js';
 window.onHidden = window.Cypress && window.Cypress.cy.stub();
-storiesOf('AlertBar', module).add('Default', () => /*#__PURE__*/React.createElement(AlertBar, null, "Default")).add('Custom duration', () => /*#__PURE__*/React.createElement(AlertBar, {
+export default {
+  title: 'AlertBar'
+};
+export const Default = () => /*#__PURE__*/React.createElement(AlertBar, null, "Default");
+export const CustomDuration = () => /*#__PURE__*/React.createElement(AlertBar, {
   duration: 2000
-}, "Custom duration")).add('Permanent with actions', () => /*#__PURE__*/React.createElement(AlertBar, {
+}, "Custom duration");
+export const PermanentWithActions = () => /*#__PURE__*/React.createElement(AlertBar, {
   permanent: true,
   actions: [{
     label: 'Save',
@@ -13,19 +17,23 @@ storiesOf('AlertBar', module).add('Default', () => /*#__PURE__*/React.createElem
     label: 'Cancel',
     onClick: () => {}
   }]
-}, "With Actions")).add('Disabled icon', () => /*#__PURE__*/React.createElement(AlertBar, {
+}, "With Actions");
+export const DisabledIcon = () => /*#__PURE__*/React.createElement(AlertBar, {
   icon: false
-}, "Message")).add('Custom icon', () => /*#__PURE__*/React.createElement(AlertBar, {
+}, "Message");
+export const CustomIcon = () => /*#__PURE__*/React.createElement(AlertBar, {
   icon: /*#__PURE__*/React.createElement("span", null, "Custom icon")
-}, "Message")).add('With message', () => /*#__PURE__*/React.createElement(AlertBar, null, "With a message")).add('With onHidden', () => /*#__PURE__*/React.createElement(AlertBar, {
+}, "Message");
+export const WithMessage = () => /*#__PURE__*/React.createElement(AlertBar, null, "With a message");
+export const WithOnHidden = () => /*#__PURE__*/React.createElement(AlertBar, {
   onHidden: window.onHidden
-}, "Message")).add('Permanent', () => /*#__PURE__*/React.createElement(AlertBar, {
+}, "Message");
+export const Permanent = () => /*#__PURE__*/React.createElement(AlertBar, {
   permanent: true
-}, "Message")).add('Hidden prop', () => {
+}, "Message");
+export const HiddenProp = () => {
   const [hidden, setHidden] = useState(true);
-
   const toggleVisibility = () => setHidden(prevHidden => !prevHidden);
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     style: {
       display: 'block',
@@ -39,4 +47,4 @@ storiesOf('AlertBar', module).add('Default', () => /*#__PURE__*/React.createElem
     hidden: hidden,
     onHidden: window.onHidden
   }, "Short text"));
-});
+};

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

@@ -8,7 +8,6 @@ import styles, { ANIMATION_TIME } from './alert-bar.styles.js';
 import { Dismiss } from './dismiss.js';
 import { Icon, iconPropType } from './icon.js';
 import { Message } from './message.js';
-
 const AlertBar = _ref => {
   let {
     actions,
@@ -33,35 +32,29 @@ const AlertBar = _ref => {
   const displayTimeRemaining = 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, ANIMATION_TIME);
   };
-
   const startDisplayTimeout = () => {
     if (shouldAutoHide) {
       clearAllTimeouts();
@@ -70,13 +63,11 @@ const AlertBar = _ref => {
       displayTimeout.current = setTimeout(runHideAnimation, displayTimeRemaining.current);
     }
   };
-
   const runShowAnimation = () => {
     clearAllTimeouts();
     show();
     showTimeout.current = setTimeout(startDisplayTimeout, ANIMATION_TIME);
   };
-
   const pauseDisplayTimeout = () => {
     if (shouldAutoHide) {
       clearAllTimeouts();
@@ -84,32 +75,28 @@ const AlertBar = _ref => {
       displayTimeRemaining.current -= elapsedTime;
     }
   };
-
   const resumeDisplayTimeout = () => {
     if (shouldAutoHide) {
       clearAllTimeouts();
       displayTimeout.current = setTimeout(runHideAnimation, displayTimeRemaining.current);
     }
   };
-
   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.createElement("div", {
     "data-test": dataTest,
     onMouseEnter: pauseDisplayTimeout,
     onMouseLeave: resumeDisplayTimeout,
-    className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
+    className: `jsx-${styles.__hash}` + " " + (cx(className, {
       info,
       success,
       warning,
@@ -117,7 +104,7 @@ const AlertBar = _ref => {
       inViewport
     }) || "")
   }, /*#__PURE__*/React.createElement(Icon, {
-    dataTest: "".concat(dataTest, "-icon"),
+    dataTest: `${dataTest}-icon`,
     icon: icon,
     critical: critical,
     success: success,
@@ -129,12 +116,11 @@ const AlertBar = _ref => {
     dataTest: dataTest
   }), /*#__PURE__*/React.createElement(Dismiss, {
     onClick: runHideAnimation,
-    dataTest: "".concat(dataTest, "-dismiss")
+    dataTest: `${dataTest}-dismiss`
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
 };
-
 const alertTypePropType = mutuallyExclusive(['success', 'warning', 'critical'], PropTypes.bool);
 AlertBar.defaultProps = {
   duration: 8000,
@@ -145,31 +131,24 @@ AlertBar.propTypes = {
   /** An array of 0-2 action objects 
   `[{label: "Save", onClick: clickHandler}]`*/
   actions: actionsPropType,
-
   /** The message string for the alert */
   children: PropTypes.string,
   className: PropTypes.string,
-
   /** Alert bars with `critical` will not autohide */
   critical: alertTypePropType,
   dataTest: PropTypes.string,
-
   /** How long you want the notification to display, in `ms`, when it's not permanent */
   duration: PropTypes.number,
-
   /** AlertBar will be hidden on creation when this is set to true */
   hidden: PropTypes.bool,
-
   /**
    * A specific icon to override the default icon in the bar.
    * If `false` is provided, no icon will be shown.
    */
   icon: iconPropType,
-
   /** When set, AlertBar will not autohide */
   permanent: PropTypes.bool,
   success: alertTypePropType,
-
   /** Alert bars with `warning` will not autohide */
   warning: alertTypePropType,
   onHidden: PropTypes.func

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

@@ -1,9 +1,27 @@
 import { IconFile16 } from '@dhis2/ui-icons';
 import React, { useState } from 'react';
 import { AlertBar } from './index.js';
-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";
+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.createElement("div", {
   style: {
     height: '260px'
@@ -18,7 +36,6 @@ const Wrapper = fn => /*#__PURE__*/React.createElement("div", {
     paddingLeft: 16
   }
 }, fn()));
-
 const alertTypeArgType = {
   table: {
     type: {
@@ -57,15 +74,20 @@ export default {
     }
   },
   argTypes: {
-    actions: { ...actionsArgType
+    actions: {
+      ...actionsArgType
     },
-    critical: { ...alertTypeArgType
+    critical: {
+      ...alertTypeArgType
     },
-    success: { ...alertTypeArgType
+    success: {
+      ...alertTypeArgType
     },
-    warning: { ...alertTypeArgType
+    warning: {
+      ...alertTypeArgType
     },
-    icon: { ...iconArgType
+    icon: {
+      ...iconArgType
     }
   }
 };
@@ -154,9 +176,7 @@ export const TextOverflow = () => /*#__PURE__*/React.createElement(React.Fragmen
 TextOverflow.storyName = 'Text overflow';
 export const HiddenProp = () => {
   const [hidden, setHidden] = useState(true);
-
   const toggleVisibility = () => setHidden(prevHidden => !prevHidden);
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     style: {
       display: 'block',

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

@@ -1,5 +1,5 @@
 import { colors, spacers, elevations } from '@dhis2/ui-constants';
 export const 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:".concat(elevations.e300, ";padding-top:").concat(spacers.dp8, ";padding-inline-end:").concat(spacers.dp8, ";padding-bottom:").concat(spacers.dp8, ";padding-inline-start:").concat(spacers.dp24, ";margin-bottom:").concat(spacers.dp16, ";max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}"), "div.info.jsx-1114274882{background-color:".concat(colors.grey900, ";color:").concat(colors.white, ";}"), "div.success.jsx-1114274882{background-color:".concat(colors.green800, ";color:").concat(colors.white, ";}"), "div.warning.jsx-1114274882{background-color:".concat(colors.yellow300, ";color:").concat(colors.yellow900, ";}"), "div.critical.jsx-1114274882{background-color:".concat(colors.red800, ";color:").concat(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 _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:${elevations.e300};padding-top:${spacers.dp8};padding-inline-end:${spacers.dp8};padding-bottom:${spacers.dp8};padding-inline-start:${spacers.dp24};margin-bottom:${spacers.dp16};max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}`, `div.info.jsx-1114274882{background-color:${colors.grey900};color:${colors.white};}`, `div.success.jsx-1114274882{background-color:${colors.green800};color:${colors.white};}`, `div.warning.jsx-1114274882{background-color:${colors.yellow300};color:${colors.yellow900};}`, `div.critical.jsx-1114274882{background-color:${colors.red800};color:${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";
 export default _defaultExport;