@widergy/energy-ui 3.5.3 → 3.5.5

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/UTHeader/index.js +8 -5
  3. package/dist/components/UTHeader/styles.module.scss +23 -4
  4. package/dist/components/UTWorkflowContainer/versions/V1/index.js +7 -5
  5. package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss +12 -7
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [3.5.5](https://github.com/widergy/energy-ui/compare/v3.5.4...v3.5.5) (2024-04-10)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * workflow scroll fixes ([#442](https://github.com/widergy/energy-ui/issues/442)) ([f8a7cdd](https://github.com/widergy/energy-ui/commit/f8a7cdde69835699ebf7332d5dfef620570691e4))
7
+
8
+ ## [3.5.4](https://github.com/widergy/energy-ui/compare/v3.5.3...v3.5.4) (2024-04-09)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * workflow styles fixes ([#441](https://github.com/widergy/energy-ui/issues/441)) ([fc72abd](https://github.com/widergy/energy-ui/commit/fc72abd82423a7767b36c2bbccfc461c033f5ce5))
14
+
1
15
  ## [3.5.3](https://github.com/widergy/energy-ui/compare/v3.5.2...v3.5.3) (2024-03-27)
2
16
 
3
17
 
package/dist/components/UTHeader/index.js CHANGED
@@ -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)), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/_react.default.createElement(_UTBanner.default, {
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,
package/dist/components/UTHeader/styles.module.scss CHANGED
@@ -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
- padding-top: 24px;
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 0 32px;
30
+ padding: 0;
22
31
  width: 100%;
23
32
  }
24
33
 
@@ -27,7 +36,10 @@
27
36
  }
28
37
 
29
38
  .bannerContainer {
30
- margin-bottom: 32px;
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: center;
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
+ }
package/dist/components/UTWorkflowContainer/versions/V1/index.js CHANGED
@@ -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
  };
package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss CHANGED
@@ -18,13 +18,11 @@
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
  height: 100%;
21
- padding: 0 32px 16px;
22
- width: calc(100% - 64px);
21
+ width: 100%;
22
+ overflow-y: scroll;
23
23
 
24
24
  @media #{$tablet-mobile} {
25
25
  align-self: center;
26
- padding: 0 16px 16px;
27
- width: calc(100% - 32px);
28
26
  }
29
27
  }
30
28
 
@@ -32,17 +30,24 @@
32
30
  .childrenContainer {
33
31
  @media #{$tablet-mobile} {
34
32
  align-self: center;
35
- max-width: 500px;
36
33
  width: 100%;
37
34
  }
38
35
  }
39
36
 
40
37
  .headerContainer {
41
- max-width: 500px;
38
+ width: 100%;
42
39
  }
43
40
 
44
41
  .childrenContainer {
45
- 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 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.5.3",
3
+ "version": "3.5.5",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",