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

package/lib/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/lib/components/Modal/designTokens.js

@@ -0,0 +1,88 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Modal/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  commonToken: () => commonToken,
+  designTokens: () => designTokens,
+  otherDesignTokens: () => otherDesignTokens,
+  stickyFooterStyleToken: () => stickyFooterStyleToken,
+  stickyHeaderFooterStyleToken: () => stickyHeaderFooterStyleToken,
+  stickyHeaderStyleToken: () => stickyHeaderStyleToken,
+  styleToken: () => styleToken
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_tokenHelper = require("../../utils/tokenHelper");
+var import_constants = require("../../constants");
+var prefixCls = import_constants.cssClasses.PREFIX + "-modal";
+var designTokens = {
+  borderRadiusLG: (0, import_tokenHelper.getToken)("borderRadiusModal"),
+  // 圆角
+  titleColor: (0, import_tokenHelper.getToken)("colorModalTextHeader"),
+  // header文本颜色
+  contentBg: (0, import_tokenHelper.getToken)("colorModalBackground"),
+  // 背景
+  headerBg: (0, import_tokenHelper.getToken)("colorModalBackground"),
+  // 背景
+  colorText: (0, import_tokenHelper.getToken)("colorModalTextBody"),
+  // 内容文本颜色
+  colorBgMask: (0, import_tokenHelper.getToken)("colorModalOverlay")
+  // 遮罩颜色
+};
+var otherDesignTokens = {
+  width: `calc(100vw - ${(0, import_tokenHelper.getToken)("spacingModalPaddingHorizontal")}px - ${(0, import_tokenHelper.getToken)("spacingModalPaddingHorizontal")}px)`,
+  // 宽度
+  spacingModalCardPaddingTop: (0, import_tokenHelper.getToken)("spacingModalCardPaddingTop"),
+  spacingModalButtonStickyPaddingVertical: (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical"),
+  spacingModalCardVerticalGap: (0, import_tokenHelper.getToken)("spacingModalCardVerticalGap"),
+  spacingModalCardPaddingHorizontal: (0, import_tokenHelper.getToken)("spacingModalCardPaddingHorizontal")
+};
+var commonToken = {
+  [`--${prefixCls}-footer-margin-top`]: 0,
+  [`--${prefixCls}-footer-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalButtonPaddingTop")}px 0 0`
+};
+var styleToken = {
+  [`--${prefixCls}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingBottom")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+  [`--${prefixCls}-footer-border-top`]: "none",
+  [`--${prefixCls}-footer-padding`]: 0,
+  [`--${prefixCls}-body-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0`,
+  [`--${prefixCls}-header-margin-bottom`]: 0
+};
+var stickyFooterStyleToken = {
+  [`--${prefixCls}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${40 + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical") + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+  [`--${prefixCls}-footer-padding`]: `${otherDesignTokens.spacingModalButtonStickyPaddingVertical}px ${(0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px`,
+  [`--${prefixCls}-footer-border-top`]: "1px solid #E1E1E1",
+  [`--${prefixCls}-body-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0`,
+  [`--${prefixCls}-header-margin-bottom`]: 0
+};
+var stickyHeaderFooterStyleToken = {
+  [`--${prefixCls}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${40 + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical") + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+  [`--${prefixCls}-footer-padding`]: `${otherDesignTokens.spacingModalButtonStickyPaddingVertical}px ${(0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px`,
+  [`--${prefixCls}-footer-border-top`]: "1px solid #E1E1E1",
+  [`--${prefixCls}-body-padding`]: 0,
+  [`--${prefixCls}-header-margin-bottom`]: `${otherDesignTokens.spacingModalCardVerticalGap}px`
+};
+var stickyHeaderStyleToken = {
+  [`--${prefixCls}-content-padding`]: `0 ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingBottom")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+  [`--${prefixCls}-footer-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0 0`,
+  [`--${prefixCls}-footer-border-top`]: "none",
+  [`--${prefixCls}-body-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop * 2 + 26}px 0 0 0`,
+  [`--${prefixCls}-header-margin-bottom`]: 0,
+  [`--${prefixCls}-header-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`
+};

package/lib/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/lib/components/Modal/index.js

@@ -0,0 +1,168 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Modal/index.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  default: () => Modal_default
+});
+module.exports = __toCommonJS(Modal_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = require("../../utils/theme");
+var import_constants = require("../../constants");
+var import_designTokens = require("./designTokens");
+var import_Text = __toESM(require("../Text"));
+var import_style = require("./style/index.less");
+var Modal = (props) => {
+  const _a = props, {
+    title,
+    style,
+    children,
+    type = "default",
+    breakpoint = "mobile",
+    size = "50%",
+    prefix = `${import_constants.cssClasses.PREFIX}-modal`,
+    footerAlign = "right",
+    footer = null
+  } = _a, attr = __objRest(_a, [
+    "title",
+    "style",
+    "children",
+    "type",
+    "breakpoint",
+    "size",
+    "prefix",
+    "footerAlign",
+    "footer"
+  ]);
+  const {
+    spacingModalCardPaddingTop,
+    spacingModalButtonStickyPaddingVertical
+  } = import_designTokens.otherDesignTokens;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: { baseColor: "blue" },
+      path: [`${prefix}`]
+    }, () => `
+      .${prefix}-sticky-headers .${prefix}-header {
+      }
+      .${prefix}-sticky-header.${prefix}-sticky-footer .${prefix}-body {
+        overflow-y: auto;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        max-height: calc(80vh - ${spacingModalCardPaddingTop * 2}px - 26px - ${spacingModalButtonStickyPaddingVertical * 2}px - 40px - 16px);
+      }
+      .${prefix}-sticky-header.${prefix}-sticky-footer .${prefix}-body::-webkit-scrollbar {
+        display: none;
+      }
+      .${prefix}-left .${prefix}-footer {
+        text-align: left;
+      }
+      .${prefix}-right .${prefix}-footer {
+        text-align: right;
+      }
+      .${prefix}-center .${prefix}-footer {
+        text-align: center;
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  const commonStyle = __spreadValues({}, import_designTokens.commonToken);
+  const getStyle = () => {
+    switch (type) {
+      case "stickyHeaderFooter":
+        return import_designTokens.stickyHeaderFooterStyleToken;
+      case "stickyHeader":
+        return import_designTokens.stickyHeaderStyleToken;
+      case "stickyFooter":
+        return import_designTokens.stickyFooterStyleToken;
+      default:
+        return import_designTokens.styleToken;
+    }
+  };
+  const customStyle = __spreadValues({}, getStyle());
+  const stickyHeaderClass = type === "stickyHeader" ? `${prefix}-sticky-headers` : "";
+  const stickyFooterClass = type === "stickyFooter" ? `${prefix}-sticky-footer` : "";
+  const stickyHeaderFooterClass = type === "stickyHeaderFooter" ? `${prefix}-sticky-footer ${prefix}-sticky-header` : "";
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      wave: { disabled: true },
+      prefixCls: import_constants.cssClasses.PREFIX,
+      theme: {
+        components: {
+          Modal: __spreadValues({}, import_designTokens.designTokens)
+        },
+        cssVar: true,
+        hashed: false
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Modal,
+      __spreadValues({
+        width: breakpoint === "desktop" ? size : import_designTokens.otherDesignTokens.width,
+        title: /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "TitleT21Bold" }, title),
+        style: __spreadValues(__spreadValues(__spreadValues({ top: "10%" }, commonStyle), customStyle), style),
+        footer,
+        className: `${stickyFooterClass} ${prefix}-${breakpoint} ${prefix}-${footerAlign} ${stickyHeaderClass} ${stickyHeaderFooterClass}`
+      }, attr),
+      /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC14Regular" }, children)
+    )
+  ));
+};
+var Modal_default = Modal;

package/lib/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/lib/components/Modal/style/variables.less

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

package/lib/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/lib/components/Navigation/designTokens.js

@@ -0,0 +1,53 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Navigation/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  default: () => designTokens_default
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_tokenManager = __toESM(require("../../utils/tokenManager"));
+var designTokens = {
+  spacingTopNavigationPaddingHorizontal: import_tokenManager.default.tokenKey("spacingTopNavigationPaddingHorizontal"),
+  // 左右padding
+  spacingTopNavigationPaddingBottom: import_tokenManager.default.tokenKey("spacingTopNavigationPaddingBottom"),
+  //底部padding
+  spacingTopNavigationHorizontalGap: import_tokenManager.default.tokenKey("spacingTopNavigationHorizontalGap"),
+  spacingTopNavigationIconButtonHorizontalGap: import_tokenManager.default.tokenKey("spacingTopNavigationIconButtonHorizontalGap"),
+  spacingTopNavigationTextLinkPaddingRight: import_tokenManager.default.tokenKey("spacingTopNavigationTextLinkPaddingRight"),
+  spacingTopNavigationTitlePaddingVertical: import_tokenManager.default.tokenKey("spacingTopNavigationTitlePaddingVertical"),
+  colorTopNavigationTitleStandard: import_tokenManager.default.tokenKey("colorTopNavigationTitleStandard"),
+  colorTopNavigationTitleInverse: import_tokenManager.default.tokenKey("colorTopNavigationTitleInverse"),
+  colorTopNavigationGradient: import_tokenManager.default.tokenKey("colorTopNavigationGradient"),
+  colorTopNavigationBackground: import_tokenManager.default.tokenKey("colorTopNavigationBackground"),
+  colorTopNavigationBorderBottom: import_tokenManager.default.tokenKey("colorTopNavigationBorderBottom"),
+  colorTopNavigationBackgroundHaze: import_tokenManager.default.tokenKey("colorTopNavigationBackgroundHaze"),
+  colorTopNavigationBackgroundInverse: import_tokenManager.default.tokenKey("colorTopNavigationBackgroundInverse")
+};
+var designTokens_default = designTokens;

package/lib/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;