@widergy/mobile-ui 1.16.2 → 1.17.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.17.0](https://github.com/widergy/mobile-ui/compare/v1.16.3...v1.17.0) (2024-08-09)
+
+
+### Features
+
+* badge for utworkflow summary ([#328](https://github.com/widergy/mobile-ui/issues/328)) ([3ba4b6f](https://github.com/widergy/mobile-ui/commit/3ba4b6fe85872f20d55de2a315c1632c185fe687))
+
+## [1.16.3](https://github.com/widergy/mobile-ui/compare/v1.16.2...v1.16.3) (2024-08-08)
+
+
+### Bug Fixes
+
+* android highlight for markdown links ([#329](https://github.com/widergy/mobile-ui/issues/329)) ([0b712dc](https://github.com/widergy/mobile-ui/commit/0b712dc2bd364fcff8229766daf788ba2f4a2796))
+
 ## [1.16.2](https://github.com/widergy/mobile-ui/compare/v1.16.1...v1.16.2) (2024-08-08)
 
 

package/lib/components/Capture/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import Label from '../Label';
 import PhotoAlbum from '../PhotoAlbum';
@@ -27,7 +27,7 @@ const Capture = ({
   const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
 
   return (
-    <>
+    <Fragment>
       {!!label && (
         <Label semiBold big style={styles.paddingText}>
           {label}
@@ -51,7 +51,7 @@ const Capture = ({
         onError={onError}
       />
       {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
-    </>
+    </Fragment>
   );
 };
 Capture.propTypes = propTypes;

package/lib/components/Dropdown/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/sort-comp */
 /* eslint-disable class-methods-use-this */
 // TODO implement horizontal repositioning.
-import React, { Component, createRef } from 'react';
+import React, { Component, createRef, Fragment } from 'react';
 import { Animated, ScrollView, View } from 'react-native';
 
 import Overlay from '../Overlay';
@@ -246,7 +246,7 @@ class Dropdown extends Component {
     });
 
     return (
-      <>
+      <Fragment>
         <View collapsable={false} ref={this.anchor}>
           {anchor}
         </View>
@@ -295,7 +295,7 @@ class Dropdown extends Component {
             </TransformView>
           </View>
         </Overlay>
-      </>
+      </Fragment>
     );
   }
 }

package/lib/components/Label/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Text } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 
@@ -25,29 +25,39 @@ const Label = ({
   const textVariants = Object.keys(textStyles);
   const customStyles = getCustomStyles(textVariants, props, textStyles);
 
+  const [pressed, setPressed] = useState(false);
+
   const styles = formatStyles(
     useMarkdown,
     [textStyles.base, textStyles.fontColor, customStyles, style],
-    markdownStyles
+    markdownStyles,
+    pressed
   );
 
   const LabelRenderer = useMarkdown ? Markdown : Text;
 
-  const propsByComponent = useMemo(
-    () =>
-      useMarkdown
-        ? {
-            mergeStyle: false,
-            onLinkPress,
-            children: markdownFormat(children)
-          }
-        : {
-            allowFontScaling: allowFontScaling ?? theme.allowFontScaling,
-            ...textProps,
-            children
-          },
-    [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]
-  );
+  const propsByComponent = useMemo(() => {
+    const handleLinkPress = () => {
+      setPressed(true);
+      onLinkPress?.();
+      setTimeout(() => {
+        setPressed(false);
+      }, 200);
+      return true;
+    };
+
+    return useMarkdown
+      ? {
+          mergeStyle: false,
+          onLinkPress: handleLinkPress,
+          children: markdownFormat(children)
+        }
+      : {
+          allowFontScaling: allowFontScaling ?? theme.allowFontScaling,
+          ...textProps,
+          children
+        };
+  }, [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]);
 
   return <LabelRenderer style={styles} {...propsByComponent} {...props} />;
 };

package/lib/components/Label/styles.js

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import { verticalScale, horizontalScale } from '../../utils/scaleUtils';
+import { IS_ANDROID } from '../../utils/platformUtils/constants';
 
 export const getTextStyles = (theme, color) =>
   StyleSheet.create({
@@ -101,5 +102,9 @@ export const markdownStyles = StyleSheet.create({
   ordered_list_icon: {
     height: '100%',
     paddingBottom: verticalScale(10)
-  }
+  },
+  link: pressed => ({
+    backgroundColor: IS_ANDROID && pressed ? 'lightgray' : 'transparent',
+    textDecorationLine: 'underline'
+  })
 });

package/lib/components/Label/utils.js

@@ -15,7 +15,7 @@ const flattenStyles = (obj = {}, styles) => {
   return obj;
 };
 
-export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
+export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}, pressed) => {
   const { paragraph } = newMarkdownStyles;
 
   const flattenedStyles = flattenStyles({}, styles);
@@ -27,7 +27,8 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
     bullet_list_icon,
     ordered_list,
     ordered_list_content,
-    ordered_list_icon
+    ordered_list_icon,
+    link
   } = markdownStyles;
 
   const paragraphStyle = { ...flattenedStyles, ...paragraph };
@@ -41,6 +42,7 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
         ordered_list,
         ordered_list_content,
         ordered_list_icon,
+        link: link(pressed),
         ...newMarkdownStyles,
         paragraph: paragraphStyle
       }

package/lib/components/MultipleFilePicker/components/Picker/index.js

@@ -26,7 +26,7 @@ const Picker = ({
   disabled = false,
   UploadIcon
 }) => (
-  <>
+  <Fragment>
     {!!title && (
       <Label
         useMarkdown={withMarkdownTitle}
@@ -67,7 +67,7 @@ const Picker = ({
       <Text style={styles.pickerText}>{pickerText}</Text>
     </View>
     <Text style={styles.helpText}>{helpText}</Text>
-  </>
+  </Fragment>
 );
 
 Picker.propTypes = {

package/lib/components/MultipleFilePicker/components/UploadedFiles/index.js

@@ -27,7 +27,7 @@ const UploadedFiles = ({
   uploadedFiles,
   withMarkdownTitle
 }) => (
-  <>
+  <Fragment>
     {!!title && (
       <Label
         useMarkdown={withMarkdownTitle}
@@ -113,7 +113,7 @@ const UploadedFiles = ({
       <Text style={styles.pickerText}>{pickerText}</Text>
     </View>
     <Text style={styles.helpText}>{helpText}</Text>
-  </>
+  </Fragment>
 );
 
 UploadedFiles.propTypes = {

package/lib/components/PhotoAlbum/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 // eslint-disable-next-line react-native/split-platform-components
 import { View, TouchableOpacity, PermissionsAndroid } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
@@ -108,7 +108,7 @@ const PhotoAlbum = ({
   }, [selectedImages]);
 
   return (
-    <>
+    <Fragment>
       {title && (
         <Label big semiBold color="#666666" style={styles.title}>
           {title}
@@ -163,7 +163,7 @@ const PhotoAlbum = ({
           </Portal>
         )}
       </View>
-    </>
+    </Fragment>
   );
 };
 

package/lib/components/Picker/index.js

@@ -24,7 +24,7 @@ const Picker = ({
   markdownStyles,
   disabled = false
 }) => (
-  <>
+  <Fragment>
     {!!title && (
       <Label
         useMarkdown={withMarkdownTitle}
@@ -55,7 +55,7 @@ const Picker = ({
         />
       </Touchable>
     </View>
-  </>
+  </Fragment>
 );
 
 Picker.propTypes = {

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
@@ -33,7 +33,7 @@ class RadioButton extends Component {
       disabled
     } = this.props;
     return (
-      <>
+      <Fragment>
         <Touchable onPress={this.handlePress} disabled={disabled}>
           <View style={[styles.container, style]}>
             {descriptionComponent ? (
@@ -47,7 +47,7 @@ class RadioButton extends Component {
                 />
               </View>
             ) : (
-              <>
+              <Fragment>
                 <Icon
                   name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
                   color={status ? theme.colors.primary : theme.colors.disabled}
@@ -73,12 +73,12 @@ class RadioButton extends Component {
                     {labelValue}
                   </Label>
                 )}
-              </>
+              </Fragment>
             )}
           </View>
         </Touchable>
         {showSeparatorBar && <SeparatorBar />}
-      </>
+      </Fragment>
     );
   }
 }

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { number, string, arrayOf, shape, any } from 'prop-types';
 import { View } from 'react-native';
 
@@ -80,7 +80,7 @@ const Indicator = ({
       </View>
 
       {consumptionLimit && (
-        <>
+        <Fragment>
           <View
             style={[styles.limitLabel, { left: limitTextPosition, top: -limitDimensions.height - 33 - 15 }]}
             onLayout={handleLimitDimensions}
@@ -98,7 +98,7 @@ const Indicator = ({
             </Label>
           </View>
           <IndicatorIcon position={limitIndicatorPosition} inverted />
-        </>
+        </Fragment>
       )}
     </View>
   );

package/lib/components/Snackbar/index.js

@@ -7,7 +7,7 @@ import { withTheme, themeType } from '../../theming';
 import IconButton from '../IconButton';
 import Label from '../Label';
 import { IS_ANDROID } from '../../utils/platformUtils/constants';
-import { SHADOW_COLOR, SHADOW_OPACITY } from '../../utils/styleUtils';
+import { SHADOW_OPACITY } from '../../utils/styleUtils';
 
 import styles, { alertStyleMapper } from './styles';
 import { INFO, DURATION } from './constants';
@@ -139,7 +139,7 @@ class Snackbar extends Component {
         }
       : {
           opacity,
-          shadowColor: SHADOW_COLOR,
+          shadowColor: 'black',
           shadowOpacity: SHADOW_OPACITY,
           shadowRadius: 3,
           shadowOffset: {

package/lib/components/UTOnBoarding/components/CardContent/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Animated } from 'react-native';
 
 import Label from '../../../Label';
@@ -9,7 +9,7 @@ import propTypes from './propTypes';
 import ownStyles from './styles';
 
 const CardContent = ({ onPress, currentPage, opacity, styles, buttonTitle = '', disabled }) => (
-  <>
+  <Fragment>
     <Animated.View style={[styles?.textContainer, { opacity }]}>
       <Label big bold style={styles?.title}>
         {currentPage?.title || ''}
@@ -26,7 +26,7 @@ const CardContent = ({ onPress, currentPage, opacity, styles, buttonTitle = '',
       {...styles?.buttonProps}
       disabled={disabled}
     />
-  </>
+  </Fragment>
 );
 
 CardContent.propTypes = propTypes;

package/lib/components/UTStepFeedback/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Animated, TouchableOpacity, View } from 'react-native';
 import _ from 'lodash';
 
@@ -115,7 +115,7 @@ const StepFeedback = ({
     };
 
     return (
-      <>
+      <Fragment>
         <View style={styles.stepContainer}>
           <Wrapper onStepPress={onStepPress} status={status} step={step}>
             <View style={styles.centerStepContainer}>
@@ -133,7 +133,7 @@ const StepFeedback = ({
         {index < steps.length - 1 && (
           <View style={[styles.stepSeparator, status.isComplete && styles.stepSeparatorComplete]} />
         )}
-      </>
+      </Fragment>
     );
   };
 

package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js

@@ -81,7 +81,7 @@ const OutlinedInput = ({
                 : focused
                   ? 2
                   : disabled
-                    ? themeStyles?.inactive?.disabledBorderWidth ?? 1
+                    ? (themeStyles?.inactive?.disabledBorderWidth ?? 1)
                     : 1,
               borderColor: active ? activeColor : inactiveColor
             },

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

@@ -9,6 +9,7 @@ import Icon from '../../../../../Icon';
 import Checkbox from '../../../../../Checkbox';
 import { MessagePropTypes, SummaryPropTypes } from '../../types';
 import UTButton from '../../../../../UTButton';
+import UTBadge from '../../../../../UTBadge';
 
 import ActionButton from './components/ActionButton';
 import ActionButtonPropTypes from './components/ActionButton/types';
@@ -40,24 +41,26 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
           )}
           {summary.actions && !checkboxProps && (
             <View style={themedStyles.summaryActions}>
-              {summary.actions.map(({ Icon: actionIcon, title, onPress, disabled }, index) => (
-                <UTButton
-                  disabled={disabled}
-                  Icon={actionIcon}
+              {summary.actions.map(({ Icon: actionIcon, title, onPress, badge, disabled }, index) => (
+                <View
                   key={actionIcon}
-                  onPress={onPress}
-                  size="small"
-                  style={{
-                    root: {
-                      ...themedStyles.summaryActionContainer,
-                      ...(index !== summary.actions.length - 1 && themedStyles.summaryActionsChild)
-                    },
-                    childrenContainer: themedStyles.summaryActionButton
-                  }}
-                  variant="semitransparent"
+                  style={index !== summary.actions.length - 1 && themedStyles.summaryActionsChild}
                 >
-                  {title}
-                </UTButton>
+                  {badge && <UTBadge style={themedStyles.summaryActionBadge}>{badge}</UTBadge>}
+                  <UTButton
+                    disabled={disabled}
+                    Icon={actionIcon}
+                    onPress={onPress}
+                    size="small"
+                    style={{
+                      root: themedStyles.summaryActionContainer,
+                      childrenContainer: themedStyles.summaryActionButton
+                    }}
+                    variant="semitransparent"
+                  >
+                    {title}
+                  </UTButton>
+                </View>
               ))}
             </View>
           )}

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

@@ -48,6 +48,12 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     padding: 16
   },
+  summaryActionBadge: {
+    position: 'absolute',
+    right: -6,
+    top: -6,
+    zIndex: 10
+  },
   summaryActionContainer: {
     paddingVertical: 8
   },

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { ScrollView, View } from 'react-native';
-import { number, func, shape, bool, string, element } from 'prop-types';
+import { number, func, shape, bool, string, element, oneOfType } from 'prop-types';
 import { merge } from 'lodash';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -98,10 +98,10 @@ UTWorkflowContainer.propTypes = {
   scrollable: bool,
   stages: StagesPropTypes,
   stepsCount: number.isRequired,
-  subtitle: string,
+  subtitle: oneOfType([string, element]),
   summary: SummaryPropTypes,
   tagline: string,
-  title: string,
+  title: oneOfType([string, element]),
   topbar: TopbarPropTypes,
   useMarkdown: bool
 };

package/package.json

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