@dhis2-ui/header-bar 8.2.0 → 8.2.1

package/build/cjs/profile/profile-header.js

@@ -21,35 +21,42 @@ var _index = _interopRequireDefault(require("../locales/index.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ProfileName = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": "headerbar-profile-username",
-  className: "jsx-2223023701"
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2223023701"
-}, ["div.jsx-2223023701{margin-bottom:3px;font-size:16px;line-height:19px;}"]));
+const ProfileName = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "headerbar-profile-username",
+    className: "jsx-2223023701"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2223023701"
+  }, ["div.jsx-2223023701{margin-bottom:3px;font-size:16px;line-height:19px;}"]));
+};
 
 ProfileName.propTypes = {
   children: _propTypes.default.string
 };
 
-const ProfileEmail = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": "headerbar-profile-user-email",
-  className: "jsx-1072768994"
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1072768994"
-}, ["div.jsx-1072768994{margin-bottom:6px;font-size:14px;line-height:16px;}"]));
+const ProfileEmail = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "headerbar-profile-user-email",
+    className: "jsx-1072768994"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1072768994"
+  }, ["div.jsx-1072768994{margin-bottom:6px;font-size:14px;line-height:16px;}"]));
+};
 
 ProfileEmail.propTypes = {
   children: _propTypes.default.string
 };
 
-const ProfileEdit = ({
-  children
-}) => {
+const ProfileEdit = _ref3 => {
+  let {
+    children
+  } = _ref3;
   const {
     baseUrl
   } = (0, _appRuntime.useConfig)();
@@ -66,37 +73,43 @@ ProfileEdit.propTypes = {
   children: _propTypes.default.string
 };
 
-const ProfileDetails = ({
-  name,
-  email
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  className: "jsx-3814112749"
-}, /*#__PURE__*/_react.default.createElement(ProfileName, null, name), /*#__PURE__*/_react.default.createElement(ProfileEmail, null, email), /*#__PURE__*/_react.default.createElement(ProfileEdit, null, _index.default.t('Edit profile')), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3814112749"
-}, ["div.jsx-3814112749{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:20px;color:#000;font-size:14px;font-weight:400;}"]));
+const ProfileDetails = _ref4 => {
+  let {
+    name,
+    email
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-3814112749"
+  }, /*#__PURE__*/_react.default.createElement(ProfileName, null, name), /*#__PURE__*/_react.default.createElement(ProfileEmail, null, email), /*#__PURE__*/_react.default.createElement(ProfileEdit, null, _index.default.t('Edit profile')), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3814112749"
+  }, ["div.jsx-3814112749{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:20px;color:#000;font-size:14px;font-weight:400;}"]));
+};
 
 ProfileDetails.propTypes = {
   email: _propTypes.default.string,
   name: _propTypes.default.string
 };
 
-const ProfileHeader = ({
-  name,
-  email,
-  avatarId
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  className: "jsx-3625287538"
-}, /*#__PURE__*/_react.default.createElement(_userAvatar.UserAvatar, {
-  avatarId: avatarId,
-  name: name,
-  dataTest: "headerbar-profile-menu-icon",
-  large: true
-}), /*#__PURE__*/_react.default.createElement(ProfileDetails, {
-  name: name,
-  email: email
-}), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3625287538"
-}, ["div.jsx-3625287538{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-left:24px;padding-top:20px;}"]));
+const ProfileHeader = _ref5 => {
+  let {
+    name,
+    email,
+    avatarId
+  } = _ref5;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-3625287538"
+  }, /*#__PURE__*/_react.default.createElement(_userAvatar.UserAvatar, {
+    avatarId: avatarId,
+    name: name,
+    dataTest: "headerbar-profile-menu-icon",
+    large: true
+  }), /*#__PURE__*/_react.default.createElement(ProfileDetails, {
+    name: name,
+    email: email
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3625287538"
+  }, ["div.jsx-3625287538{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-left:24px;padding-top:20px;}"]));
+};
 
 exports.ProfileHeader = ProfileHeader;
 ProfileHeader.propTypes = {

package/build/cjs/profile/profile-menu.js

@@ -47,12 +47,13 @@ const LoadingMask = () => /*#__PURE__*/_react.default.createElement(_layer.Layer
   dataTest: "headerbar-profile-menu-loading-mask"
 }, /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null)));
 
