@zohodesk/dot 1.0.0-temp-166 → 1.0.0-temp-168

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -4,6 +4,8 @@ import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import AlertClose from '../../AlertClose/AlertClose';
 import AlertIcons from '../../alertIcons/AlertIcons';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from './DesktopNotificationHeader.module.css';
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {
@@ -19,36 +21,70 @@ export default class DesktopNotificationHeader extends Component {
       type = '',
       needIcon,
       title,
-      needClose
+      needClose,
+      responsiveId
     } = this.props;
+
+    function responsiveFunc(_ref) {
+      let {
+        mediaQueryOR
+      } = _ref;
+      return {
+        uptoTablet: mediaQueryOR([{
+          maxWidth: 760
+        }])
+      };
+    }
+
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
       className: `${style.container} ${style[variant]} ${style[type]}`,
       isCover: false,
       wrap: "wrap"
-    }, needIcon ? /*#__PURE__*/React.createElement("div", {
-      className: style.iconContainer
-    }, /*#__PURE__*/React.createElement(AlertIcons, {
-      type: type
-    })) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "center"
-    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
-      className: style.title,
-      shrink: true
-    }, title) : /*#__PURE__*/React.createElement(Box, {
-      className: `${style.infoText}`
-    }, title))), needClose ? /*#__PURE__*/React.createElement(Box, {
-      className: style.close
-    }, /*#__PURE__*/React.createElement(AlertClose, {
-      onClose: onClose,
-      dataTitle: closeTitle,
-      dataId: dataId,
-      type: "light"
-    })) : null);
+    }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: responsiveFunc,
+      responsiveId: responsiveId
+    }, _ref2 => {
+      let {
+        uptoTablet
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
+        className: style.iconContainer
+      }, /*#__PURE__*/React.createElement(AlertIcons, {
+        type: type
+      })) : null, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row",
+        align: "center"
+      }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
+        shrink: true
+      }, /*#__PURE__*/React.createElement(Typography, {
+        $i18n_dataTitle: title,
+        $ui_className: style.title,
+        $ui_tagName: "h1",
+        $ui_size: uptoTablet ? '16' : '18',
+        $ui_lineHeight: "20",
+        $ui_weight: "bold",
+        $flag_reset: true,
+        $ui_wordBreak: "breakWord"
+      }, title)) : /*#__PURE__*/React.createElement(Box, {
+        className: `${style.infoText}`
+      }, /*#__PURE__*/React.createElement(Typography, {
+        $i18n_dataTitle: title,
+        $ui_className: style.title,
+        $ui_size: "14",
+        $ui_wordBreak: "breakWord"
+      }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
+        className: style.close
+      }, /*#__PURE__*/React.createElement(AlertClose, {
+        onClose: onClose,
+        dataTitle: closeTitle,
+        dataId: dataId,
+        type: "light"
+      })) : null);
+    }));
   }
 
 }

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,32 +5,29 @@
     composes: varClass;
     min-height: var(--zd_size54) ;
     position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
     color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
   }
-  
+
   .title {
-    font-size: var(--zd_font_size18) ;
-    line-height: 1.2222;
-    font-family: var(--zd_bold);
-    composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   }
-  
+
   [dir=ltr] .title {
   margin: 0 var(--zd_size5) 0 var(--zd_size10) ;
   }
-  
+
   [dir=rtl] .title {
     margin: 0 var(--zd_size10) 0 var(--zd_size5) ;
   }
 
   .infoText {
-    font-size: var(--zd_font_size14) ;
     max-width: 100% ;
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
 
   /* Palette */
@@ -38,19 +35,19 @@
   .success {
     --commonalert_border_color: var(--zdt_commonalert_success_border);
   }
-  
+
   .info,.notification,.alarm {
     --commonalert_border_color: var(--zdt_commonalert_info_border);
   }
-  
+
   .danger {
     --commonalert_border_color: var(--zdt_commonalert_danger_border);
   }
-  
+
   .error {
     --commonalert_border_color: var(--zdt_commonalert_error_border);
   }
-  
+
   .warning {
     --commonalert_border_color: var(--zdt_commonalert_warning_border);
   }
@@ -70,18 +67,18 @@
 }
 
 .primary .infoText {
-    line-height: 1;
+    line-height: var(--zd_size18);
   }
-  
+
   .primary .close {
     position: absolute;
     top: var(--zd_size12) ;
   }
-  
+
   [dir=ltr] .primary .close {
   right: var(--zd_size12) ;
   }
-  
+
   [dir=rtl] .primary .close {
     left: var(--zd_size12) ;
   }
@@ -99,7 +96,7 @@
   }
 
   .secondary .infoText {
-    line-height: 1.4286;
+    line-height: var(--zd_size20);
   }
 
   .secondary .iconContainer {
@@ -134,4 +131,4 @@
   [dir=rtl] .secondary .close {
     left: var(--zd_size12) ;
     margin: auto var(--zd_size25) auto 0 ;
-  }
+  }

package/es/version2/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,5 +1,7 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export const defaultProps = {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

package/es/version2/notification/DesktopNotificationHeader/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   onClose: PropTypes.func,
   title: PropTypes.string,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  responsiveId: PropTypes.string
 };

package/lib/ActionButton/ActionButton.module.css

@@ -13,12 +13,14 @@
   --buttonText: var(--zdt_actionButton_primaryFilled_text);
 }
 .primaryFilledBtn, .primaryFilledArw {
+  /* css:theme-validation:ignore */
   background-color: var(--buttonBg);
 }
 .primaryBox {
   --buttonText: var(--zdt_actionButton_primary_text);
 }
 .primaryBtn, .primaryArw {
+  /* css:theme-validation:ignore */
   border: 1px solid var(--buttonBorder);
 }
 [dir=ltr] .primaryBtn {
@@ -81,6 +83,7 @@
 .txt,
 .subTxt {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
 .arrowWrapper {
@@ -94,6 +97,9 @@
 [dir=rtl] .arrowWrapper {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
+.primaryFilledArw {
+  /* css:theme-validation:ignore */
+}
 [dir=ltr] .primaryFilledArw {
   border-left: 1px solid var(--buttonSeparatorBorder);
 }
@@ -129,6 +135,7 @@
 }
 .arrow,
 .iconClr {
+  /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
 [dir=ltr] .iconMrgn {

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -33,6 +33,7 @@
 .list {
   font-size: var(--zd_font_size11) ;
   flex-basis: var(--zd_size12) ;
+  /* css:theme-validation:ignore */
   color: var(--textColor);
   text-align: center;
   cursor: pointer;
@@ -49,6 +50,7 @@
 }
 .list :hover,
 .selected {
+  /* css:theme-validation:ignore */
   color: var(--textHoverColor);
 }
 .title {

package/lib/Attachment/Attachment.js

@@ -69,12 +69,13 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
           tooltip = _this$props.tooltip,
           fileInfo = _this$props.fileInfo,
           i18nKeys = _this$props.i18nKeys,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          isDisabled = _this$props.isDisabled;
       var _i18nKeys$downloadTit = i18nKeys.downloadTitle,
           downloadTitle = _i18nKeys$downloadTit === void 0 ? 'Download' : _i18nKeys$downloadTit;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isInline: true,
-        className: "".concat(_AttachmentModule["default"].attachment, " ").concat(onClick ? _AttachmentModule["default"].attachmentHover : '', " ").concat(_AttachmentModule["default"]["palette_".concat(palette)], " ").concat(_AttachmentModule["default"][size]),
+        className: "".concat(_AttachmentModule["default"].attachment, " ").concat(isDisabled ? _AttachmentModule["default"].disableAttachment : "", " ").concat(onClick ? _AttachmentModule["default"].attachmentHover : '', " ").concat(_AttachmentModule["default"]["palette_".concat(palette)], " ").concat(_AttachmentModule["default"][size]),
         onClick: onClick,
         dataId: dataId,
         "data-title": tooltip,
@@ -115,7 +116,7 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         shrink: true,
         "data-title": fileInfo
-      }, fileInfo)) : null)))), downloadLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      }, fileInfo)) : null)))), downloadLink && !isDisabled ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         target: "_self",
         href: downloadLink,
         className: _AttachmentModule["default"].attachDownload,
@@ -124,7 +125,10 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-downloadNew",
         iconClass: _AttachmentModule["default"].downIcon
-      })) : null);
+      })) : null, isDisabled ? /*#__PURE__*/_react["default"].createElement("div", {
+        "data-title": tooltip,
+        className: _AttachmentModule["default"].disableLayer
+      }) : null);
     }
   }]);
 

