@widergy/mobile-ui 1.13.1 → 1.13.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.13.2](https://github.com/widergy/mobile-ui/compare/v1.13.1...v1.13.2) (2024-07-15)
+
+
+### Bug Fixes
+
+* utworkflow spacing and utroundview shadows ([#310](https://github.com/widergy/mobile-ui/issues/310)) ([73fdfc2](https://github.com/widergy/mobile-ui/commit/73fdfc25f02f8caeb7ea04c5fe80d6b073d22a66))
+
 ## [1.13.1](https://github.com/widergy/mobile-ui/compare/v1.13.0...v1.13.1) (2024-07-12)
 
 

package/lib/components/UTRoundView/index.js

@@ -3,17 +3,22 @@ import { View, Animated } from 'react-native';
 import _ from 'lodash';
 
 import { useTheme } from '../../theming';
+import Surface from '../Surface';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
 
-const UTRoundView = ({ children, styles }) => {
+const UTRoundView = ({ children, styles, withShadow = false }) => {
   const theme = useTheme();
   const themedStyles = _.merge({}, theme?.roundView, styles);
 
+  const ChildrenContainer = withShadow ? Surface : View;
+
   return (
     <Animated.View style={[ownStyles.container, themedStyles?.outerContainer]}>
-      <View style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>{children}</View>
+      <ChildrenContainer position="top" style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>
+        {children}
+      </ChildrenContainer>
     </Animated.View>
   );
 };

package/lib/components/UTTopbar/index.js

@@ -3,7 +3,7 @@ import { BackHandler, View } from 'react-native';
 import { number } from 'prop-types';
 import { useFocusEffect } from '@react-navigation/native';
 
-import IconButton from '../IconButton';
+import UTButton from '../UTButton';
 import Label from '../Label';
 import UTStepper from '../UTStepper';
 import UTProgressBar from '../UTProgressBar';
@@ -18,7 +18,7 @@ const UTTopbar = ({
   stages,
   stepsCount,
   theme,
-  topbar: { colorTheme = 'light', goBack, title, variant = 'secondary', icon } = {}
+  topbar: { colorTheme = 'light', goBack, title, variant = 'secondary', Icon } = {}
 }) => {
   const size = { big: variant === 'primary' };
 
@@ -42,12 +42,12 @@ const UTTopbar = ({
   return (
     <View>
       <View style={[ownStyles.container, ownTheme?.container]}>
-        <IconButton
-          color={ownTheme?.icon || 'black'}
-          name={icon?.name || 'arrow-left'}
-          size={24}
-          style={ownStyles.child}
-          type={icon?.type || 'material-community'}
+        <UTButton
+          Icon={Icon || 'IconArrowLeft'}
+          variant="text"
+          style={{
+            root: ownStyles.goBack
+          }}
           onPress={goBack}
         />
         <Label color={ownTheme?.text || 'black'} {...size} bold style={ownStyles.child}>

package/lib/components/UTTopbar/styles.js

@@ -12,5 +12,10 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     padding: 16
+  },
+  goBack: {
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    marginRight: 16
   }
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
+import { number } from 'prop-types';
 
 import Label from '../../../../../Label';
 import Surface from '../../../../../Surface';
@@ -14,7 +15,7 @@ import ActionButtonPropTypes from './components/ActionButton/types';
 import ownStyles from './styles';
 import { NEXT, RETURN } from './constants';
 
-const BottomActions = ({ nextButton, returnButton, summary, message, style }) => {
+const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summary, style }) => {
   const messageIcon = message?.icon;
   const MESSAGE_ICON_SIZE = 16;
   const checkboxProps = summary?.checkbox;
@@ -24,7 +25,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
   const returnButtonEnabled = returnButton && !returnButton.hidden;
 
   return (
-    <Surface position="top" style={themedStyles.bottomNav}>
+    <Surface position="top" style={[themedStyles.bottomNav, themedStyles.bottomSafeArea(bottomSafeArea)]}>
       {summary && (
         <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
           {checkboxProps ? (
@@ -114,6 +115,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
 };
 
 BottomActions.propTypes = {
+  bottomSafeArea: number,
   message: MessagePropTypes,
   nextButton: ActionButtonPropTypes,
   returnButton: ActionButtonPropTypes,

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

@@ -12,6 +12,9 @@ export default StyleSheet.create({
     padding: 16,
     width: '100%'
   },
+  bottomSafeArea: safeArea => ({
+    paddingBottom: safeArea + 16
+  }),
   bottomNav: {
     backgroundColor: 'white'
   },

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

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { SafeAreaView, ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { number, func, shape, bool, string, element } from 'prop-types';
 import { merge } from 'lodash';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../../../theming';
 import UTHeader from '../../../UTHeader';
@@ -36,12 +37,14 @@ const UTWorkflowContainer = ({
   topbar,
   useMarkdown
 }) => {
+  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => () => onExit?.(), []);
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
 
   return (
-    <SafeAreaView style={themedStyles.container}>
+    <View style={[themedStyles.container, themedStyles.topSafeArea(topSafeArea)]}>
       {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
       <ScrollView
         contentContainerStyle={themedStyles.content}
@@ -71,11 +74,12 @@ const UTWorkflowContainer = ({
             nextButton,
             returnButton,
             style: themedStyles,
+            bottomSafeArea,
             summary
           }}
         />
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 UTWorkflowContainer.propTypes = {

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

@@ -10,5 +10,8 @@ export default StyleSheet.create({
   content: {
     paddingBottom: 16,
     paddingHorizontal: 16
-  }
+  },
+  topSafeArea: safeArea => ({
+    paddingTop: safeArea
+  })
 });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -45,6 +45,7 @@
     "react-native-collapsible": "^1.6.1",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
+    "react-native-safe-area-context": "^4.5.0",
     "react-native-pager-view": "^6.2.1"
   },
   "devDependencies": {