@widergy/energy-ui 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.9.0](https://github.com/widergy/energy-ui/compare/v3.8.0...v3.9.0) (2024-06-06)
+
+
+### Features
+
+* add wizard to workflow component ([#450](https://github.com/widergy/energy-ui/issues/450)) ([943896d](https://github.com/widergy/energy-ui/commit/943896d4d36c22574d06274da3d1b270d215f75a))
+
 # [3.8.0](https://github.com/widergy/energy-ui/compare/v3.7.5...v3.8.0) (2024-06-06)
 
 

package/dist/components/UTWizard/components/StepImage/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepImage = _ref => {
+  let {
+    Image
+  } = _ref;
+  return typeof Image === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    className: _stylesModule.default.image,
+    src: Image
+  }) : /*#__PURE__*/_react.default.createElement(Image, {
+    className: _stylesModule.default.image
+  });
+};
+StepImage.propTypes = {
+  Image: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.elementType])
+};
+var _default = exports.default = StepImage;

package/dist/components/UTWizard/components/StepImage/styles.module.scss

@@ -0,0 +1,6 @@
+.image {
+  align-self: center;
+  display: flex;
+  max-height: 180px;
+  max-width: 264px;
+}

package/dist/components/UTWizard/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = exports.DISABLE_TEXT = exports.DEFAULT_PROPS = void 0;
+const DISABLE_TEXT = exports.DISABLE_TEXT = 'No volver a mostrar';
+const VARIANTS = exports.VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'dark'
+};

package/dist/components/UTWizard/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+require("react-perfect-scrollbar/dist/css/styles.css");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _StepImage = _interopRequireDefault(require("./components/StepImage"));
+var _theme = require("./theme");
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const UTWizard = _ref => {
+  let {
+    classes: themeClasses,
+    classNames,
+    description,
+    enabled,
+    handleOnClick,
+    image,
+    title,
+    variant
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const stepEnabled = enabled && !!(description || image || title);
+  return stepEnabled && (isOpen ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.container, " ").concat(_stylesModule.default.container)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.content
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.title
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium",
+    colorTheme: (0, _utils.getLabelTheme)(variant),
+    withMarkdown: true
+  }, title), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    Icon: "IconChevronDown",
+    onClick: () => setIsOpen(false),
+    size: "small",
+    variant: "text",
+    colorTheme: (0, _utils.getButtonTheme)(variant)
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: (0, _utils.getLabelTheme)(variant),
+    withMarkdown: true
+  }, description)), image && /*#__PURE__*/_react.default.createElement(_StepImage.default, {
+    Image: image
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    variant: "text",
+    onClick: handleOnClick,
+    size: "small",
+    colorTheme: (0, _utils.getButtonTheme)(variant),
+    weight: "medium"
+  }, _constants.DISABLE_TEXT)))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.buttonContainer, " ").concat(_stylesModule.default.buttonContainer)
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    size: "small",
+    classNames: {
+      root: "".concat(_stylesModule.default.button, " ").concat(classes.buttonStyle)
+    },
+    onClick: () => setIsOpen(true),
+    colorTheme: (0, _utils.getButtonMinimizedTheme)(variant),
+    Icon: "IconQuestionMark"
+  })));
+};
+UTWizard.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  description: _propTypes.string,
+  enabled: _propTypes.bool,
+  handleOnClick: _propTypes.func,
+  image: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.elementType]),
+  title: _propTypes.string,
+  variant: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWizard);

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

