@zohodesk/dot 1.4.0 → 1.4.1

package/lib/v1/setup/helptips/ListGroup/ListGroup.js

@@ -1,11 +1,9 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = ListGroup;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,74 +13,30 @@ var _ListGroupModule = _interopRequireDefault(require("../../../../setup/helptip
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var ListGroup = /*#__PURE__*/function (_React$Component) {
-  _inherits(ListGroup, _React$Component);
-
-  var _super = _createSuper(ListGroup);
-
-  function ListGroup(props) {
-    _classCallCheck(this, ListGroup);
-
-    return _super.call(this, props);
+function ListGroup(props) {
+  var isOrder = props.isOrder,
+      data = props.data;
+
+  if (isOrder) {
+    return /*#__PURE__*/_react["default"].createElement("ol", {
+      className: _ListGroupModule["default"].container,
+      type: "1"
+    }, data.map(function (text, index) {
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        className: _ListGroupModule["default"].orderData,
+        key: index
+      }, text);
+    }));
   }
 
-  _createClass(ListGroup, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          isOrder = _this$props.isOrder,
-          data = _this$props.data;
-
-      if (isOrder) {
-        return /*#__PURE__*/_react["default"].createElement("ol", {
-          className: _ListGroupModule["default"].container,
-          type: "1"
-        }, data.map(function (text, index) {
-          return /*#__PURE__*/_react["default"].createElement("li", {
-            className: _ListGroupModule["default"].orderData,
-            key: index
-          }, text);
-        }));
-      }
-
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: _ListGroupModule["default"].container
-      }, data.map(function (text, index) {
-        return /*#__PURE__*/_react["default"].createElement("li", {
-          className: _ListGroupModule["default"].unOrderData,
-          key: index
-        }, data);
-      }));
-    }
-  }]);
-
-  return ListGroup;
-}(_react["default"].Component);
-
-exports["default"] = ListGroup;
-ListGroup.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   ListGroup.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+  return /*#__PURE__*/_react["default"].createElement("ul", {
+    className: _ListGroupModule["default"].container
+  }, data.map(function (text, index) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      className: _ListGroupModule["default"].unOrderData,
+      key: index
+    }, text);
+  }));
+}
+
+ListGroup.propTypes = _propTypes.propTypes;

package/lib/v1/setup/helptips/Title/Title.js

