@widergy/mobile-ui 1.28.2 → 1.29.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.29.0](https://github.com/widergy/mobile-ui/compare/v1.28.3...v1.29.0) (2024-10-21)
+
+
+### Features
+
+* [UG-2131] spacing and bottom actions updates ([#371](https://github.com/widergy/mobile-ui/issues/371)) ([93e5862](https://github.com/widergy/mobile-ui/commit/93e58629b1268cb6ccad4646e2ddb1be91de58a5))
+
+## [1.28.3](https://github.com/widergy/mobile-ui/compare/v1.28.2...v1.28.3) (2024-10-18)
+
+
+### Bug Fixes
+
+* scroll ref workflow ([#373](https://github.com/widergy/mobile-ui/issues/373)) ([276e0c5](https://github.com/widergy/mobile-ui/commit/276e0c507f5af03be8b5c7e26c464b247c7a3ae1))
+
 ## [1.28.2](https://github.com/widergy/mobile-ui/compare/v1.28.1...v1.28.2) (2024-10-16)
 
 

package/lib/components/UTActionCard/components/BottomActions/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_REDIRECTION_ICON = 'IconChevronRight';

package/lib/components/UTActionCard/components/BottomActions/index.js

@@ -7,6 +7,7 @@ import { ACTION_TYPES } from '../../constants';
 import { useTheme } from '../../../../theming';
 import { mergeMultipleStyles } from '../../../../utils/styleUtils';
 
+import { DEFAULT_REDIRECTION_ICON } from './constants';
 import styles, { getThemeStyles } from './styles';
 
 const BottomActions = ({ actions = [], bottomActionsVariant }) => {
@@ -27,7 +28,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
             }}
             colorTheme={colorTheme}
             disabled={disabled}
-            Icon={isRedirection ? 'IconChevronRight' : Icon}
+            Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
             iconPlacement={isRedirection ? 'right' : 'left'}
             loading={loading}
             onClick={onClick}

package/lib/components/UTActionCard/components/Header/index.js

@@ -43,17 +43,19 @@ const Header = ({
 
   return (
     <View style={[styles.header, styles[size], classNames.header]}>
-      {renderAdornment(adornment, 'left', size)}
+      {renderAdornment(adornment, 'left')}
       <View style={styles.headerTitles}>
-        {renderAdornment(adornment, 'top', size)}
-        <UTLabel variant="title3" weight="medium" {...titleProps}>
-          {title}
-        </UTLabel>
-        {description && (
-          <UTLabel colorTheme="gray" {...descriptionProps}>
-            {description}
+        {renderAdornment(adornment, 'top')}
+        <View style={styles.titleAndDescription}>
+          <UTLabel variant="title3" weight="medium" {...titleProps}>
+            {title}
           </UTLabel>
-        )}
+          {description && (
+            <UTLabel colorTheme="gray" {...descriptionProps}>
+              {description}
+            </UTLabel>
+          )}
+        </View>
       </View>
       {status ? (
         <Status

package/lib/components/UTActionCard/components/Header/styles.js

@@ -9,9 +9,14 @@ export default StyleSheet.create({
   headerTitles: {
     flex: 1,
     flexDirection: 'column',
-    gap: 8,
+    gap: 16,
     marginRight: 'auto'
   },
+  titleAndDescription: {
+    flex: 1,
+    flexDirection: 'column',
+    gap: 8
+  },
   medium: {
     padding: 24
   },
@@ -26,5 +31,8 @@ export default StyleSheet.create({
   },
   alignSelf_end: {
     alignSelf: 'flex-end'
+  },
+  adornment: {
+    maxWidth: '100%'
   }
 });

package/lib/components/UTActionCard/components/Header/utils.js

@@ -62,19 +62,23 @@ export const statusPropsMapper = (status, theme) => {
   return { backgroundColor: theme.Palette[variant]['01'] };
 };
 
-export const renderAdornment = (adornment, position, size) => {
+export const renderAdornment = (adornment, position) => {
   if (isEmpty(adornment) || adornment.position !== position) return null;
   const AdornmentComponent = ADORNMENT_COMPONENT_MAPPER[adornment.type];
   const defaultPlaceSelf = adornment.position === 'left' ? PLACE_SELF_TYPES.CENTER : PLACE_SELF_TYPES.START;
 
   return (
     <AdornmentComponent
+      {...(adornment.props || {})}
       style={[
+        styles.adornment,
         styles[`alignSelf_${adornment.alignment || defaultPlaceSelf}`],
-        position === 'top' && styles[`gap_${size}`],
-        adornment.type === 'image' && { width: adornment.props?.width, height: adornment.props?.height }
+        adornment.type === 'image' && {
+          ...(adornment.props?.width && { width: adornment.props.width }),
+          ...(adornment.props?.height && { height: adornment.props.height })
+        },
+        adornment.props?.style
       ]}
-      {...(adornment.props || {})}
     />
   );
 };

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View, KeyboardAvoidingView, Keyboard } from 'react-native';
-import { number, func, shape, bool, string, element, oneOfType } from 'prop-types';
+import { number, func, shape, bool, string, element, oneOfType, any } from 'prop-types';
 import { merge } from 'lodash';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -28,6 +28,7 @@ const UTWorkflowContainer = ({
   requiredFieldInfo,
   returnButton,
   scrollable = true,
+  scrollViewRef,
   stages,
   stepsCount,
   style,
@@ -68,6 +69,7 @@ const UTWorkflowContainer = ({
           contentContainerStyle={themedStyles.content}
           keyboardShouldPersistTaps="handled"
           scrollEnabled={scrollable}
+          ref={scrollViewRef}
         >
           {title && (
             <UTHeader
@@ -115,6 +117,8 @@ UTWorkflowContainer.propTypes = {
   requiredFieldInfo: string,
   returnButton: ActionButtonPropTypes,
   scrollable: bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  scrollViewRef: shape({ current: any }),
   stages: StagesPropTypes,
   stepsCount: number.isRequired,
   subtitle: oneOfType([string, element]),

package/package.json

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