@widergy/energy-ui 3.4.2 → 3.4.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.4.3](https://github.com/widergy/energy-ui/compare/v3.4.2...v3.4.3) (2024-02-28)
+
+
+### Bug Fixes
+
+* utworkflowcontainer fixes ([#426](https://github.com/widergy/energy-ui/issues/426)) ([d2c5e3f](https://github.com/widergy/energy-ui/commit/d2c5e3f589dc85187b2c1d783b631a2dc8687d86))
+
 ## [3.4.2](https://github.com/widergy/energy-ui/compare/v3.4.1...v3.4.2) (2024-02-27)
 
 

package/dist/components/UTBanner/index.js

@@ -32,7 +32,7 @@ const UTBanner = _ref => {
 UTBanner.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  Icon: _propTypes.element,
+  Icon: _propTypes.object,
   iconProps: _propTypes.object
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBanner);

package/dist/components/UTHeader/index.js

@@ -61,12 +61,13 @@ const UTHeader = _ref => {
   const mainAction = actions.find(action => action.main);
   const moreActions = actions.filter((_action, index) => index !== actions.indexOf(mainAction));
   const MainIcon = (mainAction === null || mainAction === void 0 ? void 0 : mainAction.Icon) || Edit;
+  const hasHeader = tagline || title || subtitle || requiredFieldInfo || helpText || banner;
   const [menuAnchor, setMenuAnchor] = (0, _react.useState)();
   const openMenu = event => setMenuAnchor(event.target);
   const closeMenu = () => setMenuAnchor();
   const BANNER_ICON_SIZE = '20px';
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
+    className: "".concat(_stylesModule.default.container, " ").concat(!hasHeader && _stylesModule.default.containerMargin)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && _stylesModule.default.bottomPadding)
   }, tagline && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -134,7 +135,7 @@ const UTHeader = _ref => {
 UTHeader.propTypes = {
   actions: (0, _propTypes.arrayOf)(_propTypes.object),
   banner: (0, _propTypes.shape)({
-    Icon: _propTypes.element,
+    Icon: _propTypes.object,
     text: _propTypes.string
   }),
   classes: (0, _propTypes.objectOf)(_propTypes.string),

package/dist/components/UTHeader/styles.module.scss

@@ -10,6 +10,10 @@
   justify-content: space-between;
 }
 
+.containerMargin {
+  margin-bottom: 32px;
+}
+
 .header {
   display: flex;
   flex-direction: column;

package/dist/components/UTStepper/components/Connectors/index.js

@@ -19,8 +19,10 @@ const Connectors = _ref => {
   const connectorMaxWidth = "".concat(100 / (numberOfSteps - 1), "%");
   const containerMaxWidth = "".concat(100 - 100 / numberOfSteps, "%");
   const connectors = new Array(numberOfSteps - 1).fill(null).map((key, index) => /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n        ".concat(_stylesModule.default.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      "),
-    key: key,
+    className: "\n        ".concat(_stylesModule.default.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      ")
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: "connector_".concat(index),
     style: {
       maxWidth: withPadding ? connectorMaxWidth : null,
       height: 2

package/dist/components/UTStepper/components/Step/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _commonTypes = require("../../../../types/commonTypes");
 var _constants = require("../../constants");
+var _useScreenSize = require("../../../../utils/useScreenSize");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CompletedIcon = function CompletedIcon(props) {
@@ -35,13 +36,16 @@ const Step = _ref => {
   const stageCompleted = isCompleted(stage === null || stage === void 0 ? void 0 : stage.id);
   const stageActive = isActive(stage === null || stage === void 0 ? void 0 : stage.id);
   const CustomIcon = stage.Icon;
+  const {
+    isMobileOrTablet
+  } = (0, _useScreenSize.useScreenSize)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "\n        ".concat(_stylesModule.default["stepContainer".concat(size)], " ").concat(classes["stepContainer".concat(size)], "\n        ").concat(stageActive ? classes["active".concat(size)] : '', " \n        ").concat(stageCompleted ? classes.completed : '', "\n      ")
   }, stageCompleted && /*#__PURE__*/_react.default.createElement(CompletedIcon, {
     className: _stylesModule.default["checkIcon".concat(size)]
   }), !stageCompleted && size === _constants.SIZES.LARGE && /*#__PURE__*/_react.default.createElement(CustomIcon, {
     className: "\n            ".concat(stageActive ? classes.activeIcon : classes.nextIcxon, " \n            ").concat(_stylesModule.default["customIcon".concat(size)], "\n          ")
-  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }), (stageActive || !isMobileOrTablet) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     variant: "xsmall",
     className: "\n            ".concat(_stylesModule.default.label, "\n            ").concat(stageActive || stageCompleted ? classes.coloredLabel : '', "\n        "),
     colorTheme: !stageActive && !stageCompleted ? 'gray' : null

package/dist/components/UTStepper/index.js

@@ -36,6 +36,7 @@ const UTStepper = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: withPadding ? _stylesModule.default.paddingContainer : _stylesModule.default.container
   }, orderedStages.map(stage => /*#__PURE__*/_react.default.createElement(_Step.default, {
+    key: stage.id,
     classes,
     withPadding,
     size,
@@ -53,11 +54,7 @@ UTStepper.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   currentStage: _propTypes.number,
-  stages: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    id: _propTypes.number,
-    label: _propTypes.string,
-    Icon: _propTypes.elementType
-  })),
+  stages: _propTypes.object,
   stepperSize: (0, _propTypes.oneOf)([_constants.SIZES.LARGE, _constants.SIZES.SMALL]),
   withPadding: _propTypes.bool
 };

package/dist/components/UTWorkflowContainer/versions/V1/components/NavActions/index.js

@@ -28,11 +28,10 @@ const NavActions = _ref => {
     isMobileOrTablet
   } = (0, _useScreenSize.useScreenSize)();
   const isBackButtonHidden = currentStep === 1 && !backButton.isVisible || backButton.isHidden;
-  const hideActions = isBackButtonHidden && nextButton.isHidden;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n      ".concat(_stylesModule.default.actionsContainer, "\n      ").concat(hideActions ? _stylesModule.default.hidden : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.actionsGroup
+    className: _stylesModule.default.actionsContainer
+  }, (!isMobileOrTablet || !isBackButtonHidden) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.actionsGroup, " ").concat(!isBackButtonHidden && _stylesModule.default.actionsGroupResponsive)
   }, !isBackButtonHidden && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
       root: _stylesModule.default.navAction
@@ -57,7 +56,7 @@ const NavActions = _ref => {
   }, secondaryAction.label), checkbox && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.checkboxContainer
   }, /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, checkbox))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.actionsGroup