package/lib/Attachment/Attachment.module.css

@@ -4,6 +4,17 @@
   color: var(--zdt_attachment_default_text);
   border: 1px solid var(--zdt_attachment_default_border);
   border-radius: 2px;
+
+}
+
+.disableAttachment {
+  opacity: .6;
+}
+
+.disableLayer {
+  height: 100% ;
+  width: 100% ;
+  position: absolute;
 }
 
 .attachmentHover {
@@ -82,12 +93,12 @@
 
 .medium .atatchName {
   font-size: var(--zd_font_size14) ;
-  line-height: 1.4286;
+  line-height: var(--zd_size20);
 }
 
 .small .atatchName {
   font-size: var(--zd_font_size12) ;
-  line-height: 1.25;
+  line-height: var(--zd_size15);
 }
 
 .attachSize {

package/lib/Attachment/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   palette: 'default',
   dataId: 'attachment',
   i18nKeys: {},
-  dataSelectorId: 'attachment'
+  dataSelectorId: 'attachment',
+  isDisabled: false
 };
 exports.defaultProps = defaultProps;

package/lib/Attachment/props/propTypes.js

@@ -23,6 +23,7 @@ var propTypes = {
   i18nKeys: _propTypes["default"].shape({
     downloadTitle: _propTypes["default"].string
   }),
-  tooltip: _propTypes["default"].string
+  tooltip: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: var(--zd_size36);
     border-radius: 50%;
     cursor: pointer;
 }
@@ -154,6 +154,7 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
+  /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -345,6 +346,7 @@
 }
 
 .btn {
+  /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);

package/lib/ChannelIcon/ChannelIcon.module.css

@@ -16,6 +16,7 @@
   top: calc( var(--zd_size4) * -1 ) ;
   height: var(--zd_size15) ;
   width: var(--zd_size15) ;
+  /* css:theme-validation:ignore */
   background-color: var(--topIconBg);
 }
 [dir=ltr] .thread {
@@ -25,10 +26,12 @@
   left: calc( var(--zd_size1) * -1 ) ;
 }
 .threadBorder {
+  /* css:theme-validation:ignore */
   border: 1px solid var(--topIconBorderColor);
 }
 .iconStyle {
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--iconColor);
 }
 
@@ -213,5 +216,6 @@
   --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
 }
 .topicIcon {
+  /* css:theme-validation:ignore */
   color: var(--topIconColor);
 }

package/lib/FormAction/FormAction.module.css

@@ -9,6 +9,8 @@
 }
 .footerParent {
   position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--footerBg);
   border-top: solid 1px var(--footerBorder);
 }

package/lib/IconButton/IconButton.module.css

@@ -6,6 +6,7 @@
   width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--iconColor);
   cursor: pointer;
 }

package/lib/ImportantNotes/ImportantNotes.module.css

@@ -2,23 +2,19 @@
   background: var(--zdt_importantnotes_bg);
   padding: var(--zd_size5) var(--zd_size10) ;
 }
-
 .title {
   font-size: var(--zd_font_size13) ;
-  line-height: 1.3846;
+  line-height: var(--zd_font_size18);
   color: var(--zdt_importantnotes_title_text);
 }
-
 .icon {
   color: var(--zdt_importantnotes_icon);
   font-size: 0 ;
   margin-top: var(--zd_size1) ;
 }
-
 [dir=ltr] .icon {
   margin-right: var(--zd_size5) ;
 }
-
 [dir=rtl] .icon {
   margin-left: var(--zd_size5) ;
-}
+}

package/lib/Provider/Config.js

@@ -16,7 +16,8 @@ var config = {
     left: 0,
     right: 0,
     bottom: 0
-  }
+  },
+  desktopNotificationResponsiveId: 'Helmet'
 };
 
 function getDotLibraryConfig(key) {

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -5,52 +5,66 @@
   --tag_small_fontSize: var(--zd_font_size10);
   --tag_large_fontSize: var(--zd_font_size12);
 }
+
 .wrapper {
   composes: varClass;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
   background-color: var(--tag_bg_color);
 }
+
 .small,
 .large {
+  /* css:theme-validation:ignore */
   max-width: 100% ;
   height: var(--zd_size18) ;
 }
+
 .small, .large {
-  border: 1px solid;
-  border-color: var(--tag_border_color);
+  border: 1px solid var(--tag_border_color);
   border-radius: var(--zd_size4);
   padding: 0 var(--zd_size6) ;
 }
