@widergy/mobile-ui 0.40.1 → 0.42.0

package/lib/components/Button/constants.js

@@ -4,3 +4,8 @@ export const CONTAINED_ELEVATION = 2;
 export const CONTAINED = 'contained';
 export const OUTLINED = 'outlined';
 export const TEXT = 'text';
+
+export const ICON_PLACEMENTS = {
+  left: 'left',
+  right: 'right',
+};

package/lib/components/Button/index.js

@@ -9,7 +9,7 @@ import { withTheme } from '../../theming';
 
 import propTypes, { buttonDefaultProps } from './propTypes';
 import styles, { getThemeStyles, getButtonModeStyles, getEffectColor } from './styles';
-import { NO_ELEVATION, OUTLINED, TEXT } from './constants';
+import { ICON_PLACEMENTS, NO_ELEVATION, OUTLINED, TEXT } from './constants';
 
 const Button = ({
   color,
@@ -20,6 +20,7 @@ const Button = ({
   elevation,
   icon,
   iconStyle,
+  iconPlacement,
   labelColor,
   testID,
   labelProps,
@@ -41,8 +42,8 @@ const Button = ({
           disabled || mode === TEXT
             ? NO_ELEVATION
             : mode === OUTLINED
-            ? NO_ELEVATION
-            : elevation || themeStyles.buttonElevation
+              ? NO_ELEVATION
+              : elevation || themeStyles.buttonElevation
         }
         style={[
           styles.container,
@@ -59,18 +60,33 @@ const Button = ({
           effectColor={getEffectColor(textColor, theme, effectColor)}
         >
           <View style={[styles.button, contentStyle]}>
-            {icon && (
+            {icon && iconPlacement !== ICON_PLACEMENTS.right && (
+              <Icon
+                color={textColor}
+                name={icon.name}
+                type={icon.type}
+                style={[title && styles.leftIcon, iconStyle]}
+                size={icon.size || themeStyles.fontSize}
+                width={icon.width}
+                height={icon.height}
+              />
+            )}
+            {title && (
+              <Label base color={textColor} {...labelProps}>
+                {lowerCase ? title : title.toUpperCase()}
+              </Label>
+            )}
+            {icon && iconPlacement === ICON_PLACEMENTS.right && (
               <Icon
                 color={textColor}
                 name={icon.name}
                 type={icon.type}
-                style={[styles.leftIcon, iconStyle]}
+                style={[title && styles.rightIcon, iconStyle]}
                 size={icon.size || themeStyles.fontSize}
+                width={icon.width}
+                height={icon.height}
               />
             )}
-            <Label base color={textColor} {...labelProps}>
-              {lowerCase ? title : title.toUpperCase()}
-            </Label>
           </View>
         </Touchable>
       </Surface>

package/lib/components/Button/styles.js

@@ -8,12 +8,12 @@ import { OUTLINED, TEXT, CONTAINED } from './constants';
 export const getThemeStyles = theme => {
   const { colors, fonts, button } = theme;
   return {
-    primaryColor: colors.primary,
-    secondaryColor: colors.secondary,
-    disabledColor: colors.disabled,
-    buttonOutlineWidth: button.borderWidth,
     buttonElevation: button.elevation,
-    fontSize: fonts.fontSizes.base
+    buttonOutlineWidth: button.borderWidth,
+    disabledColor: colors.disabled,
+    fontSize: fonts.fontSizes.base,
+    primaryColor: colors.primary,
+    secondaryColor: colors.secondary
   };
 };
 
@@ -82,11 +82,14 @@ export default StyleSheet.create({
     overflow: 'hidden'
   },
   leftIcon: {
-    paddingRight: portraitHorizontalScale(8)
+    marginRight: portraitHorizontalScale(8)
   },
   outerContainer: {
     alignItems: 'center'
   },
+  rightIcon: {
+    marginLeft: portraitHorizontalScale(8)
+  },
   touchable: {
     alignItems: 'center',
     justifyContent: 'center'

package/lib/components/Checkbox/styles.js

@@ -17,10 +17,10 @@ export default StyleSheet.create({
   containerReversed: {
     flexDirection: 'row-reverse',
     justifyContent: 'space-between',
-    width: '100%',
-    paddingHorizontal: moderateHorizontalScale(10)
+    paddingHorizontal: moderateHorizontalScale(10),
+    width: '100%'
   },
   icon: {
-    paddingRight: moderateHorizontalScale(10)
+    marginRight: moderateHorizontalScale(10)
   }
 });

package/lib/components/Icon/constants.js

@@ -10,6 +10,7 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import SimpleLineIcon from 'react-native-vector-icons/SimpleLineIcons';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import AntIcon from 'react-native-vector-icons/AntDesign';
+
 import VisibilityOff from './assets/eye-off.svg';
 import Visibility from './assets/eye.svg';
 

package/lib/components/Icon/index.js

@@ -5,7 +5,17 @@ import { getIconComponent, DEFAULT_ICON_TYPE, DEFAULT_ICON_SIZE } from './consta
 
 const Icon = ({ color, height, name, size, style, type, width }) => {
   const IconComponent = getIconComponent(type);
-  return <IconComponent color={color} height={height} name={name} size={size} style={style} type={type} width={width}/>;
+  return (
+    <IconComponent
+      color={color}
+      height={height}
+      name={name}
+      size={size}
+      style={style}
+      type={type}
+      width={width}
+    />
+  );
 };
 
 Icon.propTypes = propTypes;

package/lib/components/UTBanner/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import { shape, string } from 'prop-types';
+import _ from 'lodash';
+
+import Icon from '../Icon';
+import Label from '../Label';
+import { useTheme } from '../../theming';
+
+import ownStyles from './styles';
+
+const UTBanner = ({ text, icon, style }) => {
+  const theme = useTheme();
+
+  const ICON_SIZE = 24;
+
+  const themedStyles = _.merge({}, ownStyles, theme?.UTBanner, style);
+
+  return (
+    <View style={themedStyles.banner}>
+      {icon && (
+        <Icon
+          name={icon.name}
+          type={icon.type}
+          size={ICON_SIZE}
+          height={ICON_SIZE}
+          width={ICON_SIZE}
+          color={theme.UTBanner?.iconColor}
+          style={ownStyles.icon}
+        />
+      )}
+      <Label>{text}</Label>
+    </View>
+  );
+};
+
+UTBanner.propTypes = {
+  icon: shape({ name: string, type: string }),
+  text: string
+};
+
+export default UTBanner;

package/lib/components/UTBanner/styles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  banner: {
+    backgroundColor: '#F4F5F7',
+    borderRadius: 8,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: 16
+  },
+  icon: {
+    marginRight: 16
+  }
+});

package/lib/components/UTHeader/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View } from 'react-native';
+import { string, bool, shape, element } from 'prop-types';
+
+import Label from '../Label';
+import UTBanner from '../UTBanner';
+
+import ownStyles from './styles';
+
+const Header = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
+  return (
+    <View style={ownStyles.header}>
+      {tagline && (
+        <Label disabled bold useMarkdown={useMarkdown} style={ownStyles.child}>
+          {tagline.toUpperCase()}
+        </Label>
+      )}
+      <View>
+        <Label big bold style={ownStyles.title} useMarkdown={useMarkdown}>
+          {title}
+        </Label>
+        {subtitle && (
+          <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+            {subtitle}
+          </Label>
+        )}
+      </View>
+      {requiredFieldInfo && (
+        <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+          {requiredFieldInfo}
+        </Label>
+      )}
+      {helpText && (
+        <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
+          {helpText}
+        </Label>
+      )}
+      {banner?.text && <UTBanner text={banner.text} icon={banner.icon} style={{ banner: ownStyles.child }} />}
+    </View>
+  );
+};
+
+Header.propTypes = {
+  banner: shape({
+    Icon: element,
+    text: string
+  }),
+  helpText: string,
+  requiredFieldInfo: string,
+  subtitle: string,
+  tagline: string,
+  title: string,
+  useMarkdown: bool
+};
+
+export default Header;

package/lib/components/UTHeader/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  child: {
+    marginBottom: 16
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: 16,
+    paddingTop: 24
+  },
+  title: {
+    marginBottom: 12
+  }
+});

package/lib/components/UTRoundView/index.js

@@ -1,20 +1,27 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { View, Animated } from 'react-native';
-import _ from 'lodash';
+import merge from 'lodash/merge';
 
 import { useTheme } from '../../theming';
 
 import propTypes from './propTypes';
 import ownStyles from './styles';
+import { generateBackgroundGradient } from './utils';
 
-const UTRoundView = ({ children, styles }) => {
+const UTRoundView = ({ children, styles, startColor, endColor }) => {
   const theme = useTheme();
-  const themedStyles = _.merge({}, theme?.roundView, styles);
+  const themedStyles = merge({}, theme?.roundView, styles);
+  const withBackgroundGradient = !!startColor && !!endColor;
 
   return (
-    <Animated.View style={[ownStyles.container, themedStyles?.outerContainer]}>
-      <View style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>{children}</View>
-    </Animated.View>
+    <Fragment>
+      {withBackgroundGradient && (
+        <View style={ownStyles.backgroundGradient}>{generateBackgroundGradient(startColor, endColor)}</View>
+      )}
+      <Animated.View style={[ownStyles.container, themedStyles?.outerContainer, withBackgroundGradient && ownStyles?.outerWithBackground]}>
+        <View style={[ownStyles.innerContainer, themedStyles?.innerContainer]}>{children}</View>
+      </Animated.View>
+    </Fragment>
   );
 };
 

package/lib/components/UTRoundView/propTypes.js

@@ -1,9 +1,11 @@
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { shape } from 'prop-types';
+import { shape, string } from 'prop-types';
 
 export default {
   styles: shape({
     outerContainer: ViewPropTypes.style,
-    innerContainer: ViewPropTypes.style
-  })
+    innerContainer: ViewPropTypes.style,
+  }),
+  startColor: string,
+  endColor: string,
 };

package/lib/components/UTRoundView/styles.js

@@ -3,8 +3,13 @@ import { StyleSheet } from 'react-native';
 export const ROUND_VIEW_BORDER_RADIUS = 25;
 
 const styles = StyleSheet.create({
+  backgroundGradient: {
+    height: '100%',
+    position: 'absolute',
+    width: '100%',
+  },
   container: {
-    flex: 1
+    flex: 1,
   },
   innerContainer: {
     height: '100%',
@@ -12,8 +17,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     borderTopLeftRadius: ROUND_VIEW_BORDER_RADIUS,
     borderTopRightRadius: ROUND_VIEW_BORDER_RADIUS,
-    paddingTop: ROUND_VIEW_BORDER_RADIUS
-  }
+    paddingTop: ROUND_VIEW_BORDER_RADIUS,
+  },
+  outerWithBackground: {
+    backgroundColor: 'transparent',
+  },
 });
 
 export default styles;

package/lib/components/UTRoundView/utils.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, { Rect, LinearGradient, Defs, Stop } from 'react-native-svg';
+
+export const generateBackgroundGradient = (startColor, endColor) => (
+  <Svg height="100%" width="100%">
+    <Defs>
+      <LinearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+        <Stop offset="0%" stopColor={startColor} stopOpacity="1" />
+        <Stop offset="100%" stopColor={endColor} stopOpacity="1" />
+      </LinearGradient>
+    </Defs>
+    <Rect x="0" y="0" width="100%" height="100%" fill="url(#gradient1)" />
+  </Svg>
+);

package/lib/components/UTStepper/components/Connectors/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { func, number } from 'prop-types';
+
+import ownStyles from './styles';
+
+const Connectors = ({ isCompleted, numberOfStages, theme = {} }) => {
+  const connectors = Array.from(Array(numberOfStages - 1), (_, index) => ({ key: index })).map(
+    ({ key }, index) => (
+      <View
+        key={key}
+        style={[
+          ownStyles.connector,
+          theme.connector,
+          isCompleted(index + 1) && [ownStyles.coloredProgress, theme.coloredProgress]
+        ]}
+      />
+    )
+  );
+
+  return (
+    <View style={ownStyles.wrapper}>
+      <View style={ownStyles.container}>{connectors}</View>
+    </View>
+  );
+};
+
+Connectors.propTypes = {
+  isCompleted: func,
+  numberOfStages: number
+};
+
+export default Connectors;

package/lib/components/UTStepper/components/Connectors/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export default StyleSheet.create({
+  coloredProgress: {
+    backgroundColor: 'blue'
+  },
+  connector: {
+    backgroundColor: 'gray',
+    flexGrow: 1,
+    height: 2
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  wrapper: {
+    left: 0,
+    paddingHorizontal: OVAL_SIZE,
+    paddingTop: OVAL_SIZE,
+    position: 'absolute',
+    width: '100%'
+  }
+});

package/lib/components/UTStepper/components/Step/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { func, number, shape } from 'prop-types';
+import { View } from 'react-native';
+
+import Icon from '../../../Icon';
+import { OVAL_SIZE } from '../../styles';
+
+import ownStyles, { ICON_OFFSET } from './styles';
+
+const Step = ({ isCompleted, isActive, stage, theme = {} }) => {
+  const stageCompleted = isCompleted(stage.id);
+  const stageActive = isActive(stage.id);
+
+  return (
+    <View
+      style={[
+        [ownStyles.stepContainer, theme.stepContainer],
+        stageCompleted && [ownStyles.completedContainer, theme.completeStepContainer],
+        stageActive && [ownStyles.activeContainer, theme.activeStepContainer]
+      ]}
+    >
+      <View style={ownStyles.checkContainer}>
+        <View
+          style={[
+            [ownStyles.stepInnerContainer, theme.stepInnerContainer],
+            stageCompleted && [ownStyles.completedInnerContainer, theme.completeStepInnerContainer],
+            stageActive && [ownStyles.activeInnerContainer, theme.activeStepInnerContainer]
+          ]}
+        />
+        {stageCompleted && (
+          <Icon
+            name="check"
+            type="feather"
+            size={OVAL_SIZE - ICON_OFFSET}
+            color="white"
+            style={ownStyles.checkIcon}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+Step.propTypes = {
+  isActive: func,
+  isCompleted: func,
+  stage: shape({ id: number })
+};
+
+export default Step;

package/lib/components/UTStepper/components/Step/styles.js

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export const ICON_OFFSET = OVAL_SIZE / 4;
+
+export default StyleSheet.create({
+  checkContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  checkIcon: {
+    left: ICON_OFFSET / 2,
+    position: 'absolute',
+    top: ICON_OFFSET / 2
+  },
+
+  activeContainer: {
+    backgroundColor: 'blue'
+  },
+  completedContainer: {
+    backgroundColor: 'blue'
+  },
+  stepContainer: {
+    backgroundColor: 'white',
+    borderRadius: OVAL_SIZE / 2,
+    height: OVAL_SIZE,
+    margin: OVAL_SIZE / 2,
+    width: OVAL_SIZE
+  },
+
+  activeInnerContainer: {
+    backgroundColor: 'white'
+  },
+  completedInnerContainer: {
+    backgroundColor: 'blue'
+  },
+  stepInnerContainer: {
+    backgroundColor: 'gray',
+    borderRadius: OVAL_SIZE / 2,
+    height: OVAL_SIZE / 2,
+    position: 'absolute',
+    top: OVAL_SIZE / 4,
+    width: OVAL_SIZE / 2
+  }
+});

package/lib/components/UTStepper/index.js

@@ -0,0 +1,34 @@
+import { number } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../theming';
+
+import ownStyles from './styles';
+import Step from './components/Step';
+import Connectors from './components/Connectors';
+import { StagesPropTypes } from './types';
+
+const UTStepper = ({ currentStage, stages }) => {
+  const isCompleted = stageNumber => stageNumber < currentStage;
+  const isActive = stageNumber => stageNumber === currentStage;
+  const numberOfStages = stages.length;
+
+  const theme = useTheme().UTStepper;
+
+  return (
+    <View style={ownStyles.container}>
+      <Connectors {...{ isCompleted, numberOfStages, theme }} />
+      {stages.map(stage => (
+        <Step key={stage.id} {...{ isActive, isCompleted, stage, theme }} />
+      ))}
+    </View>
+  );
+};
+
+UTStepper.propTypes = {
+  currentStage: number,
+  stages: StagesPropTypes
+};
+
+export default UTStepper;

package/lib/components/UTStepper/styles.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export const OVAL_SIZE = 16;
+
+export default StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  }
+});

package/lib/components/UTStepper/types.js

@@ -0,0 +1,3 @@
+import { arrayOf, number, shape } from 'prop-types';
+
+export const StagesPropTypes = arrayOf(shape({ id: number }));

package/lib/components/UTTopbar/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View } from 'react-native';
+import { number } from 'prop-types';
+
+import IconButton from '../IconButton';
+import Label from '../Label';
+import UTStepper from '../UTStepper';
+import UTProgressBar from '../UTProgressBar';
+import { StagesPropTypes } from '../UTStepper/types';
+
+import ownStyles, { BAR_HEIGHT } from './styles';
+import { TopbarPropTypes } from './types';
+
+const UTTopbar = ({
+  currentStage,
+  currentStep,
+  stages,
+  stepsCount,
+  theme,
+  topbar: { colorTheme = 'light', goBack, title, variant = 'secondary', icon } = {}
+}) => {
+  const size = { big: variant === 'primary' };
+
+  const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
+
+  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'}
+          onPress={goBack}
+        />
+        <Label color={ownTheme?.text || 'black'} {...size} bold style={ownStyles.child}>
+          {title}
+        </Label>
+        {stages && <UTStepper {...{ currentStage, stages }} />}
+      </View>
+      {currentStep && stepsCount && (
+        <UTProgressBar
+          value={currentStep / stepsCount}
+          styles={{
+            barContainer: {
+              height: BAR_HEIGHT
+            }
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+UTTopbar.propTypes = {
+  currentStage: number,
+  currentStep: number,
+  stages: StagesPropTypes,
+  stepsCount: number,
+  topbar: TopbarPropTypes
+};
+
+export default UTTopbar;

package/lib/components/UTTopbar/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const BAR_HEIGHT = 8;
+
+export default StyleSheet.create({
+  child: {
+    marginRight: 16
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    padding: 16
+  }
+});