@widergy/energy-ui 3.6.1 → 3.6.3
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/CHANGELOG.md +14 -0
- package/dist/components/UTHeader/styles.module.scss +2 -2
- package/dist/components/UTSelectableCard/README.md +1 -1
- package/dist/components/UTSelectableCard/assets/check.svg +3 -0
- package/dist/components/UTSelectableCard/assets/help.svg +3 -0
- package/dist/components/UTSelectableCard/constants.js +9 -20
- package/dist/components/UTSelectableCard/index.js +56 -42
- package/dist/components/UTSelectableCard/theme.js +107 -70
- package/dist/components/UTWorkflowContainer/versions/V1/constants.js +21 -0
- package/dist/components/UTWorkflowContainer/versions/V1/index.js +7 -2
- package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss +30 -2
- package/dist/components/UTWorkflowContainer/versions/V1/theme.js +4 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [3.6.3](https://github.com/widergy/energy-ui/compare/v3.6.2...v3.6.3) (2024-04-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* fix border ut selectable card ([#440](https://github.com/widergy/energy-ui/issues/440)) ([2110181](https://github.com/widergy/energy-ui/commit/211018199963b26c6c34ee4e00c14572cbdf888a))
|
|
7
|
+
|
|
8
|
+
## [3.6.2](https://github.com/widergy/energy-ui/compare/v3.6.1...v3.6.2) (2024-04-19)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* workflow body variants ([#444](https://github.com/widergy/energy-ui/issues/444)) ([3fcfaa8](https://github.com/widergy/energy-ui/commit/3fcfaa86b517afd8030316d6b271b7ff2d1aea85))
|
|
14
|
+
|
|
1
15
|
## [3.6.1](https://github.com/widergy/energy-ui/compare/v3.6.0...v3.6.1) (2024-04-19)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
justify-content: space-between;
|
|
13
13
|
margin: 0 auto;
|
|
14
|
-
max-width:
|
|
14
|
+
max-width: 1200px;
|
|
15
15
|
padding: 24px 32px 32px;
|
|
16
16
|
|
|
17
17
|
@media #{$tablet-mobile} {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
.bannerContainer {
|
|
39
39
|
border-radius: 8px;
|
|
40
40
|
margin-bottom: 0;
|
|
41
|
-
max-width:
|
|
41
|
+
max-width: calc(800px - 32px);
|
|
42
42
|
width: 100%;
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -8,7 +8,7 @@ Selectable card component.
|
|
|
8
8
|
| Name | Type | Default |Description |
|
|
9
9
|
|-----------------|------------------------------------------|-----------|----------------------------------------------------------------------|
|
|
10
10
|
| aditionalInfo | object: { title: '', description: ''} | | Aditional information to show in the card |
|
|
11
|
-
|
|
|
11
|
+
| appareance | string: 'white' \| 'gray' \| | white | The card appareance. |
|
|
12
12
|
| checkIcon | bool | true | Indicates if on "active" status shows a check icon |
|
|
13
13
|
| classes | string | | Classes returned by UTLabel's own [theme](./theme.js#)retrieveStyle. |
|
|
14
14
|
| className | string | | Additional classes. |
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7071 6.29289C21.0976 6.68342 21.0976 7.31658 20.7071 7.70711L10.7071 17.7071C10.3166 18.0976 9.68342 18.0976 9.29289 17.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929C4.68342 10.9024 5.31658 10.9024 5.70711 11.2929L10 15.5858L19.2929 6.29289C19.6834 5.90237 20.3166 5.90237 20.7071 6.29289Z" fill="#0136E7"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0001 3.33341C6.31818 3.33341 3.33341 6.31818 3.33341 10.0001C3.33341 13.682 6.31818 16.6667 10.0001 16.6667C13.682 16.6667 16.6667 13.682 16.6667 10.0001C16.6667 6.31818 13.682 3.33341 10.0001 3.33341ZM1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001ZM8.72905 5.28749C9.14521 5.08156 9.6035 4.97505 10.0678 4.97634C10.5322 4.97763 10.9899 5.08668 11.4049 5.29491C11.8199 5.50314 12.1809 5.80487 12.4595 6.17633C12.7381 6.54779 12.9267 6.97886 13.0104 7.43558C13.0941 7.89231 13.0706 8.36222 12.9418 8.80834C12.8131 9.25445 12.5825 9.66459 12.2683 10.0065C11.9541 10.3483 11.5648 10.6126 11.1311 10.7784C11.124 10.7811 11.117 10.7837 11.1099 10.7862C11.0246 10.8162 10.9515 10.873 10.9014 10.9482C10.8513 11.0233 10.827 11.1127 10.8321 11.2029C10.8581 11.6624 10.5068 12.056 10.0473 12.0821C9.58777 12.1081 9.19415 11.7568 9.16809 11.2973C9.14251 10.8464 9.26414 10.3994 9.51464 10.0237C9.76252 9.65183 10.1233 9.36967 10.5437 9.21866C10.7332 9.14477 10.9034 9.02847 11.0412 8.87861C11.1808 8.72667 11.2833 8.54438 11.3405 8.34611C11.3978 8.14784 11.4082 7.93898 11.371 7.736C11.3338 7.53301 11.25 7.34142 11.1262 7.17633C11.0024 7.01123 10.8419 6.87713 10.6574 6.78459C10.473 6.69204 10.2696 6.64357 10.0632 6.643C9.85684 6.64243 9.65316 6.68977 9.46819 6.78129C9.28323 6.87281 9.12203 7.00602 8.9973 7.17042C8.71912 7.53708 8.19638 7.6088 7.82972 7.33062C7.46307 7.05244 7.39135 6.5297 7.66953 6.16304C7.95019 5.79313 8.31288 5.49341 8.72905 5.28749ZM10.0001 13.3334C10.4603 13.3334 10.8334 13.7065 10.8334 14.1667V14.1751C10.8334 14.6353 10.4603 15.0084 10.0001 15.0084C9.53984 15.0084 9.16675 14.6353 9.16675 14.1751V14.1667C9.16675 13.7065 9.53984 13.3334 10.0001 13.3334Z" fill="#091E42"/>
|
|
3
|
+
</svg>
|
|
@@ -3,23 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const ACCENT = exports.ACCENT = 'accent';
|
|
16
|
-
const DARK = exports.DARK = 'dark';
|
|
17
|
-
const GRAY = exports.GRAY = 'gray';
|
|
18
|
-
const LIGHT = exports.LIGHT = 'light';
|
|
19
|
-
|
|
20
|
-
// Label shades
|
|
21
|
-
|
|
22
|
-
const shade01 = exports.shade01 = '01';
|
|
23
|
-
const shade03 = exports.shade03 = '03';
|
|
24
|
-
const shade04 = exports.shade04 = '04';
|
|
25
|
-
const shade05 = exports.shade05 = '05';
|
|
6
|
+
exports.SIZES = exports.APPEARANCES = void 0;
|
|
7
|
+
const APPEARANCES = exports.APPEARANCES = {
|
|
8
|
+
GRAY: 'gray',
|
|
9
|
+
WHITE: 'white'
|
|
10
|
+
};
|
|
11
|
+
const SIZES = exports.SIZES = {
|
|
12
|
+
MEDIUM: 'medium',
|
|
13
|
+
SMALL: 'small'
|
|
14
|
+
};
|
|
@@ -4,24 +4,49 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = require("prop-types");
|
|
9
|
-
var _HelpOutlineOutlined = _interopRequireDefault(require("@material-ui/icons/HelpOutlineOutlined"));
|
|
10
|
-
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
|
|
11
9
|
var _object = require("@widergy/web-utils/lib/object");
|
|
12
10
|
var _UTLabel = _interopRequireDefault(require("../UTLabel"));
|
|
13
11
|
var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
|
|
14
|
-
var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
|
|
15
12
|
var _WithTheme = _interopRequireDefault(require("../WithTheme"));
|
|
16
|
-
var _theme = require("./theme");
|
|
17
13
|
var _constants = require("./constants");
|
|
14
|
+
var _theme = require("./theme");
|
|
18
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
var CheckIcon = function CheckIcon(props) {
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
18
|
+
fillRule: "evenodd",
|
|
19
|
+
clipRule: "evenodd",
|
|
20
|
+
d: "M20.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L10 15.586l9.293-9.293a1 1 0 0 1 1.414 0Z",
|
|
21
|
+
fill: "#0136E7"
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
CheckIcon.defaultProps = {
|
|
25
|
+
width: "24",
|
|
26
|
+
height: "24",
|
|
27
|
+
viewBox: "0 0 24 24",
|
|
28
|
+
fill: "none",
|
|
29
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
30
|
+
};
|
|
31
|
+
var HelpIcon = function HelpIcon(props) {
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
33
|
+
fillRule: "evenodd",
|
|
34
|
+
clipRule: "evenodd",
|
|
35
|
+
d: "M10 3.333a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334ZM1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm7.062-4.713a3 3 0 1 1 2.38 5.5.416.416 0 0 0-.277.416.833.833 0 0 1-1.664.094 2.083 2.083 0 0 1 1.376-2.078A1.334 1.334 0 1 0 8.997 7.17.833.833 0 1 1 7.67 6.163a3 3 0 0 1 1.06-.876ZM10 13.333c.46 0 .833.373.833.834v.008a.833.833 0 0 1-1.666 0v-.008c0-.46.373-.834.833-.834Z",
|
|
36
|
+
fill: "#091E42"
|
|
37
|
+
}));
|
|
38
|
+
};
|
|
39
|
+
HelpIcon.defaultProps = {
|
|
40
|
+
width: "20",
|
|
41
|
+
height: "20",
|
|
42
|
+
viewBox: "0 0 20 20",
|
|
43
|
+
fill: "none",
|
|
44
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
45
|
+
};
|
|
21
46
|
const UTSelectableCard = _ref => {
|
|
22
47
|
let {
|
|
23
48
|
aditionalInfo = {},
|
|
24
|
-
|
|
49
|
+
appearance = _constants.APPEARANCES.WHITE,
|
|
25
50
|
checkIcon = true,
|
|
26
51
|
classes,
|
|
27
52
|
classNames = {},
|
|
@@ -30,73 +55,62 @@ const UTSelectableCard = _ref => {
|
|
|
30
55
|
Icon,
|
|
31
56
|
onClick,
|
|
32
57
|
selected = false,
|
|
33
|
-
size =
|
|
58
|
+
size = _constants.SIZES.MEDIUM,
|
|
34
59
|
titleText,
|
|
35
60
|
tooltip
|
|
36
61
|
} = _ref;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const selectedItemShade = selected && (state === _constants.HOVER_STATE || state === _constants.PRESSED_STATE || state === _constants.ACTIVE_STATE) && _constants.shade05;
|
|
40
|
-
const apareanceGrayPressed = apareance === _constants.GRAY && pressedAndSelected;
|
|
41
|
-
return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
|
|
62
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
63
|
+
role: "button",
|
|
42
64
|
onClick: () => !disabled && onClick(),
|
|
43
|
-
|
|
44
|
-
onMouseUp: () => !disabled && setState(_constants.ACTIVE_STATE),
|
|
45
|
-
onMouseOver: () => !disabled && selected && setState(_constants.HOVER_STATE),
|
|
46
|
-
onMouseOut: () => !disabled && selected && setState(_constants.ACTIVE_STATE),
|
|
47
|
-
className: "".concat(classes.item, " ").concat(classes["".concat(apareance, "Apareance")], " ").concat(selected && classes["".concat(apareance, "SelectedContainer")], " ").concat(disabled && classes["".concat(apareance, "DisabledContainer")], " ").concat(classes["".concat(size, "Size")])
|
|
65
|
+
className: "\n ".concat(classes.item, "\n ").concat(disabled ? classes["".concat(appearance, "DisabledContainer")] : selected ? classes["".concat(appearance, "SelectedContainer")] : classes["".concat(appearance, "Apareance")], "\n ").concat(classes["".concat(size, "Size")], "\n ")
|
|
48
66
|
}, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
|
|
49
|
-
className: "".concat(classes.icon, " ").concat(
|
|
67
|
+
className: "".concat(classes.icon, " ").concat(classNames.icon)
|
|
50
68
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
-
className: classes.textContainer
|
|
69
|
+
className: "".concat(classes.textContainer, " ").concat(checkIcon && classes.textContainerWithCheckedIcon)
|
|
52
70
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
53
71
|
className: classes.column
|
|
54
72
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
55
73
|
className: classes.titleAndTooltip
|
|
56
74
|
}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
75
|
+
className: classes.titleText,
|
|
57
76
|
variant: "subtitle1",
|
|
58
|
-
weight: "medium"
|
|
59
|
-
colorTheme: apareanceGrayPressed ? _constants.LIGHT : disabled ? _constants.GRAY : selected ? _constants.ACCENT : _constants.DARK,
|
|
60
|
-
shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
|
|
77
|
+
weight: "medium"
|
|
61
78
|
}, titleText), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
|
|
62
79
|
content: tooltip
|
|
63
80
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
64
81
|
className: classes.tooltip
|
|
65
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
66
|
-
className: "".concat(classes.infoIcon
|
|
82
|
+
}, /*#__PURE__*/_react.default.createElement(HelpIcon, {
|
|
83
|
+
className: "".concat(classes.infoIcon)
|
|
67
84
|
})))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
68
|
-
|
|
69
|
-
shade: apareanceGrayPressed ? _constants.shade01 : selectedItemShade || _constants.shade04
|
|
85
|
+
className: classes.description
|
|
70
86
|
}, description)), !(0, _object.objectIsEmpty)(aditionalInfo) && /*#__PURE__*/_react.default.createElement("div", {
|
|
71
87
|
className: "".concat(classes.column, " ").concat(classes.aditionalInfoColumn)
|
|
72
88
|
}, !!aditionalInfo.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
73
|
-
|
|
89
|
+
className: classes.aditionalInfoTitle,
|
|
74
90
|
variant: "small",
|
|
75
|
-
weight: "semibold"
|
|
76
|
-
shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
|
|
91
|
+
weight: "semibold"
|
|
77
92
|
}, aditionalInfo.title), !!aditionalInfo.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
78
|
-
|
|
79
|
-
variant: "small"
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
className: "".concat(classes.checkIcon, " ").concat(apareanceGrayPressed && classes.grayPressedCheckIcon)
|
|
93
|
+
className: classes.aditionalInfoDescription,
|
|
94
|
+
variant: "small"
|
|
95
|
+
}, aditionalInfo.description))), checkIcon && selected && /*#__PURE__*/_react.default.createElement(CheckIcon, {
|
|
96
|
+
className: classes.checkIcon
|
|
83
97
|
}));
|
|
84
98
|
};
|
|
85
99
|
UTSelectableCard.propTypes = {
|
|
86
100
|
aditionalInfo: (0, _propTypes.shape)({
|
|
87
|
-
|
|
88
|
-
|
|
101
|
+
description: _propTypes.string,
|
|
102
|
+
title: _propTypes.string
|
|
89
103
|
}),
|
|
90
|
-
|
|
104
|
+
appearance: (0, _propTypes.oneOf)([_constants.APPEARANCES.GRAY, _constants.APPEARANCES.WHITE]),
|
|
91
105
|
checkIcon: _propTypes.bool,
|
|
92
106
|
classes: (0, _propTypes.objectOf)(_propTypes.string),
|
|
93
|
-
classNames: _propTypes.
|
|
107
|
+
classNames: (0, _propTypes.objectOf)(_propTypes.string),
|
|
94
108
|
description: _propTypes.string,
|
|
95
109
|
disabled: _propTypes.bool,
|
|
96
|
-
Icon: _propTypes.
|
|
110
|
+
Icon: _propTypes.elementType,
|
|
97
111
|
onClick: _propTypes.func,
|
|
98
112
|
selected: _propTypes.bool,
|
|
99
|
-
size: _propTypes.
|
|
113
|
+
size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
|
|
100
114
|
titleText: _propTypes.string,
|
|
101
115
|
tooltip: _propTypes.string
|
|
102
116
|
};
|
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.retrieveStyle = void 0;
|
|
7
|
+
var _shadowUtils = require("../../utils/shadowUtils");
|
|
7
8
|
const retrieveStyle = _ref => {
|
|
9
|
+
var _theme$Palette$shadow;
|
|
8
10
|
let {
|
|
9
11
|
theme
|
|
10
12
|
} = _ref;
|
|
@@ -17,17 +19,6 @@ const retrieveStyle = _ref => {
|
|
|
17
19
|
display: 'flex',
|
|
18
20
|
gridGap: '8px'
|
|
19
21
|
},
|
|
20
|
-
grayPressedCheckIcon: {
|
|
21
|
-
color: "".concat(theme.Palette.light['01'], " !important")
|
|
22
|
-
},
|
|
23
|
-
apareanceGrayPressedIcon: {
|
|
24
|
-
'& path': {
|
|
25
|
-
fill: "".concat(theme.Palette.light['01'], "!important")
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
checkIcon: {
|
|
29
|
-
color: theme.Palette.actions.accent['05']
|
|
30
|
-
},
|
|
31
22
|
column: {
|
|
32
23
|
alignSelf: 'center',
|
|
33
24
|
display: 'flex',
|
|
@@ -41,29 +32,6 @@ const retrieveStyle = _ref => {
|
|
|
41
32
|
display: 'flex',
|
|
42
33
|
gridGap: '8px'
|
|
43
34
|
},
|
|
44
|
-
disabledIcon: {
|
|
45
|
-
'& path': {
|
|
46
|
-
fill: "".concat(theme.Palette.gray['04'], " !important")
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
disabledTooltip: {
|
|
50
|
-
'& path': {
|
|
51
|
-
color: "".concat(theme.Palette.gray['04'], " !important")
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
icon: {
|
|
55
|
-
flexShrink: 0,
|
|
56
|
-
height: '36px',
|
|
57
|
-
width: '36px',
|
|
58
|
-
'& path': {
|
|
59
|
-
fill: theme.Palette.dark['05']
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
infoIcon: {
|
|
63
|
-
'& path': {
|
|
64
|
-
color: theme.Palette.dark['05']
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
35
|
item: {
|
|
68
36
|
alignItems: 'center',
|
|
69
37
|
borderRadius: '4px',
|
|
@@ -79,16 +47,6 @@ const retrieveStyle = _ref => {
|
|
|
79
47
|
mediumSize: {
|
|
80
48
|
padding: '24px'
|
|
81
49
|
},
|
|
82
|
-
selectedIcon: {
|
|
83
|
-
'& path': {
|
|
84
|
-
fill: theme.Palette.actions.accent['05']
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
selectedInfoIcon: {
|
|
88
|
-
'& path': {
|
|
89
|
-
color: theme.Palette.actions.accent['05']
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
50
|
smallSize: {
|
|
93
51
|
padding: '16px'
|
|
94
52
|
},
|
|
@@ -98,6 +56,9 @@ const retrieveStyle = _ref => {
|
|
|
98
56
|
justifyContent: 'space-between',
|
|
99
57
|
width: '100%'
|
|
100
58
|
},
|
|
59
|
+
textContainerWithCheckedIcon: {
|
|
60
|
+
minHeight: 24
|
|
61
|
+
},
|
|
101
62
|
titleAndTooltip: {
|
|
102
63
|
alignItems: 'center',
|
|
103
64
|
display: 'flex',
|
|
@@ -106,66 +67,142 @@ const retrieveStyle = _ref => {
|
|
|
106
67
|
tooltip: {
|
|
107
68
|
display: 'flex'
|
|
108
69
|
},
|
|
109
|
-
|
|
110
|
-
|
|
70
|
+
checkIcon: {
|
|
71
|
+
flexShrink: 0
|
|
72
|
+
},
|
|
73
|
+
icon: {
|
|
74
|
+
flexShrink: 0,
|
|
75
|
+
height: '36px',
|
|
76
|
+
width: '36px'
|
|
77
|
+
},
|
|
78
|
+
infoIcon: {
|
|
79
|
+
flexShrink: 0
|
|
80
|
+
},
|
|
81
|
+
titleText: {},
|
|
82
|
+
description: {},
|
|
83
|
+
aditionalInfoTitle: {},
|
|
84
|
+
aditionalInfoDescription: {},
|
|
85
|
+
// White apareance
|
|
111
86
|
whiteApareance: {
|
|
112
87
|
backgroundColor: theme.Palette.light['01'],
|
|
113
|
-
boxShadow:
|
|
88
|
+
boxShadow: (0, _shadowUtils.getShadow)({
|
|
89
|
+
color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
|
|
90
|
+
level: 1
|
|
91
|
+
}),
|
|
92
|
+
outline: "2px solid transparent",
|
|
93
|
+
'& $titleText, & $aditionalInfoTitle': {
|
|
94
|
+
color: theme.Palette.dark['05']
|
|
95
|
+
},
|
|
96
|
+
'& $icon path, & $infoIcon path': {
|
|
97
|
+
fill: theme.Palette.dark['05']
|
|
98
|
+
},
|
|
99
|
+
'& $description, & $aditionalInfoDescription': {
|
|
100
|
+
color: theme.Palette.gray['04']
|
|
101
|
+
},
|
|
114
102
|
'&:hover': {
|
|
115
103
|
backgroundColor: theme.Palette.light['03'],
|
|
116
104
|
boxShadow: 'none'
|
|
117
105
|
},
|
|
118
106
|
'&:active': {
|
|
119
107
|
backgroundColor: theme.Palette.light['04'],
|
|
120
|
-
boxShadow: 'none'
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
|
|
125
|
-
boxShadow: 'none',
|
|
126
|
-
'&:hover': {
|
|
127
|
-
cursor: 'default'
|
|
108
|
+
boxShadow: 'none',
|
|
109
|
+
'& $aditionalInfoDescription': {
|
|
110
|
+
color: theme.Palette.gray['03']
|
|
111
|
+
}
|
|
128
112
|
}
|
|
129
113
|
},
|
|
130
114
|
whiteSelectedContainer: {
|
|
131
|
-
border: "2px solid ".concat(theme.Palette.actions.accent['05']),
|
|
132
115
|
boxShadow: 'none',
|
|
116
|
+
outline: "2px solid ".concat(theme.Palette.actions.accent['05']),
|
|
117
|
+
'& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
|
|
118
|
+
color: theme.Palette.actions.accent['05']
|
|
119
|
+
},
|
|
120
|
+
'& $icon path, & $infoIcon path, & $checkIcon path': {
|
|
121
|
+
fill: theme.Palette.actions.accent['05']
|
|
122
|
+
},
|
|
133
123
|
'&:hover': {
|
|
134
124
|
backgroundColor: theme.Palette.actions.accent['01'],
|
|
135
|
-
|
|
125
|
+
outline: "2px solid ".concat(theme.Palette.actions.accent['05'])
|
|
136
126
|
},
|
|
137
127
|
'&:active': {
|
|
138
128
|
backgroundColor: theme.Palette.actions.accent['02'],
|
|
139
|
-
|
|
129
|
+
outline: "2px solid ".concat(theme.Palette.actions.accent['05'])
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
whiteDisabledContainer: {
|
|
133
|
+
backgroundColor: theme.Palette.light['03'],
|
|
134
|
+
boxShadow: 'none',
|
|
135
|
+
outline: "2px solid transparent",
|
|
136
|
+
'& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
|
|
137
|
+
color: theme.Palette.gray['04']
|
|
138
|
+
},
|
|
139
|
+
'& $icon path, & $infoIcon path, & $checkIcon path': {
|
|
140
|
+
fill: theme.Palette.gray['04']
|
|
141
|
+
},
|
|
142
|
+
'&:hover': {
|
|
143
|
+
backgroundColor: theme.Palette.light['03'],
|
|
144
|
+
outline: "2px solid transparent",
|
|
145
|
+
pointerEvents: 'none'
|
|
140
146
|
}
|
|
141
147
|
},
|
|
142
148
|
// Gray apareance
|
|
143
|
-
|
|
144
149
|
grayApareance: {
|
|
145
150
|
backgroundColor: theme.Palette.light['03'],
|
|
146
|
-
|
|
151
|
+
outline: "1px solid ".concat(theme.Palette.light['05']),
|
|
152
|
+
'& $titleText, & $aditionalInfoTitle': {
|
|
153
|
+
color: theme.Palette.dark['05']
|
|
154
|
+
},
|
|
155
|
+
'& $icon path, & $infoIcon path': {
|
|
156
|
+
fill: theme.Palette.dark['05']
|
|
157
|
+
},
|
|
158
|
+
'& $description, & $aditionalInfoDescription': {
|
|
159
|
+
color: theme.Palette.gray['04']
|
|
160
|
+
},
|
|
147
161
|
'&:hover': {
|
|
148
162
|
backgroundColor: theme.Palette.light['04']
|
|
149
163
|
},
|
|
150
164
|
'&:active': {
|
|
151
|
-
backgroundColor: theme.Palette.light['05']
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
border: "2px solid ".concat(theme.Palette.light['05']),
|
|
156
|
-
'&:hover': {
|
|
157
|
-
backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
|
|
158
|
-
cursor: 'default'
|
|
165
|
+
backgroundColor: theme.Palette.light['05'],
|
|
166
|
+
'& $aditionalInfoDescription': {
|
|
167
|
+
color: theme.Palette.gray['03']
|
|
168
|
+
}
|
|
159
169
|
}
|
|
160
170
|
},
|
|
161
171
|
graySelectedContainer: {
|
|
162
172
|
backgroundColor: theme.Palette.actions.accent['01'],
|
|
163
|
-
|
|
173
|
+
outline: "2px solid ".concat(theme.Palette.actions.accent['03']),
|
|
174
|
+
'& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
|
|
175
|
+
color: theme.Palette.actions.accent['05']
|
|
176
|
+
},
|
|
177
|
+
'& $icon path, & $infoIcon path, & $checkIcon path': {
|
|
178
|
+
fill: theme.Palette.actions.accent['05']
|
|
179
|
+
},
|
|
164
180
|
'&:hover': {
|
|
165
181
|
backgroundColor: theme.Palette.actions.accent['02']
|
|
166
182
|
},
|
|
167
183
|
'&:active': {
|
|
168
|
-
backgroundColor: theme.Palette.actions.accent['03']
|
|
184
|
+
backgroundColor: theme.Palette.actions.accent['03'],
|
|
185
|
+
'& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
|
|
186
|
+
color: theme.Palette.light['01']
|
|
187
|
+
},
|
|
188
|
+
'& $icon path, & $infoIcon path, & $checkIcon path': {
|
|
189
|
+
fill: theme.Palette.light['01']
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
grayDisabledContainer: {
|
|
194
|
+
backgroundColor: theme.Palette.light['03'],
|
|
195
|
+
outline: "2px solid ".concat(theme.Palette.light['05']),
|
|
196
|
+
'& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
|
|
197
|
+
color: theme.Palette.gray['04']
|
|
198
|
+
},
|
|
199
|
+
'& $icon path, & $infoIcon path, & $checkIcon path': {
|
|
200
|
+
fill: theme.Palette.gray['04']
|
|
201
|
+
},
|
|
202
|
+
'&:hover': {
|
|
203
|
+
backgroundColor: theme.Palette.light['03'],
|
|
204
|
+
cursor: 'default',
|
|
205
|
+
pointerEvents: 'none'
|
|
169
206
|
}
|
|
170
207
|
}
|
|
171
208
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.childrenContentStyle = exports.VARIANTS = void 0;
|
|
7
|
+
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const CENTERED = 'centered';
|
|
10
|
+
const FULL_WIDTH = 'fullWidth';
|
|
11
|
+
const DEFAULT = 'default';
|
|
12
|
+
const VARIANTS = exports.VARIANTS = {
|
|
13
|
+
CENTERED,
|
|
14
|
+
FULL_WIDTH,
|
|
15
|
+
DEFAULT
|
|
16
|
+
};
|
|
17
|
+
const childrenContentStyle = exports.childrenContentStyle = {
|
|
18
|
+
[VARIANTS.CENTERED]: _stylesModule.default.childrenContentCentered,
|
|
19
|
+
[VARIANTS.FULL_WIDTH]: _stylesModule.default.childrenContentFullWidth,
|
|
20
|
+
[VARIANTS.DEFAULT]: _stylesModule.default.childrenContent
|
|
21
|
+
};
|
|
@@ -17,6 +17,7 @@ var _NavActions = _interopRequireDefault(require("./components/NavActions"));
|
|
|
17
17
|
var _types = require("./types");
|
|
18
18
|
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
19
19
|
var _theme = require("./theme");
|
|
20
|
+
var _constants = require("./constants");
|
|
20
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
22
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -43,6 +44,7 @@ const UTWorkflowContainer = _ref => {
|
|
|
43
44
|
subtitle,
|
|
44
45
|
tagline,
|
|
45
46
|
title,
|
|
47
|
+
variant = _constants.VARIANTS.DEFAULT,
|
|
46
48
|
withIcon = false,
|
|
47
49
|
withStepperPadding = true
|
|
48
50
|
} = _ref;
|
|
@@ -77,8 +79,10 @@ const UTWorkflowContainer = _ref => {
|
|
|
77
79
|
tagline: title && tagline,
|
|
78
80
|
title
|
|
79
81
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
80
|
-
className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer)
|
|
81
|
-
},
|
|
82
|
+
className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth))
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
84
|
+
className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
|
|
85
|
+
}, children))), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
|
|
82
86
|
className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
|
|
83
87
|
}, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
|
|
84
88
|
className: _stylesModule.default.mobileCheckboxContainer
|
|
@@ -128,6 +132,7 @@ UTWorkflowContainer.propTypes = {
|
|
|
128
132
|
subtitle: _propTypes.string,
|
|
129
133
|
tagline: _propTypes.string,
|
|
130
134
|
title: _propTypes.string,
|
|
135
|
+
variant: _propTypes.string,
|
|
131
136
|
withIcon: _propTypes.bool,
|
|
132
137
|
withStepperPadding: _propTypes.bool
|
|
133
138
|
};
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: column;
|
|
20
20
|
height: 100%;
|
|
21
|
+
overflow-y: auto;
|
|
21
22
|
width: 100%;
|
|
22
|
-
overflow-y: scroll;
|
|
23
23
|
|
|
24
24
|
@media #{$tablet-mobile} {
|
|
25
25
|
align-self: center;
|
|
@@ -39,8 +39,9 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.childrenContainer {
|
|
42
|
+
flex: 1;
|
|
42
43
|
margin: 0 auto;
|
|
43
|
-
max-width:
|
|
44
|
+
max-width: 1200px;
|
|
44
45
|
padding: 0 32px 16px;
|
|
45
46
|
width: calc(100% - 64px);
|
|
46
47
|
|
|
@@ -50,6 +51,33 @@
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
|
|
54
|
+
.childrenContent {
|
|
55
|
+
max-width: 800px;
|
|
56
|
+
|
|
57
|
+
@media #{$tablet-mobile} {
|
|
58
|
+
margin: 0 auto;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.childrenContentCentered {
|
|
63
|
+
align-items: center;
|
|
64
|
+
display: flex;
|
|
65
|
+
height: 100%;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
margin: 0 auto;
|
|
68
|
+
max-width: 500px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.childrenContainerFullWidth {
|
|
72
|
+
max-width: none;
|
|
73
|
+
padding: 24px 32px 16px;
|
|
74
|
+
width: calc(100% - 64px);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.childrenContentFullWidth {
|
|
78
|
+
max-width: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
53
81
|
.progress {
|
|
54
82
|
height: 8px;
|
|
55
83
|
}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.retrieveStyle = void 0;
|
|
7
7
|
var _shadowUtils = require("../../../../utils/shadowUtils");
|
|
8
8
|
const retrieveStyle = _ref => {
|
|
9
|
-
var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2;
|
|
9
|
+
var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2, _theme$Palette3;
|
|
10
10
|
let {
|
|
11
11
|
theme
|
|
12
12
|
} = _ref;
|
|
@@ -26,6 +26,9 @@ const retrieveStyle = _ref => {
|
|
|
26
26
|
},
|
|
27
27
|
colorPrimary: {
|
|
28
28
|
backgroundColor: "".concat(((_theme$UTWorkflowCont3 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont3 === void 0 || (_theme$UTWorkflowCont3 = _theme$UTWorkflowCont3.progress) === null || _theme$UTWorkflowCont3 === void 0 ? void 0 : _theme$UTWorkflowCont3.color) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['04']), " !important")
|
|
29
|
+
},
|
|
30
|
+
childrenContainerFullWidth: {
|
|
31
|
+
borderTop: "1px solid ".concat((_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['04'])
|
|
29
32
|
}
|
|
30
33
|
};
|
|
31
34
|
};
|