@widergy/mobile-ui 1.19.0 → 1.19.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.19.2](https://github.com/widergy/mobile-ui/compare/v1.19.1...v1.19.2) (2024-08-26)
+
+
+### Bug Fixes
+
+* update utbadge and counter on utbutton ([#343](https://github.com/widergy/mobile-ui/issues/343)) ([6dcc9dd](https://github.com/widergy/mobile-ui/commit/6dcc9dd1b9bd00b126cf50b0dcf66d87a2a94559))
+
+## [1.19.1](https://github.com/widergy/mobile-ui/compare/v1.19.0...v1.19.1) (2024-08-26)
+
+
+### Bug Fixes
+
+* standarize uttracker ([#336](https://github.com/widergy/mobile-ui/issues/336)) ([b832deb](https://github.com/widergy/mobile-ui/commit/b832deb20b87ee771c4d4ce15c9e80ea4b24974f))
+
 # [1.19.0](https://github.com/widergy/mobile-ui/compare/v1.18.6...v1.19.0) (2024-08-23)
 
 

package/lib/components/UTBadge/constants.js

@@ -1,13 +1,5 @@
-export const COLORS_MAPPER = {
-  alert: 'error',
-  identity: 'accent',
-  identitySecondary: 'neutral',
-  information: 'information',
-  negative: 'negative',
-  success: 'success',
-  warning: 'warning'
-};
+import { COLOR_THEMES } from '../../constants/Palette';
 
 export const DEFAULT_PROPS = {
-  colorTheme: 'alert'
+  colorTheme: COLOR_THEMES.error
 };

package/lib/components/UTBadge/theme.js

@@ -1,23 +1,16 @@
 import { StyleSheet } from 'react-native';
 
-import { COLORS_MAPPER, DEFAULT_PROPS } from './constants';
+import { COLOR_THEMES } from '../../constants/Palette';
+import { getDefaultColorShade } from '../../utils/styleUtils';
 
-export const variantsColorTheme = (theme, colorTheme) => {
-  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
-  const paletteTheme = theme.Palette[colorName];
+import { DEFAULT_PROPS } from './constants';
 
-  const backgroundColorMapper = {
-    alert: paletteTheme['04'],
-    information: paletteTheme['05'],
-    warning: paletteTheme['05'],
-    success: paletteTheme['05'],
-    identity: paletteTheme['05'],
-    identitySecondary: paletteTheme['05'],
-    negative: paletteTheme['04']
-  };
+export const variantsColorTheme = (theme, colorTheme) => {
+  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
+  const colorShade = getDefaultColorShade(colorTheme);
 
   return {
-    backgroundColor: backgroundColorMapper[colorTheme]
+    backgroundColor: colorThemeDefinition[colorShade]
   };
 };
 
@@ -51,6 +44,6 @@ export const retrieveStyle = ({ theme, colorTheme, children }) => {
       ...textTheme,
       ...variantTheme
     },
-    textColorTheme: colorTheme === 'negative' ? 'dark' : 'negative'
+    textColorTheme: [COLOR_THEMES.negative, COLOR_THEMES.light].includes(colorTheme) ? 'dark' : 'negative'
   };
 };

package/lib/components/UTButton/constants.js

@@ -1,6 +1,13 @@
 export const ELEVATION = 2;
 export const PRESSED_ELEVATION = 2;
-export const PRIMARY = 'primary';
+
+export const VARIANTS_NAMES = {
+  filled: 'filled',
+  outlined: 'outlined',
+  semitransparent: 'semitransparent',
+  shadow: 'shadow',
+  text: 'text'
+};
 
 export const SIZES = {
   SMALL: 'small',
@@ -20,9 +27,3 @@ export const COLORS_MAPPER = {
   secondary: 'neutral',
   success: 'success'
 };
-
-export const COUNTER_THEMES = {
-  IDENTITY: 'identity',
-  IDENTITY_SECONDARY: 'identitySecondary',
-  NEGATIVE: 'negative'
-};

package/lib/components/UTButton/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
 
+import { COLOR_THEMES } from '../../constants/Palette';
 import { isUTIcon } from '../UTIcon/utils';
 import { useTheme } from '../../theming';
 import UTBadge from '../UTBadge';
@@ -8,8 +9,8 @@ import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
 
+import { COLORS_MAPPER, ICON_PLACEMENTS, VARIANTS_NAMES } from './constants';
 import { defaultProps, propTypes } from './proptypes';
-import { ICON_PLACEMENTS } from './constants';
 import { retrieveStyle } from './theme';
 
 const UTButton = ({
@@ -29,7 +30,6 @@ const UTButton = ({
 
   const {
     buttonStyles: themeButtonStyles,
-    counterStyles,
     childrenContainerStyles: themeChildrenContainerStyles,
     disabledStyles,
     iconStyles: themeIconStyles,
@@ -37,7 +37,6 @@ const UTButton = ({
   } = retrieveStyle({
     style,
     colorTheme,
-    iconPlacement,
     size,
     theme,
     variant
@@ -45,10 +44,16 @@ const UTButton = ({
 
   const iconStyles = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
 
-  const { colorTheme: counterTheme, iconLeftAndCounter, ...remainingCounterStyles } = counterStyles;
+  const counterColorTheme =
+    variant === VARIANTS_NAMES.filled
+      ? colorTheme === COLOR_THEMES.negative
+        ? COLOR_THEMES.dark
+        : COLOR_THEMES.negative
+      : COLORS_MAPPER[colorTheme];
 
   const buttonStyles = ({ pressed }) => [
     themeButtonStyles,
+    !children && themeButtonStyles.iconOnly,
     (disabled || loading) && disabledStyles,
     pressed ? themeButtonStyles.pressed : themeButtonStyles.notPressed
   ];
@@ -57,13 +62,13 @@ const UTButton = ({
     Icon &&
     (isUTIcon(Icon) ? (
       (() => {
-        const { fontSize, color, ...remainingIconStyles } = iconStyles;
+        const { size: iconSize, color, ...remainingIconStyles } = iconStyles;
 
         return (
           <UTIcon
             colorTheme={textStyles.colorTheme}
             name={Icon}
-            size={fontSize}
+            size={iconSize}
             style={remainingIconStyles}
           />
         );
@@ -74,17 +79,8 @@ const UTButton = ({
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
+      {count && <UTBadge colorTheme={counterColorTheme}>{count}</UTBadge>}
       {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
-      {count && count > 0 ? (
-        <UTBadge
-          colorTheme={counterTheme}
-          style={
-            iconPlacement === ICON_PLACEMENTS.LEFT && !children ? iconLeftAndCounter : remainingCounterStyles
-          }
-        >
-          {count}
-        </UTBadge>
-      ) : null}
       {children && (
         <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
           {children}

package/lib/components/UTButton/theme.js

@@ -1,7 +1,7 @@
+import { COLOR_THEMES } from '../../constants/Palette';
 import { getShadow } from '../../utils/styleUtils';
-import { COLOR_THEMES } from '../UTLabel/constants';
 
-import { COLORS_MAPPER, COUNTER_THEMES, ELEVATION, PRESSED_ELEVATION, PRIMARY } from './constants';
+import { COLORS_MAPPER, ELEVATION, PRESSED_ELEVATION } from './constants';
 import { defaultProps } from './proptypes';
 
 const baseButtonTheme = () => ({
@@ -14,29 +14,22 @@ const baseButtonTheme = () => ({
     borderWidth: 0,
     minWidth: 'auto',
     paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  counter: {
-    marginRight: 8
-  },
-  iconLeftAndCounter: {
-    marginLeft: 8,
-    marginRight: 0
+    paddingVertical: 8,
+    iconOnly: {
+      paddingHorizontal: 8,
+      paddingVertical: 8
+    }
   },
   icon: {
-    fontSize: 20
+    size: 20
   },
   iconOnly: {
-    fontSize: 24,
-    height: 24,
-    marginHorizontal: -4,
-    marginLeft: 0,
-    marginRight: 0,
-    width: 24
+    size: 24
   },
   childrenContainer: {
     alignItems: 'center',
     display: 'flex',
+    columnGap: 8,
     flexDirection: 'row',
     justifyContent: 'flex-start'
   }
@@ -61,12 +54,8 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['05']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative ? COUNTER_THEMES.IDENTITY_SECONDARY : COUNTER_THEMES.NEGATIVE
-      },
       text: {
-        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.NEUTRAL : COLOR_THEMES.NEGATIVE
+        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative
       },
       icon: {
         color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
@@ -82,14 +71,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['03']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -106,14 +87,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['02']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -130,14 +103,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['02']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -157,14 +122,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         },
         notPressed: shadow
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -182,33 +139,41 @@ const sizeButtonTheme = size => {
     large: {
       button: {
         paddingHorizontal: 16,
-        paddingVertical: 12
+        paddingVertical: 12,
+        iconOnly: {
+          paddingHorizontal: 12,
+          paddingVertical: 12
+        }
       },
       text: {
         variant: 'body',
         weight: 'medium'
       },
       icon: {
-        fontSize: 20
+        size: 20
       },
       iconOnly: {
-        fontSize: 24
+        size: 24
       }
     },
     small: {
       button: {
         paddingHorizontal: 8,
-        paddingVertical: 4
+        paddingVertical: 4,
+        iconOnly: {
+          paddingHorizontal: 4,
+          paddingVertical: 4
+        }
       },
       text: {
         weight: 'medium',
         variant: 'small'
       },
       icon: {
-        fontSize: 20
+        size: 20
       },
       iconOnly: {
-        fontSize: 20
+        size: 20
       }
     }
   };
@@ -216,23 +181,10 @@ const sizeButtonTheme = size => {
   return definition[size] || {};
 };
 
-const iconButtonPlacementTheme = iconPlacement => {
-  const definition = {
-    left: {
-      marginRight: 8
-    },
-    right: {
-      marginLeft: 8
-    }
-  };
-  return definition[iconPlacement] || {};
-};
-
-export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, iconPlacement }) => {
+export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size }) => {
   const baseTheme = baseButtonTheme();
   const variantTheme = variantsColorTheme(theme, colorTheme, variant);
   const sizeTheme = sizeButtonTheme(size);
-  const iconPlacementTheme = iconButtonPlacementTheme(iconPlacement);
 
   const buttonStyles = {
     ...baseTheme.button,
@@ -241,14 +193,6 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
     ...style.root
   };
 
-  const counterStyles = {
-    ...baseTheme.counter,
-    ...variantTheme.counter,
-    iconLeftAndCounter: {
-      ...baseTheme.iconLeftAndCounter
-    }
-  };
-
   const textStyles = {
     colorTheme: variantTheme.text.colorTheme,
     variant: sizeTheme.text?.variant || baseTheme.text?.variant,
@@ -260,7 +204,6 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
       ...baseTheme.icon,
       ...sizeTheme.icon,
       ...variantTheme.icon,
-      ...iconPlacementTheme,
       ...style.icon
     },
     iconOnly: {
@@ -271,11 +214,14 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
     }
   };
 
-  const childrenContainerStyles = { ...baseTheme.childrenContainer, ...style.childrenContainer };
+  const childrenContainerStyles = {
+    ...baseTheme.childrenContainer,
+    ...style.childrenContainer
+  };
 
   const disabledStyles = {
     opacity: 0.5
   };
 
-  return { buttonStyles, counterStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
+  return { buttonStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
 };

package/lib/components/UTIcon/constants.js

@@ -1,3 +1,5 @@
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+
 import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
 import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
 import EnergyIconChartPie from './components/EnergyIcons/EnergyIconChartPie.svg';
@@ -7,32 +9,11 @@ import EnergyIconHome2 from './components/EnergyIcons/EnergyIconHome2.svg';
 import EnergyIconHome3 from './components/EnergyIcons/EnergyIconHome3.svg';
 import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
 
-export const SHADES = {
-  shade01: '01',
-  shade02: '02',
-  shade03: '03',
-  shade04: '04',
-  shade05: '05'
-};
-
-export const COLOR_THEMES = {
-  accent: 'accent',
-  dark: 'dark',
-  error: 'error',
-  gray: 'gray',
-  information: 'information',
-  light: 'light',
-  negative: 'negative',
-  neutral: 'neutral',
-  success: 'success',
-  warning: 'warning'
-};
-
 export const DEFAULT_PROPS = {
-  color: 'dark'
+  color: COLOR_THEMES.dark
 };
 
-export const DEFAULT_INTERNAL_SHADE = SHADES.shade02;
+export const DEFAULT_INTERNAL_SHADE = COLOR_SHADES.shade02;
 
 export const ENERGY_ICONS = {
   EnergyIconCar,

package/lib/components/UTIcon/theme.js

@@ -1,11 +1,6 @@
-import { COLOR_THEMES, DEFAULT_PROPS, SHADES } from './constants';
+import { getDefaultColorShade } from '../../utils/styleUtils';
 
-const getDefaultColorShade = colorTheme =>
-  colorTheme === COLOR_THEMES.gray
-    ? SHADES.shade04
-    : colorTheme === COLOR_THEMES.light
-      ? SHADES.shade01
-      : SHADES.shade05;
+import { DEFAULT_PROPS } from './constants';
 
 export const retrieveColor = ({ colorTheme, shade, theme }) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.color];

package/lib/components/UTLabel/constants.js

@@ -1,10 +1,4 @@
-export const SHADES = {
-  shade01: '01',
-  shade02: '02',
-  shade03: '03',
-  shade04: '04',
-  shade05: '05'
-};
+import { COLOR_THEMES } from '../../constants/Palette';
 
 export const VARIANTS_SIZES = {
   title1: 30,
@@ -37,21 +31,8 @@ export const WEIGHTS = {
   black: 900
 };
 
-export const COLOR_THEMES = {
-  ACCENT: 'accent',
-  DARK: 'dark',
-  ERROR: 'error',
-  GRAY: 'gray',
-  INFORMATION: 'information',
-  LIGHT: 'light',
-  NEGATIVE: 'negative',
-  NEUTRAL: 'neutral',
-  SUCCESS: 'success',
-  WARNING: 'warning'
-};
-
 export const DEFAULT_PROPS = {
-  colorTheme: COLOR_THEMES.DARK,
+  colorTheme: COLOR_THEMES.dark,
   field: {},
   style: {},
   variant: 'body',

package/lib/components/UTLabel/theme.js

@@ -1,17 +1,12 @@
+import { COLOR_SHADES } from '../../constants/Palette';
+import { getDefaultColorShade } from '../../utils/styleUtils';
 import { IS_IOS } from '../../utils/platformUtils/constants';
 
-import { COLOR_THEMES, DEFAULT_PROPS, LINE_HEIGHTS, SHADES, VARIANTS_SIZES, WEIGHTS } from './constants';
-
-const getDefaultColorShade = colorTheme =>
-  colorTheme === COLOR_THEMES.GRAY
-    ? SHADES.shade04
-    : colorTheme === COLOR_THEMES.LIGHT
-      ? SHADES.shade01
-      : SHADES.shade05;
+import { DEFAULT_PROPS, LINE_HEIGHTS, VARIANTS_SIZES, WEIGHTS } from './constants';
 
 const variantsColorTheme = (colorTheme, shade, theme) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
-  const colorShade = Object.values(SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  const colorShade = Object.values(COLOR_SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
   return colorThemeDefinition[colorShade] || '#000';
 };
 

package/lib/components/UTModal/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, TouchableWithoutFeedback, Keyboard, Modal, ImageBackground } from 'react-native';
 import _ from 'lodash';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import Button from '../Button';
 import Touchable from '../Touchable';
 import Icon from '../Icon';
@@ -89,14 +89,14 @@ const UTModal = ({
                   )}
 
                   {!!title && (
-                    <Label bold center style={styles.title}>
+                    <UTLabel variant="title3" weight="medium" style={styles.title}>
                       {title}
-                    </Label>
+                    </UTLabel>
                   )}
                   {!!subtitle && (
-                    <Label midGray {...subtitleProps} style={styles.subtitle}>
+                    <UTLabel colorTheme="gray" {...subtitleProps} style={styles.subtitle}>
                       {subtitle}
-                    </Label>
+                    </UTLabel>
                   )}
 
                   {children}

package/lib/components/UTModal/styles.js

@@ -45,7 +45,6 @@ export default StyleSheet.create({
     marginBottom: 12
   },
   subtitle: {
-    marginHorizontal: '4%',
     marginBottom: 12
   },
   buttonText: {

package/lib/components/UTSelectableCard/styles.js

@@ -16,6 +16,7 @@ export const getAppearanceStyles = (theme = {}) => ({
     disabledContainer: {
       backgroundColor: theme.Palette.light['03'],
       borderColor: 'transparent',
+      borderRadius: 4,
       borderWidth: 2
     },
     selectedContainer: {

package/lib/components/UTTracker/README.md

@@ -9,6 +9,8 @@ This component displays a vertical stepper intended to track progress
 | Name        | Type              | Default  | Description                                                                                                                                                           |
 | ----------- | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | title       | string            |          | Displays the title above the tracker.                                                                                                                                 |
+| subtitle    | string            |          | Displays under the title                                                                                                                                              | 
+| description | string            |          | Displays under the subtitle                                                                                                                                           | 
 | mode        | card \| flat      | card     | Defines whether the component should display as a card or as the bare components without any background.                                                              |
 | variant     | standard \| error | standard | Defines the color scheme of the tracker steps and the icon on the active step.                                                                                        |
 | steps       | stepsType         |          | Displays a step with a rounded icon on the left for each object received.                                                                                             |
@@ -19,6 +21,6 @@ This component displays a vertical stepper intended to track progress
 
 | Type         | Shape                                                                          |
 | ------------ | ------------------------------------------------------------------------------ |
-| stepsType    | `{ id: number, title: string, subtitle: string, subSteps: [...subStepsType] }` |
+| stepsType    | `{ id: number, title: string, subSteps: [...subStepsType] }`                   |
 | subStepsType | `{ id: number, title: string, subtitle: string }`                              |
 | detailsType  | `{ enabled: bool, title: string }`                                             |

package/lib/components/UTTracker/components/Connector/index.js

@@ -5,11 +5,13 @@ import merge from 'lodash/merge';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { IS_IOS } from '../../../../utils/platformUtils/constants';
+import { useTheme } from '../../../../theming';
 
-import ownStyles from './styles';
+import { getConnectorStyles } from './styles';
 
 const Connector = ({ currentPosition = 0, first, nextPosition = 0, style }) => {
-  const themedStyles = merge({}, ownStyles, style);
+  const theme = useTheme();
+  const themedStyles = merge({}, getConnectorStyles(theme), style);
 
   return (
     <View

package/lib/components/UTTracker/components/Connector/styles.js

@@ -2,28 +2,29 @@ import { StyleSheet } from 'react-native';
 
 import { OVAL_SIZE } from '../../styles';
 
-export default StyleSheet.create({
-  connector: {
-    borderColor: 'gray',
-    borderLeftWidth: 2,
-    borderStyle: 'dashed',
-    flexGrow: 1
-  },
-  connectorIOS: {
-    borderWidth: 2,
-    margin: -3,
-    marginLeft: 0,
-    flex: 1
-  },
-  wrapper: (currentPosition, first, nextPosition) => ({
-    height: nextPosition - currentPosition - OVAL_SIZE - (first ? 5 : 0) - 10,
-    paddingLeft: OVAL_SIZE / 2 - 1,
-    position: 'absolute',
-    top: currentPosition + OVAL_SIZE + (first ? 5 : 0) + 5,
-    width: 2
-  }),
-  wrapperIOS: {
-    overflow: 'hidden',
-    width: OVAL_SIZE
-  }
-});
+export const getConnectorStyles = theme =>
+  StyleSheet.create({
+    connector: {
+      borderColor: theme.Palette.gray['04'],
+      borderLeftWidth: 2,
+      borderStyle: 'dashed',
+      flexGrow: 1
+    },
+    connectorIOS: {
+      borderWidth: 2,
+      margin: -3,
+      marginLeft: 0,
+      flex: 1
+    },
+    wrapper: (currentPosition, first, nextPosition) => ({
+      height: nextPosition - currentPosition - OVAL_SIZE - (first ? 5 : 0) - 10,
+      paddingLeft: OVAL_SIZE / 2 - 1,
+      position: 'absolute',
+      top: currentPosition + OVAL_SIZE + (first ? 5 : 0) + 5,
+      width: 2
+    }),
+    wrapperIOS: {
+      overflow: 'hidden',
+      width: OVAL_SIZE
+    }
+  });

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

@@ -3,12 +3,13 @@ import { View } from 'react-native';
 import { bool, func, number } from 'prop-types';
 import merge from 'lodash/merge';
 
-import Label from '../../../Label';
 import { StepPropTypes, VariantPropTypes } from '../../propTypes';
-import Icon from '../../../Icon';
+import UTIcon from '../../../UTIcon';
+import UTLabel from '../../../UTLabel';
 import { ERROR } from '../../constants';
+import { useTheme } from '../../../../theming';
 
-import ownStyles, { ownVariantStyles } from './styles';
+import { getVariantStyles, getStepStyles } from './styles';
 
 const ERROR_ICON_SIZE = 16;
 
@@ -16,7 +17,9 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
   const stepCompleted = isCompleted(step.id);
   const stepActive = isActive(step.id);
 
-  const themedStyles = merge({}, ownStyles, ownVariantStyles[variant], style[variant]);
+  const theme = useTheme();
+  const ownStyles = getStepStyles(theme);
+  const themedStyles = merge({}, ownStyles, getVariantStyles(theme)[variant], style[variant]);
   const [stepIconOffset, setStepIconOffset] = useState(0);
   const [currentPosition, setCurrentPosition] = useState(0);
 
@@ -54,41 +57,21 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
           ]}
         >
           {stepActive && variant === ERROR && (
-            <Icon
-              color="white"
-              height={ERROR_ICON_SIZE}
-              name="close"
-              size={ERROR_ICON_SIZE}
-              style={themedStyles.icon}
-              type="antdesign"
-              width={ERROR_ICON_SIZE}
-            />
+            <UTIcon name="IconX" colorTheme="negative" size={ERROR_ICON_SIZE} style={themedStyles.icon} />
           )}
         </View>
       </View>
       <View style={themedStyles.textContainer}>
         {step.title && (
-          <Label
-            color={
-              stepCompleted
-                ? themedStyles.completedTitleColor
-                : stepActive
-                  ? themedStyles.activeTitleColor
-                  : themedStyles.titleColor
+          <UTLabel
+            variant="small"
+            weight="medium"
+            colorTheme={
+              stepCompleted ? 'gray' : stepActive ? (variant === ERROR ? 'error' : 'accent') : 'dark'
             }
           >
             {step.title}
-          </Label>
-        )}
-        {step.subtitle && (
-          <Label color={themedStyles.subtitleColor} style={themedStyles.subtitle}>
-            {step.subtitle}
-          </Label>
-        )}
-        {step.description && (
-          <Label color={themedStyles.descriptionColor} style={themedStyles.description}>
-            {step.description}
-          </Label>
+          </UTLabel>
         )}
       </View>
     </View>

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

@@ -3,84 +3,74 @@ import { StyleSheet } from 'react-native';
 import { OVAL_SIZE } from '../../styles';
 import { ERROR, STANDARD } from '../../constants';
 
-export const ownVariantStyles = {
+export const getVariantStyles = theme => ({
   [ERROR]: {
     activeContainer: {
-      backgroundColor: 'red',
-      borderColor: 'red'
+      backgroundColor: theme.Palette.error['04'],
+      borderColor: theme.Palette.error['04']
     },
     activeInnerContainer: {
-      backgroundColor: 'red'
+      backgroundColor: theme.Palette.error['04']
     },
-    activeTitleColor: 'red',
     completedContainer: {
-      borderColor: 'red'
+      borderColor: theme.Palette.error['04']
     },
     completedInnerContainer: {
-      backgroundColor: 'red'
+      backgroundColor: theme.Palette.error['04']
     },
     completedOuterContainer: {
       opacity: 0.5
-    },
-    completedTitleColor: 'red'
+    }
   },
   [STANDARD]: {
     activeContainer: {
-      borderColor: 'blue'
+      borderColor: theme.Palette.accent['04']
     },
     activeInnerContainer: {
-      backgroundColor: 'blue'
+      backgroundColor: theme.Palette.accent['04']
     },
-    activeTitleColor: 'blue',
     completedContainer: {
-      borderColor: 'blue'
+      borderColor: theme.Palette.accent['04']
     },
     completedInnerContainer: {
-      backgroundColor: 'blue'
+      backgroundColor: theme.Palette.accent['04']
     },
     completedOuterContainer: {
       opacity: 0.5
-    },
-    completedTitleColor: 'blue'
-  }
-};
-
-export default StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    backgroundColor: 'white',
-    borderColor: 'gray',
-    borderRadius: OVAL_SIZE / 2,
-    borderWidth: OVAL_SIZE / 10,
-    height: OVAL_SIZE,
-    justifyContent: 'center',
-    marginRight: 16,
-    width: OVAL_SIZE
-  },
-  description: {
-    marginTop: 4
-  },
-  descriptionColor: 'gray',
-  icon: {
-    position: 'absolute',
-    right: -3,
-    top: -3
-  },
-  innerContainer: {
-    backgroundColor: 'white',
-    borderRadius: OVAL_SIZE / 4,
-    height: OVAL_SIZE / 2,
-    width: OVAL_SIZE / 2
-  },
-  outerContainer: {
-    alignItems: 'center',
-    flexDirection: 'row'
-  },
-  stepMargin: { marginTop: 24 },
-  subtitle: {
-    marginTop: 4
-  },
-  textContainer: {
-    width: '90%'
+    }
   }
 });
+
+export const getStepStyles = theme =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      borderColor: theme.Palette.gray['04'],
+      borderRadius: OVAL_SIZE / 2,
+      borderWidth: OVAL_SIZE / 10,
+      height: OVAL_SIZE,
+      justifyContent: 'center',
+      marginRight: 16,
+      width: OVAL_SIZE
+    },
+    icon: {
+      position: 'absolute',
+      right: -3,
+      top: -3
+    },
+    innerContainer: {
+      backgroundColor: 'transparent',
+      borderRadius: OVAL_SIZE / 4,
+      height: OVAL_SIZE / 2,
+      width: OVAL_SIZE / 2
+    },
+    outerContainer: {
+      alignItems: 'center',
+      flexDirection: 'row'
+    },
+    stepMargin: { marginTop: 24 },
+    textContainer: {
+      width: '90%'
+    }
+  });

package/lib/components/UTTracker/components/SubStep/index.js

@@ -4,7 +4,7 @@ import { string } from 'prop-types';
 import merge from 'lodash/merge';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import Label from '../../../Label';
+import UTLabel from '../../../UTLabel';
 
 import ownStyles from './styles';
 
@@ -13,8 +13,12 @@ const SubStep = ({ style, subtitle, title }) => {
 
   return (
     <View style={themedStyles.container}>
-      <Label color={themedStyles.titleColor}>{title}</Label>
-      <Label color={themedStyles.subtitleColor}>{subtitle}</Label>
+      <UTLabel colorTheme="gray" variant="small">
+        {title}
+      </UTLabel>
+      <UTLabel colorTheme="gray" shade="01" variant="small">
+        {subtitle}
+      </UTLabel>
     </View>
   );
 };

package/lib/components/UTTracker/components/SubStep/styles.js

@@ -4,7 +4,5 @@ export default StyleSheet.create({
   container: {
     marginLeft: 36,
     marginTop: 8
-  },
-  subtitleColor: 'lightgray',
-  titleColor: 'gray'
+  }
 });

package/lib/components/UTTracker/index.js

@@ -4,21 +4,33 @@ import merge from 'lodash/merge';
 import { number, object, string } from 'prop-types';
 import Collapsible from 'react-native-collapsible';
 
-import Icon from '../Icon';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
 import Touchable from '../Touchable';
-import Label from '../Label';
 import { useTheme } from '../../theming';
+import Surface from '../Surface';
 
-import ownStyles, { DETAILS_ICON_CARD_SIZE, DETAILS_ICON_FLAT_SIZE, ownModeStyles } from './styles';
+import { getUTTrackerStyles, getModeStyles } from './styles';
 import Step from './components/Step';
 import Connector from './components/Connector';
 import SubStep from './components/SubStep';
 import { DetailsTabPropTypes, ModePropTypes, StepsPropTypes, VariantPropTypes } from './propTypes';
-import { CARD, FLAT, STANDARD } from './constants';
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
 
-const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title, variant = STANDARD }) => {
+const UTTracker = ({
+  currentStep,
+  detailsTab,
+  description,
+  mode = CARD,
+  steps,
+  subtitle,
+  style,
+  title,
+  variant = STANDARD
+}) => {
   const theme = useTheme();
-  const themedStyles = merge({}, ownStyles, ownModeStyles[mode], theme.UTTracker, style);
+  const ownStyles = getUTTrackerStyles(theme);
+  const themedStyles = merge({}, ownStyles, getModeStyles(theme)[mode], theme.UTTracker, style);
 
   const [isCollapsed, setIsCollapsed] = useState(true);
   const [stepsPositions, setStepsPositions] = useState([]);
@@ -26,8 +38,10 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
   const isCompleted = stepNumber => stepNumber < currentStep;
   const isActive = stepNumber => stepNumber === currentStep;
 
+  const WrapperComponent = mode === CARD ? Surface : View;
+
   return (
-    <View style={themedStyles.outerContainer}>
+    <WrapperComponent style={themedStyles.outerContainer}>
       <View style={[themedStyles.container, !detailsTab && ownStyles.roundedBorders]}>
         {title && (
           <Touchable
@@ -36,24 +50,31 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
             style={themedStyles.titleTouchable}
           >
             <View style={themedStyles.titleContainer}>
-              <Label color={themedStyles.titleColor} style={themedStyles.title}>
+              <UTLabel variant="subtitle1" weight="medium">
                 {title}
-              </Label>
+              </UTLabel>
               {detailsTab?.enabled && mode === FLAT && (
-                <Icon
-                  color={themedStyles.detailsIconColor || 'black'}
-                  height={DETAILS_ICON_FLAT_SIZE}
-                  name={isCollapsed ? 'chevron-down' : 'chevron-up'}
-                  size={DETAILS_ICON_FLAT_SIZE}
-                  type="feather"
-                  width={DETAILS_ICON_FLAT_SIZE}
-                />
+                <UTIcon name={isCollapsed ? 'IconChevronDown' : 'IconChevronUp'} colorTheme="neutral" />
               )}
             </View>
           </Touchable>
         )}
+        {(subtitle || description) && (
+          <View style={[themedStyles.subtitleAndDescription, variant === ERROR && themedStyles.errorBanner]}>
+            {subtitle && (
+              <UTLabel variant="small" weight="medium" style={themedStyles.subtitle}>
+                {subtitle}
+              </UTLabel>
+            )}
+            {description && (
+              <UTLabel colorTheme="gray" variant="small" style={themedStyles.description}>
+                {description}
+              </UTLabel>
+            )}
+          </View>
+        )}
         {steps && (
-          <View>
+          <View style={(title || subtitle || description) && themedStyles.stepsContainer}>
             {steps.map((step, index) => (
               <Fragment key={step.id}>
                 <Step
@@ -89,27 +110,22 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
       {detailsTab?.enabled && mode === CARD && (
         <Touchable onPress={() => setIsCollapsed(!isCollapsed)} style={themedStyles.detailsTab}>
           <Fragment>
-            <Label>{detailsTab.title}</Label>
-            <Icon
-              color={themedStyles.detailsIconColor || 'black'}
-              height={DETAILS_ICON_CARD_SIZE}
-              name={isCollapsed ? 'chevron-down' : 'chevron-up'}
-              size={DETAILS_ICON_CARD_SIZE}
-              type="feather"
-              width={DETAILS_ICON_CARD_SIZE}
-            />
+            <UTLabel weight="medium">{detailsTab.title}</UTLabel>
+            <UTIcon name={isCollapsed ? 'IconChevronDown' : 'IconChevronUp'} colorTheme="neutral" />
           </Fragment>
         </Touchable>
       )}
-    </View>
+    </WrapperComponent>
   );
 };
 
 UTTracker.propTypes = {
   currentStep: number,
   detailsTab: DetailsTabPropTypes,
+  description: string,
   mode: ModePropTypes,
   steps: StepsPropTypes,
+  subtitle: string,
   // eslint-disable-next-line react/forbid-prop-types
   style: object,
   title: string,

package/lib/components/UTTracker/styles.js

@@ -3,55 +3,62 @@ import { StyleSheet } from 'react-native';
 import { CARD, FLAT } from './constants';
 
 export const OVAL_SIZE = 20;
-export const DETAILS_ICON_CARD_SIZE = 20;
-export const DETAILS_ICON_FLAT_SIZE = 24;
 
-export const ownModeStyles = {
+export const getModeStyles = theme => ({
   [CARD]: {
-    container: {
-      backgroundColor: 'white',
-      elevation: 2,
-      shadowColor: 'black',
-      shadowOffset: {
-        height: 3,
-        width: 0
-      },
-      shadowOpacity: 0.1
+    outerContainer: {
+      backgroundColor: theme.Palette.light['01']
     }
   },
   [FLAT]: {
-    container: {
+    outerContainer: {
       backgroundColor: 'transparent'
     }
   }
-};
-
-export default StyleSheet.create({
-  container: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    padding: 16
-  },
-  detailsTab: {
-    backgroundColor: 'white',
-    borderBottomLeftRadius: 8,
-    borderBottomRightRadius: 8,
-    borderColor: 'lightgray',
-    borderTopWidth: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12
-  },
-  roundedBorders: {
-    borderBottomLeftRadius: 8,
-    borderBottomRightRadius: 8
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  titleTouchable: {
-    marginBottom: 24
-  }
 });
+
+export const getUTTrackerStyles = theme =>
+  StyleSheet.create({
+    container: {
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      padding: 16
+    },
+    detailsTab: {
+      backgroundColor: theme.Palette.light['01'],
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8,
+      borderColor: theme.Palette.light['04'],
+      borderTopWidth: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingVertical: 12
+    },
+    errorBanner: {
+      backgroundColor: theme.Palette.error['01'],
+      borderRadius: 4,
+      padding: 8
+    },
+    outerContainer: {
+      borderRadius: 8
+    },
+    roundedBorders: {
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8
+    },
+    stepsContainer: {
+      marginTop: 24
+    },
+    subtitle: {
+      marginBottom: 4
+    },
+    subtitleAndDescription: {},
+    titleContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    },
+    titleTouchable: {
+      marginBottom: 8
+    }
+  });

package/lib/constants/Palette.js

@@ -0,0 +1,20 @@
+export const COLOR_SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+
+export const COLOR_THEMES = {
+  accent: 'accent',
+  dark: 'dark',
+  error: 'error',
+  gray: 'gray',
+  information: 'information',
+  light: 'light',
+  negative: 'negative',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning'
+};

package/lib/utils/styleUtils/index.js

@@ -1,8 +1,17 @@
 import isArray from 'lodash/isArray';
 import mergeWith from 'lodash/mergeWith';
 
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+
 export const SHADOW_OPACITY = 0.1;
 
+export const getDefaultColorShade = colorTheme =>
+  colorTheme === COLOR_THEMES.gray
+    ? COLOR_SHADES.shade04
+    : colorTheme === COLOR_THEMES.light
+      ? COLOR_SHADES.shade01
+      : COLOR_SHADES.shade05;
+
 const shadowLevels = {
   1: {
     elevation: 6,

package/package.json

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