@momo-kits/step 0.92.1-tracking.8 → 0.92.3-tracking.3

package/StepIcon.tsx

@@ -1,8 +1,14 @@
 import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import {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,
+  Text,
+  Typography,
+} from '@momo-kits/foundation';
 
 const StepIcon: FC<StepIconProps> = ({
   size = 'large',
@@ -10,8 +16,9 @@ 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';
@@ -23,7 +30,22 @@ const StepIcon: FC<StepIconProps> = ({
   return (
     <View
       style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
-      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
+      {useNumber ? (
+        <Text
+          style={{
+            position: 'absolute',
+          }}
+          typography={'header_xs_semibold'}
+          color={Colors.black_01}>
+          {index + 1}
+        </Text>
+      ) : (
+        <Icon
+          size={checkIconSize}
+          color={Colors.black_01}
+          source={iconSource}
+        />
+      )}
     </View>
   );
 };

package/StepsHorizontal.tsx

@@ -6,15 +6,23 @@ 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}`)
+    const {status} = getStepColor(activeIndex, ii, error, steps.length);
+    const accessibilityID = getAccessibilityID?.(`ic_step_${ii}_${status}`);
 
     return (
-      <View {...accessibilityID} key={`Step ${ii}`} style={{flex: 1, alignItems: 'center'}}>
+      <View
+        {...accessibilityID}
+        key={`Step ${ii}`}
+        style={{flex: 1, alignItems: 'center'}}>
         {!!time && (
           <Text
             style={styles.textCenter}
@@ -70,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={[
@@ -87,7 +97,6 @@ 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,11 +2,21 @@ import React, {FC, useContext} from 'react';
 import {View} from 'react-native';
 import {Step, StepsProps} from './types';
 import {getStepColor, getStepTypo} from './utils';
-import {ApplicationContext, getAccessibilityID, 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) => {
@@ -14,8 +24,8 @@ const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
 
     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 {status} = getStepColor(activeIndex, ii, error, steps.length);
+    const accessibilityID = getAccessibilityID?.(`ic_step_${ii}_${status}`);
 
     const {backgroundColor, borderColor} = stepStyle;
     const lineColor =
@@ -24,7 +34,7 @@ const StepsVertical: FC<StepsProps> = ({steps, activeIndex, size}) => {
         : theme.colors.background.default;
     return (
       <View
-          {...accessibilityID}
+        {...accessibilityID}
         key={`Step ${ii}`}
         style={{
           flexDirection: 'row',
@@ -41,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,6 +1,6 @@
 {
     "name": "@momo-kits/step",
-    "version": "0.92.1-tracking.8",
+    "version": "0.92.3-tracking.3",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},

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