feat(steps): add steps component

src/components/steps/Step.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import classnames from 'classnames';
+import { CheckCircleOutlined, CheckCircleFilled } from '@gio-design/icons';
+import * as tokens from '@gio-design/tokens';
+import _ from 'lodash';
+import { StepProps } from './interface';
+
+const Step: React.FC<StepProps> = (props) => {
+  const { finished, title, description, className, prefixCls, active, stepNumber, onStepClick } = props;
+  const classNames = classnames(className, `${prefixCls}__item`, {
+    [`${prefixCls}__item_active`]: active === true,
+    [`${prefixCls}__item_finished`]: finished === true,
+  });
+  const getIcon = () => {
+    let icon = null;
+
+    if (finished) {
+      if (active) {
+        icon = <CheckCircleFilled size="24px" color={tokens.PaletteBlue5} />;
+      } else {
+        icon = <CheckCircleOutlined size="24px" color={tokens.PaletteBlue5} />;
+      }
+    } else {
+      icon = <div className={`${prefixCls}__item-icon`}>{_.isNumber(stepNumber) ? stepNumber + 1 : -1}</div>;
+    }
+    return icon;
+  };
+
+  const onClick = () => {
+    if (_.isFunction(onStepClick)) onStepClick(_.isNumber(stepNumber) ? stepNumber : -1);
+  };
+
+  let clickableProps: {
+    role?: string;
+    tabIndex?: number;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  } = {};
+
+  if (_.isFunction(onStepClick)) {
+    clickableProps = {
+      ...clickableProps,
+      role: 'button',
+      tabIndex: 0,
+      onClick,
+    };
+  }
+
+  return (
+    <div className={classNames}>
+      {/* eslint react/jsx-props-no-spreading: off */}
+      <div className={`${prefixCls}__item-container`} {...clickableProps}>
+        {getIcon()}
+        <div className={`${prefixCls}__item-content`}>
+          {title && <span className={`${prefixCls}__item-content-title`}>{title}</span>}
+          {description && <span className={`${prefixCls}__item-content-description`}>{description}</span>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Step;

src/components/steps/Steps.mdx

@@ -0,0 +1,35 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import Steps, { Step } from './Steps';
+
+# Steps 步骤条
+
+<Subtitle>分步完成复杂的操作流程</Subtitle>
+
+## 使用规范
+
+1. 在页面中使用时（type = `page`），Steps 最大宽度为 1200px，最多支持 4 个步骤，如果超过 4 个步骤，则只保留前 4 个步骤；
+2. 在小弹窗中使用时（type = `modal`, size = `small`），Steps 最大宽度为 428px，最多支持 2 个步骤，如果超过 2 个步骤，则只保留前 2 个步骤；
+3. 在大弹窗中使用时（type = `modal`, size = `middle`），Steps 最大宽度为 928px，最多支持 4 个步骤，如果超过 4 个步骤，则只保留前 4 个步骤；
+4. 在抽屉中使用时（type = `drawer`），Steps 最大宽度为抽屉容器的 100%，最多支持 2 个步骤，如果超过 2 个步骤，则只保留前 2 个步骤；
+
+## 参数说明
+
+<ArgsTable of={Steps} />
+
+## 代码演示
+
+### 页面中使用
+
+[Example](/?path=/story/components-functional-steps--page-steps)
+
+### 小弹窗中使用
+
+[Example](/?path=/story/components-functional-steps--small-modal-steps)
+
+### 大弹窗中使用
+
+[Example](/?path=/story/components-functional-steps--middle-modal-steps)
+
+### 抽屉中使用
+
+[Example](/?path=/story/components-functional-steps--drawer-steps)