@dhis2-ui/notice-box 10.14.0 → 10.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/__tests__/notice-box-icon.test.js +38 -0
- package/build/cjs/notice-box-content.js +9 -5
- package/build/cjs/notice-box-icon.js +26 -11
- package/build/cjs/notice-box-message.js +8 -6
- package/build/cjs/notice-box-title.js +7 -5
- package/build/cjs/notice-box.js +17 -7
- package/build/cjs/notice-box.prod.stories.js +48 -7
- package/build/es/__tests__/notice-box-icon.test.js +38 -0
- package/build/es/notice-box-content.js +9 -5
- package/build/es/notice-box-icon.js +27 -12
- package/build/es/notice-box-message.js +8 -6
- package/build/es/notice-box-title.js +7 -5
- package/build/es/notice-box.js +17 -7
- package/build/es/notice-box.prod.stories.js +44 -5
- package/package.json +3 -3
- package/types/index.d.ts +8 -0
|
@@ -13,6 +13,44 @@ describe('NoticeBoxIcon', () => {
|
|
|
13
13
|
expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0);
|
|
14
14
|
expect(wrapper.find('SvgInfoFilled24')).toHaveLength(1);
|
|
15
15
|
});
|
|
16
|
+
it('should render 16px info icon when dense', () => {
|
|
17
|
+
const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
|
|
18
|
+
dense: true,
|
|
19
|
+
dataTest: "test"
|
|
20
|
+
}));
|
|
21
|
+
expect(wrapper.find('SvgInfoFilled16')).toHaveLength(1);
|
|
22
|
+
expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0);
|
|
23
|
+
});
|
|
24
|
+
it('should render 16px error icon when dense and error', () => {
|
|
25
|
+
const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
|
|
26
|
+
dense: true,
|
|
27
|
+
error: true,
|
|
28
|
+
dataTest: "test"
|
|
29
|
+
}));
|
|
30
|
+
expect(wrapper.find('SvgErrorFilled16')).toHaveLength(1);
|
|
31
|
+
expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0);
|
|
32
|
+
});
|
|
33
|
+
it('should render custom icon when icon is set', () => {
|
|
34
|
+
const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
|
|
35
|
+
icon: /*#__PURE__*/_react.default.createElement("span", {
|
|
36
|
+
className: "custom"
|
|
37
|
+
}, "x"),
|
|
38
|
+
dataTest: "test"
|
|
39
|
+
}));
|
|
40
|
+
expect(wrapper.find('.custom')).toHaveLength(1);
|
|
41
|
+
expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0);
|
|
42
|
+
});
|
|
43
|
+
it('should ignore status props when custom icon is set', () => {
|
|
44
|
+
const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
|
|
45
|
+
error: true,
|
|
46
|
+
icon: /*#__PURE__*/_react.default.createElement("span", {
|
|
47
|
+
className: "custom"
|
|
48
|
+
}, "x"),
|
|
49
|
+
dataTest: "test"
|
|
50
|
+
}));
|
|
51
|
+
expect(wrapper.find('.custom')).toHaveLength(1);
|
|
52
|
+
expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0);
|
|
53
|
+
});
|
|
16
54
|
it('should log errors when both warning and error flag are set', () => {
|
|
17
55
|
const spy = jest.spyOn(global.console, 'error').mockImplementation(() => {});
|
|
18
56
|
(0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
|
|
@@ -15,24 +15,28 @@ const NoticeBoxContent = _ref => {
|
|
|
15
15
|
let {
|
|
16
16
|
children,
|
|
17
17
|
dataTest = 'dhis2-uicore-noticebox-content',
|
|
18
|
-
title
|
|
18
|
+
title,
|
|
19
|
+
dense = false
|
|
19
20
|
} = _ref;
|
|
20
21
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
21
22
|
"data-test": dataTest,
|
|
22
|
-
className: _style.default.dynamic([["
|
|
23
|
+
className: _style.default.dynamic([["11178332", [dense ? '2px' : _uiConstants.spacers.dp8, dense ? '0' : '3px']]])
|
|
23
24
|
}, /*#__PURE__*/_react.default.createElement(_noticeBoxTitle.NoticeBoxTitle, {
|
|
24
25
|
title: title,
|
|
26
|
+
dense: dense,
|
|
25
27
|
dataTest: `${dataTest}-title`
|
|
26
28
|
}), /*#__PURE__*/_react.default.createElement(_noticeBoxMessage.NoticeBoxMessage, {
|
|
29
|
+
dense: dense,
|
|
27
30
|
dataTest: `${dataTest}-message`
|
|
28
31
|
}, children), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
29
|
-
id: "
|
|
30
|
-
dynamic: [_uiConstants.spacers.dp8]
|
|
31
|
-
}, [`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;}`]));
|
|
32
|
+
id: "11178332",
|
|
33
|
+
dynamic: [dense ? '2px' : _uiConstants.spacers.dp8, dense ? '0' : '3px']
|
|
34
|
+
}, [`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:${dense ? '2px' : _uiConstants.spacers.dp8};padding-block-start:${dense ? '0' : '3px'};}`]));
|
|
32
35
|
};
|
|
33
36
|
exports.NoticeBoxContent = NoticeBoxContent;
|
|
34
37
|
NoticeBoxContent.propTypes = {
|
|
35
38
|
children: _propTypes.default.node,
|
|
36
39
|
dataTest: _propTypes.default.string,
|
|
40
|
+
dense: _propTypes.default.bool,
|
|
37
41
|
title: _propTypes.default.string
|
|
38
42
|
};
|
|
@@ -16,38 +16,53 @@ const NoticeBoxIcon = _ref => {
|
|
|
16
16
|
valid,
|
|
17
17
|
warning,
|
|
18
18
|
error,
|
|
19
|
-
dataTest
|
|
19
|
+
dataTest,
|
|
20
|
+
dense = false,
|
|
21
|
+
icon
|
|
20
22
|
} = _ref;
|
|
21
|
-
|
|
23
|
+
const marginInlineEnd = dense ? _uiConstants.spacers.dp8 : _uiConstants.spacers.dp12;
|
|
24
|
+
if (icon != null) {
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
26
|
+
"data-test": dataTest,
|
|
27
|
+
className: _style.default.dynamic([["2054148741", [marginInlineEnd]]])
|
|
28
|
+
}, icon, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
29
|
+
id: "2054148741",
|
|
30
|
+
dynamic: [marginInlineEnd]
|
|
31
|
+
}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;line-height:0;margin-inline-end:${marginInlineEnd};}`]));
|
|
32
|
+
}
|
|
22
33
|
let color = _uiConstants.colors.blue900;
|
|
23
|
-
let Icon = _uiIcons.IconInfoFilled24;
|
|
34
|
+
let Icon = dense ? _uiIcons.IconInfoFilled16 : _uiIcons.IconInfoFilled24;
|
|
24
35
|
if (valid) {
|
|
25
36
|
color = _uiConstants.colors.green700;
|
|
26
|
-
Icon = _uiIcons.IconCheckmarkCircle24;
|
|
37
|
+
Icon = dense ? _uiIcons.IconCheckmarkCircle16 : _uiIcons.IconCheckmarkCircle24;
|
|
27
38
|
}
|
|
28
39
|
if (warning) {
|
|
29
40
|
color = _uiConstants.colors.yellow700;
|
|
30
|
-
Icon = _uiIcons.IconWarningFilled24;
|
|
41
|
+
Icon = dense ? _uiIcons.IconWarningFilled16 : _uiIcons.IconWarningFilled24;
|
|
31
42
|
}
|
|
32
43
|
if (error) {
|
|
33
44
|
color = _uiConstants.colors.red700;
|
|
34
|
-
Icon = _uiIcons.IconErrorFilled24;
|
|
45
|
+
Icon = dense ? _uiIcons.IconErrorFilled16 : _uiIcons.IconErrorFilled24;
|
|
35
46
|
}
|
|
36
47
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
37
48
|
"data-test": dataTest,
|
|
38
|
-
className: _style.default.dynamic([["
|
|
49
|
+
className: _style.default.dynamic([["3183433197", [marginInlineEnd, dense ? '1px' : '0', dense ? _uiConstants.spacers.dp16 : _uiConstants.spacers.dp24]]])
|
|
39
50
|
}, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
40
51
|
color: color,
|
|
41
|
-
className: _style.default.dynamic([["
|
|
52
|
+
className: _style.default.dynamic([["3183433197", [marginInlineEnd, dense ? '1px' : '0', dense ? _uiConstants.spacers.dp16 : _uiConstants.spacers.dp24]]])
|
|
42
53
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
43
|
-
id: "
|
|
44
|
-
dynamic: [_uiConstants.spacers.
|
|
45
|
-
}, [`.__jsx-style-dynamic-selector{margin-inline-end:${
|
|
54
|
+
id: "3183433197",
|
|
55
|
+
dynamic: [marginInlineEnd, dense ? '1px' : '0', dense ? _uiConstants.spacers.dp16 : _uiConstants.spacers.dp24]
|
|
56
|
+
}, [`.__jsx-style-dynamic-selector{margin-inline-end:${marginInlineEnd};margin-block-start:${dense ? '1px' : '0'};height:${dense ? _uiConstants.spacers.dp16 : _uiConstants.spacers.dp24};}`]));
|
|
46
57
|
};
|
|
47
58
|
exports.NoticeBoxIcon = NoticeBoxIcon;
|
|
48
59
|
NoticeBoxIcon.propTypes = {
|
|
49
60
|
dataTest: _propTypes2.default.string.isRequired,
|
|
61
|
+
/** Uses 16px icons and tighter spacing between icon and content */
|
|
62
|
+
dense: _propTypes2.default.bool,
|
|
50
63
|
error: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
|
|
64
|
+
/** Replaces the default status icon (error/warning/valid still affect box styling) */
|
|
65
|
+
icon: _propTypes2.default.node,
|
|
51
66
|
valid: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
|
|
52
67
|
warning: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool)
|
|
53
68
|
};
|
|
@@ -12,21 +12,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
12
12
|
const NoticeBoxMessage = _ref => {
|
|
13
13
|
let {
|
|
14
14
|
children,
|
|
15
|
-
dataTest
|
|
15
|
+
dataTest,
|
|
16
|
+
dense = false
|
|
16
17
|
} = _ref;
|
|
17
18
|
if (!children) {
|
|
18
19
|
return null;
|
|
19
20
|
}
|
|
20
21
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
21
22
|
"data-test": dataTest,
|
|
22
|
-
className: _style.default.dynamic([["
|
|
23
|
+
className: _style.default.dynamic([["44961283", [_uiConstants.colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']]])
|
|
23
24
|
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
24
|
-
id: "
|
|
25
|
-
dynamic: [_uiConstants.colors.grey900]
|
|
26
|
-
}, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:14px;line-height:19px;}`]));
|
|
25
|
+
id: "44961283",
|
|
26
|
+
dynamic: [_uiConstants.colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']
|
|
27
|
+
}, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:${dense ? '13px' : '14px'};line-height:${dense ? '18px' : '19px'};}`]));
|
|
27
28
|
};
|
|
28
29
|
exports.NoticeBoxMessage = NoticeBoxMessage;
|
|
29
30
|
NoticeBoxMessage.propTypes = {
|
|
30
31
|
dataTest: _propTypes.default.string.isRequired,
|
|
31
|
-
children: _propTypes.default.node
|
|
32
|
+
children: _propTypes.default.node,
|
|
33
|
+
dense: _propTypes.default.bool
|
|
32
34
|
};
|
|
@@ -12,21 +12,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
12
12
|
const NoticeBoxTitle = _ref => {
|
|
13
13
|
let {
|
|
14
14
|
title,
|
|
15
|
-
dataTest
|
|
15
|
+
dataTest,
|
|
16
|
+
dense = false
|
|
16
17
|
} = _ref;
|
|
17
18
|
if (!title) {
|
|
18
19
|
return null;
|
|
19
20
|
}
|
|
20
21
|
return /*#__PURE__*/_react.default.createElement("h6", {
|
|
21
22
|
"data-test": dataTest,
|
|
22
|
-
className: _style.default.dynamic([["
|
|
23
|
+
className: _style.default.dynamic([["1602243316", [_uiConstants.colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']]])
|
|
23
24
|
}, title, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
24
|
-
id: "
|
|
25
|
-
dynamic: [_uiConstants.colors.grey900]
|
|
26
|
-
}, [`h6.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:14px;font-weight:500;line-height:19px;margin:0;}`]));
|
|
25
|
+
id: "1602243316",
|
|
26
|
+
dynamic: [_uiConstants.colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']
|
|
27
|
+
}, [`h6.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey900};font-size:${dense ? '13px' : '14px'};font-weight:500;line-height:${dense ? '18px' : '19px'};margin:0;}`]));
|
|
27
28
|
};
|
|
28
29
|
exports.NoticeBoxTitle = NoticeBoxTitle;
|
|
29
30
|
NoticeBoxTitle.propTypes = {
|
|
30
31
|
dataTest: _propTypes.default.string.isRequired,
|
|
32
|
+
dense: _propTypes.default.bool,
|
|
31
33
|
title: _propTypes.default.string
|
|
32
34
|
};
|
package/build/cjs/notice-box.js
CHANGED
|
@@ -21,38 +21,48 @@ const NoticeBox = _ref => {
|
|
|
21
21
|
title,
|
|
22
22
|
warning,
|
|
23
23
|
error,
|
|
24
|
-
valid
|
|
24
|
+
valid,
|
|
25
|
+
dense = false,
|
|
26
|
+
icon
|
|
25
27
|
} = _ref;
|
|
26
28
|
const classnames = (0, _classnames.default)(className, 'root', {
|
|
27
29
|
warning,
|
|
28
30
|
error,
|
|
29
|
-
valid
|
|
31
|
+
valid,
|
|
32
|
+
dense
|
|
30
33
|
});
|
|
31
34
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
32
35
|
"data-test": dataTest,
|
|
33
|
-
className: _style.default.dynamic([["
|
|
36
|
+
className: _style.default.dynamic([["3523211425", [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500, _uiConstants.colors.green050, _uiConstants.colors.green200]]]) + " " + (classnames || "")
|
|
34
37
|
}, /*#__PURE__*/_react.default.createElement(_noticeBoxIcon.NoticeBoxIcon, {
|
|
35
38
|
error: error,
|
|
36
39
|
warning: warning,
|
|
37
40
|
valid: valid,
|
|
41
|
+
dense: dense,
|
|
42
|
+
icon: icon,
|
|
38
43
|
dataTest: `${dataTest}-icon`
|
|
39
44
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
-
className: _style.default.dynamic([["
|
|
45
|
+
className: _style.default.dynamic([["3523211425", [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500, _uiConstants.colors.green050, _uiConstants.colors.green200]]])
|
|
41
46
|
}, /*#__PURE__*/_react.default.createElement(_noticeBoxContent.NoticeBoxContent, {
|
|
42
47
|
title: title,
|
|
48
|
+
dense: dense,
|
|
43
49
|
dataTest: `${dataTest}-content`
|
|
44
50
|
}, children)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
45
|
-
id: "
|
|
46
|
-
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]
|
|
47
|
-
}, [`.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};}`]));
|
|
51
|
+
id: "3523211425",
|
|
52
|
+
dynamic: [_uiConstants.colors.blue050, _uiConstants.colors.blue200, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.colors.yellow050, _uiConstants.colors.yellow200, _uiConstants.colors.red050, _uiConstants.colors.red500, _uiConstants.colors.green050, _uiConstants.colors.green200]
|
|
53
|
+
}, [`.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.dense.__jsx-style-dynamic-selector{padding-block:${_uiConstants.spacers.dp8};padding-inline:${_uiConstants.spacers.dp8};}`, `.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};}`]));
|
|
48
54
|
};
|
|
49
55
|
exports.NoticeBox = NoticeBox;
|
|
50
56
|
NoticeBox.propTypes = {
|
|
51
57
|
children: _propTypes2.default.node,
|
|
52
58
|
className: _propTypes2.default.string,
|
|
53
59
|
dataTest: _propTypes2.default.string,
|
|
60
|
+
/** Uses 16px icons and tighter padding and internal spacing */
|
|
61
|
+
dense: _propTypes2.default.bool,
|
|
54
62
|
/** Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props */
|
|
55
63
|
error: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
|
|
64
|
+
/** Replaces the default status icon; `error`, `warning`, and `valid` still set box colors */
|
|
65
|
+
icon: _propTypes2.default.node,
|
|
56
66
|
title: _propTypes2.default.string,
|
|
57
67
|
/** Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props */
|
|
58
68
|
valid: (0, _propTypes.mutuallyExclusive)(['error', 'valid', 'warning'], _propTypes2.default.bool),
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithoutTitle = exports.WithALongTitle = exports.Warning = exports.Valid = exports.TitleOnly = exports.RTL = exports.Error = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.WithoutTitle = exports.WithCustomIcon = exports.WithALongTitle = exports.Warning = exports.Valid = exports.TitleOnly = exports.RTL = exports.Error = exports.DenseWithoutTitle = exports.DenseWithALongTitle = exports.DenseTitleOnly = exports.DenseRTL = exports.Dense = exports.Default = void 0;
|
|
7
7
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
8
|
+
var _uiIcons = require("@dhis2/ui-icons");
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
9
10
|
var _noticeBox = require("./notice-box.js");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -29,6 +30,7 @@ Learn more about Notice Boxes at [Design System: Notice Box](https://github.com/
|
|
|
29
30
|
import { NoticeBox } from '@dhis2/ui'
|
|
30
31
|
\`\`\`
|
|
31
32
|
`;
|
|
33
|
+
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.';
|
|
32
34
|
var _default = exports.default = {
|
|
33
35
|
title: 'Notice Box',
|
|
34
36
|
component: _noticeBox.NoticeBox,
|
|
@@ -41,6 +43,9 @@ var _default = exports.default = {
|
|
|
41
43
|
}
|
|
42
44
|
},
|
|
43
45
|
argTypes: {
|
|
46
|
+
dense: {
|
|
47
|
+
control: 'boolean'
|
|
48
|
+
},
|
|
44
49
|
error: {
|
|
45
50
|
..._uiConstants.sharedPropTypes.statusArgType
|
|
46
51
|
},
|
|
@@ -52,11 +57,19 @@ var _default = exports.default = {
|
|
|
52
57
|
}
|
|
53
58
|
}
|
|
54
59
|
};
|
|
55
|
-
const
|
|
56
|
-
exports.Default =
|
|
60
|
+
const DashboardUpdateTemplate = 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.");
|
|
61
|
+
const Default = exports.Default = DashboardUpdateTemplate.bind({});
|
|
57
62
|
Default.args = {
|
|
58
63
|
title: 'Your database was updated in the last 24 hours'
|
|
59
64
|
};
|
|
65
|
+
const WithCustomIcon = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "Dashboard updates can be managed in the scheduler app.");
|
|
66
|
+
exports.WithCustomIcon = WithCustomIcon;
|
|
67
|
+
WithCustomIcon.args = {
|
|
68
|
+
title: 'Scheduled maintenance',
|
|
69
|
+
icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconCalendar24, {
|
|
70
|
+
color: _uiConstants.colors.grey900
|
|
71
|
+
})
|
|
72
|
+
};
|
|
60
73
|
const Valid = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "Programs using these rules are updated automatically.");
|
|
61
74
|
exports.Valid = Valid;
|
|
62
75
|
Valid.args = {
|
|
@@ -78,7 +91,6 @@ Error.args = {
|
|
|
78
91
|
error: true,
|
|
79
92
|
title: "Access rules for this instance are set to 'Public'"
|
|
80
93
|
};
|
|
81
|
-
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.';
|
|
82
94
|
const WithALongTitle = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "The title text will wrap");
|
|
83
95
|
exports.WithALongTitle = WithALongTitle;
|
|
84
96
|
WithALongTitle.args = {
|
|
@@ -91,11 +103,40 @@ const TitleOnly = () => /*#__PURE__*/_react.default.createElement(_noticeBox.Not
|
|
|
91
103
|
title: "This noticebox has only a title"
|
|
92
104
|
});
|
|
93
105
|
exports.TitleOnly = TitleOnly;
|
|
94
|
-
const
|
|
106
|
+
const RtlNoticeTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
95
107
|
dir: "rtl"
|
|
96
108
|
}, /*#__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."));
|
|
97
|
-
exports.RTL =
|
|
109
|
+
const RTL = exports.RTL = RtlNoticeTemplate.bind({});
|
|
98
110
|
RTL.args = {
|
|
99
111
|
title: 'مثال على العنوان'
|
|
100
112
|
};
|
|
101
|
-
RTL.storyName = 'RTL Text';
|
|
113
|
+
RTL.storyName = 'RTL Text';
|
|
114
|
+
const Dense = exports.Dense = DashboardUpdateTemplate.bind({});
|
|
115
|
+
Dense.args = {
|
|
116
|
+
dense: true,
|
|
117
|
+
title: 'Your database was updated in the last 24 hours'
|
|
118
|
+
};
|
|
119
|
+
const DenseWithALongTitle = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "The title text will wrap");
|
|
120
|
+
exports.DenseWithALongTitle = DenseWithALongTitle;
|
|
121
|
+
DenseWithALongTitle.args = {
|
|
122
|
+
dense: true,
|
|
123
|
+
error: true,
|
|
124
|
+
title: text
|
|
125
|
+
};
|
|
126
|
+
const DenseWithoutTitle = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args, "This noticebox does not have a title.");
|
|
127
|
+
exports.DenseWithoutTitle = DenseWithoutTitle;
|
|
128
|
+
DenseWithoutTitle.args = {
|
|
129
|
+
dense: true
|
|
130
|
+
};
|
|
131
|
+
const DenseTitleOnly = args => /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, args);
|
|
132
|
+
exports.DenseTitleOnly = DenseTitleOnly;
|
|
133
|
+
DenseTitleOnly.args = {
|
|
134
|
+
dense: true,
|
|
135
|
+
title: 'This noticebox has only a title'
|
|
136
|
+
};
|
|
137
|
+
const DenseRTL = exports.DenseRTL = RtlNoticeTemplate.bind({});
|
|
138
|
+
DenseRTL.args = {
|
|
139
|
+
dense: true,
|
|
140
|
+
title: 'مثال على العنوان'
|
|
141
|
+
};
|
|
142
|
+
DenseRTL.storyName = 'Dense RTL Text';
|
|
@@ -10,6 +10,44 @@ describe('NoticeBoxIcon', () => {
|
|
|
10
10
|
expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0);
|
|
11
11
|
expect(wrapper.find('SvgInfoFilled24')).toHaveLength(1);
|
|
12
12
|
});
|
|
13
|
+
it('should render 16px info icon when dense', () => {
|
|
14
|
+
const wrapper = shallow(/*#__PURE__*/React.createElement(NoticeBoxIcon, {
|
|
15
|
+
dense: true,
|
|
16
|
+
dataTest: "test"
|
|
17
|
+
}));
|
|
18
|
+
expect(wrapper.find('SvgInfoFilled16')).toHaveLength(1);
|
|
19
|
+
expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0);
|
|
20
|
+
});
|
|
21
|
+
it('should render 16px error icon when dense and error', () => {
|
|
22
|
+
const wrapper = shallow(/*#__PURE__*/React.createElement(NoticeBoxIcon, {
|
|
23
|
+
dense: true,
|
|
24
|
+
error: true,
|
|
25
|
+
dataTest: "test"
|
|
26
|
+
}));
|
|
27
|
+
expect(wrapper.find('SvgErrorFilled16')).toHaveLength(1);
|
|
28
|
+
expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0);
|
|
29
|
+
});
|
|
30
|
+
it('should render custom icon when icon is set', () => {
|
|
31
|
+
const wrapper = shallow(/*#__PURE__*/React.createElement(NoticeBoxIcon, {
|
|
32
|
+
icon: /*#__PURE__*/React.createElement("span", {
|
|
33
|
+
className: "custom"
|
|
34
|
+
}, "x"),
|
|
35
|
+
dataTest: "test"
|
|
36
|
+
}));
|
|
37
|
+
expect(wrapper.find('.custom')).toHaveLength(1);
|
|
38
|
+
expect(wrapper.find('SvgInfoFilled24')).toHaveLength(0);
|
|
39
|
+
});
|
|
40
|
+
it('should ignore status props when custom icon is set', () => {
|
|
41
|
+
const wrapper = shallow(/*#__PURE__*/React.createElement(NoticeBoxIcon, {
|
|
42
|
+
error: true,
|
|
43
|
+
icon: /*#__PURE__*/React.createElement("span", {
|
|
44
|
+
className: "custom"
|
|
45
|
+
}, "x"),
|
|
46
|
+
dataTest: "test"
|
|
47
|
+
}));
|
|
48
|
+
expect(wrapper.find('.custom')).toHaveLength(1);
|
|
49
|
+
expect(wrapper.find('SvgErrorFilled24')).toHaveLength(0);
|
|
50
|
+
});
|
|
13
51
|
it('should log errors when both warning and error flag are set', () => {
|
|
14
52
|
const spy = jest.spyOn(global.console, 'error').mockImplementation(() => {});
|
|
15
53
|
shallow(/*#__PURE__*/React.createElement(NoticeBoxIcon, {
|
|
@@ -8,23 +8,27 @@ export const NoticeBoxContent = _ref => {
|
|
|
8
8
|
let {
|
|
9
9
|
children,
|
|
10
10
|
dataTest = 'dhis2-uicore-noticebox-content',
|
|
11
|
-
title
|
|
11
|
+
title,
|
|
12
|
+
dense = false
|
|
12
13
|
} = _ref;
|
|
13
14
|
return /*#__PURE__*/React.createElement("div", {
|
|
14
15
|
"data-test": dataTest,
|
|
15
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["11178332", [dense ? '2px' : spacers.dp8, dense ? '0' : '3px']]])
|
|
16
17
|
}, /*#__PURE__*/React.createElement(NoticeBoxTitle, {
|
|
17
18
|
title: title,
|
|
19
|
+
dense: dense,
|
|
18
20
|
dataTest: `${dataTest}-title`
|
|
19
21
|
}), /*#__PURE__*/React.createElement(NoticeBoxMessage, {
|
|
22
|
+
dense: dense,
|
|
20
23
|
dataTest: `${dataTest}-message`
|
|
21
24
|
}, children), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
22
|
-
id: "
|
|
23
|
-
dynamic: [spacers.dp8]
|
|
24
|
-
}, [`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;}`]));
|
|
25
|
+
id: "11178332",
|
|
26
|
+
dynamic: [dense ? '2px' : spacers.dp8, dense ? '0' : '3px']
|
|
27
|
+
}, [`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:${dense ? '2px' : spacers.dp8};padding-block-start:${dense ? '0' : '3px'};}`]));
|
|
25
28
|
};
|
|
26
29
|
NoticeBoxContent.propTypes = {
|
|
27
30
|
children: PropTypes.node,
|
|
28
31
|
dataTest: PropTypes.string,
|
|
32
|
+
dense: PropTypes.bool,
|
|
29
33
|
title: PropTypes.string
|
|
30
34
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import { mutuallyExclusive } from '@dhis2/prop-types';
|
|
3
3
|
import { colors, spacers } from '@dhis2/ui-constants';
|
|
4
|
-
import { IconErrorFilled24,
|
|
4
|
+
import { IconCheckmarkCircle16, IconCheckmarkCircle24, IconErrorFilled16, IconErrorFilled24, IconInfoFilled16, IconInfoFilled24, IconWarningFilled16, IconWarningFilled24 } from '@dhis2/ui-icons';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import React from 'react';
|
|
7
7
|
export const NoticeBoxIcon = _ref => {
|
|
@@ -9,37 +9,52 @@ export const NoticeBoxIcon = _ref => {
|
|
|
9
9
|
valid,
|
|
10
10
|
warning,
|
|
11
11
|
error,
|
|
12
|
-
dataTest
|
|
12
|
+
dataTest,
|
|
13
|
+
dense = false,
|
|
14
|
+
icon
|
|
13
15
|
} = _ref;
|
|
14
|
-
|
|
16
|
+
const marginInlineEnd = dense ? spacers.dp8 : spacers.dp12;
|
|
17
|
+
if (icon != null) {
|
|
18
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
19
|
+
"data-test": dataTest,
|
|
20
|
+
className: _JSXStyle.dynamic([["2054148741", [marginInlineEnd]]])
|
|
21
|
+
}, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
22
|
+
id: "2054148741",
|
|
23
|
+
dynamic: [marginInlineEnd]
|
|
24
|
+
}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;line-height:0;margin-inline-end:${marginInlineEnd};}`]));
|
|
25
|
+
}
|
|
15
26
|
let color = colors.blue900;
|
|
16
|
-
let Icon = IconInfoFilled24;
|
|
27
|
+
let Icon = dense ? IconInfoFilled16 : IconInfoFilled24;
|
|
17
28
|
if (valid) {
|
|
18
29
|
color = colors.green700;
|
|
19
|
-
Icon = IconCheckmarkCircle24;
|
|
30
|
+
Icon = dense ? IconCheckmarkCircle16 : IconCheckmarkCircle24;
|
|
20
31
|
}
|
|
21
32
|
if (warning) {
|
|
22
33
|
color = colors.yellow700;
|
|
23
|
-
Icon = IconWarningFilled24;
|
|
34
|
+
Icon = dense ? IconWarningFilled16 : IconWarningFilled24;
|
|
24
35
|
}
|
|
25
36
|
if (error) {
|
|
26
37
|
color = colors.red700;
|
|
27
|
-
Icon = IconErrorFilled24;
|
|
38
|
+
Icon = dense ? IconErrorFilled16 : IconErrorFilled24;
|
|
28
39
|
}
|
|
29
40
|
return /*#__PURE__*/React.createElement("div", {
|
|
30
41
|
"data-test": dataTest,
|
|
31
|
-
className: _JSXStyle.dynamic([["
|
|
42
|
+
className: _JSXStyle.dynamic([["3183433197", [marginInlineEnd, dense ? '1px' : '0', dense ? spacers.dp16 : spacers.dp24]]])
|
|
32
43
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
33
44
|
color: color,
|
|
34
|
-
className: _JSXStyle.dynamic([["
|
|
45
|
+
className: _JSXStyle.dynamic([["3183433197", [marginInlineEnd, dense ? '1px' : '0', dense ? spacers.dp16 : spacers.dp24]]])
|
|
35
46
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
36
|
-
id: "
|
|
37
|
-
dynamic: [spacers.
|
|
38
|
-
}, [`.__jsx-style-dynamic-selector{margin-inline-end:${
|
|
47
|
+
id: "3183433197",
|
|
48
|
+
dynamic: [marginInlineEnd, dense ? '1px' : '0', dense ? spacers.dp16 : spacers.dp24]
|
|
49
|
+
}, [`.__jsx-style-dynamic-selector{margin-inline-end:${marginInlineEnd};margin-block-start:${dense ? '1px' : '0'};height:${dense ? spacers.dp16 : spacers.dp24};}`]));
|
|
39
50
|
};
|
|
40
51
|
NoticeBoxIcon.propTypes = {
|
|
41
52
|
dataTest: PropTypes.string.isRequired,
|
|
53
|
+
/** Uses 16px icons and tighter spacing between icon and content */
|
|
54
|
+
dense: PropTypes.bool,
|
|
42
55
|
error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
|
|
56
|
+
/** Replaces the default status icon (error/warning/valid still affect box styling) */
|
|
57
|
+
icon: PropTypes.node,
|
|
43
58
|
valid: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
|
|
44
59
|
warning: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool)
|
|
45
60
|
};
|
|
@@ -5,20 +5,22 @@ import React from 'react';
|
|
|
5
5
|
export const NoticeBoxMessage = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
8
|
-
dataTest
|
|
8
|
+
dataTest,
|
|
9
|
+
dense = false
|
|
9
10
|
} = _ref;
|
|
10
11
|
if (!children) {
|
|
11
12
|
return null;
|
|
12
13
|
}
|
|
13
14
|
return /*#__PURE__*/React.createElement("div", {
|
|
14
15
|
"data-test": dataTest,
|
|
15
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["44961283", [colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']]])
|
|
16
17
|
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
17
|
-
id: "
|
|
18
|
-
dynamic: [colors.grey900]
|
|
19
|
-
}, [`div.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:14px;line-height:19px;}`]));
|
|
18
|
+
id: "44961283",
|
|
19
|
+
dynamic: [colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']
|
|
20
|
+
}, [`div.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:${dense ? '13px' : '14px'};line-height:${dense ? '18px' : '19px'};}`]));
|
|
20
21
|
};
|
|
21
22
|
NoticeBoxMessage.propTypes = {
|
|
22
23
|
dataTest: PropTypes.string.isRequired,
|
|
23
|
-
children: PropTypes.node
|
|
24
|
+
children: PropTypes.node,
|
|
25
|
+
dense: PropTypes.bool
|
|
24
26
|
};
|
|
@@ -5,20 +5,22 @@ import React from 'react';
|
|
|
5
5
|
export const NoticeBoxTitle = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
title,
|
|
8
|
-
dataTest
|
|
8
|
+
dataTest,
|
|
9
|
+
dense = false
|
|
9
10
|
} = _ref;
|
|
10
11
|
if (!title) {
|
|
11
12
|
return null;
|
|
12
13
|
}
|
|
13
14
|
return /*#__PURE__*/React.createElement("h6", {
|
|
14
15
|
"data-test": dataTest,
|
|
15
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["1602243316", [colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']]])
|
|
16
17
|
}, title, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
17
|
-
id: "
|
|
18
|
-
dynamic: [colors.grey900]
|
|
19
|
-
}, [`h6.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:14px;font-weight:500;line-height:19px;margin:0;}`]));
|
|
18
|
+
id: "1602243316",
|
|
19
|
+
dynamic: [colors.grey900, dense ? '13px' : '14px', dense ? '18px' : '19px']
|
|
20
|
+
}, [`h6.__jsx-style-dynamic-selector{color:${colors.grey900};font-size:${dense ? '13px' : '14px'};font-weight:500;line-height:${dense ? '18px' : '19px'};margin:0;}`]));
|
|
20
21
|
};
|
|
21
22
|
NoticeBoxTitle.propTypes = {
|
|
22
23
|
dataTest: PropTypes.string.isRequired,
|
|
24
|
+
dense: PropTypes.bool,
|
|
23
25
|
title: PropTypes.string
|
|
24
26
|
};
|
package/build/es/notice-box.js
CHANGED
|
@@ -14,37 +14,47 @@ export const NoticeBox = _ref => {
|
|
|
14
14
|
title,
|
|
15
15
|
warning,
|
|
16
16
|
error,
|
|
17
|
-
valid
|
|
17
|
+
valid,
|
|
18
|
+
dense = false,
|
|
19
|
+
icon
|
|
18
20
|
} = _ref;
|
|
19
21
|
const classnames = cx(className, 'root', {
|
|
20
22
|
warning,
|
|
21
23
|
error,
|
|
22
|
-
valid
|
|
24
|
+
valid,
|
|
25
|
+
dense
|
|
23
26
|
});
|
|
24
27
|
return /*#__PURE__*/React.createElement("div", {
|
|
25
28
|
"data-test": dataTest,
|
|
26
|
-
className: _JSXStyle.dynamic([["
|
|
29
|
+
className: _JSXStyle.dynamic([["3523211425", [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, spacers.dp8, spacers.dp8, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]]]) + " " + (classnames || "")
|
|
27
30
|
}, /*#__PURE__*/React.createElement(NoticeBoxIcon, {
|
|
28
31
|
error: error,
|
|
29
32
|
warning: warning,
|
|
30
33
|
valid: valid,
|
|
34
|
+
dense: dense,
|
|
35
|
+
icon: icon,
|
|
31
36
|
dataTest: `${dataTest}-icon`
|
|
32
37
|
}), /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: _JSXStyle.dynamic([["
|
|
38
|
+
className: _JSXStyle.dynamic([["3523211425", [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, spacers.dp8, spacers.dp8, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]]])
|
|
34
39
|
}, /*#__PURE__*/React.createElement(NoticeBoxContent, {
|
|
35
40
|
title: title,
|
|
41
|
+
dense: dense,
|
|
36
42
|
dataTest: `${dataTest}-content`
|
|
37
43
|
}, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
38
|
-
id: "
|
|
39
|
-
dynamic: [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]
|
|
40
|
-
}, [`.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};}`]));
|
|
44
|
+
id: "3523211425",
|
|
45
|
+
dynamic: [colors.blue050, colors.blue200, spacers.dp12, spacers.dp16, spacers.dp8, spacers.dp8, colors.yellow050, colors.yellow200, colors.red050, colors.red500, colors.green050, colors.green200]
|
|
46
|
+
}, [`.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.dense.__jsx-style-dynamic-selector{padding-block:${spacers.dp8};padding-inline:${spacers.dp8};}`, `.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};}`]));
|
|
41
47
|
};
|
|
42
48
|
NoticeBox.propTypes = {
|
|
43
49
|
children: PropTypes.node,
|
|
44
50
|
className: PropTypes.string,
|
|
45
51
|
dataTest: PropTypes.string,
|
|
52
|
+
/** Uses 16px icons and tighter padding and internal spacing */
|
|
53
|
+
dense: PropTypes.bool,
|
|
46
54
|
/** Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props */
|
|
47
55
|
error: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
|
|
56
|
+
/** Replaces the default status icon; `error`, `warning`, and `valid` still set box colors */
|
|
57
|
+
icon: PropTypes.node,
|
|
48
58
|
title: PropTypes.string,
|
|
49
59
|
/** Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props */
|
|
50
60
|
valid: mutuallyExclusive(['error', 'valid', 'warning'], PropTypes.bool),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
1
|
+
import { colors, sharedPropTypes } from '@dhis2/ui-constants';
|
|
2
|
+
import { IconCalendar24 } from '@dhis2/ui-icons';
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import { NoticeBox } from './notice-box.js';
|
|
4
5
|
const subtitle = `Highlights useful information that is directly relevant to the page the user is viewing`;
|
|
@@ -22,6 +23,7 @@ Learn more about Notice Boxes at [Design System: Notice Box](https://github.com/
|
|
|
22
23
|
import { NoticeBox } from '@dhis2/ui'
|
|
23
24
|
\`\`\`
|
|
24
25
|
`;
|
|
26
|
+
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.';
|
|
25
27
|
export default {
|
|
26
28
|
title: 'Notice Box',
|
|
27
29
|
component: NoticeBox,
|
|
@@ -34,6 +36,9 @@ export default {
|
|
|
34
36
|
}
|
|
35
37
|
},
|
|
36
38
|
argTypes: {
|
|
39
|
+
dense: {
|
|
40
|
+
control: 'boolean'
|
|
41
|
+
},
|
|
37
42
|
error: {
|
|
38
43
|
...sharedPropTypes.statusArgType
|
|
39
44
|
},
|
|
@@ -45,10 +50,18 @@ export default {
|
|
|
45
50
|
}
|
|
46
51
|
}
|
|
47
52
|
};
|
|
48
|
-
|
|
53
|
+
const DashboardUpdateTemplate = args => /*#__PURE__*/React.createElement(NoticeBox, args, "Data shown in this dashboard may take a few hours to update. Scheduled dashboard updates can be managed in the scheduler app.");
|
|
54
|
+
export const Default = DashboardUpdateTemplate.bind({});
|
|
49
55
|
Default.args = {
|
|
50
56
|
title: 'Your database was updated in the last 24 hours'
|
|
51
57
|
};
|
|
58
|
+
export const WithCustomIcon = args => /*#__PURE__*/React.createElement(NoticeBox, args, "Dashboard updates can be managed in the scheduler app.");
|
|
59
|
+
WithCustomIcon.args = {
|
|
60
|
+
title: 'Scheduled maintenance',
|
|
61
|
+
icon: /*#__PURE__*/React.createElement(IconCalendar24, {
|
|
62
|
+
color: colors.grey900
|
|
63
|
+
})
|
|
64
|
+
};
|
|
52
65
|
export const Valid = args => /*#__PURE__*/React.createElement(NoticeBox, args, "Programs using these rules are updated automatically.");
|
|
53
66
|
Valid.args = {
|
|
54
67
|
valid: true,
|
|
@@ -67,7 +80,6 @@ Error.args = {
|
|
|
67
80
|
error: true,
|
|
68
81
|
title: "Access rules for this instance are set to 'Public'"
|
|
69
82
|
};
|
|
70
|
-
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.';
|
|
71
83
|
export const WithALongTitle = args => /*#__PURE__*/React.createElement(NoticeBox, args, "The title text will wrap");
|
|
72
84
|
WithALongTitle.args = {
|
|
73
85
|
error: true,
|
|
@@ -77,10 +89,37 @@ export const WithoutTitle = () => /*#__PURE__*/React.createElement(NoticeBox, nu
|
|
|
77
89
|
export const TitleOnly = () => /*#__PURE__*/React.createElement(NoticeBox, {
|
|
78
90
|
title: "This noticebox has only a title"
|
|
79
91
|
});
|
|
80
|
-
|
|
92
|
+
const RtlNoticeTemplate = args => /*#__PURE__*/React.createElement("div", {
|
|
81
93
|
dir: "rtl"
|
|
82
94
|
}, /*#__PURE__*/React.createElement(NoticeBox, args, "\u0647\u0630\u0647 \u0631\u0633\u0627\u0644\u0629 \u0628\u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629."));
|
|
95
|
+
export const RTL = RtlNoticeTemplate.bind({});
|
|
83
96
|
RTL.args = {
|
|
84
97
|
title: 'مثال على العنوان'
|
|
85
98
|
};
|
|
86
|
-
RTL.storyName = 'RTL Text';
|
|
99
|
+
RTL.storyName = 'RTL Text';
|
|
100
|
+
export const Dense = DashboardUpdateTemplate.bind({});
|
|
101
|
+
Dense.args = {
|
|
102
|
+
dense: true,
|
|
103
|
+
title: 'Your database was updated in the last 24 hours'
|
|
104
|
+
};
|
|
105
|
+
export const DenseWithALongTitle = args => /*#__PURE__*/React.createElement(NoticeBox, args, "The title text will wrap");
|
|
106
|
+
DenseWithALongTitle.args = {
|
|
107
|
+
dense: true,
|
|
108
|
+
error: true,
|
|
109
|
+
title: text
|
|
110
|
+
};
|
|
111
|
+
export const DenseWithoutTitle = args => /*#__PURE__*/React.createElement(NoticeBox, args, "This noticebox does not have a title.");
|
|
112
|
+
DenseWithoutTitle.args = {
|
|
113
|
+
dense: true
|
|
114
|
+
};
|
|
115
|
+
export const DenseTitleOnly = args => /*#__PURE__*/React.createElement(NoticeBox, args);
|
|
116
|
+
DenseTitleOnly.args = {
|
|
117
|
+
dense: true,
|
|
118
|
+
title: 'This noticebox has only a title'
|
|
119
|
+
};
|
|
120
|
+
export const DenseRTL = RtlNoticeTemplate.bind({});
|
|
121
|
+
DenseRTL.args = {
|
|
122
|
+
dense: true,
|
|
123
|
+
title: 'مثال على العنوان'
|
|
124
|
+
};
|
|
125
|
+
DenseRTL.storyName = 'Dense RTL Text';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/notice-box",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.15.1",
|
|
4
4
|
"description": "UI NoticeBox",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2/ui-constants": "10.
|
|
37
|
-
"@dhis2/ui-icons": "10.
|
|
36
|
+
"@dhis2/ui-constants": "10.15.1",
|
|
37
|
+
"@dhis2/ui-icons": "10.15.1",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|
package/types/index.d.ts
CHANGED
|
@@ -4,6 +4,14 @@ export interface NoticeBoxProps {
|
|
|
4
4
|
children?: React.ReactNode
|
|
5
5
|
className?: string
|
|
6
6
|
dataTest?: string
|
|
7
|
+
/**
|
|
8
|
+
* Uses 16px icons and tighter padding and internal spacing
|
|
9
|
+
*/
|
|
10
|
+
dense?: boolean
|
|
11
|
+
/**
|
|
12
|
+
* Replaces the default status icon; `error`, `warning`, and `valid` still set box colors
|
|
13
|
+
*/
|
|
14
|
+
icon?: React.ReactNode
|
|
7
15
|
/**
|
|
8
16
|
* Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props
|
|
9
17
|
*/
|