@dhis2-ui/header-bar 8.1.11 → 8.2.2

package/build/cjs/__e2e__/header-bar.stories.e2e.js

@@ -3,28 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Default", {
-  enumerable: true,
-  get: function () {
-    return _default2.Default;
-  }
-});
-Object.defineProperty(exports, "ShowOnlineStatus", {
-  enumerable: true,
-  get: function () {
-    return _showOnlineStatus.ShowOnlineStatus;
-  }
-});
-Object.defineProperty(exports, "PWAEnabled", {
+Object.defineProperty(exports, "CustomApplicationTitle", {
   enumerable: true,
   get: function () {
-    return _pwaEnabled.PWAEnabled;
+    return _customApplicationTitle.CustomApplicationTitle;
   }
 });
-Object.defineProperty(exports, "WithLastOnline", {
+Object.defineProperty(exports, "Default", {
   enumerable: true,
   get: function () {
-    return _withLastOnline.WithLastOnline;
+    return _default2.Default;
   }
 });
 Object.defineProperty(exports, "MeWithAvatar", {
@@ -33,16 +21,16 @@ Object.defineProperty(exports, "MeWithAvatar", {
     return _meWithAvatar.MeWithAvatar;
   }
 });
-Object.defineProperty(exports, "WithSpecialAppNameCharacters", {
+Object.defineProperty(exports, "PWAEnabled", {
   enumerable: true,
   get: function () {
-    return _withSpecialAppNameCharacter.WithSpecialAppNameCharacters;
+    return _pwaEnabled.PWAEnabled;
   }
 });
-Object.defineProperty(exports, "CustomApplicationTitle", {
+Object.defineProperty(exports, "ShowOnlineStatus", {
   enumerable: true,
   get: function () {
-    return _customApplicationTitle.CustomApplicationTitle;
+    return _showOnlineStatus.ShowOnlineStatus;
   }
 });
 Object.defineProperty(exports, "UserHasAllAuthority", {
@@ -51,6 +39,12 @@ Object.defineProperty(exports, "UserHasAllAuthority", {
     return _userHasAllAuthority.UserHasAllAuthority;
   }
 });
+Object.defineProperty(exports, "UserHasNoAuthorities", {
+  enumerable: true,
+  get: function () {
+    return _userHasNoAuthorities.UserHasNoAuthorities;
+  }
+});
 Object.defineProperty(exports, "UserHasWebInterpretationAndMessagingAuthority", {
   enumerable: true,
   get: function () {
@@ -69,10 +63,16 @@ Object.defineProperty(exports, "UserHasWebMessagingAuthority", {
     return _userHasWebMessagingAuthority.UserHasWebMessagingAuthority;
   }
 });
-Object.defineProperty(exports, "UserHasNoAuthorities", {
+Object.defineProperty(exports, "WithLastOnline", {
   enumerable: true,
   get: function () {
-    return _userHasNoAuthorities.UserHasNoAuthorities;
+    return _withLastOnline.WithLastOnline;
+  }
+});
+Object.defineProperty(exports, "WithSpecialAppNameCharacters", {
+  enumerable: true,
+  get: function () {
+    return _withSpecialAppNameCharacter.WithSpecialAppNameCharacters;
   }
 });
 Object.defineProperty(exports, "ZeroUnreadInterpretations", {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createDecoratorProvider = exports.providerConfig = exports.createDecoratorCustomDataProviderHeaderBar = exports.dataProviderData = exports.applicationTitle = exports.modulesWithSpecialCharacters = exports.defaultModules = void 0;
+exports.providerConfig = exports.modulesWithSpecialCharacters = exports.defaultModules = exports.dataProviderData = exports.createDecoratorProvider = exports.createDecoratorCustomDataProviderHeaderBar = exports.applicationTitle = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
@@ -334,7 +334,8 @@ const dataProviderData = {
 
 exports.dataProviderData = dataProviderData;
 
-const createDecoratorCustomDataProviderHeaderBar = (data = dataProviderData) => {
+const createDecoratorCustomDataProviderHeaderBar = function () {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : dataProviderData;
   return fn => {
     window.dataProviderData = data;
     return /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {

package/build/cjs/apps.js

@@ -39,10 +39,11 @@ function escapeRegExpCharacters(text) {
   return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-function Search({
-  value,
-  onChange
-}) {
+function Search(_ref) {
+  let {
+    value,
+    onChange
+  } = _ref;
   const {
     baseUrl
   } = (0, _appRuntime.useConfig)();
@@ -73,11 +74,12 @@ Search.propTypes = {
   onChange: _propTypes.default.func.isRequired
 };
 
-function Item({
-  name,
-  path,
-  img
-}) {
+function Item(_ref2) {
+  let {
+    name,
+    path,
+    img
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement("a", {
     href: path,
     className: _style.default.dynamic([["3670725638", [_uiConstants.theme.primary050]]])
@@ -90,7 +92,7 @@ function Item({
   }, name), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3670725638",
     dynamic: [_uiConstants.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:${_uiConstants.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(_uiConstants.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 = {
@@ -99,32 +101,37 @@ Item.propTypes = {
   path: _propTypes.default.string
 };
 
-function List({
-  apps,
-  filter
-}) {
+function List(_ref3) {
+  let {
+    apps,
+    filter
+  } = _ref3;
   return /*#__PURE__*/_react.default.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.default.createElement(Item, {
-    key: `app-${name}-${idx}`,
-    name: displayName || name,
-    path: defaultAction,
-    img: icon
-  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }).map((_ref5, idx) => {
+    let {
+      displayName,
+      name,
+      defaultAction,
+      icon
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement(Item, {
+      key: "app-".concat(name, "-").concat(idx),
+      name: displayName || name,
+      path: defaultAction,
+      img: icon
+    });
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
     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;}"]));
 }
@@ -134,22 +141,25 @@ List.propTypes = {
   filter: _propTypes.default.string
 };
 
-const AppMenu = ({
-  apps,
-  filter,
-  onFilterChange
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": "headerbar-apps-menu",
-  className: "jsx-3879001227"
-}, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(Search, {
-  value: filter,
-  onChange: onFilterChange
-}), /*#__PURE__*/_react.default.createElement(List, {
-  apps: apps,
-  filter: filter
-})), /*#__PURE__*/_react.default.createElement(_style.default, {
-  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.default.createElement("div", {
+    "data-test": "headerbar-apps-menu",
+    className: "jsx-3879001227"
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(Search, {
+    value: filter,
+    onChange: onFilterChange
+  }), /*#__PURE__*/_react.default.createElement(List, {
+    apps: apps,
+    filter: filter
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3879001227"
+  }, ["div.jsx-3879001227{z-index:10000;position:absolute;top:28px;right:-6px;border-top:4px solid transparent;}"]));
+};
 
 AppMenu.propTypes = {
   apps: _propTypes.default.array.isRequired,
@@ -157,15 +167,19 @@ AppMenu.propTypes = {
   filter: _propTypes.default.string
 };
 
-const Apps = ({
-  apps
-}) => {
+const Apps = _ref7 => {
+  let {
+    apps
+  } = _ref7;
   const [show, setShow] = (0, _react.useState)(false);
   const [filter, setFilter] = (0, _react.useState)('');
   const handleVisibilityToggle = (0, _react.useCallback)(() => setShow(!show), [show]);
-  const handleFilterChange = (0, _react.useCallback)(({
-    value
-  }) => setFilter(value), []);
+  const handleFilterChange = (0, _react.useCallback)(_ref8 => {
+    let {
+      value
+    } = _ref8;
+    return setFilter(value);
+  }, []);
   const containerEl = (0, _react.useRef)(null);
   const onDocClick = (0, _react.useCallback)(evt => {
     if (containerEl.current && !containerEl.current.contains(evt.target)) {

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

@@ -12,7 +12,7 @@ exports.baseUrl = baseUrl;
 const webCommons = 'https://domain.tld/dhis-web-commons/';
 exports.webCommons = webCommons;
 (0, _steps.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/cjs/features/the_headerbar_contains_a_profile_menu/common.js

@@ -6,8 +6,5 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   cy.get('[data-test="headerbar-profile-menu"]').should('not.exist');
 });
 (0, _steps.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/cjs/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js

@@ -7,7 +7,7 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Given)('the HeaderBar loads without an error and the user does not have an avatar', () => {
   cy.visitStory('HeaderBarTesting', 'Default');
 });
-(0, _steps.Then)(`the headerbar contains a text icon of size 36px`, () => {
+(0, _steps.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');
   });
@@ -15,7 +15,7 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.When)('the user clicks on the text icon', () => {
   cy.get('[data-test="headerbar-profile-icon-text"]').click();
 });
-(0, _steps.Then)(`the profile menu contains a text icon of size 48px`, () => {
+(0, _steps.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/cjs/features/the_headerbar_contains_a_profile_menu/the_menu_opens.js

@@ -5,10 +5,7 @@ require("../common/index.js");
 var _steps = require("cypress-cucumber-preprocessor/steps");
 
 (0, _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();
 });
 (0, _steps.Then)('the menu opens', () => {
   cy.get('[data-test="headerbar-profile-menu"]').should('be.visible');

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

@@ -4,7 +4,7 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 
 var _index = require("../common/index.js");
 
-const logoutUrl = `${_index.baseUrl}dhis-web-commons-security/logout.action`;
+const logoutUrl = "".concat(_index.baseUrl, "dhis-web-commons-security/logout.action");
 (0, _steps.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/cjs/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js

@@ -5,7 +5,8 @@ require("../common/index.js");
 var _steps = require("cypress-cucumber-preprocessor/steps");
 
 (0, _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
@@ -14,7 +15,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   });
 });
 (0, _steps.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/cjs/features/the_search_should_escape_regexp_character/the_modules_do_not_contain_items_with_special_chars.js

@@ -6,7 +6,8 @@ require("../common/index.js");
 
 (0, _steps.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/cjs/header-bar.js

@@ -58,12 +58,13 @@ const query = {
   }
 };
 
-const HeaderBar = ({
-  appName,
-  className
-}) => {
+const HeaderBar = _ref => {
   var _data$user$avatar;
 
+  let {
+    appName,
+    className
+  } = _ref;
   const {
     baseUrl,
     pwaEnabled,
@@ -119,7 +120,7 @@ const HeaderBar = ({
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3517276904",
     dynamic: [_uiConstants.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:${_uiConstants.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(_uiConstants.colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"]));
 };
 
 exports.HeaderBar = HeaderBar;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithLastOnlineInfo = exports.WithOnlineStatus = exports.Error = exports.Loading = exports.NoAuthorityForInterpretationsApp = exports.NonEnglishUserLocale = exports.CustomLogoWideDimension = exports.Default = exports.default = void 0;
+exports.default = exports.WithOnlineStatus = exports.WithLastOnlineInfo = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
@@ -14,21 +14,9 @@ var _headerBar = require("./header-bar.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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";
 var _default = {
-  title: 'Utils/Header Bar',
+  title: 'Header Bar',
   component: _headerBar.HeaderBar,
   parameters: {
     componentSubtitle: subtitle,
@@ -158,7 +146,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/cjs/join-path.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.joinPath = void 0;
 
-const joinPath = (...parts) => {
+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/cjs/notification-icon.js

@@ -29,22 +29,25 @@ function icon(kind) {
   }
 }
 
-const NotificationIcon = ({
-  count,
-  href,
-  kind,
-  dataTestId
-}) => /*#__PURE__*/_react.default.createElement("a", {
-  href: href,
-  "data-test": dataTestId,
-  className: _style.default.dynamic([["2450998793", [_uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]]) + " " + (kind || "")
-}, icon(kind), count > 0 && /*#__PURE__*/_react.default.createElement("span", {
-  "data-test": `${dataTestId}-count`,
-  className: _style.default.dynamic([["2450998793", [_uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]])
-}, count), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2450998793",
-  dynamic: [_uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.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:${_uiConstants.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:${_uiConstants.theme.secondary500};color:${_uiConstants.colors.white};font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ${_uiConstants.spacers.dp4};}`]));
+const NotificationIcon = _ref => {
+  let {
+    count,
+    href,
+    kind,
+    dataTestId
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: href,
+    "data-test": dataTestId,
+    className: _style.default.dynamic([["2450998793", [_uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]]) + " " + (kind || "")
+  }, icon(kind), count > 0 && /*#__PURE__*/_react.default.createElement("span", {
+    "data-test": "".concat(dataTestId, "-count"),
+    className: _style.default.dynamic([["2450998793", [_uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]])
+  }, count), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2450998793",
+    dynamic: [_uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.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(_uiConstants.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(_uiConstants.theme.secondary500, ";color:").concat(_uiConstants.colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(_uiConstants.spacers.dp4, ";}")]));
+};
 
 exports.NotificationIcon = NotificationIcon;
 NotificationIcon.defaultProps = {

package/build/cjs/notifications.js

@@ -27,11 +27,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 const hasAuthority = (userAuthorities, authId) => Array.isArray(userAuthorities) && userAuthorities.some(userAuthId => userAuthId === 'ALL' || userAuthId === authId);
 
-const Notifications = ({
-  interpretations,
-  messages,
-  userAuthorities
-}) => {
+const Notifications = _ref => {
+  let {
+    interpretations,
+    messages,
+    userAuthorities
+  } = _ref;
   const {
     baseUrl
   } = (0, _appRuntime.useConfig)();

package/build/cjs/online-status.js

@@ -23,10 +23,11 @@ var _onlineStatusStyles = _interopRequireDefault(require("./online-status.styles
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const useOnlineStatusInfo = ({
-  online,
-  lastOnline
-}) => {
+const useOnlineStatusInfo = _ref => {
+  let {
+    online,
+    lastOnline
+  } = _ref;
   const {
     headerbar
   } = (0, _appRuntime.useConfig)();
@@ -43,9 +44,10 @@ const useOnlineStatusInfo = ({
 /** A badge to display online/offline status in the header bar */
 
 
-function OnlineStatus({
-  dense
-}) {
+function OnlineStatus(_ref2) {
+  let {
+    dense
+  } = _ref2;
   const {
     online,
     lastOnline
@@ -57,15 +59,15 @@ function OnlineStatus({
   const displayStatus = online ? _index.default.t('Online') : _index.default.t('Offline');
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-online-status",
-    className: `jsx-${_onlineStatusStyles.default.__hash}` + " " + ((0, _classnames.default)('container', dense ? 'bar' : 'badge') || "")
+    className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + ((0, _classnames.default)('container', dense ? 'bar' : 'badge') || "")
   }, info && !dense && /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_onlineStatusStyles.default.__hash}` + " " + "info unselectable"
+    className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + "info unselectable"
   }, info), /*#__PURE__*/_react.default.createElement("div", {
-    className: `jsx-${_onlineStatusStyles.default.__hash}` + " " + ((0, _classnames.default)('icon', online ? 'online' : 'offline') || "")
+    className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + ((0, _classnames.default)('icon', online ? 'online' : 'offline') || "")
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_onlineStatusStyles.default.__hash}` + " " + "label unselectable"
+    className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + "label unselectable"
   }, displayStatus), info && dense && /*#__PURE__*/_react.default.createElement("span", {
-    className: `jsx-${_onlineStatusStyles.default.__hash}` + " " + "info-dense unselectable"
+    className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + "info-dense unselectable"
   }, info), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _onlineStatusStyles.default.__hash
   }, _onlineStatusStyles.default));

package/build/cjs/online-status.styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = [`.container.jsx-1778673733{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;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:${_uiConstants.colors.grey100};}`, `.container.badge.jsx-1778673733{margin-right:${_uiConstants.spacers.dp24};padding:${_uiConstants.spacers.dp8};border-radius:5px;font-size:14px;}`, `.container.bar.jsx-1778673733{display:none;padding:0px ${_uiConstants.spacers.dp4};min-height:24px;font-size:13px;}`, "@media (max-width:480px){.container.badge.jsx-1778673733{display:none;}.container.bar.jsx-1778673733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-1778673733{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", `.info.jsx-1778673733{margin-right:${_uiConstants.spacers.dp16};}`, `.info-dense.jsx-1778673733{margin-left:${_uiConstants.spacers.dp12};font-size:12px;}`, `.icon.jsx-1778673733{width:8px;height:8px;border-radius:8px;margin-right:${_uiConstants.spacers.dp4};}`, `.icon.online.jsx-1778673733{background-color:${_uiConstants.colors.teal400};}`, `.icon.offline.jsx-1778673733{background-color:transparent;border:1px solid ${_uiConstants.colors.yellow300};}`, `.icon.reconnecting.jsx-1778673733{background:${_uiConstants.colors.grey300};-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-1778673733 2s linear infinite;animation:fadeinout-jsx-1778673733 2s linear infinite;opacity:0;}`, "@-webkit-keyframes fadeinout{50%.jsx-1778673733{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", "@keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", ".label.jsx-1778673733{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
+const _defaultExport = [".container.jsx-1778673733{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;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(_uiConstants.colors.grey100, ";}"), ".container.badge.jsx-1778673733{margin-right:".concat(_uiConstants.spacers.dp24, ";padding:").concat(_uiConstants.spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-1778673733{display:none;padding:0px ".concat(_uiConstants.spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-1778673733{display:none;}.container.bar.jsx-1778673733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-1778673733{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-1778673733{margin-right:".concat(_uiConstants.spacers.dp16, ";}"), ".info-dense.jsx-1778673733{margin-left:".concat(_uiConstants.spacers.dp12, ";font-size:12px;}"), ".icon.jsx-1778673733{width:8px;height:8px;border-radius:8px;margin-right:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.online.jsx-1778673733{background-color:".concat(_uiConstants.colors.teal400, ";}"), ".icon.offline.jsx-1778673733{background-color:transparent;border:1px solid ".concat(_uiConstants.colors.yellow300, ";}"), ".icon.reconnecting.jsx-1778673733{background:".concat(_uiConstants.colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-1778673733 2s linear infinite;animation:fadeinout-jsx-1778673733 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-1778673733{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", "@keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", ".label.jsx-1778673733{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
 _defaultExport.__hash = "1778673733";
 var _default = _defaultExport;
 exports.default = _default;