@widergy/energy-ui 3.169.0 → 3.171.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -7
- package/dist/components/UTDotMenu/index.js +10 -2
- package/dist/components/UTDotMenu/stories/UTDotMenu.stories.js +42 -3
- package/dist/components/UTPanel/UTPanel.stories.js +49 -1
- package/dist/components/UTPanel/versions/V1/README.md +14 -0
- package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js +2 -0
- package/dist/esm/components/UTDotMenu/index.js +10 -2
- package/dist/esm/components/UTDotMenu/stories/UTDotMenu.stories.js +41 -2
- package/dist/esm/components/UTPanel/UTPanel.stories.js +48 -0
- package/dist/esm/components/UTPanel/versions/V1/README.md +14 -0
- package/dist/esm/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js +3 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,37 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.171.0](https://github.com/widergy/energy-ui/compare/v3.170.0...v3.171.0) (2026-06-22)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* disabled prop in sidebar utpanel ([#826](https://github.com/widergy/energy-ui/issues/826)) ([f7ce127](https://github.com/widergy/energy-ui/commit/f7ce127d78e5c49d0a8b9a80eae8d2dae02c381d))
|
|
7
7
|
|
|
8
|
-
# [3.
|
|
8
|
+
# [3.170.0](https://github.com/widergy/energy-ui/compare/v3.169.0...v3.170.0) (2026-06-22)
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
### Features
|
|
12
12
|
|
|
13
|
-
* [
|
|
13
|
+
* [AXCH-1778] test id support for utdotmenu ([#823](https://github.com/widergy/energy-ui/issues/823)) ([76d71f4](https://github.com/widergy/energy-ui/commit/76d71f4befad18fa1da9c43533cc53b95e3c673c))
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
# [3.169.0](https://github.com/widergy/energy-ui/compare/v3.168.0...v3.169.0) (2026-06-18)
|
|
16
16
|
|
|
17
|
+
### Novedades y Mejoras
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
* El selector desplegable ahora permite personalizar cómo se ve cada opción de la lista, tanto en modo de selección única como múltiple. [#821](https://github.com/widergy/Energy-UI/pull/821) [AXCH-1774](https://widergy.atlassian.net/browse/AXCH-1774)
|
|
20
|
+
|
|
21
|
+
# [3.168.0](https://github.com/widergy/energy-ui/compare/v3.167.1...v3.168.0) (2026-06-18)
|
|
22
|
+
|
|
23
|
+
### Novedades y Mejoras
|
|
24
|
+
|
|
25
|
+
* Se incorpora una nueva experiencia visual de carga: un indicador animado moderno que utiliza los colores e identidad propios de cada cliente, con efecto de brillo y logo centrado. La experiencia anterior se mantiene activa por defecto, garantizando que ningún flujo existente se vea afectado. [#815](https://github.com/widergy/Energy-UI/pull/815) [CX-2398](https://widergy.atlassian.net/browse/CX-2398)
|
|
26
|
+
* Durante la carga de secciones de la aplicación, el nuevo indicador visual ya puede mostrarse en pantalla completa o adaptado al contenedor, según el contexto de navegación. [#815](https://github.com/widergy/Energy-UI/pull/815) [CX-2398](https://widergy.atlassian.net/browse/CX-2398)
|
|
27
|
+
* Las vistas principales de la aplicación —resumen de cuentas, perfil de usuario, listado de cuentas, trámites, estado de corte, consumo, historial, atención al cliente y facturas— fueron actualizadas para aprovechar la nueva experiencia de carga cuando está habilitada. [#815](https://github.com/widergy/Energy-UI/pull/815) [CX-2398](https://widergy.atlassian.net/browse/CX-2398)
|
|
28
|
+
* El resumen de factura inteligente incorpora soporte para la nueva experiencia de carga, manteniendo compatibilidad total con la versión anterior. [#815](https://github.com/widergy/Energy-UI/pull/815) [CX-2398](https://widergy.atlassian.net/browse/CX-2398)
|
|
29
|
+
|
|
30
|
+
## [3.167.1](https://github.com/widergy/energy-ui/compare/v3.167.0...v3.167.1) (2026-06-18)
|
|
31
|
+
|
|
32
|
+
### Correcciones
|
|
19
33
|
|
|
20
|
-
*
|
|
34
|
+
* Mejoras internas de la plataforma. [#822](https://github.com/widergy/Energy-UI/pull/822) [`28c89f8`](https://github.com/widergy/Energy-UI/commit/28c89f8) [CX-9999](https://widergy.atlassian.net/browse/CX-9999)
|
|
21
35
|
|
|
22
36
|
# [3.167.0](https://github.com/widergy/energy-ui/compare/v3.166.1...v3.167.0) (2026-06-17)
|
|
23
37
|
|
|
@@ -20,6 +20,7 @@ const UTDotMenu = _ref => {
|
|
|
20
20
|
let {
|
|
21
21
|
className,
|
|
22
22
|
classNames = _constants.DEFAULT_PROPS.classNames,
|
|
23
|
+
dataTestId,
|
|
23
24
|
disabled,
|
|
24
25
|
Icon = _constants.DEFAULT_PROPS.Icon,
|
|
25
26
|
menuItemProps,
|
|
@@ -29,12 +30,14 @@ const UTDotMenu = _ref => {
|
|
|
29
30
|
} = _ref;
|
|
30
31
|
const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
|
|
31
32
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className: className
|
|
33
|
+
className: className,
|
|
34
|
+
"data-testid": dataTestId
|
|
33
35
|
}, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
34
36
|
classNames: {
|
|
35
37
|
icon: classNames.icon,
|
|
36
38
|
root: classNames.button
|
|
37
39
|
},
|
|
40
|
+
dataTestId: dataTestId ? "".concat(dataTestId, ".button") : undefined,
|
|
38
41
|
disabled: disabled,
|
|
39
42
|
Icon: Icon,
|
|
40
43
|
onClick: event => setAnchorEl(event.currentTarget),
|
|
@@ -52,15 +55,18 @@ const UTDotMenu = _ref => {
|
|
|
52
55
|
},
|
|
53
56
|
...(menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps)
|
|
54
57
|
}
|
|
55
|
-
}), options.map(option => {
|
|
58
|
+
}), options.map((option, index) => {
|
|
56
59
|
const {
|
|
57
60
|
colorTheme,
|
|
61
|
+
dataTestId: optionTestId,
|
|
58
62
|
icon,
|
|
59
63
|
iconProps,
|
|
60
64
|
name,
|
|
61
65
|
onPress
|
|
62
66
|
} = option;
|
|
67
|
+
const itemTestId = optionTestId !== null && optionTestId !== void 0 ? optionTestId : dataTestId ? "".concat(dataTestId, ".").concat(index) : undefined;
|
|
63
68
|
return /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({
|
|
69
|
+
"data-testid": itemTestId,
|
|
64
70
|
key: name,
|
|
65
71
|
onClick: onPress
|
|
66
72
|
}, menuItemProps), icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
|
|
@@ -78,12 +84,14 @@ UTDotMenu.propTypes = {
|
|
|
78
84
|
button: _propTypes.string,
|
|
79
85
|
icon: _propTypes.string
|
|
80
86
|
}),
|
|
87
|
+
dataTestId: _propTypes.string,
|
|
81
88
|
disabled: _propTypes.bool,
|
|
82
89
|
Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
|
|
83
90
|
menuItemProps: _propTypes.object,
|
|
84
91
|
menuProps: _propTypes.object,
|
|
85
92
|
options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
|
|
86
93
|
colorTheme: _propTypes.string,
|
|
94
|
+
dataTestId: _propTypes.string,
|
|
87
95
|
icon: _propTypes.string,
|
|
88
96
|
iconProps: _propTypes.object,
|
|
89
97
|
name: _propTypes.string,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.Small = exports.Playground = exports.IconoPersonalizado = exports.Default = exports.ConIconos = exports.ConIconProps = exports.BotonDeshabilitado = exports.AccionDestructiva = void 0;
|
|
6
|
+
exports.default = exports.Small = exports.Playground = exports.IconoPersonalizado = exports.Default = exports.ConTestIds = exports.ConIconos = exports.ConIconProps = exports.BotonDeshabilitado = exports.AccionDestructiva = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _ = _interopRequireDefault(require(".."));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -50,6 +50,18 @@ var _default = exports.default = {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
|
+
dataTestId: {
|
|
54
|
+
control: 'text',
|
|
55
|
+
description: 'Test id del contenedor raíz. El botón trigger recibe automáticamente el valor de esta prop con el sufijo `.button`. ' + 'Cada ítem del menú usa su propio `dataTestId` directamente (sin concatenación con el contenedor).',
|
|
56
|
+
table: {
|
|
57
|
+
defaultValue: {
|
|
58
|
+
summary: 'undefined'
|
|
59
|
+
},
|
|
60
|
+
type: {
|
|
61
|
+
summary: 'string'
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
53
65
|
classNames: {
|
|
54
66
|
control: false,
|
|
55
67
|
description: 'Clases personalizadas para el botón trigger. Acepta `button` e `icon`.',
|
|
@@ -112,13 +124,13 @@ var _default = exports.default = {
|
|
|
112
124
|
},
|
|
113
125
|
options: {
|
|
114
126
|
control: false,
|
|
115
|
-
description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme
|
|
127
|
+
description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme`, `iconProps` para props extra a UTIcon, ' + 'y `dataTestId` para identificar el ítem. El test id del ítem se usa directamente tal como se provee en la opción.',
|
|
116
128
|
table: {
|
|
117
129
|
defaultValue: {
|
|
118
130
|
summary: 'undefined'
|
|
119
131
|
},
|
|
120
132
|
type: {
|
|
121
|
-
summary: 'arrayOf(shape({ name, onPress, colorTheme?, icon?, iconProps? }))'
|
|
133
|
+
summary: 'arrayOf(shape({ name, onPress, colorTheme?, dataTestId?, icon?, iconProps? }))'
|
|
122
134
|
}
|
|
123
135
|
}
|
|
124
136
|
},
|
|
@@ -262,6 +274,33 @@ const ConIconProps = exports.ConIconProps = {
|
|
|
262
274
|
}
|
|
263
275
|
}
|
|
264
276
|
};
|
|
277
|
+
const ConTestIds = exports.ConTestIds = {
|
|
278
|
+
args: {
|
|
279
|
+
dataTestId: 'section.dotMenu',
|
|
280
|
+
options: [{
|
|
281
|
+
name: 'Editar',
|
|
282
|
+
icon: 'IconPencil',
|
|
283
|
+
dataTestId: 'section.dotMenu.edit'
|
|
284
|
+
}, {
|
|
285
|
+
name: 'Duplicar',
|
|
286
|
+
icon: 'IconCopy',
|
|
287
|
+
dataTestId: 'section.dotMenu.duplicate'
|
|
288
|
+
}, {
|
|
289
|
+
name: 'Eliminar',
|
|
290
|
+
icon: 'IconTrash',
|
|
291
|
+
colorTheme: 'error',
|
|
292
|
+
dataTestId: 'section.dotMenu.delete'
|
|
293
|
+
}]
|
|
294
|
+
},
|
|
295
|
+
name: 'Con test ids',
|
|
296
|
+
parameters: {
|
|
297
|
+
docs: {
|
|
298
|
+
description: {
|
|
299
|
+
story: 'El contenedor recibe `dataTestId="section.dotMenu"` y el botón trigger recibe `"section.dotMenu.button"` automáticamente. ' + 'Cada ítem usa su propio `dataTestId` tal como se provee, sin concatenación con el contenedor.'
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
};
|
|
265
304
|
const BotonDeshabilitado = exports.BotonDeshabilitado = {
|
|
266
305
|
args: {
|
|
267
306
|
disabled: true,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
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;
|
|
6
|
+
exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPretitle = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithAdditionalContentDisabled = exports.V1WithAdditionalContentBadge = exports.V1WithAdditionalContent = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _utils = require("stories/utils");
|
|
9
9
|
var _UTLabel = _interopRequireDefault(require("../UTLabel"));
|
|
@@ -945,6 +945,54 @@ const V1WithAdditionalContentBadge = exports.V1WithAdditionalContentBadge = {
|
|
|
945
945
|
}
|
|
946
946
|
}
|
|
947
947
|
};
|
|
948
|
+
const V1WithAdditionalContentDisabled = exports.V1WithAdditionalContentDisabled = {
|
|
949
|
+
args: {
|
|
950
|
+
version: 'V1',
|
|
951
|
+
open: false,
|
|
952
|
+
title: 'Panel con Item Deshabilitado',
|
|
953
|
+
subtitle: 'Sidebar con un ítem inaccesible',
|
|
954
|
+
panelSide: 'right',
|
|
955
|
+
size: 'M',
|
|
956
|
+
additionalContent: [{
|
|
957
|
+
id: 'settings',
|
|
958
|
+
Icon: 'IconSettings',
|
|
959
|
+
BodyComponent: SettingsBodyComponent,
|
|
960
|
+
tooltipProps: {
|
|
961
|
+
content: 'Configuración'
|
|
962
|
+
}
|
|
963
|
+
}, {
|
|
964
|
+
id: 'notifications',
|
|
965
|
+
Icon: 'IconBell',
|
|
966
|
+
disabled: true,
|
|
967
|
+
BodyComponent: NotificationsBodyComponent,
|
|
968
|
+
tooltipProps: {
|
|
969
|
+
content: 'Notificaciones (no disponible)'
|
|
970
|
+
}
|
|
971
|
+
}, {
|
|
972
|
+
id: 'help',
|
|
973
|
+
Icon: 'IconHelpCircle',
|
|
974
|
+
BodyComponent: HelpBodyComponent,
|
|
975
|
+
tooltipProps: {
|
|
976
|
+
content: 'Ayuda'
|
|
977
|
+
}
|
|
978
|
+
}],
|
|
979
|
+
children: /*#__PURE__*/_react.default.createElement("div", {
|
|
980
|
+
style: {
|
|
981
|
+
padding: '16px'
|
|
982
|
+
}
|
|
983
|
+
}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
984
|
+
variant: "body1"
|
|
985
|
+
}, "El \xEDcono de Notificaciones tiene ", /*#__PURE__*/_react.default.createElement("code", null, "disabled: true"), " y no puede seleccionarse."))
|
|
986
|
+
},
|
|
987
|
+
name: 'V1 - Sidebar con Item Deshabilitado',
|
|
988
|
+
parameters: {
|
|
989
|
+
docs: {
|
|
990
|
+
description: {
|
|
991
|
+
story: 'Usa `disabled: true` en un item de `additionalContent` para deshabilitar el botón de ese item en la sidebar. Los demás items funcionan normalmente.'
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
}
|
|
995
|
+
};
|
|
948
996
|
const Playground = exports.Playground = {
|
|
949
997
|
args: {
|
|
950
998
|
version: 'V1',
|
|
@@ -44,3 +44,17 @@ Component used for displaying a side panel.
|
|
|
44
44
|
| showBackButton | boolean | false | Shows a go back arrow button |
|
|
45
45
|
| showTag | bool | false | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag. |
|
|
46
46
|
| tagProps | object | {} | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus) |
|
|
47
|
+
| additionalContent | array | | Array of sidebar items rendered in a collapsible side panel. See structure below. |
|
|
48
|
+
|
|
49
|
+
### `additionalContent` item structure
|
|
50
|
+
|
|
51
|
+
Each object in the array can contain:
|
|
52
|
+
|
|
53
|
+
| Field | Type | Required | Description |
|
|
54
|
+
| :-------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------ |
|
|
55
|
+
| `id` | `string` | ✅ | Unique identifier for the item. Used as the active key and as part of the sidebar button testId. |
|
|
56
|
+
| `Icon` | `string` | ✅ | Tabler icon name for the sidebar button (e.g. `'IconSettings'`). |
|
|
57
|
+
| `BodyComponent` | `elementType` | ✅ | React component rendered in the expanded content area when this item is active. |
|
|
58
|
+
| `tooltipProps` | `object` | ✅ | Props passed to the `UTTooltip` wrapping the sidebar button. Must include `content`. |
|
|
59
|
+
| `count` | `number` | — | When greater than 0, shows a numeric badge over the sidebar icon. |
|
|
60
|
+
| `disabled` | `bool` | — | When `true`, the sidebar button is disabled and the item cannot be selected. |
|
|
@@ -78,6 +78,7 @@ const AdditionalContentModule = _ref => {
|
|
|
78
78
|
colorTheme: activeId === item.id ? 'primary' : 'gray',
|
|
79
79
|
className: _stylesModule.default.sidebarButton,
|
|
80
80
|
dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
|
|
81
|
+
disabled: item.disabled,
|
|
81
82
|
Icon: item.Icon,
|
|
82
83
|
onClick: () => onSelectItem(activeId === item.id ? null : item.id),
|
|
83
84
|
size: "medium",
|
|
@@ -95,6 +96,7 @@ const AdditionalContentModule = _ref => {
|
|
|
95
96
|
};
|
|
96
97
|
AdditionalContentModule.propTypes = {
|
|
97
98
|
additionalContent: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
|
|
99
|
+
disabled: _propTypes.bool,
|
|
98
100
|
id: _propTypes.string.isRequired,
|
|
99
101
|
Icon: _propTypes.string.isRequired,
|
|
100
102
|
count: _propTypes.number,
|
|
@@ -12,6 +12,7 @@ const UTDotMenu = _ref => {
|
|
|
12
12
|
let {
|
|
13
13
|
className,
|
|
14
14
|
classNames = DEFAULT_PROPS.classNames,
|
|
15
|
+
dataTestId,
|
|
15
16
|
disabled,
|
|
16
17
|
Icon = DEFAULT_PROPS.Icon,
|
|
17
18
|
menuItemProps,
|
|
@@ -21,12 +22,14 @@ const UTDotMenu = _ref => {
|
|
|
21
22
|
} = _ref;
|
|
22
23
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
23
24
|
return /*#__PURE__*/React.createElement("div", {
|
|
24
|
-
className: className
|
|
25
|
+
className: className,
|
|
26
|
+
"data-testid": dataTestId
|
|
25
27
|
}, /*#__PURE__*/React.createElement(UTButton, {
|
|
26
28
|
classNames: {
|
|
27
29
|
icon: classNames.icon,
|
|
28
30
|
root: classNames.button
|
|
29
31
|
},
|
|
32
|
+
dataTestId: dataTestId ? "".concat(dataTestId, ".button") : undefined,
|
|
30
33
|
disabled: disabled,
|
|
31
34
|
Icon: Icon,
|
|
32
35
|
onClick: event => setAnchorEl(event.currentTarget),
|
|
@@ -44,15 +47,18 @@ const UTDotMenu = _ref => {
|
|
|
44
47
|
},
|
|
45
48
|
...(menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps)
|
|
46
49
|
}
|
|
47
|
-
}), options.map(option => {
|
|
50
|
+
}), options.map((option, index) => {
|
|
48
51
|
const {
|
|
49
52
|
colorTheme,
|
|
53
|
+
dataTestId: optionTestId,
|
|
50
54
|
icon,
|
|
51
55
|
iconProps,
|
|
52
56
|
name,
|
|
53
57
|
onPress
|
|
54
58
|
} = option;
|
|
59
|
+
const itemTestId = optionTestId !== null && optionTestId !== void 0 ? optionTestId : dataTestId ? "".concat(dataTestId, ".").concat(index) : undefined;
|
|
55
60
|
return /*#__PURE__*/React.createElement(MenuItem, _extends({
|
|
61
|
+
"data-testid": itemTestId,
|
|
56
62
|
key: name,
|
|
57
63
|
onClick: onPress
|
|
58
64
|
}, menuItemProps), icon && /*#__PURE__*/React.createElement(UTIcon, _extends({
|
|
@@ -70,12 +76,14 @@ UTDotMenu.propTypes = {
|
|
|
70
76
|
button: string,
|
|
71
77
|
icon: string
|
|
72
78
|
}),
|
|
79
|
+
dataTestId: string,
|
|
73
80
|
disabled: bool,
|
|
74
81
|
Icon: oneOfType([elementType, string]),
|
|
75
82
|
menuItemProps: object,
|
|
76
83
|
menuProps: object,
|
|
77
84
|
options: arrayOf(shape({
|
|
78
85
|
colorTheme: string,
|
|
86
|
+
dataTestId: string,
|
|
79
87
|
icon: string,
|
|
80
88
|
iconProps: object,
|
|
81
89
|
name: string,
|
|
@@ -42,6 +42,18 @@ export default {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
+
dataTestId: {
|
|
46
|
+
control: 'text',
|
|
47
|
+
description: 'Test id del contenedor raíz. El botón trigger recibe automáticamente el valor de esta prop con el sufijo `.button`. ' + 'Cada ítem del menú usa su propio `dataTestId` directamente (sin concatenación con el contenedor).',
|
|
48
|
+
table: {
|
|
49
|
+
defaultValue: {
|
|
50
|
+
summary: 'undefined'
|
|
51
|
+
},
|
|
52
|
+
type: {
|
|
53
|
+
summary: 'string'
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
},
|
|
45
57
|
classNames: {
|
|
46
58
|
control: false,
|
|
47
59
|
description: 'Clases personalizadas para el botón trigger. Acepta `button` e `icon`.',
|
|
@@ -104,13 +116,13 @@ export default {
|
|
|
104
116
|
},
|
|
105
117
|
options: {
|
|
106
118
|
control: false,
|
|
107
|
-
description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme
|
|
119
|
+
description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme`, `iconProps` para props extra a UTIcon, ' + 'y `dataTestId` para identificar el ítem. El test id del ítem se usa directamente tal como se provee en la opción.',
|
|
108
120
|
table: {
|
|
109
121
|
defaultValue: {
|
|
110
122
|
summary: 'undefined'
|
|
111
123
|
},
|
|
112
124
|
type: {
|
|
113
|
-
summary: 'arrayOf(shape({ name, onPress, colorTheme?, icon?, iconProps? }))'
|
|
125
|
+
summary: 'arrayOf(shape({ name, onPress, colorTheme?, dataTestId?, icon?, iconProps? }))'
|
|
114
126
|
}
|
|
115
127
|
}
|
|
116
128
|
},
|
|
@@ -254,6 +266,33 @@ export const ConIconProps = {
|
|
|
254
266
|
}
|
|
255
267
|
}
|
|
256
268
|
};
|
|
269
|
+
export const ConTestIds = {
|
|
270
|
+
args: {
|
|
271
|
+
dataTestId: 'section.dotMenu',
|
|
272
|
+
options: [{
|
|
273
|
+
name: 'Editar',
|
|
274
|
+
icon: 'IconPencil',
|
|
275
|
+
dataTestId: 'section.dotMenu.edit'
|
|
276
|
+
}, {
|
|
277
|
+
name: 'Duplicar',
|
|
278
|
+
icon: 'IconCopy',
|
|
279
|
+
dataTestId: 'section.dotMenu.duplicate'
|
|
280
|
+
}, {
|
|
281
|
+
name: 'Eliminar',
|
|
282
|
+
icon: 'IconTrash',
|
|
283
|
+
colorTheme: 'error',
|
|
284
|
+
dataTestId: 'section.dotMenu.delete'
|
|
285
|
+
}]
|
|
286
|
+
},
|
|
287
|
+
name: 'Con test ids',
|
|
288
|
+
parameters: {
|
|
289
|
+
docs: {
|
|
290
|
+
description: {
|
|
291
|
+
story: 'El contenedor recibe `dataTestId="section.dotMenu"` y el botón trigger recibe `"section.dotMenu.button"` automáticamente. ' + 'Cada ítem usa su propio `dataTestId` tal como se provee, sin concatenación con el contenedor.'
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
};
|
|
257
296
|
export const BotonDeshabilitado = {
|
|
258
297
|
args: {
|
|
259
298
|
disabled: true,
|
|
@@ -939,6 +939,54 @@ export const V1WithAdditionalContentBadge = {
|
|
|
939
939
|
}
|
|
940
940
|
}
|
|
941
941
|
};
|
|
942
|
+
export const V1WithAdditionalContentDisabled = {
|
|
943
|
+
args: {
|
|
944
|
+
version: 'V1',
|
|
945
|
+
open: false,
|
|
946
|
+
title: 'Panel con Item Deshabilitado',
|
|
947
|
+
subtitle: 'Sidebar con un ítem inaccesible',
|
|
948
|
+
panelSide: 'right',
|
|
949
|
+
size: 'M',
|
|
950
|
+
additionalContent: [{
|
|
951
|
+
id: 'settings',
|
|
952
|
+
Icon: 'IconSettings',
|
|
953
|
+
BodyComponent: SettingsBodyComponent,
|
|
954
|
+
tooltipProps: {
|
|
955
|
+
content: 'Configuración'
|
|
956
|
+
}
|
|
957
|
+
}, {
|
|
958
|
+
id: 'notifications',
|
|
959
|
+
Icon: 'IconBell',
|
|
960
|
+
disabled: true,
|
|
961
|
+
BodyComponent: NotificationsBodyComponent,
|
|
962
|
+
tooltipProps: {
|
|
963
|
+
content: 'Notificaciones (no disponible)'
|
|
964
|
+
}
|
|
965
|
+
}, {
|
|
966
|
+
id: 'help',
|
|
967
|
+
Icon: 'IconHelpCircle',
|
|
968
|
+
BodyComponent: HelpBodyComponent,
|
|
969
|
+
tooltipProps: {
|
|
970
|
+
content: 'Ayuda'
|
|
971
|
+
}
|
|
972
|
+
}],
|
|
973
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
974
|
+
style: {
|
|
975
|
+
padding: '16px'
|
|
976
|
+
}
|
|
977
|
+
}, /*#__PURE__*/React.createElement(UTLabel, {
|
|
978
|
+
variant: "body1"
|
|
979
|
+
}, "El \xEDcono de Notificaciones tiene ", /*#__PURE__*/React.createElement("code", null, "disabled: true"), " y no puede seleccionarse."))
|
|
980
|
+
},
|
|
981
|
+
name: 'V1 - Sidebar con Item Deshabilitado',
|
|
982
|
+
parameters: {
|
|
983
|
+
docs: {
|
|
984
|
+
description: {
|
|
985
|
+
story: 'Usa `disabled: true` en un item de `additionalContent` para deshabilitar el botón de ese item en la sidebar. Los demás items funcionan normalmente.'
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
}
|
|
989
|
+
};
|
|
942
990
|
export const Playground = {
|
|
943
991
|
args: {
|
|
944
992
|
version: 'V1',
|
|
@@ -44,3 +44,17 @@ Component used for displaying a side panel.
|
|
|
44
44
|
| showBackButton | boolean | false | Shows a go back arrow button |
|
|
45
45
|
| showTag | bool | false | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag. |
|
|
46
46
|
| tagProps | object | {} | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus) |
|
|
47
|
+
| additionalContent | array | | Array of sidebar items rendered in a collapsible side panel. See structure below. |
|
|
48
|
+
|
|
49
|
+
### `additionalContent` item structure
|
|
50
|
+
|
|
51
|
+
Each object in the array can contain:
|
|
52
|
+
|
|
53
|
+
| Field | Type | Required | Description |
|
|
54
|
+
| :-------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------ |
|
|
55
|
+
| `id` | `string` | ✅ | Unique identifier for the item. Used as the active key and as part of the sidebar button testId. |
|
|
56
|
+
| `Icon` | `string` | ✅ | Tabler icon name for the sidebar button (e.g. `'IconSettings'`). |
|
|
57
|
+
| `BodyComponent` | `elementType` | ✅ | React component rendered in the expanded content area when this item is active. |
|
|
58
|
+
| `tooltipProps` | `object` | ✅ | Props passed to the `UTTooltip` wrapping the sidebar button. Must include `content`. |
|
|
59
|
+
| `count` | `number` | — | When greater than 0, shows a numeric badge over the sidebar icon. |
|
|
60
|
+
| `disabled` | `bool` | — | When `true`, the sidebar button is disabled and the item cannot be selected. |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
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); }
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
|
-
import { arrayOf, elementType, func, number, object, shape, string } from 'prop-types';
|
|
3
|
+
import { arrayOf, bool, elementType, func, number, object, shape, string } from 'prop-types';
|
|
4
4
|
import 'react-perfect-scrollbar/dist/css/styles.css';
|
|
5
5
|
import PerfectScrollbar from 'react-perfect-scrollbar';
|
|
6
6
|
import UTButton from '../../../../../UTButton';
|
|
@@ -70,6 +70,7 @@ const AdditionalContentModule = _ref => {
|
|
|
70
70
|
colorTheme: activeId === item.id ? 'primary' : 'gray',
|
|
71
71
|
className: styles.sidebarButton,
|
|
72
72
|
dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
|
|
73
|
+
disabled: item.disabled,
|
|
73
74
|
Icon: item.Icon,
|
|
74
75
|
onClick: () => onSelectItem(activeId === item.id ? null : item.id),
|
|
75
76
|
size: "medium",
|
|
@@ -87,6 +88,7 @@ const AdditionalContentModule = _ref => {
|
|
|
87
88
|
};
|
|
88
89
|
AdditionalContentModule.propTypes = {
|
|
89
90
|
additionalContent: arrayOf(shape({
|
|
91
|
+
disabled: bool,
|
|
90
92
|
id: string.isRequired,
|
|
91
93
|
Icon: string.isRequired,
|
|
92
94
|
count: number,
|