@@ -1,11 +1,9 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = Title;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,54 +13,11 @@ var _HelpTipsTitleModule = _interopRequireDefault(require("../../../../setup/hel
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function Title(props) {
+  var text = props.text;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _HelpTipsTitleModule["default"].title
+  }, text);
+}
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var Title = /*#__PURE__*/function (_React$Component) {
-  _inherits(Title, _React$Component);
-
-  var _super = _createSuper(Title);
-
-  function Title(props) {
-    _classCallCheck(this, Title);
-
-    return _super.call(this, props);
-  }
-
-  _createClass(Title, [{
-    key: "render",
-    value: function render() {
-      var text = this.props.text;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _HelpTipsTitleModule["default"].title
-      }, text);
-    }
-  }]);
-
-  return Title;
-}(_react["default"].Component);
-
-exports["default"] = Title;
-Title.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   Title.docs = {
-//     componentGroup: 'HelpTips',
-//     folderName: 'Setup'
-//   };
-// }
+Title.propTypes = _propTypes.propTypes;

package/lib/version2/GlobalNotification/GlobalNotification.module.css

@@ -29,6 +29,9 @@
 .container {
   position: relative;
   pointer-events: initial;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   max-width: var(--zd_size490) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

package/lib/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);

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

@@ -26,6 +26,8 @@ var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction
 
 var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
 var _DesktopNotificationModule = _interopRequireDefault(require("./DesktopNotification.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -89,7 +91,8 @@ function DesktopNotificationUI(props) {
       customClass = _props$customClass === void 0 ? {} : _props$customClass,
       _props$i18nKeys = props.i18nKeys,
       i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      responsiveId = props.responsiveId;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
       closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   var containerClass = customClass.containerClass;
@@ -115,66 +118,82 @@ function DesktopNotificationUI(props) {
   var Zindex = isAnimate ? getNextIndex() : null;
   var uiVariantOne = title && (info || secondaryInfo);
   var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+
+  function responsiveFunc(_ref2) {
+    var mediaQueryOR = _ref2.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _DesktopNotificationModule["default"].parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: "".concat(Zindex)
     } : {},
     "data-selector-id": dataSelectorId
-  }, /*#__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
-  }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
-    type: type,
-    title: title,
-    variant: titleVariant,
-    needIcon: needIcon,
-    onClose: onClose,
-    closeTitle: closeTitle,
-    dataId: "".concat(dataId, "_close"),
-    needClose: needClose
-  })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    alignBox: "column"
-  }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
-  }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
-  }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
-  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DesktopNotificationModule["default"].footer
-  }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DesktopNotificationModule["default"].message),
-    tagName: "p"
-  }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
-    size: "small",
-    paddingLeftSize: "xmedium"
-  }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: onClickSubmit,
-    "data-id": "".concat(dataId, "_submitButton"),
-    "data-test-id": "".concat(dataId, "_submitButton")
-  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-    align: "vertical",
-    alignBox: "row"
-  }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    flexible: true
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: submitText,
-    palette: submitType ? submitType : buttonPalette
-  })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    text: cancelText,
-    palette: "secondary",
-    dataId: "".concat(dataId, "_cancelButton"),
-    onClick: onClickCancel
-  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null));
+  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref3) {
+    var uptoTablet = _ref3.uptoTablet;
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
+      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n            ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "  ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
+      isCover: false,
+      dataId: dataId,
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+      type: type,
+      title: title,
+      variant: titleVariant,
+      needIcon: needIcon,
+      onClose: onClose,
+      closeTitle: closeTitle,
+      dataId: "".concat(dataId, "_close"),
+      needClose: needClose
+    })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "column"
+    }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
+    }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
+    }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
+    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _DesktopNotificationModule["default"].footer
+    }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(_DesktopNotificationModule["default"].message),
+      tagName: "p"
+    }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
+      onClick: onClickSubmit,
+      "data-id": "".concat(dataId, "_submitButton"),
+      "data-test-id": "".concat(dataId, "_submitButton")
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: submitText,
+      palette: submitType ? submitType : buttonPalette
+    })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      text: cancelText,
+      palette: "secondary",
+      dataId: "".concat(dataId, "_cancelButton"),
+      onClick: onClickCancel
+    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
+  }));
 }
 
 DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;

package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -28,6 +28,7 @@
 }
 
 /* Size */
+
 .medium {
   width: var(--zd_size452) ;
 }
@@ -35,6 +36,10 @@
 .large {
   width: var(--zd_size580) ;
 }
+.tapWidth{
+  max-width: 100% ;
+  min-width: 100% ;
+}
 
 /* Animation Style */
 .closeAnimation {
@@ -76,12 +81,12 @@
 /* Container Style */
 .message {
   position: relative;
-  color: var(--zd_smoke18);
+  color: var(--zdt_desktopnotification_message_text);
   font-size: var(--zd_font_size11) ;
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33) ;
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_smoke1);
+  border-top: 1px solid var(--zdt_desktopnotification_message_border);
   cursor: pointer;
 }
 [dir=ltr] .message {
@@ -92,7 +97,7 @@
 }
 
 .message:hover {
-  background: var(--zd_alabaster);
+  background: var(--zdt_desktopnotification_message_hover_bg);
 }
 
 /* Section */
@@ -100,6 +105,7 @@
   padding: var(--zd_size15) var(--zd_size30) var(--zd_size30) ;
 }
 
+
 .subTitle {
   font-size: var(--zd_font_size15) ;
   line-height: var(--zd_size20);
@@ -124,4 +130,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

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

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _Config = require("../../../../Provider/Config");
+
 var defaultProps = {
   isMore: false,
   isAnimate: true,
@@ -17,6 +20,7 @@ var defaultProps = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
 };
 exports.defaultProps = defaultProps;

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

@@ -14,7 +14,8 @@ var propTypes = {
   onPortalClose: _propTypes["default"].func,
   autoClose: _propTypes["default"].bool,
   hideTime: _propTypes["default"].string,
-  Element: _propTypes["default"].element
+  Element: _propTypes["default"].element,
+  responsiveId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;
 var DesktopNotificationUI_propTypes = {

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -19,6 +19,10 @@ var _AlertClose = _interopRequireDefault(require("../../AlertClose/AlertClose"))
 
 var _AlertIcons = _interopRequireDefault(require("../../alertIcons/AlertIcons"));
 
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));
+
 var _DesktopNotificationHeaderModule = _interopRequireDefault(require("./DesktopNotificationHeader.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -70,35 +74,65 @@ var DesktopNotificationHeader = /*#__PURE__*/function (_Component) {
           type = _this$props$type === void 0 ? '' : _this$props$type,
           needIcon = _this$props.needIcon,
           title = _this$props.title,
-          needClose = _this$props.needClose;
+          needClose = _this$props.needClose,
+          responsiveId = _this$props.responsiveId;
+
+      function responsiveFunc(_ref) {
+        var mediaQueryOR = _ref.mediaQueryOR;
+        return {
+          uptoTablet: mediaQueryOR([{
+            maxWidth: 760
+          }])
+        };
+      }
+
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
         className: "".concat(_DesktopNotificationHeaderModule["default"].container, " ").concat(_DesktopNotificationHeaderModule["default"][variant], " ").concat(_DesktopNotificationHeaderModule["default"][type]),
         isCover: false,
         wrap: "wrap"
-      }, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DesktopNotificationHeaderModule["default"].iconContainer
-      }, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
-        type: type
-      })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "row",
-        align: "center"
-      }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _DesktopNotificationHeaderModule["default"].title,
-        shrink: true
-      }, title) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
-      }, title))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _DesktopNotificationHeaderModule["default"].close
-      }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
-        onClose: onClose,
-        dataTitle: closeTitle,
-        dataId: dataId,
-        type: "light"
-      })) : null);
+      }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: responsiveFunc,
+        responsiveId: responsiveId
+      }, function (_ref2) {
+        var uptoTablet = _ref2.uptoTablet;
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
+          className: _DesktopNotificationHeaderModule["default"].iconContainer
+        }, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
+          type: type
+        })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          alignBox: "row",
+          align: "center"
+        }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          shrink: true
+        }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          $i18n_dataTitle: title,
+          $ui_className: _DesktopNotificationHeaderModule["default"].title,
+          $ui_tagName: "h1",
+          $ui_size: uptoTablet ? '16' : '18',
+          $ui_lineHeight: "20",
+          $ui_weight: "bold",
+          $flag_reset: true,
+          $ui_wordBreak: "breakWord"
+        }, title)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
+        }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          $i18n_dataTitle: title,
+          $ui_className: _DesktopNotificationHeaderModule["default"].title,
+          $ui_size: "14",
+          $ui_wordBreak: "breakWord"
+        }, title)))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _DesktopNotificationHeaderModule["default"].close
+        }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
+          onClose: onClose,
+          dataTitle: closeTitle,
+          dataId: dataId,
+          type: "light"
+        })) : null);
+      }));
     }
   }]);