@widergy/energy-ui 3.143.0 → 3.144.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 CHANGED
@@ -1,3 +1,10 @@
1
+ # [3.144.0](https://github.com/widergy/energy-ui/compare/v3.143.0...v3.144.0) (2026-04-22)
2
+
3
+
4
+ ### Features
5
+
6
+ * new size utstatus ([#778](https://github.com/widergy/energy-ui/issues/778)) ([835c56a](https://github.com/widergy/energy-ui/commit/835c56aec7ee8ade5df39206fb82896c7796c8d6))
7
+
1
8
  # [3.143.0](https://github.com/widergy/energy-ui/compare/v3.142.2...v3.143.0) (2026-04-15)
2
9
 
3
10
 
@@ -0,0 +1,106 @@
1
+ # UTStatus
2
+
3
+ ### Descripción
4
+
5
+ Componente de estado que muestra un ícono y un texto. Soporta múltiples variantes de color, tipos visuales, tamaños, tooltip y adornos opcionales (badges e íconos).
6
+
7
+ ### Tamaños
8
+
9
+ | Tamaño | Fuente | Tamaño ícono | Padding |
10
+ | -------- | ------ | ------------ | ------- |
11
+ | `xsmall` | xsmall | 14px | 2px 4px |
12
+ | `small` | xsmall | 14px | 4px 8px |
13
+ | `medium` | small | 16px | 4px 8px |
14
+ | `large` | body | 20px | 4px 8px |
15
+
16
+ ### Ícono
17
+
18
+ Cada variante tiene un ícono por defecto. Puede sobreescribirse con la prop `Icon`, que acepta un nombre de Tabler Icons (string) o un componente React. El ícono puede ocultarse completamente con `withoutIcon`.
19
+
20
+ ### Área
21
+
22
+ El área de fondo se muestra por defecto (`area={true}`). Puede ocultarse o cambiar su forma:
23
+
24
+ - `areaType="SQUARE"`: border-radius 4px (por defecto).
25
+ - `areaType="ROUNDED"`: border-radius 100px (forma de píldora).
26
+
27
+ ### Adornos
28
+
29
+ Se pueden agregar badges o íconos adicionales a la izquierda o derecha del contenido mediante la prop `adornments`. Cada adorno debe indicar un `name` (`Badge` o `Icon`) y opcionalmente `props` para pasarle a ese componente.
30
+
31
+ ```jsx
32
+ // Adorno simple (se ubica a la izquierda por defecto)
33
+ adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}
34
+
35
+ // Posicionamiento explícito izquierda/derecha
36
+ adornments={[
37
+ { left: { name: 'Icon', props: { name: 'IconStar' } } },
38
+ { right: { name: 'Badge', props: { colorTheme: 'information' } } }
39
+ ]}
40
+ ```
41
+
42
+ ### Tooltip
43
+
44
+ Se puede mostrar un tooltip al hacer hover mediante la prop `tooltip` (string o ReactElement). Opciones adicionales de Tippy.js pueden pasarse con `tooltipProps`.
45
+
46
+ ### Props
47
+
48
+ | Nombre | Tipo | Default | Descripción |
49
+ | --------------- | ------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------ |
50
+ | variant | `'success'` \| `'error'` \| `'warning'` \| `'information'` \| `'accent'` \| `'unassigned'` | `'success'` | Variante de color del componente. |
51
+ | type | `'default'` \| `'light'` \| `'accent'` \| `'negative'` | `'default'` | Tipo visual que modifica el tratamiento del color. |
52
+ | size | `'xsmall'` \| `'small'` \| `'medium'` \| `'large'` | `'medium'` | Tamaño del componente. |
53
+ | children | string | | Texto del estado. |
54
+ | area | bool | `true` | Muestra el área de fondo. |
55
+ | areaType | `'SQUARE'` \| `'ROUNDED'` | `'SQUARE'` | Forma del área de fondo. |
56
+ | Icon | elementType \| string | | Sobreescribe el ícono por defecto de la variante. Acepta nombre de Tabler Icons o un componente React. |
57
+ | withoutIcon | bool | `false` | Oculta el ícono. |
58
+ | weight | string | `'medium'` | Peso tipográfico del texto. |
59
+ | adornments | array | `[]` | Array de adornos (`Badge` o `Icon`) para mostrar junto al estado. |
60
+ | tooltip | string \| node | | Contenido del tooltip al hacer hover. |
61
+ | tooltipProps | object | `{}` | Props adicionales para el tooltip (Tippy.js). |
62
+ | className | string | | Clase CSS adicional sobre el contenedor raíz. |
63
+ | labelDataTestId | string | | `data-testid` para el label interno. |
64
+ | title | string | | Atributo HTML `title` en el contenedor raíz. |
65
+
66
+ ### Ejemplo
67
+
68
+ ```jsx
69
+ import React from 'react';
70
+ import { UTStatus } from '@widergy/energy-ui';
71
+
72
+ const App = () => (
73
+ <div>
74
+ <UTStatus variant="success">Activo</UTStatus>
75
+ <UTStatus variant="error" size="small">
76
+ Rechazado
77
+ </UTStatus>
78
+ <UTStatus variant="warning" type="light">
79
+ Pendiente
80
+ </UTStatus>
81
+ <UTStatus variant="information" size="xsmall">
82
+ Info
83
+ </UTStatus>
84
+ <UTStatus variant="success" area={false}>
85
+ Sin fondo
86
+ </UTStatus>
87
+ <UTStatus variant="unassigned" areaType="ROUNDED">
88
+ Redondeado
89
+ </UTStatus>
90
+ <UTStatus variant="information" Icon="IconStar">
91
+ Ícono personalizado
92
+ </UTStatus>
93
+ <UTStatus variant="error" withoutIcon>
94
+ Sin ícono
95
+ </UTStatus>
96
+ <UTStatus variant="warning" tooltip="Acción requerida">
97
+ Con tooltip
98
+ </UTStatus>
99
+ <UTStatus variant="success" adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}>
100
+ Con badge
101
+ </UTStatus>
102
+ </div>
103
+ );
104
+
105
+ export default App;
106
+ ```
@@ -270,26 +270,32 @@ const AllTypes = exports.AllTypes = {
270
270
  };
271
271
  const AllSizes = exports.AllSizes = {
272
272
  args: {
273
- children: 'Diferentes tamaños',
274
- type: 'default',
275
- variant: 'information'
273
+ type: 'default'
276
274
  },
277
275
  render: args => /*#__PURE__*/_react.default.createElement("div", {
278
276
  style: {
279
277
  display: 'flex',
280
- gap: '16px',
278
+ flexDirection: 'column',
279
+ gap: '12px'
280
+ }
281
+ }, Object.keys(_constants.SIZES).map(size => /*#__PURE__*/_react.default.createElement("div", {
282
+ key: size,
283
+ style: {
284
+ display: 'flex',
285
+ gap: '8px',
281
286
  alignItems: 'center'
282
287
  }
283
- }, Object.keys(_constants.SIZES).map(size => /*#__PURE__*/_react.default.createElement(_.default, _extends({
284
- key: size
288
+ }, Object.keys(_constants.VARIANTS).map(variant => /*#__PURE__*/_react.default.createElement(_.default, _extends({
289
+ key: variant
285
290
  }, args, {
286
- size: size
287
- })))),
291
+ size: size,
292
+ variant: variant
293
+ }), variant))))),
288
294
  name: 'Todos los Tamaños',
289
295
  parameters: {
290
296
  docs: {
291
297
  description: {
292
- story: 'Muestra todos los tamaños disponibles del componente UTStatus.'
298
+ story: 'Muestra todos los tamaños disponibles del componente UTStatus, con todas las variantes por fila.'
293
299
  }
294
300
  }
295
301
  }
@@ -3,15 +3,15 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.VARIANTS = exports.TYPES = exports.SIZES = exports.ICON_SIZE = exports.DEFAULT_PROPS = exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = exports.AREA_TYPES = void 0;
6
+ exports.VARIANTS = exports.TYPES = exports.SIZES = exports.DEFAULT_PROPS = exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = exports.AREA_TYPES = void 0;
7
7
  var _UTBadge = _interopRequireDefault(require("../UTBadge"));
8
8
  var _UTIcon = _interopRequireDefault(require("../UTIcon"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- const ICON_SIZE = exports.ICON_SIZE = 20;
11
10
  const SIZES = exports.SIZES = {
12
11
  large: 'large',
13
12
  medium: 'medium',
14
- small: 'small'
13
+ small: 'small',
14
+ xsmall: 'xsmall'
15
15
  };
16
16
  const VARIANTS = exports.VARIANTS = {
17
17
  accent: 'accent',
@@ -79,7 +79,7 @@ const UTStatus = _ref => {
79
79
  type,
80
80
  variant,
81
81
  size
82
- })), [StatusIcon, type, variant, classes.icon]);
82
+ })), [StatusIcon, type, variant, size, classes.icon]);
83
83
  const showTooltip = !(0, _isEmpty.default)(tooltip);
84
84
  const colorTheme = (0, _theme.getColorTheme)((0, _theme.validateProps)({
85
85
  type,
@@ -31,30 +31,44 @@ const getGridGap = _ref3 => {
31
31
  size
32
32
  } = _ref3;
33
33
  return {
34
- [_constants.SIZES.large]: '8px',
35
- [_constants.SIZES.medium]: '8px',
36
- [_constants.SIZES.small]: '4px'
34
+ [_constants.SIZES.large]: 'var(--UT-status-gap-large, 8px)',
35
+ [_constants.SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
36
+ [_constants.SIZES.small]: 'var(--UT-status-gap-small, 4px)',
37
+ [_constants.SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
37
38
  }[size];
38
39
  };
39
- const getLabelVariant = _ref4 => {
40
+ const getPadding = _ref4 => {
40
41
  let {
41
42
  size
42
43
  } = _ref4;
44
+ return {
45
+ [_constants.SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
46
+ [_constants.SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
47
+ [_constants.SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
48
+ [_constants.SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
49
+ }[size];
50
+ };
51
+ const getLabelVariant = _ref5 => {
52
+ let {
53
+ size
54
+ } = _ref5;
43
55
  return {
44
56
  [_constants.SIZES.large]: 'body',
45
57
  [_constants.SIZES.medium]: 'small',
46
- [_constants.SIZES.small]: 'xsmall'
58
+ [_constants.SIZES.small]: 'xsmall',
59
+ [_constants.SIZES.xsmall]: 'xsmall'
47
60
  }[size];
48
61
  };
49
62
  exports.getLabelVariant = getLabelVariant;
50
- const getIconSize = _ref5 => {
63
+ const getIconSize = _ref6 => {
51
64
  let {
52
65
  size
53
- } = _ref5;
66
+ } = _ref6;
54
67
  return {
55
- [_constants.SIZES.large]: '20px',
56
- [_constants.SIZES.medium]: '16px',
57
- [_constants.SIZES.small]: '14px'
68
+ [_constants.SIZES.large]: 'var(--UT-status-icon-size-xs, 20px)',
69
+ [_constants.SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
70
+ [_constants.SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
71
+ [_constants.SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
58
72
  }[size];
59
73
  };
60
74
  exports.getIconSize = getIconSize;
@@ -67,12 +81,12 @@ const defaultIconMapper = variant => ({
67
81
  [_constants.VARIANTS.warning]: 'IconAlertTriangle'
68
82
  })[variant];
69
83
  exports.defaultIconMapper = defaultIconMapper;
70
- const validateProps = _ref6 => {
84
+ const validateProps = _ref7 => {
71
85
  let {
72
86
  type,
73
87
  variant,
74
88
  ...props
75
- } = _ref6;
89
+ } = _ref7;
76
90
  return {
77
91
  type: _constants.TYPES[type] || _constants.TYPES[_constants.DEFAULT_PROPS.type],
78
92
  variant: _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant],
@@ -80,14 +94,14 @@ const validateProps = _ref6 => {
80
94
  };
81
95
  };
82
96
  exports.validateProps = validateProps;
83
- const retrieveStyle = _ref7 => {
97
+ const retrieveStyle = _ref8 => {
84
98
  let {
85
99
  theme,
86
100
  size = _constants.DEFAULT_PROPS.size,
87
101
  type = _constants.DEFAULT_PROPS.type,
88
102
  uppercase,
89
103
  variant = _constants.DEFAULT_PROPS.variant
90
- } = _ref7;
104
+ } = _ref8;
91
105
  return {
92
106
  root: {
93
107
  alignItems: 'center',
@@ -98,13 +112,15 @@ const retrieveStyle = _ref7 => {
98
112
  variant
99
113
  })
100
114
  }),
101
- borderRadius: '4px',
115
+ borderRadius: 'var(--UT-status-radius, 4px)',
102
116
  display: 'flex',
103
117
  gridGap: getGridGap({
104
118
  size
105
119
  }),
106
120
  height: 'fit-content',
107
- padding: '4px 8px',
121
+ padding: getPadding({
122
+ size
123
+ }),
108
124
  width: 'fit-content',
109
125
  '&:empty': {
110
126
  display: 'none'
@@ -117,8 +133,8 @@ const retrieveStyle = _ref7 => {
117
133
  },
118
134
  icon: {
119
135
  flexShrink: '0',
120
- height: '20px',
121
- width: '20px',
136
+ height: 'var(--UT-status-icon-size-xs, 20px)',
137
+ width: 'var(--UT-status-icon-size-xs, 20px)',
122
138
  '& path': {
123
139
  fill: getIconFill({
124
140
  theme,
@@ -144,17 +160,25 @@ const retrieveStyle = _ref7 => {
144
160
  })
145
161
  }
146
162
  },
163
+ iconXsmall: {
164
+ height: 'var(--UT-status-icon-size-3xs, 12px)',
165
+ width: 'var(--UT-status-icon-size-3xs, 12px)'
166
+ },
147
167
  iconSmall: {
148
- height: '14px',
149
- width: '14px'
168
+ height: 'var(--UT-status-icon-size-3xs, 12px)',
169
+ width: 'var(--UT-status-icon-size-3xs, 12px)'
150
170
  },
151
171
  iconMedium: {
152
- height: '16px',
153
- width: '16px'
172
+ height: 'var(--UT-status-icon-size-2xs, 16px)',
173
+ width: 'var(--UT-status-icon-size-2xs, 16px)'
154
174
  },
155
175
  iconLarge: {
156
- height: '20px',
157
- width: '20px'
176
+ height: 'var(--UT-status-icon-size-xs, 20px)',
177
+ width: 'var(--UT-status-icon-size-xs, 20px)'
178
+ },
179
+ badgeXsmall: {
180
+ height: '8px',
181
+ width: '8px'
158
182
  },
159
183
  badgeSmall: {
160
184
  height: '8px',
@@ -172,16 +196,16 @@ const retrieveStyle = _ref7 => {
172
196
  backgroundColor: 'transparent !important'
173
197
  },
174
198
  roundedArea: {
175
- borderRadius: '100px'
199
+ borderRadius: 'var(--UT-status-radius-rounded, 9999px)'
176
200
  }
177
201
  };
178
202
  };
179
203
  exports.retrieveStyle = retrieveStyle;
180
- const getColorTheme = _ref8 => {
204
+ const getColorTheme = _ref9 => {
181
205
  let {
182
206
  type,
183
207
  variant
184
- } = _ref8;
208
+ } = _ref9;
185
209
  return {
186
210
  [_constants.TYPES.accent]: _Palette.COLOR_THEMES.accent,
187
211
  [_constants.TYPES.default]: _Palette.COLOR_THEMES.dark,
@@ -43,20 +43,24 @@ const validateAdornments = adornments => adornments.every(adornment => {
43
43
  exports.validateAdornments = validateAdornments;
44
44
  const interpreterSize = (size, classes) => {
45
45
  const {
46
+ iconXsmall,
46
47
  iconSmall,
47
48
  iconMedium,
48
49
  iconLarge,
50
+ badgeXsmall,
49
51
  badgeSmall,
50
52
  badgeMedium,
51
53
  badgeLarge
52
54
  } = classes || {};
53
55
  return {
54
56
  [_constants.COMPONENT_KEYS.BADGE]: {
57
+ [_constants.SIZES.xsmall]: badgeXsmall,
55
58
  [_constants.SIZES.small]: badgeSmall,
56
59
  [_constants.SIZES.medium]: badgeMedium,
57
60
  [_constants.SIZES.large]: badgeLarge
58
61
  }[size],
59
62
  [_constants.COMPONENT_KEYS.ICON]: {
63
+ [_constants.SIZES.xsmall]: iconXsmall,
60
64
  [_constants.SIZES.small]: iconSmall,
61
65
  [_constants.SIZES.medium]: iconMedium,
62
66
  [_constants.SIZES.large]: iconLarge
@@ -96,7 +96,7 @@ var _default = exports.default = {
96
96
  },
97
97
  dataTestId: {
98
98
  control: 'text',
99
- description: 'ID para testing. El container recibe `dataTestId` y cada action icon recibe `${dataTestId}.actionIcon.${config.key}`.',
99
+ description: 'ID para testing. El container recibe `dataTestId` y cada action icon recibe `{dataTestId}.actionIcon.{config.key}`.',
100
100
  table: {
101
101
  defaultValue: {
102
102
  summary: 'undefined'
@@ -244,7 +244,7 @@ const Playground = exports.Playground = {
244
244
  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
245
245
  observationWrapperConfiguration: configJSON === null || configJSON === void 0 ? void 0 : configJSON.map(config => ({
246
246
  ...config,
247
- action: () => alert("Acci\xF3n ejecutada: ".concat(config.key)) // eslint-disable-line no-alert
247
+ action: () => alert("Acci\xF3n ejecutada: ".concat(config.key))
248
248
  }))
249
249
  }), args.children);
250
250
  }
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = require("prop-types");
9
+ var _lodash = require("lodash");
9
10
  var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
10
11
  var _UTButton = _interopRequireDefault(require("../UTButton"));
11
- var _lodash = require("lodash");
12
12
  var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
13
13
  var _utils = require("./utils");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,6 +40,10 @@ const UTWrapperObservation = _ref => {
40
40
  }, /*#__PURE__*/_react.default.createElement("div", {
41
41
  className: _stylesModule.default.iconButton,
42
42
  onClick: config.action,
43
+ onKeyDown: e => {
44
+ var _config$action;
45
+ return e.key === 'Enter' && ((_config$action = config.action) === null || _config$action === void 0 ? void 0 : _config$action.call(config));
46
+ },
43
47
  role: "button",
44
48
  tabIndex: 0,
45
49
  "data-testid": dataTestId ? "".concat(dataTestId, ".actionIcon.").concat(config.key) : undefined
@@ -81,6 +81,7 @@ const baseTokens = exports.baseTokens = {
81
81
  'radius-full': '9999px'
82
82
  },
83
83
  semantic: {
84
+ 'padding-3xs': 'spacing-1',
84
85
  'padding-2xs': 'spacing-2',
85
86
  'padding-xs': 'spacing-3',
86
87
  'padding-sm': 'spacing-4',
@@ -136,6 +137,7 @@ const baseTokens = exports.baseTokens = {
136
137
  'size-control-xl': 'size-11',
137
138
  'size-control-2xl': 'size-12',
138
139
  'size-control-3xl': 'size-13',
140
+ 'size-icon-3xs': 'size-4',
139
141
  'size-icon-2xs': 'size-5',
140
142
  'size-icon-xs': 'size-6',
141
143
  'size-icon-md': 'size-7',
@@ -235,6 +237,24 @@ const baseTokens = exports.baseTokens = {
235
237
  'UT-dataCategory-title-gap': 'gap-sm',
236
238
  'UT-dataCategory-title-size': 'font-body-size-sm',
237
239
  'UT-dataCategory-title-weight': 'font-weight-medium',
238
- 'UT-dataCategory-icon-size': 'size-icon-xs'
240
+ 'UT-dataCategory-icon-size': 'size-icon-xs',
241
+ 'UT-status-gap-large': 'gap-sm',
242
+ 'UT-status-gap-medium': 'gap-sm',
243
+ 'UT-status-gap-small': 'gap-xs',
244
+ 'UT-status-gap-xsmall': 'gap-xs',
245
+ 'UT-status-padding-y-large': 'padding-2xs',
246
+ 'UT-status-padding-x-large': 'padding-xs',
247
+ 'UT-status-padding-y-medium': 'padding-2xs',
248
+ 'UT-status-padding-x-medium': 'padding-xs',
249
+ 'UT-status-padding-y-small': 'padding-2xs',
250
+ 'UT-status-padding-x-small': 'padding-xs',
251
+ 'UT-status-padding-y-xsmall': 'padding-3xs',
252
+ 'UT-status-padding-x-xsmall': 'padding-2xs',
253
+ 'UT-status-radius': 'radius-sm',
254
+ 'UT-status-radius-rounded': 'radius-full',
255
+ 'UT-status-icon-size-3xs': 'size-icon-3xs',
256
+ 'UT-status-icon-size-2xs': 'size-icon-2xs',
257
+ 'UT-status-icon-size-xs': 'size-icon-xs',
258
+ 'UT-status-icon-size-md': 'size-icon-md'
239
259
  }
240
260
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.143.0",
3
+ "version": "3.144.0",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",