@widergy/mobile-ui 1.12.0 → 1.12.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.12.2](https://github.com/widergy/mobile-ui/compare/v1.12.1...v1.12.2) (2024-06-28)
+
+
+### Bug Fixes
+
+* standarize shadows ([#298](https://github.com/widergy/mobile-ui/issues/298)) ([cf60c53](https://github.com/widergy/mobile-ui/commit/cf60c53635cd91e8362db5ea26b8850062ebe1c5))
+
+## [1.12.1](https://github.com/widergy/mobile-ui/compare/v1.12.0...v1.12.1) (2024-06-26)
+
+
+### Bug Fixes
+
+* utworkflow scrollable config ([#297](https://github.com/widergy/mobile-ui/issues/297)) ([c8b64a8](https://github.com/widergy/mobile-ui/commit/c8b64a8c37af6f834d1485386e4b0cfaa7d8e613))
+
 # [1.12.0](https://github.com/widergy/mobile-ui/compare/v1.11.6...v1.12.0) (2024-06-26)
 
 

package/lib/components/Surface/index.js

@@ -2,13 +2,15 @@ import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
 import { getShadow } from '../../utils/styleUtils';
+import { useTheme } from '../../theming';
 
 import { DEFAULT_ELEVATION } from './constants';
 import propTypes from './propTypes';
 import styles from './styles';
 
-const Surface = ({ children, elevation, style, ...props }) => {
-  const shadow = getShadow(elevation);
+const Surface = ({ children, elevation = 1, position = 'bottom', style, ...props }) => {
+  const theme = useTheme();
+  const shadow = getShadow({ level: elevation, position, theme });
   const flatStyles = style ? StyleSheet.flatten(style) : {};
   return (
     <Animated.View style={[styles.container, flatStyles, shadow]} {...props}>

package/lib/components/UTButton/constants.js

@@ -1,5 +1,5 @@
-export const ELEVATION = 3;
-export const PRESSED_ELEVATION = 6;
+export const ELEVATION = 2;
+export const PRESSED_ELEVATION = 2;
 
 export const SIZES = {
   small: 'small',

package/lib/components/UTButton/theme.js

@@ -39,8 +39,8 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
   const actionTheme = theme.Palette[colorName];
   const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
   const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
-  const shadow = getShadow(ELEVATION);
-  const pressedShadow = getShadow(PRESSED_ELEVATION);
+  const shadow = getShadow({ level: ELEVATION, theme });
+  const pressedShadow = getShadow({ level: PRESSED_ELEVATION, theme });
 
   const definition = {
     filled: {

package/lib/components/UTProductItem/index.js

@@ -5,6 +5,7 @@ import { bool, element, number, oneOf, shape, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 
 import ImageIcon from '../ImageIcon';
+import Surface from '../Surface';
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
 
@@ -20,6 +21,7 @@ const UTProductItem = ({
   counter,
   counterLabelProps = {},
   discount,
+  elevation = 0,
   imageProps,
   previousAmount,
   quantity,
@@ -35,7 +37,7 @@ const UTProductItem = ({
   const IMAGE_SIZE = 70;
 
   return (
-    <View style={themedStyles.container}>
+    <Surface elevation={elevation} style={themedStyles.container}>
       <View style={themedStyles.leftSection}>
         {!isEmpty(imageProps) && <ImageIcon style={themedStyles.image} size={IMAGE_SIZE} {...imageProps} />}
         <View style={themedStyles.mainInfo}>
@@ -70,7 +72,7 @@ const UTProductItem = ({
           <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
         </View>
       </View>
-    </View>
+    </Surface>
   );
 };
 
@@ -81,6 +83,7 @@ UTProductItem.propTypes = {
   counter: shape({ current: number, limit: number }),
   counterLabelProps: shape({}),
   discount: number,
+  elevation: number,
   imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
   previousAmount: number,
   quantity: number,

package/lib/components/UTSelectableCard/index.js

@@ -5,6 +5,7 @@ import merge from 'lodash/merge';
 import { isEmpty } from 'lodash';
 
 import Touchable from '../Touchable';
+import Surface from '../Surface';
 import UTTooltip from '../UTTooltip';
 import Label from '../Label';
 import { useTheme } from '../../theming';
@@ -37,85 +38,88 @@ const UTSelectableCard = ({
   const { selectedColor = 'royalblue', disabledColor = 'gray', baseColor = 'black' } = themedStyles;
 
   return (
-    <Touchable
-      disabled={disabled}
-      onPress={() => onPress?.()}
-      style={[
-        themedStyles.outerContainer,
-        themedStyles[`${appearance}Appearance`],
-        selected && themedStyles[`${appearance}SelectedContainer`],
-        disabled && themedStyles[`${appearance}DisabledContainer`],
-        themedStyles[`${size}Size`]
-      ]}
-    >
-      <View style={themedStyles.container}>
-        {!isEmpty(icon) && (
-          <Icon
-            name={icon.name}
-            type={icon.type}
-            size={ICON_SIZE}
-            width={ICON_SIZE}
-            height={ICON_SIZE}
-            color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-            style={themedStyles.icon}
-          />
-        )}
-        <View style={themedStyles.textContainer}>
-          <View style={themedStyles.column}>
-            <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
-              <Label
-                color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                style={tooltip && themedStyles.titleMargin}
-              >
-                {titleText}
-              </Label>
-              {tooltip && (
-                <UTTooltip position="top" content={<Label>{tooltip}</Label>}>
-                  <Icon
-                    name="help-outline"
-                    color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                  />
-                </UTTooltip>
-              )}
-            </View>
-            {description && (
-              <Label
-                medium
-                style={themedStyles.description}
-                color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-              >
-                {description}
-              </Label>
-            )}
-          </View>
-          {!isEmpty(additionalInfo) && (
+    <Surface style={themedStyles.outerContainer}>
+      <Touchable
+        disabled={disabled}
+        onPress={() => onPress?.()}
+        style={[
+          themedStyles[`${appearance}Appearance`],
+          selected && themedStyles[`${appearance}SelectedContainer`],
+          disabled && themedStyles[`${appearance}DisabledContainer`],
+          themedStyles[`${size}Size`]
+        ]}
+      >
+        <View style={themedStyles.container}>
+          {!isEmpty(icon) && (
+            <Icon
+              color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+              height={ICON_SIZE}
+              name={icon.name}
+              size={ICON_SIZE}
+              style={themedStyles.icon}
+              type={icon.type}
+              width={ICON_SIZE}
+            />
+          )}
+          <View style={themedStyles.textContainer}>
             <View style={themedStyles.column}>
-              {!!additionalInfo.title && (
+              <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
                 <Label
-                  right
-                  medium
-                  bold
                   color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                  style={tooltip && themedStyles.titleMargin}
                 >
-                  {additionalInfo.title}
+                  {titleText}
                 </Label>
-              )}
-              {!!additionalInfo.description && (
+                {tooltip && (
+                  <UTTooltip content={<Label>{tooltip}</Label>} position="top">
+                    <Icon
+                      color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                      name="help-outline"
+                    />
+                  </UTTooltip>
+                )}
+              </View>
+              {description && (
                 <Label
-                  right
+                  color={selected ? selectedColor : disabled ? disabledColor : baseColor}
                   medium
                   style={themedStyles.description}
-                  color={selected ? selectedColor : disabled ? disabledColor : baseColor}
                 >
-                  {additionalInfo.description}
+                  {description}
                 </Label>
               )}
             </View>
+            {!isEmpty(additionalInfo) && (
+              <View style={themedStyles.column}>
+                {!!additionalInfo.title && (
+                  <Label
+                    bold
+                    color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                    medium
+                    right
+                  >
+                    {additionalInfo.title}
+                  </Label>
+                )}
+                {!!additionalInfo.description && (
+                  <Label
+                    color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                    medium
+                    right
+                    style={themedStyles.description}
+                  >
+                    {additionalInfo.description}
+                  </Label>
+                )}
+              </View>
+            )}
+          </View>
+          {checkIcon && selected && (
+            <Icon color={selectedColor} name="check" style={themedStyles.checkIcon} />
           )}
         </View>
-        {checkIcon && selected && <Icon name="check" color={selectedColor} style={themedStyles.checkIcon} />}
-      </View>
-    </Touchable>
+      </Touchable>
+    </Surface>
   );
 };
 

package/lib/components/UTSelectableCard/styles.js

@@ -24,22 +24,22 @@ export const getUTSelectableCardStyles = (theme = {}) =>
     outerContainer: {
       borderRadius: 4
     },
+    selectedTitleAndTooltip: {
+      maxWidth: 300
+    },
     textContainer: {
       display: 'flex',
       flexDirection: 'row',
       flexGrow: 1,
       justifyContent: 'space-between'
     },
-    titleMargin: {
-      marginRight: 8
-    },
     titleAndTooltip: {
       alignItems: 'center',
       display: 'flex',
       flexDirection: 'row'
     },
-    selectedTitleAndTooltip: {
-      maxWidth: 300
+    titleMargin: {
+      marginRight: 8
     },
 
     // Sizes
@@ -53,20 +53,17 @@ export const getUTSelectableCardStyles = (theme = {}) =>
     // White
     whiteAppearance: {
       backgroundColor: theme.whiteBackground || 'white',
-      borderWidth: 2,
       borderColor: 'transparent',
-      elevation: 4
+      borderWidth: 2
     },
     whiteDisabledContainer: {
       backgroundColor: theme.whiteDisabledBackground || 'lightgray',
-      borderWidth: 2,
       borderColor: 'transparent',
-      elevation: 0
+      borderWidth: 2
     },
     whiteSelectedContainer: {
       borderColor: theme.whiteSelectedBorder || 'royalblue',
-      borderWidth: 2,
-      elevation: 0
+      borderWidth: 2
     },
 
     // Gray

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

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import merge from 'lodash/merge';
 
 import Label from '../../../../../Label';
+import Surface from '../../../../../Surface';
 import Button from '../../../../../Button';
 import Icon from '../../../../../Icon';
 import Checkbox from '../../../../../Checkbox';
@@ -23,7 +24,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
   const returnButtonEnabled = returnButton && !returnButton.hidden;
 
   return (
-    <View style={themedStyles.bottomNav}>
+    <Surface position="top" style={themedStyles.bottomNav}>
       {summary && (
         <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
           {checkboxProps ? (
@@ -40,8 +41,9 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
             <View style={themedStyles.summaryActions}>
               {summary.actions.map((action, index) => (
                 <Button
-                  key={action.name}
-                  secondary
+                  containerStyle={themedStyles.summaryActionContainer}
+                  contentStyle={!action.title && themedStyles.summaryActionButton}
+                  elevation={action.elevation}
                   icon={
                     action.icon && {
                       height: action.icon.height || ICON_SIZE,
@@ -51,14 +53,14 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
                       width: action.icon.width || ICON_SIZE
                     }
                   }
-                  title={action.title}
+                  key={action.name}
                   labelColor={themedStyles.summaryActions?.labelColor || 'blue'}
-                  containerStyle={themedStyles.summaryActionContainer}
-                  contentStyle={!action.title && themedStyles.summaryActionButton}
                   onPress={action.onPress}
                   outerContainerStyles={
                     index !== summary.actions.length - 1 && themedStyles.summaryActionsChild
                   }
+                  secondary
+                  title={action.title}
                 />
               ))}
             </View>
@@ -72,17 +74,17 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
             themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
           ]}
         >
-          <Label white style={themedStyles.messageChild}>
+          <Label style={themedStyles.messageChild} white>
             {message.title}
           </Label>
           {messageIcon && (
             <Icon
+              color="white"
+              height={MESSAGE_ICON_SIZE}
               name={messageIcon.name}
-              type={messageIcon.type}
               size={MESSAGE_ICON_SIZE}
+              type={messageIcon.type}
               width={MESSAGE_ICON_SIZE}
-              height={MESSAGE_ICON_SIZE}
-              color="white"
             />
           )}
         </View>
@@ -90,8 +92,8 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
       <View style={themedStyles.actionsContainer}>
         {returnButtonEnabled && (
           <ActionButton
-            mode="text"
             label={returnButton.label || RETURN}
+            mode="text"
             style={{
               actionButton: {
                 ...themedStyles.returnActionButton,
@@ -113,7 +115,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
           />
         )}
       </View>
-    </View>
+    </Surface>
   );
 };
 

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

@@ -15,12 +15,7 @@ export default StyleSheet.create({
     width: '100%'
   },
   bottomNav: {
-    backgroundColor: 'white',
-    shadowColor: 'black',
-    shadowOffset: { width: 0, height: -3 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2
+    backgroundColor: 'white'
   },
   message: {
     alignItems: 'center',

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

@@ -25,6 +25,7 @@ const UTWorkflowContainer = ({
   onExit,
   requiredFieldInfo,
   returnButton,
+  scrollable = true,
   stages,
   stepsCount,
   style,
@@ -42,7 +43,11 @@ const UTWorkflowContainer = ({
   return (
     <SafeAreaView style={themedStyles.container}>
       {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
-      <ScrollView contentContainerStyle={themedStyles.content} keyboardShouldPersistTaps="handled">
+      <ScrollView
+        contentContainerStyle={themedStyles.content}
+        keyboardShouldPersistTaps="handled"
+        scrollEnabled={scrollable}
+      >
         {title && (
           <UTHeader
             {...{
@@ -86,6 +91,7 @@ UTWorkflowContainer.propTypes = {
   onExit: func,
   requiredFieldInfo: string,
   returnButton: ActionButtonPropTypes,
+  scrollable: bool,
   stages: StagesPropTypes,
   stepsCount: number.isRequired,
   subtitle: string,

package/lib/utils/styleUtils/index.js

@@ -1,45 +1,63 @@
-import { IS_ANDROID } from '../platformUtils/constants';
-
-export const SHADOW_COLOR = 'black';
-export const SHADOW_OPACITY = 0.24;
-
-export const calculateShadow = elevation => {
-  let height;
-  let radius;
-  switch (elevation) {
-    case 1:
-      height = 0.5;
-      radius = 0.75;
+export const SHADOW_OPACITY = 0.1;
+
+const shadowLevels = {
+  1: {
+    elevation: 6,
+    height: 3,
+    shadowRadius: 6
+  },
+  2: {
+    elevation: 12,
+    height: 6,
+    shadowRadius: 12
+  },
+  3: {
+    elevation: 12,
+    height: 24,
+    shadowRadius: 24
+  }
+};
+
+export const getShadow = ({ level, theme, position }) => {
+  if (!level) {
+    return {};
+  }
+
+  const defaultValues = { elevation: 12 + level * 6, height: 24 + level * 6, shadowRadius: 24 + level * 6 };
+  const { height, shadowRadius, elevation } = shadowLevels[level] || defaultValues;
+
+  let adjustedHeight = height;
+  switch (position) {
+    case 'top':
+      adjustedHeight = -adjustedHeight;
       break;
-    case 2:
-      height = 0.75;
-      radius = 1.5;
+    case 'center':
+      adjustedHeight = 0;
       break;
     default:
-      height = elevation - 1;
-      radius = elevation;
+      break;
   }
+
   return {
-    shadowColor: SHADOW_COLOR,
+    elevation,
+    shadowColor: theme.Palette.dark['05'],
     shadowOffset: {
-      width: 0,
-      height
+      height: adjustedHeight,
+      width: 0
     },
     shadowOpacity: SHADOW_OPACITY,
-    shadowRadius: radius
+    shadowRadius
   };
 };
 
-export const getShadow = elevation => (IS_ANDROID ? { elevation } : calculateShadow(elevation));
-
 // this is used to quickly build layout related objects in any measure callback or onLayout event
 export const generateLayoutMeasuresObject = (x, y, width, height) => ({
+  bottom: height + y,
+  height,
   left: x,
   right: width + x,
   top: y,
-  bottom: height + y,
-  width,
-  height
+  width
 });
 
 export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
@@ -48,7 +66,6 @@ export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
     .filter(style => style !== null);
 
 export default {
-  calculateShadow,
   generateLayoutMeasuresObject,
   getCustomStyles
 };

package/package.json

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