tntd 3.0.27 → 3.0.28

package/lib/steps/stepStyle/index.less

@@ -1,177 +1,12 @@
-@import './variables.less';
+@import './small.less';
+@import './nav.less';
+
 @steps-prefix-cls: ~'@{ant-prefix}-steps';
 @step-prefix-cls: ~'@{ant-prefix}-step';
-@tnt-steps-cls: ~'tnt-steps';
-@tnt-step-cls: ~'tnt-step';
-
-.ellipsis{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.@{tnt-steps-cls} .@{steps-prefix-cls}{
-    &-description,
-    &-item-description {
-        font-size: @font-size-sm;
-        line-height: @td-steps-desc-height;
-        word-break: break-all;
-        color: tint(@text-color, 50%) !important;
-    }
-    &-item-title {
-        line-height: @td-steps-title-height;
-    }
-}
-
-// 水平 非点状步骤条 非导航模式
-.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
-    .@{steps-prefix-cls}-item{
-        padding-top: 18px;
-        padding-bottom: 18px;
-        &-container{
-            position: relative;
-            display: flex;
-            align-items: flex-start;
-            justify-content: center;
-            min-height: @nav-min-height;
-            &::after{
-                content: '';
-                flex:1;
-                height:2px;
-                border-radius: 2px;
-                min-width: 8px;
-                margin-left:32px;
-                margin-top: calc(@nav-min-height / 2 - 1px);
-            }
-        }
-
-        &-finish > .@{steps-prefix-cls}-item-container {
-            &::after {
-              border-top: 2px solid @finish-border-color;
-            }
-        }
-
-        &-wait, &-error, &-process {
-            > .@{steps-prefix-cls}-item-container {
-                &::after {
-                  border: 2px solid transparent;
-                  background-color: @border-color;
-                  mask: url(../assets/horizontal_line.svg) repeat-x 0 0;
-                  -webkit-mask:url(../assets/horizontal_line.svg) repeat-x 0 0;
-                  background-size: 8px 2px;
-                }
-              }
-        }
-
-        &-content{
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            font-family: "PingFang SC";
-            min-height: @nav-min-height;
-            // 左侧圆形图标 12的margin边距  线条至少保留8px长
-            max-width: calc(100% - @td-steps-icon-size - 12px - 32px - 8px);
-        }
-
-        &-title {
-            width: 100%;
-            padding-right:0;
-            &::after{
-                display: none;
-            }
-            >.tntd-ellipsis, >.tnt-ellipsis{
-                align-items: center;
-            }
-            .ellipsis
-        }
-
-        .@{step-prefix-cls}-ellipsis-subtitle{
-            font-size: @font-size-sm;
-            color: tint(@text-color, 50%);
-            margin-left: 2px;
-        }
-
-        &-subtitle {
-            font-size: @font-size-sm;
-            max-width: 30%;
-            color: tint(@text-color, 50%);
-            .ellipsis;
-        }
-
-        // 最后一个处理
-        &:last-child > .@{steps-prefix-cls}-item-container {
-            &::after{
-                display: none;
-            }
-            .@{steps-prefix-cls}-item-content {
-                max-width: inherit;
-                flex:none;
-            }
-        }
-    }
-
-    &-small{
-        .@{steps-prefix-cls}-item {
-            padding-top: 10px;
-            padding-bottom: 10px;
-            &-container{
-                min-height: @nav-small-min-height;
-                &::after{
-                    margin-top: calc(@nav-small-min-height / 2 - 1px);
-                }
-            }
-            &-content{
-                min-height: @nav-small-min-height;
-                max-width: calc(100% - @td-steps-small-icon-size - 12px - 32px - 8px);
-            }
-        }
-    }
-
-    &:not(.@{steps-prefix-cls}-label-vertical) {
-        .@{steps-prefix-cls}-item:not(:last-child) {
-            margin-right: 32px;
-        }
-    }
-}
-
-// 水平 非点状步骤条
-.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
-    &.@{steps-prefix-cls}-background{
-        border-radius: @border-radius-base @border-radius-base 0px 0px;
-        background: linear-gradient(90deg, #F5F7FD 9.61%, #FBFDFF 81.1%);
-        position: relative;
-        padding-left:100px;
-        padding-right: 100px;
-        overflow: hidden;
 
-        &::before{
-            content: '';
-            background-color: @primary-color;
-            mask: url(../assets/background_left.svg) no-repeat 0 0;
-            -webkit-mask:url(../assets/background_left.svg) no-repeat 0 0;
-            width: 157px;
-            height: 103px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            pointer-events: none;
-        }
-        &::after{
-            content: '';
-            background-color: @primary-color;
-            mask: url(../assets/background_right.svg) no-repeat 0 0;
-            -webkit-mask:url(../assets/background_right.svg) no-repeat 0 0;
-            width: 131px;
-            height: 80px;
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            pointer-events: none;
-        }
-    }
-}
+@steps-nav-arrow-color: fade(@black, 25%);
+@steps-nav-finish-color: #5E9BFF;
+@steps-nav-active-color: @primary-color;
+@wait-icon-color: @disabled-color;
 
-@import "./icon.less";
-@import "./vertical.less";
-@import "./nav.less";
-@import "./progress-dot.less";
+@steps-nav-content-max-width: auto;

package/lib/steps/stepStyle/nav.less

@@ -1,73 +1,281 @@
+@normal-steps-desc-height: 68px;
+@normal-steps-height: 48px;
+@small-steps-height: 36px;
+@color-white: @white;
+@container-padding-left: 40px;
 
-.@{tnt-steps-cls}.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}-navigation.@{steps-prefix-cls} {
-    padding-top: 0;
-    .@{steps-prefix-cls}-item {
-        &-container{
-            padding-bottom:0;
-            margin-left: -@td-steps-icon-size / 2;
-            &::after{
+.tnt-steps{
+    // 水平方向的步骤条
+    &.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-horizontal{
+        overflow: hidden;
+        padding-top: 12px;
+    
+        // 小尺寸
+        &.@{steps-prefix-cls}-small {
+          .@{steps-prefix-cls}-item {
+            height: @small-steps-height;
+            min-height: @small-steps-height;
+            &-container {
+              margin-left: 0;
+              padding-bottom:0;
+            }
+    
+            &::after {
+                content: '';
+                border-top: @small-steps-height/2 solid transparent;
+                border-bottom: @small-steps-height/2 solid transparent;
+                border-left: @small-steps-height/2 solid @border-color-split;
+                right: -@small-steps-height/2;
+              }
+    
+            &::before {
+                content: '';
+                border-top: @small-steps-height/2 solid @border-color-split;
+                border-bottom: @small-steps-height/2 solid @border-color-split;
+                border-left: @small-steps-height/2 solid @color-white;
+            }
+          }
+        }
+    
+        // 默认尺寸
+        .@{steps-prefix-cls}-item {
+          overflow: visible;
+          position: relative;
+          text-align: left;
+          display: flex;
+          min-height: @normal-steps-height;
+          &:not(:last-of-type){
+            margin-right: 2px !important;
+          }
+          background: @border-color-split;
+          width : 0 !important;
+          &-container {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            text-align: left;
+            padding-left: @container-padding-left + 24px;
+            padding-bottom: 0;
+            margin-left: 0;
+            transition: opacity 0.3s;
+            z-index: 11;
+    
+            .@{steps-prefix-cls}-item-content {
+              max-width: calc(100% - @container-padding-left);
+            }
+    
+            .@{steps-prefix-cls}-item-title {
+              max-width: 100%;
+              padding-right: 0;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              line-height: 1.5;
+              font-size: 14px;
+              font-weight: normal;
+              color:@text-color;
+              &::after {
                 display: none;
+              }
+              .@{steps-prefix-cls}-item-subtitle{
+                color:fade(@text-color,80%);
+              }
+            }
+    
+            .@{steps-prefix-cls}-item-description{
+                margin-top: 5px;
+                line-height: 14px;
+                font-size: 12px;
+                max-width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
             }
         }
-        &-content{
-            max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
+    
+        &:not(.@{steps-prefix-cls}-item-active) {
+            .@{steps-prefix-cls}-item-container[role='button'] {
+              cursor: pointer;
+              &:hover {
+                opacity: 0.85;
+              }
+            }
         }
-         // 最后一个处理
-         &:last-child > .@{steps-prefix-cls}-item-container {
-            .@{steps-prefix-cls}-item-content {
-                max-width: calc(100% - @td-steps-icon-size - 12px - 48px );
+    
+        &:last-child {
+            flex: 1;
+            &::after {
+              display: none;
             }
         }
-
-        &::before {
+    
+        &:first-child {
+            &.@{steps-prefix-cls}-item-container{
+                padding-left: @container-padding-left;
+            }
+            &:before {
+                display: none;
+            }
+        }
+    
+        &::after {
             content: '';
-            height: 1px;
-            left: -10px;
+            display: block;
+            border:none;
+            border-top: @normal-steps-height/2 solid transparent;
+            border-bottom: @normal-steps-height/2 solid transparent;
+            border-left: @normal-steps-height/2 solid @border-color-split;
+            position: absolute;
+            right: -@normal-steps-height/2;
+            top: 0;
+            z-index: 10;
+            transform: rotate(0deg);
+            margin-top:0;
+            margin-left: 0;
         }
-
-        &-active::before {
+    
+        &::before {
             content: '';
-            width: calc(100% + 20px);
+            display: block;
+            background: none;;
+            border-top: @normal-steps-height/2 solid @border-color-split;
+            border-bottom: @normal-steps-height/2 solid @border-color-split;
+            border-left: @normal-steps-height/2 solid @color-white;
+            position: absolute;
+            height: 0;
+            width: 0;
+            left: 0px;
+            top: 0;
+            transition: none;
         }
-    }
-
-    &.@{steps-prefix-cls}-background{
-        .@{steps-prefix-cls}-item{
-           &:not(:last-child){
-                margin-right: 48px;
-           }
+    
+        &-finish{
+            background-color:  @steps-nav-finish-color !important;
+            border-color: @steps-nav-finish-color !important;
+            &::before{
+                border-top-color:  @steps-nav-finish-color !important;
+                border-bottom-color:  @steps-nav-finish-color !important;
+            }
             &::after{
-                content:"";
-                margin-left: 12px;
-                margin-top: 34px;
-                top: 0;
-                border: 1px solid @text-color-tertiary;
-                border-bottom: none;
-                border-left: none;
+                border-left-color:  @steps-nav-finish-color !important;
+            }
+            .@{steps-prefix-cls}-item-title,
+            .@{steps-prefix-cls}-item-subtitle{
+                color:@color-white !important;
+            }
+            .@{steps-prefix-cls}-item-description{
+                color:fade(@color-white,80%) !important;
             }
         }
-    }
-
-    &-small{
-        &.@{steps-prefix-cls}-background{
-            .@{steps-prefix-cls}-item{
-                &::after{
-                    content:"";
-                    margin-top: 18px;
+    
+        &-process{
+            background-color:  @steps-nav-active-color !important;
+            border-color: @steps-nav-active-color !important;
+            &::before{
+                border-top-color:  @steps-nav-active-color !important;
+                border-bottom-color:  @steps-nav-active-color !important;
+            }
+            &::after{
+                border-left-color:  @steps-nav-active-color !important;
+            }
+            .@{steps-prefix-cls}-item-title,
+            .@{steps-prefix-cls}-item-subtitle{
+                color:@color-white !important;
+            }
+            .@{steps-prefix-cls}-item-description{
+                color:fade(@color-white,80%) !important;
+            }
+          }
+        }
+    
+        // 存在描述的导航步骤
+        &.@{steps-prefix-cls}-navigation-contain-desc{
+            .@{steps-prefix-cls}-item {
+                height: @normal-steps-desc-height;
+                &::after {
+                    content: '';
+                    border-top: @normal-steps-desc-height/2 solid transparent;
+                    border-bottom: @normal-steps-desc-height/2 solid transparent;
+                    border-left: @normal-steps-desc-height/2 solid @border-color-split;
+                    position: absolute;
+                    right: -@normal-steps-desc-height/2;
                 }
-
-                &-content{
-                    max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
+                &::before {
+                    content: '';
+                    border-top: @normal-steps-desc-height/2 solid @border-color-split;
+                    border-bottom: @normal-steps-desc-height/2 solid @border-color-split;
+                    border-left: @normal-steps-desc-height/2 solid @color-white;
+                    position: absolute;
+                    height: 0;
+                    width: 0;
+                    left: 0px;
+                    top: 0;
+                    transition: none;
                 }
-                 // 最后一个处理
-                 &:last-child > .@{steps-prefix-cls}-item-container {
-                    .@{steps-prefix-cls}-item-content {
-                        max-width: calc(100% - @td-steps-small-icon-size - 12px - 48px );
-                    }
+            }
+        }
+    
+        // icon控制
+        .@{steps-prefix-cls}-item-icon{
+            display: none;
+        }
+        .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active{
+            .@{steps-prefix-cls}-item-container{
+                border-top:1px solid @steps-nav-active-color !important;
+                border-bottom:1px solid @steps-nav-active-color !important;
+            }
+            &.@{step-prefix-cls}-navigation-desc{
+                .@{steps-prefix-cls}-item-icon{
+                    margin-top: -18px;
                 }
-
             }
+            .@{steps-prefix-cls}-item-icon{
+                .@{steps-prefix-cls}-icon{
+                    display: none;
+                }
+                display: inline-block;
+                width: 6px;
+                height:6px;
+                border-radius: 100%;
+                background: @color-white;
+                border: 1px solid @color-white;
+                margin-right: 6px;
+            }
+        }
+    }
+}
+
+
+  @media (max-width: @screen-xs) {
+    .tnt-steps.@{steps-prefix-cls}-navigation {
+      > .@{steps-prefix-cls}-item {
+        margin-right: 0 !important;
+        &::before {
+          display: none;
+        }
+        &.@{steps-prefix-cls}-item-active::before {
+          top: 0;
+          right: 0;
+          left: unset;
+          display: block;
+          width: 3px;
+          height: calc(100% - 24px);
+        }
+        &::after {
+          position: relative;
+          top: -2px;
+          left: 50%;
+          display: block;
+          width: 8px;
+          height: 8px;
+          margin-bottom: 8px;
+          text-align: center;
+          transform: rotate(135deg);
+        }
+        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+          visibility: hidden;
         }
+      }
     }
 }
 

package/lib/steps/steps.d.ts

@@ -3,18 +3,10 @@ import type { StepProps as AntdStepProps } from 'antd/lib/steps';
 import React from 'react';
 export * from 'antd/lib/steps';
 export interface StepsProps extends AntdStepsProps {
-    showBackground?: boolean;
     children?: Array<React.ReactElement>;
-    icons?: {
-        finish: Element;
-        error: Element;
-    };
 }
-export interface StepProps extends AntdStepProps {
-    titleEllipsis?: boolean;
-}
-export declare function Steps({ className, size, showBackground, labelPlacement, ...rest }: StepsProps): React.JSX.Element;
+export declare function Steps({ className, type, children, ...rest }: StepsProps): React.JSX.Element;
 export declare namespace Steps {
-    var Step: ({ className, title, subTitle, titleEllipsis, ...rest }: StepProps) => React.JSX.Element;
+    var Step: ({ description, className, ...rest }: AntdStepProps) => React.JSX.Element;
 }
 //# sourceMappingURL=steps.d.ts.map

package/lib/steps/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/steps/steps.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,cAAc,eAAe,CAAA;AAE7B,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IACpC,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAA;CAC5C;AACD,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,IAAI,EACJ,cAAqB,EACrB,cAAc,EACd,GAAG,IAAI,EACR,EAAE,UAAU,qBAsCZ;yBA5Ce,KAAK"}
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../src/steps/steps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,eAAe,CAAA;AAE/D,OAAO,KAAoB,MAAM,OAAO,CAAA;AAKxC,cAAc,eAAe,CAAA;AAE7B,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;CACrC;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,qBAwCvE;yBAxCe,KAAK"}

package/lib/steps/steps.js

@@ -9,8 +9,6 @@ var _exportNames = {
 exports.Steps = Steps;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _icon = _interopRequireDefault(require("../icon"));
-var _ellipsis = _interopRequireDefault(require("../ellipsis"));
 var _configProvider = require("../config-provider");
 var _steps = _interopRequireWildcard(require("antd/lib/steps"));
 Object.keys(_steps).forEach(function (key) {
@@ -26,9 +24,9 @@ Object.keys(_steps).forEach(function (key) {
 });
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
@@ -41,65 +39,39 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 function Steps(_a) {
   var className = _a.className,
-    size = _a.size,
-    _a$showBackground = _a.showBackground,
-    showBackground = _a$showBackground === void 0 ? true : _a$showBackground,
-    labelPlacement = _a.labelPlacement,
-    rest = __rest(_a, ["className", "size", "showBackground", "labelPlacement"]);
+    type = _a.type,
+    children = _a.children,
+    rest = __rest(_a, ["className", "type", "children"]);
+  var navContainDesc = false;
+  if (children) {
+    if (Array.isArray(children)) {
+      navContainDesc = children.some(function (child) {
+        if (child && child instanceof Object && child.props && child.props instanceof Object && child.props.hasOwnProperty('description')) {
+          return child.props.description;
+        }
+      });
+    }
+  }
   return _react["default"].createElement(_configProvider.ConfigConsumer, null, function (_ref) {
     var getPrefixCls = _ref.getPrefixCls;
     var prefixCls = getPrefixCls('steps');
-    var tdSteps = !labelPlacement || labelPlacement === 'horizontal';
-    var iconsInfo = {};
-    if (tdSteps) {
-      iconsInfo = {
-        icons: {
-          finish: _react["default"].createElement(_icon["default"], {
-            type: size === 'small' ? 'check-circle' : 'step-check',
-            className: "".concat(prefixCls, "-finish-icon")
-          }),
-          error: _react["default"].createElement(_icon["default"], {
-            type: "close-circle",
-            className: "".concat(prefixCls, "-error-icon")
-          })
-        }
-      };
-    }
     return _react["default"].createElement(_steps["default"], Object.assign({
-      className: (0, _classnames["default"])(className, _defineProperty(_defineProperty({}, 'tnt-steps', tdSteps), "".concat(prefixCls, "-background"), (!(rest === null || rest === void 0 ? void 0 : rest.direction) || (rest === null || rest === void 0 ? void 0 : rest.direction) === 'horizontal') && showBackground))
-    }, iconsInfo, {
-      size: size,
-      labelPlacement: labelPlacement
+      className: (0, _classnames["default"])(prefixCls, 'tnt-steps', _defineProperty(_defineProperty({}, "".concat(prefixCls, "-navigation"), type === 'navigation'), "".concat(prefixCls, "-navigation-contain-desc"), type === 'navigation' && navContainDesc), className),
+      type: type,
+      children: children
     }, rest));
   });
 }
 Steps.Step = function (_a) {
-  var className = _a.className,
-    title = _a.title,
-    subTitle = _a.subTitle,
-    _a$titleEllipsis = _a.titleEllipsis,
-    titleEllipsis = _a$titleEllipsis === void 0 ? true : _a$titleEllipsis,
-    rest = __rest(_a, ["className", "title", "subTitle", "titleEllipsis"]);
+  var description = _a.description,
+    className = _a.className,
+    rest = __rest(_a, ["description", "className"]);
   return _react["default"].createElement(_configProvider.ConfigConsumer, null, function (_ref2) {
     var getPrefixCls = _ref2.getPrefixCls;
     var prefixCls = getPrefixCls('step');
-    var stepTitle = {
-      title: title,
-      subTitle: subTitle
-    };
-    if (titleEllipsis) {
-      stepTitle.title = _react["default"].createElement(_ellipsis["default"], {
-        suffix: _react["default"].createElement(_ellipsis["default"], {
-          widthLimit: "30%",
-          title: subTitle,
-          className: "".concat(prefixCls, "-ellipsis-subtitle")
-        }),
-        title: title
-      });
-      stepTitle.subTitle = null;
-    }
     return _react["default"].createElement(_steps["default"].Step, Object.assign({
-      className: (0, _classnames["default"])('tnt-step', className, _defineProperty({}, "".concat(prefixCls, "-default-icon"), !(rest === null || rest === void 0 ? void 0 : rest.icon)))
-    }, rest, stepTitle));
+      className: (0, _classnames["default"])(prefixCls, 'tnt-step', _defineProperty({}, "".concat(prefixCls, "-navigation-desc"), !!description), className),
+      description: description
+    }, rest));
   });
 };