@zohodesk/dot 1.0.0-beta.203 → 1.0.0-beta.204

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.204
+
+- blueDefaultTheme & blueDarkTheme class name added in Mode & Blue DotTheme files
+- GlobalNotification, DesktopNotification => customProps prop added
+
 # 1.0.0-beta.203
 
 - ListLayout => active, keyboarActive css priority fixed 

package/es/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'] {
+[data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: #583a45;
   --zdt_commonalert_success_hover_bg: #2c4e42;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: #262f3d;
   --zdt_commonalert_danger_hover_bg: #583a45;
   --zdt_commonalert_error_hover_bg: #583a45;
   --zdt_commonalert_warning_hover_bg: #583c2c;

package/es/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 

package/es/Appearance/default/mode/dotDefaultMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

package/es/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -50,7 +50,8 @@ export default class GlobalNotification extends React.Component {
       message,
       hideMessage,
       onClick,
-      i18nKeys = {}
+      i18nKeys = {},
+      customProps
     } = this.props;
     let {
       closeTitle = 'Close'
@@ -60,7 +61,8 @@ export default class GlobalNotification extends React.Component {
       message: message,
       hideMessage: hideMessage,
       onClick: onClick,
-      closeTitle: closeTitle
+      closeTitle: closeTitle,
+      customProps: customProps
     });
   }
 
