@dhis2-ui/notice-box 9.11.0 → 9.11.1-beta.1

package/build/cjs/__tests__/notice-box-icon.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _enzyme = require("enzyme");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _noticeBoxIcon = require("../notice-box-icon.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('NoticeBoxIcon', () => {
   it('should render info icon by default', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {

package/build/cjs/__tests__/notice-box-message.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _enzyme = require("enzyme");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _noticeBoxMessage = require("../notice-box-message.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('NoticeBoxMessage', () => {
   it('should return null when there are no children', () => {
     const props = {

package/build/cjs/__tests__/notice-box-title.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _enzyme = require("enzyme");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _noticeBoxTitle = require("../notice-box-title.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('NoticeBoxTitle', () => {
   it('should return null when there is no title', () => {
     const props = {

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a NoticeBox receives a message as children', () => {
   cy.visitStory('NoticeBox', 'With children');
   cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible');

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a NoticeBox receives a title prop', () => {
   cy.visitStory('NoticeBox', 'With title');
   cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible');

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "NoticeBox", {
     return _noticeBox.NoticeBox;
   }
 });
-
 var _noticeBox = require("./notice-box.js");

package/build/cjs/notice-box-content.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoticeBoxContent = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _noticeBoxMessage = require("./notice-box-message.js");
-
 var _noticeBoxTitle = require("./notice-box-title.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NoticeBoxContent = _ref => {
   let {
     children,
@@ -30,15 +22,14 @@ const NoticeBoxContent = _ref => {
     className: _style.default.dynamic([["403435427", [_uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(_noticeBoxTitle.NoticeBoxTitle, {
     title: title,
-    dataTest: "".concat(dataTest, "-title")
+    dataTest: `${dataTest}-title`
   }), /*#__PURE__*/_react.default.createElement(_noticeBoxMessage.NoticeBoxMessage, {
-    dataTest: "".concat(dataTest, "-message")
+    dataTest: `${dataTest}-message`
   }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "403435427",
     dynamic: [_uiConstants.spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:".concat(_uiConstants.spacers.dp8, ";padding-block-start:3px;}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:${_uiConstants.spacers.dp8};padding-block-start:3px;}`]));
 };
-
 exports.NoticeBoxContent = NoticeBoxContent;
 NoticeBoxContent.defaultProps = {
   dataTest: 'dhis2-uicore-noticebox-content'

package/build/cjs/notice-box-icon.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoticeBoxIcon = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NoticeBoxIcon = _ref => {
   let {
     valid,
@@ -29,22 +21,18 @@ const NoticeBoxIcon = _ref => {
   // Info is the default icon
   let color = _uiConstants.colors.blue900;
   let Icon = _uiIcons.IconInfoFilled24;
-
   if (valid) {
     color = _uiConstants.colors.green700;
     Icon = _uiIcons.IconCheckmarkCircle24;
   }
-
   if (warning) {
     color = _uiConstants.colors.yellow700;
     Icon = _uiIcons.IconWarningFilled24;
   }
-
   if (error) {
     color = _uiConstants.colors.red700;
     Icon = _uiIcons.IconErrorFilled24;
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     className: _style.default.dynamic([["1909501516", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp24]]])
@@ -54,9 +42,8 @@ const NoticeBoxIcon = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1909501516",
     dynamic: [_uiConstants.spacers.dp12, _uiConstants.spacers.dp24]
-  }, [".__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp12, ";height:").concat(_uiConstants.spacers.dp24, ";}")]));
+  }, [`.__jsx-style-dynamic-selector{margin-inline-end:${_uiConstants.spacers.dp12};height:${_uiConstants.spacers.dp24};}`]));
 };
-
 exports.NoticeBoxIcon = NoticeBoxIcon;
 NoticeBoxIcon.propTypes = {
   dataTest: _propTypes2.default.string.isRequired,

package/build/cjs/notice-box-message.js

@@ -4,36 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoticeBoxMessage = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NoticeBoxMessage = _ref => {
   let {
     children,
     dataTest
   } = _ref;
-
   if (!children) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     className: _style.default.dynamic([["3568970766", [_uiConstants.colors.grey900]]])
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3568970766",
     dynamic: [_uiConstants.colors.grey900]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:19px;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:14px;line-height:19px;}`]));
 };
-
 exports.NoticeBoxMessage = NoticeBoxMessage;
 NoticeBoxMessage.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/notice-box-title.js

@@ -4,36 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoticeBoxTitle = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NoticeBoxTitle = _ref => {
   let {
     title,
     dataTest
   } = _ref;
-
   if (!title) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement("h6", {
     "data-test": dataTest,
     className: _style.default.dynamic([["1334557505", [_uiConstants.colors.grey900]]])
   }, title, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1334557505",
     dynamic: [_uiConstants.colors.grey900]
-  }, ["h6.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey900, ";font-size:14px;font-weight:500;line-height:19px;margin:0;}")]));
+  }, [`h6.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:14px;font-weight:500;line-height:19px;margin:0;}`]));
 };
-
 exports.NoticeBoxTitle = NoticeBoxTitle;
 NoticeBoxTitle.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/notice-box.e2e.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTitle = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _noticeBox = require("./notice-box.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'NoticeBox'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, null, "The noticebox content");
+exports.WithChildren = WithChildren;
+const WithTitle = () => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, {
+  title: "The noticebox title"
+});
+exports.WithTitle = WithTitle;

package/build/cjs/notice-box.js

@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoticeBox = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _noticeBoxContent = require("./notice-box-content.js");
-
 var _noticeBoxIcon = require("./notice-box-icon.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NoticeBox = _ref => {
   let {
     className,
@@ -45,18 +35,17 @@ const NoticeBox = _ref => {
     error: error,
     warning: warning,
     valid: valid,
-    dataTest: "".concat(dataTest, "-icon")
+    dataTest: `${dataTest}-icon`
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["243875418", [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500, _uiConstants.colors.green050, _uiConstants.colors.green200]]])
   }, /*#__PURE__*/_react.default.createElement(_noticeBoxContent.NoticeBoxContent, {
     title: title,
-    dataTest: "".concat(dataTest, "-content")
+    dataTest: `${dataTest}-content`
   }, children)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "243875418",
     dynamic: [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500, _uiConstants.colors.green050, _uiConstants.colors.green200]
-  }, [".root.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.blue050, ";border:1px solid ").concat(_uiConstants.colors.blue200, ";border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-block:").concat(_uiConstants.spacers.dp12, ";padding-inline:").concat(_uiConstants.spacers.dp16, ";}"), ".root.warning.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.yellow050, ";border:1px solid ").concat(_uiConstants.colors.yellow200, ";}"), ".root.error.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.red050, ";border:2px solid ").concat(_uiConstants.colors.red500, ";}"), ".root.valid.__jsx-style-dynamic-selector{background:".concat(_uiConstants.colors.green050, ";border:1px solid ").concat(_uiConstants.colors.green200, ";}")]));
+  }, [`.root.__jsx-style-dynamic-selector{background:${_uiConstants.colors.blue050};border:1px solid ${_uiConstants.colors.blue200};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-block:${_uiConstants.spacers.dp12};padding-inline:${_uiConstants.spacers.dp16};}`, `.root.warning.__jsx-style-dynamic-selector{background:${_uiConstants.colors.yellow050};border:1px solid ${_uiConstants.colors.yellow200};}`, `.root.error.__jsx-style-dynamic-selector{background:${_uiConstants.colors.red050};border:2px solid ${_uiConstants.colors.red500};}`, `.root.valid.__jsx-style-dynamic-selector{background:${_uiConstants.colors.green050};border:1px solid ${_uiConstants.colors.green200};}`]));
 };
-
 exports.NoticeBox = NoticeBox;
 NoticeBox.defaultProps = {
   dataTest: 'dhis2-uicore-noticebox'
@@ -65,14 +54,11 @@ NoticeBox.propTypes = {
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,
   dataTest: _propTypes2.default.string,
-
   /** Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props */
   error: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
   title: _propTypes2.default.string,
-
   /** Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props */
   valid: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
-
   /** Applies 'warning' message styles. Mutually exclusive with the `error` and `valid` props */
   warning: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool)
 };

package/build/cjs/{notice-box.stories.js → notice-box.prod.stories.js}

@@ -4,18 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithoutTitle = exports.WithALongTitle = exports.Warning = exports.Valid = exports.TitleOnly = exports.RTL = exports.Error = exports.Default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _noticeBox = require("./notice-box.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const subtitle = `Highlights useful information that is directly relevant to the page the user is viewing`;
+const description = `
+Use a notice box wherever there is important, temporary information about a page or situation that the user needs to be aware of.
+
+Notice boxes are different from alert bars in several ways. Notice boxes cannot be dismissed, so they will always display until the situation is resolved. Notice boxes are for highlighting static information or information that is ongoing. Alert bars are suited to alerting a user about something that has just happened.
+
+Another way to decide which component to use:
+
+- a notice box will usually be displayed when a page loads, before a user takes action
+- an alert bar will usually display in response to an action/event
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Notice boxes cannot be dismissed, so it is important to provide guidance on how to fix the problem/condition that is causing the notice box to display.
 
-const subtitle = "Highlights useful information that is directly relevant to the page the user is viewing";
-const description = "\nUse a notice box wherever there is important, temporary information about a page or situation that the user needs to be aware of.\n\nNotice boxes are different from alert bars in several ways. Notice boxes cannot be dismissed, so they will always display until the situation is resolved. Notice boxes are for highlighting static information or information that is ongoing. Alert bars are suited to alerting a user about something that has just happened.\n\nAnother way to decide which component to use:\n\n- a notice box will usually be displayed when a page loads, before a user takes action\n- an alert bar will usually display in response to an action/event\n\nNotice boxes cannot be dismissed, so it is important to provide guidance on how to fix the problem/condition that is causing the notice box to display.\n\nDo not use a notice box to display permanent information. If there is information that always will be displayed on a page it should be designed as part of the page itself. Notice boxes are for temporary information.\n\nLearn more about Notice Boxes at [Design System: Notice Box](https://github.com/dhis2/design-system/blob/master/molecules/notice-box.md).\n\n```js\nimport { NoticeBox } from '@dhis2/ui'\n```\n";
-var _default = {
+Do not use a notice box to display permanent information. If there is information that always will be displayed on a page it should be designed as part of the page itself. Notice boxes are for temporary information.
+
+Learn more about Notice Boxes at [Design System: Notice Box](https://github.com/dhis2/design-system/blob/master/molecules/notice-box.md).
+
+\`\`\`js
+import { NoticeBox } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Notice Box',
   component: _noticeBox.NoticeBox,
   parameters: {
@@ -27,73 +41,59 @@ var _default = {
     }
   },
   argTypes: {
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "Data shown in this dashboard may take a few hours to update. Scheduled dashboard updates can be managed in the scheduler app.");
-
 exports.Default = Default;
 Default.args = {
   title: 'Your database was updated in the last 24 hours'
 };
-
 const Valid = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "Programs using these rules are updated automatically.");
-
 exports.Valid = Valid;
 Valid.args = {
   valid: true,
   title: 'Program rules exported successfully'
 };
-
 const Warning = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "No one will be able to access this program. Add some Organisation Units to the access list.");
-
 exports.Warning = Warning;
 Warning.args = {
   warning: true,
   title: 'This program has no assigned Organisation Units'
 };
-
 const Error = () => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, {
   title: "Access rules for this instance are set to 'Public'",
   error: true
 }, "Data could be accessed from outside this instance. Update access rules immediately.");
-
 exports.Error = Error;
 Error.args = {
   error: true,
   title: "Access rules for this instance are set to 'Public'"
 };
 const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + 'Ut semper interdum scelerisque. Suspendisse ut velit sed' + 'lacus pretium convallis vitae sit amet purus. Nam ut' + 'libero rhoncus, consectetur sem a, sollicitudin lectus.';
-
 const WithALongTitle = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "The title text will wrap");
-
 exports.WithALongTitle = WithALongTitle;
 WithALongTitle.args = {
   error: true,
   title: text
 };
-
 const WithoutTitle = () => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, null, "This noticebox does not have a title.");
-
 exports.WithoutTitle = WithoutTitle;
-
 const TitleOnly = () => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, {
   title: "This noticebox has only a title"
 });
-
 exports.TitleOnly = TitleOnly;
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "\u0647\u0630\u0647 \u0631\u0633\u0627\u0644\u0629 \u0628\u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629."));
-
 exports.RTL = RTL;
 RTL.args = {
   title: 'مثال على العنوان'

package/build/es/notice-box-content.js

@@ -15,13 +15,13 @@ export const NoticeBoxContent = _ref => {
     className: _JSXStyle.dynamic([["403435427", [spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(NoticeBoxTitle, {
     title: title,
-    dataTest: "".concat(dataTest, "-title")
+    dataTest: `${dataTest}-title`
   }), /*#__PURE__*/React.createElement(NoticeBoxMessage, {
-    dataTest: "".concat(dataTest, "-message")
+    dataTest: `${dataTest}-message`
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "403435427",
     dynamic: [spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:".concat(spacers.dp8, ";padding-block-start:3px;}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:${spacers.dp8};padding-block-start:3px;}`]));
 };
 NoticeBoxContent.defaultProps = {
   dataTest: 'dhis2-uicore-noticebox-content'

package/build/es/notice-box-icon.js

@@ -14,22 +14,18 @@ export const NoticeBoxIcon = _ref => {
   // Info is the default icon
   let color = colors.blue900;
   let Icon = IconInfoFilled24;
-
   if (valid) {
     color = colors.green700;
     Icon = IconCheckmarkCircle24;
   }
-
   if (warning) {
     color = colors.yellow700;
     Icon = IconWarningFilled24;
   }
-
   if (error) {
     color = colors.red700;
     Icon = IconErrorFilled24;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1909501516", [spacers.dp12, spacers.dp24]]])
@@ -39,7 +35,7 @@ export const NoticeBoxIcon = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1909501516",
     dynamic: [spacers.dp12, spacers.dp24]
-  }, [".__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp12, ";height:").concat(spacers.dp24, ";}")]));
+  }, [`.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp12};height:${spacers.dp24};}`]));
 };
 NoticeBoxIcon.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/notice-box-message.js