+    className: "".concat(_stylesModule.default.actionsGroup, " ").concat(isMobileOrTablet && _stylesModule.default.actionsGroupResponsive)
   }, primaryAction && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
       root: _stylesModule.default.navAction

package/dist/components/UTWorkflowContainer/versions/V1/components/NavActions/styles.module.scss

@@ -1,17 +1,14 @@
 @import '../../../../../../scss/variables/mediaQueries.module.scss';
 
-.hidden {
-  display: none;
-}
-
 .actionsContainer {
   align-items: center;
   display: flex;
   gap: 16px;
   justify-content: space-between;
+  min-height: 48px;
   padding: 16px 32px;
 
-  @media #{$mobile} {
+  @media #{$tablet-mobile} {
     padding: 16px;
   }
 }
@@ -22,13 +19,17 @@
   grid-gap: 8px;
 }
 
+.actionsGroupResponsive {
+  flex-grow: 1;
+}
+
 .checkboxContainer {
   width: 100%;
 }
 
 .navAction {
   flex-shrink: 0;
-  @media #{$mobile} {
+  @media #{$tablet-mobile} {
     width: 100%;
   }
-}
+}

package/dist/components/UTWorkflowContainer/versions/V1/index.js

@@ -61,13 +61,13 @@ const UTWorkflowContainer = _ref => {
     currentStage,
     stages,
     withPadding: withStepperPadding
-  }), title && /*#__PURE__*/_react.default.createElement(_UTHeader.default, {
-    actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction] : [])],
-    banner,
-    helpText,
-    requiredFieldInfo,
-    subtitle,
-    tagline,
+  }), (title || isMobileOrTablet && (primaryAction || secondaryAction)) && /*#__PURE__*/_react.default.createElement(_UTHeader.default, {
+    actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction].filter(action => action) : [])],
+    banner: title && banner,
+    helpText: title && helpText,
+    requiredFieldInfo: title && requiredFieldInfo,
+    subititle: title && subtitle,
+    tagline: title && tagline,
     title,
     TitleIcon
   }), children), /*#__PURE__*/_react.default.createElement("div", {
@@ -96,7 +96,7 @@ const UTWorkflowContainer = _ref => {
 UTWorkflowContainer.propTypes = {
   backButton: _types.buttonTypes,
   banner: (0, _propTypes.shape)({
-    Icon: _propTypes.element,
+    Icon: _propTypes.object,
     text: _propTypes.string
   }),
   checkbox: (0, _propTypes.shape)({
@@ -115,11 +115,7 @@ UTWorkflowContainer.propTypes = {
   primaryAction: _types.buttonTypes,
   requiredFieldInfo: _propTypes.string,
   secondaryAction: _types.buttonTypes,
-  stages: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    id: _propTypes.number,
-    label: _propTypes.string,
-    Icon: _propTypes.elementType
-  })),
+  stages: _propTypes.object,
   stepperSize: _propTypes.string,
   stepsCount: _propTypes.number,
   subtitle: _propTypes.string,

package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss

@@ -2,11 +2,13 @@
 @import '../../../../scss/variables/mediaQueries.module.scss';
 
 .container {
-  border-radius: '4px';
+  align-items: center;
+  border-radius: 4px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  height: 100%;
+  justify-content: space-between;
   width: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",