@widergy/mobile-ui 2.9.2 → 2.9.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.9.3](https://github.com/widergy/mobile-ui/compare/v2.9.2...v2.9.3) (2026-03-30)
+
+
+### Bug Fixes
+
+* [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))
+
 ## [2.9.2](https://github.com/widergy/mobile-ui/compare/v2.9.1...v2.9.2) (2026-03-26)
 
 

package/lib/components/UTBanner/constants.js

@@ -3,3 +3,19 @@ export const SIZES = {
   MEDIUM: 'medium',
   LARGE: 'large'
 };
+
+export const COLOR_THEMES = {
+  NEGATIVE: 'negative',
+  PRIMARY: 'primary',
+  GRAY: 'gray',
+  WHITE: 'white',
+  ERROR: 'error',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  INFORMATION: 'information'
+};
+
+export const VARIANTS = {
+  LIGHT: 'light',
+  DARK: 'dark'
+};

package/lib/components/UTBanner/index.js

@@ -3,64 +3,94 @@ import { View } from 'react-native';
 
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
 import { useTheme } from '../../theming';
 import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
-import { defaultProps, propTypes } from './proptypes';
+import { propTypes } from './proptypes';
 import { retrieveStyle } from './theme';
+import { COLOR_THEMES, SIZES, VARIANTS } from './constants';
 
-const { icon: iconTestId, label: labelTestId } = TEST_ID_CONSTANTS;
+const { icon: iconTestId, label: labelTestId, secondaryAction: buttonTestId } = TEST_ID_CONSTANTS;
 
-const UTBanner = ({ text, title, description, icon, size, style, withMarkdown, dataTestId }) => {
+const UTBanner = ({
+  button,
+  colorTheme = COLOR_THEMES.WHITE,
+  dataTestId,
+  description,
+  icon,
+  size = SIZES.MEDIUM,
+  style,
+  text,
+  title,
+  variant = VARIANTS.LIGHT,
+  withMarkdown
+}) => {
   const theme = useTheme();
 
   const displayTitle = title || text; // Backwards compatibility
 
-  const { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles } = retrieveStyle({
-    style,
-    size,
-    theme
-  });
+  const { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles, buttonStyles } =
+    retrieveStyle({
+      colorTheme,
+      size,
+      style,
+      theme,
+      variant
+    });
 
   return (
     <View style={bannerStyles} testID={dataTestId}>
       {icon && (
         <UTIcon
-          name={icon.name}
           colorTheme={icon.colorTheme}
-          size={iconStyles.size}
           dataTestId={dataTestId ? `${dataTestId}.${iconTestId}` : undefined}
+          name={icon.name}
+          size={iconStyles.size}
         />
       )}
       <View style={textContainerStyles}>
         {displayTitle && (
           <UTLabel
-            withMarkdown={withMarkdown}
+            colorTheme={titleStyles.colorTheme}
+            dataTestId={dataTestId ? `${dataTestId}.title.${labelTestId}` : undefined}
+            style={titleStyles.style}
             variant={titleStyles.variant}
             weight={titleStyles.weight}
-            style={titleStyles.style}
-            dataTestId={dataTestId ? `${dataTestId}.title.${labelTestId}` : undefined}
+            withMarkdown={withMarkdown}
           >
             {displayTitle}
           </UTLabel>
         )}
         {description && (
           <UTLabel
-            withMarkdown={withMarkdown}
+            colorTheme={descriptionStyles.colorTheme}
+            dataTestId={dataTestId ? `${dataTestId}.description.${labelTestId}` : undefined}
+            style={descriptionStyles.style}
             variant={descriptionStyles.variant}
             weight={descriptionStyles.weight}
-            style={descriptionStyles.style}
-            dataTestId={dataTestId ? `${dataTestId}.description.${labelTestId}` : undefined}
+            withMarkdown={withMarkdown}
           >
             {description}
           </UTLabel>
         )}
       </View>
+      {button && (
+        <UTButton
+          colorTheme={button.colorTheme}
+          dataTestId={dataTestId ? `${dataTestId}.button.${buttonTestId}` : undefined}
+          onPress={button.onPress}
+          size={button.size}
+          style={buttonStyles}
+          variant={button.variant}
+        >
+          {button.title}
+        </UTButton>
+      )}
     </View>
   );
 };
 
-UTBanner.defaultProps = defaultProps;
 UTBanner.propTypes = propTypes;
 
 export default UTBanner;

package/lib/components/UTBanner/proptypes.js

@@ -1,11 +1,5 @@
 import { bool, object, shape, string } from 'prop-types';
 
-import { SIZES } from './constants';
-
-export const defaultProps = {
-  size: SIZES.MEDIUM
-};
-
 export const propTypes = {
   /** @deprecated Use `title` instead. Will be removed in next major version. */
   text: string,
@@ -13,6 +7,8 @@ export const propTypes = {
   description: string,
   icon: shape({ name: string, colorTheme: string }),
   size: string,
+  colorTheme: string,
+  variant: string,
   withMarkdown: bool,
   dataTestId: string,
   style: shape({

package/lib/components/UTBanner/theme.js

@@ -1,8 +1,49 @@
-import { defaultProps } from './proptypes';
+import { COLOR_THEMES, SIZES, VARIANTS } from './constants';
 
-const baseBannerTheme = theme => ({
+const getBannerBackgroundColor = (colorTheme, variant, theme) =>
+  ({
+    [COLOR_THEMES.NEGATIVE]: {
+      [VARIANTS.LIGHT]: theme.Palette?.negative['02'],
+      [VARIANTS.DARK]: theme.Palette?.negative['04']
+    },
+    [COLOR_THEMES.PRIMARY]: {
+      [VARIANTS.LIGHT]: theme.Palette?.accent['01'],
+      [VARIANTS.DARK]: theme.Palette?.accent['04']
+    },
+    [COLOR_THEMES.GRAY]: {
+      [VARIANTS.LIGHT]: theme.Palette?.light['02'],
+      [VARIANTS.DARK]: theme.Palette?.gray['05']
+    },
+    [COLOR_THEMES.WHITE]: {
+      [VARIANTS.LIGHT]: theme.Palette?.light['01'],
+      [VARIANTS.DARK]: theme.Palette?.dark['04']
+    },
+    [COLOR_THEMES.ERROR]: {
+      [VARIANTS.LIGHT]: theme.Palette?.error['01'],
+      [VARIANTS.DARK]: theme.Palette?.error['04']
+    },
+    [COLOR_THEMES.WARNING]: {
+      [VARIANTS.LIGHT]: theme.Palette?.warning['01'],
+      [VARIANTS.DARK]: theme.Palette?.warning['04']
+    },
+    [COLOR_THEMES.SUCCESS]: {
+      [VARIANTS.LIGHT]: theme.Palette?.success['01'],
+      [VARIANTS.DARK]: theme.Palette?.success['04']
+    },
+    [COLOR_THEMES.INFORMATION]: {
+      [VARIANTS.LIGHT]: theme.Palette?.information['01'],
+      [VARIANTS.DARK]: theme.Palette?.information['04']
+    }
+  })[colorTheme]?.[variant];
+
+const getLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) return variant === VARIANTS.LIGHT ? 'light' : 'dark';
+  return variant === VARIANTS.LIGHT ? 'dark' : 'light';
+};
+
+const baseBannerTheme = (theme, colorTheme, variant) => ({
   banner: {
-    backgroundColor: theme.Palette.light['03'],
+    backgroundColor: getBannerBackgroundColor(colorTheme, variant, theme),
     borderRadius: 8,
     flexDirection: 'row',
     padding: 16,
@@ -64,12 +105,13 @@ const sizeBannerTheme = size => {
     }
   };
 
-  return definition[size] || definition[defaultProps.size];
+  return definition[size] || definition[SIZES.MEDIUM];
 };
 
-export const retrieveStyle = ({ style = {}, size, theme }) => {
-  const baseTheme = baseBannerTheme(theme);
+export const retrieveStyle = ({ style = {}, size, theme, colorTheme, variant }) => {
+  const baseTheme = baseBannerTheme(theme, colorTheme, variant);
   const sizeTheme = sizeBannerTheme(size);
+  const labelColorTheme = getLabelColorTheme(colorTheme, variant);
 
   const bannerStyles = {
     ...baseTheme.banner,
@@ -82,12 +124,14 @@ export const retrieveStyle = ({ style = {}, size, theme }) => {
   };
 
   const titleStyles = {
+    colorTheme: labelColorTheme,
     variant: sizeTheme.title?.variant,
     weight: sizeTheme.title?.weight,
     style: style.title
   };
 
   const descriptionStyles = {
+    colorTheme: labelColorTheme,
     variant: sizeTheme.description?.variant,
     weight: sizeTheme.description?.weight,
     style: style.description
@@ -98,5 +142,11 @@ export const retrieveStyle = ({ style = {}, size, theme }) => {
     ...sizeTheme.textContainer
   };
 
-  return { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles };
+  const buttonStyles = {
+    root: {
+      alignSelf: 'flex-start'
+    }
+  };
+
+  return { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles, buttonStyles };
 };

package/package.json

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