@@ -0,0 +1,54 @@
+.container {
+  border-radius: 4px;
+  bottom: calc(100% + 16px);
+  display: flex;
+  height: fit-content;
+  max-width: 296px;
+  padding: 16px;
+  position: absolute;
+  right: 16px;
+  z-index: 9999;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  max-width: 264px;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 264px;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.buttonContainer {
+  bottom: calc(100% + 16px);
+  display: flex;
+  position: absolute;
+  right: 16px;
+  z-index: 9999;
+}
+
+.button {
+  border-radius: 50% !important;
+  height: 48px;
+  width: 48px;
+}

package/dist/components/UTWizard/theme.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+var _utils = require("./utils");
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === _constants.VARIANTS.light ? theme.Palette.light['01'] : theme.Palette[variant]['05'];
+};
+const retrieveStyle = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  const variantTheme = (0, _utils.getVariant)(variant);
+  return {
+    container: {
+      backgroundColor: getBackgroundColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    buttonStyle: {
+      backgroundColor: "".concat(getBackgroundColor({
+        theme,
+        variant: variantTheme
+      }), " !important")
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTWizard/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariant = exports.getLabelTheme = exports.getButtonTheme = exports.getButtonMinimizedTheme = void 0;
+var _constants = require("./constants");
+const getVariant = variant => _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant];
+exports.getVariant = getVariant;
+const getLabelTheme = variant => ({
+  [_constants.VARIANTS.dark]: 'light',
+  [_constants.VARIANTS.information]: 'light',
+  [_constants.VARIANTS.light]: 'dark'
+})[getVariant(variant)];
+exports.getLabelTheme = getLabelTheme;
+const getButtonTheme = variant => ({
+  [_constants.VARIANTS.dark]: 'negative',
+  [_constants.VARIANTS.information]: 'negative',
+  [_constants.VARIANTS.light]: 'dark'
+})[getVariant(variant)];
+exports.getButtonTheme = getButtonTheme;
+const getButtonMinimizedTheme = variant => ({
+  [_constants.VARIANTS.dark]: 'secondary',
+  [_constants.VARIANTS.information]: 'secondary',
+  [_constants.VARIANTS.light]: 'negative'
+})[getVariant(variant)];
+exports.getButtonMinimizedTheme = getButtonMinimizedTheme;

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

@@ -12,6 +12,7 @@ var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTProgressBar = _interopRequireDefault(require("../../../UTProgressBar"));
 var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
 var _classesUtils = require("../../../../utils/classesUtils");
+var _UTWizard = _interopRequireDefault(require("../../../UTWizard"));
 var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
 var _constants = require("./constants");
 var _types = require("./types");
@@ -21,6 +22,7 @@ var _usePrevious = require("./hooks/use-previous");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTWorkflowContainer = _ref => {
   let {
     backButton,
@@ -39,7 +41,8 @@ const UTWorkflowContainer = _ref => {
     subtitle,
     title,
     TitleIcon,
-    withIcon = false
+    withIcon = false,
+    wizardConfig = {}
   } = _ref;
   (0, _react.useEffect)(() => () => onExit && onExit(), []);
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
@@ -104,7 +107,12 @@ const UTWorkflowContainer = _ref => {
     className: _stylesModule.default.subtitle,
     colorTheme: "gray",
     withMarkdown: true
-  }, subtitle)), children)));
+  }, subtitle)), children), /*#__PURE__*/_react.default.createElement(_UTWizard.default, _extends({
+    classNames: {
+      container: _stylesModule.default.wizardContainer,
+      buttonContainer: _stylesModule.default.wizardButtonContainer
+    }
+  }, wizardConfig))));
 };
 UTWorkflowContainer.propTypes = {
   backButton: _types.buttonTypes,
@@ -123,6 +131,13 @@ UTWorkflowContainer.propTypes = {
   subtitle: _propTypes.string,
   title: _propTypes.string,
   TitleIcon: _propTypes.element,
-  withIcon: _propTypes.bool
+  withIcon: _propTypes.bool,
+  wizardConfig: (0, _propTypes.shape)({
+    description: _propTypes.string,
+    enabled: _propTypes.bool,
+    handleOnClick: _propTypes.func,
+    title: _propTypes.string,
+    variant: _propTypes.string
+  })
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

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

@@ -33,3 +33,11 @@
 .hidden {
   display: none;
 }
+
+.wizardButtonContainer {
+  bottom: 16px;
+}
+
+.wizardContainer {
+  bottom: 16px;
+}

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

@@ -13,6 +13,7 @@ var _UTHeader = _interopRequireDefault(require("../../../UTHeader"));
 var _UTStepper = _interopRequireDefault(require("../../../UTStepper"));
 var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
 var _useScreenSize = require("../../../../utils/useScreenSize");
+var _UTWizard = _interopRequireDefault(require("../../../UTWizard"));
 var _NavActions = _interopRequireDefault(require("./components/NavActions"));
 var _types = require("./types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -46,7 +47,8 @@ const UTWorkflowContainer = _ref => {
     title,
     variant = _constants.VARIANTS.DEFAULT,
     withIcon = false,
-    withStepperPadding = true
+    withStepperPadding = true,
+    wizardConfig = {}
   } = _ref;
   (0, _react.useEffect)(() => () => onExit && onExit(), []);
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
@@ -82,7 +84,9 @@ const UTWorkflowContainer = _ref => {
     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", {
+  }, children))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement(_UTWizard.default, wizardConfig), !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
@@ -103,7 +107,7 @@ const UTWorkflowContainer = _ref => {
     primaryAction: primaryAction,
     secondaryAction: secondaryAction,
     withIcon: withIcon
-  })));
+  }))));
 };
 UTWorkflowContainer.propTypes = {
   backButton: _types.buttonTypes,
@@ -134,6 +138,13 @@ UTWorkflowContainer.propTypes = {
   title: _propTypes.string,
   variant: _propTypes.string,
   withIcon: _propTypes.bool,
-  withStepperPadding: _propTypes.bool
+  withStepperPadding: _propTypes.bool,
+  wizardConfig: (0, _propTypes.shape)({
+    description: _propTypes.string,
+    enabled: _propTypes.bool,
+    handleOnClick: _propTypes.func,
+    title: _propTypes.string,
+    variant: _propTypes.string
+  })
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

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

@@ -92,3 +92,9 @@
 .mobileCheckboxContainer {
   padding-left: 16px;
 }
+
+.footer {
+  display: flex;
+  position: relative;
+  width: 100%;
+}

package/package.json

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