@widergy/energy-ui 3.31.0 → 3.32.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.32.0](https://github.com/widergy/energy-ui/compare/v3.31.0...v3.32.0) (2024-10-18)
+
+
+### Features
+
+* [EVE-4292] wizard pagination ([#510](https://github.com/widergy/energy-ui/issues/510)) ([4bf7586](https://github.com/widergy/energy-ui/commit/4bf7586216286146749ffb921dbcc42efd75753f))
+
 # [3.31.0](https://github.com/widergy/energy-ui/compare/v3.30.2...v3.31.0) (2024-10-18)
 
 

package/dist/components/UTWizard/constants.js

@@ -3,8 +3,7 @@
 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';
+exports.VARIANTS = exports.DEFAULT_PROPS = exports.ACTIONS = void 0;
 const VARIANTS = exports.VARIANTS = {
   dark: 'dark',
   information: 'information',
@@ -12,4 +11,9 @@ const VARIANTS = exports.VARIANTS = {
 };
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   variant: 'dark'
+};
+const ACTIONS = exports.ACTIONS = {
+  NEXT: 'next',
+  PREVIOUS: 'previous',
+  RESET: 'reset'
 };

package/dist/components/UTWizard/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 require("react-perfect-scrollbar/dist/css/styles.css");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _classesUtils = require("../../utils/classesUtils");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
@@ -14,26 +15,45 @@ 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"));
+var _constants = require("./constants");
 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 => {
+  var _subSteps$currentSubs;
   let {
     classes: themeClasses,
     classNames,
-    description,
     enabled,
     handleOnClick,
     openByDefault = true,
-    image,
-    title,
+    subSteps = [],
     variant
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const [currentSubstep, updateSubstep] = (0, _react.useReducer)((state, action) => {
+    switch (action) {
+      case _constants.ACTIONS.RESET:
+        return 0;
+      case _constants.ACTIONS.PREVIOUS:
+        return state - 1;
+      case _constants.ACTIONS.NEXT:
+        return state + 1;
+      default:
+        return state;
+    }
+  }, 0);
+  const stepEnabled = enabled && !(0, _isEmpty.default)(subSteps[currentSubstep]);
+  const {
+    title,
+    description,
+    image
+  } = (_subSteps$currentSubs = subSteps[currentSubstep]) !== null && _subSteps$currentSubs !== void 0 ? _subSteps$currentSubs : {};
   const [isOpen, setIsOpen] = (0, _react.useState)(openByDefault);
-  const stepEnabled = !!(enabled && title && description);
+  (0, _react.useEffect)(() => {
+    updateSubstep(_constants.ACTIONS.RESET);
+  }, [subSteps]);
   return stepEnabled && (isOpen ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.container, " ").concat(_stylesModule.default.container)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -41,32 +61,50 @@ const UTWizard = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.title
+    className: _stylesModule.default.titleContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    weight: "medium",
+    className: _stylesModule.default.grow,
     colorTheme: (0, _utils.getLabelTheme)(variant),
+    weight: "medium",
     withMarkdown: true
   }, title), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: (0, _utils.getButtonTheme)(variant),
     Icon: "IconChevronDown",
     onClick: () => setIsOpen(false),
     size: "small",
-    variant: "text",
-    colorTheme: (0, _utils.getButtonTheme)(variant)
+    variant: "text"
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: (0, _utils.getButtonTheme)(variant),
+    Icon: "IconX",
+    onClick: handleOnClick,
+    size: "small",
+    variant: "text"
   })), /*#__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", {
+  }), subSteps.length > 1 && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.footer
-  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    variant: "text",
-    onClick: handleOnClick,
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.grow,
+    colorTheme: (0, _utils.getLabelTheme)(variant),
+    variant: "small",
+    withMarkdown: true
+  }, "".concat(currentSubstep + 1, " de ").concat(subSteps.length)), currentSubstep > 0 && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: (0, _utils.getButtonTheme)(variant),
+    onClick: () => updateSubstep(_constants.ACTIONS.PREVIOUS),
     size: "small",
+    variant: "text",
+    weight: "medium"
+  }, "Atr\xE1s"), currentSubstep < subSteps.length - 1 && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     colorTheme: (0, _utils.getButtonTheme)(variant),
+    onClick: () => updateSubstep(_constants.ACTIONS.NEXT),
+    size: "small",
+    variant: "filled",
     weight: "medium"
-  }, _constants.DISABLE_TEXT)))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, "Siguiente")))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.buttonContainer, " ").concat(_stylesModule.default.buttonContainer)
   }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     size: "small",
@@ -81,12 +119,10 @@ const UTWizard = _ref => {
 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]),
   openByDefault: _propTypes.bool,
-  title: _propTypes.string,
+  subSteps: _propTypes.array,
   variant: _propTypes.string
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWizard);

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

@@ -26,17 +26,21 @@
   width: 264px;
 }
 
-.footer {
+.grow {
+  flex-grow: 1;
+}
+
+.titleContainer {
+  align-items: center;
   display: flex;
-  justify-content: flex-end;
-  width: 100%;
+  flex-direction: row;
 }
 
-.title {
+.footer {
   align-items: center;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  grid-gap: 8px;
 }
 
 .buttonContainer {

package/package.json

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