@widergy/mobile-ui 2.16.0 → 2.17.0

package/CHANGELOG.md

@@ -1,9 +1,18 @@
-# [2.16.0](https://github.com/widergy/mobile-ui/compare/v2.15.0...v2.16.0) (2026-05-15)
+# [2.17.0](https://github.com/widergy/mobile-ui/compare/v2.16.0...v2.17.0) (2026-06-03)
 
 
 ### Features
 
-* new credit cards icon ([#504](https://github.com/widergy/mobile-ui/issues/504)) ([d1eca85](https://github.com/widergy/mobile-ui/commit/d1eca85ba6c87e3ab044942e2b1d686352648fad))
+* [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)
 

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/package.json

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