@momo-kits/step 0.89.6 → 0.92.1-beta.3

package/StepIcon.tsx

@@ -1,8 +1,8 @@
 import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import {Text, TextStyle, View} from 'react-native';
 import {StepIconProps} from './types';
 import styles from './styles';
-import {ApplicationContext, Icon, Colors} from '@momo-kits/foundation';
+import {ApplicationContext, Colors, Icon} from '@momo-kits/foundation';
 
 const StepIcon: FC<StepIconProps> = ({
   size = 'large',
@@ -10,20 +10,43 @@ const StepIcon: FC<StepIconProps> = ({
   borderColor,
   error,
   style,
+  useNumber,
+  index,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let iconStyle = styles.stepIcon;
   let checkIconSize = 16;
   let iconSource = error ? 'navigation_close' : 'notifications_check';
+  let typography: TextStyle = {
+    ...styles.largeText,
+    fontFamily: `${theme.font}-Semibold`,
+  };
 
   if (size === 'small') {
     iconStyle = styles.stepIconSmall;
     checkIconSize = 12;
+    typography = {...styles.smallText, fontFamily: `${theme.font}-Medium`};
   }
   return (
     <View
       style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
-      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
+      {useNumber ? (
+        <Text
+          style={[
+            typography,
+            {
+              color: Colors.black_01,
+            },
+          ]}>
+          {index + 1}
+        </Text>
+      ) : (
+        <Icon
+          size={checkIconSize}
+          color={Colors.black_01}
+          source={iconSource}
+        />
+      )}
     </View>
   );
 };

package/StepsHorizontal.tsx

@@ -2,17 +2,27 @@ 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';
 
-const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
+const StepsHorizontal: FC<StepsProps> = ({
+  steps,
+  size,
+  activeIndex,
+  useNumber = false,
+}) => {
   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}
@@ -68,6 +78,8 @@ const StepsHorizontal: FC<StepsProps> = ({steps, size, activeIndex}) => {
           backgroundColor={backgroundColor}
           borderColor={borderColor}
           style={{marginHorizontal: Spacing.XS, marginVertical: Spacing.XS}}
+          index={ii}
+          useNumber={useNumber}
         />
         <View
           style={[

package/StepsVertical.tsx

@@ -2,17 +2,30 @@ 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 StepsVertical: FC<StepsProps> = ({
+  steps,
+  activeIndex,
+  size,
+  useNumber = false,
+}) => {
   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 +34,7 @@ const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
         : theme.colors.background.default;
     return (
       <View
+        {...accessibilityID}
         key={`Step ${ii}`}
         style={{
           flexDirection: 'row',
@@ -37,6 +51,8 @@ const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
             error={error}
             backgroundColor={backgroundColor}
             borderColor={borderColor}
+            useNumber={useNumber}
+            index={ii}
           />
           {ii !== steps.length - 1 && (
             <View

package/package.json

@@ -1,17 +1,17 @@
 {
-    "name": "@momo-kits/step",
-    "version": "0.89.6",
-    "private": false,
-    "main": "index.tsx",
-    "dependencies": {},
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "prop-types": "^15.7.2",
-        "react": "16.9.0",
-        "react-native": ">=0.55"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
-    "license": "MoMo"
+  "name": "@momo-kits/step",
+  "version": "0.92.1-beta.3",
+  "private": false,
+  "main": "index.tsx",
+  "dependencies": {},
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "prop-types": "^15.7.2",
+    "react": "16.9.0",
+    "react-native": ">=0.55"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11"
+  },
+  "license": "MoMo"
 }

package/styles.ts

@@ -1,18 +1,18 @@
 import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
 
 export default StyleSheet.create({
   stepIcon: {
-    width: 24,
-    height: 24,
+    width: scaleSize(24),
+    height: scaleSize(24),
     borderWidth: 2,
-    borderRadius: Radius.M,
+    borderRadius: scaleSize(Radius.L),
   },
   stepIconSmall: {
-    width: 16,
-    height: 16,
+    width: scaleSize(16),
+    height: scaleSize(16),
     borderWidth: 2,
-    borderRadius: Radius.S,
+    borderRadius: scaleSize(Radius.M),
   },
   lineHorizontal: {
     height: 2,
@@ -45,4 +45,12 @@ export default StyleSheet.create({
   textCenter: {
     textAlign: 'center',
   },
+  largeText: {
+    fontSize: scaleSize(12),
+    lineHeight: scaleSize(16),
+  },
+  smallText: {
+    fontSize: scaleSize(8),
+    lineHeight: scaleSize(12),
+  },
 });

package/types.ts

@@ -28,6 +28,8 @@ export type StepsProps = {
    * starting from 0 for the first step.
    */
   activeIndex: number;
+
+  useNumber?: boolean;
 };
 
 /**
@@ -93,4 +95,8 @@ export type StepIconProps = {
    * Can be used to adjust the visual presentation or layout.
    */
   style?: ViewStyle;
+
+  useNumber?: boolean;
+
+  index: number;
 };

package/utils.ts

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