@dhis2-ui/notice-box 8.10.1 → 8.11.0

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

@@ -7,5 +7,5 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible');
 });
 (0, _steps.Then)('the message is visible', () => {
-  cy.get('[data-test="dhis2-uicore-noticebox-message"]').contains('The noticebox content').should('be.visible');
+  cy.get('[data-test="dhis2-uicore-noticebox-content-message"]').contains('The noticebox content').should('be.visible');
 });

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

@@ -7,5 +7,5 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible');
 });
 (0, _steps.Then)('the title is visible', () => {
-  cy.get('[data-test="dhis2-uicore-noticebox-title"]').contains('The noticebox title').should('be.visible');
+  cy.get('[data-test="dhis2-uicore-noticebox-content-title"]').contains('The noticebox title').should('be.visible');
 });

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

@@ -0,0 +1,50 @@
+"use strict";
+
+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 }; }
+
+const NoticeBoxContent = _ref => {
+  let {
+    children,
+    dataTest,
+    title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["3020667210", [_uiConstants.spacers.dp8]]])
+  }, /*#__PURE__*/_react.default.createElement(_noticeBoxTitle.NoticeBoxTitle, {
+    title: title,
+    dataTest: "".concat(dataTest, "-title")
+  }), /*#__PURE__*/_react.default.createElement(_noticeBoxMessage.NoticeBoxMessage, {
+    dataTest: "".concat(dataTest, "-message")
+  }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3020667210",
+    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-top:3px;}")]));
+};
+
+exports.NoticeBoxContent = NoticeBoxContent;
+NoticeBoxContent.defaultProps = {
+  dataTest: 'dhis2-uicore-noticebox-content'
+};
+NoticeBoxContent.propTypes = {
+  children: _propTypes.default.node,
+  dataTest: _propTypes.default.string,
+  title: _propTypes.default.string
+};

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

@@ -21,6 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const NoticeBoxIcon = _ref => {
   let {
+    valid,
     warning,
     error,
     dataTest
@@ -29,6 +30,11 @@ const NoticeBoxIcon = _ref => {
   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;
@@ -41,19 +47,20 @@ const NoticeBoxIcon = _ref => {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["190287437", [_uiConstants.spacers.dp12]]])
+    className: _style.default.dynamic([["362741486", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp24]]])
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     color: color,
-    className: _style.default.dynamic([["190287437", [_uiConstants.spacers.dp12]]])
+    className: _style.default.dynamic([["362741486", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp24]]])
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "190287437",
-    dynamic: [_uiConstants.spacers.dp12]
-  }, [".__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";}")]));
+    id: "362741486",
+    dynamic: [_uiConstants.spacers.dp12, _uiConstants.spacers.dp24]
+  }, [".__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";height:").concat(_uiConstants.spacers.dp24, ";}")]));
 };
 
 exports.NoticeBoxIcon = NoticeBoxIcon;
 NoticeBoxIcon.propTypes = {
   dataTest: _propTypes2.default.string.isRequired,
-  error: (0, _propTypes.mutuallyExclusive)(['error', 'warning'], _propTypes2.default.bool),
-  warning: (0, _propTypes.mutuallyExclusive)(['error', 'warning'], _propTypes2.default.bool)
+  error: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
+  valid: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
+  warning: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool)
 };

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

@@ -27,11 +27,11 @@ const NoticeBoxMessage = _ref => {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["3452101222", [_uiConstants.colors.grey900]]])
+    className: _style.default.dynamic([["3568970766", [_uiConstants.colors.grey900]]])
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3452101222",
+    id: "3568970766",
     dynamic: [_uiConstants.colors.grey900]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:20px;}")]));
+  }, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:19px;}")]));
 };
 
 exports.NoticeBoxMessage = NoticeBoxMessage;

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

@@ -27,11 +27,11 @@ const NoticeBoxTitle = _ref => {
 
   return /*#__PURE__*/_react.default.createElement("h6", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["3611901971", [_uiConstants.colors.grey900, _uiConstants.spacers.dp12]]])
+    className: _style.default.dynamic([["1334557505", [_uiConstants.colors.grey900]]])
   }, title, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3611901971",
-    dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp12]
-  }, ["h6.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey900, ";font-size:14px;font-weight:500;line-height:20px;margin:0 0 ").concat(_uiConstants.spacers.dp12, " 0;}")]));
+    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;}")]));
 };
 
 exports.NoticeBoxTitle = NoticeBoxTitle;

package/build/cjs/notice-box.js

@@ -17,11 +17,9 @@ var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _noticeBoxIcon = require("./notice-box-icon.js");
-
-var _noticeBoxMessage = require("./notice-box-message.js");
+var _noticeBoxContent = require("./notice-box-content.js");
 
-var _noticeBoxTitle = require("./notice-box-title.js");
+var _noticeBoxIcon = require("./notice-box-icon.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,30 +30,31 @@ const NoticeBox = _ref => {
     dataTest,
     title,
     warning,
-    error
+    error,
+    valid
   } = _ref;
   const classnames = (0, _classnames.default)(className, 'root', {
     warning,
-    error
+    error,
+    valid
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["833500449", [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500]]]) + " " + (classnames || "")
+    className: _style.default.dynamic([["1468515753", [_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]]]) + " " + (classnames || "")
   }, /*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
     error: error,
     warning: warning,
+    valid: valid,
     dataTest: "".concat(dataTest, "-icon")
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["833500449", [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500]]])
-  }, /*#__PURE__*/_react.default.createElement(_noticeBoxTitle.NoticeBoxTitle, {
+    className: _style.default.dynamic([["1468515753", [_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, "-title")
-  }), /*#__PURE__*/_react.default.createElement(_noticeBoxMessage.NoticeBoxMessage, {
-    dataTest: "".concat(dataTest, "-message")
+    dataTest: "".concat(dataTest, "-content")
   }, children)), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "833500449",
-    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]
-  }, [".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:").concat(_uiConstants.spacers.dp12, " ").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, ";}")]));
+    id: "1468515753",
+    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:").concat(_uiConstants.spacers.dp12, " ").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, ";}")]));
 };
 
 exports.NoticeBox = NoticeBox;
@@ -67,10 +66,13 @@ NoticeBox.propTypes = {
   className: _propTypes2.default.string,
   dataTest: _propTypes2.default.string,
 
-  /** Applies 'error' message styles. Mutually exclusive with the `warning` prop */
-  error: (0, _propTypes.mutuallyExclusive)(['error', 'warning'], _propTypes2.default.bool),
+  /** 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 'warning' message styles. Mutually exclusive with the `error` prop */
-  warning: (0, _propTypes.mutuallyExclusive)(['error', 'warning'], _propTypes2.default.bool)
+  /** 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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithALongTitle = exports.Warning = exports.Error = exports.Default = void 0;
+exports.default = exports.WithoutTitle = exports.WithALongTitle = exports.Warning = exports.Valid = exports.TitleOnly = exports.Error = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -30,6 +30,8 @@ var _default = {
     error: { ..._uiConstants.sharedPropTypes.statusArgType
     },
     warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    },
+    valid: { ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
@@ -42,6 +44,14 @@ 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;
@@ -68,4 +78,14 @@ 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;

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

@@ -4,5 +4,5 @@ Given('a NoticeBox receives a message as children', () => {
   cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible');
 });
 Then('the message is visible', () => {
-  cy.get('[data-test="dhis2-uicore-noticebox-message"]').contains('The noticebox content').should('be.visible');
+  cy.get('[data-test="dhis2-uicore-noticebox-content-message"]').contains('The noticebox content').should('be.visible');
 });

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

@@ -4,5 +4,5 @@ Given('a NoticeBox receives a title prop', () => {
   cy.get('[data-test="dhis2-uicore-noticebox"]').should('be.visible');
 });
 Then('the title is visible', () => {
-  cy.get('[data-test="dhis2-uicore-noticebox-title"]').contains('The noticebox title').should('be.visible');
+  cy.get('[data-test="dhis2-uicore-noticebox-content-title"]').contains('The noticebox title').should('be.visible');
 });

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

@@ -0,0 +1,33 @@
+import _JSXStyle from "styled-jsx/style";
+import { spacers } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NoticeBoxMessage } from './notice-box-message.js';
+import { NoticeBoxTitle } from './notice-box-title.js';
+export const NoticeBoxContent = _ref => {
+  let {
+    children,
+    dataTest,
+    title
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["3020667210", [spacers.dp8]]])
+  }, /*#__PURE__*/React.createElement(NoticeBoxTitle, {
+    title: title,
+    dataTest: "".concat(dataTest, "-title")
+  }), /*#__PURE__*/React.createElement(NoticeBoxMessage, {
+    dataTest: "".concat(dataTest, "-message")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3020667210",
+    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-top:3px;}")]));
+};
+NoticeBoxContent.defaultProps = {
+  dataTest: 'dhis2-uicore-noticebox-content'
+};
+NoticeBoxContent.propTypes = {
+  children: PropTypes.node,
+  dataTest: PropTypes.string,
+  title: PropTypes.string
+};

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

@@ -1,11 +1,12 @@
 import _JSXStyle from "styled-jsx/style";
 import { mutuallyExclusive } from '@dhis2/prop-types';
 import { colors, spacers } from '@dhis2/ui-constants';
-import { IconErrorFilled24, IconWarningFilled24, IconInfoFilled24 } from '@dhis2/ui-icons';
+import { IconErrorFilled24, IconWarningFilled24, IconInfoFilled24, IconCheckmarkCircle24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
 export const NoticeBoxIcon = _ref => {
   let {
+    valid,
     warning,
     error,
     dataTest
@@ -14,6 +15,11 @@ export const NoticeBoxIcon = _ref => {
   let color = colors.blue900;
   let Icon = IconInfoFilled24;
 
+  if (valid) {
+    color = colors.green700;
+    Icon = IconCheckmarkCircle24;
+  }
+
   if (warning) {
     color = colors.yellow700;
     Icon = IconWarningFilled24;
@@ -26,17 +32,18 @@ export const NoticeBoxIcon = _ref => {
 
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["190287437", [spacers.dp12]]])
+    className: _JSXStyle.dynamic([["362741486", [spacers.dp12, spacers.dp24]]])
   }, /*#__PURE__*/React.createElement(Icon, {
     color: color,
-    className: _JSXStyle.dynamic([["190287437", [spacers.dp12]]])
+    className: _JSXStyle.dynamic([["362741486", [spacers.dp12, spacers.dp24]]])
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "190287437",
-    dynamic: [spacers.dp12]
-  }, [".__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";}")]));
+    id: "362741486",
+    dynamic: [spacers.dp12, spacers.dp24]
+  }, [".__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";height:").concat(spacers.dp24, ";}")]));
 };
 NoticeBoxIcon.propTypes = {
   dataTest: PropTypes.string.isRequired,
-  error: mutuallyExclusive(['error', 'warning'], PropTypes.bool),
-  warning: mutuallyExclusive(['error', 'warning'], PropTypes.bool)
+  error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+  valid: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
+  warning: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool)
 };

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

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

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

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import { colors, spacers } from '@dhis2/ui-constants';
+import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 export const NoticeBoxTitle = _ref => {
@@ -14,11 +14,11 @@ export const NoticeBoxTitle = _ref => {
 
   return /*#__PURE__*/React.createElement("h6", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3611901971", [colors.grey900, spacers.dp12]]])
+    className: _JSXStyle.dynamic([["1334557505", [colors.grey900]]])
   }, title, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3611901971",
-    dynamic: [colors.grey900, spacers.dp12]
-  }, ["h6.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";font-size:14px;font-weight:500;line-height:20px;margin:0 0 ").concat(spacers.dp12, " 0;}")]));
+    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;}")]));
 };
 NoticeBoxTitle.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/notice-box.js

@@ -4,9 +4,8 @@ import { spacers, colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { NoticeBoxContent } from './notice-box-content.js';
 import { NoticeBoxIcon } from './notice-box-icon.js';
-import { NoticeBoxMessage } from './notice-box-message.js';
-import { NoticeBoxTitle } from './notice-box-title.js';
 export const NoticeBox = _ref => {
   let {
     className,
@@ -14,30 +13,31 @@ export const NoticeBox = _ref => {
     dataTest,
     title,
     warning,
-    error
+    error,
+    valid
   } = _ref;
   const classnames = cx(className, 'root', {
     warning,
-    error
+    error,
+    valid
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["833500449", [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500]]]) + " " + (classnames || "")
+    className: _JSXStyle.dynamic([["1468515753", [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]]]) + " " + (classnames || "")
   }, /*#__PURE__*/React.createElement(NoticeBoxIcon, {
     error: error,
     warning: warning,
+    valid: valid,
     dataTest: "".concat(dataTest, "-icon")
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["833500449", [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500]]])
-  }, /*#__PURE__*/React.createElement(NoticeBoxTitle, {
+    className: _JSXStyle.dynamic([["1468515753", [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, "-title")
-  }), /*#__PURE__*/React.createElement(NoticeBoxMessage, {
-    dataTest: "".concat(dataTest, "-message")
+    dataTest: "".concat(dataTest, "-content")
   }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "833500449",
-    dynamic: [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500]
-  }, [".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:").concat(spacers.dp12, " ").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, ";}")]));
+    id: "1468515753",
+    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:").concat(spacers.dp12, " ").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, ";}")]));
 };
 NoticeBox.defaultProps = {
   dataTest: 'dhis2-uicore-noticebox'
@@ -47,10 +47,13 @@ NoticeBox.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,
 
-  /** Applies 'error' message styles. Mutually exclusive with the `warning` prop */
-  error: mutuallyExclusive(['error', 'warning'], PropTypes.bool),
+  /** Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props */
+  error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
   title: PropTypes.string,
 
-  /** Applies 'warning' message styles. Mutually exclusive with the `error` prop */
-  warning: mutuallyExclusive(['error', 'warning'], PropTypes.bool)
+  /** 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

@@ -18,6 +18,8 @@ export default {
     error: { ...sharedPropTypes.statusArgType
     },
     warning: { ...sharedPropTypes.statusArgType
+    },
+    valid: { ...sharedPropTypes.statusArgType
     }
   }
 };
@@ -25,6 +27,11 @@ export const Default = args => /*#__PURE__*/React.createElement(NoticeBox, args,
 Default.args = {
   title: 'Your database was updated in the last 24 hours'
 };
+export const Valid = args => /*#__PURE__*/React.createElement(NoticeBox, args, "Programs using these rules are updated automatically.");
+Valid.args = {
+  valid: true,
+  title: 'Program rules exported successfully'
+};
 export const Warning = args => /*#__PURE__*/React.createElement(NoticeBox, args, "No one will be able to access this program. Add some Organisation Units to the access list.");
 Warning.args = {
   warning: true,
@@ -43,4 +50,8 @@ export const WithALongTitle = args => /*#__PURE__*/React.createElement(NoticeBox
 WithALongTitle.args = {
   error: true,
   title: text
-};
+};
+export const WithoutTitle = () => /*#__PURE__*/React.createElement(NoticeBox, null, "This noticebox does not have a title.");
+export const TitleOnly = () => /*#__PURE__*/React.createElement(NoticeBox, {
+  title: "This noticebox has only a title"
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/notice-box",
-    "version": "8.10.1",
+    "version": "8.11.0",
     "description": "UI NoticeBox",
     "repository": {
         "type": "git",
@@ -32,8 +32,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.10.1",
-        "@dhis2/ui-icons": "8.10.1",
+        "@dhis2/ui-constants": "8.11.0",
+        "@dhis2/ui-icons": "8.11.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },