@widergy/energy-ui 3.172.0 → 3.172.2

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.
Files changed (28) hide show
  1. package/CHANGELOG.md +19 -2
  2. package/dist/components/UTButton/constants.js +2 -0
  3. package/dist/components/UTButton/index.js +6 -3
  4. package/dist/components/UTButton/stories/UTButtonSizes.stories.js +16 -1
  5. package/dist/components/UTButton/stories/storiesConstants.js +26 -0
  6. package/dist/components/UTButton/styles.module.scss +10 -0
  7. package/dist/components/UTButton/theme.js +1 -1
  8. package/dist/components/UTButton/utils.js +1 -4
  9. package/dist/components/UTDataCategory/theme.js +1 -1
  10. package/dist/components/UTDataElement/README.md +1 -1
  11. package/dist/components/UTStatusMessage/index.js +3 -1
  12. package/dist/components/UTStatusMessage/styles.module.scss +1 -1
  13. package/dist/components/UTStatusMessage/theme.js +10 -6
  14. package/dist/components/UTTracker/UTTracker.stories.js +332 -0
  15. package/dist/esm/components/UTButton/constants.js +2 -0
  16. package/dist/esm/components/UTButton/index.js +6 -3
  17. package/dist/esm/components/UTButton/stories/UTButtonSizes.stories.js +15 -0
  18. package/dist/esm/components/UTButton/stories/storiesConstants.js +26 -0
  19. package/dist/esm/components/UTButton/styles.module.scss +10 -0
  20. package/dist/esm/components/UTButton/theme.js +1 -1
  21. package/dist/esm/components/UTButton/utils.js +1 -4
  22. package/dist/esm/components/UTDataCategory/theme.js +2 -2
  23. package/dist/esm/components/UTDataElement/README.md +1 -1
  24. package/dist/esm/components/UTStatusMessage/index.js +3 -1
  25. package/dist/esm/components/UTStatusMessage/styles.module.scss +1 -1
  26. package/dist/esm/components/UTStatusMessage/theme.js +10 -6
  27. package/dist/esm/components/UTTracker/UTTracker.stories.js +325 -0
  28. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,9 +1,26 @@
1
+ ## [3.172.2](https://github.com/widergy/energy-ui/compare/v3.172.1...v3.172.2) (2026-07-03)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * [PQRR-146] UTStatusMessage icon size and color adjustments ([#833](https://github.com/widergy/energy-ui/issues/833)) ([9ecabd1](https://github.com/widergy/energy-ui/commit/9ecabd142a86540f35a10f1fdc1435b27bcc5e13))
7
+
8
+ ## [3.172.1](https://github.com/widergy/energy-ui/compare/v3.172.0...v3.172.1) (2026-07-03)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * [DIS-1108] ajustes utbutton ([#824](https://github.com/widergy/energy-ui/issues/824)) ([46b1ef8](https://github.com/widergy/energy-ui/commit/46b1ef8e07217bd75451b962236f98790c544f4b))
14
+
1
15
  # [3.172.0](https://github.com/widergy/energy-ui/compare/v3.171.3...v3.172.0) (2026-07-02)
2
16
 
17
+ ### Novedades y Mejoras
3
18
 
4
- ### Features
19
+ * En los selectores desplegables, ahora es posible fijar una opción al pie de la lista que permanece siempre visible, incluso al filtrar por búsqueda o al no encontrar resultados. [#830](https://github.com/widergy/Energy-UI/pull/830) [AXCH-1900](https://widergy.atlassian.net/browse/AXCH-1900)
20
+
21
+ ### Correcciones
5
22
 
6
- * [AXCH-1900] fixed bottom option in utselectv1 ([#830](https://github.com/widergy/energy-ui/issues/830)) ([c331ebf](https://github.com/widergy/energy-ui/commit/c331ebfb0cc2d2f02617943ae8ef36c566579793))
23
+ * Mejoras internas de la plataforma. [`56be941`](https://github.com/widergy/Energy-UI/commit/56be941)
7
24
 
8
25
  ## [3.171.3](https://github.com/widergy/energy-ui/compare/v3.171.2...v3.171.3) (2026-06-29)
9
26
 
package/dist/components/UTButton/constants.js CHANGED
@@ -24,6 +24,8 @@ const ICON_PLACEMENTS = exports.ICON_PLACEMENTS = {
24
24
  const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
25
25
  colorTheme: 'secondary',
26
26
  disabled: false,
27
+ fullHeight: false,
28
+ fullWidth: false,
27
29
  hideTextOnResponsive: false,
28
30
  iconPlacement: ICON_PLACEMENTS.left,
29
31
  loading: false,
package/dist/components/UTButton/index.js CHANGED
@@ -29,6 +29,8 @@ const UTButton = _ref => {
29
29
  count,
30
30
  dataTestId,
31
31
  disabled,
32
+ fullHeight,
33
+ fullWidth,
32
34
  hideTextOnResponsive,
33
35
  Icon,
34
36
  iconPlacement,
@@ -58,7 +60,6 @@ const UTButton = _ref => {
58
60
  } = (0, _react.useMemo)(() => (0, _utils.getIconProps)({
59
61
  className: icon,
60
62
  colorTheme,
61
- hasContent: !!children,
62
63
  hideTextOnResponsive,
63
64
  Icon,
64
65
  iconPlacement,
@@ -66,7 +67,7 @@ const UTButton = _ref => {
66
67
  RightIcon,
67
68
  size,
68
69
  variant
69
- }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
70
+ }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
70
71
  const LeftIconToShow = LeftIconComponent && /*#__PURE__*/_react.default.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
71
72
  const RightIconToShow = RightIconComponent && /*#__PURE__*/_react.default.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
72
73
  const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
@@ -80,7 +81,7 @@ const UTButton = _ref => {
80
81
  }), children), RightIconToShow);
81
82
  return /*#__PURE__*/_react.default.createElement(_Button.default, {
82
83
  classes: materialButtonClasses,
83
- className: "\n ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n "),
84
+ className: "\n ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n ").concat(fullHeight && _stylesModule.default.fullHeight, "\n ").concat(fullWidth && _stylesModule.default.fullWidth, "\n ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n "),
84
85
  "data-testid": dataTestId,
85
86
  disabled: disabled || loading,
86
87
  onClick: onClick,
@@ -98,6 +99,8 @@ UTButton.propTypes = {
98
99
  count: _propTypes.number,
99
100
  dataTestId: _propTypes.string,
100
101
  disabled: _propTypes.bool,
102
+ fullHeight: _propTypes.bool,
103
+ fullWidth: _propTypes.bool,
101
104
  hideTextOnResponsive: _propTypes.bool,
102
105
  /**
103
106
  * @deprecated Use LeftIcon or RightIcon instead.
package/dist/components/UTButton/stories/UTButtonSizes.stories.js CHANGED
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.Small = exports.Medium = exports.Large = void 0;
6
+ exports.default = exports.Small = exports.Medium = exports.Large = exports.FullHeight = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
7
8
  var _ = _interopRequireDefault(require(".."));
8
9
  var _storiesConstants = require("./storiesConstants");
9
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -37,4 +38,18 @@ const Large = exports.Large = {
37
38
  children: 'Large Size',
38
39
  size: 'large'
39
40
  }
41
+ };
42
+ const FullHeight = exports.FullHeight = {
43
+ args: {
44
+ children: 'Full Height',
45
+ fullHeight: true
46
+ },
47
+ render: args => /*#__PURE__*/_react.default.createElement("div", {
48
+ style: {
49
+ display: 'flex',
50
+ height: 80,
51
+ border: '1px dashed #ccc',
52
+ padding: 8
53
+ }
54
+ }, /*#__PURE__*/_react.default.createElement(_.default, args))
40
55
  };
package/dist/components/UTButton/stories/storiesConstants.js CHANGED
@@ -93,6 +93,30 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
93
93
  }
94
94
  }
95
95
  },
96
+ fullHeight: {
97
+ control: 'boolean',
98
+ description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
99
+ table: {
100
+ defaultValue: {
101
+ summary: _constants.DEFAULT_PROPS.fullHeight
102
+ },
103
+ type: {
104
+ summary: 'boolean'
105
+ }
106
+ }
107
+ },
108
+ fullWidth: {
109
+ control: 'boolean',
110
+ description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
111
+ table: {
112
+ defaultValue: {
113
+ summary: _constants.DEFAULT_PROPS.fullWidth
114
+ },
115
+ type: {
116
+ summary: 'boolean'
117
+ }
118
+ }
119
+ },
96
120
  hideTextOnResponsive: {
97
121
  control: 'boolean',
98
122
  description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
@@ -222,6 +246,8 @@ const COMMON_ARGS = exports.COMMON_ARGS = {
222
246
  colorTheme: _constants.DEFAULT_PROPS.colorTheme,
223
247
  dataTestId: 'customButtonId',
224
248
  disabled: _constants.DEFAULT_PROPS.disabled,
249
+ fullHeight: _constants.DEFAULT_PROPS.fullHeight,
250
+ fullWidth: _constants.DEFAULT_PROPS.fullWidth,
225
251
  hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
226
252
  loading: _constants.DEFAULT_PROPS.loading,
227
253
  size: _constants.DEFAULT_PROPS.size,
package/dist/components/UTButton/styles.module.scss CHANGED
@@ -65,6 +65,16 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
65
65
  padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
66
66
  }
67
67
 
68
+ .fullHeight {
69
+ min-height: unset;
70
+ height: 100%;
71
+ }
72
+
73
+ .fullWidth {
74
+ min-width: unset;
75
+ width: 100%;
76
+ }
77
+
68
78
  .hideTextOnResponsive {
69
79
  .textContainer {
70
80
  @media #{$mobile} {
package/dist/components/UTButton/theme.js CHANGED
@@ -50,7 +50,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
50
50
  }
51
51
  },
52
52
  [_constants.VARIANTS_NAMES.outlined]: {
53
- border: "1px solid ".concat(actionColorName === _constants.COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
53
+ border: "1px solid ".concat(lightTheme['04']),
54
54
  fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
55
55
  '&:hover': {
56
56
  backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
package/dist/components/UTButton/utils.js CHANGED
@@ -15,7 +15,6 @@ const buildSingleIconProps = _ref => {
15
15
  let {
16
16
  className,
17
17
  colorTheme,
18
- hasContent,
19
18
  hideTextOnResponsive,
20
19
  Icon,
21
20
  size,
@@ -24,7 +23,7 @@ const buildSingleIconProps = _ref => {
24
23
  if (!Icon) return null;
25
24
  return {
26
25
  IconComponent: (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon,
27
- className: "\n ".concat(_stylesModule.default.baseIcon, "\n ").concat(className, "\n ").concat(hasContent ? _stylesModule.default.icon : _stylesModule.default["iconOnly".concat((0, _componentUtils.capitalize)(size))], "\n ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n "),
26
+ className: "\n ".concat(_stylesModule.default.baseIcon, "\n ").concat(className, "\n ").concat(_stylesModule.default.icon, "\n ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n "),
28
27
  ...((0, _componentUtils.isUTIcon)(Icon) ? {
29
28
  colorTheme: getButtonElementColorTheme(colorTheme, variant),
30
29
  name: Icon
@@ -35,7 +34,6 @@ const getIconProps = _ref2 => {
35
34
  let {
36
35
  className,
37
36
  colorTheme,
38
- hasContent,
39
37
  hideTextOnResponsive,
40
38
  Icon,
41
39
  iconPlacement,
@@ -49,7 +47,6 @@ const getIconProps = _ref2 => {
49
47
  const commonParams = {
50
48
  className,
51
49
  colorTheme,
52
- hasContent,
53
50
  hideTextOnResponsive,
54
51
  size,
55
52
  variant
package/dist/components/UTDataCategory/theme.js CHANGED
@@ -11,7 +11,7 @@ const backgroundColor = function (theme, area) {
11
11
  const colorTheme = areaProps.colorTheme || _Palette.COLOR_THEMES.light;
12
12
  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
13
13
  const areaColor = actionPaletteColors[colorTheme];
14
- const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? '03' : '01');
14
+ const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
15
15
  return {
16
16
  backgroundColor: area ? areaColor[shade] : 'transparent'
17
17
  };
package/dist/components/UTDataElement/README.md CHANGED
@@ -134,4 +134,4 @@ If the component has any `children`, it will automatically become collapsible wi
134
134
 
135
135
  ```javascript
136
136
  <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
137
- ```
137
+ ```
package/dist/components/UTStatusMessage/index.js CHANGED
@@ -31,7 +31,9 @@ const UTStatusMessage = _ref => {
31
31
  helpText,
32
32
  helpTextProps,
33
33
  icon = 'IconInfoCircle',
34
- iconProps = {},
34
+ iconProps = {
35
+ size: 40
36
+ },
35
37
  loading,
36
38
  primaryAction,
37
39
  primaryActionProps,
package/dist/components/UTStatusMessage/styles.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  flex-grow: 1;
6
- grid-gap: 24px;
6
+ grid-gap: 12px;
7
7
  justify-content: center;
8
8
  width: 100%;
9
9
  }
package/dist/components/UTStatusMessage/theme.js CHANGED
@@ -17,10 +17,10 @@ const getIconBackgroundColor = (colorTheme, theme) => {
17
17
  [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
18
18
  [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
19
19
  [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
20
- [_constants.COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['01'],
20
+ [_constants.COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['02'],
21
21
  [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1.light['01'],
22
- [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['01'],
23
- [_constants.COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['01']
22
+ [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['02'],
23
+ [_constants.COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['02']
24
24
  }[colorTheme];
25
25
  };
26
26
  const getBannerBackgroundColor = (colorTheme, theme) => {
@@ -46,9 +46,13 @@ const retrieveStyle = _ref => {
46
46
  let {
47
47
  showBanner = true,
48
48
  theme,
49
- colorTheme = _constants.COLOR_THEMES.DEFAULT
49
+ colorTheme = _constants.COLOR_THEMES.DEFAULT,
50
+ iconProps = {}
50
51
  } = _ref;
51
52
  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
53
+ const {
54
+ size = 40
55
+ } = iconProps;
52
56
  return {
53
57
  iconContainer: {
54
58
  alignItems: 'center',
@@ -56,9 +60,9 @@ const retrieveStyle = _ref => {
56
60
  backgroundColor: getIconBackgroundColor(colorTheme, theme),
57
61
  borderRadius: 100,
58
62
  display: 'flex',
59
- height: 56,
63
+ height: size * 1.85,
60
64
  justifyContent: 'center',
61
- width: 56
65
+ width: size * 1.85
62
66
  },
63
67
  banner: {
64
68
  alignItems: 'center',
package/dist/components/UTTracker/UTTracker.stories.js ADDED
@@ -0,0 +1,332 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.WithoutTitle = exports.WithoutDetailsTab = exports.FlatMode = exports.ErrorVariant = exports.Default = exports.CardMode = exports.AllVariants = exports.AllModes = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _utils = require("stories/utils");
9
+ var _constants = require("./constants");
10
+ var _ = _interopRequireDefault(require("."));
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ 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); }
13
+ const subSteps = [{
14
+ id: 1,
15
+ subtitle: '02 noviembre 2023, 4:38 PM',
16
+ title: 'Description Step'
17
+ }, {
18
+ id: 2,
19
+ subtitle: '02 noviembre 2023, 4:38 PM',
20
+ title: 'Description Step'
21
+ }, {
22
+ id: 3,
23
+ subtitle: '02 noviembre 2023, 4:38 PM',
24
+ title: 'Description Step'
25
+ }];
26
+ const defaultSteps = [{
27
+ id: 1,
28
+ subSteps,
29
+ title: 'Solicitud confirmada'
30
+ }, {
31
+ id: 2,
32
+ subSteps,
33
+ title: 'En preparación'
34
+ }, {
35
+ id: 3,
36
+ title: 'En camino'
37
+ }, {
38
+ description: 'Fecha estimada 07 de agosto',
39
+ id: 4,
40
+ title: 'Entregado'
41
+ }];
42
+ var _default = exports.default = {
43
+ args: {
44
+ currentStep: 2,
45
+ description: 'Hora estimada de entrega 7:00 PM',
46
+ detailsTab: {
47
+ enabled: true,
48
+ title: 'Ver Detalle'
49
+ },
50
+ mode: _constants.CARD,
51
+ steps: defaultSteps,
52
+ subtitle: '',
53
+ title: 'Pedido en curso',
54
+ variant: _constants.STANDARD
55
+ },
56
+ argTypes: {
57
+ classes: {
58
+ control: false,
59
+ description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
60
+ table: {
61
+ defaultValue: {
62
+ summary: '{}'
63
+ },
64
+ type: {
65
+ summary: 'objectOf(string)'
66
+ }
67
+ }
68
+ },
69
+ classNames: {
70
+ control: false,
71
+ description: 'Objeto de clases CSS para override de estilos internos.',
72
+ table: {
73
+ defaultValue: {
74
+ summary: 'undefined'
75
+ },
76
+ type: {
77
+ summary: 'objectOf(string)'
78
+ }
79
+ }
80
+ },
81
+ currentStep: {
82
+ control: 'number',
83
+ description: 'Número del paso activo actualmente.',
84
+ table: {
85
+ defaultValue: {
86
+ summary: 'undefined'
87
+ },
88
+ type: {
89
+ summary: 'number'
90
+ }
91
+ }
92
+ },
93
+ description: {
94
+ control: 'text',
95
+ description: 'Texto descriptivo que aparece debajo del subtítulo.',
96
+ table: {
97
+ defaultValue: {
98
+ summary: 'undefined'
99
+ },
100
+ type: {
101
+ summary: 'string'
102
+ }
103
+ }
104
+ },
105
+ detailsTab: {
106
+ control: 'object',
107
+ description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
108
+ table: {
109
+ defaultValue: {
110
+ summary: 'undefined'
111
+ },
112
+ type: {
113
+ summary: '{ enabled: boolean, title: string }'
114
+ }
115
+ }
116
+ },
117
+ mode: {
118
+ control: 'inline-radio',
119
+ description: 'Determina el modo visual del componente.',
120
+ options: [_constants.CARD, _constants.FLAT],
121
+ table: {
122
+ defaultValue: {
123
+ summary: _constants.CARD
124
+ },
125
+ type: {
126
+ summary: (0, _utils.joinArgTypes)([_constants.CARD, _constants.FLAT])
127
+ }
128
+ }
129
+ },
130
+ steps: {
131
+ control: 'object',
132
+ description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
133
+ table: {
134
+ defaultValue: {
135
+ summary: 'undefined'
136
+ },
137
+ type: {
138
+ summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
139
+ }
140
+ }
141
+ },
142
+ subtitle: {
143
+ control: 'text',
144
+ description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
145
+ table: {
146
+ defaultValue: {
147
+ summary: 'undefined'
148
+ },
149
+ type: {
150
+ summary: 'string'
151
+ }
152
+ }
153
+ },
154
+ title: {
155
+ control: 'text',
156
+ description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
157
+ table: {
158
+ defaultValue: {
159
+ summary: 'undefined'
160
+ },
161
+ type: {
162
+ summary: 'string'
163
+ }
164
+ }
165
+ },
166
+ variant: {
167
+ control: 'inline-radio',
168
+ description: 'Determina la variante visual del componente.',
169
+ options: [_constants.STANDARD, _constants.ERROR],
170
+ table: {
171
+ defaultValue: {
172
+ summary: _constants.STANDARD
173
+ },
174
+ type: {
175
+ summary: (0, _utils.joinArgTypes)([_constants.STANDARD, _constants.ERROR])
176
+ }
177
+ }
178
+ }
179
+ },
180
+ component: _.default,
181
+ parameters: {
182
+ controls: {
183
+ exclude: ['classes']
184
+ },
185
+ docs: {
186
+ description: {
187
+ component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
188
+ }
189
+ }
190
+ },
191
+ title: 'Energy-UI/UTTracker'
192
+ };
193
+ const Default = exports.Default = {
194
+ name: 'Playground'
195
+ };
196
+ const CardMode = exports.CardMode = {
197
+ args: {
198
+ mode: _constants.CARD,
199
+ variant: _constants.STANDARD
200
+ },
201
+ name: 'Modo Card',
202
+ parameters: {
203
+ docs: {
204
+ description: {
205
+ story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
206
+ }
207
+ }
208
+ }
209
+ };
210
+ const FlatMode = exports.FlatMode = {
211
+ args: {
212
+ mode: _constants.FLAT,
213
+ variant: _constants.STANDARD
214
+ },
215
+ name: 'Modo Flat',
216
+ parameters: {
217
+ docs: {
218
+ description: {
219
+ story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
220
+ }
221
+ }
222
+ }
223
+ };
224
+ const ErrorVariant = exports.ErrorVariant = {
225
+ args: {
226
+ description: 'Quería recargas catalíticas y pedí normales',
227
+ mode: _constants.CARD,
228
+ subtitle: 'Me equivoqué en el pedido',
229
+ variant: _constants.ERROR
230
+ },
231
+ name: 'Variante Error',
232
+ parameters: {
233
+ docs: {
234
+ description: {
235
+ story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
236
+ }
237
+ }
238
+ }
239
+ };
240
+ const WithoutDetailsTab = exports.WithoutDetailsTab = {
241
+ args: {
242
+ detailsTab: undefined,
243
+ mode: _constants.CARD,
244
+ variant: _constants.STANDARD
245
+ },
246
+ name: 'Sin Pestaña de Detalle',
247
+ parameters: {
248
+ docs: {
249
+ description: {
250
+ story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
251
+ }
252
+ }
253
+ }
254
+ };
255
+ const WithoutTitle = exports.WithoutTitle = {
256
+ args: {
257
+ mode: _constants.CARD,
258
+ title: undefined,
259
+ variant: _constants.STANDARD
260
+ },
261
+ name: 'Sin Título',
262
+ parameters: {
263
+ docs: {
264
+ description: {
265
+ story: 'UTTracker sin título.'
266
+ }
267
+ }
268
+ }
269
+ };
270
+ const AllModes = exports.AllModes = {
271
+ render: args => /*#__PURE__*/_react.default.createElement("div", {
272
+ style: {
273
+ display: 'flex',
274
+ gap: '24px',
275
+ flexWrap: 'wrap'
276
+ }
277
+ }, [_constants.CARD, _constants.FLAT].map(mode => /*#__PURE__*/_react.default.createElement("div", {
278
+ key: mode,
279
+ style: {
280
+ flex: 1,
281
+ minWidth: '300px'
282
+ }
283
+ }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
284
+ mode: mode,
285
+ title: "Modo: ".concat(mode)
286
+ }))))),
287
+ name: 'Todos los Modos',
288
+ parameters: {
289
+ docs: {
290
+ description: {
291
+ story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
292
+ }
293
+ }
294
+ }
295
+ };
296
+ const AllVariants = exports.AllVariants = {
297
+ render: args => /*#__PURE__*/_react.default.createElement("div", {
298
+ style: {
299
+ display: 'flex',
300
+ gap: '24px',
301
+ flexWrap: 'wrap'
302
+ }
303
+ }, /*#__PURE__*/_react.default.createElement("div", {
304
+ style: {
305
+ flex: 1,
306
+ minWidth: '300px'
307
+ }
308
+ }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
309
+ description: "Hora estimada de entrega 7:00 PM",
310
+ subtitle: "",
311
+ title: "Variante: standard",
312
+ variant: _constants.STANDARD
313
+ }))), /*#__PURE__*/_react.default.createElement("div", {
314
+ style: {
315
+ flex: 1,
316
+ minWidth: '300px'
317
+ }
318
+ }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
319
+ description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
320
+ subtitle: "Me equivoqu\xE9 en el pedido",
321
+ title: "Variante: error",
322
+ variant: _constants.ERROR
323
+ })))),
324
+ name: 'Todas las Variantes',
325
+ parameters: {
326
+ docs: {
327
+ description: {
328
+ story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
329
+ }
330
+ }
331
+ }
332
+ };
package/dist/esm/components/UTButton/constants.js CHANGED
@@ -18,6 +18,8 @@ export const ICON_PLACEMENTS = {
18
18
  export const DEFAULT_PROPS = {
19
19
  colorTheme: 'secondary',
20
20
  disabled: false,
21
+ fullHeight: false,
22
+ fullWidth: false,
21
23
  hideTextOnResponsive: false,
22
24
  iconPlacement: ICON_PLACEMENTS.left,
23
25
  loading: false,
package/dist/esm/components/UTButton/index.js CHANGED
@@ -21,6 +21,8 @@ const UTButton = _ref => {
21
21
  count,
22
22
  dataTestId,
23
23
  disabled,
24
+ fullHeight,
25
+ fullWidth,
24
26
  hideTextOnResponsive,
25
27
  Icon,
26
28
  iconPlacement,
@@ -50,7 +52,6 @@ const UTButton = _ref => {
50
52
  } = useMemo(() => getIconProps({
51
53
  className: icon,
52
54
  colorTheme,
53
- hasContent: !!children,
54
55
  hideTextOnResponsive,
55
56
  Icon,
56
57
  iconPlacement,
@@ -58,7 +59,7 @@ const UTButton = _ref => {
58
59
  RightIcon,
59
60
  size,
60
61
  variant
61
- }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
62
+ }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
62
63
  const LeftIconToShow = LeftIconComponent && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
63
64
  const RightIconToShow = RightIconComponent && /*#__PURE__*/React.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
64
65
  const counterColorTheme = getCounterColorTheme(colorTheme, variant);
@@ -72,7 +73,7 @@ const UTButton = _ref => {
72
73
  }), children), RightIconToShow);
73
74
  return /*#__PURE__*/React.createElement(Button, {
74
75
  classes: materialButtonClasses,
75
- className: "\n ".concat(styles["padding".concat(capitalize(size))], "\n ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n "),
76
+ className: "\n ".concat(styles["padding".concat(capitalize(size))], "\n ").concat(fullHeight && styles.fullHeight, "\n ").concat(fullWidth && styles.fullWidth, "\n ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n "),
76
77
  "data-testid": dataTestId,
77
78
  disabled: disabled || loading,
78
79
  onClick: onClick,
@@ -90,6 +91,8 @@ UTButton.propTypes = {
90
91
  count: number,
91
92
  dataTestId: string,
92
93
  disabled: bool,
94
+ fullHeight: bool,
95
+ fullWidth: bool,
93
96
  hideTextOnResponsive: bool,
94
97
  /**
95
98
  * @deprecated Use LeftIcon or RightIcon instead.
package/dist/esm/components/UTButton/stories/UTButtonSizes.stories.js CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import UTButton from '..';
2
3
  import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
3
4
  export default {
@@ -30,4 +31,18 @@ export const Large = {
30
31
  children: 'Large Size',
31
32
  size: 'large'
32
33
  }
34
+ };
35
+ export const FullHeight = {
36
+ args: {
37
+ children: 'Full Height',
38
+ fullHeight: true
39
+ },
40
+ render: args => /*#__PURE__*/React.createElement("div", {
41
+ style: {
42
+ display: 'flex',
43
+ height: 80,
44
+ border: '1px dashed #ccc',
45
+ padding: 8
46
+ }
47
+ }, /*#__PURE__*/React.createElement(UTButton, args))
33
48
  };
package/dist/esm/components/UTButton/stories/storiesConstants.js CHANGED
@@ -88,6 +88,30 @@ export const COMMON_ARG_TYPES = {
88
88
  }
89
89
  }
90
90
  },
91
+ fullHeight: {
92
+ control: 'boolean',
93
+ description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
94
+ table: {
95
+ defaultValue: {
96
+ summary: DEFAULT_PROPS.fullHeight
97
+ },
98
+ type: {
99
+ summary: 'boolean'
100
+ }
101
+ }
102
+ },
103
+ fullWidth: {
104
+ control: 'boolean',
105
+ description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
106
+ table: {
107
+ defaultValue: {
108
+ summary: DEFAULT_PROPS.fullWidth
109
+ },
110
+ type: {
111
+ summary: 'boolean'
112
+ }
113
+ }
114
+ },
91
115
  hideTextOnResponsive: {
92
116
  control: 'boolean',
93
117
  description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
@@ -217,6 +241,8 @@ export const COMMON_ARGS = {
217
241
  colorTheme: DEFAULT_PROPS.colorTheme,
218
242
  dataTestId: 'customButtonId',
219
243
  disabled: DEFAULT_PROPS.disabled,
244
+ fullHeight: DEFAULT_PROPS.fullHeight,
245
+ fullWidth: DEFAULT_PROPS.fullWidth,
220
246
  hideTextOnResponsive: DEFAULT_PROPS.hideTextOnResponsive,
221
247
  loading: DEFAULT_PROPS.loading,
222
248
  size: DEFAULT_PROPS.size,
package/dist/esm/components/UTButton/styles.module.scss CHANGED
@@ -65,6 +65,16 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
65
65
  padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
66
66
  }
67
67
 
68
+ .fullHeight {
69
+ min-height: unset;
70
+ height: 100%;
71
+ }
72
+
73
+ .fullWidth {
74
+ min-width: unset;
75
+ width: 100%;
76
+ }
77
+
68
78
  .hideTextOnResponsive {
69
79
  .textContainer {
70
80
  @media #{$mobile} {
package/dist/esm/components/UTButton/theme.js CHANGED
@@ -44,7 +44,7 @@ export const variantsColorTheme = (theme, colorTheme, variant) => {
44
44
  }
45
45
  },
46
46
  [VARIANTS_NAMES.outlined]: {
47
- border: "1px solid ".concat(actionColorName === COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
47
+ border: "1px solid ".concat(lightTheme['04']),
48
48
  fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
49
49
  '&:hover': {
50
50
  backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
package/dist/esm/components/UTButton/utils.js CHANGED
@@ -8,7 +8,6 @@ const buildSingleIconProps = _ref => {
8
8
  let {
9
9
  className,
10
10
  colorTheme,
11
- hasContent,
12
11
  hideTextOnResponsive,
13
12
  Icon,
14
13
  size,
@@ -17,7 +16,7 @@ const buildSingleIconProps = _ref => {
17
16
  if (!Icon) return null;
18
17
  return {
19
18
  IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
20
- className: "\n ".concat(styles.baseIcon, "\n ").concat(className, "\n ").concat(hasContent ? styles.icon : styles["iconOnly".concat(capitalize(size))], "\n ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n "),
19
+ className: "\n ".concat(styles.baseIcon, "\n ").concat(className, "\n ").concat(styles.icon, "\n ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n "),
21
20
  ...(isUTIcon(Icon) ? {
22
21
  colorTheme: getButtonElementColorTheme(colorTheme, variant),
23
22
  name: Icon
@@ -28,7 +27,6 @@ export const getIconProps = _ref2 => {
28
27
  let {
29
28
  className,
30
29
  colorTheme,
31
- hasContent,
32
30
  hideTextOnResponsive,
33
31
  Icon,
34
32
  iconPlacement,
@@ -42,7 +40,6 @@ export const getIconProps = _ref2 => {
42
40
  const commonParams = {
43
41
  className,
44
42
  colorTheme,
45
- hasContent,
46
43
  hideTextOnResponsive,
47
44
  size,
48
45
  variant
package/dist/esm/components/UTDataCategory/theme.js CHANGED
@@ -1,11 +1,11 @@
1
- import { COLOR_THEMES } from '../../constants/Palette';
1
+ import { COLOR_THEMES, COLOR_SHADES } from '../../constants/Palette';
2
2
  export const backgroundColor = function (theme, area) {
3
3
  var _theme$Palette;
4
4
  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
5
5
  const colorTheme = areaProps.colorTheme || COLOR_THEMES.light;
6
6
  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
7
7
  const areaColor = actionPaletteColors[colorTheme];
8
- const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? '03' : '01');
8
+ const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
9
9
  return {
10
10
  backgroundColor: area ? areaColor[shade] : 'transparent'
11
11
  };
package/dist/esm/components/UTDataElement/README.md CHANGED
@@ -134,4 +134,4 @@ If the component has any `children`, it will automatically become collapsible wi
134
134
 
135
135
  ```javascript
136
136
  <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
137
- ```
137
+ ```
package/dist/esm/components/UTStatusMessage/index.js CHANGED
@@ -24,7 +24,9 @@ const UTStatusMessage = _ref => {
24
24
  helpText,
25
25
  helpTextProps,
26
26
  icon = 'IconInfoCircle',
27
- iconProps = {},
27
+ iconProps = {
28
+ size: 40
29
+ },
28
30
  loading,
29
31
  primaryAction,
30
32
  primaryActionProps,
package/dist/esm/components/UTStatusMessage/styles.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  flex-grow: 1;
6
- grid-gap: 24px;
6
+ grid-gap: 12px;
7
7
  justify-content: center;
8
8
  width: 100%;
9
9
  }
package/dist/esm/components/UTStatusMessage/theme.js CHANGED
@@ -11,10 +11,10 @@ const getIconBackgroundColor = (colorTheme, theme) => {
11
11
  [COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
12
12
  [COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
13
13
  [COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
14
- [COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['01'],
14
+ [COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['02'],
15
15
  [COLOR_THEMES.NEGATIVE]: (_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1.light['01'],
16
- [COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['01'],
17
- [COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['01']
16
+ [COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['02'],
17
+ [COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['02']
18
18
  }[colorTheme];
19
19
  };
20
20
  const getBannerBackgroundColor = (colorTheme, theme) => {
@@ -40,9 +40,13 @@ export const retrieveStyle = _ref => {
40
40
  let {
41
41
  showBanner = true,
42
42
  theme,
43
- colorTheme = COLOR_THEMES.DEFAULT
43
+ colorTheme = COLOR_THEMES.DEFAULT,
44
+ iconProps = {}
44
45
  } = _ref;
45
46
  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
47
+ const {
48
+ size = 40
49
+ } = iconProps;
46
50
  return {
47
51
  iconContainer: {
48
52
  alignItems: 'center',
@@ -50,9 +54,9 @@ export const retrieveStyle = _ref => {
50
54
  backgroundColor: getIconBackgroundColor(colorTheme, theme),
51
55
  borderRadius: 100,
52
56
  display: 'flex',
53
- height: 56,
57
+ height: size * 1.85,
54
58
  justifyContent: 'center',
55
- width: 56
59
+ width: size * 1.85
56
60
  },
57
61
  banner: {
58
62
  alignItems: 'center',
package/dist/esm/components/UTTracker/UTTracker.stories.js ADDED
@@ -0,0 +1,325 @@
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
+ import React from 'react';
3
+ import { joinArgTypes } from 'stories/utils';
4
+ import { CARD, ERROR, FLAT, STANDARD } from './constants';
5
+ import UTTracker from '.';
6
+ const subSteps = [{
7
+ id: 1,
8
+ subtitle: '02 noviembre 2023, 4:38 PM',
9
+ title: 'Description Step'
10
+ }, {
11
+ id: 2,
12
+ subtitle: '02 noviembre 2023, 4:38 PM',
13
+ title: 'Description Step'
14
+ }, {
15
+ id: 3,
16
+ subtitle: '02 noviembre 2023, 4:38 PM',
17
+ title: 'Description Step'
18
+ }];
19
+ const defaultSteps = [{
20
+ id: 1,
21
+ subSteps,
22
+ title: 'Solicitud confirmada'
23
+ }, {
24
+ id: 2,
25
+ subSteps,
26
+ title: 'En preparación'
27
+ }, {
28
+ id: 3,
29
+ title: 'En camino'
30
+ }, {
31
+ description: 'Fecha estimada 07 de agosto',
32
+ id: 4,
33
+ title: 'Entregado'
34
+ }];
35
+ export default {
36
+ args: {
37
+ currentStep: 2,
38
+ description: 'Hora estimada de entrega 7:00 PM',
39
+ detailsTab: {
40
+ enabled: true,
41
+ title: 'Ver Detalle'
42
+ },
43
+ mode: CARD,
44
+ steps: defaultSteps,
45
+ subtitle: '',
46
+ title: 'Pedido en curso',
47
+ variant: STANDARD
48
+ },
49
+ argTypes: {
50
+ classes: {
51
+ control: false,
52
+ description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
53
+ table: {
54
+ defaultValue: {
55
+ summary: '{}'
56
+ },
57
+ type: {
58
+ summary: 'objectOf(string)'
59
+ }
60
+ }
61
+ },
62
+ classNames: {
63
+ control: false,
64
+ description: 'Objeto de clases CSS para override de estilos internos.',
65
+ table: {
66
+ defaultValue: {
67
+ summary: 'undefined'
68
+ },
69
+ type: {
70
+ summary: 'objectOf(string)'
71
+ }
72
+ }
73
+ },
74
+ currentStep: {
75
+ control: 'number',
76
+ description: 'Número del paso activo actualmente.',
77
+ table: {
78
+ defaultValue: {
79
+ summary: 'undefined'
80
+ },
81
+ type: {
82
+ summary: 'number'
83
+ }
84
+ }
85
+ },
86
+ description: {
87
+ control: 'text',
88
+ description: 'Texto descriptivo que aparece debajo del subtítulo.',
89
+ table: {
90
+ defaultValue: {
91
+ summary: 'undefined'
92
+ },
93
+ type: {
94
+ summary: 'string'
95
+ }
96
+ }
97
+ },
98
+ detailsTab: {
99
+ control: 'object',
100
+ description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
101
+ table: {
102
+ defaultValue: {
103
+ summary: 'undefined'
104
+ },
105
+ type: {
106
+ summary: '{ enabled: boolean, title: string }'
107
+ }
108
+ }
109
+ },
110
+ mode: {
111
+ control: 'inline-radio',
112
+ description: 'Determina el modo visual del componente.',
113
+ options: [CARD, FLAT],
114
+ table: {
115
+ defaultValue: {
116
+ summary: CARD
117
+ },
118
+ type: {
119
+ summary: joinArgTypes([CARD, FLAT])
120
+ }
121
+ }
122
+ },
123
+ steps: {
124
+ control: 'object',
125
+ description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
126
+ table: {
127
+ defaultValue: {
128
+ summary: 'undefined'
129
+ },
130
+ type: {
131
+ summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
132
+ }
133
+ }
134
+ },
135
+ subtitle: {
136
+ control: 'text',
137
+ description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
138
+ table: {
139
+ defaultValue: {
140
+ summary: 'undefined'
141
+ },
142
+ type: {
143
+ summary: 'string'
144
+ }
145
+ }
146
+ },
147
+ title: {
148
+ control: 'text',
149
+ description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
150
+ table: {
151
+ defaultValue: {
152
+ summary: 'undefined'
153
+ },
154
+ type: {
155
+ summary: 'string'
156
+ }
157
+ }
158
+ },
159
+ variant: {
160
+ control: 'inline-radio',
161
+ description: 'Determina la variante visual del componente.',
162
+ options: [STANDARD, ERROR],
163
+ table: {
164
+ defaultValue: {
165
+ summary: STANDARD
166
+ },
167
+ type: {
168
+ summary: joinArgTypes([STANDARD, ERROR])
169
+ }
170
+ }
171
+ }
172
+ },
173
+ component: UTTracker,
174
+ parameters: {
175
+ controls: {
176
+ exclude: ['classes']
177
+ },
178
+ docs: {
179
+ description: {
180
+ component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
181
+ }
182
+ }
183
+ },
184
+ title: 'Energy-UI/UTTracker'
185
+ };
186
+ export const Default = {
187
+ name: 'Playground'
188
+ };
189
+ export const CardMode = {
190
+ args: {
191
+ mode: CARD,
192
+ variant: STANDARD
193
+ },
194
+ name: 'Modo Card',
195
+ parameters: {
196
+ docs: {
197
+ description: {
198
+ story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
199
+ }
200
+ }
201
+ }
202
+ };
203
+ export const FlatMode = {
204
+ args: {
205
+ mode: FLAT,
206
+ variant: STANDARD
207
+ },
208
+ name: 'Modo Flat',
209
+ parameters: {
210
+ docs: {
211
+ description: {
212
+ story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
213
+ }
214
+ }
215
+ }
216
+ };
217
+ export const ErrorVariant = {
218
+ args: {
219
+ description: 'Quería recargas catalíticas y pedí normales',
220
+ mode: CARD,
221
+ subtitle: 'Me equivoqué en el pedido',
222
+ variant: ERROR
223
+ },
224
+ name: 'Variante Error',
225
+ parameters: {
226
+ docs: {
227
+ description: {
228
+ story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
229
+ }
230
+ }
231
+ }
232
+ };
233
+ export const WithoutDetailsTab = {
234
+ args: {
235
+ detailsTab: undefined,
236
+ mode: CARD,
237
+ variant: STANDARD
238
+ },
239
+ name: 'Sin Pestaña de Detalle',
240
+ parameters: {
241
+ docs: {
242
+ description: {
243
+ story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
244
+ }
245
+ }
246
+ }
247
+ };
248
+ export const WithoutTitle = {
249
+ args: {
250
+ mode: CARD,
251
+ title: undefined,
252
+ variant: STANDARD
253
+ },
254
+ name: 'Sin Título',
255
+ parameters: {
256
+ docs: {
257
+ description: {
258
+ story: 'UTTracker sin título.'
259
+ }
260
+ }
261
+ }
262
+ };
263
+ export const AllModes = {
264
+ render: args => /*#__PURE__*/React.createElement("div", {
265
+ style: {
266
+ display: 'flex',
267
+ gap: '24px',
268
+ flexWrap: 'wrap'
269
+ }
270
+ }, [CARD, FLAT].map(mode => /*#__PURE__*/React.createElement("div", {
271
+ key: mode,
272
+ style: {
273
+ flex: 1,
274
+ minWidth: '300px'
275
+ }
276
+ }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
277
+ mode: mode,
278
+ title: "Modo: ".concat(mode)
279
+ }))))),
280
+ name: 'Todos los Modos',
281
+ parameters: {
282
+ docs: {
283
+ description: {
284
+ story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
285
+ }
286
+ }
287
+ }
288
+ };
289
+ export const AllVariants = {
290
+ render: args => /*#__PURE__*/React.createElement("div", {
291
+ style: {
292
+ display: 'flex',
293
+ gap: '24px',
294
+ flexWrap: 'wrap'
295
+ }
296
+ }, /*#__PURE__*/React.createElement("div", {
297
+ style: {
298
+ flex: 1,
299
+ minWidth: '300px'
300
+ }
301
+ }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
302
+ description: "Hora estimada de entrega 7:00 PM",
303
+ subtitle: "",
304
+ title: "Variante: standard",
305
+ variant: STANDARD
306
+ }))), /*#__PURE__*/React.createElement("div", {
307
+ style: {
308
+ flex: 1,
309
+ minWidth: '300px'
310
+ }
311
+ }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
312
+ description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
313
+ subtitle: "Me equivoqu\xE9 en el pedido",
314
+ title: "Variante: error",
315
+ variant: ERROR
316
+ })))),
317
+ name: 'Todas las Variantes',
318
+ parameters: {
319
+ docs: {
320
+ description: {
321
+ story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
322
+ }
323
+ }
324
+ }
325
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.172.0",
3
+ "version": "3.172.2",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",