@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/es/components/Navigation/index.js

@@ -1,8 +1,8 @@
 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"];
+var _excluded = ["hideBorder", "className", "rightIcons", "rightLink", "title", "goBack", "isInverse", "titleIconBadge", "imgBackground", "noRight", "leftIconName", "leftIconSize", "hidegoback"];
 import React from 'react';
-import designTokens from "./designTokens";
+import { useDesignTokens } from "./designTokens";
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { isEmpty } from 'lodash';
 import { theme } from "../../utils/theme";
@@ -13,7 +13,8 @@ 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,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
     rightIcons = _ref.rightIcons,
     rightLink = _ref.rightLink,
     title = _ref.title,
@@ -25,9 +26,13 @@ var Navigation = function Navigation(_ref) {
     noRight = _ref$noRight === void 0 ? false : _ref$noRight,
     leftIconName = _ref.leftIconName,
     leftIconSize = _ref.leftIconSize,
+    _ref$hidegoback = _ref.hidegoback,
+    hidegoback = _ref$hidegoback === void 0 ? false : _ref$hidegoback,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var designTokens = useDesignTokens();
   var spacingTopNavigationPaddingHorizontal = designTokens.spacingTopNavigationPaddingHorizontal,
     spacingTopNavigationPaddingBottom = designTokens.spacingTopNavigationPaddingBottom,
+    spacingTopNavigationPaddingTop = designTokens.spacingTopNavigationPaddingTop,
     colorTopNavigationBorderBottom = designTokens.colorTopNavigationBorderBottom,
     spacingTopNavigationTextLinkPaddingRight = designTokens.spacingTopNavigationTextLinkPaddingRight,
     colorTopNavigationBackgroundInverse = designTokens.colorTopNavigationBackgroundInverse,
@@ -35,14 +40,13 @@ var Navigation = function Navigation(_ref) {
     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 "\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(spacingTopNavigationPaddingTop, "px;  \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;
   };
@@ -53,9 +57,9 @@ var Navigation = function Navigation(_ref) {
     }
   };
   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 || '')
+    className: "".concat(cssClasses.PREFIX, "-header ").concat(hideBorder ? 'hideBorder' : '', " ").concat(isInverse ? 'inverse' : '', " ").concat(imgBackground ? 'imgBackground' : '', " ").concat(noRight ? 'noRight' : '', " ").concat(className || '')
   }, restProps), {}, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
