@widergy/energy-ui 3.30.2 → 3.32.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Features
+
+* [UG-2131] spacing and bottom actions updates ([#515](https://github.com/widergy/energy-ui/issues/515)) ([8b38e37](https://github.com/widergy/energy-ui/commit/8b38e37ec30837b2838fa1d64de57e0e73275520))
+
 ## [3.30.2](https://github.com/widergy/energy-ui/compare/v3.30.1...v3.30.2) (2024-10-17)
 
 

package/dist/components/UTActionCard/components/BottomActions/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_REDIRECTION_ICON = void 0;
+const DEFAULT_REDIRECTION_ICON = exports.DEFAULT_REDIRECTION_ICON = 'IconChevronRight';

package/dist/components/UTActionCard/components/BottomActions/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _UTButton = _interopRequireDefault(require("../../../UTButton"));
 var _constants = require("../../constants");
+var _constants2 = 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); }
@@ -40,7 +41,7 @@ const BottomActions = _ref => {
       colorTheme: colorTheme,
       dataTestId: dataTestId,
       disabled: disabled,
-      Icon: type === _constants.ACTION_TYPES.REDIRECTION ? 'IconChevronRight' : Icon,
+      Icon: type === _constants.ACTION_TYPES.REDIRECTION ? Icon || _constants2.DEFAULT_REDIRECTION_ICON : Icon,
       iconPlacement: type === _constants.ACTION_TYPES.REDIRECTION ? 'right' : 'left',
       key: label,
       loading: loading,

package/dist/components/UTActionCard/components/Header/index.js

@@ -35,14 +35,16 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.header, " ").concat(_stylesModule.default[size], " ").concat(classNames.header)
-  }, (0, _utils.renderAdornment)(adornment, 'left', size), /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _utils.renderAdornment)(adornment, 'left'), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerTitles
-  }, (0, _utils.renderAdornment)(adornment, 'top', size), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+  }, (0, _utils.renderAdornment)(adornment, 'top'), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titleAndDescription
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     variant: "title3",
     weight: "medium"
   }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
-  }, descriptionProps), description)), status ? /*#__PURE__*/_react.default.createElement(_UTStatus.default, _extends({
+  }, descriptionProps), description))), status ? /*#__PURE__*/_react.default.createElement(_UTStatus.default, _extends({
     className: "".concat(_stylesModule.default["placeSelf-".concat(statusAlignment)]),
     type: "light"
   }, (0, _utils.statusPropsMapper)(status)), statusLabel || status) : null, !(0, _array.isEmpty)(headerActions) && /*#__PURE__*/_react.default.createElement(_HeaderActions.default, {
@@ -84,7 +86,7 @@ Header.propTypes = {
   status: _propTypes.string,
   statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
   statusLabel: _propTypes.string,
-  title: _propTypes.string.isRequired,
+  title: _propTypes.string,
   titleProps: (0, _propTypes.shape)({
     variant: _propTypes.string,
     weight: _propTypes.string

package/dist/components/UTActionCard/components/Header/styles.module.scss

@@ -7,8 +7,14 @@
 .headerTitles {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: 16px;
   margin-right: auto;
+}
+
+.titleAndDescription {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
   overflow-wrap: anywhere;
 }
 
@@ -35,4 +41,8 @@
 .defaultAvatar {
   height: 64px;
   width: 64px;
-}
+}
+
+.adornment {
+  max-width: 100%;
+}

package/dist/components/UTActionCard/components/Header/utils.js

@@ -143,12 +143,13 @@ const statusPropsMapper = status => ({
   withoutIcon: true
 };
 exports.statusPropsMapper = statusPropsMapper;
-const renderAdornment = (adornment, position, size) => {
+const renderAdornment = (adornment, position) => {
+  var _adornment$props;
   if ((0, _object.objectIsEmpty)(adornment) || adornment.position !== position) return null;
   const AdornmentComponent = _constants2.ADORNMENT_COMPONENT_MAPPER[adornment.type];
   const defaultPlaceSelf = adornment.position === 'left' ? _constants.PLACE_SELF_TYPES.CENTER : _constants.PLACE_SELF_TYPES.START;
-  return /*#__PURE__*/_react.default.createElement(AdornmentComponent, _extends({
-    className: "".concat(_stylesModule.default["placeSelf-".concat(adornment.alignment || defaultPlaceSelf)], " ").concat(position === 'top' ? _stylesModule.default["gap-".concat(size)] : '')
-  }, adornment.props || {}));
+  return /*#__PURE__*/_react.default.createElement(AdornmentComponent, _extends({}, adornment.props || {}, {
+    className: "".concat(_stylesModule.default.adornment, " ").concat(_stylesModule.default["placeSelf-".concat(adornment.alignment || defaultPlaceSelf)], "  ").concat(((_adornment$props = adornment.props) === null || _adornment$props === void 0 ? void 0 : _adornment$props.className) || '')
+  }));
 };
 exports.renderAdornment = renderAdornment;

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.30.2",
+  "version": "3.32.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",