@momo-kits/step 0.89.5 → 0.92.1-tracking.2

package/StepsHorizontal.tsx

@@ -2,7 +2,7 @@ import React, {FC} from 'react';
 import {View} from 'react-native';
 import {Step, StepsProps} from './types';
 import StepIcon from './StepIcon';
-import {Spacing, Text} from '@momo-kits/foundation';
+import {Spacing, Text, getAccessibilityID} from '@momo-kits/foundation';
 import {getStepColor, getStepTypo} from './utils';
 import styles from './styles';
 
@@ -10,9 +10,11 @@ const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
   const renderStepItem = (i: Step, ii: number) => {
     const {title, description, error, time} = steps[ii];
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
+    const {status} = getStepColor(activeIndex, ii, error, steps.length)
+      const accessibilityID = getAccessibilityID(`ic_step_${ii}_${status}`)
 
     return (
-      <View key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
+      <View {...accessibilityID} key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
         {!!time && (
           <Text
             style={styles.textCenter}
@@ -85,6 +87,7 @@ const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
   return (
     <View style={{flexDirection: 'row'}}>
       {steps.map((i, ii) => {
+
         return renderStepItem(i, ii);
       })}
     </View>

package/StepsVertical.tsx

@@ -2,17 +2,20 @@ import React, {FC, useContext} from 'react';
 import {View} from 'react-native';
 import {Step, StepsProps} from './types';
 import {getStepColor, getStepTypo} from './utils';
-import {ApplicationContext, Spacing, Text} from '@momo-kits/foundation';
+import {ApplicationContext, getAccessibilityID, Spacing, Text} from '@momo-kits/foundation';
 import styles from './styles';
 import StepIcon from './StepIcon';
 
 const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
   const {theme} = useContext(ApplicationContext);
+
   const renderStepItem = (i: Step, ii: number) => {
     const {error, description, title, time} = steps[ii];
 
     const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
     let typoStyle = getStepTypo(activeIndex, ii, error, size);
+      const {status} = getStepColor(activeIndex, ii, error, steps.length)
+      const accessibilityID = getAccessibilityID(`ic_step_${ii}_${status}`)
 
     const {backgroundColor, borderColor} = stepStyle;
     const lineColor =
@@ -21,6 +24,7 @@ const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
         : theme.colors.background.default;
     return (
       <View
+          {...accessibilityID}
         key={`Step ${ii}`}
         style={{
           flexDirection: 'row',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.89.5",
+    "version": "0.92.1-tracking.2",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

package/utils.ts

@@ -122,5 +122,5 @@ export const getStepColor = (
     }
   }
 
-  return {backgroundColor, borderColor, lineColorLeft, lineColorRight};
+  return {backgroundColor, borderColor, lineColorLeft, lineColorRight, status};
 };