+    children: [!hidegoback && /*#__PURE__*/_jsx(IconButton, {
       className: "".concat(cssClasses.PREFIX, "-header-back"),
       customeIconSize: leftIconSize,
       inverse: isInverse,
@@ -63,7 +67,7 @@ var Navigation = function Navigation(_ref) {
       name: leftIconName || "icon-a-Backarrow-copy",
       onClick: onGoBack
     }), /*#__PURE__*/_jsx("div", {
-      className: "\n        ".concat(cssClasses.PREFIX, "-title-warp\n      "),
+      className: "".concat(cssClasses.PREFIX, "-title-warp"),
       children: !isEmpty(titleIconBadge) ? /*#__PURE__*/_jsxs("div", {
         className: "".concat(cssClasses.PREFIX, "-title-badge"),
         children: [/*#__PURE__*/_jsx(Icon, {
@@ -75,7 +79,7 @@ var Navigation = function Navigation(_ref) {
           name: titleIconBadge.iconName
         }), /*#__PURE__*/_jsx(Text, {
           inverse: isInverse,
-          size: "ContentC14Bold",
+          size: "NavigationBold",
           className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),
           children: titleIconBadge.title
         }), /*#__PURE__*/_jsx("div", {
@@ -84,7 +88,7 @@ var Navigation = function Navigation(_ref) {
         })]
       }) : /*#__PURE__*/_jsx(Text, {
         inverse: isInverse,
-        size: "ContentC14Bold",
+        size: "NavigationBold",
         className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),
         children: title
       })

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

@@ -0,0 +1,9 @@
+declare const useDesignTokens: () => {
+    colorNotificationBackgroundInfo: any;
+    borderRadiusNotification: any;
+    spacingNotificationPaddingHorizontal: any;
+    spacingNotificationPaddingVertical: any;
+    colorNotificationTextTitle: any;
+    colorNotificationTextBody: any;
+};
+export { useDesignTokens };

package/es/components/Notification/designTokens.js

@@ -0,0 +1,14 @@
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    colorNotificationBackgroundInfo: getToken('colorNotificationBackgroundInfo'),
+    borderRadiusNotification: getToken('borderRadiusNotification'),
+    spacingNotificationPaddingHorizontal: getToken('spacingNotificationPaddingHorizontal'),
+    spacingNotificationPaddingVertical: getToken('spacingNotificationPaddingVertical'),
+    colorNotificationTextTitle: getToken('colorNotificationTextTitle'),
+    colorNotificationTextBody: getToken('colorNotificationTextBody')
+  };
+  return designTokens;
+};
+export { useDesignTokens };

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import './style/index.less';
+export interface NotificationProps {
+    type?: 'info';
+    className?: string;
+    title?: ReactNode;
+    content?: ReactNode;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Notification: (props: NotificationProps) => React.JSX.Element;
+export default Notification;

package/es/components/Notification/index.js

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "prefixCls", "type", "title", "content"];
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { useDesignTokens } from "./designTokens";
+import { cssClasses } from "../../constants";
+import { Text } from "../";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Notification = function Notification(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? cssClasses.PREFIX + '-notification' : _props$prefixCls,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'info' : _props$type,
+    title = props.title,
+    content = props.content,
+    attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var colorNotificationBackgroundInfo = designTokens.colorNotificationBackgroundInfo,
+    borderRadiusNotification = designTokens.borderRadiusNotification,
+    spacingNotificationPaddingHorizontal = designTokens.spacingNotificationPaddingHorizontal,
+    spacingNotificationPaddingVertical = designTokens.spacingNotificationPaddingVertical,
+    colorNotificationTextTitle = designTokens.colorNotificationTextTitle,
+    colorNotificationTextBody = designTokens.colorNotificationTextBody;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: [prefixCls]
+    }, function () {
+      return "\n      .".concat(prefixCls, " {\n        display: flex;\n        flex-flow: column;\n        padding: ").concat(spacingNotificationPaddingVertical, "px ").concat(spacingNotificationPaddingHorizontal, "px;\n        border-radius: ").concat(borderRadiusNotification, "px;\n        background: ").concat(colorNotificationBackgroundInfo, ";\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(type, " ").concat(className)
+  }, attr), {}, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      size: "TitleT14Bold",
+      color: colorNotificationTextTitle,
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      size: "ContentC12Regular",
+      color: colorNotificationTextBody,
+      children: content
+    })]
+  }));
+};
+export default Notification;

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

@@ -0,0 +1,45 @@
+
+@import './variables.less';
+
+@components: card;
+.@{prefix}-@{components} {
+  background: #FFFFFF;
+  overflow: unset;
+}
+.@{prefix}-@{components}-whiteDivider,
+.@{prefix}-@{components}-grayDivider {
+  padding: 0;
+  .@{prefix}-@{components}-list {
+    background: #FFFFFF;
+    overflow: unset;
+    > div {
+      position: relative;
+    }
+    > div + div {
+      border-top: 1px dashed #D5D5D5;
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        height: 16px;
+        width: 8px;
+        position: absolute;
+        z-index: 99;
+        top: -8px;
+        border: 1px solid #d5d5d5;
+      }
+      &::before {
+        left: -1px;
+        border-top-right-radius: 16px;
+        border-bottom-right-radius: 16px;
+        border-left: 0;
+      }
+      &::after {
+        right: -1px;
+        border-top-left-radius: 16px;
+        border-bottom-left-radius: 16px;
+        border-right: 0;
+      }
+    }
+  }
+}

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

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

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

@@ -1,4 +1,4 @@
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     spacingSearchInputIconPaddingRight: any;
     spacingSearchInputPaddingHorizontal: any;
     colorSearchInputIconStandard: any;
@@ -13,7 +13,7 @@ declare const otherDesignTokens: {
     spacingSearchInputResultListPaddingLeft: any;
     spacingSearchInputResultListPaddingRight: any;
 };
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadius: any;
     paddingBlock: number;
     paddingInline: any;
@@ -28,7 +28,7 @@ declare const designTokens: {
     fontSize: any;
     lineHeight: number;
 };
-declare const styleToken: {
+declare const useStyleToken: () => {
     [x: string]: any;
 };
-export { designTokens, otherDesignTokens, styleToken };
+export { useOtherDesignTokens, useDesignTokens, useStyleToken };

package/es/components/Search/designTokens.js

@@ -1,51 +1,62 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { getToken } from "../../utils/tokenHelper";
-// import { wSacle } from '@/utils/scaleTool';
 import { cssClasses } from "../../constants";
+import { useDynamicTokens } from "../../utils";
 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 useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  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')
+  };
+  return otherDesignTokens;
 };
