@widergy/mobile-ui 2.15.0 → 2.17.0

package/CHANGELOG.md

@@ -1,93 +1,109 @@
+# [2.17.0](https://github.com/widergy/mobile-ui/compare/v2.16.0...v2.17.0) (2026-06-03)
+
+
+### Features
+
+* [DIS-1102] utbanner upgrade ([#505](https://github.com/widergy/mobile-ui/issues/505)) ([6f4a16f](https://github.com/widergy/mobile-ui/commit/6f4a16f927728b1f790d5793e34d8abe9a083a2a))
+
+# [2.16.0](https://github.com/widergy/mobile-ui/compare/v2.15.0...v2.16.0) (2026-05-15)
+
+### Novedades y Mejoras
+
+* Se renovaron los íconos de tarjetas de crédito en la aplicación. [#504](https://github.com/widergy/Energy-UI-Mobile/pull/504) [CX-2232](https://widergy.atlassian.net/browse/CX-2232)
+* Se actualizaron los estilos visuales de los botones y grupos de botones. [#503](https://github.com/widergy/Energy-UI-Mobile/pull/503)
+* Se amplió la tarjeta de acciones rápidas para mostrar estados informativos, ajustar el tamaño de los botones y controlar la apariencia visual del pie de tarjeta. [#501](https://github.com/widergy/Energy-UI-Mobile/pull/501)
+* Mejoras internas de la plataforma. [#500](https://github.com/widergy/Energy-UI-Mobile/pull/500) [#502](https://github.com/widergy/Energy-UI-Mobile/pull/502) [DEV-794](https://widergy.atlassian.net/browse/DEV-794)
+
 # [2.15.0](https://github.com/widergy/mobile-ui/compare/v2.14.0...v2.15.0) (2026-05-11)
 
 
 ### Features
 
-* [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))
+* [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)) [CX-2189](https://widergy.atlassian.net/browse/CX-2189)
 
 # [2.14.0](https://github.com/widergy/mobile-ui/compare/v2.13.1...v2.14.0) (2026-04-27)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [CX-2203](https://widergy.atlassian.net/browse/CX-2203)
 
 ## [2.13.1](https://github.com/widergy/mobile-ui/compare/v2.13.0...v2.13.1) (2026-04-24)
 
 ### Novedades y Mejoras
 
-* Mejoras internas de la plataforma. [#502](https://github.com/widergy/Energy-UI-Mobile/pull/502)
+* Mejoras internas de la plataforma. [#502](https://github.com/widergy/Energy-UI-Mobile/pull/502) [DEV-999](https://widergy.atlassian.net/browse/DEV-999)
 
 # [2.13.0](https://github.com/widergy/mobile-ui/compare/v2.12.2...v2.13.0) (2026-04-22)
 
 ### Novedades y Mejoras
 
-* 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)
-* Mejoras internas de la plataforma. [#499](https://github.com/widergy/Energy-UI-Mobile/pull/499)
+* 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) [CX-2188](https://widergy.atlassian.net/browse/CX-2188)
+* Mejoras internas de la plataforma. [#499](https://github.com/widergy/Energy-UI-Mobile/pull/499) [CX-2188](https://widergy.atlassian.net/browse/CX-2188)
 
 ### Correcciones
 
-* 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)
+* 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) [CX-2188](https://widergy.atlassian.net/browse/CX-2188)
 
 ## [2.12.2](https://github.com/widergy/mobile-ui/compare/v2.12.1...v2.12.2) (2026-04-17)
 
 ### Correcciones
 
-* 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)
+* 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) [UGGC-101](https://widergy.atlassian.net/browse/UGGC-101) [UGGC-999](https://widergy.atlassian.net/browse/UGGC-999)
 * Mejoras internas de la plataforma. [`9d7f58e`](https://github.com/widergy/Energy-UI-Mobile/commit/9d7f58e)
 
 ## [2.12.1](https://github.com/widergy/mobile-ui/compare/v2.12.0...v2.12.1) (2026-04-14)
 
 ### Correcciones
 
-* Mejoras internas de la plataforma [#497](https://github.com/widergy/Energy-UI-Mobile/pull/497)
+* Mejoras internas de la plataforma [#497](https://github.com/widergy/Energy-UI-Mobile/pull/497) [DEV-766](https://widergy.atlassian.net/browse/DEV-766)
 
 # [2.12.0](https://github.com/widergy/mobile-ui/compare/v2.11.0...v2.12.0) (2026-04-13)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [AUTO-208](https://widergy.atlassian.net/browse/AUTO-208)
 
 # [2.11.0](https://github.com/widergy/mobile-ui/compare/v2.10.0...v2.11.0) (2026-04-13)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [UGGC-95](https://widergy.atlassian.net/browse/UGGC-95)
 
 # [2.10.0](https://github.com/widergy/mobile-ui/compare/v2.9.7...v2.10.0) (2026-04-13)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [PROMI-221](https://widergy.atlassian.net/browse/PROMI-221)
 
 ## [2.9.7](https://github.com/widergy/mobile-ui/compare/v2.9.6...v2.9.7) (2026-04-10)
 
 ### Correcciones
 
-* 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)
+* 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) [UGGC-99](https://widergy.atlassian.net/browse/UGGC-99)
 
 ## [2.9.6](https://github.com/widergy/mobile-ui/compare/v2.9.5...v2.9.6) (2026-04-09)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [UGGC-99](https://widergy.atlassian.net/browse/UGGC-99)
 
 ## [2.9.5](https://github.com/widergy/mobile-ui/compare/v2.9.4...v2.9.5) (2026-04-08)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [UGGC-91](https://widergy.atlassian.net/browse/UGGC-91)
 
 ## [2.9.4](https://github.com/widergy/mobile-ui/compare/v2.9.3...v2.9.4) (2026-04-06)
 
 ### Correcciones
 
-* 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)
+* 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) [UGGC-9999](https://widergy.atlassian.net/browse/UGGC-9999)
 
 ## [2.9.3](https://github.com/widergy/mobile-ui/compare/v2.9.2...v2.9.3) (2026-03-30)
 
 ### Correcciones
 
-* 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)
+* 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) [UGGC-84](https://widergy.atlassian.net/browse/UGGC-84)
 
 ## [2.9.2](https://github.com/widergy/mobile-ui/compare/v2.9.1...v2.9.2) (2026-03-26)
 
@@ -99,65 +115,65 @@
 
 ### Novedades y Mejoras
 
-* 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)
-* 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)
+* 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) [UGGC-78](https://widergy.atlassian.net/browse/UGGC-78)
+* 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) [UGGC-78](https://widergy.atlassian.net/browse/UGGC-78)
 
 # [2.9.0](https://github.com/widergy/mobile-ui/compare/v2.8.1...v2.9.0) (2026-03-11)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [AUTO-152](https://widergy.atlassian.net/browse/AUTO-152)
 
 ## [2.8.1](https://github.com/widergy/mobile-ui/compare/v2.8.0...v2.8.1) (2026-02-19)
 
 ### Correcciones
 
-* 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)
+* 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) [NTGE-205](https://widergy.atlassian.net/browse/NTGE-205)
 
 # [2.8.0](https://github.com/widergy/mobile-ui/compare/v2.7.0...v2.8.0) (2026-02-18)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [EGIT-29](https://widergy.atlassian.net/browse/EGIT-29)
 
 # [2.7.0](https://github.com/widergy/mobile-ui/compare/v2.6.0...v2.7.0) (2026-02-18)
 
 ### Novedades y Mejoras
 
-* 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)
-* 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)
-* 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)
+* 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) [NTGE-184](https://widergy.atlassian.net/browse/NTGE-184)
+* 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) [EGIT-29](https://widergy.atlassian.net/browse/EGIT-29)
+* 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) [DEV-766](https://widergy.atlassian.net/browse/DEV-766) [EGIT-29](https://widergy.atlassian.net/browse/EGIT-29)
 
 # [2.6.0](https://github.com/widergy/mobile-ui/compare/v2.5.2...v2.6.0) (2026-02-09)
 
 ### Novedades y Mejoras
 
-* 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)
+* 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) [EGIT-7](https://widergy.atlassian.net/browse/EGIT-7)
 
 ## [2.5.2](https://github.com/widergy/mobile-ui/compare/v2.5.1...v2.5.2) (2026-01-28)
 
 ### Correcciones
 
-* 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)
-* Mejoras internas de la plataforma. [#475](https://github.com/widergy/Energy-UI-Mobile/pull/475)
+* 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) [OUG-8010](https://widergy.atlassian.net/browse/OUG-8010)
+* Mejoras internas de la plataforma. [#475](https://github.com/widergy/Energy-UI-Mobile/pull/475) [DEV-999](https://widergy.atlassian.net/browse/DEV-999)
 
 ## [2.5.1](https://github.com/widergy/mobile-ui/compare/v2.5.0...v2.5.1) (2026-01-27)
 
 ### Correcciones
 
-* 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)
+* 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) [EVEP-362](https://widergy.atlassian.net/browse/EVEP-362)
 
 # [2.5.0](https://github.com/widergy/mobile-ui/compare/v2.4.0...v2.5.0) (2026-01-22)
 
 ### Novedades y Mejoras
 
-* Mejoras internas de la plataforma [#473](https://github.com/widergy/Energy-UI-Mobile/pull/473)
+* Mejoras internas de la plataforma [#473](https://github.com/widergy/Energy-UI-Mobile/pull/473) [EVEP-362](https://widergy.atlassian.net/browse/EVEP-362)
 
 # [2.4.0](https://github.com/widergy/mobile-ui/compare/v2.3.5...v2.4.0) (2026-01-19)
 
 ### Novedades y Mejoras
 
-* Mejoras internas de la plataforma [#472](https://github.com/widergy/Energy-UI-Mobile/pull/472)
+* Mejoras internas de la plataforma [#472](https://github.com/widergy/Energy-UI-Mobile/pull/472) [AUTO-166](https://widergy.atlassian.net/browse/AUTO-166) [AUTO-104](https://widergy.atlassian.net/browse/AUTO-104)
 
 ## [2.3.5](https://github.com/widergy/mobile-ui/compare/v2.3.4...v2.3.5) (2025-12-18)
 

package/lib/components/UTBanner/README.md

@@ -1,19 +1,132 @@
 # UTBanner
 
-### Description
+## Descripción
 
-This component displays a banner with information
+Componente de notificación/alerta que muestra información contextual con soporte para ícono, textos estructurados, botones de acción y botón de cierre. Soporta múltiples combinaciones de layout mediante las props `iconPlacement` y `buttonPlacement`.
 
 ## Props
 
-| Name  | Type      | Default | Description |
-| ----- | --------- | ------- | ----------- |
-| icon  | iconType  |         | Icon to be displayed at the left side of the banner. | 
-| style | ViewStyle |         | Custom optional styles to be applied to the banner. |
-| text  | string    |         | Text that will be displayed inside the banner. |
+| Nombre           | Tipo       | Default        | Descripción |
+| ---------------- | ---------- | -------------- | ----------- |
+| `button`         | `ButtonShape` |             | Configuración del botón de acción principal. Acepta todas las props de `UTButton` más `title` (string) como texto del botón. |
+| `buttonPlacement`| `string`   | `'horizontal'` | Dirección del eje entre el grupo de textos y el grupo de botones. `'horizontal'` los ubica lado a lado, `'vertical'` los apila. |
+| `category`       | `string`   |                | Etiqueta pequeña que se muestra sobre el título (ej: `"2 ALERTAS EN TOTAL"`). |
+| `colorTheme`     | `string`   | `'white'`      | Color de fondo del banner. Ver sección de variantes. |
+| `dataTestId`     | `string`   |                | ID base para pruebas. Se propaga con sufijos a los elementos internos. |
+| `description`    | `string`   |                | Texto descriptivo debajo del título. |
+| `helpText`       | `string`   |                | Texto de ayuda secundario, se muestra debajo de la descripción. |
+| `icon`           | `IconShape` |               | Ícono a mostrar. Acepta `name` (string) y `colorTheme` (string). |
+| `iconPlacement`  | `string`   | `'horizontal'` | Dirección del eje entre el ícono y el grupo de textos. `'horizontal'` los ubica lado a lado, `'vertical'` apila el ícono encima del texto. |
+| `onClose`        | `func`     |                | Si se pasa, muestra un botón de cierre (X) en la esquina superior derecha. |
+| `secondaryButton`| `ButtonShape` |             | Configuración del botón de acción secundario. Mismas props que `button`. |
+| `size`           | `string`   | `'medium'`     | Tamaño del banner: `'small'`, `'medium'`, `'large'`. |
+| `style`          | `StyleShape` |              | Overrides de estilo por sección. Ver sección de estilos. |
+| `title`          | `string`   |                | Texto principal del banner. |
+| `variant`        | `string`   | `'light'`      | Variante de color: `'light'` (fondo claro) o `'dark'` (fondo oscuro). |
+| `withMarkdown`   | `bool`     |                | Si es `true`, renderiza `title` y `description` con soporte Markdown. |
+| `text`           | `string`   |                | **Deprecated.** Usar `title` en su lugar. |
 
-### Custom Types
+## Tipos personalizados
 
-| Type        | Shape |
-| ----------- | ----- |
-| iconType    | `{ name: string, type: string }` |
+### `ButtonShape`
+
+```js
+{
+  colorTheme: string,
+  count: number,
+  dataTestId: string,
+  disabled: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  loading: bool,
+  onPress: func,
+  size: string,
+  style: object,
+  title: string,     // Texto del botón (children de UTButton)
+  variant: string
+}
+```
+
+### `IconShape`
+
+```js
+{
+  colorTheme: string,
+  name: string
+}
+```
+
+### `StyleShape`
+
+```js
+{
+  banner: object,       // Estilo del contenedor raíz
+  category: object,     // Estilo del label de categoría
+  description: object,  // Estilo del label de descripción
+  helpText: object,     // Estilo del label de texto de ayuda
+  title: object         // Estilo del label de título
+}
+```
+
+## Variantes de `colorTheme`
+
+| Valor           | Fondo (light)                  | Fondo (dark)              |
+| --------------- | ------------------------------ | ------------------------- |
+| `'white'`       | `Palette.light.01`             | `Palette.dark.04`         |
+| `'primary'`     | `Palette.accent.01`            | `Palette.accent.04`       |
+| `'gray'`        | `Palette.light.02`             | `Palette.gray.05`         |
+| `'negative'`    | `Palette.negative.02`          | `Palette.negative.04`     |
+| `'error'`       | `Palette.error.01`             | `Palette.error.04`        |
+| `'warning'`     | `Palette.warning.01`           | `Palette.warning.04`      |
+| `'success'`     | `Palette.success.01`           | `Palette.success.04`      |
+| `'information'` | `Palette.information.01`       | `Palette.information.04`  |
+
+## Layouts disponibles (combinaciones de placement)
+
+| `iconPlacement` | `buttonPlacement` | Descripción |
+| --------------- | ----------------- | ----------- |
+| `'horizontal'`  | `'horizontal'`    | Ícono a la izquierda, botones a la derecha del texto _(default)_ |
+| `'horizontal'`  | `'vertical'`      | Ícono a la izquierda del texto, botones debajo |
+| `'vertical'`    | `'horizontal'`    | Ícono arriba del texto, botones a la derecha |
+| `'vertical'`    | `'vertical'`      | Ícono arriba del texto, botones debajo |
+
+## Ejemplos de uso
+
+### Banner básico
+
+```jsx
+<UTBanner
+  colorTheme="warning"
+  title="Alerta de corte programado"
+  description="Tu cuenta se encuentra afectada por un corte programado."
+/>
+```
+
+### Con categoría, helpText y botones
+
+```jsx
+<UTBanner
+  button={{ onPress: handleClaim, title: 'Generar reclamo', variant: 'filled' }}
+  category="2 alertas en total"
+  colorTheme="error"
+  description="Tu cuenta se encuentra afectada por un corte programado."
+  helpText="2 alertas en total"
+  icon={{ colorTheme: 'error', name: 'iconInfo' }}
+  onClose={handleClose}
+  secondaryButton={{ onPress: handleViewAlerts, title: 'Ver alertas', variant: 'text' }}
+  title="Alerta de corte programado"
+/>
+```
+
+### Ícono vertical con botones debajo
+
+```jsx
+<UTBanner
+  button={{ onPress: handleAction, title: 'Acción', variant: 'filled' }}
+  buttonPlacement="vertical"
+  colorTheme="information"
+  icon={{ colorTheme: 'information', name: 'iconInfo' }}
+  iconPlacement="vertical"
+  title="Información importante"
+/>
+```

package/lib/components/UTBanner/constants.js

@@ -19,3 +19,8 @@ export const VARIANTS = {
   LIGHT: 'light',
   DARK: 'dark'
 };
+
+export const PLACEMENTS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};

package/lib/components/UTBanner/index.js

@@ -9,16 +9,28 @@ import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { propTypes } from './proptypes';
 import { retrieveStyle } from './theme';
-import { COLOR_THEMES, SIZES, VARIANTS } from './constants';
+import { COLOR_THEMES, PLACEMENTS, SIZES, VARIANTS } from './constants';
 
-const { icon: iconTestId, label: labelTestId, secondaryAction: buttonTestId } = TEST_ID_CONSTANTS;
+const {
+  close: closeTestId,
+  icon: iconTestId,
+  label: labelTestId,
+  secondaryAction: buttonTestId,
+  tertiaryAction: secondaryButtonTestId
+} = TEST_ID_CONSTANTS;
 
 const UTBanner = ({
   button,
+  buttonPlacement = PLACEMENTS.HORIZONTAL,
+  category,
   colorTheme = COLOR_THEMES.WHITE,
   dataTestId,
   description,
+  helpText,
   icon,
+  iconPlacement = PLACEMENTS.HORIZONTAL,
+  onClose,
+  secondaryButton,
   size = SIZES.MEDIUM,
   style,
   text,
@@ -30,62 +42,117 @@ const UTBanner = ({
 
   const displayTitle = title || text; // Backwards compatibility
 
-  const { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles, buttonStyles } =
-    retrieveStyle({
-      colorTheme,
-      size,
-      style,
-      theme,
-      variant
-    });
+  const {
+    bannerStyles,
+    buttonColorTheme,
+    buttonsContainerStyles,
+    categoryStyles,
+    closeButtonStyles,
+    contentStyles,
+    descriptionStyles,
+    helpTextStyles,
+    iconStyles,
+    iconTextStyles,
+    textContainerStyles,
+    titleStyles
+  } = retrieveStyle({
+    buttonPlacement,
+    colorTheme,
+    iconPlacement,
+    size,
+    style,
+    theme,
+    variant
+  });
 
   return (
     <View style={bannerStyles} testID={dataTestId}>
-      {icon && (
-        <UTIcon
-          colorTheme={icon.colorTheme}
-          dataTestId={dataTestId ? `${dataTestId}.${iconTestId}` : undefined}
-          name={icon.name}
-          size={iconStyles.size}
-        />
-      )}
-      <View style={textContainerStyles}>
-        {displayTitle && (
-          <UTLabel
-            colorTheme={titleStyles.colorTheme}
-            dataTestId={dataTestId ? `${dataTestId}.title.${labelTestId}` : undefined}
-            style={titleStyles.style}
-            variant={titleStyles.variant}
-            weight={titleStyles.weight}
-            withMarkdown={withMarkdown}
-          >
-            {displayTitle}
-          </UTLabel>
-        )}
-        {description && (
-          <UTLabel
-            colorTheme={descriptionStyles.colorTheme}
-            dataTestId={dataTestId ? `${dataTestId}.description.${labelTestId}` : undefined}
-            style={descriptionStyles.style}
-            variant={descriptionStyles.variant}
-            weight={descriptionStyles.weight}
-            withMarkdown={withMarkdown}
-          >
-            {description}
-          </UTLabel>
+      <View style={contentStyles}>
+        <View style={iconTextStyles}>
+          {!!icon && (
+            <UTIcon
+              colorTheme={iconStyles.defaultColorTheme}
+              shade={iconStyles.defaultShade}
+              size={iconStyles.size}
+              {...icon}
+              dataTestId={dataTestId ? `${dataTestId}.${iconTestId}` : undefined}
+            />
+          )}
+          <View style={textContainerStyles}>
+            {!!category && (
+              <UTLabel
+                {...categoryStyles}
+                dataTestId={dataTestId ? `${dataTestId}.category.${labelTestId}` : undefined}
+              >
+                {category}
+              </UTLabel>
+            )}
+            {!!displayTitle && (
+              <UTLabel
+                {...titleStyles}
+                dataTestId={dataTestId ? `${dataTestId}.title.${labelTestId}` : undefined}
+                withMarkdown={withMarkdown}
+              >
+                {displayTitle}
+              </UTLabel>
+            )}
+            {!!description && (
+              <UTLabel
+                {...descriptionStyles}
+                dataTestId={dataTestId ? `${dataTestId}.description.${labelTestId}` : undefined}
+                withMarkdown={withMarkdown}
+              >
+                {description}
+              </UTLabel>
+            )}
+            {!!helpText && (
+              <UTLabel
+                {...helpTextStyles}
+                dataTestId={dataTestId ? `${dataTestId}.helpText.${labelTestId}` : undefined}
+              >
+                {helpText}
+              </UTLabel>
+            )}
+          </View>
+        </View>
+        {!!(button || secondaryButton) && (
+          <View style={buttonsContainerStyles}>
+            {!!button && (
+              <UTButton
+                colorTheme={buttonColorTheme.button}
+                {...button}
+                dataTestId={dataTestId ? `${dataTestId}.button.${buttonTestId}` : button.dataTestId}
+              >
+                {button.title}
+              </UTButton>
+            )}
+            {!!secondaryButton && (
+              <UTButton
+                colorTheme={buttonColorTheme.secondaryButton}
+                variant="text"
+                {...secondaryButton}
+                dataTestId={
+                  dataTestId
+                    ? `${dataTestId}.secondaryButton.${secondaryButtonTestId}`
+                    : secondaryButton.dataTestId
+                }
+              >
+                {secondaryButton.title}
+              </UTButton>
+            )}
+          </View>
         )}
       </View>
-      {button && (
+      {!!onClose && (
         <UTButton
-          colorTheme={button.colorTheme}
-          dataTestId={dataTestId ? `${dataTestId}.button.${buttonTestId}` : undefined}
-          onPress={button.onPress}
-          size={button.size}
-          style={buttonStyles}
-          variant={button.variant}
-        >
-          {button.title}
-        </UTButton>
+          colorTheme={buttonColorTheme.onClose}
+          dataTestId={dataTestId ? `${dataTestId}.${closeTestId}` : undefined}
+          Icon="IconX"
+          onPress={onClose}
+          size="small"
+          style={closeButtonStyles}
+          variant="text"
+        />
       )}
     </View>
   );

package/lib/components/UTBanner/proptypes.js

@@ -1,20 +1,43 @@
-import { bool, object, shape, string } from 'prop-types';
+import { bool, elementType, func, number, object, shape, string } from 'prop-types';
+
+const buttonShape = shape({
+  colorTheme: string,
+  count: number,
+  dataTestId: string,
+  disabled: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  loading: bool,
+  onPress: func,
+  size: string,
+  style: object,
+  title: string,
+  variant: string
+});
 
 export const propTypes = {
+  button: buttonShape,
+  buttonPlacement: string,
+  category: string,
+  colorTheme: string,
+  dataTestId: string,
+  description: string,
+  helpText: string,
+  icon: shape({ colorTheme: string, name: string, shade: string }),
+  iconPlacement: string,
+  onClose: func,
+  secondaryButton: buttonShape,
+  size: string,
+  style: shape({
+    banner: object,
+    category: object,
+    description: object,
+    helpText: object,
+    title: object
+  }),
   /** @deprecated Use `title` instead. Will be removed in next major version. */
   text: string,
   title: string,
-  description: string,
-  icon: shape({ name: string, colorTheme: string }),
-  size: string,
-  colorTheme: string,
   variant: string,
-  withMarkdown: bool,
-  dataTestId: string,
-  style: shape({
-    root: object,
-    icon: object,
-    title: object,
-    description: object
-  })
+  withMarkdown: bool
 };

package/lib/components/UTBanner/theme.js

@@ -1,4 +1,4 @@
-import { COLOR_THEMES, SIZES, VARIANTS } from './constants';
+import { COLOR_THEMES, PLACEMENTS, SIZES, VARIANTS } from './constants';
 
 const getBannerBackgroundColor = (colorTheme, variant, theme) =>
   ({
@@ -50,7 +50,7 @@ const baseBannerTheme = (theme, colorTheme, variant) => ({
     gap: 16
   },
   textContainer: {
-    flex: 1,
+    flexShrink: 1,
     gap: 8
   }
 });
@@ -63,11 +63,18 @@ const sizeBannerTheme = size => {
         gap: 24
       },
       icon: {
-        size: 32
+        size: 24
       },
       title: {
         variant: 'title3',
         weight: 'medium'
+      },
+      category: {
+        variant: 'xsmall',
+        weight: 'medium'
+      },
+      helpText: {
+        variant: 'small'
       }
     },
     medium: {
@@ -76,7 +83,7 @@ const sizeBannerTheme = size => {
         gap: 16
       },
       icon: {
-        size: 24
+        size: 20
       },
       title: {
         variant: 'subtitle1',
@@ -84,6 +91,13 @@ const sizeBannerTheme = size => {
       },
       description: {
         variant: 'small'
+      },
+      category: {
+        variant: 'xsmall',
+        weight: 'medium'
+      },
+      helpText: {
+        variant: 'small'
       }
     },
     small: {
@@ -93,7 +107,7 @@ const sizeBannerTheme = size => {
         gap: 8
       },
       icon: {
-        size: 24
+        size: 20
       },
       title: {
         variant: 'small',
@@ -101,6 +115,13 @@ const sizeBannerTheme = size => {
       },
       description: {
         variant: 'small'
+      },
+      category: {
+        variant: 'xsmall',
+        weight: 'medium'
+      },
+      helpText: {
+        variant: 'small'
       }
     }
   };
@@ -108,10 +129,77 @@ const sizeBannerTheme = size => {
   return definition[size] || definition[SIZES.MEDIUM];
 };
 
-export const retrieveStyle = ({ style = {}, size, theme, colorTheme, variant }) => {
+export const getDefaultIconTheme = (colorTheme, variant) => {
+  if (variant === VARIANTS.DARK) {
+    return colorTheme === COLOR_THEMES.NEGATIVE
+      ? { colorTheme: 'dark', shade: '05' }
+      : { colorTheme: 'light', shade: '01' };
+  }
+
+  return (
+    {
+      [COLOR_THEMES.NEGATIVE]: { colorTheme: 'light', shade: '01' },
+      [COLOR_THEMES.WHITE]: { colorTheme: 'accent', shade: '04' },
+      [COLOR_THEMES.PRIMARY]: { colorTheme: 'accent', shade: '04' },
+      [COLOR_THEMES.GRAY]: { colorTheme: 'accent', shade: '04' },
+      [COLOR_THEMES.WARNING]: { colorTheme: 'warning', shade: '04' },
+      [COLOR_THEMES.SUCCESS]: { colorTheme: 'success', shade: '04' },
+      [COLOR_THEMES.ERROR]: { colorTheme: 'error', shade: '04' },
+      [COLOR_THEMES.INFORMATION]: { colorTheme: 'information', shade: '04' }
+    }[colorTheme] ?? { colorTheme: 'accent', shade: '04' }
+  );
+};
+
+export const getDefaultButtonColorTheme = variant => {
+  const isDark = variant === VARIANTS.DARK;
+  return {
+    button: isDark ? 'negative' : 'secondary',
+    onClose: isDark ? 'negative' : 'gray',
+    secondaryButton: isDark ? 'negative' : 'secondary'
+  };
+};
+
+export const getPlacementStyles = (iconPlacement, buttonPlacement, gap = 16) => {
+  const isVerticalButton = buttonPlacement === PLACEMENTS.VERTICAL;
+  const isVerticalIcon = iconPlacement === PLACEMENTS.VERTICAL;
+
+  return {
+    content: {
+      flex: 1,
+      flexDirection: isVerticalButton ? 'column' : 'row',
+      ...(isVerticalButton ? {} : { alignItems: 'flex-start' }),
+      gap
+    },
+    iconText: {
+      ...(!isVerticalButton && { flex: 1 }),
+      flexDirection: isVerticalIcon ? 'column' : 'row',
+      ...(isVerticalIcon ? {} : { alignItems: 'flex-start' }),
+      flexShrink: 1,
+      gap: 12
+    },
+    buttonsContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+      ...(isVerticalButton && { alignSelf: 'flex-start' })
+    }
+  };
+};
+
+export const retrieveStyle = ({
+  buttonPlacement,
+  colorTheme,
+  iconPlacement,
+  size,
+  style = {},
+  theme,
+  variant
+}) => {
   const baseTheme = baseBannerTheme(theme, colorTheme, variant);
   const sizeTheme = sizeBannerTheme(size);
   const labelColorTheme = getLabelColorTheme(colorTheme, variant);
+  const sizeGap = sizeTheme.banner?.gap ?? 16;
+  const placementStyles = getPlacementStyles(iconPlacement, buttonPlacement, sizeGap);
 
   const bannerStyles = {
     ...baseTheme.banner,
@@ -119,10 +207,32 @@ export const retrieveStyle = ({ style = {}, size, theme, colorTheme, variant })
     ...style.banner
   };
 
+  const contentStyles = placementStyles.content;
+
+  const iconTextStyles = placementStyles.iconText;
+
+  const defaultIconTheme = getDefaultIconTheme(colorTheme, variant);
+  const buttonColorTheme = getDefaultButtonColorTheme(variant);
+
   const iconStyles = {
+    defaultColorTheme: defaultIconTheme.colorTheme,
+    defaultShade: defaultIconTheme.shade,
     size: sizeTheme.icon?.size
   };
 
+  const textContainerStyles = {
+    ...baseTheme.textContainer,
+    ...sizeTheme.textContainer,
+    ...(iconPlacement !== PLACEMENTS.VERTICAL && { flex: 1 })
+  };
+
+  const categoryStyles = {
+    colorTheme: labelColorTheme,
+    variant: sizeTheme.category?.variant,
+    weight: sizeTheme.category?.weight,
+    style: style.category
+  };
+
   const titleStyles = {
     colorTheme: labelColorTheme,
     variant: sizeTheme.title?.variant,
@@ -137,16 +247,32 @@ export const retrieveStyle = ({ style = {}, size, theme, colorTheme, variant })
     style: style.description
   };
 
-  const textContainerStyles = {
-    ...baseTheme.textContainer,
-    ...sizeTheme.textContainer
+  const helpTextStyles = {
+    colorTheme: labelColorTheme,
+    variant: sizeTheme.helpText?.variant,
+    style: style.helpText
   };
 
-  const buttonStyles = {
+  const buttonsContainerStyles = placementStyles.buttonsContainer;
+
+  const closeButtonStyles = {
     root: {
       alignSelf: 'flex-start'
     }
   };
 
-  return { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles, buttonStyles };
+  return {
+    bannerStyles,
+    buttonColorTheme,
+    buttonsContainerStyles,
+    categoryStyles,
+    closeButtonStyles,
+    contentStyles,
+    descriptionStyles,
+    helpTextStyles,
+    iconStyles,
+    iconTextStyles,
+    textContainerStyles,
+    titleStyles
+  };
 };

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconCreditCardsFilled.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" stroke="none" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1717 4.39056L13.9953 5.81702C14.0011 5.82698 14.0066 5.83701 14.0119 5.84711H16.772C18.0948 5.84711 19.1671 6.91943 19.1671 8.24222V13.3546C19.1671 14.6774 18.0948 15.7497 16.772 15.7497H8.36524L8.34142 15.7496L7.09856 16.4671C5.90521 17.1561 4.33328 16.8323 3.6262 15.6076L1.15543 11.3282C0.448341 10.1035 0.953913 8.5802 2.14727 7.89124L9.69933 3.53105C10.8926 2.84209 12.4646 3.16583 13.1717 4.39056ZM11.7283 5.22388L12.0882 5.84711H9.02114L9.55456 5.53914L10.5327 4.97442C10.8494 4.79156 11.1852 4.80744 11.434 4.94235C11.5583 5.00978 11.6608 5.10694 11.7283 5.22388ZM2.9806 9.33461L6.07169 7.54997C6.00564 7.76912 5.97013 8.00152 5.97013 8.24222V13.3546C5.97013 13.9334 6.17545 14.4642 6.51721 14.8783L6.26524 15.0238C5.79023 15.298 5.2722 15.1252 5.06957 14.7743L2.5988 10.4948C2.39617 10.1439 2.5056 9.60884 2.9806 9.33461ZM8.36524 7.51377C7.96293 7.51377 7.6368 7.83991 7.6368 8.24222V8.62705H17.5004V8.24222C17.5004 7.83991 17.1743 7.51377 16.772 7.51377H8.36524ZM17.5004 10.2937H7.6368V13.3546C7.6368 13.7569 7.96293 14.083 8.36524 14.083H16.772C17.1743 14.083 17.5004 13.7569 17.5004 13.3546V10.2937Z"/>
+</svg>

package/lib/components/UTIcon/constants.js

@@ -39,6 +39,7 @@ import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
 import EnergyIconMeterPlus from './components/EnergyIcons/EnergyIconMeterPlus.svg';
 import EnergyIconMeterPlusFilled from './components/EnergyIcons/EnergyIconMeterPlusFilled.svg';
 import EnergyIconChatSparkFilled from './components/EnergyIcons/EnergyIconChatSparkFilled.svg';
+import EnergyIconCreditCardsFilled from './components/EnergyIcons/EnergyIconCreditCardsFilled.svg';
 
 export const DEFAULT_PROPS = {
   color: COLOR_THEMES.dark
@@ -69,6 +70,7 @@ export const ENERGY_ICONS = {
   EnergyIconChatSparkFilled,
   EnergyIconCheckCircle,
   EnergyIconConsumption,
+  EnergyIconCreditCardsFilled,
   EnergyIconDelete,
   EnergyIconDeleteOutline,
   EnergyIconDeleteVariant,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [