@aloudata/aloudata-design 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/notification/demo/footer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/notification/demo/footer.js

@@ -0,0 +1,44 @@
+import { App, Button, notification, Space, TextLink } from "../..";
+import React from 'react';
+export default (function () {
+  var notices = function notices(type) {
+    notification[type]({
+      message: 'Notification Message',
+      description: 'description,description,description,description,description,description,description,description',
+      style: {
+        width: 360,
+        maxHeight: 500,
+        overflow: 'auto'
+      },
+      footer: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return console.log('Dismiss');
+        }
+      }, "Dismiss"), /*#__PURE__*/React.createElement(TextLink, {
+        onClick: function onClick() {
+          return console.log('Confirm');
+        }
+      }, "Confirm"))
+    });
+  };
+  return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('success');
+    }
+  }, "Notification success with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('error');
+    }
+  }, "Notification error with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('warning');
+    }
+  }, "Notification warning with message\u3001description"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return notices('info');
+    }
+  }, "Notification info with message\u3001description")));
+});

package/dist/notification/index.js

@@ -1,65 +1,58 @@
-var _excluded = ["icon", "closeIcon"],
-  _excluded2 = ["icon", "closeIcon"],
-  _excluded3 = ["icon", "closeIcon"],
-  _excluded4 = ["icon", "closeIcon"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["icon", "closeIcon", "description", "footer"],
+  _excluded2 = ["icon", "closeIcon", "description", "footer"],
+  _excluded3 = ["icon", "closeIcon", "description", "footer"],
+  _excluded4 = ["icon", "closeIcon", "description", "footer"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { notification as AntdNotification } from 'antd';
 import classnames from 'classnames';
 import React from 'react';
-import { AlertTriangleDuotone, CancelCircleDuotone, CheckCircleDuotone, CloseLLine, InfoCircleLine } from "../Icon";
+import { AttentionTriangleLightLine, CheckCircleLightLine, CloseCircleLightLine, CloseLLine, InformationCircleLightLine } from "../Icon";
 import theme from "../style/themes/default/themeColor.module.less";
 var iconMap = {
-  info: /*#__PURE__*/React.createElement(InfoCircleLine, {
-    fill: theme.B40,
-    size: 20
-  }),
-  success: /*#__PURE__*/React.createElement(CheckCircleDuotone, {
-    fill: 'var(--global-colors-base-white-950a)',
+  info: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-success"
+  }, /*#__PURE__*/React.createElement(InformationCircleLightLine, {
+    color: "#22C55E",
+    size: 24
+  })),
+  success: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-success"
+  }, /*#__PURE__*/React.createElement(CheckCircleLightLine, {
     color: 'var(--global-colors-green-600)',
     size: 24
-  }),
-  error: /*#__PURE__*/React.createElement(CancelCircleDuotone, {
-    color: "#D64343",
-    fill: "#FFFFFF",
+  })),
+  error: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-error"
+  }, /*#__PURE__*/React.createElement(CloseCircleLightLine, {
+    color: "#EF4444",
     size: 24
-  }),
-  warning: /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
+  })),
+  warning: /*#__PURE__*/React.createElement("div", {
+    className: "ald-notification-notice-icon-warning"
+  }, /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
     color: "#FFB01F",
-    fill: "#FFFFFF",
     size: 24
-  })
+  }))
 };
 var closeX = /*#__PURE__*/React.createElement(CloseLLine, {
   size: 20,
   color: "#171717"
 });
