@dhis2-ui/alert 9.11.0 → 9.11.1-beta.2
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 +7 -18
- package/build/cjs/alert-bar/actions.js +5 -18
- package/build/cjs/alert-bar/alert-bar.e2e.stories.js +67 -0
- package/build/cjs/alert-bar/alert-bar.js +6 -40
- package/build/cjs/alert-bar/{alert-bar.stories.js → alert-bar.prod.stories.js} +34 -39
- package/build/cjs/alert-bar/alert-bar.styles.js +3 -7
- package/build/cjs/alert-bar/dismiss.js +2 -10
- package/build/cjs/alert-bar/features/api/index.js +1 -2
- package/build/cjs/alert-bar/features/common/index.js +0 -1
- package/build/cjs/alert-bar/features/hide/index.js +5 -3
- package/build/cjs/alert-bar/features/hide.feature +2 -2
- package/build/cjs/alert-bar/icon.js +3 -24
- package/build/cjs/alert-bar/index.js +0 -1
- package/build/cjs/alert-bar/message.js +1 -7
- package/build/cjs/alert-stack/alert-stack.e2e.stories.js +21 -0
- package/build/cjs/alert-stack/alert-stack.js +3 -12
- package/build/cjs/alert-stack/{alert-stack.stories.js → alert-stack.prod.stories.js} +10 -13
- package/build/cjs/alert-stack/features/render_children/alertbars.js +0 -1
- package/build/cjs/alert-stack/index.js +0 -1
- package/build/cjs/index.js +0 -2
- package/build/es/alert-bar/action.js +4 -9
- package/build/es/alert-bar/actions.js +3 -9
- package/build/es/alert-bar/{alert-bar.stories.e2e.js → alert-bar.e2e.stories.js} +19 -11
- package/build/es/alert-bar/alert-bar.js +3 -24
- package/build/es/alert-bar/{alert-bar.stories.js → alert-bar.prod.stories.js} +30 -10
- package/build/es/alert-bar/alert-bar.styles.js +1 -1
- package/build/es/alert-bar/dismiss.js +1 -3
- package/build/es/alert-bar/features/api/index.js +1 -1
- package/build/es/alert-bar/features/hide/index.js +5 -2
- package/build/es/alert-bar/features/hide.feature +2 -2
- package/build/es/alert-bar/icon.js +1 -12
- package/build/es/alert-bar/message.js +0 -2
- package/build/es/alert-stack/{alert-stack.stories.e2e.js → alert-stack.e2e.stories.js} +5 -3
- package/build/es/alert-stack/alert-stack.js +2 -2
- package/build/es/alert-stack/{alert-stack.stories.js → alert-stack.prod.stories.js} +9 -1
- package/package.json +7 -7
- package/build/cjs/alert-bar/alert-bar.stories.e2e.js +0 -51
- package/build/cjs/alert-stack/alert-stack.stories.e2e.js +0 -19
@@ -3,7 +3,6 @@ import { spacers } from '@dhis2/ui-constants';
|
|
3
3
|
import { IconCross24 } from '@dhis2/ui-icons';
|
4
4
|
import PropTypes from 'prop-types';
|
5
5
|
import React from 'react';
|
6
|
-
|
7
6
|
const Dismiss = _ref => {
|
8
7
|
let {
|
9
8
|
onClick,
|
@@ -16,9 +15,8 @@ const Dismiss = _ref => {
|
|
16
15
|
}, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
|
17
16
|
id: "1892313381",
|
18
17
|
dynamic: [spacers.dp16]
|
19
|
-
}, [
|
18
|
+
}, [`div.__jsx-style-dynamic-selector{margin-inline-start:${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
19
|
};
|
21
|
-
|
22
20
|
Dismiss.propTypes = {
|
23
21
|
dataTest: PropTypes.string.isRequired,
|
24
22
|
onClick: PropTypes.func.isRequired
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('an AlertBar with onHidden handler is rendered', () => {
|
3
|
-
cy.visitStory('AlertBar', 'With
|
3
|
+
cy.visitStory('AlertBar', 'With on hidden');
|
4
4
|
});
|
5
5
|
Given('an AlertBar with disabled icon is rendered', () => {
|
6
6
|
cy.visitStory('AlertBar', 'Disabled icon');
|
@@ -13,8 +13,11 @@ Given('a permanent AlertBar with actions is rendered', () => {
|
|
13
13
|
When('the user clicks on the "Cancel" button', () => {
|
14
14
|
cy.get('[data-test="dhis2-uicore-alertbar-action"]:contains("Cancel")').click();
|
15
15
|
});
|
16
|
-
When('the user click a button which toggles the hidden prop', () => {
|
17
|
-
cy.get('button').click();
|
16
|
+
When('the user click a button which toggles the hidden prop to false', () => {
|
17
|
+
cy.get('button:contains("Show")').click();
|
18
|
+
});
|
19
|
+
When('the user click a button which toggles the hidden prop to true', () => {
|
20
|
+
cy.get('button:contains("Hide")').click();
|
18
21
|
});
|
19
22
|
When('the custom duration has passed', () => {
|
20
23
|
cy.wait(2000);
|
@@ -19,8 +19,8 @@ Feature: Hiding the AlertBar
|
|
19
19
|
Given a permanent AlertBar with hidden and onHidden is rendered
|
20
20
|
Then the AlertBar is not rendered
|
21
21
|
And the onHidden handler is not called
|
22
|
-
When the user click a button which toggles the hidden prop
|
22
|
+
When the user click a button which toggles the hidden prop to false
|
23
23
|
Then the AlertBar is rendered
|
24
|
-
When the user click a button which toggles the hidden prop
|
24
|
+
When the user click a button which toggles the hidden prop to true
|
25
25
|
Then the AlertBar is not rendered
|
26
26
|
And the onHidden handler is called
|
@@ -4,7 +4,6 @@ import { spacers, colors } from '@dhis2/ui-constants';
|
|
4
4
|
import { IconErrorFilled24, IconInfoFilled24, IconWarningFilled24, IconCheckmark24 } from '@dhis2/ui-icons';
|
5
5
|
import PropTypes from 'prop-types';
|
6
6
|
import React from 'react';
|
7
|
-
|
8
7
|
const StatusIcon = _ref => {
|
9
8
|
let {
|
10
9
|
error,
|
@@ -13,34 +12,28 @@ const StatusIcon = _ref => {
|
|
13
12
|
info,
|
14
13
|
defaultTo
|
15
14
|
} = _ref;
|
16
|
-
|
17
15
|
if (error) {
|
18
16
|
return /*#__PURE__*/React.createElement(IconErrorFilled24, {
|
19
17
|
color: colors.white
|
20
18
|
});
|
21
19
|
}
|
22
|
-
|
23
20
|
if (warning) {
|
24
21
|
return /*#__PURE__*/React.createElement(IconWarningFilled24, {
|
25
22
|
color: colors.yellow900
|
26
23
|
});
|
27
24
|
}
|
28
|
-
|
29
25
|
if (valid) {
|
30
26
|
return /*#__PURE__*/React.createElement(IconCheckmark24, {
|
31
27
|
color: colors.white
|
32
28
|
});
|
33
29
|
}
|
34
|
-
|
35
30
|
if (info) {
|
36
31
|
return /*#__PURE__*/React.createElement(IconInfoFilled24, {
|
37
32
|
color: colors.white
|
38
33
|
});
|
39
34
|
}
|
40
|
-
|
41
35
|
return defaultTo;
|
42
36
|
};
|
43
|
-
|
44
37
|
StatusIcon.defaultProps = {
|
45
38
|
defaultTo: null
|
46
39
|
};
|
@@ -51,7 +44,6 @@ StatusIcon.propTypes = {
|
|
51
44
|
valid: PropTypes.bool,
|
52
45
|
warning: PropTypes.bool
|
53
46
|
};
|
54
|
-
|
55
47
|
const Icon = _ref2 => {
|
56
48
|
let {
|
57
49
|
icon,
|
@@ -61,11 +53,9 @@ const Icon = _ref2 => {
|
|
61
53
|
info,
|
62
54
|
dataTest
|
63
55
|
} = _ref2;
|
64
|
-
|
65
56
|
if (icon === false) {
|
66
57
|
return null;
|
67
58
|
}
|
68
|
-
|
69
59
|
return /*#__PURE__*/React.createElement("div", {
|
70
60
|
"data-test": dataTest,
|
71
61
|
className: _JSXStyle.dynamic([["719386130", [spacers.dp16]]])
|
@@ -77,9 +67,8 @@ const Icon = _ref2 => {
|
|
77
67
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
78
68
|
id: "719386130",
|
79
69
|
dynamic: [spacers.dp16]
|
80
|
-
}, [
|
70
|
+
}, [`div.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp16};}`]));
|
81
71
|
};
|
82
|
-
|
83
72
|
const iconPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.element]);
|
84
73
|
const alertStatePropType = mutuallyExclusive(['success', 'warning', 'critical', 'info'], PropTypes.bool);
|
85
74
|
Icon.propTypes = {
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
2
2
|
import PropTypes from 'prop-types';
|
3
3
|
import React from 'react';
|
4
|
-
|
5
4
|
const Message = _ref => {
|
6
5
|
let {
|
7
6
|
children
|
@@ -12,7 +11,6 @@ const Message = _ref => {
|
|
12
11
|
id: "2181391309"
|
13
12
|
}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
|
14
13
|
};
|
15
|
-
|
16
14
|
Message.propTypes = {
|
17
15
|
children: PropTypes.string.isRequired
|
18
16
|
};
|
@@ -1,11 +1,13 @@
|
|
1
|
-
import { storiesOf } from '@storybook/react';
|
2
1
|
import React from 'react';
|
3
2
|
import { AlertBar } from '../alert-bar/index.js';
|
4
3
|
import { AlertStack } from './alert-stack.js';
|
5
|
-
|
4
|
+
export default {
|
5
|
+
title: 'AlertStack'
|
6
|
+
};
|
7
|
+
export const Default = () => /*#__PURE__*/React.createElement(AlertStack, null, /*#__PURE__*/React.createElement(AlertBar, {
|
6
8
|
permanent: true
|
7
9
|
}, "Message"), /*#__PURE__*/React.createElement(AlertBar, {
|
8
10
|
permanent: true
|
9
11
|
}, "Message"), /*#__PURE__*/React.createElement(AlertBar, {
|
10
12
|
permanent: true
|
11
|
-
}, "Message"))
|
13
|
+
}, "Message"));
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
2
|
-
import { Portal } from '@dhis2-ui/portal';
|
3
2
|
import { layers } from '@dhis2/ui-constants';
|
3
|
+
import { Portal } from '@dhis2-ui/portal';
|
4
4
|
import cx from 'classnames';
|
5
5
|
import PropTypes from 'prop-types';
|
6
6
|
import React from 'react';
|
@@ -16,7 +16,7 @@ export const AlertStack = _ref => {
|
|
16
16
|
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
17
17
|
id: "1009591311",
|
18
18
|
dynamic: [layers.alert]
|
19
|
-
}, [
|
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:${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,7 +1,15 @@
|
|
1
1
|
import React, { useEffect } from 'react';
|
2
2
|
import { AlertBar } from '../alert-bar/index.js';
|
3
3
|
import { AlertStack } from './alert-stack.js';
|
4
|
-
const description =
|
4
|
+
const description = `
|
5
|
+
A container for Alert Bars.
|
6
|
+
|
7
|
+
_**Note:** The demos on this page may be slow._
|
8
|
+
|
9
|
+
\`\`\`js
|
10
|
+
import { AlertStack } from '@dhis2/ui'
|
11
|
+
\`\`\`
|
12
|
+
`;
|
5
13
|
export default {
|
6
14
|
title: 'Alert Stack',
|
7
15
|
component: AlertStack,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@dhis2-ui/alert",
|
3
|
-
"version": "9.11.
|
3
|
+
"version": "9.11.1-beta.2",
|
4
4
|
"description": "UI Alert",
|
5
5
|
"repository": {
|
6
6
|
"type": "git",
|
@@ -22,20 +22,20 @@
|
|
22
22
|
"access": "public"
|
23
23
|
},
|
24
24
|
"scripts": {
|
25
|
-
"start": "
|
25
|
+
"start": "storybook dev -c ../../storybook/config --port 5000",
|
26
26
|
"build": "d2-app-scripts build",
|
27
27
|
"test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
|
28
28
|
},
|
29
29
|
"peerDependencies": {
|
30
|
-
"react": "^16.
|
31
|
-
"react-dom": "^16.
|
30
|
+
"react": "^16.13",
|
31
|
+
"react-dom": "^16.13",
|
32
32
|
"styled-jsx": "^4"
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
36
|
-
"@dhis2-ui/portal": "9.11.
|
37
|
-
"@dhis2/ui-constants": "9.11.
|
38
|
-
"@dhis2/ui-icons": "9.11.
|
36
|
+
"@dhis2-ui/portal": "9.11.1-beta.2",
|
37
|
+
"@dhis2/ui-constants": "9.11.1-beta.2",
|
38
|
+
"@dhis2/ui-icons": "9.11.1-beta.2",
|
39
39
|
"classnames": "^2.3.1",
|
40
40
|
"prop-types": "^15.7.2"
|
41
41
|
},
|
@@ -1,51 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _react = require("@storybook/react");
|
4
|
-
|
5
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
6
|
-
|
7
|
-
var _index = require("./index.js");
|
8
|
-
|
9
|
-
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); }
|
10
|
-
|
11
|
-
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; }
|
12
|
-
|
13
|
-
window.onHidden = window.Cypress && window.Cypress.cy.stub();
|
14
|
-
(0, _react.storiesOf)('AlertBar', module).add('Default', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, null, "Default")).add('Custom duration', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
15
|
-
duration: 2000
|
16
|
-
}, "Custom duration")).add('Permanent with actions', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
17
|
-
permanent: true,
|
18
|
-
actions: [{
|
19
|
-
label: 'Save',
|
20
|
-
onClick: () => {}
|
21
|
-
}, {
|
22
|
-
label: 'Cancel',
|
23
|
-
onClick: () => {}
|
24
|
-
}]
|
25
|
-
}, "With Actions")).add('Disabled icon', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
26
|
-
icon: false
|
27
|
-
}, "Message")).add('Custom icon', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
28
|
-
icon: /*#__PURE__*/_react2.default.createElement("span", null, "Custom icon")
|
29
|
-
}, "Message")).add('With message', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, null, "With a message")).add('With onHidden', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
30
|
-
onHidden: window.onHidden
|
31
|
-
}, "Message")).add('Permanent', () => /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
32
|
-
permanent: true
|
33
|
-
}, "Message")).add('Hidden prop', () => {
|
34
|
-
const [hidden, setHidden] = (0, _react2.useState)(true);
|
35
|
-
|
36
|
-
const toggleVisibility = () => setHidden(prevHidden => !prevHidden);
|
37
|
-
|
38
|
-
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("button", {
|
39
|
-
style: {
|
40
|
-
display: 'block',
|
41
|
-
position: 'fixed',
|
42
|
-
bottom: 150,
|
43
|
-
left: 10
|
44
|
-
},
|
45
|
-
onClick: toggleVisibility
|
46
|
-
}, hidden ? 'Show' : 'Hide'), /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
47
|
-
permanent: true,
|
48
|
-
hidden: hidden,
|
49
|
-
onHidden: window.onHidden
|
50
|
-
}, "Short text"));
|
51
|
-
});
|
@@ -1,19 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _react = require("@storybook/react");
|
4
|
-
|
5
|
-
var _react2 = _interopRequireDefault(require("react"));
|
6
|
-
|
7
|
-
var _index = require("../alert-bar/index.js");
|
8
|
-
|
9
|
-
var _alertStack = require("./alert-stack.js");
|
10
|
-
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
12
|
-
|
13
|
-
(0, _react.storiesOf)('AlertStack', module).add('Default', () => /*#__PURE__*/_react2.default.createElement(_alertStack.AlertStack, null, /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
14
|
-
permanent: true
|
15
|
-
}, "Message"), /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
16
|
-
permanent: true
|
17
|
-
}, "Message"), /*#__PURE__*/_react2.default.createElement(_index.AlertBar, {
|
18
|
-
permanent: true
|
19
|
-
}, "Message")));
|