@widergy/mobile-ui 2.12.2 → 2.13.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/UTStatus/README.md +81 -13
  3. package/lib/components/UTStatus/constants.js +4 -0
  4. package/lib/components/UTStatus/index.js +18 -4
  5. package/lib/components/UTStatus/theme.js +22 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [2.13.0](https://github.com/widergy/mobile-ui/compare/v2.12.2...v2.13.0) (2026-04-22)
2
+
3
+
4
+ ### Features
5
+
6
+ * [CX-2188] new size utstatus ([#499](https://github.com/widergy/mobile-ui/issues/499)) ([de280e4](https://github.com/widergy/mobile-ui/commit/de280e4b20731ce0b53a65ab20ba684004cd4c62))
7
+
1
8
  ## [2.12.2](https://github.com/widergy/mobile-ui/compare/v2.12.1...v2.12.2) (2026-04-17)
2
9
 
3
10
 
package/lib/components/UTStatus/README.md CHANGED
@@ -1,24 +1,92 @@
1
1
  # UTStatus
2
2
 
3
- ## Description
3
+ ## Descripción
4
4
 
5
- `UTStatus` is a simple status indicator that combines an icon and a label. It's fully theme-aware and supports multiple variants and types. It is designed to be flexible and themeable to fit different UI requirements.
5
+ `UTStatus` es un indicador de estado que combina un ícono y una etiqueta de texto. Es completamente consciente del tema y soporta múltiples variantes de color y tamaños. Está diseñado para ser flexible y personalizable.
6
6
 
7
7
  ## Props
8
8
 
9
- | Name | Type | Default | Description |
10
- | ----------- | ------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
11
- | Icon | string | - | Allows display for a custom icon. If omitted, a default Icon for the variant will be used. |
12
- | labelProps | object | {} | Props to pass down to the internal UTLabel component. |
13
- | style | object | - | Custom styles to apply to the component. |
14
- | shade | string | '01' | Shade to apply to the palette variant specified |
15
- | variant | string | 'success' | The variant will defined the default icon that the component will render, as well as the background color for the status container. |
16
- | withoutIcon | bool | false | if `true`, no icon will be rendered. |
9
+ | Nombre | Tipo | Default | Descripción |
10
+ | ----------- | ------ | ----------- | ---------------------------------------------------------------------------------------------------------------- |
11
+ | Icon | string | - | Nombre de un ícono personalizado. Si se omite, se usa el ícono por defecto según la variante. |
12
+ | labelProps | object | {} | Props adicionales que se pasan al componente `UTLabel` interno. |
13
+ | shade | string | `'01'` | Shade de la paleta para la variante especificada. |
14
+ | size | string | - | Tamaño del componente. Ver tabla de tamaños. Si se omite, se usa el tamaño por defecto. |
15
+ | style | object | - | Estilos personalizados para aplicar al componente. |
16
+ | variant | string | `'success'` | Define el ícono por defecto y el color de fondo del contenedor. Ver tabla de variantes. |
17
+ | withoutIcon | bool | `false` | Si es `true`, no se renderiza el ícono. |
17
18
 
18
- ## Example
19
+ ## Tamaños
20
+
21
+ La prop `size` es opcional. Sin ella, el componente usa el tamaño por defecto.
22
+
23
+ | `size` | Ícono | Variante de fuente | Padding V / H | Gap |
24
+ | ---------- | ----- | ------------------ | ------------- | ---- |
25
+ | `"xsmall"` | 14px | `xsmall` | 2px / 4px | 4px |
26
+ | sin prop | — | `body` | 4px / 8px | 8px |
27
+
28
+ Los tamaños de fuente son los definidos por `UTLabel` para cada variante y pueden ser escalados por el sistema.
29
+
30
+ ## Variantes
31
+
32
+ | Variante | Ícono por defecto | Color de fondo |
33
+ | ------------- | -------------------- | -------------------- |
34
+ | `success` | `IconCheck` | `Palette.success` |
35
+ | `error` | `IconX` | `Palette.error` |
36
+ | `warning` | `IconAlertTriangle` | `Palette.warning` |
37
+ | `information` | `IconInfoCircle` | `Palette.information`|
38
+ | `accent` | `IconInfoCircle` | `Palette.accent` |
39
+ | `gray` | `IconArchive` | `Palette.gray` |
40
+
41
+ ## Ejemplos
42
+
43
+ ### Uso básico
44
+
45
+ ```jsx
46
+ <UTStatus variant="success">Operación exitosa</UTStatus>
47
+ <UTStatus variant="error">Ocurrió un error</UTStatus>
48
+ <UTStatus variant="warning">Atención requerida</UTStatus>
49
+ <UTStatus variant="information">Información disponible</UTStatus>
50
+ ```
51
+
52
+ ### Tamaño xsmall
53
+
54
+ ```jsx
55
+ <UTStatus size="xsmall" variant="success">Exitoso</UTStatus>
56
+ <UTStatus size="xsmall" variant="error">Error</UTStatus>
57
+ <UTStatus size="xsmall" variant="warning">Advertencia</UTStatus>
58
+ ```
59
+
60
+ ### Con shade personalizado
61
+
62
+ ```jsx
63
+ <UTStatus shade="03" variant="error">Error shade 03</UTStatus>
64
+ ```
65
+
66
+ ### Con ícono personalizado
67
+
68
+ ```jsx
69
+ <UTStatus Icon="IconShoppingCart" variant="accent">En carrito</UTStatus>
70
+ ```
71
+
72
+ ### Sin ícono
73
+
74
+ ```jsx
75
+ <UTStatus variant="information" withoutIcon>Solo texto</UTStatus>
76
+ ```
77
+
78
+ ### Con markdown
79
+
80
+ ```jsx
81
+ <UTStatus labelProps={{ withMarkdown: true }} variant="accent">
82
+ Estado **con markdown**
83
+ </UTStatus>
84
+ ```
85
+
86
+ ### Con estilos personalizados
19
87
 
20
88
  ```jsx
21
- <UTStatus variant="error" shade="03" labelProps={{ withMarkdown: true }}>
22
- Error con Markdown
89
+ <UTStatus style={{ container: { borderRadius: 8 } }} variant="success">
90
+ Borde redondeado
23
91
  </UTStatus>
24
92
  ```
package/lib/components/UTStatus/constants.js CHANGED
@@ -1,3 +1,7 @@
1
+ export const SIZES = {
2
+ xsmall: 'xsmall'
3
+ };
4
+
1
5
  export const VARIANTS = {
2
6
  accent: 'accent',
3
7
  error: 'error',
package/lib/components/UTStatus/index.js CHANGED
@@ -1,13 +1,20 @@
1
1
  import { View } from 'react-native';
2
2
  import React from 'react';
3
- import { bool, object, string } from 'prop-types';
3
+ import { bool, node, object, string } from 'prop-types';
4
4
 
5
5
  import UTLabel from '../UTLabel';
6
6
  import UTIcon from '../UTIcon';
7
7
  import { mergeMultipleStyles } from '../../utils/styleUtils';
8
8
  import { useTheme } from '../../theming';
9
9
 
10
- import { defaultIconMapper, ownStyles, getVariantStyles } from './theme';
10
+ import {
11
+ defaultIconMapper,
12
+ getIconSize,
13
+ getLabelVariant,
14
+ getSizeStyles,
15
+ getVariantStyles,
16
+ ownStyles
17
+ } from './theme';
11
18
  import { VARIANTS } from './constants';
12
19
 
13
20
  const UTStatus = ({
@@ -15,6 +22,7 @@ const UTStatus = ({
15
22
  Icon,
16
23
  labelProps = {},
17
24
  shade = '01',
25
+ size,
18
26
  style,
19
27
  variant = VARIANTS.success,
20
28
  withoutIcon
@@ -22,15 +30,18 @@ const UTStatus = ({
22
30
  const theme = useTheme();
23
31
  const themedStyles = mergeMultipleStyles(
24
32
  ownStyles,
33
+ getSizeStyles(size),
25
34
  getVariantStyles(theme)({ variant, shade }),
26
35
  theme?.UTStatus,
27
36
  style
28
37
  );
29
38
  const StatusIcon = Icon ?? defaultIconMapper(variant);
39
+ const iconSize = getIconSize(size);
40
+ const labelVariant = getLabelVariant(size);
30
41
  return (
31
42
  <View style={themedStyles.container}>
32
- {withoutIcon ? null : <UTIcon colorTheme={variant} name={StatusIcon} />}
33
- <UTLabel colorTheme={variant} {...labelProps}>
43
+ {withoutIcon ? null : <UTIcon colorTheme={variant} name={StatusIcon} size={iconSize} />}
44
+ <UTLabel colorTheme={variant} variant={labelVariant} {...labelProps}>
34
45
  {children}
35
46
  </UTLabel>
36
47
  </View>
@@ -38,9 +49,12 @@ const UTStatus = ({
38
49
  };
39
50
 
40
51
  UTStatus.propTypes = {
52
+ children: node,
41
53
  Icon: string,
42
54
  labelProps: object,
43
55
  shade: string,
56
+ size: string,
57
+ style: object,
44
58
  variant: string,
45
59
  withoutIcon: bool
46
60
  };
package/lib/components/UTStatus/theme.js CHANGED
@@ -1,4 +1,4 @@
1
- import { VARIANTS } from './constants';
1
+ import { SIZES, VARIANTS } from './constants';
2
2
 
3
3
  export const defaultIconMapper = variant =>
4
4
  ({
@@ -10,6 +10,27 @@ export const defaultIconMapper = variant =>
10
10
  [VARIANTS.warning]: 'IconAlertTriangle'
11
11
  })[variant];
12
12
 
13
+ export const getIconSize = size =>
14
+ ({
15
+ [SIZES.xsmall]: 14
16
+ })[size];
17
+
18
+ export const getLabelVariant = size =>
19
+ ({
20
+ [SIZES.xsmall]: 'xsmall'
21
+ })[size];
22
+
23
+ export const getSizeStyles = size =>
24
+ ({
25
+ [SIZES.xsmall]: {
26
+ container: {
27
+ gap: 4,
28
+ paddingHorizontal: 4,
29
+ paddingVertical: 2
30
+ }
31
+ }
32
+ })[size] || {};
33
+
13
34
  export const ownStyles = {
14
35
  container: {
15
36
  flexDirection: 'row',
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "2.12.2",
5
+ "version": "2.13.0",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [