@widergy/mobile-ui 2.13.1 → 2.15.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 (12) hide show
  1. package/CHANGELOG.md +68 -77
  2. package/lib/components/UTActionCard/components/BottomActions/constants.js +1 -0
  3. package/lib/components/UTActionCard/components/BottomActions/index.js +74 -31
  4. package/lib/components/UTActionCard/components/BottomActions/styles.js +8 -0
  5. package/lib/components/UTActionCard/index.js +7 -1
  6. package/lib/components/UTButton/constants.js +3 -0
  7. package/lib/components/UTButton/theme.js +5 -4
  8. package/lib/components/UTButtonGroup/README.md +2 -1
  9. package/lib/components/UTButtonGroup/constants.js +2 -0
  10. package/lib/components/UTButtonGroup/index.js +30 -22
  11. package/lib/components/UTButtonGroup/styles.js +3 -13
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,172 +1,163 @@
1
- ## [2.13.1](https://github.com/widergy/mobile-ui/compare/v2.13.0...v2.13.1) (2026-04-24)
1
+ # [2.15.0](https://github.com/widergy/mobile-ui/compare/v2.14.0...v2.15.0) (2026-05-11)
2
2
 
3
3
 
4
- ### Bug Fixes
4
+ ### Features
5
+
6
+ * [CX-2189] button group and button styles update ([#503](https://github.com/widergy/mobile-ui/issues/503)) ([e2ad63b](https://github.com/widergy/mobile-ui/commit/e2ad63b22682be18b6d5d9094bae2a003b4e1753))
7
+
8
+ # [2.14.0](https://github.com/widergy/mobile-ui/compare/v2.13.1...v2.14.0) (2026-04-27)
9
+
10
+ ### Novedades y Mejoras
11
+
12
+ * Se amplió la tarjeta de acciones rápidas para mostrar estados informativos (como la confirmación de adhesión a factura digital), ajustar el tamaño de los botones y controlar la apariencia visual del pie de tarjeta, sin afectar los usos existentes. [#501](https://github.com/widergy/Energy-UI-Mobile/pull/501)
5
13
 
6
- * updated docs ([#502](https://github.com/widergy/mobile-ui/issues/502)) ([936a98b](https://github.com/widergy/mobile-ui/commit/936a98bdc71e8e9e2a7283701cbe3581008846de))
14
+ ## [2.13.1](https://github.com/widergy/mobile-ui/compare/v2.13.0...v2.13.1) (2026-04-24)
15
+
16
+ ### Novedades y Mejoras
17
+
18
+ * Mejoras internas de la plataforma. [#502](https://github.com/widergy/Energy-UI-Mobile/pull/502)
7
19
 
8
20
  # [2.13.0](https://github.com/widergy/mobile-ui/compare/v2.12.2...v2.13.0) (2026-04-22)
9
21
 
22
+ ### Novedades y Mejoras
10
23
 
11
- ### Features
24
+ * El componente de estado (UTStatus) ahora soporta un tamaño extra pequeño, ideal para contextos donde el espacio es reducido. [#499](https://github.com/widergy/Energy-UI-Mobile/pull/499)
25
+ * Mejoras internas de la plataforma. [#499](https://github.com/widergy/Energy-UI-Mobile/pull/499)
12
26
 
13
- * [CX-2188] new size utstatus ([#499](https://github.com/widergy/mobile-ui/issues/499)) ([de280e4](https://github.com/widergy/mobile-ui/commit/de280e4b20731ce0b53a65ab20ba684004cd4c62))
27
+ ### Correcciones
14
28
 
15
- ## [2.12.2](https://github.com/widergy/mobile-ui/compare/v2.12.1...v2.12.2) (2026-04-17)
29
+ * Se corrigieron errores menores en los componentes de carga de archivos que impedían el funcionamiento correcto del flujo de subida. [#499](https://github.com/widergy/Energy-UI-Mobile/pull/499)
16
30
 
31
+ ## [2.12.2](https://github.com/widergy/mobile-ui/compare/v2.12.1...v2.12.2) (2026-04-17)
17
32
 
18
- ### Bug Fixes
33
+ ### Correcciones
19
34
 
20
- * [UGGC-101] utcoupon title size ([#498](https://github.com/widergy/mobile-ui/issues/498)) ([7544789](https://github.com/widergy/mobile-ui/commit/7544789f1f25bdf10bfd77d80816a32b586cfe10))
35
+ * Se ajustó el tamaño de los textos en la pantalla de cupones para mejorar la visualización. [#498](https://github.com/widergy/Energy-UI-Mobile/pull/498)
36
+ * Mejoras internas de la plataforma. [`9d7f58e`](https://github.com/widergy/Energy-UI-Mobile/commit/9d7f58e)
21
37
 
22
38
  ## [2.12.1](https://github.com/widergy/mobile-ui/compare/v2.12.0...v2.12.1) (2026-04-14)
23
39
 
40
+ ### Correcciones
24
41
 
25
- ### Bug Fixes
26
-
27
- * [DEV-766] remove --cache flag from eslint lint scripts ([#497](https://github.com/widergy/mobile-ui/issues/497)) ([fe01153](https://github.com/widergy/mobile-ui/commit/fe011534839012d5b9c67666ad3be7d3f05edb4c))
42
+ * Mejoras internas de la plataforma [#497](https://github.com/widergy/Energy-UI-Mobile/pull/497)
28
43
 
29
44
  # [2.12.0](https://github.com/widergy/mobile-ui/compare/v2.11.0...v2.12.0) (2026-04-13)
30
45
 
46
+ ### Novedades y Mejoras
31
47
 
32
- ### Features
33
-
34
- * [AUTO-208] Test id's implementation to form fields ([#492](https://github.com/widergy/mobile-ui/issues/492)) ([7ac3c8b](https://github.com/widergy/mobile-ui/commit/7ac3c8b58a46f554e9bafbd88b4fb24ac6695d50))
48
+ * Se mejoró el soporte de automatización en formularios: los campos de carga de archivos, selección, interruptores y botones de opción ahora son identificables de forma consistente en pruebas automatizadas, lo que facilita la validación del flujo de usuario. [#492](https://github.com/widergy/Energy-UI-Mobile/pull/492)
35
49
 
36
50
  # [2.11.0](https://github.com/widergy/mobile-ui/compare/v2.10.0...v2.11.0) (2026-04-13)
37
51
 
52
+ ### Novedades y Mejoras
38
53
 
39
- ### Features
40
-
41
- * [UGGC-95] UTCoupon ([#493](https://github.com/widergy/mobile-ui/issues/493)) ([11a3367](https://github.com/widergy/mobile-ui/commit/11a336717acfe31e146288981360481b5ad73268))
54
+ * Se incorporó un nuevo componente de cupón seleccionable en el flujo de pedidos, con soporte para imagen, textos y estados visual activo y deshabilitado. [#493](https://github.com/widergy/Energy-UI-Mobile/pull/493)
42
55
 
43
56
  # [2.10.0](https://github.com/widergy/mobile-ui/compare/v2.9.7...v2.10.0) (2026-04-13)
44
57
 
58
+ ### Novedades y Mejoras
45
59
 
46
- ### Features
47
-
48
- * [PROMI-221] UTPhoneInput soporta valor string u objeto con prefix editable ([#496](https://github.com/widergy/mobile-ui/issues/496)) ([07a8a8b](https://github.com/widergy/mobile-ui/commit/07a8a8bf4101efcd89176119de7a8aa62252f79e))
60
+ * El campo de ingreso de número de teléfono ahora admite la selección de prefijo telefónico como parte del valor, mejorando la consistencia del dato ingresado en formularios. [#496](https://github.com/widergy/Energy-UI-Mobile/pull/496)
49
61
 
50
62
  ## [2.9.7](https://github.com/widergy/mobile-ui/compare/v2.9.6...v2.9.7) (2026-04-10)
51
63
 
64
+ ### Correcciones
52
65
 
53
- ### Bug Fixes
54
-
55
- * [UGGC-99] replace deprecated defaultProps with default parameter in UTModal ([#495](https://github.com/widergy/mobile-ui/issues/495)) ([b2c095f](https://github.com/widergy/mobile-ui/commit/b2c095f57a962e14029ddac9eb80cff07bd6b011))
66
+ * Se corrigió un error que causaba el cierre inesperado de la aplicación al tocar fuera de ciertos modales o presionar el botón Atrás en Android, cuando el modal no tenía habilitada esa acción de cierre. [#495](https://github.com/widergy/Energy-UI-Mobile/pull/495)
56
67
 
57
68
  ## [2.9.6](https://github.com/widergy/mobile-ui/compare/v2.9.5...v2.9.6) (2026-04-09)
58
69
 
70
+ ### Novedades y Mejoras
59
71
 
60
- ### Bug Fixes
61
-
62
- * [UGGC-99] utbottomsheet onpress ([#494](https://github.com/widergy/mobile-ui/issues/494)) ([f5a3685](https://github.com/widergy/mobile-ui/commit/f5a368504eac11a0520a666acbcb4929893bb5fa))
72
+ * Se amplió la flexibilidad del componente de panel inferior, permitiendo personalizar la acción del botón según cada caso de uso, sin afectar el comportamiento existente. [#494](https://github.com/widergy/Energy-UI-Mobile/pull/494)
63
73
 
64
74
  ## [2.9.5](https://github.com/widergy/mobile-ui/compare/v2.9.4...v2.9.5) (2026-04-08)
65
75
 
76
+ ### Novedades y Mejoras
66
77
 
67
- ### Bug Fixes
68
-
69
- * [UGGC-91] utworkflow action options ([#490](https://github.com/widergy/mobile-ui/issues/490)) ([2c83c80](https://github.com/widergy/mobile-ui/commit/2c83c8092a5edcd1114a4867e6017842c8a6806a))
78
+ * Se mejoró la personalización de los botones de navegación en los flujos de gestión, permitiendo configurar la posición de los íconos según las necesidades de cada pantalla. [#490](https://github.com/widergy/Energy-UI-Mobile/pull/490)
70
79
 
71
80
  ## [2.9.4](https://github.com/widergy/mobile-ui/compare/v2.9.3...v2.9.4) (2026-04-06)
72
81
 
82
+ ### Correcciones
73
83
 
74
- ### Bug Fixes
75
-
76
- * [UGGC-?] utbanner sizes test fix ([#491](https://github.com/widergy/mobile-ui/issues/491)) ([0021809](https://github.com/widergy/mobile-ui/commit/0021809cd1e4188351344d729ac5af9ebc536efd))
84
+ * Se corrigieron los tamaños del título del banner en la versión móvil para que se visualicen correctamente en pantallas medianas y pequeñas. [#491](https://github.com/widergy/Energy-UI-Mobile/pull/491)
77
85
 
78
86
  ## [2.9.3](https://github.com/widergy/mobile-ui/compare/v2.9.2...v2.9.3) (2026-03-30)
79
87
 
88
+ ### Correcciones
80
89
 
81
- ### Bug Fixes
82
-
83
- * [UGGC-84] standarize utbanner colortheme variant and button ([#489](https://github.com/widergy/mobile-ui/issues/489)) ([912ca0f](https://github.com/widergy/mobile-ui/commit/912ca0f73d0b90376f09ee0d00e3d1d67cc8ef6b))
90
+ * Se corrigieron inconsistencias visuales en los banners de la aplicación, mejorando su apariencia en distintas variantes de color, estilo y acciones disponibles. [#489](https://github.com/widergy/Energy-UI-Mobile/pull/489)
84
91
 
85
92
  ## [2.9.2](https://github.com/widergy/mobile-ui/compare/v2.9.1...v2.9.2) (2026-03-26)
86
93
 
94
+ ### Novedades y Mejoras
87
95
 
88
- ### Bug Fixes
89
-
90
- * generated best practices file ([#443](https://github.com/widergy/mobile-ui/issues/443)) ([d15bf30](https://github.com/widergy/mobile-ui/commit/d15bf30e1d414f5d288629833dea2ee3ee115580))
96
+ * Mejoras internas de la plataforma [#443](https://github.com/widergy/Energy-UI-Mobile/pull/443)
91
97
 
92
98
  ## [2.9.1](https://github.com/widergy/mobile-ui/compare/v2.9.0...v2.9.1) (2026-03-16)
93
99
 
100
+ ### Novedades y Mejoras
94
101
 
95
- ### Bug Fixes
96
-
97
- * [UGGC-78] standardize utbanner and stacked actions utworkflowcontainer ([#488](https://github.com/widergy/mobile-ui/issues/488)) ([ed0772c](https://github.com/widergy/mobile-ui/commit/ed0772c64aaf8818bc3650a284f8f253cd6e33bf))
102
+ * Las acciones de navegación en los flujos de trabajo ahora pueden apilarse verticalmente, mejorando la experiencia en pantallas con espacio reducido. [#488](https://github.com/widergy/Energy-UI-Mobile/pull/488)
103
+ * Se actualizó la apariencia del componente de banners para alinearse con los estándares de diseño vigentes. [#488](https://github.com/widergy/Energy-UI-Mobile/pull/488)
98
104
 
99
105
  # [2.9.0](https://github.com/widergy/mobile-ui/compare/v2.8.1...v2.9.0) (2026-03-11)
100
106
 
107
+ ### Novedades y Mejoras
101
108
 
102
- ### Features
103
-
104
- * add test id ([#487](https://github.com/widergy/mobile-ui/issues/487)) ([c9ea05b](https://github.com/widergy/mobile-ui/commit/c9ea05b22d834c666ad3746f0075657f223c8b78))
109
+ * Se mejoró la accesibilidad del componente de casilla de verificación para facilitar la automatización de flujos como la adhesión a factura digital. [#487](https://github.com/widergy/Energy-UI-Mobile/pull/487)
105
110
 
106
111
  ## [2.8.1](https://github.com/widergy/mobile-ui/compare/v2.8.0...v2.8.1) (2026-02-19)
107
112
 
113
+ ### Correcciones
108
114
 
109
- ### Bug Fixes
110
-
111
- * [NTGE-205] fix tooltip undefined ([#486](https://github.com/widergy/mobile-ui/issues/486)) ([2bb3c0f](https://github.com/widergy/mobile-ui/commit/2bb3c0f612efac13ca5224f839faf9288119fe6f))
115
+ * Se corrigió un error que impedía iniciar sesión correctamente con correo electrónico. [#486](https://github.com/widergy/Energy-UI-Mobile/pull/486)
112
116
 
113
117
  # [2.8.0](https://github.com/widergy/mobile-ui/compare/v2.7.0...v2.8.0) (2026-02-18)
114
118
 
119
+ ### Novedades y Mejoras
115
120
 
116
- ### Features
117
-
118
- * [EGIT-29] markdown in labels ([#485](https://github.com/widergy/mobile-ui/issues/485)) ([faf5416](https://github.com/widergy/mobile-ui/commit/faf54162b7855bc1aecac71a47d4ace6ebbeb866))
121
+ * Las etiquetas dentro de la aplicación ahora admiten formato enriquecido, permitiendo textos con negritas, listas y otros estilos visuales. [#485](https://github.com/widergy/Energy-UI-Mobile/pull/485)
119
122
 
120
123
  # [2.7.0](https://github.com/widergy/mobile-ui/compare/v2.6.0...v2.7.0) (2026-02-18)
121
124
 
125
+ ### Novedades y Mejoras
122
126
 
123
- ### Features
124
-
125
- * [DEV-766] mvp widergy/eslint-config package ([#465](https://github.com/widergy/mobile-ui/issues/465)) ([4c0f9e4](https://github.com/widergy/mobile-ui/commit/4c0f9e4abc7de0adc664db512767a85be53c52a3))
126
- * [EGIT-29] markdown in labels ([#478](https://github.com/widergy/mobile-ui/issues/478)) ([1805092](https://github.com/widergy/mobile-ui/commit/18050920a71e4295cdc5d66dbec5b52ace80d865))
127
- * [EGIT-29] markdown in labels ([#479](https://github.com/widergy/mobile-ui/issues/479)) ([25c13da](https://github.com/widergy/mobile-ui/commit/25c13da980b3aa64c128128581e645d74175b5dc))
128
- * [EGIT-29] markdown in labels ([#480](https://github.com/widergy/mobile-ui/issues/480)) ([0e7a20a](https://github.com/widergy/mobile-ui/commit/0e7a20a06d62a84046d3c0deb3de7738983b44bb))
129
- * [EGIT-29] markdown in labels ([#481](https://github.com/widergy/mobile-ui/issues/481)) ([21d0b8e](https://github.com/widergy/mobile-ui/commit/21d0b8e70184b9822ea9247aab66e52a853ba332))
130
- * [EGIT-29] markdown in labels ([#482](https://github.com/widergy/mobile-ui/issues/482)) ([0326e2c](https://github.com/widergy/mobile-ui/commit/0326e2ccf673466d8a54142fc24053aa34f3716f))
131
- * [EGIT-29] markdown in labels ([#483](https://github.com/widergy/mobile-ui/issues/483)) ([d197382](https://github.com/widergy/mobile-ui/commit/d19738218c8f98e49befca0846653d861c75c5e7))
132
- * [EGIT-29] markdown in labels ([#484](https://github.com/widergy/mobile-ui/issues/484)) ([1f37636](https://github.com/widergy/mobile-ui/commit/1f37636c1da7b16fcfc43085e1cc23662f777420))
133
- * [NTGE-184] add image in tooltips ([#476](https://github.com/widergy/mobile-ui/issues/476)) ([59485b2](https://github.com/widergy/mobile-ui/commit/59485b2ad54b25b1036170a9b5eee2b88a77fc40))
127
+ * Los tooltips de la app móvil ahora muestran imágenes correctamente, en lugar de texto plano, alineando el comportamiento con la versión web. [#476](https://github.com/widergy/Energy-UI-Mobile/pull/476)
128
+ * Se mejoró la presentación visual de etiquetas de texto en ciertos flujos, que ahora se muestran con el formato correcto. [#478](https://github.com/widergy/Energy-UI-Mobile/pull/478)
129
+ * Mejoras internas de la plataforma. [#465](https://github.com/widergy/Energy-UI-Mobile/pull/465) [#479](https://github.com/widergy/Energy-UI-Mobile/pull/479) [#480](https://github.com/widergy/Energy-UI-Mobile/pull/480) [#481](https://github.com/widergy/Energy-UI-Mobile/pull/481) [#482](https://github.com/widergy/Energy-UI-Mobile/pull/482) [#483](https://github.com/widergy/Energy-UI-Mobile/pull/483) [#484](https://github.com/widergy/Energy-UI-Mobile/pull/484)
134
130
 
135
131
  # [2.6.0](https://github.com/widergy/mobile-ui/compare/v2.5.2...v2.6.0) (2026-02-09)
136
132
 
133
+ ### Novedades y Mejoras
137
134
 
138
- ### Features
139
-
140
- * [EGIT-7] account association label ([#477](https://github.com/widergy/mobile-ui/issues/477)) ([b2a60c7](https://github.com/widergy/mobile-ui/commit/b2a60c70d91af103af0c6621cafe8a37a1c62457))
135
+ * Se mejoró la consistencia visual en el formulario de asociación de cuentas: las etiquetas de los campos ahora tienen el mismo estilo que el resto de la tabla. [#477](https://github.com/widergy/Energy-UI-Mobile/pull/477)
141
136
 
142
137
  ## [2.5.2](https://github.com/widergy/mobile-ui/compare/v2.5.1...v2.5.2) (2026-01-28)
143
138
 
139
+ ### Correcciones
144
140
 
145
- ### Bug Fixes
146
-
147
- * disabled checked color prop unused ([#458](https://github.com/widergy/mobile-ui/issues/458)) ([e99093f](https://github.com/widergy/mobile-ui/commit/e99093f66c44542b1ddebae811c55216bac145b9))
148
- * update node image ([#475](https://github.com/widergy/mobile-ui/issues/475)) ([6e078b2](https://github.com/widergy/mobile-ui/commit/6e078b2418e26585abc38747d479ff00b261bf23))
141
+ * Se corrigió el color de los ítems seleccionados y deshabilitados en las listas de selección múltiple. [#458](https://github.com/widergy/Energy-UI-Mobile/pull/458)
142
+ * Mejoras internas de la plataforma. [#475](https://github.com/widergy/Energy-UI-Mobile/pull/475)
149
143
 
150
144
  ## [2.5.1](https://github.com/widergy/mobile-ui/compare/v2.5.0...v2.5.1) (2026-01-27)
151
145
 
146
+ ### Correcciones
152
147
 
153
- ### Bug Fixes
154
-
155
- * change selected index ([#474](https://github.com/widergy/mobile-ui/issues/474)) ([351d864](https://github.com/widergy/mobile-ui/commit/351d864768a2adac1616a5ed826fdf98d6f83fe7))
148
+ * Se corrigió el comportamiento de un acceso directo que fallaba al usarse más de una vez y no actualizaba correctamente la sección activa de la aplicación. [#474](https://github.com/widergy/Energy-UI-Mobile/pull/474)
156
149
 
157
150
  # [2.5.0](https://github.com/widergy/mobile-ui/compare/v2.4.0...v2.5.0) (2026-01-22)
158
151
 
152
+ ### Novedades y Mejoras
159
153
 
160
- ### Features
161
-
162
- * index prop ([#473](https://github.com/widergy/mobile-ui/issues/473)) ([f229d77](https://github.com/widergy/mobile-ui/commit/f229d771a38e9b9cb9573bc27d7d78e7e257e7d1))
154
+ * Mejoras internas de la plataforma [#473](https://github.com/widergy/Energy-UI-Mobile/pull/473)
163
155
 
164
156
  # [2.4.0](https://github.com/widergy/mobile-ui/compare/v2.3.5...v2.4.0) (2026-01-19)
165
157
 
158
+ ### Novedades y Mejoras
166
159
 
167
- ### Features
168
-
169
- * [AUTO-166] Test id support for UTActionCard ([#472](https://github.com/widergy/mobile-ui/issues/472)) ([d72795e](https://github.com/widergy/mobile-ui/commit/d72795e52300e174f9ae7e4165b496ab380a74c0))
160
+ * Mejoras internas de la plataforma [#472](https://github.com/widergy/Energy-UI-Mobile/pull/472)
170
161
 
171
162
  ## [2.3.5](https://github.com/widergy/mobile-ui/compare/v2.3.4...v2.3.5) (2025-12-18)
172
163
 
package/lib/components/UTActionCard/components/BottomActions/constants.js CHANGED
@@ -1 +1,2 @@
1
1
  export const DEFAULT_REDIRECTION_ICON = 'IconChevronRight';
2
+ export const STATUS_TYPE = 'status';
package/lib/components/UTActionCard/components/BottomActions/index.js CHANGED
@@ -1,47 +1,83 @@
1
1
  import React, { Fragment, memo } from 'react';
2
- import { arrayOf, bool, elementType, func, oneOfType, shape, string } from 'prop-types';
2
+ import { arrayOf, bool, object, oneOfType, func, shape, string } from 'prop-types';
3
3
  import { View } from 'react-native';
4
4
 
5
5
  import UTButton from '../../../UTButton';
6
+ import UTIcon from '../../../UTIcon';
7
+ import UTLabel from '../../../UTLabel';
6
8
  import { ACTION_TYPES } from '../../constants';
7
9
  import { useTheme } from '../../../../theming';
8
10
  import { mergeMultipleStyles } from '../../../../utils/styleUtils';
9
11
 
10
- import { DEFAULT_REDIRECTION_ICON } from './constants';
12
+ import { DEFAULT_REDIRECTION_ICON, STATUS_TYPE } from './constants';
11
13
  import styles, { getThemeStyles } from './styles';
12
14
 
13
- const BottomActions = ({ actions = [], bottomActionsVariant }) => {
15
+ const BottomActions = ({ actions = [], bottomActionsVariant, withTopBorder = true }) => {
14
16
  const theme = useTheme();
15
17
  const type = actions.length > 2 ? ACTION_TYPES.REDIRECTION : bottomActionsVariant || ACTION_TYPES.DEFAULT;
16
18
  const isRedirection = type === ACTION_TYPES.REDIRECTION;
17
19
  const themedStyles = mergeMultipleStyles(styles, getThemeStyles(theme, isRedirection));
18
20
 
19
21
  return (
20
- <View style={[themedStyles.actionsContainer, themedStyles.redirectionActionsContainer]}>
21
- {actions.map(({ colorTheme = 'primary', disabled, Icon, label, loading, onPress }, i) => (
22
- <Fragment key={label}>
23
- {!isRedirection && i > 0 && <View style={[themedStyles.horizontalSeparator]} />}
24
- <UTButton
25
- style={{
26
- icon: themedStyles.icon,
27
- root: themedStyles.actionButton
28
- }}
29
- colorTheme={colorTheme}
30
- disabled={disabled}
31
- Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
32
- iconPlacement={isRedirection ? 'right' : 'left'}
33
- loading={loading}
34
- onPress={onPress}
35
- size="large"
36
- variant="text"
37
- >
38
- {label}
39
- </UTButton>
40
- {isRedirection && actions.length > 1 && i !== actions.length - 1 && (
41
- <View style={[themedStyles.verticalSeparator]} />
42
- )}
43
- </Fragment>
44
- ))}
22
+ <View
23
+ style={[
24
+ themedStyles.actionsContainer,
25
+ themedStyles.redirectionActionsContainer,
26
+ // eslint-disable-next-line react-native/no-inline-styles
27
+ !withTopBorder && { borderTopWidth: 0 }
28
+ ]}
29
+ >
30
+ {actions.map(
31
+ (
32
+ {
33
+ colorTheme = 'primary',
34
+ containerStyle,
35
+ disabled,
36
+ Icon,
37
+ iconArea,
38
+ iconProps = {},
39
+ label,
40
+ labelProps = {},
41
+ loading,
42
+ onPress,
43
+ size = 'large',
44
+ type: itemType
45
+ },
46
+ i
47
+ ) => (
48
+ <Fragment key={label}>
49
+ {!isRedirection && i > 0 && <View style={themedStyles.horizontalSeparator} />}
50
+ {itemType === STATUS_TYPE ? (
51
+ <View style={[themedStyles.statusContainer, containerStyle]}>
52
+ {Icon && <UTIcon area={iconArea} colorTheme={colorTheme} name={Icon} {...iconProps} />}
53
+ <UTLabel colorTheme={colorTheme} {...labelProps}>
54
+ {label}
55
+ </UTLabel>
56
+ </View>
57
+ ) : (
58
+ <UTButton
59
+ style={{
60
+ icon: themedStyles.icon,
61
+ root: { ...themedStyles.actionButton, ...containerStyle }
62
+ }}
63
+ colorTheme={colorTheme}
64
+ disabled={disabled}
65
+ Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
66
+ iconPlacement={isRedirection ? 'right' : 'left'}
67
+ loading={loading}
68
+ onPress={onPress}
69
+ size={size}
70
+ variant="text"
71
+ >
72
+ {label}
73
+ </UTButton>
74
+ )}
75
+ {isRedirection && actions.length > 1 && i !== actions.length - 1 && (
76
+ <View style={themedStyles.verticalSeparator} />
77
+ )}
78
+ </Fragment>
79
+ )
80
+ )}
45
81
  </View>
46
82
  );
47
83
  };
@@ -50,14 +86,21 @@ BottomActions.propTypes = {
50
86
  actions: arrayOf(
51
87
  shape({
52
88
  colorTheme: string,
89
+ containerStyle: object,
53
90
  disabled: bool,
54
- Icon: oneOfType([elementType, string]),
91
+ Icon: oneOfType([string]),
92
+ iconArea: bool,
93
+ iconProps: object,
55
94
  label: string,
95
+ labelProps: object,
56
96
  loading: bool,
57
- onPress: func
97
+ onPress: func,
98
+ size: string,
99
+ type: string
58
100
  })
59
101
  ),
60
- bottomActionsVariant: string
102
+ bottomActionsVariant: string,
103
+ withTopBorder: bool
61
104
  };
62
105
 
63
106
  export default memo(BottomActions);
package/lib/components/UTActionCard/components/BottomActions/styles.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
+ // eslint-disable-next-line default-param-last
3
4
  export const getThemeStyles = (theme = {}, isRedirection) => {
4
5
  const lightPalette = theme.Palette.light;
5
6
 
@@ -42,6 +43,13 @@ const styles = StyleSheet.create({
42
43
  },
43
44
  icon: {
44
45
  marginLeft: 'auto'
46
+ },
47
+ statusContainer: {
48
+ alignItems: 'center',
49
+ flexDirection: 'row',
50
+ gap: 8,
51
+ paddingHorizontal: 16,
52
+ paddingVertical: 12
45
53
  }
46
54
  });
47
55
 
package/lib/components/UTActionCard/index.js CHANGED
@@ -40,6 +40,7 @@ const UTActionCard = ({
40
40
  BackgroundImage,
41
41
  backgroundWidth = '100%',
42
42
  bottomActions,
43
+ bottomActionsBorder = true,
43
44
  bottomActionsVariant,
44
45
  children,
45
46
  classNames = {},
@@ -130,7 +131,11 @@ const UTActionCard = ({
130
131
  {internalLoader && loading
131
132
  ? null
132
133
  : !isEmpty(bottomActions) && (
133
- <BottomActions actions={bottomActions} bottomActionsVariant={bottomActionsVariant} />
134
+ <BottomActions
135
+ actions={bottomActions}
136
+ bottomActionsVariant={bottomActionsVariant}
137
+ withTopBorder={bottomActionsBorder}
138
+ />
134
139
  )}
135
140
  </LoaderWrapper>
136
141
  </Surface>
@@ -163,6 +168,7 @@ UTActionCard.propTypes = {
163
168
  onClick: func
164
169
  })
165
170
  ),
171
+ bottomActionsBorder: bool,
166
172
  bottomActionsVariant: oneOf([ACTION_TYPES.DEFAULT, ACTION_TYPES.REDIRECTION]),
167
173
  classNames: objectOf(string),
168
174
  dataTestId: string,
package/lib/components/UTButton/constants.js CHANGED
@@ -22,6 +22,7 @@ export const ICON_PLACEMENTS = {
22
22
 
23
23
  export const COLORS_MAPPER = {
24
24
  error: 'error',
25
+ gray: 'gray',
25
26
  negative: 'negative',
26
27
  primary: 'accent',
27
28
  secondary: 'neutral',
@@ -30,6 +31,7 @@ export const COLORS_MAPPER = {
30
31
 
31
32
  export const SHADOW_MAPPER = {
32
33
  [COLORS_MAPPER.error]: 'error',
34
+ [COLORS_MAPPER.gray]: 'gray',
33
35
  [COLORS_MAPPER.negative]: 'neutral',
34
36
  [COLORS_MAPPER.primary]: 'accent',
35
37
  [COLORS_MAPPER.secondary]: 'dark',
@@ -38,6 +40,7 @@ export const SHADOW_MAPPER = {
38
40
 
39
41
  export const PRESSED_SHADOW_MAPPER = {
40
42
  [COLORS_MAPPER.error]: 'error',
43
+ [COLORS_MAPPER.gray]: 'gray',
41
44
  [COLORS_MAPPER.negative]: 'dark',
42
45
  [COLORS_MAPPER.primary]: 'accent',
43
46
  [COLORS_MAPPER.secondary]: 'dark',
package/lib/components/UTButton/theme.js CHANGED
@@ -44,6 +44,7 @@ const baseButtonTheme = () => ({
44
44
  const variantsColorTheme = (theme, colorTheme, variant) => {
45
45
  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[defaultProps.colorTheme];
46
46
  const actionTheme = theme.Palette[colorName];
47
+ const lightTheme = theme.Palette[COLOR_THEMES.light];
47
48
  const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
48
49
  const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
49
50
  const shadow = getShadow({
@@ -60,13 +61,13 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
60
61
  const definition = {
61
62
  filled: {
62
63
  button: {
63
- backgroundColor: actionTheme['04'],
64
+ backgroundColor: colorTheme === COLORS_MAPPER.negative ? lightTheme['01'] : actionTheme['04'],
64
65
  borderColor: 'transparent',
65
66
  borderWidth: 1,
66
67
  fill: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
67
68
  pressed: {
68
69
  ...pressedShadow,
69
- backgroundColor: actionTheme['05']
70
+ backgroundColor: colorTheme === COLORS_MAPPER.negative ? lightTheme['02'] : actionTheme['05']
70
71
  }
71
72
  },
72
73
  text: {
@@ -96,7 +97,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
96
97
  outlined: {
97
98
  button: {
98
99
  borderWidth: 1,
99
- borderColor: actionTheme['05'],
100
+ borderColor: lightTheme['04'],
100
101
  fill: actionTheme['05'],
101
102
  pressed: {
102
103
  backgroundColor: actionTheme['02']
@@ -122,7 +123,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
122
123
  colorTheme: colorName
123
124
  },
124
125
  icon: {
125
- color: actionTheme['05']
126
+ color: colorName === COLOR_THEMES.gray ? actionTheme['04'] : actionTheme['05']
126
127
  }
127
128
  },
128
129
  shadow: {
package/lib/components/UTButtonGroup/README.md CHANGED
@@ -7,5 +7,6 @@
7
7
  | ------------ | :---------------- | ----------- | ---------------------------------------------------------------------------------------- |
8
8
  | actions | array | | Array of actions to render. Each action must include:`Icon`, `id` and `onPress` props. |
9
9
  | colorTheme | string | 'primary' | The color theme to use. One of:`primary`, `secondary`, `negative`. |
10
- | shape | string | 'square' | Type of the button. One of:`square`, `circle`. |
10
+ | shape | string | 'square' | Type of the button. One of:`square`, `circle`. |
11
+ | size | string | 'small' | Size of the button. One of:`small`, `medium`, `large`. |
11
12
  | selected | string / number | | Id of the active button. |
package/lib/components/UTButtonGroup/constants.js CHANGED
@@ -16,3 +16,5 @@ export const CIRCLE_TYPE = 'circle';
16
16
  export const SQUARE_TYPE = 'square';
17
17
  export const DEFAULT_TYPE = SQUARE_TYPE;
18
18
  export const DEFAULT_COLOR_THEME = 'primary';
19
+ export const DEFAULT_SIZE = 'small';
20
+ export const SHADOW_ACTIVE_COLOR_THEMES = ['primary', 'neutral', 'secondary'];
package/lib/components/UTButtonGroup/index.js CHANGED
@@ -6,40 +6,46 @@ import { useTheme } from '../../theming';
6
6
  import { mergeMultipleStyles } from '../../utils/styleUtils';
7
7
  import UTButton from '../UTButton';
8
8
 
9
- import { BACKGROUND_COLOR_MAPPER, DEFAULT_COLOR_THEME, DEFAULT_TYPE } from './constants';
9
+ import {
10
+ BACKGROUND_COLOR_MAPPER,
11
+ DEFAULT_COLOR_THEME,
12
+ DEFAULT_SIZE,
13
+ DEFAULT_TYPE,
14
+ SHADOW_ACTIVE_COLOR_THEMES
15
+ } from './constants';
10
16
  import { getTypeStyles, ownStyles } from './styles';
11
17
 
12
18
  const UTButtonGroup = ({
13
19
  actions,
14
20
  colorTheme = DEFAULT_COLOR_THEME,
15
21
  selected,
16
- shape: type = DEFAULT_TYPE
22
+ shape: type = DEFAULT_TYPE,
23
+ size = DEFAULT_SIZE
17
24
  }) => {
18
25
  const theme = useTheme();
19
26
  const backgroundColor =
20
27
  BACKGROUND_COLOR_MAPPER(theme)[colorTheme] || BACKGROUND_COLOR_MAPPER(theme).primary;
21
28
  const themedStyles = mergeMultipleStyles(ownStyles, getTypeStyles(type), theme?.UTButtonGroup);
29
+ const activeVariant = SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'shadow' : 'filled';
30
+ const inactiveColorTheme = SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'gray' : colorTheme;
22
31
 
23
32
  return (
24
33
  <View style={[themedStyles.container, backgroundColor]}>
25
- {actions.map(({ Icon, id, onPress }, index) => (
26
- <UTButton
27
- colorTheme={colorTheme}
28
- Icon={Icon}
29
- key={id}
30
- onPress={onPress}
31
- size="large"
32
- style={{
33
- root: {
34
- ...themedStyles.buttonRoot,
35
- ...(index === 0 ? themedStyles.firstButton : {}),
36
- ...(index === actions.length - 1 ? themedStyles.lastButton : {}),
37
- ...themedStyles.button
38
- }
39
- }}
40
- variant={selected === id ? 'filled' : 'text'}
41
- />
42
- ))}
34
+ {actions.map(buttonProps => {
35
+ const { id, label, ...rest } = buttonProps;
36
+ return (
37
+ <UTButton
38
+ key={id}
39
+ style={{ root: themedStyles.button }}
40
+ {...rest}
41
+ colorTheme={selected === id ? colorTheme : inactiveColorTheme}
42
+ size={size}
43
+ variant={selected === id ? activeVariant : 'text'}
44
+ >
45
+ {label}
46
+ </UTButton>
47
+ );
48
+ })}
43
49
  </View>
44
50
  );
45
51
  };
@@ -49,12 +55,14 @@ UTButtonGroup.propTypes = {
49
55
  shape({
50
56
  Icon: oneOfType([string, element]),
51
57
  id: oneOfType([number, string]),
52
- onClick: func
58
+ label: string,
59
+ onPress: func
53
60
  })
54
61
  ).isRequired,
55
62
  colorTheme: string,
56
63
  selected: oneOfType([number, string]).isRequired,
57
- shape: string
64
+ shape: string,
65
+ size: string
58
66
  };
59
67
 
60
68
  export default UTButtonGroup;
package/lib/components/UTButtonGroup/styles.js CHANGED
@@ -3,8 +3,8 @@ import { StyleSheet } from 'react-native';
3
3
  import { CIRCLE_TYPE, SQUARE_TYPE } from './constants';
4
4
 
5
5
  const BORDER_RADIUS_DEFAULT = 8;
6
- const BORDER_RADIUS_SQUARE = BORDER_RADIUS_DEFAULT - 1;
7
6
  const BORDER_RADIUS_ROUNDED = 100;
7
+ const PADDING = 4;
8
8
 
9
9
  export const getTypeStyles = type =>
10
10
  ({
@@ -19,23 +19,13 @@ export const getTypeStyles = type =>
19
19
  [SQUARE_TYPE]: {
20
20
  container: {
21
21
  borderRadius: BORDER_RADIUS_DEFAULT
22
- },
23
- firstButton: {
24
- borderTopLeftRadius: BORDER_RADIUS_SQUARE,
25
- borderBottomLeftRadius: BORDER_RADIUS_SQUARE
26
- },
27
- lastButton: {
28
- borderTopRightRadius: BORDER_RADIUS_SQUARE,
29
- borderBottomRightRadius: BORDER_RADIUS_SQUARE
30
22
  }
31
23
  }
32
24
  })[type];
33
25
 
34
26
  export const ownStyles = StyleSheet.create({
35
27
  container: {
36
- flexDirection: 'row'
37
- },
38
- buttonRoot: {
39
- borderRadius: 0
28
+ flexDirection: 'row',
29
+ padding: PADDING
40
30
  }
41
31
  });
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.13.1",
5
+ "version": "2.15.0",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [