@widergy/mobile-ui 1.16.3 → 1.17.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.17.1](https://github.com/widergy/mobile-ui/compare/v1.17.0...v1.17.1) (2024-08-12)
+
+
+### Bug Fixes
+
+* new icons ([#332](https://github.com/widergy/mobile-ui/issues/332)) ([d53fbbb](https://github.com/widergy/mobile-ui/commit/d53fbbb913752bc2f8c8c045e64070685f1bc469))
+
+# [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)
 
 

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/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/UTIcon/components/EnergyIcons/EnergyIconChartPie.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1513_1276)">
+<path fill="none" d="M8.9571 3.47452C7.59289 3.96492 6.65875 4.65852 5.83287 5.44331C4.66883 6.54945 3.82194 7.94688 3.38002 9.49066C2.93811 11.0344 2.91728 12.6683 3.31968 14.2229C3.72209 15.7774 4.53308 17.196 5.66854 18.3314C6.804 19.4669 8.22257 20.2779 9.77711 20.6803C11.3316 21.0827 12.9655 21.0619 14.5093 20.6199C16.0531 20.178 17.4505 19.3311 18.5567 18.1671C19.1683 17.5234 19.6786 16.7957 20.0739 16.0092" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0526 11.5526C21.0526 7.13302 17.0872 3 12.5 3V11.5526H21.0526Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1513_1276">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconGraphicCircle.svg

@@ -0,0 +1,13 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1513_1290)">
+<path fill="none" d="M6.9506 20.036C4.84979 18.3884 3.5 15.8269 3.5 12.95C3.5 7.97945 7.52944 3.95001 12.5 3.95001C17.4706 3.95001 21.5 7.97945 21.5 12.95C21.5 15.8269 20.1502 18.3884 18.0494 20.036" stroke-width="2" stroke-linecap="round"/>
+<path d="M10.5 13C10.5 13.5304 10.7107 14.0391 11.0858 14.4142C11.4609 14.7893 11.9696 15 12.5 15C13.0304 15 13.5391 14.7893 13.9142 14.4142C14.2893 14.0391 14.5 13.5304 14.5 13C14.5 12.4696 14.2893 11.9609 13.9142 11.5858C13.5391 11.2107 13.0304 11 12.5 11C11.9696 11 11.4609 11.2107 11.0858 11.5858C10.7107 11.9609 10.5 12.4696 10.5 13Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.95 11.55L16 9.5Z" />
+<path d="M13.95 11.55L16 9.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1513_1290">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome2.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1513_1313)">
+<path d="M12.0325 3L4.00485 12V20.994H20.0934V12L12.0325 3Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.0325 21C9.0325 21 9.0325 15.5304 9.0325 15C9.0325 14.4696 9.03251 13 9.03251 13L11.0325 13H13.0325H15.0325V15V21"/>
+<path d="M9.0325 21C9.0325 21 9.0325 15.5304 9.0325 15C9.0325 14.4696 9.03251 13 9.03251 13L11.0325 13H13.0325H15.0325V15V21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1513_1313">
+<rect width="24" height="24" fill="white" transform="translate(0.0325012)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome3.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" fill="none" stroke="currentColor" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.91017 20.1798C8.91017 22.4293 3.34671 22.4918 3.34671 20.1798V12.0575C3.34671 10.7441 3.34671 9.49547 4.9089 8.40194C6.47109 7.3084 9.06433 5.34004 9.6892 4.87138C10.3141 4.40272 10.939 3.91899 11.8138 3.90282C12.6886 3.88665 13.126 4.21526 13.9071 4.87138C14.6882 5.5275 16.7191 7.05845 18.4062 8.40194C20.0934 9.74542 20.0934 10.7444 20.0934 12.0575V20.1798C20.0934 22.4293 14.892 22.523 14.892 20.1798V16.8571C14.892 14.1398 13.3378 13.2184 11.8138 13.2713C10.348 13.3221 8.91017 14.2436 8.91017 16.8571V20.1798Z" stroke-width="2"/>
+</svg>

package/lib/components/UTIcon/constants.js

@@ -1,6 +1,10 @@
 import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
 import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
+import EnergyIconChartPie from './components/EnergyIcons/EnergyIconChartPie.svg';
+import EnergyIconGraphicCircle from './components/EnergyIcons/EnergyIconGraphicCircle.svg';
 import EnergyIconHome from './components/EnergyIcons/EnergyIconHome.svg';
+import EnergyIconHome2 from './components/EnergyIcons/EnergyIconHome2.svg';
+import EnergyIconHome3 from './components/EnergyIcons/EnergyIconHome3.svg';
 import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
 
 export const SHADES = {
@@ -33,6 +37,10 @@ export const DEFAULT_INTERNAL_SHADE = SHADES.shade02;
 export const ENERGY_ICONS = {
   EnergyIconCar,
   EnergyIconCart,
+  EnergyIconChartPie,
+  EnergyIconGraphicCircle,
   EnergyIconHome,
+  EnergyIconHome2,
+  EnergyIconHome3,
   EnergyIconTruck
 };

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.3",
+  "version": "1.17.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [