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

package/es/components/ListItem/index.js

@@ -0,0 +1,227 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["listType", "leftIcon", "leftImageSrc", "title", "subTitle", "onToggleChange", "toggleChecked", "showToggle", "showLink", "LinkName", "onLinkClick", "showStatus", "statusIconName", "statusIconColor", "subTitleUp", "tagName", "showTag", "subIconObj", "leftThumbnail", "showRightBtn", "onRightBtnClick", "rightBtnTxt", "showRightIcon", "rightIconName", "onRightIconClick", "tappableArea", "tappableAreaClick"];
+import React from 'react';
+import designTokens from "./designTokens";
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { isEmpty } from 'lodash';
+import { theme } from "../../utils/theme";
+import { Icon, Image, Text, Toggle, TextLink, TextLinkEnum, Tag, BackImageEunm, Button } from "../index";
+import { cssClasses } from "../../constants";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var ListItemTypes = {
+  ListItemIcon: 'ListItemIcon',
+  ListItemImage: 'ListItemImage',
+  ListItemOther: 'ListItemOther'
+};
+export var TAPPABLE_AREAS = {
+  ALL: 'ALL',
+  // 点击全部区域
+  EXPECT_IMAGE: 'EXPECT_IMAGE' // 除了坐车的图片区域
+};
+export var ListItemRightTypes = {
+  Toggle: 'Toggle',
+  Link: 'Link',
+  Status: 'Status',
+  Default: 'Default'
+};
+var ListItem = function ListItem(_ref) {
+  var listType = _ref.listType,
+    leftIcon = _ref.leftIcon,
+    leftImageSrc = _ref.leftImageSrc,
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    onToggleChange = _ref.onToggleChange,
+    toggleChecked = _ref.toggleChecked,
+    showToggle = _ref.showToggle,
+    showLink = _ref.showLink,
+    LinkName = _ref.LinkName,
+    onLinkClick = _ref.onLinkClick,
+    showStatus = _ref.showStatus,
+    _ref$statusIconName = _ref.statusIconName,
+    statusIconName = _ref$statusIconName === void 0 ? "icon-Attention" : _ref$statusIconName,
+    _ref$statusIconColor = _ref.statusIconColor,
+    statusIconColor = _ref$statusIconColor === void 0 ? "#BC1430" : _ref$statusIconColor,
+    _ref$subTitleUp = _ref.subTitleUp,
+    subTitleUp = _ref$subTitleUp === void 0 ? false : _ref$subTitleUp,
+    tagName = _ref.tagName,
+    _ref$showTag = _ref.showTag,
+    showTag = _ref$showTag === void 0 ? false : _ref$showTag,
+    subIconObj = _ref.subIconObj,
+    leftThumbnail = _ref.leftThumbnail,
+    _ref$showRightBtn = _ref.showRightBtn,
+    showRightBtn = _ref$showRightBtn === void 0 ? false : _ref$showRightBtn,
+    onRightBtnClick = _ref.onRightBtnClick,
+    rightBtnTxt = _ref.rightBtnTxt,
+    _ref$showRightIcon = _ref.showRightIcon,
+    showRightIcon = _ref$showRightIcon === void 0 ? false : _ref$showRightIcon,
+    rightIconName = _ref.rightIconName,
+    onRightIconClick = _ref.onRightIconClick,
+    tappableArea = _ref.tappableArea,
+    tappableAreaClick = _ref.tappableAreaClick,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var sizingListItemImageImage = designTokens.sizingListItemImageImage,
+    borderRadiusListItem = designTokens.borderRadiusListItem,
+    colorListItemBackground = designTokens.colorListItemBackground,
+    colorListItemIconBackground = designTokens.colorListItemIconBackground,
+    spacingListItemTextPaddingHorizontal = designTokens.spacingListItemTextPaddingHorizontal,
+    sizingListItemIconIcon = designTokens.sizingListItemIconIcon,
+    colorListItemTextTitle = designTokens.colorListItemTextTitle,
+    colorListItemTextSubtitle = designTokens.colorListItemTextSubtitle,
+    colorListItemIconSubtle = designTokens.colorListItemIconSubtle,
+    sizingListItemImageIcon = designTokens.sizingListItemImageIcon,
+    spacingListItemImageIconPaddingRight = designTokens.spacingListItemImageIconPaddingRight,
+    colorListItemTextPoints = designTokens.colorListItemTextPoints,
+    sizingListItemImageThumbnail = designTokens.sizingListItemImageThumbnail,
+    sizingListItemIconLg = designTokens.sizingListItemIconLg;
+
+  // console.log('designTokens', designTokens);
+
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: ["".concat(cssClasses.PREFIX, "-list-item ")]
+    }, function () {
+      return "\n      .".concat(cssClasses.PREFIX, "-list-item  {\n        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);\n        border-radius: ").concat(borderRadiusListItem || 8, "px;\n        background-color:").concat(colorListItemBackground || '#fff', ";\n        &.noShadow{\n          box-shadow:none !important;\n        }\n        .").concat(cssClasses.PREFIX, "-icon-container {\n          background:").concat(colorListItemIconBackground || '#F5F5F8', ";\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n        .").concat(cssClasses.PREFIX, "-image-container {\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-item-right {\n        padding-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-status-warp {\n        padding-left: ").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-item-title {\n        color:").concat(colorListItemTextTitle, ";\n      }\n      .").concat(cssClasses.PREFIX, "-item-subTitle {\n        color:").concat(colorListItemTextSubtitle, ";\n      }\n     \n      .").concat(cssClasses.PREFIX, "-sub-icon-title {\n        color:").concat(colorListItemTextPoints, ";\n        margin-left:").concat(spacingListItemImageIconPaddingRight, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-right-btn {\n         min-width:60px !important;\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  var onAllClick = function onAllClick() {
+    if (tappableArea === TAPPABLE_AREAS.ALL && tappableAreaClick) {
+      tappableAreaClick();
+    }
+    ;
+  };
+  var onExceptImgClick = function onExceptImgClick(e) {
+    if (tappableArea === TAPPABLE_AREAS.EXPECT_IMAGE && tappableAreaClick) {
+      e === null || e === void 0 || e.stopPropagation();
+      tappableAreaClick();
+    }
+    ;
+  };
+  var onTextLinkClick = function onTextLinkClick(e) {
+    e === null || e === void 0 || e.stopPropagation();
+    if (onLinkClick) {
+      onLinkClick();
+    }
+  };
+  var onSwicthChange = function onSwicthChange(checked, event) {
+    event === null || event === void 0 || event.stopPropagation();
+    if (onToggleChange) {
+      onToggleChange(checked, event);
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "\n        ".concat(cssClasses.PREFIX, "-list-item \n        ").concat(listType === ListItemTypes.ListItemOther ? 'noShadow' : "", "\n      ")
+  }, restProps), {}, {
+    onClick: onAllClick,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "\n        ".concat(cssClasses.PREFIX, "-item-left \n      "),
+      children: [listType === ListItemTypes.ListItemIcon && !isEmpty(leftIcon) && /*#__PURE__*/_jsx("div", {
+        className: "".concat(cssClasses.PREFIX, "-icon-container"),
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: leftIcon ? leftIcon.iconName : '',
+          size: sizingListItemIconIcon,
+          style: leftIcon ? leftIcon.iconStyle : {}
+        })
+      }), listType === ListItemTypes.ListItemImage && leftImageSrc && /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-image-container"),
+        children: [/*#__PURE__*/_jsx(Image, {
+          radio: 1,
+          src: leftImageSrc,
+          imageSize: sizingListItemImageImage || 104
+        }), showTag && /*#__PURE__*/_jsx(Tag, {
+          types: "red",
+          style: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            justifyContent: 'center'
+          },
+          block: true,
+          children: tagName
+        })]
+      }), listType === ListItemTypes.ListItemOther && leftThumbnail && /*#__PURE__*/_jsx("div", {
+        className: "".concat(cssClasses.PREFIX, "-image-container"),
+        children: /*#__PURE__*/_jsx(Image, {
+          radio: BackImageEunm.whRadio1,
+          src: leftThumbnail,
+          imageSize: sizingListItemImageThumbnail || 56,
+          style: {
+            borderRadius: "".concat(borderRadiusListItem, "px"),
+            margin: '10px 0'
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "\n        ".concat(cssClasses.PREFIX, "-item-right \n      "),
+      onClick: onExceptImgClick,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-title-sub-warp"),
+        children: [subTitleUp && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          className: "".concat(cssClasses.PREFIX, "-item-subTitle"),
+          children: subTitle
+        }), /*#__PURE__*/_jsx(Text, {
+          size: "ContentC14Bold",
+          className: "".concat(cssClasses.PREFIX, "-item-title     \n               ").concat(subTitle ? 'line1' : 'line2', " \n              }"),
+          children: title
+        }), !subTitleUp && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          className: "".concat(cssClasses.PREFIX, "-item-subTitle"),
+          children: subTitle
+        }), !isEmpty(subIconObj) && /*#__PURE__*/_jsxs("div", {
+          className: "".concat(cssClasses.PREFIX, "-sub-icon"),
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: subIconObj.iconName,
+            color: colorListItemIconSubtle,
+            size: sizingListItemImageIcon || 20
+          }), /*#__PURE__*/_jsx(Text, {
+            size: "ContentC12Regular",
+            className: "".concat(cssClasses.PREFIX, "-sub-icon-title"),
+            children: subIconObj.value
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-status-warp"),
+        children: [showToggle && /*#__PURE__*/_jsx(Toggle, {
+          size: "small",
+          checked: toggleChecked,
+          onChange: onSwicthChange
+        }), showLink && /*#__PURE__*/_jsx(TextLink, {
+          className: "".concat(cssClasses.PREFIX, "-right-link"),
+          type: TextLinkEnum.default,
+          text: LinkName,
+          onClick: onTextLinkClick
+        }), showStatus && /*#__PURE__*/_jsx(Icon, {
+          name: statusIconName || '',
+          size: sizingListItemIconIcon,
+          color: statusIconColor
+        }), showRightBtn && /*#__PURE__*/_jsx(Button, {
+          className: "".concat(cssClasses.PREFIX, "-right-btn"),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            if (onRightBtnClick) {
+              onRightBtnClick();
+            }
+          },
+          children: rightBtnTxt
+        }), showRightIcon && /*#__PURE__*/_jsx(Icon, {
+          name: rightIconName || '',
+          size: sizingListItemIconLg,
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            if (onRightIconClick) {
+              onRightIconClick();
+            }
+          }
+        })]
+      })]
+    })]
+  }));
+};
+export default ListItem;

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

@@ -0,0 +1,77 @@
+@import './variables.less';
+
+.@{prefix}-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+
+  .@{prefix}-item-left {
+
+    .@{prefix}-icon-container {
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .@{prefix}-image-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+    }
+
+  }
+
+  .@{prefix}-item-right {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .@{prefix}-title-sub-warp {
+      flex: 1;
+      overflow: hidden;
+
+      .@{prefix}-item-title {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+
+        &.line1 {
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        &.line2 {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .@{prefix}-item-subTitle {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .@{prefix}-sub-icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+}

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

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

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

@@ -0,0 +1,31 @@
+declare const designTokens: {
+    borderRadiusLG: any;
+    titleColor: any;
+    contentBg: any;
+    headerBg: any;
+    colorText: any;
+    colorBgMask: any;
+};
+declare const otherDesignTokens: {
+    width: string;
+    spacingModalCardPaddingTop: any;
+    spacingModalButtonStickyPaddingVertical: any;
+    spacingModalCardVerticalGap: any;
+    spacingModalCardPaddingHorizontal: any;
+};
+declare const commonToken: {
+    [x: string]: string | number;
+};
+declare const styleToken: {
+    [x: string]: string | number;
+};
+declare const stickyFooterStyleToken: {
+    [x: string]: string | number;
+};
+declare const stickyHeaderFooterStyleToken: {
+    [x: string]: string | number;
+};
+declare const stickyHeaderStyleToken: {
+    [x: string]: string | number;
+};
+export { designTokens, otherDesignTokens, styleToken, stickyFooterStyleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken };

package/es/components/Modal/designTokens.js

@@ -0,0 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { getToken } from "../../utils/tokenHelper";
+import { cssClasses } from "../../constants";
+var prefixCls = cssClasses.PREFIX + '-modal';
+var designTokens = {
+  borderRadiusLG: getToken('borderRadiusModal'),
+  // 圆角
+  titleColor: getToken('colorModalTextHeader'),
+  // header文本颜色
+  contentBg: getToken('colorModalBackground'),
+  // 背景
+  headerBg: getToken('colorModalBackground'),
+  // 背景
+  colorText: getToken('colorModalTextBody'),
+  // 内容文本颜色
+  colorBgMask: getToken('colorModalOverlay') // 遮罩颜色
+};
+var otherDesignTokens = {
+  width: "calc(100vw - ".concat(getToken('spacingModalPaddingHorizontal'), "px - ").concat(getToken('spacingModalPaddingHorizontal'), "px)"),
+  // 宽度
+  spacingModalCardPaddingTop: getToken('spacingModalCardPaddingTop'),
+  spacingModalButtonStickyPaddingVertical: getToken('spacingModalButtonStickyPaddingVertical'),
+  spacingModalCardVerticalGap: getToken('spacingModalCardVerticalGap'),
+  spacingModalCardPaddingHorizontal: getToken('spacingModalCardPaddingHorizontal')
+};
+var commonToken = _defineProperty(_defineProperty({}, "--".concat(prefixCls, "-footer-margin-top"), 0), "--".concat(prefixCls, "-footer-padding"), "".concat(getToken('spacingModalButtonPaddingTop'), "px 0 0"));
+// header content footer都随滚动条滚
+var styleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(getToken('spacingModalCardPaddingBottom'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-border-top"), 'none'), "--".concat(prefixCls, "-footer-padding"), 0), "--".concat(prefixCls, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0")), "--".concat(prefixCls, "-header-margin-bottom"), 0);
+// header content都随滚动条滚,  footer不滚
+var stickyFooterStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(40 + getToken('spacingModalButtonStickyPaddingVertical') + getToken('spacingModalButtonStickyPaddingHorizontal'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(otherDesignTokens.spacingModalButtonStickyPaddingVertical, "px ").concat(getToken('spacingModalButtonStickyPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-border-top"), '1px solid #E1E1E1'), "--".concat(prefixCls, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0")), "--".concat(prefixCls, "-header-margin-bottom"), 0);
+// content随滚动条滚,  header和footer不滚
+var stickyHeaderFooterStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(40 + getToken('spacingModalButtonStickyPaddingVertical') + getToken('spacingModalButtonStickyPaddingHorizontal'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(otherDesignTokens.spacingModalButtonStickyPaddingVertical, "px ").concat(getToken('spacingModalButtonStickyPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-border-top"), '1px solid #E1E1E1'), "--".concat(prefixCls, "-body-padding"), 0), "--".concat(prefixCls, "-header-margin-bottom"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px"));
+// content和footer随滚动条滚,  header不滚
+var stickyHeaderStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "0 ".concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(getToken('spacingModalCardPaddingBottom'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0 0")), "--".concat(prefixCls, "-footer-border-top"), 'none'), "--".concat(prefixCls, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop * 2 + 26, "px 0 0 0")), "--".concat(prefixCls, "-header-margin-bottom"), 0), "--".concat(prefixCls, "-header-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px"));
+export { designTokens, otherDesignTokens, styleToken, stickyFooterStyleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken };

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style/index.less';
+export type ModalType = 'default' | 'stickyFooter' | 'stickyHeader' | 'stickyHeaderFooter';
+export type ModalSize = '50%' | '66%';
+export interface ModalProps {
+    type?: ModalType;
+    style?: React.CSSProperties;
+    theme?: string;
+    size?: ModalSize;
+    footerAlign?: 'left' | 'center' | 'right';
+    [key: string]: any;
+}
+declare const Modal: (props: ModalProps) => React.JSX.Element;
+export default Modal;

package/es/components/Modal/index.js

@@ -0,0 +1,101 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "style", "children", "type", "breakpoint", "size", "prefix", "footerAlign", "footer"];
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { cssClasses } from "../../constants";
+import { designTokens, otherDesignTokens, stickyFooterStyleToken, styleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken } from "./designTokens";
+import Text from "../Text";
+import "./style/index.less";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+var Modal = function Modal(props) {
+  var title = props.title,
+    style = props.style,
+    children = props.children,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'default' : _props$type,
+    _props$breakpoint = props.breakpoint,
+    breakpoint = _props$breakpoint === void 0 ? 'mobile' : _props$breakpoint,
+    _props$size = props.size,
+    size = _props$size === void 0 ? '50%' : _props$size,
+    _props$prefix = props.prefix,
+    prefix = _props$prefix === void 0 ? "".concat(cssClasses.PREFIX, "-modal") : _props$prefix,
+    _props$footerAlign = props.footerAlign,
+    footerAlign = _props$footerAlign === void 0 ? 'right' : _props$footerAlign,
+    _props$footer = props.footer,
+    footer = _props$footer === void 0 ? null : _props$footer,
+    attr = _objectWithoutProperties(props, _excluded);
+  var spacingModalCardPaddingTop = otherDesignTokens.spacingModalCardPaddingTop,
+    spacingModalButtonStickyPaddingVertical = otherDesignTokens.spacingModalButtonStickyPaddingVertical;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {
+        baseColor: 'blue'
+      },
+      path: ["".concat(prefix)]
+    }, function () {
+      return "\n      .".concat(prefix, "-sticky-headers .").concat(prefix, "-header {\n      }\n      .").concat(prefix, "-sticky-header.").concat(prefix, "-sticky-footer .").concat(prefix, "-body {\n        overflow-y: auto;\n        -ms-overflow-style: none;\n        scrollbar-width: none;\n        max-height: calc(80vh - ").concat(spacingModalCardPaddingTop * 2, "px - 26px - ").concat(spacingModalButtonStickyPaddingVertical * 2, "px - 40px - 16px);\n      }\n      .").concat(prefix, "-sticky-header.").concat(prefix, "-sticky-footer .").concat(prefix, "-body::-webkit-scrollbar {\n        display: none;\n      }\n      .").concat(prefix, "-left .").concat(prefix, "-footer {\n        text-align: left;\n      }\n      .").concat(prefix, "-right .").concat(prefix, "-footer {\n        text-align: right;\n      }\n      .").concat(prefix, "-center .").concat(prefix, "-footer {\n        text-align: center;\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  // sticky footer固定在底部，不随内容滚动条动
+  var commonStyle = _objectSpread({}, commonToken);
+
+  // sticky footer固定在底部，不随内容滚动条动
+  var getStyle = function getStyle() {
+    switch (type) {
+      case 'stickyHeaderFooter':
+        return stickyHeaderFooterStyleToken;
+      case 'stickyHeader':
+        return stickyHeaderStyleToken;
+      case 'stickyFooter':
+        return stickyFooterStyleToken;
+      default:
+        return styleToken;
+    }
+  };
+  var customStyle = _objectSpread({}, getStyle());
+  var stickyHeaderClass = type === 'stickyHeader' ? "".concat(prefix, "-sticky-headers") : '';
+  var stickyFooterClass = type === 'stickyFooter' ? "".concat(prefix, "-sticky-footer") : '';
+  var stickyHeaderFooterClass = type === 'stickyHeaderFooter' ? "".concat(prefix, "-sticky-footer ").concat(prefix, "-sticky-header") : '';
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(_ConfigProvider, {
+      wave: {
+        disabled: true
+      },
+      prefixCls: cssClasses.PREFIX,
+      theme: {
+        components: {
+          Modal: _objectSpread({}, designTokens)
+        },
+        cssVar: true,
+        hashed: false
+      },
+      children: /*#__PURE__*/_jsx(_Modal, _objectSpread(_objectSpread({
+        width: breakpoint === 'desktop' ? size : otherDesignTokens.width,
+        title: /*#__PURE__*/_jsx(Text, {
+          size: "TitleT21Bold",
+          children: title
+        }),
+        style: _objectSpread(_objectSpread(_objectSpread({
+          top: '10%'
+        }, commonStyle), customStyle), style),
+        footer: footer,
+        className: "".concat(stickyFooterClass, " ").concat(prefix, "-").concat(breakpoint, " ").concat(prefix, "-").concat(footerAlign, " ").concat(stickyHeaderClass, " ").concat(stickyHeaderFooterClass)
+      }, attr), {}, {
+        children: /*#__PURE__*/_jsx(Text, {
+          size: "ContentC14Regular",
+          children: children
+        })
+      }))
+    })
+  });
+};
+export default Modal;

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

@@ -0,0 +1,92 @@
+@import './variables.less';
+
+// 基础按钮样式
+@components: modal;
+
+// 使用字符串拼接
+.@{prefix}-@{components} {
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: var( ~"--@{prefix}-padding-lg");
+    display: block;
+    width: 100%;
+    height: 64px;  
+    background: linear-gradient(#F7F7F700, #F7F7F7);
+    border-bottom-right-radius: var( ~"--@{prefix}-border-radius-lg");
+    border-bottom-left-radius: var( ~"--@{prefix}-border-radius-lg");
+    z-index: 1;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 100%;
+    height: 24px;  
+    background: linear-gradient(#F7F7F7, #F7F7F700);
+    border-top-right-radius: var( ~"--@{prefix}-border-radius-lg");
+    border-top-left-radius: var( ~"--@{prefix}-border-radius-lg");
+    z-index: 1;
+  }
+  .@{prefix}-@{components}-content {
+    position: static;
+    max-height: 80vh;
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    /* IE 和 Edge */
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    /* Firefox */
+  }
+  .@{prefix}-@{components}-footer {
+    position: relative;
+    z-index: 2;
+  }
+  &.@{prefix}-@{components}-sticky-footer {
+    .@{prefix}-@{components}-content {
+      &::after {
+        display: none;
+      }
+    }
+    .@{prefix}-@{components}-footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: #fff;
+      border-bottom-right-radius: var( ~"--@{prefix}-border-radius-lg");
+      border-bottom-left-radius: var( ~"--@{prefix}-border-radius-lg");
+      text-align: center;
+    }
+  }
+  &.@{prefix}-@{components}-desktop.@{prefix}-@{components}-sticky-footer .@{prefix}-button {
+    min-width: 290px;
+  }
+  &.@{prefix}-@{components}-mobile {
+    .@{prefix}-button {
+      min-width: 100%;
+    }
+  }
+
+  &.@{prefix}-@{components}-sticky-headers {
+    .@{prefix}-@{components}-content {
+      &::after {
+        display: none;
+      }
+    }
+    .@{prefix}-@{components}-header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: #fff;
+      border-top-right-radius: var( ~"--@{prefix}-border-radius-lg");
+      border-top-left-radius: var( ~"--@{prefix}-border-radius-lg");
+    }
+  }
+}

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

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

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

@@ -0,0 +1,16 @@
+declare const designTokens: {
+    spacingTopNavigationPaddingHorizontal: any;
+    spacingTopNavigationPaddingBottom: any;
+    spacingTopNavigationHorizontalGap: any;
+    spacingTopNavigationIconButtonHorizontalGap: any;
+    spacingTopNavigationTextLinkPaddingRight: any;
+    spacingTopNavigationTitlePaddingVertical: any;
+    colorTopNavigationTitleStandard: any;
+    colorTopNavigationTitleInverse: any;
+    colorTopNavigationGradient: any;
+    colorTopNavigationBackground: any;
+    colorTopNavigationBorderBottom: any;
+    colorTopNavigationBackgroundHaze: any;
+    colorTopNavigationBackgroundInverse: any;
+};
+export default designTokens;

package/es/components/Navigation/designTokens.js

@@ -0,0 +1,19 @@
+import TokenManager from "../../utils/tokenManager";
+var designTokens = {
+  spacingTopNavigationPaddingHorizontal: TokenManager.tokenKey('spacingTopNavigationPaddingHorizontal'),
+  // 左右padding
+  spacingTopNavigationPaddingBottom: TokenManager.tokenKey('spacingTopNavigationPaddingBottom'),
+  //底部padding
+  spacingTopNavigationHorizontalGap: TokenManager.tokenKey('spacingTopNavigationHorizontalGap'),
+  spacingTopNavigationIconButtonHorizontalGap: TokenManager.tokenKey('spacingTopNavigationIconButtonHorizontalGap'),
+  spacingTopNavigationTextLinkPaddingRight: TokenManager.tokenKey('spacingTopNavigationTextLinkPaddingRight'),
+  spacingTopNavigationTitlePaddingVertical: TokenManager.tokenKey('spacingTopNavigationTitlePaddingVertical'),
+  colorTopNavigationTitleStandard: TokenManager.tokenKey('colorTopNavigationTitleStandard'),
+  colorTopNavigationTitleInverse: TokenManager.tokenKey('colorTopNavigationTitleInverse'),
+  colorTopNavigationGradient: TokenManager.tokenKey('colorTopNavigationGradient'),
+  colorTopNavigationBackground: TokenManager.tokenKey('colorTopNavigationBackground'),
+  colorTopNavigationBorderBottom: TokenManager.tokenKey('colorTopNavigationBorderBottom'),
+  colorTopNavigationBackgroundHaze: TokenManager.tokenKey('colorTopNavigationBackgroundHaze'),
+  colorTopNavigationBackgroundInverse: TokenManager.tokenKey('colorTopNavigationBackgroundInverse')
+};
+export default designTokens;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import './style/index.less';
+export interface RightIcon {
+    iconName: string;
+    onIconClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export interface RightLinkConfig {
+    linkText: string;
+    onLinkClick: () => void;
+}
+export interface TitleIconBadgeConfig {
+    iconName: string;
+    title: string;
+    badge: string | number;
+}
+export interface INavigationProps {
+    rightIcons?: RightIcon[];
+    leftIconName?: string;
+    imgBackground?: boolean;
+    rightLink?: RightLinkConfig;
+    titleIconBadge?: TitleIconBadgeConfig;
+    title?: string;
+    hideBorder?: boolean;
+    className?: string;
+    goBack?: () => void;
+    isInverse?: boolean;
+    noRight?: boolean;
+    leftIconSize?: string | number;
+}
+declare const Navigation: React.FC<INavigationProps>;
+export default Navigation;