dhre-ui-kit 0.0.83 → 0.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.83",
+  "version": "0.0.86",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/assets/images/checkWhite.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 4.5L6.5 11.5L3 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/index.ts

@@ -10,6 +10,7 @@ import ArrowLeft from './images/arrowLeft.svg';
 import BellSimple from './images/bellSimple.svg';
 import UploadFile from './images/uploadFileIcon.svg';
 import CaretRight from './images/caretRight.svg';
+import CheckWhite from './images/checkWhite.svg';
 
 export {
   CalenderDots,
@@ -24,4 +25,5 @@ export {
   BellSimple,
   UploadFile,
   CaretRight,
+  CheckWhite,
 };

package/src/components/stepper/index.tsx

@@ -1,11 +1,12 @@
 import {View} from 'react-native';
 import React from 'react';
-import {CircleTick} from '../../assets';
+import {CheckWhite} from '../../assets';
 import {styles} from './styles';
 import {IData, IProps, Status} from './stepper.interface';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
 import {FontStyle} from '../../utils/appEnum';
 import CustomTypography from '../customTypography';
+import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 const Stepper = ({
   containerStyle,
@@ -13,38 +14,46 @@ const Stepper = ({
   showStatus = false,
   data,
 }: IProps) => {
+  const {theme} = useTheme();
+
   const renderCircleStyle = (status?: string) => {
     if (status === Status.Active) {
-      return styles.activeStepCircle;
+      return {...styles.activeStepCircle, borderColor: theme.CONTENT_PRIMARY};
     } else if (status === Status.Inactive) {
-      return styles.inactiveStepCircle;
+      return {
+        ...styles.inactiveStepCircle,
+        borderColor: theme.CONTENT_SECONDRY,
+      };
     } else if (status === Status.Completed) {
-      return styles.completeStepCircle;
+      return {...styles.completeStepCircle, backgroundColor: theme.SUCCESS};
     } else {
-      return styles.stepCountCircle;
+      return {...styles.stepCountCircle, borderColor: theme.BORDER_PRIMARY};
     }
   };
   const renderLableStyle = (status?: string) => {
     if (status === Status.Active) {
-      return styles.activeStepLabel;
+      return {...styles.activeStepLabel, color: theme.CONTENT_PRIMARY};
     } else if (status === Status.Inactive) {
-      return styles.inactiveStepLabel;
+      return {...styles.inactiveStepLabel, color: theme.CONTENT_SECONDRY};
     } else if (status === Status.Completed) {
-      return styles.completeStepLabel;
+      return {...styles.completeStepLabel, color: theme.CONTENT_PRIMARY};
     } else {
-      return styles.countStepLabel;
+      return {...styles.countStepLabel, color: theme.CONTENT_PRIMARY};
     }
   };
 
   const renderDividerStyle = (status?: string) => {
     if (status === Status.Active) {
-      return styles.activeStepDivider;
+      return {borderColor: theme.BORDER_PRIMARY};
     } else if (status === Status.Inactive) {
-      return styles.inactiveStepDivider;
+      return {borderColor: theme.BORDER_PRIMARY};
     } else if (status === Status.Completed) {
-      return styles.completeStepDivider;
+      return {
+        ...styles.completeStepDivider,
+        borderColor: theme.CONTENT_PRIMARY,
+      };
     } else {
-      return styles.countStepDivider;
+      return {borderColor: theme.CONTENT_SECONDRY};
     }
   };
 
@@ -67,12 +76,12 @@ const Stepper = ({
                     text={item?.step}
                     variant={FontStyle.L2_REGULAR}
                     style={{
-                      color: DHRE_COLORS_TEXT.DH_WHITE,
+                      color: theme.CONTENT_PRIMARY,
                     }}
                   />
                 )}
                 {showStatus && item?.status === Status.Completed && (
-                  <CircleTick />
+                  <CheckWhite />
                 )}
               </View>
               {index != data?.length - 1 && (
@@ -93,4 +102,4 @@ const Stepper = ({
   );
 };
 
-export default Stepper;
+export default withThemeProvider(Stepper);

package/src/components/stepper/styles.ts

@@ -1,5 +1,4 @@
 import {StyleSheet} from 'react-native';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
 
 const styles = StyleSheet.create({
   stepperContainer: {
@@ -23,46 +22,33 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     alignItems: 'center',
     borderWidth: 2,
-    borderColor: '#000000',
     justifyContent: 'center',
   },
   activeStepLabel: {
-    color: DHRE_COLORS_TEXT.DH_BLACK,
     marginTop: 11,
   },
-  activeStepDivider: {
-    borderColor: '#686868',
-  },
   inactiveStepCircle: {
     height: 24,
     width: 24,
     borderRadius: 12,
     alignItems: 'center',
     borderWidth: 2,
-    borderColor: '#A7A7A7',
     justifyContent: 'center',
   },
   inactiveStepLabel: {
-    color: '#686868',
     marginTop: 11,
   },
-  inactiveStepDivider: {
-    borderColor: '#686868',
-  },
   completeStepCircle: {
     height: 24,
     width: 24,
-    backgroundColor: '#00B578',
     borderRadius: 12,
     alignItems: 'center',
     justifyContent: 'center',
   },
   completeStepLabel: {
-    color: DHRE_COLORS_TEXT.DH_BLACK,
     marginTop: 11,
   },
   completeStepDivider: {
-    borderColor: DHRE_COLORS_TEXT.DH_BLACK,
     borderStyle: 'solid',
   },
   stepCountCircle: {
@@ -71,16 +57,12 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     alignItems: 'center',
     borderWidth: 1,
-    borderColor: '#A7A7A7',
     justifyContent: 'center',
   },
   countStepLabel: {
-    color: DHRE_COLORS_TEXT.DH_WHITE,
+   
     marginTop: 11,
   },
-  countStepDivider: {
-    borderColor: '#686868',
-  },
   separator: {
     borderWidth: 1,
     borderStyle: 'dashed',