-const ProfileContents = ({
-  name,
-  email,
-  avatarId,
-  helpUrl
-}) => {
+const ProfileContents = _ref => {
+  let {
+    name,
+    email,
+    avatarId,
+    helpUrl
+  } = _ref;
   const {
     baseUrl
   } = (0, _appRuntime.useConfig)();
@@ -124,22 +125,25 @@ ProfileContents.propTypes = {
   name: _propTypes.default.string
 };
 
-const ProfileMenu = ({
-  avatarId,
-  name,
-  email,
-  helpUrl
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": "headerbar-profile-menu",
-  className: "jsx-3620236321"
-}, /*#__PURE__*/_react.default.createElement(ProfileContents, {
-  name: name,
-  email: email,
-  avatarId: avatarId,
-  helpUrl: helpUrl
-}), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3620236321"
-}, ["div.jsx-3620236321{z-index:10000;position:absolute;top:34px;right:-6px;width:310px;border-top:4px solid transparent;}"]));
+const ProfileMenu = _ref2 => {
+  let {
+    avatarId,
+    name,
+    email,
+    helpUrl
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "headerbar-profile-menu",
+    className: "jsx-3620236321"
+  }, /*#__PURE__*/_react.default.createElement(ProfileContents, {
+    name: name,
+    email: email,
+    avatarId: avatarId,
+    helpUrl: helpUrl
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3620236321"
+  }, ["div.jsx-3620236321{z-index:10000;position:absolute;top:34px;right:-6px;width:310px;border-top:4px solid transparent;}"]));
+};
 
 exports.ProfileMenu = ProfileMenu;
 ProfileMenu.propTypes = {

package/build/cjs/profile.js

@@ -20,8 +20,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 Profile extends _react.default.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty(this, "state", {
       show: false

package/build/cjs/title.js

@@ -13,15 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Title = ({
-  app,
-  instance
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": "headerbar-title",
-  className: "jsx-2721515324"
-}, app ? `${instance} - ${app}` : `${instance}`, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2721515324"
-}, ["div.jsx-2721515324{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;white-space:nowrap;}"]));
+const Title = _ref => {
+  let {
+    app,
+    instance
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "headerbar-title",
+    className: "jsx-2721515324"
+  }, app ? "".concat(instance, " - ").concat(app) : "".concat(instance), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2721515324"
+  }, ["div.jsx-2721515324{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;white-space:nowrap;}"]));
+};
 
 exports.Title = Title;
 Title.propTypes = {

package/build/es/__e2e__/stories/common.js

@@ -318,7 +318,8 @@ export const dataProviderData = {
 }; // Trailing "HeaderBar" because storybook is confusing this with the
 // helper from the org unit tree's common.js helper with the same name
 
-export const createDecoratorCustomDataProviderHeaderBar = (data = dataProviderData) => {
+export const createDecoratorCustomDataProviderHeaderBar = function () {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : dataProviderData;
   return fn => {
     window.dataProviderData = data;
     return /*#__PURE__*/React.createElement(CustomDataProvider, {

package/build/es/apps.js

@@ -17,10 +17,11 @@ function escapeRegExpCharacters(text) {
   return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-function Search({
-  value,
-  onChange
-}) {
+function Search(_ref) {
+  let {
+    value,
+    onChange
+  } = _ref;
   const {
     baseUrl
   } = useConfig();
@@ -51,11 +52,12 @@ Search.propTypes = {
   onChange: PropTypes.func.isRequired
 };
 
-function Item({
-  name,
-  path,
-  img
-}) {
+function Item(_ref2) {
+  let {
+    name,
+    path,
+    img
+  } = _ref2;
   return /*#__PURE__*/React.createElement("a", {
     href: path,
     className: _JSXStyle.dynamic([["3670725638", [theme.primary050]]])
@@ -68,7 +70,7 @@ function Item({
   }, name), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3670725638",
     dynamic: [theme.primary050]
-  }, ["a.__jsx-style-dynamic-selector{display:inline-block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;width:96px;margin:8px;padding:8px;border-radius:12px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}", `a.__jsx-style-dynamic-selector:hover,a.__jsx-style-dynamic-selector:focus{background-color:${theme.primary050};cursor:pointer;}`, "a.__jsx-style-dynamic-selector:hover>div.__jsx-style-dynamic-selector{font-weight:500;cursor:pointer;}", "img.__jsx-style-dynamic-selector{width:48px;height:48px;cursor:pointer;}", "div.__jsx-style-dynamic-selector{margin-top:14px;color:rgba(0,0,0,0.87);font-size:12px;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;line-height:14px;text-align:center;cursor:pointer;}"]));
+  }, ["a.__jsx-style-dynamic-selector{display:inline-block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;width:96px;margin:8px;padding:8px;border-radius:12px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}", "a.__jsx-style-dynamic-selector:hover,a.__jsx-style-dynamic-selector:focus{background-color:".concat(theme.primary050, ";cursor:pointer;}"), "a.__jsx-style-dynamic-selector:hover>div.__jsx-style-dynamic-selector{font-weight:500;cursor:pointer;}", "img.__jsx-style-dynamic-selector{width:48px;height:48px;cursor:pointer;}", "div.__jsx-style-dynamic-selector{margin-top:14px;color:rgba(0,0,0,0.87);font-size:12px;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;line-height:14px;text-align:center;cursor:pointer;}"]));
 }
 
 Item.propTypes = {
@@ -77,32 +79,37 @@ Item.propTypes = {
   path: PropTypes.string
 };
 
-function List({
-  apps,
-  filter
-}) {
+function List(_ref3) {
+  let {
+    apps,
+    filter
+  } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-apps-menu-list",
     className: "jsx-2076871745"
-  }, apps.filter(({
-    displayName,
-    name
-  }) => {
+  }, apps.filter(_ref4 => {
+    let {
+      displayName,
+      name
+    } = _ref4;
     const appName = displayName || name;
     const formattedAppName = appName.toLowerCase();
     const formattedFilter = escapeRegExpCharacters(filter).toLowerCase();
     return filter.length > 0 ? formattedAppName.match(formattedFilter) : true;
-  }).map(({
-    displayName,
-    name,
-    defaultAction,
-    icon
-  }, idx) => /*#__PURE__*/React.createElement(Item, {
-    key: `app-${name}-${idx}`,
-    name: displayName || name,
-    path: defaultAction,
-    img: icon
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }).map((_ref5, idx) => {
+    let {
+      displayName,
+      name,
+      defaultAction,
+      icon
+    } = _ref5;
+    return /*#__PURE__*/React.createElement(Item, {
+      key: "app-".concat(name, "-").concat(idx),
+      name: displayName || name,
+      path: defaultAction,
+      img: icon
+    });
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2076871745"
   }, ["div.jsx-2076871745{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:30vw;min-width:300px;max-width:560px;min-height:200px;max-height:465px;margin:0 8px 8px 8px;overflow:auto;overflow-x:hidden;}"]));
 }
@@ -112,22 +119,25 @@ List.propTypes = {
   filter: PropTypes.string
 };
 
-const AppMenu = ({
-  apps,
-  filter,
-  onFilterChange
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": "headerbar-apps-menu",
-  className: "jsx-3879001227"
-}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Search, {
-  value: filter,
-  onChange: onFilterChange
-}), /*#__PURE__*/React.createElement(List, {
-  apps: apps,
-  filter: filter
-})), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3879001227"
-}, ["div.jsx-3879001227{z-index:10000;position:absolute;top:28px;right:-6px;border-top:4px solid transparent;}"]));
+const AppMenu = _ref6 => {
+  let {
+    apps,
+    filter,
+    onFilterChange
+  } = _ref6;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "headerbar-apps-menu",
+    className: "jsx-3879001227"
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Search, {
+    value: filter,
+    onChange: onFilterChange
+  }), /*#__PURE__*/React.createElement(List, {
+    apps: apps,
+    filter: filter
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3879001227"
+  }, ["div.jsx-3879001227{z-index:10000;position:absolute;top:28px;right:-6px;border-top:4px solid transparent;}"]));
+};
 
 AppMenu.propTypes = {
   apps: PropTypes.array.isRequired,
@@ -135,15 +145,19 @@ AppMenu.propTypes = {
   filter: PropTypes.string
 };
 
-const Apps = ({
-  apps
-}) => {
+const Apps = _ref7 => {
+  let {
+    apps
+  } = _ref7;
   const [show, setShow] = useState(false);
   const [filter, setFilter] = useState('');
   const handleVisibilityToggle = useCallback(() => setShow(!show), [show]);
-  const handleFilterChange = useCallback(({
-    value
-  }) => setFilter(value), []);
+  const handleFilterChange = useCallback(_ref8 => {
+    let {
+      value
+    } = _ref8;
+    return setFilter(value);
+  }, []);
   const containerEl = useRef(null);
   const onDocClick = useCallback(evt => {
     if (containerEl.current && !containerEl.current.contains(evt.target)) {

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

@@ -2,7 +2,7 @@ import { Before, Given } from 'cypress-cucumber-preprocessor/steps';
 export const baseUrl = 'https://domain.tld/';
 export const webCommons = 'https://domain.tld/dhis-web-commons/';
 Before(() => {
-  cy.intercept('GET', `${baseUrl}api/fileResources/avatarId/data`, {
+  cy.intercept('GET', "".concat(baseUrl, "api/fileResources/avatarId/data"), {
     fixture: 'HeaderBar/avatar.png'
   }).as('avatar');
 });

package/build/es/features/the_headerbar_contains_a_profile_menu/common.js

@@ -3,8 +3,5 @@ Then('the HeaderBar does not display the profile menu', () => {
   cy.get('[data-test="headerbar-profile-menu"]').should('not.exist');
 });
 When('the user opens the menu', () => {
-  cy.get(`
-        [data-test="headerbar-profile-icon-text"],
-        [data-test="headerbar-profile-icon-image"]
-    `).click();
+  cy.get("\n        [data-test=\"headerbar-profile-icon-text\"],\n        [data-test=\"headerbar-profile-icon-image\"]\n    ").click();
 });

package/build/es/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js

@@ -3,7 +3,7 @@ import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
 Given('the HeaderBar loads without an error and the user does not have an avatar', () => {
   cy.visitStory('HeaderBarTesting', 'Default');
 });
-Then(`the headerbar contains a text icon of size 36px`, () => {
+Then("the headerbar contains a text icon of size 36px", () => {
   cy.fixture('HeaderBar/me').then(() => {
     cy.get('[data-test="headerbar-profile-icon-text"]').should('be.visible').and('have.css', 'height', '36px').and('have.css', 'width', '36px');
   });
@@ -11,7 +11,7 @@ Then(`the headerbar contains a text icon of size 36px`, () => {
 When('the user clicks on the text icon', () => {
   cy.get('[data-test="headerbar-profile-icon-text"]').click();
 });
-Then(`the profile menu contains a text icon of size 48px`, () => {
+Then("the profile menu contains a text icon of size 48px", () => {
   cy.fixture('HeaderBar/me').then(() => {
     cy.get('[data-test="headerbar-profile-menu-icon-text"]').should('be.visible').and('have.css', 'height', '48px').and('have.css', 'width', '48px');
   });

package/build/es/features/the_headerbar_contains_a_profile_menu/the_menu_opens.js

@@ -1,10 +1,7 @@
 import '../common/index.js';
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 When('the user clicks on the profile icons', () => {
-  cy.get(`
-        [data-test="headerbar-profile-icon-text"],
-        [data-test="headerbar-profile-icon-image"]
-    `).click();
+  cy.get("\n        [data-test=\"headerbar-profile-icon-text\"],\n        [data-test=\"headerbar-profile-icon-image\"]\n    ").click();
 });
 Then('the menu opens', () => {
   cy.get('[data-test="headerbar-profile-menu"]').should('be.visible');

package/build/es/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js

@@ -1,6 +1,6 @@
 import { And, Then } from 'cypress-cucumber-preprocessor/steps';
 import { baseUrl } from '../common/index.js';
-const logoutUrl = `${baseUrl}dhis-web-commons-security/logout.action`;
+const logoutUrl = "".concat(baseUrl, "dhis-web-commons-security/logout.action");
 Then('contains a link to log out the user', () => {
   cy.get('[data-test="headerbar-profile-menu"] > li').should(lis => {
     const menuItem = lis.eq(4);

package/build/es/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js

@@ -1,7 +1,8 @@
 import '../common/index.js';
 import { Then } from 'cypress-cucumber-preprocessor/steps';
 Then('contains the user name', () => {
-  cy.all(() => cy.window(), () => cy.get('[data-test="headerbar-profile-username"]')).then(([win, $name]) => {
+  cy.all(() => cy.window(), () => cy.get('[data-test="headerbar-profile-username"]')).then(_ref => {
+    let [win, $name] = _ref;
     console.log('win.dataProviderData', win.dataProviderData);
     const {
       name
@@ -10,7 +11,8 @@ Then('contains the user name', () => {
   });
 });
 Then('contains the user email', () => {
-  cy.all(() => cy.window(), () => cy.get('[data-test="headerbar-profile-user-email"]')).then(([win, $email]) => {
+  cy.all(() => cy.window(), () => cy.get('[data-test="headerbar-profile-user-email"]')).then(_ref2 => {
+    let [win, $email] = _ref2;
     const {
       email
     } = win.dataProviderData.me;

package/build/es/features/the_search_should_escape_regexp_character/the_modules_do_not_contain_items_with_special_chars.js

@@ -2,7 +2,8 @@ import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 import '../common/index.js';
 Given(/no app name contains a (.*)/, character => {
   // Needs to be wrapped, otherwise for some reason the wrong char is in the scope
-  cy.all(() => cy.window(), () => cy.wrap(character)).then(([win, char]) => {
+  cy.all(() => cy.window(), () => cy.wrap(character)).then(_ref => {
+    let [win, char] = _ref;
     const {
       dataProviderData
     } = win;

package/build/es/header-bar.js

@@ -31,12 +31,13 @@ const query = {
     resource: 'me/dashboard'
   }
 };
-export const HeaderBar = ({
-  appName,
-  className
-}) => {
+export const HeaderBar = _ref => {
   var _data$user$avatar;
 
+  let {
+    appName,
+    className
+  } = _ref;
   const {
     baseUrl,
     pwaEnabled,
@@ -90,7 +91,7 @@ export const HeaderBar = ({
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3517276904",
     dynamic: [colors.white]
-  }, [`.main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;border-bottom:1px solid rgba(32,32,32,0.15);color:${colors.white};height:48px;}`, ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"]));
+  }, [".main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;border-bottom:1px solid rgba(32,32,32,0.15);color:".concat(colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"]));
 };
 HeaderBar.propTypes = {
   appName: PropTypes.string,

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

@@ -2,21 +2,9 @@ import { CustomDataProvider, Provider } from '@dhis2/app-runtime';
 import React from 'react';
 import { HeaderBar } from './header-bar.js';
 const subtitle = 'The common navigation bar used in all DHIS2 apps';
-const description = `
-The header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.
-
-The header bar is included automatically with the App Shell and should not need any configuration.
-
-#### Theme
-
-The header bar can be themeed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color.
-
-\`\`\`js
-import { HeaderBar } from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\nThe header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.\n\nThe header bar is included automatically with the App Shell and should not need any configuration.\n\n#### Theme\n\nThe header bar can be themeed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color.\n\n```js\nimport { HeaderBar } from '@dhis2/ui'\n```\n";
 export default {
-  title: 'Utils/Header Bar',
+  title: 'Header Bar',
   component: HeaderBar,
   parameters: {
     componentSubtitle: subtitle,
@@ -145,7 +133,7 @@ const customLocaleData = { ...customData,
   },
   'action::menu/getModules': {
     modules: customData['action::menu/getModules'].modules.map(mod => ({ ...mod,
-      displayName: `Le ${mod.displayName}`
+      displayName: "Le ".concat(mod.displayName)
     }))
   }
 };

package/build/es/join-path.js

@@ -1,4 +1,8 @@
-export const joinPath = (...parts) => {
+export const joinPath = function () {
+  for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
+    parts[_key] = arguments[_key];
+  }
+
   const realParts = parts.filter(part => !!part);
   return realParts.map(part => part.replace(/^\/+|\/+$/g, '')).join('/');
 };

package/build/es/notification-icon.js

@@ -16,22 +16,25 @@ function icon(kind) {
   }
 }
 
-export const NotificationIcon = ({
-  count,
-  href,
-  kind,
-  dataTestId
-}) => /*#__PURE__*/React.createElement("a", {
-  href: href,
-  "data-test": dataTestId,
-  className: _JSXStyle.dynamic([["2450998793", [spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]]) + " " + (kind || "")
-}, icon(kind), count > 0 && /*#__PURE__*/React.createElement("span", {
-  "data-test": `${dataTestId}-count`,
-  className: _JSXStyle.dynamic([["2450998793", [spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]])
-}, count), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2450998793",
-  dynamic: [spacers.dp12, theme.secondary500, colors.white, spacers.dp4]
-}, ["a.__jsx-style-dynamic-selector{position:relative;margin:4px 24px 0 0;cursor:pointer;}", "a.__jsx-style-dynamic-selector:focus{outline:1px dotted white;}", `span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:-9px;right:-6px;min-width:18px;min-height:18px;border-radius:${spacers.dp12};box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:${theme.secondary500};color:${colors.white};font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ${spacers.dp4};}`]));
+export const NotificationIcon = _ref => {
+  let {
+    count,
+    href,
+    kind,
+    dataTestId
+  } = _ref;
+  return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    "data-test": dataTestId,
+    className: _JSXStyle.dynamic([["2450998793", [spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]]) + " " + (kind || "")
+  }, icon(kind), count > 0 && /*#__PURE__*/React.createElement("span", {
+    "data-test": "".concat(dataTestId, "-count"),
+    className: _JSXStyle.dynamic([["2450998793", [spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]])
+  }, count), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2450998793",
+    dynamic: [spacers.dp12, theme.secondary500, colors.white, spacers.dp4]
+  }, ["a.__jsx-style-dynamic-selector{position:relative;margin:4px 24px 0 0;cursor:pointer;}", "a.__jsx-style-dynamic-selector:focus{outline:1px dotted white;}", "span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:-9px;right:-6px;min-width:18px;min-height:18px;border-radius:".concat(spacers.dp12, ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:").concat(theme.secondary500, ";color:").concat(colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(spacers.dp4, ";}")]));
+};
 NotificationIcon.defaultProps = {
   count: 0
 };