@@ -72,7 +74,13 @@ GlobalNotification.propTypes = {
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: PropTypes.object
+  i18nKeys: PropTypes.object,
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
+};
+GlobalNotification.defaultProps = {
+  customProps: {}
 };
 
 if (false) {
@@ -96,12 +104,16 @@ export function GlobalNotificationUI(props) {
     type = '',
     message,
     onClick,
-    closeTitle = ''
+    closeTitle = '',
+    customProps = {}
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  let {
+    ExtraProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -57,7 +57,8 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let {
     closeTitle = 'Close'
@@ -68,6 +69,9 @@ export function DesktopNotificationUI(props) {
   let {
     buttonPalette = 'dangerFilled'
   } = buttonPaletteObject[type] || {};
+  let {
+    ExtraProps = {}
+  } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -88,12 +92,12 @@ export function DesktopNotificationUI(props) {
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
     } : {}
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, /*#__PURE__*/React.createElement(Container, _extends({
     className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
     type: type,
     title: title,
     variant: titleVariant,
@@ -177,7 +181,10 @@ DesktopNotification.propTypes = {
   submitText: PropTypes.string,
   submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
   titleVariant: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm'])
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -190,7 +197,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (false) {

package/lib/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'] {
+[data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: #583a45;
   --zdt_commonalert_success_hover_bg: #2c4e42;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: #262f3d;
   --zdt_commonalert_danger_hover_bg: #583a45;
   --zdt_commonalert_error_hover_bg: #583a45;
   --zdt_commonalert_warning_hover_bg: #583c2c;

package/lib/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 

package/lib/Appearance/default/mode/dotDefaultMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

package/lib/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -102,7 +102,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
           hideMessage = _this$props3.hideMessage,
           onClick = _this$props3.onClick,
           _this$props3$i18nKeys = _this$props3.i18nKeys,
-          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys;
+          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
+          customProps = _this$props3.customProps;
       var _i18nKeys$closeTitle = i18nKeys.closeTitle,
           closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
       return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
@@ -110,7 +111,8 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
         message: message,
         hideMessage: hideMessage,
         onClick: onClick,
-        closeTitle: closeTitle
+        closeTitle: closeTitle,
+        customProps: customProps
       });
     }
   }]);
@@ -126,7 +128,13 @@ GlobalNotification.propTypes = {
   onClick: _propTypes["default"].func,
   showMessage: _propTypes["default"].bool,
   type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: _propTypes["default"].object
+  i18nKeys: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
+};
+GlobalNotification.defaultProps = {
+  customProps: {}
 };
 
 if (false) {
@@ -149,11 +157,15 @@ function GlobalNotificationUI(props) {
       message = props.message,
       onClick = props.onClick,
       _props$closeTitle = props.closeTitle,
-      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? {} : _props$customProps;
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
     "data-id": "show_".concat(type, "_message")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: "".concat(_GlobalNotificationModule["default"].container),
     alignBox: "row",
     isCover: false,

package/lib/version2/notification/DesktopNotification/DesktopNotification.js

@@ -85,7 +85,8 @@ function DesktopNotificationUI(props) {
       _props$customClass = props.customClass,
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
-      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys;
+      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
+      customProps = props.customProps;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -94,6 +95,9 @@ function DesktopNotificationUI(props) {
       _ref$buttonPalette = _ref.buttonPalette,
       buttonPalette = _ref$buttonPalette === void 0 ? 'dangerFilled' : _ref$buttonPalette;
 
+  var _customProps$ExtraPro = customProps.ExtraProps,
+      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
+
   function onClickSubmit(e) {
     onSubmit && onSubmit();
   }
@@ -113,12 +117,12 @@ function DesktopNotificationUI(props) {
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {}
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
     className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, " ").concat(_DesktopNotificationModule["default"]["".concat(size)] ? _DesktopNotificationModule["default"]["".concat(size)] : '', " ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass),
     isCover: false,
     dataId: dataId,
     isInline: uiVariantTwo
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
     type: type,
     title: title,
     variant: titleVariant,
@@ -204,7 +208,10 @@ DesktopNotification.propTypes = {
   submitText: _propTypes["default"].string,
   submitType: _propTypes["default"].oneOf(['primary', 'danger', 'success']),
   titleVariant: _propTypes["default"].oneOf(['primary', 'secondary']),
-  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm'])
+  type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: _propTypes["default"].shape({
+    ExtraProps: _propTypes["default"].object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -217,7 +224,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (false) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.203",
+  "version": "1.0.0-beta.204",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -32,7 +32,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-219",
+    "@zohodesk/components": "1.0.0-alpha-221",
     "@zohodesk/icons": "1.0.0-beta.85",
     "@zohodesk/svg": "1.0.0-beta.37",
     "@zohodesk/virtualizer": "1.0.3",
@@ -42,7 +42,7 @@
     "velocity-react": "^1.4.3",
     "@zohodesk/variables": "^1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-219",
+    "@zohodesk/components": "1.0.0-alpha-221",
     "@zohodesk/icons": "^1.0.0-beta.85",
     "@zohodesk/svg": "^1.0.0-beta.37"
   },

package/src/Appearance/dark/mode/dotDarkMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'] {
+[data-mode='dark'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: #583a45;
   --zdt_commonalert_success_hover_bg: #2c4e42;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: #262f3d;
   --zdt_commonalert_danger_hover_bg: #583a45;
   --zdt_commonalert_error_hover_bg: #583a45;
   --zdt_commonalert_warning_hover_bg: #583c2c;

package/src/Appearance/dark/themes/blue/blueDarkDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='dark'][data-theme='blue'] {
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(27, 33, 43, 0.9);
 

package/src/Appearance/default/mode/dotDefaultMode.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'] {
+[data-mode='default'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
   /* action button */
   --zdt_actionButton_primaryFilled_bg: var(--zdt_cta_primary_bg);
   --zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
@@ -457,6 +457,7 @@
   --zdt_commonalert_close_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_success_hover_bg: #e9f7ef;
   --zdt_commonalert_info_hover_bg: var(--zdt_cta_primary_light_bg);
+  --zdt_commonalert_plaininfo_hover_bg: var(--dot_bg_lavender);
   --zdt_commonalert_danger_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_error_hover_bg: var(--dot_bg_paleRed);
   --zdt_commonalert_warning_hover_bg: #fff1e6;

package/src/Appearance/default/themes/blue/blueDefaultDotTheme.module.css

@@ -1,4 +1,4 @@
-[data-mode='default'][data-theme='blue'] {
+[data-mode='default'][data-theme='blue'], :global(.blueDefaultTheme) [data-desk-theme="blue"] {
     /* freezelayer */
     --zdt_freezelayer_darklight_bg: rgba(44, 51, 77, 0.94);
 

package/src/version2/GlobalNotification/GlobalNotification.js

@@ -36,7 +36,7 @@ export default class GlobalNotification extends React.Component {
   }
 
   render() {
-    let { type, message, hideMessage, onClick,i18nKeys={} } = this.props;
+    let { type, message, hideMessage, onClick, i18nKeys={}, customProps } = this.props;
     let { closeTitle = 'Close' } = i18nKeys;
     return (
       <GlobalNotificationUI
@@ -45,6 +45,7 @@ export default class GlobalNotification extends React.Component {
         hideMessage={hideMessage}
         onClick={onClick}
         closeTitle={closeTitle}
+        customProps={customProps}
       />
     );
   }
@@ -56,8 +57,14 @@ GlobalNotification.propTypes = {
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
-  i18nKeys: PropTypes.object
+  i18nKeys: PropTypes.object,
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
+GlobalNotification.defaultProps = {
+  customProps: {}
+}
 if (__DOCS__) {
   GlobalNotification.docs = {
     componentGroup: 'GlobalNotification',
@@ -71,9 +78,10 @@ export function GlobalNotificationUI(props) {
     hideMessage && hideMessage(e);
     onClose && onClose(e);
   }
-  let { type = '', message, onClick, closeTitle='' } = props;
+  let { type = '', message, onClick, closeTitle='', customProps={} } = props;
+  let { ExtraProps={} } = customProps;
   return (
-    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`}>
+    <div className={`${style.message} ${type ? style[type] : ''}`} data-id={`show_${type}_message`} {...ExtraProps} >
       <Container
         className={`${style.container}`}
         alignBox='row'

package/src/version2/notification/DesktopNotification/DesktopNotification.js

@@ -58,11 +58,13 @@ export function DesktopNotificationUI(props) {
     onClose,
     needClose,
     customClass = {},
-    i18nKeys = {}
+    i18nKeys = {},
+    customProps
   } = props;
   let { closeTitle = 'Close' } = i18nKeys;
   let { containerClass } = customClass;
   let { buttonPalette = 'dangerFilled' } = buttonPaletteObject[type] || {};
+  let { ExtraProps={} } = customProps;
 
   function onClickSubmit(e) {
     onSubmit && onSubmit();
@@ -94,6 +96,7 @@ export function DesktopNotificationUI(props) {
         isCover={false}
         dataId={dataId}
         isInline={uiVariantTwo}
+        {...ExtraProps}
       >
         <Box>
           <DesktopNotificationHeader
@@ -227,7 +230,10 @@ DesktopNotification.propTypes = {
     'info',
     'notification',
     'alarm'
-  ])
+  ]),
+  customProps:PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
 };
 DesktopNotification.defaultProps = {
   isMore: false,
@@ -240,7 +246,8 @@ DesktopNotification.defaultProps = {
   needIcon: true,
   titleVariant: 'primary',
   isShrinkView: false,
-  needClose: true
+  needClose: true,
+  customProps: {}
 };
 
 if (__DOCS__) {