@widergy/energy-ui 3.115.0 → 3.116.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.116.0](https://github.com/widergy/energy-ui/compare/v3.115.0...v3.116.0) (2025-10-30)
+
+
+### Features
+
+* [AXCH-830] add new props to utstatus ([#713](https://github.com/widergy/energy-ui/issues/713)) ([3bd7b6e](https://github.com/widergy/energy-ui/commit/3bd7b6e85b18e3cc1edfe70da6715b6c9b5e8119))
+
 # [3.115.0](https://github.com/widergy/energy-ui/compare/v3.114.1...v3.115.0) (2025-10-30)
 
 

package/dist/components/UTStatus/UTStatus.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutIcon = exports.WithTooltip = exports.Default = exports.CustomIcon = exports.AllVariants = exports.AllTypes = exports.AllSizes = void 0;
+exports.default = exports.WithoutIcon = exports.WithoutArea = exports.WithTooltip = exports.WithAdornments = exports.RoundedArea = exports.Default = exports.CustomIcon = exports.AllVariants = exports.AllTypes = exports.AllSizes = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _constants = require("./constants");
@@ -153,6 +153,43 @@ var _default = exports.default = {
           summary: 'string'
         }
       }
+    },
+    adornments: {
+      control: 'object',
+      description: 'Array de adornos (badges e iconos) para mostrar junto al estado.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    area: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar el área de fondo del componente.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    areaType: {
+      control: 'select',
+      description: 'Determina el tipo de área a usar.',
+      options: Object.keys(_constants.AREA_TYPES),
+      table: {
+        defaultValue: {
+          summary: _constants.DEFAULT_PROPS.areaType
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.AREA_TYPES))
+        }
+      }
     }
   },
   component: _.default,
@@ -172,7 +209,9 @@ const Default = exports.Default = {
     size: _constants.DEFAULT_PROPS.size,
     type: _constants.DEFAULT_PROPS.type,
     variant: _constants.DEFAULT_PROPS.variant,
-    withoutIcon: _constants.DEFAULT_PROPS.withoutIcon
+    withoutIcon: _constants.DEFAULT_PROPS.withoutIcon,
+    area: _constants.DEFAULT_PROPS.area,
+    areaType: _constants.DEFAULT_PROPS.areaType
   },
   name: 'Playground'
 };
@@ -299,4 +338,54 @@ const CustomIcon = exports.CustomIcon = {
       }
     }
   }
+};
+const WithAdornments = exports.WithAdornments = {
+  args: {
+    children: 'Estado con adornos',
+    variant: 'success',
+    adornments: [{
+      name: 'Badge',
+      props: {
+        variant: 'information'
+      }
+    }]
+  },
+  name: 'Con Adornos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con adornos (badges e iconos) adicionales.'
+      }
+    }
+  }
+};
+const WithoutArea = exports.WithoutArea = {
+  args: {
+    children: 'Estado sin área',
+    variant: 'warning',
+    area: false
+  },
+  name: 'Sin Área',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus sin el área de fondo, útil para integración en diseños más minimalistas.'
+      }
+    }
+  }
+};
+const RoundedArea = exports.RoundedArea = {
+  args: {
+    children: 'Área redondeada',
+    variant: 'success',
+    areaType: 'full'
+  },
+  name: 'Área Redondeada',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo del componente UTStatus con área completamente redondeada.'
+      }
+    }
+  }
 };

