@widergy/energy-ui 3.152.0 → 3.153.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.153.0](https://github.com/widergy/energy-ui/compare/v3.152.0...v3.153.0) (2026-05-13)
+
+
+### Features
+
+* [AXCH-1599] task list component related tasks side panel ([#793](https://github.com/widergy/energy-ui/issues/793)) ([ecbf06d](https://github.com/widergy/energy-ui/commit/ecbf06db43aaaa330162153d811fc1ce9c51e246))
+
 # [3.152.0](https://github.com/widergy/energy-ui/compare/v3.151.0...v3.152.0) (2026-05-13)
 
 

package/dist/components/UTPanel/UTPanel.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithAdditionalContent = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
+exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPretitle = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithAdditionalContentBadge = exports.V1WithAdditionalContent = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -484,6 +484,18 @@ var _default = exports.default = {
           summary: 'elementType'
         }
       }
+    },
+    pretitleComponent: {
+      control: false,
+      description: '(V1 only) Nodo React renderizado dentro del headerContainer, antes del headerArea. Ocupa el ancho completo del header. Útil para breadcrumbs o labels de contexto sobre el título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'ReactNode'
+        }
+      }
     }
   },
   component: _2.default,
@@ -843,6 +855,96 @@ const V1WithAdditionalContent = exports.V1WithAdditionalContent = {
     }
   }
 };
+const V1WithPretitle = exports.V1WithPretitle = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: '#4605',
+    subtitle: 'Tramite de cuenta',
+    panelSide: 'right',
+    size: 'M',
+    pretitleComponent: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'baseline'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body2"
+    }, "Pertenece a "), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: "primary",
+      variant: "body2",
+      style: {
+        cursor: 'pointer',
+        textDecoration: 'underline',
+        paddingLeft: '8px'
+      }
+    }, "#4624")),
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Caso hijo con referencia al caso padre. El n\xFAmero clickeable navega al padre."))
+  },
+  name: 'V1 - Con Pretítulo (parent case)',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa `pretitleComponent` para mostrar un label de contexto sobre el título, como "Pertenece a #4624". Solo el número es interactivo; el texto plano no lo es.'
+      }
+    }
+  }
+};
+const V1WithAdditionalContentBadge = exports.V1WithAdditionalContentBadge = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Badge en Sidebar',
+    subtitle: 'Íconos con contador',
+    panelSide: 'right',
+    size: 'M',
+    additionalContent: [{
+      id: 'tasks',
+      Icon: 'IconChecklist',
+      count: 6,
+      BodyComponent: SettingsBodyComponent,
+      tooltipProps: {
+        content: 'Tareas relacionadas (6)'
+      }
+    }, {
+      id: 'notifications',
+      Icon: 'IconBell',
+      count: 0,
+      BodyComponent: NotificationsBodyComponent,
+      tooltipProps: {
+        content: 'Notificaciones'
+      }
+    }, {
+      id: 'help',
+      Icon: 'IconHelpCircle',
+      BodyComponent: HelpBodyComponent,
+      tooltipProps: {
+        content: 'Ayuda'
+      }
+    }],
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "El primer \xEDcono muestra un badge con contador (count: 6). El segundo tiene count: 0 y no muestra badge. El tercero no tiene count."))
+  },
+  name: 'V1 - Sidebar con Badge',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa la prop `count` en un item de `additionalContent` para mostrar un badge numérico sobre el ícono de la sidebar. Solo se renderiza cuando `count > 0`.'
+      }
+    }
+  }
+};
 const Playground = exports.Playground = {
   args: {
     version: 'V1',

package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js

@@ -9,6 +9,7 @@ var _propTypes = require("prop-types");
 require("react-perfect-scrollbar/dist/css/styles.css");
 var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
 var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTStatus = _interopRequireDefault(require("../../../../../UTStatus"));
 var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
 var _testIds = require("../../../../../../constants/testIds");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -66,21 +67,32 @@ const AdditionalContentModule = _ref => {
         ...rest
       } = _ref2;
       return rest;
-    })(item.tooltipProps)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    })(item.tooltipProps)), /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.buttonWrapper
+    }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
       colorTheme: activeId === item.id ? 'primary' : 'gray',
-      className: "".concat(_stylesModule.default.sidebarButton),
+      className: _stylesModule.default.sidebarButton,
       dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
       Icon: item.Icon,
       onClick: () => onSelectItem(activeId === item.id ? null : item.id),
       size: "medium",
       variant: activeId === item.id ? 'semitransparent' : 'text'
