@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

package/es/components/Navigation/index.js

@@ -0,0 +1,110 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hideBorder", "className", "rightIcons", "rightLink", "title", "goBack", "isInverse", "titleIconBadge", "imgBackground", "noRight", "leftIconName", "leftIconSize"];
+import React from 'react';
+import designTokens from "./designTokens";
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { isEmpty } from 'lodash';
+import { theme } from "../../utils/theme";
+import { IconButton, Text, IconButtonGroup, TextLink, TextLinkEnum, Icon } from "../index";
+import { cssClasses } from "../../constants";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Navigation = function Navigation(_ref) {
+  var _rightIcons$slice;
+  var hideBorder = _ref.hideBorder,
+    className = _ref.className,
+    rightIcons = _ref.rightIcons,
+    rightLink = _ref.rightLink,
+    title = _ref.title,
+    goBack = _ref.goBack,
+    isInverse = _ref.isInverse,
+    titleIconBadge = _ref.titleIconBadge,
+    imgBackground = _ref.imgBackground,
+    _ref$noRight = _ref.noRight,
+    noRight = _ref$noRight === void 0 ? false : _ref$noRight,
+    leftIconName = _ref.leftIconName,
+    leftIconSize = _ref.leftIconSize,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var spacingTopNavigationPaddingHorizontal = designTokens.spacingTopNavigationPaddingHorizontal,
+    spacingTopNavigationPaddingBottom = designTokens.spacingTopNavigationPaddingBottom,
+    colorTopNavigationBorderBottom = designTokens.colorTopNavigationBorderBottom,
+    spacingTopNavigationTextLinkPaddingRight = designTokens.spacingTopNavigationTextLinkPaddingRight,
+    colorTopNavigationBackgroundInverse = designTokens.colorTopNavigationBackgroundInverse,
+    colorTopNavigationBackground = designTokens.colorTopNavigationBackground,
+    colorTopNavigationTitleStandard = designTokens.colorTopNavigationTitleStandard,
+    colorTopNavigationTitleInverse = designTokens.colorTopNavigationTitleInverse,
+    colorTopNavigationGradient = designTokens.colorTopNavigationGradient;
+  console.log('designTokens', designTokens);
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: ["".concat(cssClasses.PREFIX, "-header")]
+    }, function () {
+      return "\n      .".concat(cssClasses.PREFIX, "-header {\n        padding-left: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n        padding-right: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n        padding-bottom: ").concat(spacingTopNavigationPaddingBottom, "px;\n        padding-top: ").concat(spacingTopNavigationPaddingBottom, "px;  // TODO\uFF1A\u8BBE\u8BA1\u7A3F\u4E0A\u6CA1\u6709\u6682\u65F6\u52A0\u7684\n        border-bottom: 1px solid ").concat(colorTopNavigationBorderBottom, ";\n        background-color:").concat(colorTopNavigationBackground, ";\n        &.inverse {\n          background-color:").concat(colorTopNavigationBackgroundInverse, ";\n        }\n        &.imgBackground {\n          background:").concat(colorTopNavigationGradient, ";\n        }\n        &.hideBorder {\n          border-bottom:none;\n          box-shadow: 0px -2px 10px 0px rgba(26, 24, 134, 0.1);\n        }\n        &.noRight{\n          justify-content:center !important;\n          .dxp-title-warp{\n             line-height:41px;\n          }\n          .").concat(cssClasses.PREFIX, "-header-back {\n            position:absolute;\n            left: ").concat(spacingTopNavigationPaddingHorizontal, "px;\n          }\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-title {\n          color:").concat(colorTopNavigationTitleStandard, ";\n        &.inverse {\n          color:").concat(colorTopNavigationTitleInverse, ";\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-right-link {\n        padding-right: ").concat(spacingTopNavigationTextLinkPaddingRight, "px;\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  var onGoBack = function onGoBack() {
+    if (goBack) {
+      goBack();
+    }
+  };
+  return /*#__PURE__*/_jsxs("header", _objectSpread(_objectSpread({
+    className: "".concat(cssClasses.PREFIX, "-header  ").concat(hideBorder ? 'hideBorder' : '', "  ").concat(isInverse ? 'inverse' : '', " ").concat(imgBackground ? 'imgBackground' : '', " ").concat(noRight ? 'noRight' : '', " ").concat(className || '')
+  }, restProps), {}, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      className: "".concat(cssClasses.PREFIX, "-header-back"),
+      customeIconSize: leftIconSize,
+      inverse: isInverse,
+      size: "medium",
+      name: leftIconName || "icon-a-Backarrow-copy",
+      onClick: onGoBack
+    }), /*#__PURE__*/_jsx("div", {
+      className: "\n        ".concat(cssClasses.PREFIX, "-title-warp\n      "),
+      children: !isEmpty(titleIconBadge) ? /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-title-badge"),
+        children: [/*#__PURE__*/_jsx(Icon, {
+          inverse: isInverse,
+          size: 24,
+          style: {
+            marginRight: '4px'
+          },
+          name: titleIconBadge.iconName
+        }), /*#__PURE__*/_jsx(Text, {
+          inverse: isInverse,
+          size: "ContentC14Bold",
+          className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),
+          children: titleIconBadge.title
+        }), /*#__PURE__*/_jsx("div", {
+          className: "".concat(cssClasses.PREFIX, "-badge"),
+          children: +titleIconBadge.badge > 99 ? '99+' : titleIconBadge.badge
+        })]
+      }) : /*#__PURE__*/_jsx(Text, {
+        inverse: isInverse,
+        size: "ContentC14Bold",
+        className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),
+        children: title
+      })
+    }), !noRight && /*#__PURE__*/_jsxs(IconButtonGroup, {
+      className: "".concat(cssClasses.PREFIX, "-rightWarp"),
+      children: [rightIcons === null || rightIcons === void 0 || (_rightIcons$slice = rightIcons.slice(0, 3)) === null || _rightIcons$slice === void 0 ? void 0 : _rightIcons$slice.map(function (i, index) {
+        return /*#__PURE__*/_jsx(IconButton, {
+          inverse: isInverse,
+          name: i.iconName,
+          size: "medium",
+          onClick: i.onIconClick
+        }, index);
+      }), !isEmpty(rightLink) && /*#__PURE__*/_jsx(TextLink, {
+        inverse: isInverse,
+        className: "".concat(cssClasses.PREFIX, "-right-link"),
+        type: TextLinkEnum.default,
+        text: rightLink.linkText,
+        onClick: rightLink.onLinkClick
+      })]
+    })]
+  }));
+};
+export default Navigation;

package/es/components/Navigation/style/index.less

@@ -0,0 +1,52 @@
+@import './variables.less';
+
+
+.@{prefix}-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 999;
+
+
+  .@{prefix}-title-warp {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .@{prefix}-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .@{prefix}-title-badge {
+    position: relative;
+    display: flex;
+
+    .@{prefix}-badge {
+      position: absolute;
+      right: -36px;
+      top: -2px;
+      background-color: #FA2C2C;
+      color: #FFF;
+      height: 18px;
+      width: 38px;
+      border-radius: 18px;
+      font-size: 12px;
+      text-align: center;
+      line-height: 18px;
+    }
+  }
+}
+
+.@{prefix}-rightWarp {
+  flex: 0 0 auto;
+  /* 关键！禁止伸缩 */
+
+}

package/es/components/Navigation/style/variables.less

@@ -0,0 +1 @@
+@import '../../../style/variables.less';

package/es/components/Search/designTokens.d.ts

@@ -0,0 +1,34 @@
+declare const otherDesignTokens: {
+    spacingSearchInputIconPaddingRight: any;
+    spacingSearchInputPaddingHorizontal: any;
+    colorSearchInputIconStandard: any;
+    spacingSearchInputVerticalGap: any;
+    colorSearchInputBackground: any;
+    colorSearchInputBackgroundHover: any;
+    colorSearchInputBorderStandard: any;
+    colorSearchInputTextPlaceholder: any;
+    colorSearchInputTextLabel: any;
+    colorSearchInputTextResults: any;
+    spacingSearchInputResultPaddingVertical: any;
+    spacingSearchInputResultListPaddingLeft: any;
+    spacingSearchInputResultListPaddingRight: any;
+};
+declare const designTokens: {
+    borderRadius: any;
+    paddingBlock: number;
+    paddingInline: any;
+    colorText: any;
+    hoverBorderColor: any;
+    activeBorderColor: any;
+    activeShadow: string;
+    colorBgContainer: any;
+    borderWidthInputStandard: any;
+    colorBorder: any;
+    colorInputTextPlaceholder: any;
+    fontSize: any;
+    lineHeight: number;
+};
+declare const styleToken: {
+    [x: string]: any;
+};
+export { designTokens, otherDesignTokens, styleToken };

