@zohodesk/dot 1.0.0-test.239 → 1.0.0

package/es/avatar/AvatarStatus/AvatarStatus.module.css

@@ -33,114 +33,114 @@
 
 .small.state,
 .xsmall.state {
-  width: var(--zd_size7);
-  height: var(--zd_size7);
+  width: var(--zd_size7) ;
+  height: var(--zd_size7) ;
 }
 .medium.state,
 .xmedium.state {
-  width: var(--zd_size9);
-  height: var(--zd_size9);
+  width: var(--zd_size9) ;
+  height: var(--zd_size9) ;
 }
 .large.state,
 .xlarge.state {
-  width: var(--zd_size12);
-  height: var(--zd_size12);
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
 }
 
 .small.circle.state {
-  bottom: var(--zd_size1);
+  bottom: var(--zd_size1) ;
 }
 
 [dir=ltr] .small.circle.state {
-  right: calc(var(--zd_size1) * -1);
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 [dir=rtl] .small.circle.state {
-  left: calc(var(--zd_size1) * -1);
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 .xsmall.circle.state {
-  bottom: var(--zd_size3);
+  bottom: var(--zd_size3) ;
 }
 [dir=ltr] .xsmall.circle.state {
-  right: 0;
+  right: 0 ;
 }
 [dir=rtl] .xsmall.circle.state {
-  left: 0;
+  left: 0 ;
 }
 .medium.circle.state,
 .xmedium.circle.state {
-  bottom: var(--zd_size3);
+  bottom: var(--zd_size3) ;
 }
 [dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
-  right: 0;
+  right: 0 ;
 }
 [dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
-  left: 0;
+  left: 0 ;
 }
 .large.circle.state {
-  bottom: var(--zd_size7);
+  bottom: var(--zd_size7) ;
 }
 [dir=ltr] .large.circle.state {
-  right: var(--zd_size1);
+  right: var(--zd_size1) ;
 }
 [dir=rtl] .large.circle.state {
-  left: var(--zd_size1);
+  left: var(--zd_size1) ;
 }
 .xlarge.circle.state {
-  bottom: var(--zd_size6);
+  bottom: var(--zd_size6) ;
 }
 [dir=ltr] .xlarge.circle.state {
-  right: var(--zd_size8);
+  right: var(--zd_size8) ;
 }
 [dir=rtl] .xlarge.circle.state {
-  left: var(--zd_size8);
+  left: var(--zd_size8) ;
 }
 
 .small.square.state {
-  bottom: calc(var(--zd_size1) * -1);
+  bottom: calc( var(--zd_size1) * -1 ) ;
 }
 
 [dir=ltr] .small.square.state {
-  right: calc(var(--zd_size1) * -1);
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 [dir=rtl] .small.square.state {
-  left: calc(var(--zd_size1) * -1);
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 .xsmall.square.state {
-  bottom: calc(var(--zd_size1) * -1);
+  bottom: calc( var(--zd_size1) * -1 ) ;
 }
 [dir=ltr] .xsmall.square.state {
-  right: calc(var(--zd_size2) * -1);
+  right: calc( var(--zd_size2) * -1 ) ;
 }
 [dir=rtl] .xsmall.square.state {
-  left: calc(var(--zd_size2) * -1);
+  left: calc( var(--zd_size2) * -1 ) ;
 }
 .medium.square.state,
 .xmedium.square.state {
-  bottom: calc(var(--zd_size2) * -1);
+  bottom: calc( var(--zd_size2) * -1 ) ;
 }
 [dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
-  right: calc(var(--zd_size4) * -1);
+  right: calc( var(--zd_size4) * -1 ) ;
 }
 [dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
-  left: calc(var(--zd_size4) * -1);
+  left: calc( var(--zd_size4) * -1 ) ;
 }
 .large.square.state {
-  bottom: calc(var(--zd_size2) * -1);
+  bottom: calc( var(--zd_size2) * -1 ) ;
 }
 [dir=ltr] .large.square.state {
-  right: calc(var(--zd_size5) * -1);
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 [dir=rtl] .large.square.state {
-  left: calc(var(--zd_size5) * -1);
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 .xlarge.square.state {
-  bottom: calc(var(--zd_size3) * -1);
+  bottom: calc( var(--zd_size3) * -1 ) ;
 }
 [dir=ltr] .xlarge.square.state {
-  right: calc(var(--zd_size5) * -1);
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 [dir=rtl] .xlarge.square.state {
-  left: calc(var(--zd_size5) * -1);
+  left: calc( var(--zd_size5) * -1 ) ;
 }

package/es/avatar/AvatarStatus/props/defaultProps.js

@@ -5,5 +5,8 @@ export const defaultProps = {
   className: '',
   palette: 'info',
   statusTitle: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarStatus',
+  needDefaultBorder: false,
+  needBorder: false
 };

package/es/avatar/AvatarStatus/props/propTypes.js

@@ -13,9 +13,12 @@ export const propTypes = {
   size: PropTypes.string,
   src: PropTypes.string,
   state: PropTypes.string,
+  needDefaultBorder: PropTypes.bool,
+  needBorder: PropTypes.bool,
   statusTitle: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   customProps: PropTypes.shape({
     AvatarStatusProps: PropTypes.object,
     AvatarProps: PropTypes.object

package/es/avatar/AvatarThread/AvatarThread.js

@@ -1,9 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './AvatarThread.module.css';
 export default class AvatarThread extends React.Component {
   render() {
@@ -30,7 +31,8 @@ export default class AvatarThread extends React.Component {
       needTitle,
       customProps,
       iconClass,
-      getCustomThread
+      getCustomThread,
+      dataSelectorId
     } = this.props;
     let {
       AvatarThreadProps = {},
@@ -38,7 +40,8 @@ export default class AvatarThread extends React.Component {
     } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`
+      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
+      "data-selector-id": dataSelectorId
     }, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       initial: initial,
       src: src,
@@ -55,6 +58,7 @@ export default class AvatarThread extends React.Component {
       className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
       "data-title": iconTitle,
       "data-id": iconTitle === 'Remove Follower' && 'removeFollower',
+      "data-test-id": iconTitle === 'Remove Follower' && 'removeFollower',
       onClick: onIconClick
     }, iconName && /*#__PURE__*/React.createElement("span", {
       className: style.icon
@@ -65,11 +69,11 @@ export default class AvatarThread extends React.Component {
                   ${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
     })), getCustomThread && getCustomThread()));
   }
+
 }
 AvatarThread.defaultProps = defaultProps;
-AvatarThread.propTypes = propTypes;
-if (false) {
-  AvatarThread.docs = {
-    componentGroup: 'Avatar Group'
-  };
-}
+AvatarThread.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarThread.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/avatar/AvatarThread/AvatarThread.module.css

@@ -21,102 +21,102 @@
 .thread_xsmall_pos,
 .thread_medium_pos,
 .thread_xmedium_pos {
-  height: var(--zd_size15);
-  width: var(--zd_size15);
+  height: var(--zd_size15) ;
+  width: var(--zd_size15) ;
 }
 
 .thread_xsmall_pos {
-  top: calc(var(--zd_size5) * -1);
+  top: calc( var(--zd_size5) * -1 ) ;
 }
 
 [dir=ltr] .thread_xsmall_pos {
-  right: calc(var(--zd_size5) * -1);
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 
 [dir=rtl] .thread_xsmall_pos {
-  left: calc(var(--zd_size5) * -1);
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 .thread_small_pos {
-  top: calc(var(--zd_size3) * -1);
-  height: var(--zd_size12);
-  width: var(--zd_size12);
+  top: calc( var(--zd_size3) * -1 ) ;
+  height: var(--zd_size12) ;
+  width: var(--zd_size12) ;
 }
 [dir=ltr] .thread_small_pos {
-  right: calc(var(--zd_size6) * -1);
+  right: calc( var(--zd_size6) * -1 ) ;
 }
 [dir=rtl] .thread_small_pos {
-  left: calc(var(--zd_size6) * -1);
+  left: calc( var(--zd_size6) * -1 ) ;
 }
 
 .thread_small_pos i {
-  font-size: var(--zd_font_size8);
+  font-size: var(--zd_font_size8) ;
 }
 
 .thread_medium_pos {
-  top: calc(var(--zd_size4) * -1);
+  top: calc( var(--zd_size4) * -1 ) ;
 }
 
 [dir=ltr] .thread_medium_pos {
-  right: calc(var(--zd_size5) * -1);
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 
 [dir=rtl] .thread_medium_pos {
-  left: calc(var(--zd_size5) * -1);
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 
 .thread_xmedium_pos {
-  top: calc(var(--zd_size4) * -1);
+  top: calc( var(--zd_size4) * -1 ) ;
 }
 
 [dir=ltr] .thread_xmedium_pos {
-  right: calc(var(--zd_size3) * -1);
+  right: calc( var(--zd_size3) * -1 ) ;
 }
 
 [dir=rtl] .thread_xmedium_pos {
-  left: calc(var(--zd_size3) * -1);
+  left: calc( var(--zd_size3) * -1 ) ;
 }
 
 .thread_large_pos {
-  top: 0;
-  height: var(--zd_size16);
-  width: var(--zd_size16);
+  top: 0 ;
+  height: var(--zd_size16) ;
+  width: var(--zd_size16) ;
 }
 
 [dir=ltr] .thread_large_pos {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .thread_large_pos {
-  left: 0;
+  left: 0 ;
 }
 
 .thread_xlarge_pos {
-  top: var(--zd_size2);
-  height: var(--zd_size18);
-  width: var(--zd_size18);
+  top: var(--zd_size2) ;
+  height: var(--zd_size18) ;
+  width: var(--zd_size18) ;
 }
 
 [dir=ltr] .thread_xlarge_pos {
-  right: var(--zd_size4);
+  right: var(--zd_size4) ;
 }
 
 [dir=rtl] .thread_xlarge_pos {
-  left: var(--zd_size4);
+  left: var(--zd_size4) ;
 }
 
 .icon {
   position: absolute;
   line-height: 0;
-  top: 50%;
+  top: 50% ;
 }
 
 [dir=ltr] .icon {
-  left: 50%;
+  left: 50% ;
   transform: translate(-50%, -50%);
 }
 
 [dir=rtl] .icon {
-  right: 50%;
+  right: 50% ;
   transform: translate(50%, -50%);
 }
 

package/es/avatar/AvatarThread/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   borderPalette: 'default',
   needBorder: true,
   needBackground: true,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarThread'
 };

package/es/avatar/AvatarThread/props/propTypes.js

@@ -17,6 +17,7 @@ export const propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   showOnHover: PropTypes.bool,
   size: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,

package/es/avatar/AvatarUser/AvatarUser.js

@@ -1,12 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /**** Components ****/
+
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarIcon from '../AvatarIcon/AvatarIcon';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './AvatarUser.module.css';
 /**** Methods ****/
 
@@ -24,6 +26,7 @@ export default class AvatarUser extends React.Component {
       isPortal,
       isLocked,
       dataId,
+      dataSelectorId,
       needTitle,
       needDelete,
       initial,
@@ -49,7 +52,9 @@ export default class AvatarUser extends React.Component {
     } = i18nKeys;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.container} ${style[size]}`,
-      "data-id": dataId || name || iconName
+      "data-id": dataId || name || iconName,
+      "data-test-id": dataId || name || iconName,
+      "data-selector-id": dataSelectorId
     }, AvatarUserProps), iconName ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
       name: iconName,
       iconSize: iconSize,
@@ -73,35 +78,39 @@ export default class AvatarUser extends React.Component {
     }, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
       "data-title": paidTitle,
       className: style.paid,
-      "data-id": "paidUser"
+      "data-id": "paidUser",
+      "data-test-id": "paidUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-paiduser"
     })) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
       "data-title": portalTitle,
       className: style.portal,
-      "data-id": "portalUser"
+      "data-id": "portalUser",
+      "data-test-id": "portalUser"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-globe1"
     })) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
       "data-title": lockTitle,
       className: style.lock,
-      "data-id": "locked"
+      "data-id": "locked",
+      "data-test-id": "locked"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-lock01"
     })) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
       className: style.delete,
       "data-id": "dltContactPhoto",
+      "data-test-id": "dltContactPhoto",
       onClick: onDelete
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete2",
       size: "15"
     })) : null);
   }
+
 }
 AvatarUser.propTypes = propTypes;
-AvatarUser.defaultProps = defaultProps;
-if (false) {
-  AvatarUser.docs = {
-    componentGroup: 'Avatar Group'
-  };
-}
+AvatarUser.defaultProps = defaultProps; // if (__DOCS__) {
+//   AvatarUser.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/avatar/AvatarUser/AvatarUser.module.css

@@ -6,7 +6,7 @@
 .paid,
 .portal,
 .delete {
-  font-size: var(--zd_font_size10);
+  font-size: var(--zd_font_size10) ;
 }
 .paid,
 .portal,
@@ -19,22 +19,22 @@
   composes: middle from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .paid {
-  left: 50%;
+  left: 50% ;
 }
 [dir=rtl] .paid {
-  right: 50%;
+  right: 50% ;
 }
 .paid {
-  top: calc(var(--zd_size2) * -1);
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 .portal, .lock {
   background-color: var(--zdt_avataruser_default_bg);
   border-radius: 50%;
 }
 .delete {
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 0 ;
+  width: 100% ;
+  height: 100% ;
   opacity: 0;
   transition: all var(--zd_transition3);
   composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
@@ -44,128 +44,128 @@
   background-color: var(--zdt_avataruser_delete_bg);
 }
 [dir=ltr] .delete {
-  left: 0;
+  left: 0 ;
 }
 [dir=rtl] .delete {
-  right: 0;
+  right: 0 ;
 }
 .container:hover .delete {
   opacity: 1;
 }
 .small .portal {
-  top: 0;
+  top: 0 ;
 }
 [dir=ltr] .small .portal {
-  right: calc(var(--zd_size4) * -1);
+  right: calc( var(--zd_size4) * -1 ) ;
 }
 [dir=rtl] .small .portal {
-  left: calc(var(--zd_size4) * -1);
+  left: calc( var(--zd_size4) * -1 ) ;
 }
 .xsmall .portal {
-  top: var(--zd_size1);
+  top: var(--zd_size1) ;
 }
 [dir=ltr] .xsmall .portal {
-  right: calc(var(--zd_size2) * -1);
+  right: calc( var(--zd_size2) * -1 ) ;
 }
 [dir=rtl] .xsmall .portal {
-  left: calc(var(--zd_size2) * -1);
+  left: calc( var(--zd_size2) * -1 ) ;
 }
 .medium .portal {
-  top: var(--zd_size1);
+  top: var(--zd_size1) ;
 }
 [dir=ltr] .medium .portal {
-  right: calc(var(--zd_size1) * -1);
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 [dir=rtl] .medium .portal {
-  left: calc(var(--zd_size1) * -1);
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 .xmedium .portal {
-  top: var(--zd_size3);
+  top: var(--zd_size3) ;
 }
 [dir=ltr] .xmedium .portal {
-  right: 0;
+  right: 0 ;
 }
 [dir=rtl] .xmedium .portal {
-  left: 0;
+  left: 0 ;
 }
 .large .portal {
-  top: var(--zd_size8);
+  top: var(--zd_size8) ;
 }
 [dir=ltr] .large .portal {
-  right: var(--zd_size1);
+  right: var(--zd_size1) ;
 }
 [dir=rtl] .large .portal {
-  left: var(--zd_size1);
+  left: var(--zd_size1) ;
 }
 .xlarge .portal {
-  top: var(--zd_size15);
+  top: var(--zd_size15) ;
 }
 [dir=ltr] .xlarge .portal {
-  right: var(--zd_size2);
+  right: var(--zd_size2) ;
 }
 [dir=rtl] .xlarge .portal {
-  left: var(--zd_size2);
+  left: var(--zd_size2) ;
 }
 
 .small .lock {
-  top: 0;
-  font-size: var(--zd_font_size11);
+  top: 0 ;
+  font-size: var(--zd_font_size11) ;
 }
 
 [dir=ltr] .small .lock {
-  right: calc(var(--zd_size5) * -1);
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 
 [dir=rtl] .small .lock {
-  left: calc(var(--zd_size5) * -1);
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 .xsmall .lock {
-  top: var(--zd_size1);
-  font-size: var(--zd_font_size12);
+  top: var(--zd_size1) ;
+  font-size: var(--zd_font_size12) ;
 }
 [dir=ltr] .xsmall .lock {
-  right: calc(var(--zd_size4) * -1);
+  right: calc( var(--zd_size4) * -1 ) ;
 }
 [dir=rtl] .xsmall .lock {
-  left: calc(var(--zd_size4) * -1);
+  left: calc( var(--zd_size4) * -1 ) ;
 }
 .medium .lock {
-  top: var(--zd_size2);
-  font-size: var(--zd_font_size13);
+  top: var(--zd_size2) ;
+  font-size: var(--zd_font_size13) ;
 }
 [dir=ltr] .medium .lock {
-  right: calc(var(--zd_size5) * -1);
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 [dir=rtl] .medium .lock {
-  left: calc(var(--zd_size5) * -1);
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 .xmedium .lock {
-  top: var(--zd_size4);
-  font-size: var(--zd_font_size14);
+  top: var(--zd_size4) ;
+  font-size: var(--zd_font_size14) ;
 }
 [dir=ltr] .xmedium .lock {
-  right: calc(var(--zd_size6) * -1);
+  right: calc( var(--zd_size6) * -1 ) ;
 }
 [dir=rtl] .xmedium .lock {
-  left: calc(var(--zd_size6) * -1);
+  left: calc( var(--zd_size6) * -1 ) ;
 }
 .large .lock {
-  top: var(--zd_size6);
-  font-size: var(--zd_font_size18);
+  top: var(--zd_size6) ;
+  font-size: var(--zd_font_size18) ;
 }
 [dir=ltr] .large .lock {
-  right: calc(var(--zd_size6) * -1);
+  right: calc( var(--zd_size6) * -1 ) ;
 }
 [dir=rtl] .large .lock {
-  left: calc(var(--zd_size6) * -1);
+  left: calc( var(--zd_size6) * -1 ) ;
 }
 .xlarge .lock {
-  top: var(--zd_size12);
-  font-size: var(--zd_font_size22);
+  top: var(--zd_size12) ;
+  font-size: var(--zd_font_size22) ;
 }
 [dir=ltr] .xlarge .lock {
-  right: calc(var(--zd_size8) * -1);
+  right: calc( var(--zd_size8) * -1 ) ;
 }
 [dir=rtl] .xlarge .lock {
-  left: calc(var(--zd_size8) * -1);
+  left: calc( var(--zd_size8) * -1 ) ;
 }

package/es/avatar/AvatarUser/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   size: 'medium',
   needDelete: false,
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarUser'
 };