-var getSDefaultStyle = function getSDefaultStyle(type) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    padding: '12px 16px',
-    background: theme.SC95,
-    border: '1px solid',
+var getSDefaultStyle = function getSDefaultStyle() {
+  return {
+    padding: '24px',
+    border: '1px solid #D1D5DB',
     borderRadius: '2px',
-    boxShadow: theme.SHADOW_LG
-  }, type === 'error' && {
-    background: '#FBECEC',
-    borderColor: '#E98B8B'
-  }), type === 'success' && {
-    background: '#E8F9F0',
-    borderColor: '#73D8A6'
-  }), type === 'warning' && {
-    background: '#FFFAF0',
-    borderColor: '#FFD180'
-  }), type === 'info' && {
-    background: '#F0F6FF',
-    borderColor: '#84AADF'
-  });
+    boxShadow: theme.SHADOW_LG,
+    background: '#FFF'
+  };
 };
 var notification = {
   open: function open(config) {
@@ -70,12 +63,21 @@ var notification = {
       icon = _config$icon === void 0 ? iconMap.success : _config$icon,
       _config$closeIcon = config.closeIcon,
       closeIcon = _config$closeIcon === void 0 ? closeX : _config$closeIcon,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded);
     return AntdNotification.success(_objectSpread(_objectSpread({}, rest), {}, {
-      style: Object.assign({}, getSDefaultStyle('success'), config.style),
+      style: Object.assign({}, getSDefaultStyle(), config.style),
       className: classnames('ald-notification-notice', config.className),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   error: function error(config) {
@@ -83,12 +85,21 @@ var notification = {
       icon = _config$icon2 === void 0 ? iconMap.error : _config$icon2,
       _config$closeIcon2 = config.closeIcon,
       closeIcon = _config$closeIcon2 === void 0 ? closeX : _config$closeIcon2,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded2);
     return AntdNotification.error(_objectSpread(_objectSpread({}, rest), {}, {
       className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle('error'), config.style),
+      style: Object.assign(getSDefaultStyle(), config.style),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   warning: function warning(config) {
@@ -96,12 +107,21 @@ var notification = {
       icon = _config$icon3 === void 0 ? iconMap.warning : _config$icon3,
       _config$closeIcon3 = config.closeIcon,
       closeIcon = _config$closeIcon3 === void 0 ? closeX : _config$closeIcon3,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded3);
     return AntdNotification.warning(_objectSpread(_objectSpread({}, rest), {}, {
       className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle('warning'), config.style),
+      style: Object.assign(getSDefaultStyle(), config.style),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   info: function info(config) {
@@ -109,12 +129,21 @@ var notification = {
       icon = _config$icon4 === void 0 ? iconMap.info : _config$icon4,
       _config$closeIcon4 = config.closeIcon,
       closeIcon = _config$closeIcon4 === void 0 ? closeX : _config$closeIcon4,
+      description = config.description,
+      footer = config.footer,
       rest = _objectWithoutProperties(config, _excluded4);
     return AntdNotification.info(_objectSpread(_objectSpread({}, rest), {}, {
       className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle('info'), config.style),
+      style: Object.assign(getSDefaultStyle(), config.style),
       icon: icon,
-      closeIcon: closeIcon
+      closeIcon: closeIcon,
+      description: /*#__PURE__*/React.createElement("div", {
+        className: "ald-notification-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-desc'
+      }, description), footer && /*#__PURE__*/React.createElement("div", {
+        className: 'ald-notification-footer'
+      }, footer))
     }));
   },
   destroy: function destroy(key) {

package/dist/notification/style/index.less

@@ -2,29 +2,40 @@
 
 .ald-notification-notice.ant-notification-notice {
   .ant-notification-notice-icon {
-    top: 10px;
+    top: 24px;
   }
 
   .ant-notification-notice-message {
     margin-inline-start: 28px;
     padding-inline-end: 28px;
-    margin-bottom: 4px !important;
-    margin-left: 32px !important;
-    line-height: 20px;
-    color: var(--colors-gray-900, #171717);
+    margin-bottom: 8px !important;
+    margin-left: 56px !important;
+    color: var(--alias-colors-text-strong, #111827);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px; /* 155.556% */
   }
 
   .ant-notification-notice-description {
     margin-inline-start: 28px;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 20px;
-    color: var(--colors-gray-800, #575757);
+    padding-inline-end: 28px;
+    margin-bottom: 8px !important;
+    margin-left: 56px !important;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .ald-notification-desc {
+      color: var(--alias-colors-text-subtle, #4b5563);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+    }
   }
 
   .ant-notification-notice-close {
-    top: 12px;
-    right: 16px;
+    top: 24px;
+    right: 24px;
     width: fit-content;
     height: fit-content;
 
@@ -33,3 +44,30 @@
     }
   }
 }
+
+.ald-notification-notice-icon-success,
+.ald-notification-notice-icon-error,
+.ald-notification-notice-icon-warning,
+.ald-notification-notice-icon-info {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+.ald-notification-notice-icon-success {
+  background: var(--alias-colors-bg-accent-green-subtle-default, #dcfce7);
+}
+
+.ald-notification-notice-icon-error {
+  background: var(--alias-colors-bg-accent-red-subtle-default, #fee2e2);
+}
+
+.ald-notification-notice-icon-warning {
+  background: var(--alias-colors-bg-accent-yellow-subtle-default, #fef9c3);
+}
+
+.ald-notification-notice-icon-info {
+  background: var(--alias-colors-bg-accent-blue-subtle-default, #d4e7fd);
+}

package/dist/style/themes/default/index.less

@@ -2,7 +2,7 @@
 @import './default.less';
 /* stylelint-disable-next-line at-rule-no-unknown */
 @font-family:inter, -apple-system, PingFang SC, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
-@ald-prefix: ant;
+@ald-prefix: ald;
 @error-color: #d64343;
 // large
 @font-size-large: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",