-    }))));
+    }), item.count > 0 && /*#__PURE__*/_react.default.createElement(_UTStatus.default, {
+      area: true,
+      areaType: "ROUNDED",
+      className: _stylesModule.default.countBadge,
+      size: "xsmall",
+      type: "negative",
+      variant: "accent",
+      withoutIcon: true
+    }, item.count))));
   })))));
 };
 AdditionalContentModule.propTypes = {
   additionalContent: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     id: _propTypes.string.isRequired,
     Icon: _propTypes.string.isRequired,
+    count: _propTypes.number,
     BodyComponent: _propTypes.elementType.isRequired,
     tooltipProps: _propTypes.object.isRequired
   })).isRequired,

package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/styles.module.scss

@@ -26,7 +26,7 @@ $sidebar-width: 56px;
   min-width: $body-component-width;
   opacity: 1;
   overflow: hidden;
-  padding: 16px;
+  padding: 24px 24px 16px 24px;
   width: $body-component-width;
 }
 
@@ -74,6 +74,10 @@ $sidebar-width: 56px;
   padding: 0 8px;
 }
 
+.buttonWrapper {
+  position: relative;
+}
+
 .sidebarButton {
   align-items: center;
   border-radius: 4px;
@@ -83,3 +87,12 @@ $sidebar-width: 56px;
   transition: all 0.2s ease;
   width: 40px;
 }
+
+.countBadge {
+  padding: 0 6px;
+  background-color: var(--actionAccent05) !important;
+  pointer-events: none;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+}

package/dist/components/UTPanel/versions/V1/components/HeaderSection/index.js

@@ -28,6 +28,7 @@ const HeaderSection = _ref => {
     headerSecondaryActionButton,
     hideHeader,
     mainActionDataTestId,
+    pretitleComponent,
     secondaryActionDataTestId,
     showMainStatus,
     showTag,
@@ -50,7 +51,9 @@ const HeaderSection = _ref => {
   }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerContainer, " ").concat((classes === null || classes === void 0 ? void 0 : classes.headerContainer) || '')
-  }, HeaderComponent || /*#__PURE__*/_react.default.createElement("div", {
+  }, pretitleComponent && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.pretitleArea
+  }, pretitleComponent), HeaderComponent || /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerArea
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerLeftArea
@@ -107,6 +110,7 @@ HeaderSection.propTypes = {
   headerSecondaryActionButton: (0, _propTypes.oneOfType)([_propTypes.object, (0, _propTypes.arrayOf)(_propTypes.object)]),
   hideHeader: _propTypes.bool,
   mainActionDataTestId: _propTypes.string,
+  pretitleComponent: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.elementType]),
   secondaryActionDataTestId: _propTypes.string,
   showMainStatus: _propTypes.bool,
   showTag: _propTypes.bool,

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

@@ -59,6 +59,7 @@ const UTPanel = _ref => {
     paginationProps = {},
     panelSide,
     perfectScrollbarOptions,
+    pretitleComponent,
     secondaryActionDataTestId = panel.secondaryAction,
     showBackButton = false,
     showMainStatus = false,
@@ -164,6 +165,7 @@ const UTPanel = _ref => {
     headerSecondaryActionButton: headerSecondaryActionButton,
     hideHeader: hideHeader,
     mainActionDataTestId: mainActionDataTestId,
+    pretitleComponent: pretitleComponent,
     secondaryActionDataTestId: secondaryActionDataTestId,
     showMainStatus: showMainStatus,
     showTag: showTag,
@@ -193,6 +195,7 @@ UTPanel.propTypes = {
   additionalContent: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     id: _propTypes.string.isRequired,
     Icon: _propTypes.string.isRequired,
+    count: _propTypes.number,
     BodyComponent: _propTypes.elementType.isRequired,
     tooltipProps: _propTypes.object.isRequired
   })),
@@ -239,6 +242,7 @@ UTPanel.propTypes = {
   open: _propTypes.bool,
   panelSide: _propTypes.string,
   perfectScrollbarOptions: _propTypes.object,
+  pretitleComponent: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.elementType]),
   secondaryActionDataTestId: _propTypes.string,
   singleHeaderItemsColumn: _propTypes.bool,
   size: (0, _propTypes.oneOf)(Object.keys(_constants.SIZES)),

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

@@ -78,6 +78,11 @@ $additional-content-total: $body-component-width + $sidebar-width;
   padding: 8px 24px 16px;
 }
 
+.pretitleArea {
+  margin-bottom: 4px;
+  width: 100%;
+}
+
 .headerArea {
   align-items: center;
   display: flex;

package/package.json

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