-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 useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderRadius: getToken('borderRadiusInput'),
+    // 圆角
+    paddingBlock: 10,
+    // 纵向内边距
+    paddingInline: getToken('spacingSearchInputPaddingHorizontal'),
+    // 横向内边距
+    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'), // 背景颜色
+  };
+  return designTokens;
 };
-var styleToken = _defineProperty({}, "--".concat(prefixCls, "-color-error-border-hover"), getToken('colorInputBorderError'));
-export { designTokens, otherDesignTokens, styleToken };
+var useStyleToken = function useStyleToken() {
+  var getToken = useDynamicTokens();
+  var styleToken = _defineProperty({}, "--".concat(prefixCls, "-color-error-border-hover"), getToken('colorInputBorderError'));
+  return styleToken;
+};
+export { useOtherDesignTokens, useDesignTokens, useStyleToken };

package/es/components/Search/index.js

@@ -3,11 +3,13 @@ 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 _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["placeholder", "resultList", "onSearch", "onEnter", "showResult", "className"];
 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 { useOtherDesignTokens, useDesignTokens } from "./designTokens";
 import Icon from "../Icon";
 import "./style/index.less";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,10 +20,16 @@ var Search = function Search(props) {
     onSearch = _props$onSearch === void 0 ? function () {} : _props$onSearch,
     _props$onEnter = props.onEnter,
     onEnter = _props$onEnter === void 0 ? function () {} : _props$onEnter,
-    showResult = props.showResult;
+    showResult = props.showResult,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    attr = _objectWithoutProperties(props, _excluded);
   var prefix = "".concat(cssClasses.PREFIX, "-search");
+  var otherDesignTokens = useOtherDesignTokens();
+  var designTokens = useDesignTokens();
   var colorSearchInputIconStandard = otherDesignTokens.colorSearchInputIconStandard,
     spacingSearchInputPaddingHorizontal = otherDesignTokens.spacingSearchInputPaddingHorizontal,
+    spacingSearchInputIconPaddingRight = otherDesignTokens.spacingSearchInputIconPaddingRight,
     spacingSearchInputVerticalGap = otherDesignTokens.spacingSearchInputVerticalGap,
     colorSearchInputBackground = otherDesignTokens.colorSearchInputBackground,
     spacingSearchInputResultPaddingVertical = otherDesignTokens.spacingSearchInputResultPaddingVertical,
@@ -33,12 +41,10 @@ var Search = function Search(props) {
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
+      token: {},
       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 "\n      .".concat(prefix, " {\n        .").concat(prefix, "-input,\n        .").concat(prefix, "-input-affix-wrapper {\n          padding-left: ").concat(spacingSearchInputPaddingHorizontal + 16 + spacingSearchInputIconPaddingRight, "px;\n        }\n      }\n      .").concat(prefix, "-icon {\n        color: ").concat(colorSearchInputIconStandard, ";\n        top: 15px;\n        left: ").concat(spacingSearchInputPaddingHorizontal, "px;\n        z-index: 2;\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;
   };
@@ -60,8 +66,8 @@ var Search = function Search(props) {
       hashed: false
     },
     children: /*#__PURE__*/_jsxs("div", {
-      className: prefix,
-      children: [/*#__PURE__*/_jsx(_Input, {
+      className: "".concat(prefix, " ").concat(className),
+      children: [/*#__PURE__*/_jsx(_Input, _objectSpread({
         placeholder: placeholder,
         onChange: function onChange(e) {
           var val = e.target.value || '';
@@ -71,7 +77,7 @@ var Search = function Search(props) {
           var val = e.target.value || '';
           onEnter(val);
         }
-      }), /*#__PURE__*/_jsx(Icon, {
+      }, attr)), /*#__PURE__*/_jsx(Icon, {
         className: "".concat(prefix, "-icon"),
         size: 16,
         name: "icon-Search"

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorText: any;
     colorTextDescription: any;
     colorTextLightSolid: any;
@@ -7,14 +7,14 @@ declare const designTokens: {
     colorBorderSecondary: any;
     colorSplit: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     [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: {
+declare const useMobileDesignTokens: () => {
     colorStepperBackgroundActiveWeak: any;
     '--dxp-steps-color-neutral': any;
     '--dxp-steps-color-secondary': any;
@@ -22,5 +22,4 @@ declare const mobileDesignTokens: {
     '--dxp-steps-background-active': any;
     '--dxp-steps-background-activeWeak': any;
 };
-export { otherDesignTokens, mobileDesignTokens, };
-export default designTokens;
+export { useDesignTokens, useMobileDesignTokens, useOtherDesignTokens };

package/es/components/Stepper/designTokens.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _otherDesignTokens;
-import { getToken } from "../../utils/tokenHelper";
 import { cssClasses } from "../../constants";
+import { useDynamicTokens } from "../../utils";
 /*
 这里是 dxp 的 UI token，缓存在本地的内置变量；
 通过antd 提供的 ConfigProvider 注入了组件级 token 变量来实现 gomo 风格的UI组件；
@@ -12,49 +11,58 @@ import { cssClasses } from "../../constants";
 目前优先选择第二种，因为第一种需要写 less 文件，要知道对应组件的dom结构，才能覆盖；而第二种只需要对齐 变量值，就能覆盖；
 */
 var prefixCls = cssClasses.PREFIX + '-stepper';
-var designTokens = {
-  // 算法配置
-  // algorithm: true,
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  return {
+    // 算法配置
+    // algorithm: true,
 
-  // 当前 高亮步骤 text描述|| 已完成步骤的 text 色都是它
-  colorText: getToken('colorStepperTextInactive'),
-  // 深灰
-  // 未开始的步骤text色 \ text描述色
-  colorTextDescription: getToken('colorStepperTextInactive'),
-  // 当前 高亮步骤 icon的 text 色
-  colorTextLightSolid: getToken('colorStepperTextActive'),
-  // 白色
+    // 当前 高亮步骤 text描述|| 已完成步骤的 text 色都是它
+    colorText: getToken('colorStepperTextInactive'),
+    // 深灰
+    // 未开始的步骤text色 \ text描述色
+    colorTextDescription: getToken('colorStepperTextInactive'),
+    // 当前 高亮步骤 icon的 text 色
+    colorTextLightSolid: getToken('colorStepperTextActive'),
+    // 白色
 
-  // 高亮步骤 background色
-  colorPrimary: getToken('colorStepperBackgroundActive'),
-  // 蓝色
-  // 高亮步骤 分割线的颜色 此颜色和 colorPrimary 的颜色一致（自动的）
+    // 高亮步骤 background色
+    colorPrimary: getToken('colorStepperBackgroundActive'),
+    // 蓝色
+    // 高亮步骤 分割线的颜色 此颜色和 colorPrimary 的颜色一致（自动的）
 
-  // 已完成 background 颜色  无此token 通过less 变量覆盖
-  // colorSuccess: getToken('colorStepperBackgroundSuccess'),
+    // 已完成 background 颜色  无此token 通过less 变量覆盖
+    // colorSuccess: getToken('colorStepperBackgroundSuccess'),
 
-  // 未开始 状态 background 颜色 无此token 通过less 变量覆盖
-  // processIconBgColor: getToken('colorStepperBackgroundInactive'),
+    // 未开始 状态 background 颜色 无此token 通过less 变量覆盖
+    // processIconBgColor: getToken('colorStepperBackgroundInactive'),
 
-  //  进行中状态 线条颜色
-  colorBorderBg: getToken('colorStepperBorderActive'),
-  colorBorderSecondary: getToken('colorStepperConnectorInactive'),
-  // colorSplit 未开始 分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致
-  colorSplit: getToken('colorStepperConnectorInactive') // 灰色
+    //  进行中状态 线条颜色
+    colorBorderBg: getToken('colorStepperBorderActive'),
+    colorBorderSecondary: getToken('colorStepperConnectorInactive'),
+    // colorSplit 未开始 分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致
+    colorSplit: getToken('colorStepperConnectorInactive') // 灰色
 
-  // color.stepper.icon.success
-  // fontSize: '14px',
-  // fontSizeSM: '14px',
+    // 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')
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var _ref;
+  var getToken = useDynamicTokens();
+  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "--".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(_ref, "--".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');
 };
-export { otherDesignTokens, mobileDesignTokens };
-export default designTokens;
+var useMobileDesignTokens = function useMobileDesignTokens() {
+  var getToken = useDynamicTokens();
+  return {
+    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 { useDesignTokens, useMobileDesignTokens, useOtherDesignTokens };

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

@@ -1,22 +1,21 @@
 import { StepsProps } from 'antd';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import './style/index.less';
+export declare const stepperTypes: {
+    readonly default: "default";
+    readonly line: "line";
+};
+export type StepperType = typeof stepperTypes[keyof typeof stepperTypes];
 export interface StepperProps extends Omit<StepsProps, 'description'> {
     description?: string;
     prefixCls?: string;
     breakpoint?: 'desktop' | 'mobile';
+    stepperType?: StepperType;
     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;
-}
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;