package/es/components/Search/designTokens.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { getToken } from "../../utils/tokenHelper";
+// import { wSacle } from '@/utils/scaleTool';
+import { cssClasses } from "../../constants";
+var prefixCls = cssClasses.PREFIX + '-input-outside';
+var otherDesignTokens = {
+  spacingSearchInputIconPaddingRight: getToken('spacingSearchInputIconPaddingRight'),
+  spacingSearchInputPaddingHorizontal: getToken('spacingSearchInputPaddingHorizontal'),
+  colorSearchInputIconStandard: getToken('colorSearchInputIconStandard'),
+  // 搜索图标颜色
+  spacingSearchInputVerticalGap: getToken('spacingSearchInputVerticalGap'),
+  colorSearchInputBackground: getToken('colorSearchInputBackground'),
+  colorSearchInputBackgroundHover: getToken('colorSearchInputBackgroundHover'),
+  colorSearchInputBorderStandard: getToken('colorSearchInputBorderStandard'),
+  colorSearchInputTextPlaceholder: getToken('colorSearchInputTextPlaceholder'),
+  colorSearchInputTextLabel: getToken('colorSearchInputTextLabel'),
+  colorSearchInputTextResults: getToken('colorSearchInputTextResults'),
+  spacingSearchInputResultPaddingVertical: getToken('spacingSearchInputResultPaddingVertical'),
+  spacingSearchInputResultListPaddingLeft: getToken('spacingSearchInputResultListPaddingLeft'),
+  spacingSearchInputResultListPaddingRight: getToken('spacingSearchInputResultListPaddingRight')
+};
+var designTokens = {
+  borderRadius: getToken('borderRadiusInput'),
+  // 圆角
+  paddingBlock: 10,
+  // 纵向内边距
+  paddingInline: otherDesignTokens.spacingSearchInputPaddingHorizontal + 16 + otherDesignTokens.spacingSearchInputIconPaddingRight,
+  // 横向内边距
+  colorText: getToken('colorInputTextActive'),
+  // 内容文本颜色
+  hoverBorderColor: getToken('colorInputBorderActive'),
+  // hover边框颜色
+  activeBorderColor: getToken('colorInputBorderActive'),
+  // active边框颜色
+  activeShadow: 'none',
+  // activeShadow: '0px 0px 0px 2px #180C8E33', // 边框shadow颜色
+  colorBgContainer: getToken('colorInputBackground'),
+  // 背景颜色
+  borderWidthInputStandard: getToken('borderWidthInputStandard'),
+  // 标准边框宽度
+  colorBorder: getToken('colorInputBorderStandard'),
+  // 标准边框颜色
+  colorInputTextPlaceholder: getToken('colorInputTextPlaceholder'),
+  // placeholder文本颜色
+  fontSize: getToken('ContentC14Regular'),
+  // 字体大小
+  lineHeight: 1.5
+  // colorBgContainerDisabled: getToken('colorInputBackgroundHaze'), // 背景颜色
+};
+var styleToken = _defineProperty({}, "--".concat(prefixCls, "-color-error-border-hover"), getToken('colorInputBorderError'));
+export { designTokens, otherDesignTokens, styleToken };

