@dhis2-ui/alert 8.2.0 → 8.2.1

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

@@ -22,8 +22,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 
 class Action extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "onClick", event => {
       this.props.onClick(event);
@@ -39,7 +39,7 @@ class Action extends _react.Component {
     }, this.props.label, /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "663141299",
       dynamic: [_uiConstants.spacers.dp12]
-    }, [`span.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp12};-webkit-text-decoration:underline;text-decoration:underline;}`, "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
+    }, ["span.__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";-webkit-text-decoration:underline;text-decoration:underline;}"), "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
   }
 
 }

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

@@ -21,11 +21,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-const Actions = ({
-  actions,
-  hide,
-  dataTest
-}) => {
+const Actions = _ref => {
+  let {
+    actions,
+    hide,
+    dataTest
+  } = _ref;
+
   if (!actions) {
     return null;
   }
@@ -36,11 +38,11 @@ const Actions = ({
     key: action.label
   }, action, {
     hide: hide,
-    dataTest: `${dataTest}-action`
+    dataTest: "".concat(dataTest, "-action")
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "961263490",
     dynamic: [_uiConstants.spacers.dp48, _uiConstants.spacers.dp12]
-  }, [`div.__jsx-style-dynamic-selector{margin-left:${_uiConstants.spacers.dp48};margin-right:-${_uiConstants.spacers.dp12};}`]));
+  }, ["div.__jsx-style-dynamic-selector{margin-left:".concat(_uiConstants.spacers.dp48, ";margin-right:-").concat(_uiConstants.spacers.dp12, ";}")]));
 };
 
 exports.Actions = Actions;

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

@@ -31,20 +31,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const AlertBar = ({
-  actions,
-  children,
-  className,
-  critical,
-  dataTest,
-  duration,
-  hidden,
-  icon,
-  permanent,
-  success,
-  warning,
-  onHidden
-}) => {
+const AlertBar = _ref => {
+  let {
+    actions,
+    children,
+    className,
+    critical,
+    dataTest,
+    duration,
+    hidden,
+    icon,
+    permanent,
+    success,
+    warning,
+    onHidden
+  } = _ref;
   const [inViewport, setInViewport] = (0, _react.useState)(!hidden);
   const [inDOM, setInDOM] = (0, _react.useState)(!hidden);
   const showTimeout = (0, _react.useRef)(null);
@@ -130,7 +131,7 @@ const AlertBar = ({
     "data-test": dataTest,
     onMouseEnter: pauseDisplayTimeout,
     onMouseLeave: resumeDisplayTimeout,
-    className: `jsx-${_alertBarStyles.default.__hash}` + " " + ((0, _classnames.default)(className, {
+    className: "jsx-".concat(_alertBarStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
       info,
       success,
       warning,
@@ -138,7 +139,7 @@ const AlertBar = ({
       inViewport
     }) || "")
   }, /*#__PURE__*/_react.default.createElement(_icon.Icon, {
-    dataTest: `${dataTest}-icon`,
+    dataTest: "".concat(dataTest, "-icon"),
     icon: icon,
     critical: critical,
     success: success,
@@ -150,7 +151,7 @@ const AlertBar = ({
     dataTest: dataTest
   }), /*#__PURE__*/_react.default.createElement(_dismiss.Dismiss, {
     onClick: runHideAnimation,
-    dataTest: `${dataTest}-dismiss`
+    dataTest: "".concat(dataTest, "-dismiss")
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _alertBarStyles.default.__hash
   }, _alertBarStyles.default));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HiddenProp = exports.TextOverflow = exports.Icons = exports.WithActions = exports.AutoHiding = exports.States = exports.Default = exports.default = void 0;
+exports.default = exports.WithActions = exports.TextOverflow = exports.States = exports.Icons = exports.HiddenProp = exports.Default = exports.AutoHiding = void 0;
 
 var _uiIcons = require("@dhis2/ui-icons");
 
@@ -15,27 +15,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 = `
-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 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 Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
   style: {
@@ -78,7 +59,7 @@ const actionsArgType = {
   }
 };
 var _default = {
-  title: 'Feedback/Alerts/Alert Bar',
+  title: 'Alert Bar',
   component: _index.AlertBar,
   decorators: [Wrapper],
   parameters: {

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

@@ -9,7 +9,7 @@ var _uiConstants = require("@dhis2/ui-constants");
 
 const ANIMATION_TIME = 350;
 exports.ANIMATION_TIME = ANIMATION_TIME;
-const _defaultExport = [`div.jsx-2593868549{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-right:${_uiConstants.spacers.dp8};padding-bottom:${_uiConstants.spacers.dp8};padding-left:${_uiConstants.spacers.dp24};margin-bottom:${_uiConstants.spacers.dp16};max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}`, `div.info.jsx-2593868549{background-color:${_uiConstants.colors.grey900};color:${_uiConstants.colors.white};}`, `div.success.jsx-2593868549{background-color:${_uiConstants.colors.green800};color:${_uiConstants.colors.white};}`, `div.warning.jsx-2593868549{background-color:${_uiConstants.colors.yellow300};color:${_uiConstants.colors.yellow900};}`, `div.critical.jsx-2593868549{background-color:${_uiConstants.colors.red800};color:${_uiConstants.colors.white};}`, "@-webkit-keyframes slidein-jsx-2593868549{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-2593868549{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-2593868549{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-2593868549{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-2593868549{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slidein-jsx-2593868549;animation-name:slidein-jsx-2593868549;-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-2593868549{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slideout-jsx-2593868549;animation-name:slideout-jsx-2593868549;-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-2593868549{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-right:").concat(_uiConstants.spacers.dp8, ";padding-bottom:").concat(_uiConstants.spacers.dp8, ";padding-left:").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-2593868549{background-color:".concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.white, ";}"), "div.success.jsx-2593868549{background-color:".concat(_uiConstants.colors.green800, ";color:").concat(_uiConstants.colors.white, ";}"), "div.warning.jsx-2593868549{background-color:".concat(_uiConstants.colors.yellow300, ";color:").concat(_uiConstants.colors.yellow900, ";}"), "div.critical.jsx-2593868549{background-color:".concat(_uiConstants.colors.red800, ";color:").concat(_uiConstants.colors.white, ";}"), "@-webkit-keyframes slidein-jsx-2593868549{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-2593868549{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-2593868549{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-2593868549{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-2593868549{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slidein-jsx-2593868549;animation-name:slidein-jsx-2593868549;-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-2593868549{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slideout-jsx-2593868549;animation-name:slideout-jsx-2593868549;-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 = "2593868549";
 var _default = _defaultExport;
 exports.default = _default;

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

@@ -17,17 +17,20 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Dismiss = ({
-  onClick,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  onClick: onClick,
-  "data-test": dataTest,
-  className: _style.default.dynamic([["489362409", [_uiConstants.spacers.dp16]]])
-}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "489362409",
-  dynamic: [_uiConstants.spacers.dp16]
-}, [`div.__jsx-style-dynamic-selector{margin-left:${_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;}"]));
+const Dismiss = _ref => {
+  let {
+    onClick,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: onClick,
+    "data-test": dataTest,
+    className: _style.default.dynamic([["489362409", [_uiConstants.spacers.dp16]]])
+  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "489362409",
+    dynamic: [_uiConstants.spacers.dp16]
+  }, ["div.__jsx-style-dynamic-selector{margin-left:".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;}"]));
+};
 
 exports.Dismiss = Dismiss;
 Dismiss.propTypes = {

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

@@ -19,13 +19,15 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StatusIcon = ({
-  error,
-  warning,
-  valid,
-  info,
-  defaultTo
-}) => {
+const StatusIcon = _ref => {
+  let {
+    error,
+    warning,
+    valid,
+    info,
+    defaultTo
+  } = _ref;
+
   if (error) {
     return /*#__PURE__*/_react.default.createElement(_uiIcons.IconErrorFilled24, {
       color: _uiConstants.colors.white
@@ -64,14 +66,16 @@ StatusIcon.propTypes = {
   warning: _propTypes2.default.bool
 };
 
-const Icon = ({
-  icon,
-  success,
-  warning,
-  critical,
-  info,
-  dataTest
-}) => {
+const Icon = _ref2 => {
+  let {
+    icon,
+    success,
+    warning,
+    critical,
+    info,
+    dataTest
+  } = _ref2;
+
   if (icon === false) {
     return null;
   }
@@ -87,7 +91,7 @@ const Icon = ({
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2057519855",
     dynamic: [_uiConstants.spacers.dp16]
-  }, [`div.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp16};}`]));
+  }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp16, ";}")]));
 };
 
 exports.Icon = Icon;

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

@@ -13,13 +13,16 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Message = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  className: "jsx-2181391309"
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2181391309"
-}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
+const Message = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-2181391309"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    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 = {

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

@@ -19,17 +19,20 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const AlertStack = ({
-  className,
-  children,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["132471376", [_uiConstants.layers.alert]]]) + " " + ((0, _classnames.default)(className) || "")
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "132471376",
-  dynamic: [_uiConstants.layers.alert]
-}, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;right:auto;bottom:0;left: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;}`])));
+const AlertStack = _ref => {
+  let {
+    className,
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["132471376", [_uiConstants.layers.alert]]]) + " " + ((0, _classnames.default)(className) || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "132471376",
+    dynamic: [_uiConstants.layers.alert]
+  }, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;right:auto;bottom:0;left: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;}")])));
+};
 
 exports.AlertStack = AlertStack;
 AlertStack.defaultProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Default = exports.default = void 0;
+exports.default = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,17 +13,9 @@ var _alertStack = require("./alert-stack.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const description = `
-A container for Alert Bars.
-
-_**Note:** The demos on this page may be slow._
-
-\`\`\`js
-import { AlertStack } from '@dhis2/ui'
-\`\`\`
-`;
+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 = {
-  title: 'Feedback/Alerts/Alert Stack',
+  title: 'Alert Stack',
   component: _alertStack.AlertStack,
   // Use an iframe in docs to contain 'portal'
   parameters: {

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

@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 class Action extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "onClick", event => {
       this.props.onClick(event);
@@ -24,7 +24,7 @@ class Action extends Component {
     }, this.props.label, /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "663141299",
       dynamic: [spacers.dp12]
-    }, [`span.__jsx-style-dynamic-selector{margin-right:${spacers.dp12};-webkit-text-decoration:underline;text-decoration:underline;}`, "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
+    }, ["span.__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";-webkit-text-decoration:underline;text-decoration:underline;}"), "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
   }
 
 }

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

@@ -8,11 +8,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Action } from './action.js';
 
-const Actions = ({
-  actions,
-  hide,
-  dataTest
-}) => {
+const Actions = _ref => {
+  let {
+    actions,
+    hide,
+    dataTest
+  } = _ref;
+
   if (!actions) {
     return null;
   }
@@ -23,11 +25,11 @@ const Actions = ({
     key: action.label
   }, action, {
     hide: hide,
-    dataTest: `${dataTest}-action`
+    dataTest: "".concat(dataTest, "-action")
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "961263490",
     dynamic: [spacers.dp48, spacers.dp12]
-  }, [`div.__jsx-style-dynamic-selector{margin-left:${spacers.dp48};margin-right:-${spacers.dp12};}`]));
+  }, ["div.__jsx-style-dynamic-selector{margin-left:".concat(spacers.dp48, ";margin-right:-").concat(spacers.dp12, ";}")]));
 };
 
 const actionsPropType = arrayWithLength(0, 2, PropTypes.shape({

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

@@ -9,20 +9,21 @@ import { Dismiss } from './dismiss.js';
 import { Icon, iconPropType } from './icon.js';
 import { Message } from './message.js';
 
-const AlertBar = ({
-  actions,
-  children,
-  className,
-  critical,
-  dataTest,
-  duration,
-  hidden,
-  icon,
-  permanent,
-  success,
-  warning,
-  onHidden
-}) => {
+const AlertBar = _ref => {
+  let {
+    actions,
+    children,
+    className,
+    critical,
+    dataTest,
+    duration,
+    hidden,
+    icon,
+    permanent,
+    success,
+    warning,
+    onHidden
+  } = _ref;
   const [inViewport, setInViewport] = useState(!hidden);
   const [inDOM, setInDOM] = useState(!hidden);
   const showTimeout = useRef(null);
@@ -108,7 +109,7 @@ const AlertBar = ({
     "data-test": dataTest,
     onMouseEnter: pauseDisplayTimeout,
     onMouseLeave: resumeDisplayTimeout,
-    className: `jsx-${styles.__hash}` + " " + (cx(className, {
+    className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
       info,
       success,
       warning,
@@ -116,7 +117,7 @@ const AlertBar = ({
       inViewport
     }) || "")
   }, /*#__PURE__*/React.createElement(Icon, {
-    dataTest: `${dataTest}-icon`,
+    dataTest: "".concat(dataTest, "-icon"),
     icon: icon,
     critical: critical,
     success: success,
@@ -128,7 +129,7 @@ const AlertBar = ({
     dataTest: dataTest
   }), /*#__PURE__*/React.createElement(Dismiss, {
     onClick: runHideAnimation,
-    dataTest: `${dataTest}-dismiss`
+    dataTest: "".concat(dataTest, "-dismiss")
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

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

@@ -1,27 +1,8 @@
 import { IconFile16 } from '@dhis2/ui-icons';
 import React, { useState } from 'react';
 import { AlertBar } from './index.js';
-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 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 Wrapper = fn => /*#__PURE__*/React.createElement("div", {
   style: {
@@ -64,7 +45,7 @@ const actionsArgType = {
   }
 };
 export default {
-  title: 'Feedback/Alerts/Alert Bar',
+  title: 'Alert Bar',
   component: AlertBar,
   decorators: [Wrapper],
   parameters: {

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-2593868549{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-right:${spacers.dp8};padding-bottom:${spacers.dp8};padding-left:${spacers.dp24};margin-bottom:${spacers.dp16};max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}`, `div.info.jsx-2593868549{background-color:${colors.grey900};color:${colors.white};}`, `div.success.jsx-2593868549{background-color:${colors.green800};color:${colors.white};}`, `div.warning.jsx-2593868549{background-color:${colors.yellow300};color:${colors.yellow900};}`, `div.critical.jsx-2593868549{background-color:${colors.red800};color:${colors.white};}`, "@-webkit-keyframes slidein-jsx-2593868549{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-2593868549{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-2593868549{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-2593868549{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-2593868549{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slidein-jsx-2593868549;animation-name:slidein-jsx-2593868549;-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-2593868549{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slideout-jsx-2593868549;animation-name:slideout-jsx-2593868549;-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-2593868549{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-right:").concat(spacers.dp8, ";padding-bottom:").concat(spacers.dp8, ";padding-left:").concat(spacers.dp24, ";margin-bottom:").concat(spacers.dp16, ";max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}"), "div.info.jsx-2593868549{background-color:".concat(colors.grey900, ";color:").concat(colors.white, ";}"), "div.success.jsx-2593868549{background-color:".concat(colors.green800, ";color:").concat(colors.white, ";}"), "div.warning.jsx-2593868549{background-color:".concat(colors.yellow300, ";color:").concat(colors.yellow900, ";}"), "div.critical.jsx-2593868549{background-color:".concat(colors.red800, ";color:").concat(colors.white, ";}"), "@-webkit-keyframes slidein-jsx-2593868549{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-2593868549{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-2593868549{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-2593868549{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-2593868549{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slidein-jsx-2593868549;animation-name:slidein-jsx-2593868549;-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-2593868549{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slideout-jsx-2593868549;animation-name:slideout-jsx-2593868549;-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 = "2593868549";
 export default _defaultExport;

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

@@ -4,17 +4,20 @@ import { IconCross24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Dismiss = ({
-  onClick,
-  dataTest
-}) => /*#__PURE__*/React.createElement("div", {
-  onClick: onClick,
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["489362409", [spacers.dp16]]])
-}, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "489362409",
-  dynamic: [spacers.dp16]
-}, [`div.__jsx-style-dynamic-selector{margin-left:${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;}"]));
+const Dismiss = _ref => {
+  let {
+    onClick,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["489362409", [spacers.dp16]]])
+  }, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "489362409",
+    dynamic: [spacers.dp16]
+  }, ["div.__jsx-style-dynamic-selector{margin-left:".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;}"]));
+};
 
 Dismiss.propTypes = {
   dataTest: PropTypes.string.isRequired,

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

@@ -5,13 +5,15 @@ import { IconErrorFilled24, IconInfoFilled24, IconWarningFilled24, IconCheckmark
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const StatusIcon = ({
-  error,
-  warning,
-  valid,
-  info,
-  defaultTo
-}) => {
+const StatusIcon = _ref => {
+  let {
+    error,
+    warning,
+    valid,
+    info,
+    defaultTo
+  } = _ref;
+
   if (error) {
     return /*#__PURE__*/React.createElement(IconErrorFilled24, {
       color: colors.white
@@ -50,14 +52,16 @@ StatusIcon.propTypes = {
   warning: PropTypes.bool
 };
 
-const Icon = ({
-  icon,
-  success,
-  warning,
-  critical,
-  info,
-  dataTest
-}) => {
+const Icon = _ref2 => {
+  let {
+    icon,
+    success,
+    warning,
+    critical,
+    info,
+    dataTest
+  } = _ref2;
+
   if (icon === false) {
     return null;
   }
@@ -73,7 +77,7 @@ const Icon = ({
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2057519855",
     dynamic: [spacers.dp16]
-  }, [`div.__jsx-style-dynamic-selector{margin-right:${spacers.dp16};}`]));
+  }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp16, ";}")]));
 };
 
 const iconPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.element]);

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

@@ -2,13 +2,16 @@ import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Message = ({
-  children
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "jsx-2181391309"
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2181391309"
-}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
+const Message = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-2181391309"
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    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.js

@@ -4,17 +4,20 @@ import { layers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const AlertStack = ({
-  className,
-  children,
-  dataTest
-}) => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["132471376", [layers.alert]]]) + " " + (cx(className) || "")
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "132471376",
-  dynamic: [layers.alert]
-}, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;right:auto;bottom:0;left: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;}`])));
+export const AlertStack = _ref => {
+  let {
+    className,
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["132471376", [layers.alert]]]) + " " + (cx(className) || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "132471376",
+    dynamic: [layers.alert]
+  }, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;right:auto;bottom:0;left: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;}")])));
+};
 AlertStack.defaultProps = {
   dataTest: 'dhis2-uicore-alertstack'
 };

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

@@ -1,17 +1,9 @@
 import React from 'react';
 import { AlertBar } from '../alert-bar/index.js';
 import { AlertStack } from './alert-stack.js';
-const description = `
-A container for Alert Bars.
-
-_**Note:** The demos on this page may be slow._
-
-\`\`\`js
-import { AlertStack } from '@dhis2/ui'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Feedback/Alerts/Alert Stack',
+  title: 'Alert Stack',
   component: AlertStack,
   // Use an iframe in docs to contain 'portal'
   parameters: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "8.2.0",
+    "version": "8.2.1",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -32,9 +32,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/portal": "8.2.0",
-        "@dhis2/ui-constants": "8.2.0",
-        "@dhis2/ui-icons": "8.2.0",
+        "@dhis2-ui/portal": "8.2.1",
+        "@dhis2/ui-constants": "8.2.1",
+        "@dhis2/ui-icons": "8.2.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },