@widergy/mobile-ui 0.40.0 → 0.41.1

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/assets/eye-off.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="eye-off">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.91078 1.91058C2.23622 1.58514 2.76386 1.58514 3.0893 1.91058L14.9861 13.8074C15.0321 13.8444 15.0748 13.8867 15.113 13.9343L18.0893 16.9106C18.4147 17.236 18.4147 17.7637 18.0893 18.0891C17.7639 18.4145 17.2362 18.4145 16.9108 18.0891L14.3384 15.5167C13.0039 16.2804 11.5544 16.6665 10 16.6665C6.2667 16.6665 3.25604 14.4606 0.943181 10.4133C0.796755 10.1571 0.796773 9.8425 0.943227 9.58629C1.92481 7.86906 3.03083 6.48078 4.27262 5.45092L1.91078 3.08909C1.58535 2.76366 1.58535 2.23602 1.91078 1.91058ZM5.45722 6.63553C4.45474 7.43811 3.5102 8.55088 2.63331 9.99993C4.71491 13.442 7.17738 14.9998 10 14.9998C11.1045 14.9998 12.1366 14.763 13.1068 14.2851L11.0783 12.2566C10.744 12.4166 10.3751 12.502 9.99748 12.5018C9.33435 12.5016 8.69848 12.2379 8.22974 11.7689C7.761 11.2998 7.4978 10.6637 7.49803 10.0006C7.49816 9.62354 7.58346 9.25529 7.74327 8.92157L5.45722 6.63553ZM9.3635 10.5418C9.37784 10.5587 9.39291 10.575 9.40867 10.5908C9.42457 10.6067 9.44104 10.6219 9.45805 10.6364L9.3635 10.5418ZM9.99709 4.99983C9.33243 4.99748 8.67077 5.08906 8.03173 5.27186C7.58925 5.39845 7.12792 5.14235 7.00134 4.69986C6.87476 4.25738 7.13086 3.79605 7.57335 3.66947C8.36287 3.44362 9.18033 3.3304 10.0015 3.33317C13.7342 3.33375 16.7443 5.53961 19.0569 9.58637C19.2033 9.84261 19.2033 10.1572 19.0568 10.4134C18.3832 11.5918 17.6523 12.6144 16.8595 13.4721C16.5471 13.8101 16.0199 13.8309 15.6819 13.5185C15.3439 13.2061 15.3232 12.6789 15.6356 12.3409C16.2384 11.6886 16.8161 10.9099 17.3668 9.99975C15.2852 6.55771 12.8227 4.99984 10 4.99984L9.99709 4.99983Z" fill="#677489"/>
+</g>
+</svg>

package/lib/components/Icon/assets/eye.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15986 12C5.65779 16.1305 8.61278 18 12 18C15.3872 18 18.3422 16.1305 20.8401 12C18.3422 7.86948 15.3872 6 12 6C8.61278 6 5.65779 7.86948 3.15986 12ZM1.13177 11.5038C3.9072 6.64709 7.51999 4 12 4C16.48 4 20.0928 6.64709 22.8682 11.5038C23.0439 11.8113 23.0439 12.1887 22.8682 12.4962C20.0928 17.3529 16.48 20 12 20C7.51999 20 3.9072 17.3529 1.13177 12.4962C0.956077 12.1887 0.956077 11.8113 1.13177 11.5038ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11ZM9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12Z" fill="#677489"/>
+</svg>

package/lib/components/Icon/constants.js

@@ -11,7 +11,8 @@ 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 { horizontalScale } from '../../utils/scaleUtils';
+import VisibilityOff from './assets/eye-off.svg';
+import Visibility from './assets/eye.svg';
 
 const DEFAULT_ICON_COMPONENT = MaterialIcon;
 export const DEFAULT_ICON_TYPE = 'material';
@@ -28,9 +29,11 @@ const ICON_TYPES = {
   'material-community': MaterialCommunityIcon,
   octicon: OcticonIcon,
   'simple-line-icon': SimpleLineIcon,
+  visibility: Visibility,
+  'visibility-off': VisibilityOff,
   zocial: ZocialIcon
 };
 
 export const getIconComponent = type => ICON_TYPES[type] || DEFAULT_ICON_COMPONENT;
 
-export const DEFAULT_ICON_SIZE = horizontalScale(25);
+export const DEFAULT_ICON_SIZE = 20;

package/lib/components/Icon/index.js

@@ -3,16 +3,28 @@ import React from 'react';
 import propTypes from './propTypes';
 import { getIconComponent, DEFAULT_ICON_TYPE, DEFAULT_ICON_SIZE } from './constants';
 
-const Icon = ({ color, name, size, style, type }) => {
+const Icon = ({ color, height, name, size, style, type, width }) => {
   const IconComponent = getIconComponent(type);
-  return <IconComponent style={style} color={color} name={name} size={size} type={type} />;
+  return (
+    <IconComponent
+      color={color}
+      height={height}
+      name={name}
+      size={size}
+      style={style}
+      type={type}
+      width={width}
+    />
+  );
 };
 
 Icon.propTypes = propTypes;
 
 Icon.defaultProps = {
+  height: DEFAULT_ICON_SIZE,
+  size: DEFAULT_ICON_SIZE,
   type: DEFAULT_ICON_TYPE,
-  size: DEFAULT_ICON_SIZE
+  width: DEFAULT_ICON_SIZE
 };
 
 export default Icon;

package/lib/components/Icon/propTypes.js

@@ -3,8 +3,10 @@ import { number, string } from 'prop-types';
 
 export default {
   color: string,
+  height: number,
   name: string.isRequired,
   size: number,
   style: ViewPropTypes.style,
-  type: string
+  type: string,
+  width: number
 };

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/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/UTTextInput/components/BaseInput/index.js

@@ -70,9 +70,7 @@ const BaseInput = forwardRef(
 
     const hiddenInputProps = hiddenInput
       ? {
-          name: showInput ? VISIBILITY : VISIBILITY_OFF,
-          size: ICON_SIZE,
-          color: theme.UTTextInput?.passwordEyeColor || theme.colors.primary,
+          type: showInput ? VISIBILITY : VISIBILITY_OFF,
           ...(RightIcon || {})
         }
       : {};

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
+  }
+});

package/lib/components/UTTopbar/types.js

@@ -0,0 +1,8 @@
+import { func, oneOf, shape, string } from 'prop-types';
+
+export const TopbarPropTypes = shape({
+  colorTheme: oneOf(['light', 'dark']),
+  goBack: func,
+  title: string,
+  variant: oneOf(['primary', 'secondary'])
+});