@dhis2-ui/notice-box 8.2.0 → 8.2.3

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

@@ -19,11 +19,12 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const NoticeBoxIcon = ({
-  warning,
-  error,
-  dataTest
-}) => {
+const NoticeBoxIcon = _ref => {
+  let {
+    warning,
+    error,
+    dataTest
+  } = _ref;
   // Info is the default icon
   let color = _uiConstants.colors.blue900;
   let Icon = _uiIcons.IconInfoFilled24;
@@ -47,7 +48,7 @@ const NoticeBoxIcon = ({
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "190287437",
     dynamic: [_uiConstants.spacers.dp12]
-  }, [`.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp12};}`]));
+  }, [".__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";}")]));
 };
 
 exports.NoticeBoxIcon = NoticeBoxIcon;

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

@@ -15,10 +15,12 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const NoticeBoxMessage = ({
-  children,
-  dataTest
-}) => {
+const NoticeBoxMessage = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+
   if (!children) {
     return null;
   }
@@ -29,7 +31,7 @@ const NoticeBoxMessage = ({
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3452101222",
     dynamic: [_uiConstants.colors.grey900]
-  }, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:14px;line-height:20px;}`]));
+  }, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey900, ";font-size:14px;line-height:20px;}")]));
 };
 
 exports.NoticeBoxMessage = NoticeBoxMessage;

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

@@ -15,10 +15,12 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const NoticeBoxTitle = ({
-  title,
-  dataTest
-}) => {
+const NoticeBoxTitle = _ref => {
+  let {
+    title,
+    dataTest
+  } = _ref;
+
   if (!title) {
     return null;
   }
@@ -29,7 +31,7 @@ const NoticeBoxTitle = ({
   }, title, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3611901971",
     dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp12]
-  }, [`h6.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:14px;font-weight:500;line-height:20px;margin:0 0 ${_uiConstants.spacers.dp12} 0;}`]));
+  }, ["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;}")]));
 };
 
 exports.NoticeBoxTitle = NoticeBoxTitle;

package/build/cjs/notice-box.js

@@ -25,14 +25,15 @@ var _noticeBoxTitle = require("./notice-box-title.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const NoticeBox = ({
-  className,
-  children,
-  dataTest,
-  title,
-  warning,
-  error
-}) => {
+const NoticeBox = _ref => {
+  let {
+    className,
+    children,
+    dataTest,
+    title,
+    warning,
+    error
+  } = _ref;
   const classnames = (0, _classnames.default)(className, 'root', {
     warning,
     error
@@ -43,18 +44,18 @@ const NoticeBox = ({
   }, /*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
     error: error,
     warning: warning,
-    dataTest: `${dataTest}-icon`
+    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, {
     title: title,
-    dataTest: `${dataTest}-title`
+    dataTest: "".concat(dataTest, "-title")
   }), /*#__PURE__*/_react.default.createElement(_noticeBoxMessage.NoticeBoxMessage, {
-    dataTest: `${dataTest}-message`
+    dataTest: "".concat(dataTest, "-message")
   }, 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:${_uiConstants.colors.blue050};border:1px solid ${_uiConstants.colors.blue200};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:${_uiConstants.spacers.dp12} ${_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.__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, ";}")]));
 };
 
 exports.NoticeBox = NoticeBox;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithALongTitle = exports.Error = exports.Warning = exports.Default = exports.default = void 0;
+exports.default = exports.WithALongTitle = exports.Warning = exports.Error = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -13,29 +13,10 @@ var _noticeBox = require("./notice-box.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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'
-\`\`\`
-`;
+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 = {
-  title: 'Data Display/Notice Box',
+  title: 'Notice Box',
   component: _noticeBox.NoticeBox,
   parameters: {
     componentSubtitle: subtitle,

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

@@ -4,11 +4,12 @@ import { colors, spacers } from '@dhis2/ui-constants';
 import { IconErrorFilled24, IconWarningFilled24, IconInfoFilled24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const NoticeBoxIcon = ({
-  warning,
-  error,
-  dataTest
-}) => {
+export const NoticeBoxIcon = _ref => {
+  let {
+    warning,
+    error,
+    dataTest
+  } = _ref;
   // Info is the default icon
   let color = colors.blue900;
   let Icon = IconInfoFilled24;
@@ -32,7 +33,7 @@ export const NoticeBoxIcon = ({
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "190287437",
     dynamic: [spacers.dp12]
-  }, [`.__jsx-style-dynamic-selector{margin-right:${spacers.dp12};}`]));
+  }, [".__jsx-style-dynamic-selector{margin-right:".concat(spacers.dp12, ";}")]));
 };
 NoticeBoxIcon.propTypes = {
   dataTest: PropTypes.string.isRequired,

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

@@ -2,10 +2,12 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const NoticeBoxMessage = ({
-  children,
-  dataTest
-}) => {
+export const NoticeBoxMessage = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+
   if (!children) {
     return null;
   }
@@ -16,7 +18,7 @@ export const NoticeBoxMessage = ({
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3452101222",
     dynamic: [colors.grey900]
-  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:14px;line-height:20px;}`]));
+  }, ["div.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";font-size:14px;line-height:20px;}")]));
 };
 NoticeBoxMessage.propTypes = {
   dataTest: PropTypes.string.isRequired,

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

@@ -2,10 +2,12 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const NoticeBoxTitle = ({
-  title,
-  dataTest
-}) => {
+export const NoticeBoxTitle = _ref => {
+  let {
+    title,
+    dataTest
+  } = _ref;
+
   if (!title) {
     return null;
   }
@@ -16,7 +18,7 @@ export const NoticeBoxTitle = ({
   }, title, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3611901971",
     dynamic: [colors.grey900, spacers.dp12]
-  }, [`h6.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:14px;font-weight:500;line-height:20px;margin:0 0 ${spacers.dp12} 0;}`]));
+  }, ["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;}")]));
 };
 NoticeBoxTitle.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/build/es/notice-box.js

@@ -7,14 +7,15 @@ import React from 'react';
 import { NoticeBoxIcon } from './notice-box-icon.js';
 import { NoticeBoxMessage } from './notice-box-message.js';
 import { NoticeBoxTitle } from './notice-box-title.js';
-export const NoticeBox = ({
-  className,
-  children,
-  dataTest,
-  title,
-  warning,
-  error
-}) => {
+export const NoticeBox = _ref => {
+  let {
+    className,
+    children,
+    dataTest,
+    title,
+    warning,
+    error
+  } = _ref;
   const classnames = cx(className, 'root', {
     warning,
     error
@@ -25,18 +26,18 @@ export const NoticeBox = ({
   }, /*#__PURE__*/React.createElement(NoticeBoxIcon, {
     error: error,
     warning: warning,
-    dataTest: `${dataTest}-icon`
+    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, {
     title: title,
-    dataTest: `${dataTest}-title`
+    dataTest: "".concat(dataTest, "-title")
   }), /*#__PURE__*/React.createElement(NoticeBoxMessage, {
-    dataTest: `${dataTest}-message`
+    dataTest: "".concat(dataTest, "-message")
   }, 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:${colors.blue050};border:1px solid ${colors.blue200};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:${spacers.dp12} ${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.__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, ";}")]));
 };
 NoticeBox.defaultProps = {
   dataTest: 'dhis2-uicore-noticebox'

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

@@ -1,29 +1,10 @@
 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 = `
-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'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Data Display/Notice Box',
+  title: 'Notice Box',
   component: NoticeBox,
   parameters: {
     componentSubtitle: subtitle,

package/package.json

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