package/dist/components/UTStatus/constants.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANTS = exports.TYPES = exports.SIZES = exports.ICON_SIZE = exports.DEFAULT_PROPS = void 0;
+exports.VARIANTS = exports.TYPES = exports.SIZES = exports.ICON_SIZE = exports.DEFAULT_PROPS = exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = exports.AREA_TYPES = void 0;
+var _UTBadge = _interopRequireDefault(require("../UTBadge"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ICON_SIZE = exports.ICON_SIZE = 20;
 const SIZES = exports.SIZES = {
   large: 'large',
@@ -23,9 +26,22 @@ const TYPES = exports.TYPES = {
   light: 'light',
   negative: 'negative'
 };
+const AREA_TYPES = exports.AREA_TYPES = {
+  SQUARE: 'SQUARE',
+  ROUNDED: 'ROUNDED'
+};
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  areaType: AREA_TYPES.SQUARE,
   size: 'medium',
   type: 'default',
   variant: 'success',
   withoutIcon: false
+};
+const COMPONENT_KEYS = exports.COMPONENT_KEYS = {
+  BADGE: 'Badge',
+  ICON: 'Icon'
+};
+const COMPONENTS_MAPPER = exports.COMPONENTS_MAPPER = {
+  [COMPONENT_KEYS.BADGE]: _UTBadge.default,
+  [COMPONENT_KEYS.ICON]: _UTIcon.default
 };

package/dist/components/UTStatus/index.js

@@ -16,10 +16,12 @@ var _constants = require("./constants");
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/* eslint-disable react/no-children-prop */
-
+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); } /* eslint-disable react/no-children-prop */
 const UTStatus = _ref => {
   let {
+    adornments = [],
+    area = true,
+    areaType = _constants.DEFAULT_PROPS.areaType,
     children,
     classes,
     className,
@@ -29,11 +31,13 @@ const UTStatus = _ref => {
     title,
     tooltip,
     tooltipProps = {},
-    type,
-    variant,
+    type = _constants.DEFAULT_PROPS.type,
+    variant = _constants.DEFAULT_PROPS.variant,
     withoutIcon
   } = _ref;
   const StatusIcon = Icon !== null && Icon !== void 0 ? Icon : (0, _theme.defaultIconMapper)(variant);
+  const validAdornments = (0, _react.useMemo)(() => (0, _utils.validateAdornments)(adornments) ? adornments : [], [adornments]);
+  const useValidAdornments = validAdornments.length > 0;
   const {
     IconComponent,
     ...iconProps
@@ -45,15 +49,34 @@ const UTStatus = _ref => {
     size
   })), [StatusIcon, type, variant, classes.icon]);
   const showTooltip = !(0, _isEmpty.default)(tooltip);
+  const colorTheme = (0, _theme.getColorTheme)((0, _theme.validateProps)({
+    type,
+    variant
+  }));
+  const renderAdornment = (0, _react.useCallback)(adornment => {
+    const Component = _constants.COMPONENTS_MAPPER[adornment.name];
+    const themeProps = (0, _utils.getAdornmentsThemeProps)({
+      area,
+      classes,
+      size,
+      adornmentName: adornment.name
+    });
+    const adornmentProps = {
+      variant,
+      ...((adornment === null || adornment === void 0 ? void 0 : adornment.props) || {}),
+      ...themeProps
+    };
+    return Component ? /*#__PURE__*/_react.default.createElement(Component, _extends({}, adornmentProps, {
+      key: (adornment === null || adornment === void 0 ? void 0 : adornment.key) || adornment.name
+    })) : null;
+  }, []);
   const StatusRender = /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.root, " ").concat(className || ''),
+    className: "".concat(classes.root, " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === _constants.AREA_TYPES.SQUARE ? '' : classes.roundedArea),
     title: title
-  }, withoutIcon ? null : /*#__PURE__*/_react.default.createElement(IconComponent, iconProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, useValidAdornments && validAdornments.map(renderAdornment), withoutIcon || useValidAdornments ? null : /*#__PURE__*/_react.default.createElement(IconComponent, iconProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: classes.label,
-    colorTheme: (0, _theme.getColorTheme)((0, _theme.validateProps)({
-      type,
-      variant
-    })),
+    colorTheme: colorTheme,
+    shade: type !== _constants.TYPES.negative ? '05' : undefined,
     dataTestId: labelDataTestId,
     variant: (0, _theme.getLabelVariant)({
       size
@@ -72,6 +95,9 @@ const UTStatus = _ref => {
 };
 UTStatus.defaultProps = _constants.DEFAULT_PROPS;
 UTStatus.propTypes = {
+  adornments: (0, _propTypes.arrayOf)(_propTypes.object),
+  area: _propTypes.bool,
+  areaType: _propTypes.string,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
   Icon: _propTypes.elementType,

package/dist/components/UTStatus/theme.js

@@ -84,9 +84,9 @@ const retrieveStyle = _ref7 => {
   let {
     theme,
     size = _constants.DEFAULT_PROPS.size,
-    type,
+    type = _constants.DEFAULT_PROPS.type,
     uppercase,
-    variant
+    variant = _constants.DEFAULT_PROPS.variant
   } = _ref7;
   return {
     root: {
@@ -128,6 +128,51 @@ const retrieveStyle = _ref7 => {
           })
         })
       }
+    },
+    badge: {
+      backgroundColor: type === _constants.TYPES.negative ? "".concat(theme.Palette[variant !== _constants.VARIANTS.unassigned ? variant : _Palette.COLOR_THEMES.gray]['03'], " !important") : "".concat(theme.Palette[variant !== _constants.VARIANTS.unassigned ? variant : _Palette.COLOR_THEMES.gray]['04'], " !important")
+    },
+    adornmentIcon: {
+      flexShrink: '0',
+      '& path': {
+        stroke: getIconFill({
+          theme,
+          ...validateProps({
+            type,
+            variant
+          })
+        })
+      }
+    },
+    iconSmall: {
+      height: '14px',
+      width: '14px'
+    },
+    iconMedium: {
+      height: '16px',
+      width: '16px'
+    },
+    iconLarge: {
+      height: '20px',
+      width: '20px'
+    },
+    badgeSmall: {
+      height: '8px',
+      width: '8px'
+    },
+    badgeMedium: {
+      height: '10px',
+      width: '10px'
+    },
+    badgeLarge: {
+      height: '10px',
+      width: '10px'
+    },
+    withoutArea: {
+      backgroundColor: 'transparent !important'
+    },
+    roundedArea: {
+      borderRadius: '100px'
     }
   };
 };

package/dist/components/UTStatus/utils.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconProps = void 0;
+exports.validateAdornments = exports.getIconProps = exports.getAdornmentsThemeProps = void 0;
 var _componentUtils = require("../../utils/componentUtils");
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _constants = require("./constants");
 var _theme = require("./theme");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getIconProps = _ref => {
@@ -32,4 +33,49 @@ const getIconProps = _ref => {
     })
   };
 };
-exports.getIconProps = getIconProps;
+exports.getIconProps = getIconProps;
+const validateAdornments = adornments => adornments.every(adornment => _constants.COMPONENTS_MAPPER[adornment.name]);
+exports.validateAdornments = validateAdornments;
+const interpreterSize = (size, classes) => {
+  const {
+    iconSmall,
+    iconMedium,
+    iconLarge,
+    badgeSmall,
+    badgeMedium,
+    badgeLarge
+  } = classes || {};
+  return {
+    [_constants.COMPONENT_KEYS.BADGE]: {
+      [_constants.SIZES.small]: badgeSmall,
+      [_constants.SIZES.medium]: badgeMedium,
+      [_constants.SIZES.large]: badgeLarge
+    }[size],
+    [_constants.COMPONENT_KEYS.ICON]: {
+      [_constants.SIZES.small]: iconSmall,
+      [_constants.SIZES.medium]: iconMedium,
+      [_constants.SIZES.large]: iconLarge
+    }[size]
+  };
+};
+const getAdornmentsThemeProps = props => {
+  const {
+    adornmentName,
+    classes,
+    size = _constants.SIZES.medium
+  } = props || {};
+  const {
+    badge,
+    adornmentIcon
+  } = classes || {};
+  const recoverClassForSizeAndType = interpreterSize(size, classes)[adornmentName];
+  return {
+    [_constants.COMPONENT_KEYS.BADGE]: {
+      className: "".concat(badge, " ").concat(recoverClassForSizeAndType)
+    },
+    [_constants.COMPONENT_KEYS.ICON]: {
+      className: "".concat(adornmentIcon, " ").concat(recoverClassForSizeAndType)
+    }
+  }[adornmentName];
+};
+exports.getAdornmentsThemeProps = getAdornmentsThemeProps;

package/package.json

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