package/es/components/Search/index.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import './style/index.less';
+export interface SearchProps {
+    placeholder?: string;
+    resultList?: ReactNode;
+    onSearch?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    showResult?: boolean;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Search: (props: SearchProps) => React.JSX.Element;
+export default Search;

package/es/components/Search/index.js

@@ -0,0 +1,85 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { cssClasses } from "../../constants";
+import { designTokens, otherDesignTokens } from "./designTokens";
+import Icon from "../Icon";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Search = function Search(props) {
+  var placeholder = props.placeholder,
+    resultList = props.resultList,
+    _props$onSearch = props.onSearch,
+    onSearch = _props$onSearch === void 0 ? function () {} : _props$onSearch,
+    _props$onEnter = props.onEnter,
+    onEnter = _props$onEnter === void 0 ? function () {} : _props$onEnter,
+    showResult = props.showResult;
+  var prefix = "".concat(cssClasses.PREFIX, "-search");
+  var colorSearchInputIconStandard = otherDesignTokens.colorSearchInputIconStandard,
+    spacingSearchInputPaddingHorizontal = otherDesignTokens.spacingSearchInputPaddingHorizontal,
+    spacingSearchInputVerticalGap = otherDesignTokens.spacingSearchInputVerticalGap,
+    colorSearchInputBackground = otherDesignTokens.colorSearchInputBackground,
+    spacingSearchInputResultPaddingVertical = otherDesignTokens.spacingSearchInputResultPaddingVertical,
+    colorSearchInputTextResults = otherDesignTokens.colorSearchInputTextResults,
+    spacingSearchInputResultListPaddingLeft = otherDesignTokens.spacingSearchInputResultListPaddingLeft,
+    spacingSearchInputResultListPaddingRight = otherDesignTokens.spacingSearchInputResultListPaddingRight,
+    colorSearchInputBackgroundHover = otherDesignTokens.colorSearchInputBackgroundHover,
+    colorSearchInputBorderStandard = otherDesignTokens.colorSearchInputBorderStandard;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {
+        baseColor: 'blue'
+      },
+      path: ["".concat(prefix)]
+    }, function () {
+      return "\n      .".concat(prefix, "-icon {\n        color: ").concat(colorSearchInputIconStandard, ";\n        top: 15px;\n        left: ").concat(spacingSearchInputPaddingHorizontal, "px;\n      }\n      .").concat(prefix, "-result {\n        margin-top: ").concat(spacingSearchInputVerticalGap, "px;\n        padding: ").concat(spacingSearchInputResultPaddingVertical, "px 0;\n        border: 1px solid ").concat(colorSearchInputBorderStandard, ";\n        background: ").concat(colorSearchInputBackground, ";\n        border-radius: ").concat(designTokens.borderRadius, "px;\n        color: ").concat(colorSearchInputTextResults, ";\n      }\n      .").concat(prefix, "-result li {\n        padding: ").concat(spacingSearchInputResultPaddingVertical, "px ").concat(spacingSearchInputResultListPaddingRight, "px ").concat(spacingSearchInputResultPaddingVertical, "px ").concat(spacingSearchInputResultListPaddingLeft, "px;\n        line-height: 24px;\n      }\n      .").concat(prefix, "-result li:hover {\n        background: ").concat(colorSearchInputBackgroundHover, ";\n      }\n      .").concat(prefix, "-result li a {\n        color: ").concat(colorSearchInputTextResults, ";\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+
+  // const customStyle = styleToken as React.CSSProperties;
+
+  // const formDesign = layout === 'vertical' ? designFormTokens : designFormHorizontalTokens;
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    wave: {
+      disabled: true
+    },
+    prefixCls: prefix,
+    theme: {
+      components: {
+        Input: _objectSpread({}, designTokens)
+      },
+      cssVar: true,
+      hashed: false
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: prefix,
+      children: [/*#__PURE__*/_jsx(_Input, {
+        placeholder: placeholder,
+        onChange: function onChange(e) {
+          var val = e.target.value || '';
+          onSearch(val);
+        },
+        onPressEnter: function onPressEnter(e) {
+          var val = e.target.value || '';
+          onEnter(val);
+        }
+      }), /*#__PURE__*/_jsx(Icon, {
+        className: "".concat(prefix, "-icon"),
+        size: 16,
+        name: "icon-Search"
+      }), resultList && /*#__PURE__*/_jsx("div", {
+        className: showResult ? "".concat(prefix, "-result ").concat(prefix, "-result-show") : "".concat(prefix, "-result"),
+        children: resultList
+      })]
+    })
+  });
+};
+export default Search;

package/es/components/Search/style/index.less

@@ -0,0 +1,32 @@
+@import './variables.less';
+
+// 基础按钮样式
+@components: search;
+
+.@{prefix}-@{components} {
+  position: relative;
+}
+
+.@{prefix}-@{components}-icon {
+  position: absolute;
+  line-height: 1;
+}
+
+.@{prefix}-@{components}-result {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 46px;
+  width: 100%;
+  z-index: 9;
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      list-style: none;
+    }
+  }
+}
+.@{prefix}-@{components}-result-show {
+  display: block;
+}

package/es/components/Search/style/variables.less

@@ -0,0 +1,5 @@
+
+@import '../../../style/variables.less';
+
+// Primary Button
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/Stepper/designTokens.d.ts

@@ -0,0 +1,26 @@
+declare const designTokens: {
+    colorText: any;
+    colorTextDescription: any;
+    colorTextLightSolid: any;
+    colorPrimary: any;
+    colorBorderBg: any;
+    colorBorderSecondary: any;
+    colorSplit: any;
+};
+declare const otherDesignTokens: {
+    [x: string]: string;
+    '--ant-steps-icon-size': string;
+    '--ant-steps-icon-size-sm': string;
+    '--dxp-steps-icon-size': string;
+    '--dxp-steps-icon-size-sm': string;
+};
+declare const mobileDesignTokens: {
+    colorStepperBackgroundActiveWeak: any;
+    '--dxp-steps-color-neutral': any;
+    '--dxp-steps-color-secondary': any;
+    '--dxp-steps-color-label2': any;
+    '--dxp-steps-background-active': any;
+    '--dxp-steps-background-activeWeak': any;
+};
+export { otherDesignTokens, mobileDesignTokens, };
+export default designTokens;

package/es/components/Stepper/designTokens.js

@@ -0,0 +1,60 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _otherDesignTokens;
+import { getToken } from "../../utils/tokenHelper";
+import { cssClasses } from "../../constants";
+/*
+这里是 dxp 的 UI token，缓存在本地的内置变量；
+通过antd 提供的 ConfigProvider 注入了组件级 token 变量来实现 gomo 风格的UI组件；
+
+理论上可以通过2种方式来实现 antd 的样式定制：
+1. 直接写 /components/Button/style/button.less 文件通过 less 覆盖antd的样式，可控细节更多（相当于把  dxp 的 UI token 通过 less 的方式覆盖antd的样式）；
+2. 通过 ConfigProvider 注入组件级别的 token 变量，这种不用写 less 文件，但是可控细节更少，只能antd 提供了哪些 token，才能覆盖对应的值；
+目前优先选择第二种，因为第一种需要写 less 文件，要知道对应组件的dom结构，才能覆盖；而第二种只需要对齐 变量值，就能覆盖；
+*/
+var prefixCls = cssClasses.PREFIX + '-stepper';
+var designTokens = {
+  // 算法配置
+  // algorithm: true,
+
+  // 当前 高亮步骤 text描述|| 已完成步骤的 text 色都是它
+  colorText: getToken('colorStepperTextInactive'),
+  // 深灰
+  // 未开始的步骤text色 \ text描述色
+  colorTextDescription: getToken('colorStepperTextInactive'),
+  // 当前 高亮步骤 icon的 text 色
+  colorTextLightSolid: getToken('colorStepperTextActive'),
+  // 白色
+
+  // 高亮步骤 background色
+  colorPrimary: getToken('colorStepperBackgroundActive'),
+  // 蓝色
+  // 高亮步骤 分割线的颜色 此颜色和 colorPrimary 的颜色一致（自动的）
+
+  // 已完成 background 颜色  无此token 通过less 变量覆盖
+  // colorSuccess: getToken('colorStepperBackgroundSuccess'),
+
+  // 未开始 状态 background 颜色 无此token 通过less 变量覆盖
+  // processIconBgColor: getToken('colorStepperBackgroundInactive'),
+
+  //  进行中状态 线条颜色
+  colorBorderBg: getToken('colorStepperBorderActive'),
+  colorBorderSecondary: getToken('colorStepperConnectorInactive'),
+  // colorSplit 未开始 分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致
+  colorSplit: getToken('colorStepperConnectorInactive') // 灰色
+
+  // color.stepper.icon.success
+  // fontSize: '14px',
+  // fontSizeSM: '14px',
+};
+var otherDesignTokens = (_otherDesignTokens = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_otherDesignTokens, "--".concat(cssClasses.PREFIX, "-progress-default-color"), "".concat(getToken('colorStepperBorderActive'))), "--".concat(prefixCls, "-progress-default-color"), "".concat(getToken('colorStepperBorderActive'))), "--".concat(prefixCls, "-progress-border-width"), "".concat(getToken('borderWidthStepperActive'))), "--".concat(prefixCls, "-progress-border-connector"), "".concat(getToken('borderWidthStepperConnector'))), "--".concat(prefixCls, "-finish-icon-bg-color"), "".concat(getToken('colorStepperBackgroundSuccess'))), "--".concat(prefixCls, "-finish-icon-border-color"), "".concat(getToken('colorStepperBackgroundSuccess'))), "--".concat(prefixCls, "-finish-icon-success"), "".concat(getToken('colorStepperIconSuccess'))), "--".concat(prefixCls, "-finish-line-color"), "".concat(getToken('colorStepperConnectorSuccess'))), "--".concat(prefixCls, "-wait-icon-bg-color"), "".concat(getToken('colorStepperBackgroundInactive'))), "--".concat(prefixCls, "-wait-icon-border-color"), "".concat(getToken('colorStepperBackgroundInactive'))), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_otherDesignTokens, "--".concat(prefixCls, "-wait-icon-color"), "".concat(getToken('colorStepperTextLabel'))), '--ant-steps-icon-size', getToken('sizingStepperOuter') + 'px'), '--ant-steps-icon-size-sm', getToken('sizingStepperInner') + 'px'), '--dxp-steps-icon-size', getToken('sizingStepperOuter') + 'px'), '--dxp-steps-icon-size-sm', getToken('sizingStepperInner') + 'px'));
+var mobileDesignTokens = {
+  colorStepperBackgroundActiveWeak: getToken('colorStepperBackgroundActiveWeak'),
+  // moblie
+  '--dxp-steps-color-neutral': getToken('colorStepperTextNeutral'),
+  '--dxp-steps-color-secondary': getToken('colorStepperTextLabel'),
+  '--dxp-steps-color-label2': getToken('colorStepperTextLabel2'),
+  '--dxp-steps-background-active': getToken('colorStepperBackgroundActive'),
+  '--dxp-steps-background-activeWeak': getToken('colorStepperBackgroundActiveWeak')
+};
+export { otherDesignTokens, mobileDesignTokens };
+export default designTokens;

