@widergy/mobile-ui 1.13.0 → 1.13.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* utbutton for workflow summary and bottom actions ([#313](https://github.com/widergy/mobile-ui/issues/313)) ([54cf399](https://github.com/widergy/mobile-ui/commit/54cf399163784402c6545f15921ac7d30cbda89d))
+
 # [1.13.0](https://github.com/widergy/mobile-ui/compare/v1.12.7...v1.13.0) (2024-07-11)
 
 

package/lib/components/UTLoading/index.js

@@ -12,7 +12,7 @@ const UTLoading = props => {
 UTLoading.displayName = 'UTLoading';
 
 UTLoading.propTypes = {
-  useUtilityLoader: bool
+  useUtilityLoading: bool
 };
 
 export default UTLoading;

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/components/ActionButton/index.js

@@ -3,27 +3,26 @@ import { string, func, bool } from 'prop-types';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
 
-import Button from '../../../../../../../Button';
+import UTButton from '../../../../../../../UTButton';
 import { useTheme } from '../../../../../../../../theming';
 
 import ownStyles from './styles';
 
-const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
+const ActionButton = ({ hidden, disabled, onPress, label, variant, style }) => {
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
   return (
     <View style={themedStyles.actionButton}>
-      <Button
-        containerStyle={themedStyles.buttonContainer}
-        contentStyle={themedStyles.buttonContent}
+      <UTButton
         disabled={disabled || hidden}
-        elevation={themedStyles.elevation}
-        lowerCase
-        mode={mode}
         onPress={onPress}
-        title={label}
-      />
+        size="large"
+        style={{ root: themedStyles.buttonContainer, childrenContainer: themedStyles.buttonContent }}
+        variant={variant}
+      >
+        {label}
+      </UTButton>
     </View>
   );
 };
@@ -32,7 +31,7 @@ ActionButton.propTypes = {
   disabled: bool,
   hidden: bool,
   label: string,
-  mode: string,
+  variant: string,
   onPress: func
 };
 

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

@@ -5,6 +5,6 @@ export default StyleSheet.create({
     flexGrow: 1
   },
   buttonContainer: {
-    width: '100%'
+    alignItems: 'center'
   }
 });

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

@@ -1,20 +1,21 @@
 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';
-import Button from '../../../../../Button';
 import Icon from '../../../../../Icon';
 import Checkbox from '../../../../../Checkbox';
 import { MessagePropTypes, SummaryPropTypes } from '../../types';
+import UTButton from '../../../../../UTButton';
 
 import ActionButton from './components/ActionButton';
 import ActionButtonPropTypes from './components/ActionButton/types';
-import ownStyles, { ICON_SIZE } from './styles';
+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 ? (
@@ -39,29 +40,23 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
           )}
           {summary.actions && !checkboxProps && (
             <View style={themedStyles.summaryActions}>
-              {summary.actions.map((action, index) => (
-                <Button
-                  containerStyle={themedStyles.summaryActionContainer}
-                  contentStyle={!action.title && themedStyles.summaryActionButton}
-                  elevation={action.elevation}
-                  icon={
-                    action.icon && {
-                      height: action.icon.height || ICON_SIZE,
-                      name: action.icon.name,
-                      size: action.icon.size || ICON_SIZE,
-                      type: action.icon.type,
-                      width: action.icon.width || ICON_SIZE
-                    }
-                  }
-                  key={action.name}
-                  labelColor={themedStyles.summaryActions?.labelColor || 'blue'}
-                  onPress={action.onPress}
-                  outerContainerStyles={
-                    index !== summary.actions.length - 1 && themedStyles.summaryActionsChild
-                  }
-                  secondary
-                  title={action.title}
-                />
+              {summary.actions.map(({ Icon: actionIcon, title, onPress }, index) => (
+                <UTButton
+                  Icon={actionIcon}
+                  key={actionIcon}
+                  onPress={onPress}
+                  size="small"
+                  style={{
+                    root: {
+                      ...themedStyles.summaryActionContainer,
+                      ...(index !== summary.actions.length - 1 && themedStyles.summaryActionsChild)
+                    },
+                    childrenContainer: themedStyles.summaryActionButton
+                  }}
+                  variant="semitransparent"
+                >
+                  {title}
+                </UTButton>
               ))}
             </View>
           )}
@@ -93,7 +88,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
         {returnButtonEnabled && (
           <ActionButton
             label={returnButton.label || RETURN}
-            mode="text"
+            variant="text"
             style={{
               actionButton: {
                 ...themedStyles.returnActionButton,
@@ -120,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

@@ -1,7 +1,5 @@
 import { StyleSheet } from 'react-native';
 
-export const ICON_SIZE = 24;
-
 export default StyleSheet.create({
   actionsChild: {
     marginRight: 16
@@ -14,6 +12,9 @@ export default StyleSheet.create({
     padding: 16,
     width: '100%'
   },
+  bottomSafeArea: safeArea => ({
+    paddingBottom: safeArea + 16
+  }),
   bottomNav: {
     backgroundColor: 'white'
   },
@@ -47,11 +48,8 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     padding: 16
   },
-  summaryActionButton: {
-    marginHorizontal: 8
-  },
   summaryActionContainer: {
-    minWidth: 0
+    paddingVertical: 8
   },
   summaryActions: {
     alignItems: 'center',

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.0",
+  "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": {