@widergy/energy-ui 3.5.3 → 3.5.4
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 +7 -0
- package/dist/components/UTHeader/index.js +8 -5
- package/dist/components/UTHeader/styles.module.scss +23 -4
- package/dist/components/UTWorkflowContainer/versions/V1/index.js +7 -5
- package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss +11 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [3.5.4](https://github.com/widergy/energy-ui/compare/v3.5.3...v3.5.4) (2024-04-09)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* workflow styles fixes ([#441](https://github.com/widergy/energy-ui/issues/441)) ([fc72abd](https://github.com/widergy/energy-ui/commit/fc72abd82423a7767b36c2bbccfc461c033f5ce5))
|
|
7
|
+
|
|
1
8
|
## [3.5.3](https://github.com/widergy/energy-ui/compare/v3.5.2...v3.5.3) (2024-03-27)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -51,6 +51,7 @@ const UTHeader = _ref => {
|
|
|
51
51
|
classes: themeClasses = {},
|
|
52
52
|
classNames,
|
|
53
53
|
helpText,
|
|
54
|
+
isLastStep,
|
|
54
55
|
requiredFieldInfo,
|
|
55
56
|
subtitle,
|
|
56
57
|
tagline,
|
|
@@ -82,7 +83,8 @@ const UTHeader = _ref => {
|
|
|
82
83
|
const Subtitle = renderComponent(subtitle, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
83
84
|
variant: "subtitle2",
|
|
84
85
|
colorTheme: "gray",
|
|
85
|
-
withMarkdown: true
|
|
86
|
+
withMarkdown: true,
|
|
87
|
+
className: _stylesModule.default.subtitle
|
|
86
88
|
}, subtitle));
|
|
87
89
|
const RequiredFieldInfo = renderComponent(requiredFieldInfo, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
88
90
|
variant: "small",
|
|
@@ -96,10 +98,10 @@ const UTHeader = _ref => {
|
|
|
96
98
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
97
99
|
className: classes.outerContainer
|
|
98
100
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
99
|
-
className: "".concat(_stylesModule.default.container, " ").concat(!hasHeader && _stylesModule.default.containerMargin)
|
|
101
|
+
className: "".concat(_stylesModule.default.container, " ").concat(!hasHeader && _stylesModule.default.containerMargin, " ")
|
|
100
102
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
101
103
|
className: "".concat(_stylesModule.default.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && _stylesModule.default.bottomPadding)
|
|
102
|
-
}, tagline && Tagline, /*#__PURE__*/_react.default.createElement("div", {
|
|
104
|
+
}, tagline && !isLastStep && Tagline, /*#__PURE__*/_react.default.createElement("div", {
|
|
103
105
|
className: _stylesModule.default.titles
|
|
104
106
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
105
107
|
className: _stylesModule.default.titleAndActionsContainer
|
|
@@ -131,7 +133,7 @@ const UTHeader = _ref => {
|
|
|
131
133
|
}),
|
|
132
134
|
menuPlacement: "bottom-end",
|
|
133
135
|
onClose: closeMenu
|
|
134
|
-
})))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText)
|
|
136
|
+
})))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/_react.default.createElement(_UTBanner.default, {
|
|
135
137
|
Icon: banner.Icon,
|
|
136
138
|
iconProps: {
|
|
137
139
|
height: BANNER_ICON_SIZE,
|
|
@@ -140,7 +142,7 @@ const UTHeader = _ref => {
|
|
|
140
142
|
classNames: {
|
|
141
143
|
infoContainer: _stylesModule.default.bannerContainer
|
|
142
144
|
}
|
|
143
|
-
}, banner.text));
|
|
145
|
+
}, banner.text)));
|
|
144
146
|
};
|
|
145
147
|
UTHeader.propTypes = {
|
|
146
148
|
actions: (0, _propTypes.arrayOf)(_propTypes.object),
|
|
@@ -151,6 +153,7 @@ UTHeader.propTypes = {
|
|
|
151
153
|
classes: (0, _propTypes.objectOf)(_propTypes.string),
|
|
152
154
|
classNames: (0, _propTypes.objectOf)(_propTypes.string),
|
|
153
155
|
helpText: _propTypes.string,
|
|
156
|
+
isLastStep: _propTypes.bool,
|
|
154
157
|
requiredFieldInfo: _propTypes.string,
|
|
155
158
|
subtitle: _propTypes.string,
|
|
156
159
|
tagline: _propTypes.string,
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import '../../scss/variables/mediaQueries.module.scss';
|
|
2
|
+
|
|
1
3
|
.actionsContainer {
|
|
2
4
|
align-items: flex-start;
|
|
3
5
|
display: flex;
|
|
@@ -6,8 +8,15 @@
|
|
|
6
8
|
|
|
7
9
|
.container {
|
|
8
10
|
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
9
12
|
justify-content: space-between;
|
|
10
|
-
|
|
13
|
+
margin: 0 auto;
|
|
14
|
+
max-width: 1232px;
|
|
15
|
+
padding: 24px 32px 32px;
|
|
16
|
+
|
|
17
|
+
@media #{$tablet-mobile} {
|
|
18
|
+
padding: 24px 16px;
|
|
19
|
+
}
|
|
11
20
|
}
|
|
12
21
|
|
|
13
22
|
.containerMargin {
|
|
@@ -18,7 +27,7 @@
|
|
|
18
27
|
display: flex;
|
|
19
28
|
flex-direction: column;
|
|
20
29
|
gap: 16px;
|
|
21
|
-
padding: 0
|
|
30
|
+
padding: 0;
|
|
22
31
|
width: 100%;
|
|
23
32
|
}
|
|
24
33
|
|
|
@@ -27,7 +36,10 @@
|
|
|
27
36
|
}
|
|
28
37
|
|
|
29
38
|
.bannerContainer {
|
|
30
|
-
|
|
39
|
+
border-radius: 8px;
|
|
40
|
+
margin-bottom: 0;
|
|
41
|
+
max-width: 700px;
|
|
42
|
+
width: 100%;
|
|
31
43
|
}
|
|
32
44
|
|
|
33
45
|
.stepTitle {
|
|
@@ -40,8 +52,15 @@
|
|
|
40
52
|
}
|
|
41
53
|
|
|
42
54
|
.titleAndActionsContainer {
|
|
43
|
-
align-items:
|
|
55
|
+
align-items: flex-start;
|
|
44
56
|
display: flex;
|
|
57
|
+
grid-gap: 16px;
|
|
45
58
|
justify-content: space-between;
|
|
46
59
|
margin-bottom: 12px;
|
|
47
60
|
}
|
|
61
|
+
|
|
62
|
+
.title,
|
|
63
|
+
.subtitle {
|
|
64
|
+
max-width: 500px;
|
|
65
|
+
overflow-wrap: break-word;
|
|
66
|
+
}
|
|
@@ -43,7 +43,6 @@ const UTWorkflowContainer = _ref => {
|
|
|
43
43
|
subtitle,
|
|
44
44
|
tagline,
|
|
45
45
|
title,
|
|
46
|
-
TitleIcon,
|
|
47
46
|
withIcon = false,
|
|
48
47
|
withStepperPadding = true
|
|
49
48
|
} = _ref;
|
|
@@ -52,6 +51,10 @@ const UTWorkflowContainer = _ref => {
|
|
|
52
51
|
const {
|
|
53
52
|
isMobileOrTablet
|
|
54
53
|
} = (0, _useScreenSize.useScreenSize)();
|
|
54
|
+
const isBackButtonHidden = backButton === null || backButton === void 0 ? void 0 : backButton.isHidden;
|
|
55
|
+
const isNextButtonHidden = nextButton === null || nextButton === void 0 ? void 0 : nextButton.isHidden;
|
|
56
|
+
const isLastStep = stepsCount && stepsCount === currentStep;
|
|
57
|
+
const isNavHidden = isLastStep && isBackButtonHidden && isNextButtonHidden;
|
|
55
58
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
56
59
|
className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
|
|
57
60
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -68,14 +71,14 @@ const UTWorkflowContainer = _ref => {
|
|
|
68
71
|
outerContainer: "".concat(_stylesModule.default.headerContainer, " ").concat(classes.headerContainer)
|
|
69
72
|
},
|
|
70
73
|
helpText: title && helpText,
|
|
74
|
+
isLastStep: isNavHidden,
|
|
71
75
|
requiredFieldInfo: title && requiredFieldInfo,
|
|
72
76
|
subtitle: title && subtitle,
|
|
73
77
|
tagline: title && tagline,
|
|
74
|
-
title
|
|
75
|
-
TitleIcon
|
|
78
|
+
title
|
|
76
79
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
77
80
|
className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer)
|
|
78
|
-
}, children)), /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
+
}, children)), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
|
|
79
82
|
className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
|
|
80
83
|
}, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
|
|
81
84
|
className: _stylesModule.default.mobileCheckboxContainer
|
|
@@ -125,7 +128,6 @@ UTWorkflowContainer.propTypes = {
|
|
|
125
128
|
subtitle: _propTypes.string,
|
|
126
129
|
tagline: _propTypes.string,
|
|
127
130
|
title: _propTypes.string,
|
|
128
|
-
TitleIcon: _propTypes.element,
|
|
129
131
|
withIcon: _propTypes.bool,
|
|
130
132
|
withStepperPadding: _propTypes.bool
|
|
131
133
|
};
|
|
@@ -18,13 +18,10 @@
|
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: column;
|
|
20
20
|
height: 100%;
|
|
21
|
-
|
|
22
|
-
width: calc(100% - 64px);
|
|
21
|
+
width: 100%;
|
|
23
22
|
|
|
24
23
|
@media #{$tablet-mobile} {
|
|
25
24
|
align-self: center;
|
|
26
|
-
padding: 0 16px 16px;
|
|
27
|
-
width: calc(100% - 32px);
|
|
28
25
|
}
|
|
29
26
|
}
|
|
30
27
|
|
|
@@ -32,17 +29,25 @@
|
|
|
32
29
|
.childrenContainer {
|
|
33
30
|
@media #{$tablet-mobile} {
|
|
34
31
|
align-self: center;
|
|
35
|
-
max-width: 500px;
|
|
36
32
|
width: 100%;
|
|
37
33
|
}
|
|
38
34
|
}
|
|
39
35
|
|
|
40
36
|
.headerContainer {
|
|
41
|
-
|
|
37
|
+
width: 100%;
|
|
42
38
|
}
|
|
43
39
|
|
|
44
40
|
.childrenContainer {
|
|
45
41
|
height: inherit;
|
|
42
|
+
margin: 0 auto;
|
|
43
|
+
max-width: 1232px;
|
|
44
|
+
padding: 0 32px 16px;
|
|
45
|
+
width: calc(100% - 64px);
|
|
46
|
+
|
|
47
|
+
@media #{$tablet-mobile} {
|
|
48
|
+
padding: 0 16px 16px;
|
|
49
|
+
width: calc(100% - 32px);
|
|
50
|
+
}
|
|
46
51
|
}
|
|
47
52
|
|
|
48
53
|
.progress {
|