@widergy/mobile-ui 2.8.1 → 2.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.9.1](https://github.com/widergy/mobile-ui/compare/v2.9.0...v2.9.1) (2026-03-16)
+
+
+### Bug Fixes
+
+* [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))
+
+# [2.9.0](https://github.com/widergy/mobile-ui/compare/v2.8.1...v2.9.0) (2026-03-11)
+
+
+### Features
+
+* add test id ([#487](https://github.com/widergy/mobile-ui/issues/487)) ([c9ea05b](https://github.com/widergy/mobile-ui/commit/c9ea05b22d834c666ad3746f0075657f223c8b78))
+
 ## [2.8.1](https://github.com/widergy/mobile-ui/compare/v2.8.0...v2.8.1) (2026-02-19)
 
 

package/lib/components/UTBanner/constants.js

@@ -0,0 +1,5 @@
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};

package/lib/components/UTBanner/index.js

@@ -1,33 +1,66 @@
 import React from 'react';
 import { View } from 'react-native';
-import { bool, shape, string } from 'prop-types';
 
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import { useTheme } from '../../theming';
-import { mergeMultipleStyles } from '../../utils/styleUtils';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
-import ownStyles from './styles';
+import { defaultProps, propTypes } from './proptypes';
+import { retrieveStyle } from './theme';
 
-const UTBanner = ({ text, icon, style, withMarkdown }) => {
+const { icon: iconTestId, label: labelTestId } = TEST_ID_CONSTANTS;
+
+const UTBanner = ({ text, title, description, icon, size, style, withMarkdown, dataTestId }) => {
   const theme = useTheme();
 
-  const themedStyles = mergeMultipleStyles(ownStyles, theme?.UTBanner, style);
+  const displayTitle = title || text; // Backwards compatibility
+
+  const { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles } = retrieveStyle({
+    style,
+    size,
+    theme
+  });
 
   return (
-    <View style={themedStyles.banner}>
-      {icon && <UTIcon name={icon.name} colorTheme={icon.colorTheme} style={themedStyles.icon} />}
-      <UTLabel withMarkdown={withMarkdown} style={themedStyles.text}>
-        {text}
-      </UTLabel>
+    <View style={bannerStyles} testID={dataTestId}>
+      {icon && (
+        <UTIcon
+          name={icon.name}
+          colorTheme={icon.colorTheme}
+          size={iconStyles.size}
+          dataTestId={dataTestId ? `${dataTestId}.${iconTestId}` : undefined}
+        />
+      )}
+      <View style={textContainerStyles}>
+        {displayTitle && (
+          <UTLabel
+            withMarkdown={withMarkdown}
+            variant={titleStyles.variant}
+            weight={titleStyles.weight}
+            style={titleStyles.style}
+            dataTestId={dataTestId ? `${dataTestId}.title.${labelTestId}` : undefined}
+          >
+            {displayTitle}
+          </UTLabel>
+        )}
+        {description && (
+          <UTLabel
+            withMarkdown={withMarkdown}
+            variant={descriptionStyles.variant}
+            weight={descriptionStyles.weight}
+            style={descriptionStyles.style}
+            dataTestId={dataTestId ? `${dataTestId}.description.${labelTestId}` : undefined}
+          >
+            {description}
+          </UTLabel>
+        )}
+      </View>
     </View>
   );
 };
 
-UTBanner.propTypes = {
-  icon: shape({ name: string, colorTheme: string }),
-  text: string,
-  withMarkdown: bool
-};
+UTBanner.defaultProps = defaultProps;
+UTBanner.propTypes = propTypes;
 
 export default UTBanner;

package/lib/components/UTBanner/proptypes.js

@@ -0,0 +1,24 @@
+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,
+  title: string,
+  description: string,
+  icon: shape({ name: string, colorTheme: string }),
+  size: string,
+  withMarkdown: bool,
+  dataTestId: string,
+  style: shape({
+    root: object,
+    icon: object,
+    title: object,
+    description: object
+  })
+};

package/lib/components/UTBanner/theme.js

@@ -0,0 +1,102 @@
+import { defaultProps } from './proptypes';
+
+const baseBannerTheme = theme => ({
+  banner: {
+    backgroundColor: theme.Palette.light['03'],
+    borderRadius: 8,
+    flexDirection: 'row',
+    padding: 16,
+    gap: 16
+  },
+  textContainer: {
+    flex: 1,
+    gap: 8
+  }
+});
+
+const sizeBannerTheme = size => {
+  const definition = {
+    large: {
+      banner: {
+        padding: 24,
+        gap: 24
+      },
+      icon: {
+        size: 32
+      },
+      title: {
+        variant: 'title3',
+        weight: 'medium'
+      }
+    },
+    medium: {
+      banner: {
+        padding: 16,
+        gap: 16
+      },
+      icon: {
+        size: 24
+      },
+      title: {
+        variant: 'title3',
+        weight: 'medium'
+      },
+      description: {
+        variant: 'small'
+      }
+    },
+    small: {
+      banner: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        gap: 8
+      },
+      icon: {
+        size: 24
+      },
+      title: {
+        variant: 'title3',
+        weight: 'medium'
+      },
+      description: {
+        variant: 'small'
+      }
+    }
+  };
+
+  return definition[size] || definition[defaultProps.size];
+};
+
+export const retrieveStyle = ({ style = {}, size, theme }) => {
+  const baseTheme = baseBannerTheme(theme);
+  const sizeTheme = sizeBannerTheme(size);
+
+  const bannerStyles = {
+    ...baseTheme.banner,
+    ...sizeTheme.banner,
+    ...style.banner
+  };
+
+  const iconStyles = {
+    size: sizeTheme.icon?.size
+  };
+
+  const titleStyles = {
+    variant: sizeTheme.title?.variant,
+    weight: sizeTheme.title?.weight,
+    style: style.title
+  };
+
+  const descriptionStyles = {
+    variant: sizeTheme.description?.variant,
+    weight: sizeTheme.description?.weight,
+    style: style.description
+  };
+
+  const textContainerStyles = {
+    ...baseTheme.textContainer,
+    ...sizeTheme.textContainer
+  };
+
+  return { bannerStyles, iconStyles, titleStyles, descriptionStyles, textContainerStyles };
+};

package/lib/components/UTCheckBox/index.js

@@ -79,7 +79,7 @@ const UTCheckBox = ({
             />
           ) : (
             <View style={boxStyles}>
-              <View style={iconContainerStyles}>
+              <View testID={`${dataTestId}.checkbox`} style={iconContainerStyles}>
                 <UTIcon
                   colorTheme="light"
                   name={iconName}

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
-import { number } from 'prop-types';
+import { bool, number } from 'prop-types';
 
 import { TEST_IDS } from '../../../../../../constants/testIds';
 import UTLabel from '../../../../../UTLabel';
@@ -19,7 +19,15 @@ import { NEXT, RETURN } from './constants';
 
 const { workflowContainer } = TEST_IDS;
 
-const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summary, style }) => {
+const BottomActions = ({
+  bottomSafeArea,
+  message,
+  nextButton,
+  returnButton,
+  stackedBottomActions,
+  summary,
+  style
+}) => {
   const messageIcon = message?.Icon;
   const MESSAGE_ICON_SIZE = 16;
   const checkboxProps = summary?.checkbox;
@@ -28,6 +36,12 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
   const nextButtonEnabled = nextButton && !nextButton.hidden;
   const returnButtonEnabled = returnButton && !returnButton.hidden;
 
+  const actionButtonStyle = {
+    ...themedStyles.returnActionButton,
+    ...(nextButtonEnabled &&
+      (stackedBottomActions ? themedStyles.actionsChildStacked : themedStyles.actionsChild))
+  };
+
   return (
     <Surface position="top" style={[themedStyles.bottomNav, themedStyles.bottomSafeArea(bottomSafeArea)]}>
       {summary && (
@@ -92,17 +106,16 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
           {messageIcon && <UTIcon colorTheme="negative" name={messageIcon} size={MESSAGE_ICON_SIZE} />}
         </View>
       )}
-      <View style={themedStyles.actionsContainer}>
+      <View
+        style={[themedStyles.actionsContainer, stackedBottomActions && themedStyles.actionsContainerStacked]}
+      >
         {returnButtonEnabled && (
           <ActionButton
             dataTestId={workflowContainer.bottomActions.returnButton}
             label={returnButton.label || RETURN}
             variant="text"
             style={{
-              actionButton: {
-                ...themedStyles.returnActionButton,
-                ...(nextButtonEnabled ? themedStyles.actionsChild : {})
-              },
+              actionButton: actionButtonStyle,
               buttonContainer: themedStyles.returnButtonContainer
             }}
             {...returnButton}
@@ -129,6 +142,7 @@ BottomActions.propTypes = {
   message: MessagePropTypes,
   nextButton: ActionButtonPropTypes,
   returnButton: ActionButtonPropTypes,
+  stackedBottomActions: bool,
   summary: SummaryPropTypes
 };
 

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js

@@ -4,6 +4,9 @@ export default StyleSheet.create({
   actionsChild: {
     marginRight: 16
   },
+  actionsChildStacked: {
+    marginTop: 8
+  },
   actionsContainer: {
     alignItems: 'center',
     flexDirection: 'row',
@@ -12,12 +15,16 @@ export default StyleSheet.create({
     padding: 16,
     width: '100%'
   },
-  bottomSafeArea: safeArea => ({
-    paddingBottom: safeArea
-  }),
+  actionsContainerStacked: {
+    alignItems: 'stretch',
+    flexDirection: 'column-reverse'
+  },
   bottomNav: {
     backgroundColor: 'white'
   },
+  bottomSafeArea: safeArea => ({
+    paddingBottom: safeArea
+  }),
   message: {
     alignItems: 'center',
     backgroundColor: 'blue',

package/lib/components/UTWorkflowContainer/versions/V1/index.js

@@ -39,6 +39,7 @@ const UTWorkflowContainer = ({
   scrollable = true,
   scrollViewRef,
   stages,
+  stackedBottomActions = false,
   stepsCount,
   style,
   subtitle,
@@ -109,6 +110,7 @@ const UTWorkflowContainer = ({
               message,
               nextButton,
               returnButton,
+              stackedBottomActions,
               style: themedStyles,
               bottomSafeArea: isKeyboardVisible ? 0 : bottomSafeArea,
               summary
@@ -136,6 +138,7 @@ UTWorkflowContainer.propTypes = {
   scrollable: bool,
   scrollViewRef: shape({ current: any }),
   stages: StagesPropTypes,
+  stackedBottomActions: bool,
   stepsCount: number.isRequired,
   subtitle: oneOfType([string, element]),
   summary: SummaryPropTypes,

package/package.json

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

package/lib/components/UTBanner/styles.js

@@ -1,14 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  banner: {
-    backgroundColor: '#F4F5F7',
-    borderRadius: 8,
-    flexDirection: 'row',
-    padding: 16,
-    gap: 16
-  },
-  text: {
-    flex: 1
-  }
-});