@momo-kits/step 0.103.2-rc.8 → 0.109.1-beta.2

package/StepsHorizontal.tsx

@@ -4,7 +4,7 @@ import {FlexAlignType, TouchableOpacity, View} from 'react-native';
 import StepIcon from './StepIcon';
 import styles from './styles';
 import {Step, StepsProps} from './types';
-import {getStepColor, getStepTypo} from './utils';
+import { getStepColor, getStepTypo} from './utils';
 
 type TextAlign = 'left' | 'right' | 'center';
 
@@ -18,9 +18,9 @@ const StepsHorizontal: FC<StepsProps> = ({
   onPress,
   disabled,
 }) => {
-  const renderStepItem = (i: Step, ii: number) => {
-    const {title, description, error, time} = steps[ii];
-    let typoStyle = getStepTypo(activeIndex, ii, error, size);
+  const renderStepItem = (item: Step, index: number) => {
+    const {title, description, error, time} = item;
+    let typoStyle = getStepTypo(activeIndex, index, error, size, 'horizontal');
     const {theme} = useContext(ApplicationContext);
     let alignItems: FlexAlignType = 'center';
     let textAlign: TextAlign = 'center';
@@ -32,28 +32,28 @@ const StepsHorizontal: FC<StepsProps> = ({
       alignItems = 'flex-end';
       textAlign = 'right';
     } else if (align === 'stretch') {
-      if (ii === 0) {
+      if (index === 0) {
         alignItems = 'flex-start';
         textAlign = 'left';
-      } else if (ii === steps.length - 1) {
+      } else if (index === steps.length - 1) {
         textAlign = 'right';
         alignItems = 'flex-end';
       }
     }
 
     const haveMarginRight =
-      ii !== steps.length - 1 && align !== 'center' && align !== 'stretch';
+      index !== steps.length - 1 && align !== 'center' && align !== 'stretch';
 
     return (
       <TouchableOpacity
-        key={`Step ${ii}`}
+        key={`Step ${index}`}
         style={{
           flex: 1,
           alignItems,
           marginRight: haveMarginRight ? Spacing.XS : 0,
         }}
         disabled={disabled || !onPress}
-        onPress={onPress}>
+        onPress={() => onPress && onPress(item, index)}>
         {!!time && (
           <Text
             style={{textAlign}}
@@ -62,7 +62,7 @@ const StepsHorizontal: FC<StepsProps> = ({
             {time}
           </Text>
         )}
-        {renderStepIcon(i, ii, align)}
+        {renderStepIcon(item, index, align, disabled)}
         {!!title && (
           <Text
             style={[styles.title, {textAlign}]}
@@ -86,20 +86,21 @@ const StepsHorizontal: FC<StepsProps> = ({
   };
 
   const renderStepIcon = (
-    i: Step,
-    ii: number,
+    item: Step,
+    index: number,
     align: string = 'center',
-    disabled: boolean
+    disabled?: boolean
   ) => {
-    const {error} = steps[ii];
+    const {error} = item;
 
-    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length, disabled);
     const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
       stepStyle;
 
-    const lineLeftHide = (align === 'stretch' && ii === 0) || align === 'left';
+    const lineLeftHide =
+      (align === 'stretch' && index === 0) || align === 'left';
     const lineRightHide =
-      (align === 'stretch' && ii === steps.length - 1) || align === 'right';
+      (align === 'stretch' && index === steps.length - 1) || align === 'right';
 
     return (
       <View style={styles.rowStep}>
@@ -124,9 +125,9 @@ const StepsHorizontal: FC<StepsProps> = ({
             marginLeft: !lineLeftHide ? Spacing.XS : 0,
             marginVertical: Spacing.XS,
           }}
-          index={ii}
+          index={index}
           useNumber={useNumber}
-          isActive={activeIndex === ii}
+          isActive={activeIndex === index}
           customIcon={customIcon}
         />
         {!lineRightHide && (
@@ -146,8 +147,8 @@ const StepsHorizontal: FC<StepsProps> = ({
 
   return (
     <View style={{flexDirection: 'row'}}>
-      {steps.map((i, ii) => {
-        return renderStepItem(i, ii);
+      {steps.map((item, index) => {
+        return renderStepItem(item, index);
       })}
     </View>
   );

package/StepsVertical.tsx

@@ -1,6 +1,6 @@
-import {ApplicationContext, Spacing, Text} from '@momo-kits/foundation';
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
 import React, {FC, useContext} from 'react';
-import {View} from 'react-native';
+import {View, TouchableOpacity} from 'react-native';
 import StepIcon from './StepIcon';
 import styles from './styles';
 import {Step, StepsProps} from './types';
@@ -11,43 +11,63 @@ const StepsVertical: FC<StepsProps> = ({
   activeIndex,
   size,
   useNumber = false,
+  onPress,
+  disabled,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const renderStepItem = (i: Step, ii: number) => {
-    const {error, description, title, time} = steps[ii];
+  const renderStepItem = (item: Step, index: number) => {
+    const {error, description, title, time} = item;
 
-    const stepStyle = getStepColor(activeIndex, ii, error, steps.length);
-    let typoStyle = getStepTypo(activeIndex, ii, error, size);
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length);
+    const typoStyle = getStepTypo(activeIndex, index, error, size, 'vertical');
 
     const {backgroundColor, borderColor} = stepStyle;
     const lineColor =
-      activeIndex > ii
+      activeIndex > index
         ? theme.colors.primary + '33'
         : theme.colors.background.default;
+
+    /**
+     * build description
+     */
+    const buildDescription = () => {
+      if (typeof description === 'string') {
+        return (
+          <Text
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        );
+      }
+      return description;
+    };
+
     return (
-      <View
-        key={`Step ${ii}`}
+      <TouchableOpacity
+        key={`Step ${index}`}
         style={{
           flexDirection: 'row',
           marginBottom: Spacing.XS,
-        }}>
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}>
         <View
           style={{
             alignItems: 'center',
             marginRight: Spacing.M,
-            minHeight: 48,
           }}>
           <StepIcon
             size={size}
             error={error}
-            backgroundColor={backgroundColor}
-            borderColor={borderColor}
+            backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+            borderColor={disabled ? Colors.pink_10 : borderColor}
             useNumber={useNumber}
-            index={ii}
-            isActive={activeIndex === ii}
+            index={index}
+            isActive={activeIndex === index}
           />
-          {ii !== steps.length - 1 && (
+          {index !== steps.length - 1 && (
             <View
               style={[
                 styles.lineVertical,
@@ -58,38 +78,36 @@ const StepsVertical: FC<StepsProps> = ({
         </View>
         <View style={{flex: 1}}>
           <View
-            style={[
-              {
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-              },
-            ]}>
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}>
             <Text
               numberOfLines={2}
               style={{marginRight: Spacing.S, flex: 1}}
-              color={typoStyle.title.color}
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.title.color
+              }
               typography={typoStyle.title.typography}>
               {title}
             </Text>
             <Text
-              color={typoStyle.time.color}
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.time.color
+              }
               typography={typoStyle.time.typography}>
               {time}
             </Text>
           </View>
-          <Text
-            color={typoStyle.description.color}
-            typography={typoStyle.description.typography}>
-            {description}
-          </Text>
+          {buildDescription()}
         </View>
-      </View>
+      </TouchableOpacity>
     );
   };
   return (
     <View style={{width: '100%'}}>
-      {steps.map((i, ii) => {
-        return renderStepItem(i, ii);
+      {steps.map((item, index: number) => {
+        return renderStepItem(item, index);
       })}
     </View>
   );

package/dist/StepIcon.tsx

@@ -0,0 +1,75 @@
+import {Colors, Icon, Text} from '@momo-kits/foundation';
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import styles from './styles';
+import {StepIconProps} from './types';
+
+const StepIcon: FC<StepIconProps> = ({
+  size = 'large',
+  backgroundColor,
+  borderColor,
+  error,
+  style,
+  useNumber,
+  index,
+  isActive,
+  customIcon,
+}) => {
+  let iconStyle = styles.stepIcon;
+  let checkIconSize = 16;
+  let contentIconSize = 8;
+
+  if (size === 'small') {
+    iconStyle = styles.stepIconSmall;
+    checkIconSize = 12;
+    contentIconSize = 6;
+  }
+
+  let iconSource = error ? 'navigation_close' : 'notifications_check';
+
+  const renderIcon = () => {
+    // useNumber is true, render number
+    if (useNumber) {
+      return (
+        <Text
+          style={{position: 'absolute'}}
+          typography={'header_xs_semibold'}
+          color={Colors.black_01}>
+          {index + 1}
+        </Text>
+      );
+    }
+
+    if (isActive) {
+      // customIcon is true, render customIcon
+      if (customIcon) {
+        return (
+          <Icon
+            size={checkIconSize}
+            color={Colors.black_01}
+            source={customIcon}
+          />
+        );
+      }
+      // render default Icon
+      return (
+        <View
+          style={[styles.currIcon, {width: contentIconSize, aspectRatio: 1}]}
+        />
+      );
+    }
+
+    return (
+      <Icon size={checkIconSize} color={Colors.black_01} source={iconSource} />
+    );
+  };
+
+  return (
+    <View
+      style={[iconStyle, styles.center, {backgroundColor, borderColor}, style]}>
+      {renderIcon()}
+    </View>
+  );
+};
+
+export default StepIcon;

package/dist/StepsHorizontal.tsx

@@ -0,0 +1,157 @@
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
+import React, {FC, useContext} from 'react';
+import {FlexAlignType, TouchableOpacity, View} from 'react-native';
+import StepIcon from './StepIcon';
+import styles from './styles';
+import {Step, StepsProps} from './types';
+import { getStepColor, getStepTypo} from './utils';
+
+type TextAlign = 'left' | 'right' | 'center';
+
+const StepsHorizontal: FC<StepsProps> = ({
+  steps,
+  size,
+  activeIndex,
+  useNumber = false,
+  align = 'center',
+  customIcon,
+  onPress,
+  disabled,
+}) => {
+  const renderStepItem = (item: Step, index: number) => {
+    const {title, description, error, time} = item;
+    let typoStyle = getStepTypo(activeIndex, index, error, size, 'horizontal');
+    const {theme} = useContext(ApplicationContext);
+    let alignItems: FlexAlignType = 'center';
+    let textAlign: TextAlign = 'center';
+
+    if (align === 'left') {
+      alignItems = 'flex-start';
+      textAlign = 'left';
+    } else if (align === 'right') {
+      alignItems = 'flex-end';
+      textAlign = 'right';
+    } else if (align === 'stretch') {
+      if (index === 0) {
+        alignItems = 'flex-start';
+        textAlign = 'left';
+      } else if (index === steps.length - 1) {
+        textAlign = 'right';
+        alignItems = 'flex-end';
+      }
+    }
+
+    const haveMarginRight =
+      index !== steps.length - 1 && align !== 'center' && align !== 'stretch';
+
+    return (
+      <TouchableOpacity
+        key={`Step ${index}`}
+        style={{
+          flex: 1,
+          alignItems,
+          marginRight: haveMarginRight ? Spacing.XS : 0,
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}>
+        {!!time && (
+          <Text
+            style={{textAlign}}
+            color={disabled ? theme.colors.text.disable : typoStyle.time.color}
+            typography={typoStyle.time.typography}>
+            {time}
+          </Text>
+        )}
+        {renderStepIcon(item, index, align, disabled)}
+        {!!title && (
+          <Text
+            style={[styles.title, {textAlign}]}
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
+            typography={typoStyle.title.typography}>
+            {title}
+          </Text>
+        )}
+        {!!description && (
+          <Text
+            style={{textAlign}}
+            color={
+              disabled ? theme.colors.text.disable : typoStyle.description.color
+            }
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const renderStepIcon = (
+    item: Step,
+    index: number,
+    align: string = 'center',
+    disabled?: boolean
+  ) => {
+    const {error} = item;
+
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length, disabled);
+    const {backgroundColor, borderColor, lineColorRight, lineColorLeft} =
+      stepStyle;
+
+    const lineLeftHide =
+      (align === 'stretch' && index === 0) || align === 'left';
+    const lineRightHide =
+      (align === 'stretch' && index === steps.length - 1) || align === 'right';
+
+    return (
+      <View style={styles.rowStep}>
+        {!lineLeftHide && (
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusRight,
+              {
+                backgroundColor: lineColorLeft,
+              },
+            ]}
+          />
+        )}
+        <StepIcon
+          size={size}
+          error={error}
+          backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+          borderColor={disabled ? Colors.pink_10 : borderColor}
+          style={{
+            marginRight: !lineRightHide ? Spacing.XS : 0,
+            marginLeft: !lineLeftHide ? Spacing.XS : 0,
+            marginVertical: Spacing.XS,
+          }}
+          index={index}
+          useNumber={useNumber}
+          isActive={activeIndex === index}
+          customIcon={customIcon}
+        />
+        {!lineRightHide && (
+          <View
+            style={[
+              styles.lineHorizontal,
+              styles.radiusLeft,
+              {
+                backgroundColor: lineColorRight,
+              },
+            ]}
+          />
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View style={{flexDirection: 'row'}}>
+      {steps.map((item, index) => {
+        return renderStepItem(item, index);
+      })}
+    </View>
+  );
+};
+
+export default StepsHorizontal;

package/dist/StepsVertical.tsx

@@ -0,0 +1,116 @@
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
+import React, {FC, useContext} from 'react';
+import {View, TouchableOpacity} from 'react-native';
+import StepIcon from './StepIcon';
+import styles from './styles';
+import {Step, StepsProps} from './types';
+import {getStepColor, getStepTypo} from './utils';
+
+const StepsVertical: FC<StepsProps> = ({
+  steps,
+  activeIndex,
+  size,
+  useNumber = false,
+  onPress,
+  disabled,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const renderStepItem = (item: Step, index: number) => {
+    const {error, description, title, time} = item;
+
+    const stepStyle = getStepColor(activeIndex, index, error, steps.length);
+    const typoStyle = getStepTypo(activeIndex, index, error, size, 'vertical');
+
+    const {backgroundColor, borderColor} = stepStyle;
+    const lineColor =
+      activeIndex > index
+        ? theme.colors.primary + '33'
+        : theme.colors.background.default;
+
+    /**
+     * build description
+     */
+    const buildDescription = () => {
+      if (typeof description === 'string') {
+        return (
+          <Text
+            color={disabled ? theme.colors.text.disable : typoStyle.title.color}
+            typography={typoStyle.description.typography}>
+            {description}
+          </Text>
+        );
+      }
+      return description;
+    };
+
+    return (
+      <TouchableOpacity
+        key={`Step ${index}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: Spacing.XS,
+        }}
+        disabled={disabled || !onPress}
+        onPress={() => onPress && onPress(item, index)}>
+        <View
+          style={{
+            alignItems: 'center',
+            marginRight: Spacing.M,
+          }}>
+          <StepIcon
+            size={size}
+            error={error}
+            backgroundColor={disabled ? Colors.pink_08 : backgroundColor}
+            borderColor={disabled ? Colors.pink_10 : borderColor}
+            useNumber={useNumber}
+            index={index}
+            isActive={activeIndex === index}
+          />
+          {index !== steps.length - 1 && (
+            <View
+              style={[
+                styles.lineVertical,
+                {backgroundColor: lineColor, marginVertical: Spacing.XS},
+              ]}
+            />
+          )}
+        </View>
+        <View style={{flex: 1}}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}>
+            <Text
+              numberOfLines={2}
+              style={{marginRight: Spacing.S, flex: 1}}
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.title.color
+              }
+              typography={typoStyle.title.typography}>
+              {title}
+            </Text>
+            <Text
+              color={
+                disabled ? theme.colors.text.disable : typoStyle.time.color
+              }
+              typography={typoStyle.time.typography}>
+              {time}
+            </Text>
+          </View>
+          {buildDescription()}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View style={{width: '100%'}}>
+      {steps.map((item, index: number) => {
+        return renderStepItem(item, index);
+      })}
+    </View>
+  );
+};
+
+export default StepsVertical;

package/dist/index.tsx

@@ -0,0 +1,20 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {Step, StepsProps, Align} from './types';
+import StepsHorizontal from './StepsHorizontal';
+import StepsVertical from './StepsVertical';
+
+const Steps: FC<StepsProps> = ({horizontal = false, ...props}) => {
+  return (
+    <View>
+      {horizontal ? (
+        <StepsHorizontal {...props} />
+      ) : (
+        <StepsVertical {...props} />
+      )}
+    </View>
+  );
+};
+
+export {Steps};
+export type {StepsProps, Step, Align};

package/dist/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@momo-kits/step",
+  "version": "0.109.1-beta.1",
+  "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/dist/publish.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+# Prepare dist files
+rm -rf dist
+mkdir dist
+rsync -r --exclude=/dist ./* dist
+cd dist
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/step@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
+cd ..
+rm -rf dist

package/dist/styles.ts

@@ -0,0 +1,60 @@
+import {Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import {StyleSheet} from 'react-native';
+export default StyleSheet.create({
+  stepIcon: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: Radius.L,
+  },
+  stepIconSmall: {
+    width: scaleSize(16),
+    height: scaleSize(16),
+    borderWidth: 2,
+    borderRadius: scaleSize(Radius.M),
+  },
+  lineHorizontal: {
+    height: 2,
+    flex: 1,
+  },
+  lineVertical: {
+    width: 2,
+    minHeight: 20,
+    flex: 1,
+  },
+  radiusLeft: {
+    borderTopLeftRadius: Radius.S,
+    borderBottomLeftRadius: Radius.S,
+  },
+  radiusRight: {
+    borderTopRightRadius: Radius.S,
+    borderBottomRightRadius: Radius.S,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowStep: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    marginBottom: Spacing.XS,
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  largeText: {
+    fontSize: scaleSize(12),
+    lineHeight: scaleSize(16),
+  },
+  smallText: {
+    fontSize: scaleSize(8),
+    lineHeight: scaleSize(12),
+  },
+  currIcon: {
+    backgroundColor: 'white',
+    borderRadius: Radius.L,
+    aspectRatio: 1,
+  },
+});

package/dist/types.ts

@@ -0,0 +1,157 @@
+import {ViewStyle} from 'react-native';
+import React from 'react';
+
+/**
+ * Properties for the Steps component, a guided progress through a sequence of procedural steps.
+ */
+export type StepsProps = {
+  /**
+   * Optional. If `true`, the steps are laid out in a horizontal manner.
+   * If `false`, the steps are laid out vertically.
+   * Defaults to `false` (vertical) if not provided.
+   */
+  horizontal?: boolean;
+
+  /**
+   * An array of `Step` items representing each individual step in the sequence.
+   * Each `Step` has its own set of properties such as title, description, etc.
+   */
+  steps: Step[];
+
+  /**
+   * Optional. Specifies the size of the steps. Affects all step items within the component.
+   * If not provided, a default size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * The index of the currently active step within the steps sequence,
+   * starting from 0 for the first step.
+   */
+  activeIndex: number;
+
+  /**
+   * Optional. If `true`, the step numbers are displayed within the step icons.
+   */
+  useNumber?: boolean;
+
+  /**
+   * Optional. Specifies the alignment of the steps within the component.
+   */
+  align?: Align;
+
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  customIcon?: string;
+
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  onPress?: (item: Step, index: number) => void;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Steps component.
+   */
+  disabled?: boolean;
+};
+
+export type Align = 'left' | 'right' | 'center' | 'stretch';
+
+/**
+ * Represents a single step within the Steps component. Each step has a
+ * title and can have optional properties such as a description or error state.
+ */
+export type Step = {
+  /**
+   * The title of the step, briefly describing the purpose or task of this stage.
+   */
+  title: string;
+
+  /**
+   * Optional. More detailed text about this particular step.
+   * It can provide users with guidance on what to expect or what's required.
+   */
+  description?: string | React.ReactNode;
+
+  /**
+   * Optional. If `true`, the step is marked as having an error, typically displayed
+   * with an error icon and error styles. Defaults to `false` if not provided.
+   */
+  error?: boolean;
+
+  /**
+   * Optional. A string representing the time associated with this step.
+   * It could be the duration, a specific time, or date, depending on the context.
+   */
+  time?: string;
+};
+
+/**
+ * Properties for the StepIcon component, which displays an icon
+ * representing a step within the Steps component.
+ */
+export type StepIconProps = {
+  /**
+   * Optional. Specifies the size of the step icon. If not provided, a default size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. The background color of the step icon.
+   * If not provided, a default background color is used.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Optional. The border color of the step icon.
+   * If not provided, a default border color is used.
+   */
+  borderColor?: string;
+
+  /**
+   * Optional. If `true`, the step icon is marked as being in an error state,
+   * typically displayed with an error icon and error styles.
+   * Defaults to `false` if not provided.
+   */
+  error?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the StepIcon component.
+   * Can be used to adjust the visual presentation or layout.
+   */
+  style?: ViewStyle;
+
+  /**
+   * Optional. If `true`, the step number is displayed within the step icon.
+   */
+  useNumber?: boolean;
+
+  /**
+   * Optional. The number to display within the step icon.
+   */
+  index: number;
+
+  /**
+   * Optional. If `true`, the step icon is marked as active.
+   */
+  isActive?: boolean;
+
+  /**
+   * Optional. Custom active icon
+   */
+  customIcon?: string;
+};
+
+/**
+ * Properties for the ProgressInfo component, which displays a progress bar
+ */
+export type ProgressInfoProps = {
+  steps: Step[];
+  horizontal?: boolean;
+  size?: 'small' | 'large';
+  useNumber?: boolean;
+  align?: 'left' | 'right' | 'center' | 'stretch' | undefined;
+  showDescription?: boolean;
+  customIcon?: string;
+};

package/dist/utils.ts

@@ -0,0 +1,175 @@
+import {ApplicationContext, Colors, Typography} from '@momo-kits/foundation';
+import {Step} from '@momo-kits/step';
+import {useContext} from 'react';
+
+type StepStatus = 'incomplete' | 'current' | 'completed' | 'error' | 'disable';
+type StepTypo = {
+  typography: Typography;
+  color: string;
+};
+
+const getStatus = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean
+): StepStatus => {
+  if (disabled) return 'disable';
+  if (error) return 'error';
+  if (activeIndex === currentIndex) return 'current';
+  if (activeIndex > currentIndex) return 'completed';
+  return 'incomplete';
+};
+const checkSizeAndStepType = (
+  stepType?: 'vertical' | 'horizontal',
+  size?: 'small' | 'large'
+) => {
+  return (
+    stepType === 'horizontal' || (stepType === 'vertical' && size === 'small')
+  );
+};
+
+const getTypoTitle = (
+  status: StepStatus,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
+): Typography => {
+  const defaultTypo =
+    !!size && stepType === 'vertical'
+      ? 'body_default_regular'
+      : 'description_default_regular';
+
+  switch (status) {
+    case 'current':
+    case 'error': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'header_xs_semibold'
+        : 'header_s_semibold';
+    }
+    case 'incomplete':
+    case 'completed': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'description_default_regular'
+        : 'body_default_regular';
+    }
+    default: {
+      return defaultTypo;
+    }
+  }
+};
+
+export const getStepTypo = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const status = getStatus(activeIndex, currentIndex, error);
+
+  let title: StepTypo = {
+    color: theme.colors.text.default,
+    typography: getTypoTitle(status, size, stepType),
+  };
+  let description: StepTypo = {
+    color: theme.colors.text.hint,
+    typography: !!size
+      ? 'description_xs_regular'
+      : 'description_default_regular',
+  };
+  let time: StepTypo = {
+    color: theme.colors.text.hint,
+    typography: 'description_xs_regular',
+  };
+
+  switch (status) {
+    case 'current': {
+      title.color = theme.colors.primary;
+      break;
+    }
+    case 'error': {
+      title.color = theme.colors.error.primary;
+      break;
+    }
+  }
+
+  return {title, description, time};
+};
+
+export const getStepColor = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  length: number = 1,
+  disabled?: boolean
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const DEFAULT_LINE_COLOR = theme.colors.background.default;
+  const COMPLETED_LINE_COLOR = theme.colors.primary + '33';
+
+  let backgroundColor = Colors.black_06;
+  let borderColor = theme.colors.border.default;
+  let lineColorLeft = DEFAULT_LINE_COLOR;
+  let lineColorRight = DEFAULT_LINE_COLOR;
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
+
+  if (activeIndex > currentIndex) {
+    lineColorLeft = COMPLETED_LINE_COLOR;
+    lineColorRight = COMPLETED_LINE_COLOR;
+  }
+  if (activeIndex === currentIndex) {
+    lineColorLeft = COMPLETED_LINE_COLOR;
+  }
+
+  if (currentIndex === 0) {
+    lineColorLeft = 'transparent';
+  }
+  if (currentIndex === length - 1) {
+    lineColorRight = 'transparent';
+  }
+
+  switch (status) {
+    case 'current': {
+      backgroundColor = theme.colors.primary;
+      borderColor = theme.colors.background.tonal;
+      break;
+    }
+
+    case 'completed': {
+      backgroundColor = theme.colors.primary;
+      borderColor = theme.colors.background.tonal;
+      break;
+    }
+
+    case 'error': {
+      backgroundColor = theme.colors.error.primary;
+      borderColor = theme.colors.error.container;
+      break;
+    }
+
+    case 'disable': {
+      backgroundColor = Colors.pink_08;
+      borderColor = Colors.pink_10;
+      break;
+    }
+  }
+
+  return {backgroundColor, borderColor, lineColorLeft, lineColorRight, status};
+};
+
+export const getOnPressCompleted = (
+  item: Step,
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean,
+  onPress?: (item: Step, index: number) => void
+) => {
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
+
+  if (status === 'completed' && onPress) {
+    return () => onPress(item, currentIndex);
+  }
+  return undefined;
+};

package/index.tsx

@@ -1,6 +1,6 @@
 import React, {FC} from 'react';
 import {View} from 'react-native';
-import {Step, StepsProps} from './types';
+import {Step, StepsProps, Align} from './types';
 import StepsHorizontal from './StepsHorizontal';
 import StepsVertical from './StepsVertical';
 
@@ -17,4 +17,4 @@ const Steps: FC<StepsProps> = ({horizontal = false, ...props}) => {
 };
 
 export {Steps};
-export type {StepsProps, Step};
+export type {StepsProps, Step, Align};

package/package.json

@@ -1,17 +1,17 @@
 {
-    "name": "@momo-kits/step",
-    "version": "0.103.2-rc.8",
-    "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.109.1-beta.2",
+  "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/types.ts

@@ -1,4 +1,5 @@
 import {ViewStyle} from 'react-native';
+import React from 'react';
 
 /**
  * Properties for the Steps component, a guided progress through a sequence of procedural steps.
@@ -29,17 +30,34 @@ export type StepsProps = {
    */
   activeIndex: number;
 
+  /**
+   * Optional. If `true`, the step numbers are displayed within the step icons.
+   */
   useNumber?: boolean;
 
-  align?: 'left' | 'right' | 'center' | 'stretch';
+  /**
+   * Optional. Specifies the alignment of the steps within the component.
+   */
+  align?: Align;
 
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
   customIcon?: string;
 
-  onPress?: () => void;
+  /**
+   * Optional. If `true`, the step descriptions are displayed below the step titles.
+   */
+  onPress?: (item: Step, index: number) => void;
 
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Steps component.
+   */
   disabled?: boolean;
 };
 
+export type Align = 'left' | 'right' | 'center' | 'stretch';
+
 /**
  * Represents a single step within the Steps component. Each step has a
  * title and can have optional properties such as a description or error state.
@@ -54,7 +72,7 @@ export type Step = {
    * Optional. More detailed text about this particular step.
    * It can provide users with guidance on what to expect or what's required.
    */
-  description?: string;
+  description?: string | React.ReactNode;
 
   /**
    * Optional. If `true`, the step is marked as having an error, typically displayed
@@ -104,10 +122,19 @@ export type StepIconProps = {
    */
   style?: ViewStyle;
 
+  /**
+   * Optional. If `true`, the step number is displayed within the step icon.
+   */
   useNumber?: boolean;
 
+  /**
+   * Optional. The number to display within the step icon.
+   */
   index: number;
 
+  /**
+   * Optional. If `true`, the step icon is marked as active.
+   */
   isActive?: boolean;
 
   /**
@@ -116,6 +143,9 @@ export type StepIconProps = {
   customIcon?: string;
 };
 
+/**
+ * Properties for the ProgressInfo component, which displays a progress bar
+ */
 export type ProgressInfoProps = {
   steps: Step[];
   horizontal?: boolean;

package/utils.ts

@@ -1,67 +1,99 @@
 import {ApplicationContext, Colors, Typography} from '@momo-kits/foundation';
+import {Step} from '@momo-kits/step';
 import {useContext} from 'react';
 
-type StepStatus = 'incomplete' | 'current' | 'completed' | 'error';
+type StepStatus = 'incomplete' | 'current' | 'completed' | 'error' | 'disable';
 type StepTypo = {
   typography: Typography;
   color: string;
 };
 
-export const getStepTypo = (
+const getStatus = (
   activeIndex: number,
   currentIndex: number,
   error?: boolean,
+  disabled?: boolean
+): StepStatus => {
+  if (disabled) return 'disable';
+  if (error) return 'error';
+  if (activeIndex === currentIndex) return 'current';
+  if (activeIndex > currentIndex) return 'completed';
+  return 'incomplete';
+};
+const checkSizeAndStepType = (
+  stepType?: 'vertical' | 'horizontal',
   size?: 'small' | 'large'
+) => {
+  return (
+    stepType === 'horizontal' || (stepType === 'vertical' && size === 'small')
+  );
+};
+
+const getTypoTitle = (
+  status: StepStatus,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
+): Typography => {
+  const defaultTypo =
+    !!size && stepType === 'vertical'
+      ? 'body_default_regular'
+      : 'description_default_regular';
+
+  switch (status) {
+    case 'current':
+    case 'error': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'header_xs_semibold'
+        : 'header_s_semibold';
+    }
+    case 'incomplete':
+    case 'completed': {
+      return checkSizeAndStepType(stepType, size)
+        ? 'description_default_regular'
+        : 'body_default_regular';
+    }
+    default: {
+      return defaultTypo;
+    }
+  }
+};
+
+export const getStepTypo = (
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  size?: 'small' | 'large',
+  stepType?: 'vertical' | 'horizontal'
 ) => {
   const {theme} = useContext(ApplicationContext);
+  const status = getStatus(activeIndex, currentIndex, error);
 
   let title: StepTypo = {
     color: theme.colors.text.default,
-    typography: 'description_default_regular',
+    typography: getTypoTitle(status, size, stepType),
   };
   let description: StepTypo = {
     color: theme.colors.text.hint,
-    typography: 'description_default_regular',
+    typography: !!size
+      ? 'description_xs_regular'
+      : 'description_default_regular',
   };
   let time: StepTypo = {
     color: theme.colors.text.hint,
     typography: 'description_xs_regular',
   };
 
-  let status: StepStatus = 'incomplete';
-  if (activeIndex > currentIndex) {
-    status = 'completed';
-  }
-  if (activeIndex === currentIndex) {
-    status = 'current';
-  }
-  if (error) {
-    status = 'error';
-  }
-
   switch (status) {
     case 'current': {
       title.color = theme.colors.primary;
-      title.typography = 'header_xs_semibold';
       break;
     }
-
-    case 'completed': {
-      title.typography = 'header_xs_semibold';
-      break;
-    }
-
     case 'error': {
-      title.typography = 'header_xs_semibold';
       title.color = theme.colors.error.primary;
       break;
     }
   }
 
-  if (size === 'small') {
-    description.typography = 'description_xs_regular';
-  }
-
   return {title, description, time};
 };
 
@@ -69,7 +101,8 @@ export const getStepColor = (
   activeIndex: number,
   currentIndex: number,
   error?: boolean,
-  length: number = 1
+  length: number = 1,
+  disabled?: boolean
 ) => {
   const {theme} = useContext(ApplicationContext);
   const DEFAULT_LINE_COLOR = theme.colors.background.default;
@@ -79,20 +112,15 @@ export const getStepColor = (
   let borderColor = theme.colors.border.default;
   let lineColorLeft = DEFAULT_LINE_COLOR;
   let lineColorRight = DEFAULT_LINE_COLOR;
-  let status: StepStatus = 'incomplete';
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
 
   if (activeIndex > currentIndex) {
-    status = 'completed';
     lineColorLeft = COMPLETED_LINE_COLOR;
     lineColorRight = COMPLETED_LINE_COLOR;
   }
   if (activeIndex === currentIndex) {
-    status = 'current';
     lineColorLeft = COMPLETED_LINE_COLOR;
   }
-  if (error) {
-    status = 'error';
-  }
 
   if (currentIndex === 0) {
     lineColorLeft = 'transparent';
@@ -119,7 +147,29 @@ export const getStepColor = (
       borderColor = theme.colors.error.container;
       break;
     }
+
+    case 'disable': {
+      backgroundColor = Colors.pink_08;
+      borderColor = Colors.pink_10;
+      break;
+    }
   }
 
   return {backgroundColor, borderColor, lineColorLeft, lineColorRight, status};
 };
+
+export const getOnPressCompleted = (
+  item: Step,
+  activeIndex: number,
+  currentIndex: number,
+  error?: boolean,
+  disabled?: boolean,
+  onPress?: (item: Step, index: number) => void
+) => {
+  const status = getStatus(activeIndex, currentIndex, error, disabled);
+
+  if (status === 'completed' && onPress) {
+    return () => onPress(item, currentIndex);
+  }
+  return undefined;
+};