@dhis2-ui/alert 9.2.0 → 9.3.0-alpha.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/alert-bar/action.js +3 -3
- package/build/cjs/alert-bar/actions.js +3 -3
- package/build/cjs/alert-bar/alert-bar.stories.js +18 -1
- package/build/cjs/alert-bar/alert-bar.styles.js +2 -2
- package/build/cjs/alert-bar/dismiss.js +3 -3
- package/build/cjs/alert-bar/icon.js +3 -3
- package/build/cjs/alert-stack/alert-stack.js +3 -3
- package/build/cjs/alert-stack/alert-stack.stories.js +31 -4
- package/build/es/alert-bar/action.js +3 -3
- package/build/es/alert-bar/actions.js +3 -3
- package/build/es/alert-bar/alert-bar.stories.js +14 -0
- package/build/es/alert-bar/alert-bar.styles.js +2 -2
- package/build/es/alert-bar/dismiss.js +3 -3
- package/build/es/alert-bar/icon.js +3 -3
- package/build/es/alert-stack/alert-stack.js +3 -3
- package/build/es/alert-stack/alert-stack.stories.js +24 -2
- package/package.json +4 -4
|
@@ -35,11 +35,11 @@ class Action extends _react.Component {
|
|
|
35
35
|
return /*#__PURE__*/_react.default.createElement("span", {
|
|
36
36
|
onClick: this.onClick,
|
|
37
37
|
"data-test": this.props.dataTest,
|
|
38
|
-
className: _style.default.dynamic([["
|
|
38
|
+
className: _style.default.dynamic([["918162538", [_uiConstants.spacers.dp12]]])
|
|
39
39
|
}, this.props.label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "918162538",
|
|
41
41
|
dynamic: [_uiConstants.spacers.dp12]
|
|
42
|
-
}, ["span.__jsx-style-dynamic-selector{margin-
|
|
42
|
+
}, ["span.__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp12, ";-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}"), "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
}
|
|
@@ -33,16 +33,16 @@ const Actions = _ref => {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
36
|
-
className: _style.default.dynamic([["
|
|
36
|
+
className: _style.default.dynamic([["793807948", [_uiConstants.spacers.dp48, _uiConstants.spacers.dp12]]])
|
|
37
37
|
}, actions.map(action => /*#__PURE__*/_react.default.createElement(_action.Action, _extends({
|
|
38
38
|
key: action.label
|
|
39
39
|
}, action, {
|
|
40
40
|
hide: hide,
|
|
41
41
|
dataTest: "".concat(dataTest, "-action")
|
|
42
42
|
}))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
43
|
-
id: "
|
|
43
|
+
id: "793807948",
|
|
44
44
|
dynamic: [_uiConstants.spacers.dp48, _uiConstants.spacers.dp12]
|
|
45
|
-
}, ["div.__jsx-style-dynamic-selector{margin-
|
|
45
|
+
}, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(_uiConstants.spacers.dp48, ";margin-inline-end:-").concat(_uiConstants.spacers.dp12, ";}")]));
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
exports.Actions = Actions;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WithActionsAndInsufficientSpace = exports.WithActions = exports.TextOverflow = exports.States = exports.Icons = exports.HiddenProp = exports.Default = exports.AutoHiding = void 0;
|
|
6
|
+
exports.default = exports.WithActionsAndInsufficientSpace = exports.WithActions = exports.TextOverflow = exports.States = exports.RTL = exports.Icons = exports.HiddenProp = exports.Default = exports.AutoHiding = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiIcons = require("@dhis2/ui-icons");
|
|
9
9
|
|
|
@@ -104,6 +104,23 @@ const States = () => /*#__PURE__*/_react.default.createElement(_react.default.Fr
|
|
|
104
104
|
|
|
105
105
|
exports.States = States;
|
|
106
106
|
|
|
107
|
+
const RTL = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
108
|
+
dir: "rtl"
|
|
109
|
+
}, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
110
|
+
permanent: true
|
|
111
|
+
}, "Default (info)"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
112
|
+
permanent: true,
|
|
113
|
+
success: true
|
|
114
|
+
}, "Success"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
115
|
+
permanent: true,
|
|
116
|
+
warning: true
|
|
117
|
+
}, "Warning"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
118
|
+
permanent: true,
|
|
119
|
+
critical: true
|
|
120
|
+
}, "Critical")));
|
|
121
|
+
|
|
122
|
+
exports.RTL = RTL;
|
|
123
|
+
|
|
107
124
|
const AutoHiding = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
108
125
|
permanent: true
|
|
109
126
|
}, "Permanent never auto-hides"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
@@ -9,7 +9,7 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
|
|
10
10
|
const ANIMATION_TIME = 350;
|
|
11
11
|
exports.ANIMATION_TIME = ANIMATION_TIME;
|
|
12
|
-
const _defaultExport = ["div.jsx-
|
|
13
|
-
_defaultExport.__hash = "
|
|
12
|
+
const _defaultExport = ["div.jsx-1114274882{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:".concat(_uiConstants.elevations.e300, ";padding-top:").concat(_uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp8, ";padding-bottom:").concat(_uiConstants.spacers.dp8, ";padding-inline-start:").concat(_uiConstants.spacers.dp24, ";margin-bottom:").concat(_uiConstants.spacers.dp16, ";max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}"), "div.info.jsx-1114274882{background-color:".concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.white, ";}"), "div.success.jsx-1114274882{background-color:".concat(_uiConstants.colors.green800, ";color:").concat(_uiConstants.colors.white, ";}"), "div.warning.jsx-1114274882{background-color:".concat(_uiConstants.colors.yellow300, ";color:").concat(_uiConstants.colors.yellow900, ";}"), "div.critical.jsx-1114274882{background-color:".concat(_uiConstants.colors.red800, ";color:").concat(_uiConstants.colors.white, ";}"), "@-webkit-keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@-webkit-keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "@keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "div.inViewport.jsx-1114274882{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slidein-jsx-1114274882;animation-name:slidein-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}"), "div.jsx-1114274882{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slideout-jsx-1114274882;animation-name:slideout-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}")];
|
|
13
|
+
_defaultExport.__hash = "1114274882";
|
|
14
14
|
var _default = _defaultExport;
|
|
15
15
|
exports.default = _default;
|
|
@@ -25,11 +25,11 @@ const Dismiss = _ref => {
|
|
|
25
25
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
26
26
|
onClick: onClick,
|
|
27
27
|
"data-test": dataTest,
|
|
28
|
-
className: _style.default.dynamic([["
|
|
28
|
+
className: _style.default.dynamic([["1892313381", [_uiConstants.spacers.dp16]]])
|
|
29
29
|
}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
30
|
-
id: "
|
|
30
|
+
id: "1892313381",
|
|
31
31
|
dynamic: [_uiConstants.spacers.dp16]
|
|
32
|
-
}, ["div.__jsx-style-dynamic-selector{margin-
|
|
32
|
+
}, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(_uiConstants.spacers.dp16, ";min-height:32px;min-width:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:5px;}"), "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
exports.Dismiss = Dismiss;
|
|
@@ -82,16 +82,16 @@ const Icon = _ref2 => {
|
|
|
82
82
|
|
|
83
83
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
84
84
|
"data-test": dataTest,
|
|
85
|
-
className: _style.default.dynamic([["
|
|
85
|
+
className: _style.default.dynamic([["719386130", [_uiConstants.spacers.dp16]]])
|
|
86
86
|
}, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : /*#__PURE__*/_react.default.createElement(StatusIcon, {
|
|
87
87
|
valid: success,
|
|
88
88
|
error: critical,
|
|
89
89
|
warning: warning,
|
|
90
90
|
info: info
|
|
91
91
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
92
|
-
id: "
|
|
92
|
+
id: "719386130",
|
|
93
93
|
dynamic: [_uiConstants.spacers.dp16]
|
|
94
|
-
}, ["div.__jsx-style-dynamic-selector{margin-
|
|
94
|
+
}, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(_uiConstants.spacers.dp16, ";}")]));
|
|
95
95
|
};
|
|
96
96
|
|
|
97
97
|
exports.Icon = Icon;
|
|
@@ -27,11 +27,11 @@ const AlertStack = _ref => {
|
|
|
27
27
|
} = _ref;
|
|
28
28
|
return /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
29
29
|
"data-test": dataTest,
|
|
30
|
-
className: _style.default.dynamic([["
|
|
30
|
+
className: _style.default.dynamic([["1009591311", [_uiConstants.layers.alert]]]) + " " + ((0, _classnames.default)(className) || "")
|
|
31
31
|
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
32
|
-
id: "
|
|
32
|
+
id: "1009591311",
|
|
33
33
|
dynamic: [_uiConstants.layers.alert]
|
|
34
|
-
}, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;
|
|
34
|
+
}, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:".concat(_uiConstants.layers.alert, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}"), "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
exports.AlertStack = AlertStack;
|
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.RTL = exports.Default = void 0;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
10
|
var _index = require("../alert-bar/index.js");
|
|
11
11
|
|
|
12
12
|
var _alertStack = require("./alert-stack.js");
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
17
|
|
|
16
18
|
const description = "\nA container for Alert Bars.\n\n_**Note:** The demos on this page may be slow._\n\n```js\nimport { AlertStack } from '@dhis2/ui'\n```\n";
|
|
17
19
|
var _default = {
|
|
@@ -43,4 +45,29 @@ const Default = args => /*#__PURE__*/_react.default.createElement(_alertStack.Al
|
|
|
43
45
|
success: true
|
|
44
46
|
}, "Fourth notification - I am at the top"));
|
|
45
47
|
|
|
46
|
-
exports.Default = Default;
|
|
48
|
+
exports.Default = Default;
|
|
49
|
+
|
|
50
|
+
const RTL = args => {
|
|
51
|
+
(0, _react.useEffect)(() => {
|
|
52
|
+
document.body.dir = 'rtl';
|
|
53
|
+
return () => {
|
|
54
|
+
document.body.dir = 'ltr';
|
|
55
|
+
};
|
|
56
|
+
}, []);
|
|
57
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
+
dir: "rtl"
|
|
59
|
+
}, /*#__PURE__*/_react.default.createElement(_alertStack.AlertStack, args, /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
60
|
+
permanent: true
|
|
61
|
+
}, "First notification - I am at the bottom"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
62
|
+
permanent: true,
|
|
63
|
+
critical: true
|
|
64
|
+
}, "Second notification"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
65
|
+
permanent: true,
|
|
66
|
+
warning: true
|
|
67
|
+
}, "Third notification"), /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
68
|
+
permanent: true,
|
|
69
|
+
success: true
|
|
70
|
+
}, "Fourth notification - I am at the top")));
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
exports.RTL = RTL;
|
|
@@ -20,11 +20,11 @@ class Action extends Component {
|
|
|
20
20
|
return /*#__PURE__*/React.createElement("span", {
|
|
21
21
|
onClick: this.onClick,
|
|
22
22
|
"data-test": this.props.dataTest,
|
|
23
|
-
className: _JSXStyle.dynamic([["
|
|
23
|
+
className: _JSXStyle.dynamic([["918162538", [spacers.dp12]]])
|
|
24
24
|
}, this.props.label, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
25
|
-
id: "
|
|
25
|
+
id: "918162538",
|
|
26
26
|
dynamic: [spacers.dp12]
|
|
27
|
-
}, ["span.__jsx-style-dynamic-selector{margin-
|
|
27
|
+
}, ["span.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp12, ";-webkit-text-decoration:underline;text-decoration:underline;white-space:nowrap;}"), "span.__jsx-style-dynamic-selector:hover{cursor:pointer;}"]));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
}
|
|
@@ -20,16 +20,16 @@ const Actions = _ref => {
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
return /*#__PURE__*/React.createElement("div", {
|
|
23
|
-
className: _JSXStyle.dynamic([["
|
|
23
|
+
className: _JSXStyle.dynamic([["793807948", [spacers.dp48, spacers.dp12]]])
|
|
24
24
|
}, actions.map(action => /*#__PURE__*/React.createElement(Action, _extends({
|
|
25
25
|
key: action.label
|
|
26
26
|
}, action, {
|
|
27
27
|
hide: hide,
|
|
28
28
|
dataTest: "".concat(dataTest, "-action")
|
|
29
29
|
}))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
30
|
-
id: "
|
|
30
|
+
id: "793807948",
|
|
31
31
|
dynamic: [spacers.dp48, spacers.dp12]
|
|
32
|
-
}, ["div.__jsx-style-dynamic-selector{margin-
|
|
32
|
+
}, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(spacers.dp48, ";margin-inline-end:-").concat(spacers.dp12, ";}")]));
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
const actionsPropType = arrayWithLength(0, 2, PropTypes.shape({
|
|
@@ -82,6 +82,20 @@ export const States = () => /*#__PURE__*/React.createElement(React.Fragment, nul
|
|
|
82
82
|
permanent: true,
|
|
83
83
|
critical: true
|
|
84
84
|
}, "Critical"));
|
|
85
|
+
export const RTL = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
dir: "rtl"
|
|
87
|
+
}, /*#__PURE__*/React.createElement(AlertBar, {
|
|
88
|
+
permanent: true
|
|
89
|
+
}, "Default (info)"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
90
|
+
permanent: true,
|
|
91
|
+
success: true
|
|
92
|
+
}, "Success"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
93
|
+
permanent: true,
|
|
94
|
+
warning: true
|
|
95
|
+
}, "Warning"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
96
|
+
permanent: true,
|
|
97
|
+
critical: true
|
|
98
|
+
}, "Critical")));
|
|
85
99
|
export const AutoHiding = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AlertBar, {
|
|
86
100
|
permanent: true
|
|
87
101
|
}, "Permanent never auto-hides"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { colors, spacers, elevations } from '@dhis2/ui-constants';
|
|
2
2
|
export const ANIMATION_TIME = 350;
|
|
3
|
-
const _defaultExport = ["div.jsx-
|
|
4
|
-
_defaultExport.__hash = "
|
|
3
|
+
const _defaultExport = ["div.jsx-1114274882{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:".concat(elevations.e300, ";padding-top:").concat(spacers.dp8, ";padding-inline-end:").concat(spacers.dp8, ";padding-bottom:").concat(spacers.dp8, ";padding-inline-start:").concat(spacers.dp24, ";margin-bottom:").concat(spacers.dp16, ";max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}"), "div.info.jsx-1114274882{background-color:".concat(colors.grey900, ";color:").concat(colors.white, ";}"), "div.success.jsx-1114274882{background-color:".concat(colors.green800, ";color:").concat(colors.white, ";}"), "div.warning.jsx-1114274882{background-color:".concat(colors.yellow300, ";color:").concat(colors.yellow900, ";}"), "div.critical.jsx-1114274882{background-color:".concat(colors.red800, ";color:").concat(colors.white, ";}"), "@-webkit-keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@keyframes slidein-jsx-1114274882{from{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}", "@-webkit-keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "@keyframes slideout-jsx-1114274882{from{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}to{-webkit-transform:translateY(1000px);-ms-transform:translateY(1000px);transform:translateY(1000px);}}", "div.inViewport.jsx-1114274882{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slidein-jsx-1114274882;animation-name:slidein-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}"), "div.jsx-1114274882{-webkit-animation-duration:".concat(ANIMATION_TIME, "ms;animation-duration:").concat(ANIMATION_TIME, "ms;-webkit-animation-name:slideout-jsx-1114274882;animation-name:slideout-jsx-1114274882;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.6,1);animation-timing-function:cubic-bezier(0.4,0,0.6,1);}")];
|
|
4
|
+
_defaultExport.__hash = "1114274882";
|
|
5
5
|
export default _defaultExport;
|
|
@@ -12,11 +12,11 @@ const Dismiss = _ref => {
|
|
|
12
12
|
return /*#__PURE__*/React.createElement("div", {
|
|
13
13
|
onClick: onClick,
|
|
14
14
|
"data-test": dataTest,
|
|
15
|
-
className: _JSXStyle.dynamic([["
|
|
15
|
+
className: _JSXStyle.dynamic([["1892313381", [spacers.dp16]]])
|
|
16
16
|
}, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
17
|
-
id: "
|
|
17
|
+
id: "1892313381",
|
|
18
18
|
dynamic: [spacers.dp16]
|
|
19
|
-
}, ["div.__jsx-style-dynamic-selector{margin-
|
|
19
|
+
}, ["div.__jsx-style-dynamic-selector{margin-inline-start:".concat(spacers.dp16, ";min-height:32px;min-width:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:5px;}"), "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
Dismiss.propTypes = {
|
|
@@ -68,16 +68,16 @@ const Icon = _ref2 => {
|
|
|
68
68
|
|
|
69
69
|
return /*#__PURE__*/React.createElement("div", {
|
|
70
70
|
"data-test": dataTest,
|
|
71
|
-
className: _JSXStyle.dynamic([["
|
|
71
|
+
className: _JSXStyle.dynamic([["719386130", [spacers.dp16]]])
|
|
72
72
|
}, /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(StatusIcon, {
|
|
73
73
|
valid: success,
|
|
74
74
|
error: critical,
|
|
75
75
|
warning: warning,
|
|
76
76
|
info: info
|
|
77
77
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
78
|
-
id: "
|
|
78
|
+
id: "719386130",
|
|
79
79
|
dynamic: [spacers.dp16]
|
|
80
|
-
}, ["div.__jsx-style-dynamic-selector{margin-
|
|
80
|
+
}, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp16, ";}")]));
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
const iconPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.element]);
|
|
@@ -12,11 +12,11 @@ export const AlertStack = _ref => {
|
|
|
12
12
|
} = _ref;
|
|
13
13
|
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
|
|
14
14
|
"data-test": dataTest,
|
|
15
|
-
className: _JSXStyle.dynamic([["
|
|
15
|
+
className: _JSXStyle.dynamic([["1009591311", [layers.alert]]]) + " " + (cx(className) || "")
|
|
16
16
|
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
17
|
-
id: "
|
|
17
|
+
id: "1009591311",
|
|
18
18
|
dynamic: [layers.alert]
|
|
19
|
-
}, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;
|
|
19
|
+
}, ["div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:".concat(layers.alert, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}"), "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
|
|
20
20
|
};
|
|
21
21
|
AlertStack.defaultProps = {
|
|
22
22
|
dataTest: 'dhis2-uicore-alertstack'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
2
|
import { AlertBar } from '../alert-bar/index.js';
|
|
3
3
|
import { AlertStack } from './alert-stack.js';
|
|
4
4
|
const description = "\nA container for Alert Bars.\n\n_**Note:** The demos on this page may be slow._\n\n```js\nimport { AlertStack } from '@dhis2/ui'\n```\n";
|
|
@@ -27,4 +27,26 @@ export const Default = args => /*#__PURE__*/React.createElement(AlertStack, args
|
|
|
27
27
|
}, "Third notification"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
28
28
|
permanent: true,
|
|
29
29
|
success: true
|
|
30
|
-
}, "Fourth notification - I am at the top"));
|
|
30
|
+
}, "Fourth notification - I am at the top"));
|
|
31
|
+
export const RTL = args => {
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
document.body.dir = 'rtl';
|
|
34
|
+
return () => {
|
|
35
|
+
document.body.dir = 'ltr';
|
|
36
|
+
};
|
|
37
|
+
}, []);
|
|
38
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
dir: "rtl"
|
|
40
|
+
}, /*#__PURE__*/React.createElement(AlertStack, args, /*#__PURE__*/React.createElement(AlertBar, {
|
|
41
|
+
permanent: true
|
|
42
|
+
}, "First notification - I am at the bottom"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
43
|
+
permanent: true,
|
|
44
|
+
critical: true
|
|
45
|
+
}, "Second notification"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
46
|
+
permanent: true,
|
|
47
|
+
warning: true
|
|
48
|
+
}, "Third notification"), /*#__PURE__*/React.createElement(AlertBar, {
|
|
49
|
+
permanent: true,
|
|
50
|
+
success: true
|
|
51
|
+
}, "Fourth notification - I am at the top")));
|
|
52
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/alert",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.3.0-alpha.1",
|
|
4
4
|
"description": "UI Alert",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/portal": "9.
|
|
37
|
-
"@dhis2/ui-constants": "9.
|
|
38
|
-
"@dhis2/ui-icons": "9.
|
|
36
|
+
"@dhis2-ui/portal": "9.3.0-alpha.1",
|
|
37
|
+
"@dhis2/ui-constants": "9.3.0-alpha.1",
|
|
38
|
+
"@dhis2/ui-icons": "9.3.0-alpha.1",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"prop-types": "^15.7.2"
|
|
41
41
|
},
|