feat: Steps

docs/content/components/step.mdx

@@ -0,0 +1,42 @@
+---
+title: Steps 步骤条
+date: 2019-06-12
+---
+引导用户按照流程完成任务的导航条。
+
+## 何时使用
+当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
+
+## 基本用法
+### 默认展示
+```
+<Steps
+  steps={['第一步', '第二步', '第三步', '确认']}
+  currentStep={2}
+/>
+```
+### 交互
+```jsx
+() => {
+  const [ step, setStep ] = React.useState(1);
+  const prevStep = () => setStep(step - 1);
+  const nextStep = () => setStep(step + 1);
+  return (
+    <div>
+      <Steps
+        steps={['第一步', '第二步', '第三步', '确认']}
+        currentStep={step}
+      />
+      <p>第 {step} 步</p>
+      <Button bsStyle="info" onClick={prevStep}>上一步</Button>
+      <span style={{ paddingLeft: '40px' }} />
+      <Button bsStyle="primary" onClick={nextStep}>下一步</Button>
+    </div>
+  )
+}
+```
+
+## API
+```jsx previewOnly
+<PropTable of="steps" />
+```

src/components/Steps/index.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Well } from 'react-bootstrap';
+import Badge from '../Badge';
+import { getBemClass } from '../../utils';
+import { StepsProps } from '../../interface';
+import './style.scss';
+
+const Steps: React.SFC<StepsProps> = props => {
+  const { steps, currentStep } = props;
+  return (
+    <Well className="Steps">
+      {steps.map((step, index) => (
+        <div
+          className={getBemClass('Steps__Step', currentStep >= index + 1 && 'active')}
+          key={index}
+        >
+          <Badge dot size="middle" status="primary" />
+          {step}
+          {index !== steps.length - 1 && <span className="icon icon-angle-left" />}
+        </div>
+      ))}
+    </Well>
+  );
+}
+
+Steps.propTypes = {
+  /**
+   * 步骤条title的集合
+   **/
+  steps: PropTypes.array.isRequired,
+  /**
+   * 当前步骤，从 1 开始计数
+   **/
+  currentStep: PropTypes.number.isRequired,
+};
+
+export default Steps;

src/components/Steps/style.scss

@@ -0,0 +1,18 @@
+.Steps {
+  text-align: center;
+}
+.Steps__Step {
+  display: inline-block;
+  opacity: .6;
+
+  .icon-angle-left {
+    display: inline-block;
+    transform: rotate(180deg);
+    margin: 0 10px;
+    font-size: 1rem;
+    vertical-align: 0;
+  }
+}
+.Steps__Step--active {
+  opacity: 1;
+}

src/components/index.tsx

@@ -4,6 +4,7 @@ import Tooltip from './Tooltip';
 import UsageBar from './UsageBar';
 import Loader from './Loader';
 import Tabs from './Tabs';
+import Steps from './Steps'
 
 export {
   Badge,
@@ -12,4 +13,5 @@ export {
   UsageBar,
   Loader,
   Tabs,
+  Steps,
 }

src/interface.tsx

@@ -58,4 +58,9 @@ export interface TabsProps {
   eventKeyName?: string
   direction?: 'right'
   onSelect?: React.MouseEventHandler
+}
+
+export interface StepsProps {
+  steps: any[]
+  currentStep: number
 }