+
 .bold {
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .small_text {
   font-size: var(--tag_small_fontSize);
 }
+
 .large_text {
   font-size: var(--tag_large_fontSize);
 }
+
 .text {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .iconSpace{
+
+[dir=ltr] .iconSpace {
   margin-right: var(--zd_size4) ;
 }
-[dir=rtl] .iconSpace{
+
+[dir=rtl] .iconSpace {
   margin-left: var(--zd_size4) ;
 }
+
 .yellow {
   --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
   --tag_text_color: var(--zdt_tagWithIconYellow_text);
   --tag_border_color: var(--zdt_tagWithIconYellow_border);
 }
+
 .grey {
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
   --tag_text_color: var(--zdt_tagWithIconGrey_text);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
 }
+
 .blue {
   --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
   --tag_text_color: var(--zdt_tagWithIconBlue_text);
   --tag_border_color: var(--zdt_tagWithIconBlue_border);
-}
+}

package/lib/ToastMessage/ToastMessage.module.css

@@ -177,14 +177,14 @@
 .alertMessage {
   font-size: var(--zd_font_size12) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: 1.3333;
+  line-height: var(--zd_size16);
   color: var(--zdt_toastmessage_alert_text);
   margin-top: var(--zd_size5) ;
 }
 
 .buttonText {
   font-size: inherit ;
-  line-height: normal;
+  line-height: var(--zd_size14);
   text-align: center;
   padding: 0 var(--zd_size7) ;
   cursor: pointer;

package/lib/Upload/Upload.module.css

@@ -88,7 +88,7 @@
   width: var(--zd_size12) ;
   top: 0 ;
   position: absolute;
-  line-height: 0.8333;
+  line-height: var(--zd_size10);
   font-size: var(--zd_font_size12) ;
   text-align: center;
 }

package/lib/alert/AlertLookup/AlertLookup.module.css

@@ -3,7 +3,7 @@
 }
 
 .innerSection {
-  line-height: 1.6667;
+  line-height: var(--zd_size25);
   color: var(--zdt_alertlookup_innersection_text);
   font-size: var(--zd_font_size15) ;
   word-break: break-word;

package/lib/avatar/AvatarIcon/AvatarIcon.module.css

@@ -6,11 +6,16 @@
 .container {
   vertical-align: middle;
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
   border-color: var(--border_color)
 }
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--border_hoverColor)
 }
@@ -35,6 +40,7 @@
   --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
 }
 .iconColor {
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
 }
 .icon_danger {

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -21,6 +21,7 @@
 }
 .title {
   font-family: var(--zd_semibold);
+  /* css:theme-validation:ignore */
   color: var(--titleColor);
 }
 .small .title {
@@ -31,6 +32,7 @@
 }
 .linkWrapper,
 .linkDescWrapper {
+  /* css:theme-validation:ignore */
   color: var(--descriptionColor);
 }
 .small .linkWrapper,
@@ -57,14 +59,16 @@
   margin-left: var(--zd_size4) ;
 }
 .desc {
-  line-height: 1.357;
+  line-height: var(--zd_size19);
 }
 .link {
+  /* css:theme-validation:ignore */
   color: var(--linkColor);
   display: inline-block;
   cursor: pointer;
 }
 .link:hover {
+  /* css:theme-validation:ignore */
   color: var(--linkHoverColor);
 }
 .children {

package/lib/errorstate/EmptyStates.module.css

@@ -33,15 +33,15 @@
 }
 .title {
   font-size: var(--zd_font_size50) ;
-  line-height: 1.4;
+  line-height: var(--zd_size70);
 }
 .tabletTitle {
   font-size: var(--zd_font_size24) ;
-  line-height: 2.0833;
+  line-height: var(--zd_size50);
 }
 .mobileTitle {
   font-size: var(--zd_font_size22) ;
-  line-height: 1.3636;
+  line-height: var(--zd_size30);
 }
 .subtitle {
   font-size: var(--zd_font_size30) ;

package/lib/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -13,7 +13,7 @@
   font-size: var(--zd_font_size30) ;
 }
 .lastBox {
-  line-height: 1.7143;
+  line-height: var(--zd_size24);
   font-size: var(--zd_font_size14) ;
   margin: 0 auto ;
   margin-bottom: var(--zd_size20) ;