@@ -7,18 +7,16 @@ export const NoticeBoxMessage = _ref => {
     children,
     dataTest
   } = _ref;
-
   if (!children) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["3568970766", [colors.grey900]]])
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3568970766",
     dynamic: [colors.grey900]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";font-size:14px;line-height:19px;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:14px;line-height:19px;}`]));
 };
 NoticeBoxMessage.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/notice-box-title.js

@@ -7,18 +7,16 @@ export const NoticeBoxTitle = _ref => {
     title,
     dataTest
   } = _ref;
-
   if (!title) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("h6", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1334557505", [colors.grey900]]])
   }, title, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1334557505",
     dynamic: [colors.grey900]
-  }, ["h6.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";font-size:14px;font-weight:500;line-height:19px;margin:0;}")]));
+  }, [`h6.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:14px;font-weight:500;line-height:19px;margin:0;}`]));
 };
 NoticeBoxTitle.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/notice-box.e2e.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NoticeBox } from './notice-box.js';
+export default {
+  title: 'NoticeBox'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(NoticeBox, null, "The noticebox content");
+export const WithTitle = () => /*#__PURE__*/React.createElement(NoticeBox, {
+  title: "The noticebox title"
+});

package/build/es/notice-box.js

@@ -28,16 +28,16 @@ export const NoticeBox = _ref => {
     error: error,
     warning: warning,
     valid: valid,
-    dataTest: "".concat(dataTest, "-icon")
+    dataTest: `${dataTest}-icon`
   }), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["243875418", [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]]])
   }, /*#__PURE__*/React.createElement(NoticeBoxContent, {
     title: title,
-    dataTest: "".concat(dataTest, "-content")
+    dataTest: `${dataTest}-content`
   }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "243875418",
     dynamic: [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]
-  }, [".root.__jsx-style-dynamic-selector{background:".concat(colors.blue050, ";border:1px solid ").concat(colors.blue200, ";border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-block:").concat(spacers.dp12, ";padding-inline:").concat(spacers.dp16, ";}"), ".root.warning.__jsx-style-dynamic-selector{background:".concat(colors.yellow050, ";border:1px solid ").concat(colors.yellow200, ";}"), ".root.error.__jsx-style-dynamic-selector{background:".concat(colors.red050, ";border:2px solid ").concat(colors.red500, ";}"), ".root.valid.__jsx-style-dynamic-selector{background:".concat(colors.green050, ";border:1px solid ").concat(colors.green200, ";}")]));
+  }, [`.root.__jsx-style-dynamic-selector{background:${colors.blue050};border:1px solid ${colors.blue200};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-block:${spacers.dp12};padding-inline:${spacers.dp16};}`, `.root.warning.__jsx-style-dynamic-selector{background:${colors.yellow050};border:1px solid ${colors.yellow200};}`, `.root.error.__jsx-style-dynamic-selector{background:${colors.red050};border:2px solid ${colors.red500};}`, `.root.valid.__jsx-style-dynamic-selector{background:${colors.green050};border:1px solid ${colors.green200};}`]));
 };
 NoticeBox.defaultProps = {
   dataTest: 'dhis2-uicore-noticebox'
@@ -46,14 +46,11 @@ NoticeBox.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props */
   error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
   title: PropTypes.string,
-
   /** Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props */
   valid: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
-
   /** Applies 'warning' message styles. Mutually exclusive with the `error` and `valid` props */
   warning: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool)
 };

package/build/es/{notice-box.stories.js → notice-box.prod.stories.js}

@@ -1,8 +1,27 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { NoticeBox } from './notice-box.js';
-const subtitle = "Highlights useful information that is directly relevant to the page the user is viewing";
-const description = "\nUse a notice box wherever there is important, temporary information about a page or situation that the user needs to be aware of.\n\nNotice boxes are different from alert bars in several ways. Notice boxes cannot be dismissed, so they will always display until the situation is resolved. Notice boxes are for highlighting static information or information that is ongoing. Alert bars are suited to alerting a user about something that has just happened.\n\nAnother way to decide which component to use:\n\n- a notice box will usually be displayed when a page loads, before a user takes action\n- an alert bar will usually display in response to an action/event\n\nNotice boxes cannot be dismissed, so it is important to provide guidance on how to fix the problem/condition that is causing the notice box to display.\n\nDo not use a notice box to display permanent information. If there is information that always will be displayed on a page it should be designed as part of the page itself. Notice boxes are for temporary information.\n\nLearn more about Notice Boxes at [Design System: Notice Box](https://github.com/dhis2/design-system/blob/master/molecules/notice-box.md).\n\n```js\nimport { NoticeBox } from '@dhis2/ui'\n```\n";
+const subtitle = `Highlights useful information that is directly relevant to the page the user is viewing`;
+const description = `
+Use a notice box wherever there is important, temporary information about a page or situation that the user needs to be aware of.
+
+Notice boxes are different from alert bars in several ways. Notice boxes cannot be dismissed, so they will always display until the situation is resolved. Notice boxes are for highlighting static information or information that is ongoing. Alert bars are suited to alerting a user about something that has just happened.
+
+Another way to decide which component to use:
+
+- a notice box will usually be displayed when a page loads, before a user takes action
+- an alert bar will usually display in response to an action/event
+
+Notice boxes cannot be dismissed, so it is important to provide guidance on how to fix the problem/condition that is causing the notice box to display.
+
+Do not use a notice box to display permanent information. If there is information that always will be displayed on a page it should be designed as part of the page itself. Notice boxes are for temporary information.
+
+Learn more about Notice Boxes at [Design System: Notice Box](https://github.com/dhis2/design-system/blob/master/molecules/notice-box.md).
+
+\`\`\`js
+import { NoticeBox } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Notice Box',
   component: NoticeBox,
@@ -15,11 +34,14 @@ export default {
     }
   },
   argTypes: {
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/notice-box",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.1",
     "description": "UI NoticeBox",
     "repository": {
         "type": "git",
@@ -22,19 +22,19 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
+        "@dhis2/ui-icons": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/notice-box.stories.e2e.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _noticeBox = require("./notice-box.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('NoticeBox', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_noticeBox.NoticeBox, null, "The noticebox content")).add('With title', () => /*#__PURE__*/_react2.default.createElement(_noticeBox.NoticeBox, {
-  title: "The noticebox title"
-}));

package/build/es/notice-box.stories.e2e.js

@@ -1,6 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { NoticeBox } from './notice-box.js';
-storiesOf('NoticeBox', module).add('With children', () => /*#__PURE__*/React.createElement(NoticeBox, null, "The noticebox content")).add('With title', () => /*#__PURE__*/React.createElement(NoticeBox, {
-  title: "The noticebox title"
-}));