package/es/components/Stepper/index.d.ts

@@ -0,0 +1,22 @@
+import { StepsProps } from 'antd';
+import React, { PureComponent } from 'react';
+import './style/index.less';
+export interface StepperProps extends Omit<StepsProps, 'description'> {
+    description?: string;
+    prefixCls?: string;
+    breakpoint?: 'desktop' | 'mobile';
+    percent?: number;
+    title?: string;
+    labelPlacement?: 'horizontal' | 'vertical';
+    nextStepText?: string;
+    [key: string]: any;
+}
+export default class Stepper extends PureComponent<StepperProps> {
+    static defaultProps: {
+        prefixCls: string;
+        breakpoint: string;
+        labelPlacement: string;
+    };
+    descriptionText: (content: React.ReactNode) => React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/es/components/Stepper/index.js

@@ -0,0 +1,153 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/steps/style";
+import _Steps from "antd/es/steps";
+import "antd/es/progress/style";
+import _Progress from "antd/es/progress";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { PureComponent } from 'react';
+import { cssClasses } from "../../constants";
+import Text from "../Text";
+import designTokens, { mobileDesignTokens, otherDesignTokens } from "./designTokens";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Stepper = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Stepper, _PureComponent);
+  var _super = _createSuper(Stepper);
+  function Stepper() {
+    var _this;
+    _classCallCheck(this, Stepper);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "descriptionText", function (content) {
+      return /*#__PURE__*/_jsx(Text, {
+        className: cssClasses.PREFIX + '-stepper-description',
+        size: "ContentC12Bold",
+        children: content
+      });
+    });
+    return _this;
+  }
+  _createClass(Stepper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        style = _this$props.style,
+        items = _this$props.items,
+        children = _this$props.children,
+        breakpoint = _this$props.breakpoint,
+        percent = _this$props.percent,
+        current = _this$props.current,
+        _this$props$nextStepT = _this$props.nextStepText,
+        nextStepText = _this$props$nextStepT === void 0 ? 'Next Step:' : _this$props$nextStepT;
+
+      // 处理 items 方式
+      var processedItems = items === null || items === void 0 ? void 0 : items.map(function (item) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          description: _this2.descriptionText(item.description)
+        });
+      });
+
+      // 处理 children 方式
+      var processedChildren = children && React.Children.map(children, function (child) {
+        if ( /*#__PURE__*/React.isValidElement(child)) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            description: _this2.descriptionText(child.props.description)
+          });
+        }
+        return child;
+      });
+
+      // 计算总步骤数
+      var totalSteps = (items === null || items === void 0 ? void 0 : items.length) || React.Children.count(children) || 0;
+      // 优化获取步骤信息的逻辑
+      var getStepInfo = function getStepInfo(items, current) {
+        var _items$current, _items;
+        var hasNextStep = items && current !== undefined && current < items.length - 1;
+        return {
+          title: hasNextStep ? ((_items$current = items[current]) === null || _items$current === void 0 ? void 0 : _items$current.title) || '' : '',
+          nextStep: hasNextStep ? ((_items = items[current + 1]) === null || _items === void 0 ? void 0 : _items.title) || '' : ''
+        };
+      };
+
+      // 在 render 方法中使用
+      var _getStepInfo = getStepInfo(items, current),
+        title = _getStepInfo.title,
+        nextStep = _getStepInfo.nextStep;
+      return /*#__PURE__*/_jsx(_ConfigProvider, {
+        prefixCls: cssClasses.PREFIX,
+        theme: {
+          components: {
+            Steps: _objectSpread({}, designTokens)
+          },
+          cssVar: true,
+          hashed: false
+        },
+        children: breakpoint === 'mobile' ? /*#__PURE__*/_jsx("div", {
+          className: "".concat(cssClasses.PREFIX, "-stepper-m"),
+          style: _objectSpread(_objectSpread({}, mobileDesignTokens), style),
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "".concat(cssClasses.PREFIX, "-stepper-m-header"),
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: "".concat(cssClasses.PREFIX, "-stepper-m-count"),
+              children: [/*#__PURE__*/_jsx(Text, {
+                className: "".concat(cssClasses.PREFIX, "-stepper-m-neutral"),
+                breakpoint: "mobile",
+                size: "TitleT41Bold",
+                children: String(current !== undefined ? current + 1 : 1).padStart(2, '0')
+              }), /*#__PURE__*/_jsx(Text, {
+                breakpoint: "mobile",
+                size: "TitleT15Bold",
+                children: "/"
+              }), /*#__PURE__*/_jsx(Text, {
+                className: "".concat(cssClasses.PREFIX, "-stepper-m-secondary"),
+                breakpoint: "mobile",
+                size: "TitleT23Bold",
+                children: totalSteps
+              })]
+            }), /*#__PURE__*/_jsx(_Progress, {
+              percent: percent,
+              status: "active",
+              strokeColor: designTokens.colorPrimary,
+              trailColor: mobileDesignTokens.colorStepperBackgroundActiveWeak,
+              showInfo: false,
+              size: ['100%', 8]
+            }), title && /*#__PURE__*/_jsx(Text, {
+              className: "".concat(cssClasses.PREFIX, "-stepper-m-title"),
+              breakpoint: "mobile",
+              size: "TitleT15Bold",
+              children: title
+            }), nextStep && /*#__PURE__*/_jsx("div", {
+              className: "".concat(cssClasses.PREFIX, "-stepper-m-next"),
+              children: /*#__PURE__*/_jsxs(Text, {
+                type: "secondary",
+                size: "ContentC12Regular",
+                children: [nextStepText, " ", nextStep]
+              })
+            })]
+          })
+        }) : /*#__PURE__*/_jsx(_Steps, _objectSpread(_objectSpread({}, this.props), {}, {
+          items: processedItems,
+          style: _objectSpread(_objectSpread({}, otherDesignTokens), style),
+          children: processedChildren
+        }))
+      });
+    }
+  }]);
+  return Stepper;
+}(PureComponent);
+_defineProperty(Stepper, "defaultProps", {
+  prefixCls: cssClasses.PREFIX + '-stepper',
+  breakpoint: 'desktop',
+  labelPlacement: 'vertical'
+});
+export { Stepper as default };