@widergy/energy-ui 3.6.1 → 3.6.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.6.2](https://github.com/widergy/energy-ui/compare/v3.6.1...v3.6.2) (2024-04-19)
+
+
+### Bug Fixes
+
+* workflow body variants ([#444](https://github.com/widergy/energy-ui/issues/444)) ([3fcfaa8](https://github.com/widergy/energy-ui/commit/3fcfaa86b517afd8030316d6b271b7ff2d1aea85))
+
 ## [3.6.1](https://github.com/widergy/energy-ui/compare/v3.6.0...v3.6.1) (2024-04-19)
 
 

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

@@ -11,7 +11,7 @@
   flex-direction: column;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: 1232px;
+  max-width: 1200px;
   padding: 24px 32px 32px;
 
   @media #{$tablet-mobile} {
@@ -38,7 +38,7 @@
 .bannerContainer {
   border-radius: 8px;
   margin-bottom: 0;
-  max-width: 700px;
+  max-width: calc(800px - 32px);
   width: 100%;
 }
 

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.childrenContentStyle = exports.VARIANTS = void 0;
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CENTERED = 'centered';
+const FULL_WIDTH = 'fullWidth';
+const DEFAULT = 'default';
+const VARIANTS = exports.VARIANTS = {
+  CENTERED,
+  FULL_WIDTH,
+  DEFAULT
+};
+const childrenContentStyle = exports.childrenContentStyle = {
+  [VARIANTS.CENTERED]: _stylesModule.default.childrenContentCentered,
+  [VARIANTS.FULL_WIDTH]: _stylesModule.default.childrenContentFullWidth,
+  [VARIANTS.DEFAULT]: _stylesModule.default.childrenContent
+};

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

@@ -17,6 +17,7 @@ var _NavActions = _interopRequireDefault(require("./components/NavActions"));
 var _types = require("./types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _theme = require("./theme");
+var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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 => {
     subtitle,
     tagline,
     title,
+    variant = _constants.VARIANTS.DEFAULT,
     withIcon = false,
     withStepperPadding = true
   } = _ref;
@@ -77,8 +79,10 @@ const UTWorkflowContainer = _ref => {
     tagline: title && tagline,
     title
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer)
-  }, children)), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
+  }, children))), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
   }, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.mobileCheckboxContainer
@@ -128,6 +132,7 @@ UTWorkflowContainer.propTypes = {
   subtitle: _propTypes.string,
   tagline: _propTypes.string,
   title: _propTypes.string,
+  variant: _propTypes.string,
   withIcon: _propTypes.bool,
   withStepperPadding: _propTypes.bool
 };

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

@@ -18,8 +18,8 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow-y: auto;
   width: 100%;
-  overflow-y: scroll;
 
   @media #{$tablet-mobile} {
     align-self: center;
@@ -39,8 +39,9 @@
 }
 
 .childrenContainer {
+  flex: 1;
   margin: 0 auto;
-  max-width: 1232px;
+  max-width: 1200px;
   padding: 0 32px 16px;
   width: calc(100% - 64px);
 
@@ -50,6 +51,33 @@
   }
 }
 
+.childrenContent {
+  max-width: 800px;
+
+  @media #{$tablet-mobile} {
+    margin: 0 auto;
+  }
+}
+
+.childrenContentCentered {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 500px;
+}
+
+.childrenContainerFullWidth {
+  max-width: none;
+  padding: 24px 32px 16px;
+  width: calc(100% - 64px);
+}
+
+.childrenContentFullWidth {
+  max-width: none;
+}
+
 .progress {
   height: 8px;
 }

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _shadowUtils = require("../../../../utils/shadowUtils");
 const retrieveStyle = _ref => {
-  var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2;
+  var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2, _theme$Palette3;
   let {
     theme
   } = _ref;
@@ -26,6 +26,9 @@ const retrieveStyle = _ref => {
     },
     colorPrimary: {
       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")
+    },
+    childrenContainerFullWidth: {
+      borderTop: "1px solid ".concat((_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['04'])
     }
   };
 };

package/package.json

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