@widergy/mobile-ui 1.18.4 → 1.18.6

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.18.6](https://github.com/widergy/mobile-ui/compare/v1.18.5...v1.18.6) (2024-08-23)
+
+
+### Bug Fixes
+
+* utselectablecard border radius ([#331](https://github.com/widergy/mobile-ui/issues/331)) ([00f17a6](https://github.com/widergy/mobile-ui/commit/00f17a6ac99f764df6f82b61fd733a7fddae8e27))
+
+## [1.18.5](https://github.com/widergy/mobile-ui/compare/v1.18.4...v1.18.5) (2024-08-23)
+
+
+### Bug Fixes
+
+* utlabel for workflow message ([#339](https://github.com/widergy/mobile-ui/issues/339)) ([a9124d8](https://github.com/widergy/mobile-ui/commit/a9124d8b9205dba965c7d2b6e3a25365d794689a))
+
 ## [1.18.4](https://github.com/widergy/mobile-ui/compare/v1.18.3...v1.18.4) (2024-08-21)
 
 

package/lib/components/UTSelectableCard/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { bool, func, number, shape, string } from 'prop-types';
 import { Image, View } from 'react-native';
-import merge from 'lodash/merge';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 
 import Touchable from '../Touchable';
 import Surface from '../Surface';
@@ -10,8 +9,9 @@ import UTTooltip from '../UTTooltip';
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
 
-import { getColorTheme, getUTSelectableCardStyles, ICON_SIZE } from './styles';
+import { getColorTheme, ownStyles, ICON_SIZE, getAppearanceStyles, ownSizeStyles } from './styles';
 
 const UTSelectableCard = ({
   additionalInfo = {},
@@ -28,9 +28,10 @@ const UTSelectableCard = ({
   tooltip
 }) => {
   const theme = useTheme();
-  const themedStyles = merge(
-    {},
-    getUTSelectableCardStyles(theme?.UTSelectableCard),
+  const themedStyles = mergeMultipleStyles(
+    ownStyles,
+    getAppearanceStyles(theme)[appearance],
+    ownSizeStyles[size],
     theme?.UTSelectableCard,
     style
   );
@@ -43,10 +44,10 @@ const UTSelectableCard = ({
         disabled={disabled}
         onPress={() => onPress?.()}
         style={[
-          themedStyles[`${appearance}Appearance`],
-          selected && themedStyles[`${appearance}SelectedContainer`],
-          disabled && themedStyles[`${appearance}DisabledContainer`],
-          themedStyles[`${size}Size`]
+          themedStyles.appearance,
+          selected && themedStyles.selectedContainer,
+          disabled && themedStyles.disabledContainer,
+          themedStyles.size
         ]}
       >
         <View style={themedStyles.container}>

package/lib/components/UTSelectableCard/styles.js

@@ -2,88 +2,102 @@ import { StyleSheet } from 'react-native';
 
 export const ICON_SIZE = 40;
 
-export const getUTSelectableCardStyles = (theme = {}) =>
-  StyleSheet.create({
-    additionalInfo: {
-      textAlign: 'right'
-    },
-    checkIcon: {
-      marginLeft: 16
-    },
-    column: {
-      alignSelf: 'center'
-    },
-    container: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    description: {
-      marginTop: 4
-    },
-    icon: {
-      marginRight: 16
-    },
-    outerContainer: {
-      borderRadius: 4
-    },
-    selectedTitleAndTooltip: {
-      maxWidth: 300
-    },
-    textContainer: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexGrow: 1,
-      justifyContent: 'space-between'
-    },
-    titleAndTooltip: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    titleMargin: {
-      marginRight: 8
-    },
-
-    // Sizes
-    mediumSize: {
-      padding: 24
-    },
-    smallSize: {
-      padding: 16
-    },
+const WHITE = 'white';
+const GRAY = 'gray';
 
-    // White
-    whiteAppearance: {
-      backgroundColor: theme.whiteBackground || 'white',
+export const getAppearanceStyles = (theme = {}) => ({
+  [WHITE]: {
+    appearance: {
+      backgroundColor: theme.Palette.light['01'],
       borderColor: 'transparent',
+      borderRadius: 4,
       borderWidth: 2
     },
-    whiteDisabledContainer: {
-      backgroundColor: theme.whiteDisabledBackground || 'lightgray',
+    disabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
       borderColor: 'transparent',
       borderWidth: 2
     },
-    whiteSelectedContainer: {
-      borderColor: theme.whiteSelectedBorder || 'royalblue',
+    selectedContainer: {
+      borderColor: theme.Palette.accent['05'],
       borderWidth: 2
-    },
-
-    // Gray
-    grayAppearance: {
-      backgroundColor: theme.grayBackground || 'gainsboro',
-      borderColor: theme.grayBorder || 'gray',
+    }
+  },
+  [GRAY]: {
+    appearance: {
+      backgroundColor: theme.Palette.light['03'],
+      borderColor: theme.Palette.light['05'],
+      borderRadius: 4,
       borderWidth: 1
     },
-    grayDisabledContainer: {
-      borderColor: theme.grayDisabledBorder || 'gray',
-      borderWidth: 2
+    disabledContainer: {
+      borderWidth: 1
     },
-    graySelectedContainer: {
-      backgroundColor: theme.graySelectedBackground || 'aliceblue',
-      borderColor: theme.graySelectedBorder || 'royalblue',
-      borderWidth: 2
+    selectedContainer: {
+      backgroundColor: theme.Palette.accent['01'],
+      borderColor: theme.Palette.accent['03'],
+      borderWidth: 1
     }
-  });
+  }
+});
+
+const MEDIUM = 'medium';
+const SMALL = 'small';
+
+export const ownSizeStyles = {
+  [MEDIUM]: {
+    size: {
+      padding: 24
+    }
+  },
+  [SMALL]: {
+    size: {
+      padding: 16
+    }
+  }
+};
+
+export const ownStyles = StyleSheet.create({
+  additionalInfo: {
+    textAlign: 'right'
+  },
+  checkIcon: {
+    marginLeft: 16
+  },
+  column: {
+    alignSelf: 'center'
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  description: {
+    marginTop: 4
+  },
+  icon: {
+    marginRight: 16
+  },
+  outerContainer: {
+    borderRadius: 4
+  },
+  selectedTitleAndTooltip: {
+    maxWidth: 300
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  },
+  titleAndTooltip: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  titleMargin: {
+    marginRight: 8
+  }
+});
 
 export const getColorTheme = (selected, disabled) => (selected ? 'accent' : disabled ? 'gray' : 'dark');

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

@@ -3,9 +3,9 @@ import { View } from 'react-native';
 import merge from 'lodash/merge';
 import { number } from 'prop-types';
 
-import Label from '../../../../../Label';
+import UTLabel from '../../../../../UTLabel';
 import Surface from '../../../../../Surface';
-import Icon from '../../../../../Icon';
+import UTIcon from '../../../../../UTIcon';
 import Checkbox from '../../../../../Checkbox';
 import { MessagePropTypes, SummaryPropTypes } from '../../types';
 import UTButton from '../../../../../UTButton';
@@ -17,7 +17,7 @@ import ownStyles from './styles';
 import { NEXT, RETURN } from './constants';
 
 const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summary, style }) => {
-  const messageIcon = message?.icon;
+  const messageIcon = message?.Icon;
   const MESSAGE_ICON_SIZE = 16;
   const checkboxProps = summary?.checkbox;
 
@@ -33,10 +33,12 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
             <Checkbox {...checkboxProps} />
           ) : (
             <View style={themedStyles.summaryTitles}>
-              <Label disabled medium style={themedStyles.summaryTitlesChild}>
+              <UTLabel colorTheme="gray" variant="small" style={themedStyles.summaryTitlesChild}>
                 {summary.title}
-              </Label>
-              <Label>{summary.mainInfo}</Label>
+              </UTLabel>
+              <UTLabel weight="medium" variant="subtitle1">
+                {summary.mainInfo}
+              </UTLabel>
             </View>
           )}
           {summary.actions && !checkboxProps && (
@@ -73,19 +75,10 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
             themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
           ]}
         >
-          <Label style={themedStyles.messageChild} white>
+          <UTLabel colorTheme="negative" weight="medium" style={themedStyles.messageChild}>
             {message.title}
-          </Label>
-          {messageIcon && (
-            <Icon
-              color="white"
-              height={MESSAGE_ICON_SIZE}
-              name={messageIcon.name}
-              size={MESSAGE_ICON_SIZE}
-              type={messageIcon.type}
-              width={MESSAGE_ICON_SIZE}
-            />
-          )}
+          </UTLabel>
+          {messageIcon && <UTIcon colorTheme="negative" name={messageIcon} size={MESSAGE_ICON_SIZE} />}
         </View>
       )}
       <View style={themedStyles.actionsContainer}>

package/lib/utils/styleUtils/index.js

@@ -1,3 +1,6 @@
+import isArray from 'lodash/isArray';
+import mergeWith from 'lodash/mergeWith';
+
 export const SHADOW_OPACITY = 0.1;
 
 const shadowLevels = {
@@ -65,6 +68,18 @@ export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
     .map(variant => (props[variant] ? styles[`${variant}${stylePrefix}`] : null))
     .filter(style => style !== null);
 
+const asArray = value => (isArray(value) ? value : [value]);
+
+export const mergeMultipleStyles = (...params) => {
+  return mergeWith({}, ...params, (valueA, valueB) => {
+    if (valueA && valueB && (isArray(valueA) || isArray(valueB))) {
+      return [...asArray(valueA), ...asArray(valueB)];
+    }
+    // By returning `undefined`, lodash will use its default merging behavior for objects
+    return undefined;
+  });
+};
+
 export default {
   generateLayoutMeasuresObject,
   getCustomStyles

package/package.json

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