@zohodesk/dot 1.3.3 → 1.4.1

package/es/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/es/version2/notification/DesktopNotification/props/defaultProps.js

@@ -1,3 +1,4 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export const defaultProps = {
   isMore: false,
   isAnimate: true,
@@ -11,5 +12,6 @@ export const defaultProps = {
   isShrinkView: false,
   needClose: true,
   customProps: {},
-  dataSelectorId: 'desktopNotification'
+  dataSelectorId: 'desktopNotification',
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

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

@@ -4,7 +4,8 @@ export const propTypes = {
   onPortalClose: PropTypes.func,
   autoClose: PropTypes.bool,
   hideTime: PropTypes.string,
-  Element: PropTypes.element
+  Element: PropTypes.element,
+  responsiveId: PropTypes.string
 };
 export const DesktopNotificationUI_propTypes = {
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),

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: var(--zd_size22);
-    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);
   }
@@ -72,16 +69,16 @@
 .primary .infoText {
     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) ;
   }
@@ -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/AttachmentViewer/AttachmentViewer.module.css

@@ -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/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/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,
@@ -60,11 +62,13 @@
   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/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,6 +5,7 @@
   display: inline;
 }
 .icon{
+  /* css:theme-validation:ignore */
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/lib/layout/SubtabLayout/SubtabLayout.module.css

@@ -48,6 +48,7 @@
 }
 
 .tertiary_borderStyle {
+  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -149,6 +150,7 @@
 
 .footer {
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/lib/list/Comment/Comment.js

@@ -15,8 +15,6 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
-var _i18n = require("@zohodesk/i18n");
-
 var _Button = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/Button"));
 
 var _CommentModule = _interopRequireDefault(require("./Comment.module.css"));
@@ -64,17 +62,15 @@ var Comment = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           count = _this$props.count,
           onClick = _this$props.onClick,
-          className = _this$props.className;
-      var i18N = _i18n.i18NProviderUtils.getI18NValue;
-      var commentCount = parseInt(count);
-      var commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
+          className = _this$props.className,
+          title = _this$props.title;
       return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         customClass: "".concat(_CommentModule["default"].container, " ").concat(className, " "),
         onClick: onClick,
         dataId: "commentLstContainer",
-        title: commentTitle,
+        title: title,
         a11y: {
-          ariaLabel: commentTitle
+          ariaLabel: title
         }
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-TK-commentLine",

package/lib/list/Comment/Comment.module.css

@@ -5,6 +5,7 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/lib/list/Comment/props/defaultProps.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultProps = void 0;
 var defaultProps = {
-  className: ''
+  className: '',
+  title: ''
 };
 exports.defaultProps = defaultProps;

package/lib/list/Comment/props/propTypes.js

@@ -12,6 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   className: _propTypes["default"].string,
   count: _propTypes["default"].string,
+  title: _propTypes["default"].string,
   onClick: _propTypes["default"].func
 };
 exports.propTypes = propTypes;

package/lib/list/Dot/Dot.module.css

@@ -4,6 +4,7 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
+  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }

package/lib/list/ListLayout/ListLayout.module.css

@@ -35,10 +35,22 @@
   padding: var(--zd_size2) 0 ;
 }
 
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
 
+.compact,
+.classic,
+.superCompact {
+  /* css:theme-validation:ignore */
+}
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/lib/list/Subject/Subject.module.css

@@ -3,6 +3,7 @@
 }
 .subject {
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }