@zohodesk/dot 1.0.0-temp-153 → 1.0.0-temp-154

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -1,4 +1,5 @@
 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';
@@ -9,6 +10,7 @@ export default class AvatarCollision extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       title,
@@ -31,6 +33,7 @@ export default class AvatarCollision extends React.Component {
       className: `${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`,
       onClick: onClick,
       "data-id": "collsionPop",
+      "data-test-id": "collsionPop",
       "data-title": title,
       "data-selector-id": dataSelectorId
     }, AvatarCollisionProps), /*#__PURE__*/React.createElement(Avatar, _extends({
@@ -49,10 +52,10 @@ export default class AvatarCollision extends React.Component {
       name: "ZD-livechat3"
     }))));
   }
+
 }
 AvatarCollision.propTypes = propTypes;
-AvatarCollision.defaultProps = defaultProps;
-// if (__DOCS__) {
+AvatarCollision.defaultProps = defaultProps; // if (__DOCS__) {
 //   AvatarCollision.docs = {
 //     componentGroup: 'Avatar Group'
 //   };

package/es/avatar/AvatarCollision/AvatarCollision.module.css

@@ -1,69 +1,69 @@
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  border-radius: 50%;
-  padding: 2px;
-}
-.on {
-  border: 1px solid var(--zdt_avatarcollision_on_border);
-}
-.off {
-  border: 1px solid var(--zdt_avatarcollision_off_border);
-}
-.idle {
-  composes: on;
-  opacity: 0.4;
-}
-.pop {
-  position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-  opacity: 0;
-  visibility: hidden;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  transition: opacity var(--zd_transition2);
-  color: var(--zdt_avatarcollision_pop_text);
-  cursor: pointer;
-  transform: translateZ(0);
-  background-color: var(--zdt_avatarcollision_pop_bg);
-}
-[dir=ltr] .pop {
-  left: 0;
-}
-[dir=rtl] .pop {
-  right: 0;
-}
-.icon {
-  position: absolute;
-  line-height: 0;
-  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zdt_avatarcollision_icon_text);
-  font-size: 13px;
-}
-.container:hover .pop {
-  opacity: 1;
-  visibility: visible;
-}
-
-.off::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  height: 4px;
-  border: 1px solid var(--zdt_avatarcollision_off_after_border);
-  background-color: var(--zdt_avatarcollision_off_after_bg);
-}
-
-[dir=ltr] .off::after {
-  left: -5px;
-  right: -5px;
-  transform: translateY(-50%) rotate(130deg);
-}
-
-[dir=rtl] .off::after {
-  right: -5px;
-  left: -5px;
-  transform: translateY(-50%) rotate(-130deg);
-}
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  border-radius: 50%;
+  padding: var(--zd_size2) ;
+}
+.on {
+  border: 1px solid var(--zdt_avatarcollision_on_border);
+}
+.off {
+  border: 1px solid var(--zdt_avatarcollision_off_border);
+}
+.idle {
+  composes: on;
+  opacity: 0.4;
+}
+.pop {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  opacity: 0;
+  visibility: hidden;
+  top: 0 ;
+  height: 100% ;
+  width: 100% ;
+  transition: opacity var(--zd_transition2);
+  color: var(--zdt_avatarcollision_pop_text);
+  cursor: pointer;
+  transform: translateZ(0);
+  background-color: var(--zdt_avatarcollision_pop_bg);
+}
+[dir=ltr] .pop {
+  left: 0 ;
+}
+[dir=rtl] .pop {
+  right: 0 ;
+}
+.icon {
+  position: absolute;
+  line-height: 0;
+  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_avatarcollision_icon_text);
+  font-size: var(--zd_font_size13) ;
+}
+.container:hover .pop {
+  opacity: 1;
+  visibility: visible;
+}
+
+.off::after {
+  content: '';
+  position: absolute;
+  top: 50% ;
+  height: var(--zd_size4) ;
+  border: 1px solid var(--zdt_avatarcollision_off_after_border);
+  background-color: var(--zdt_avatarcollision_off_after_bg);
+}
+
+[dir=ltr] .off::after {
+  left: calc( var(--zd_size5) * -1 ) ;
+  right: calc( var(--zd_size5) * -1 ) ;
+  transform: translateY(-50%) rotate(130deg);
+}
+
+[dir=rtl] .off::after {
+  right: calc( var(--zd_size5) * -1 ) ;
+  left: calc( var(--zd_size5) * -1 ) ;
+  transform: translateY(-50%) rotate(-130deg);
+}

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -1,4 +1,5 @@
 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';
@@ -45,9 +46,9 @@ export default class AvatarIcon extends React.Component {
       isBold: isIconBold
     }));
   }
+
 }
 AvatarIcon.defaultProps = defaultProps;
-AvatarIcon.propTypes = propTypes;
-// if (__DOCS__) {
+AvatarIcon.propTypes = propTypes; // if (__DOCS__) {
 //   AvatarIcon.docs = { componentGroup: 'Avatar Group' };
 // }

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -1,58 +1,58 @@
-.varClass {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.container {
-  vertical-align: middle;
-  composes: varClass;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 50%;
-  border-color: var(--border_color)
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--border_hoverColor)
-}
-.default {
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.primary {
-  --border_color: var(--zdt_avatarIcon_primary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
-}
-.secondary {
-  --border_color: var(--zdt_avatarIcon_secondary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
-}
-.success {
-  --border_color: var(--zdt_avatarIcon_success_border);
-  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
-}
-.danger {
-  --border_color: var(--zdt_avatarIcon_danger_border);
-  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
-}
-.iconColor {
-  color: var(--icon_color);
-}
-.icon_danger {
-  --icon_color: var(--zdt_avatarIcon_danger_icon);
-}
-.icon_primary {
-  --icon_color: var(--zdt_avatarIcon_primary_icon);
-}
-.icon_grey {
-  --icon_color: var(--zdt_avatarIcon_grey_icon);
-}
-.icon_success {
-  --icon_color: var(--zdt_avatarIcon_success_icon);
-}
-.icon_smoke18 {
-  --icon_color: var(--zdt_avatarIcon_smoke_icon);
-}
-.icon_dark {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-}
-
+.varClass {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.container {
+  vertical-align: middle;
+  composes: varClass;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+  border-color: var(--border_color)
+}
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--border_hoverColor)
+}
+.default {
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.primary {
+  --border_color: var(--zdt_avatarIcon_primary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
+}
+.secondary {
+  --border_color: var(--zdt_avatarIcon_secondary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
+}
+.success {
+  --border_color: var(--zdt_avatarIcon_success_border);
+  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
+}
+.danger {
+  --border_color: var(--zdt_avatarIcon_danger_border);
+  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
+}
+.iconColor {
+  color: var(--icon_color);
+}
+.icon_danger {
+  --icon_color: var(--zdt_avatarIcon_danger_icon);
+}
+.icon_primary {
+  --icon_color: var(--zdt_avatarIcon_primary_icon);
+}
+.icon_grey {
+  --icon_color: var(--zdt_avatarIcon_grey_icon);
+}
+.icon_success {
+  --icon_color: var(--zdt_avatarIcon_success_icon);
+}
+.icon_smoke18 {
+  --icon_color: var(--zdt_avatarIcon_smoke_icon);
+}
+.icon_dark {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+}
+

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -1,4 +1,5 @@
 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';
@@ -8,6 +9,7 @@ export default class AvatarStatus extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       src,
@@ -60,11 +62,10 @@ export default class AvatarStatus extends React.Component {
       className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
     }));
   }
+
 }
 AvatarStatus.defaultProps = defaultProps;
-AvatarStatus.propTypes = propTypes;
-
-// if (__DOCS__) {
+AvatarStatus.propTypes = propTypes; // if (__DOCS__) {
 //   AvatarStatus.docs = {
 //     componentGroup: 'Avatar Group'
 //   };

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

@@ -1,146 +1,146 @@
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-}
-.state {
-  position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-  display: inline-block;
-}
-.circle.state {
-  border: 1px solid var(--zdt_avatarstatus_size_border);
-}
-.small.square.state, .xsmall.square.state {
-  border: 1px solid var(--zdt_avatarstatus_size_border);
-}
-.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
-  border: 2px solid var(--zdt_avatarstatus_size_border);
-}
-.online {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_online_bg);
-}
-
-.offline {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_offline_bg);
-}
-.idle {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_idle_bg);
-}
-
-.small.state,
-.xsmall.state {
-  width: 7px;
-  height: 7px;
-}
-.medium.state,
-.xmedium.state {
-  width: 9px;
-  height: 9px;
-}
-.large.state,
-.xlarge.state {
-  width: 12px;
-  height: 12px;
-}
-
-.small.circle.state {
-  bottom: 1px;
-}
-
-[dir=ltr] .small.circle.state {
-  right: -1px;
-}
-
-[dir=rtl] .small.circle.state {
-  left: -1px;
-}
-.xsmall.circle.state {
-  bottom: 3px;
-}
-[dir=ltr] .xsmall.circle.state {
-  right: 0;
-}
-[dir=rtl] .xsmall.circle.state {
-  left: 0;
-}
-.medium.circle.state,
-.xmedium.circle.state {
-  bottom: 3px;
-}
-[dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
-  right: 0;
-}
-[dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
-  left: 0;
-}
-.large.circle.state {
-  bottom: 7px;
-}
-[dir=ltr] .large.circle.state {
-  right: 1px;
-}
-[dir=rtl] .large.circle.state {
-  left: 1px;
-}
-.xlarge.circle.state {
-  bottom: 6px;
-}
-[dir=ltr] .xlarge.circle.state {
-  right: 8px;
-}
-[dir=rtl] .xlarge.circle.state {
-  left: 8px;
-}
-
-.small.square.state {
-  bottom: -1px;
-}
-
-[dir=ltr] .small.square.state {
-  right: -1px;
-}
-
-[dir=rtl] .small.square.state {
-  left: -1px;
-}
-.xsmall.square.state {
-  bottom: -1px;
-}
-[dir=ltr] .xsmall.square.state {
-  right: -2px;
-}
-[dir=rtl] .xsmall.square.state {
-  left: -2px;
-}
-.medium.square.state,
-.xmedium.square.state {
-  bottom: -2px;
-}
-[dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
-  right: -4px;
-}
-[dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
-  left: -4px;
-}
-.large.square.state {
-  bottom: -2px;
-}
-[dir=ltr] .large.square.state {
-  right: -5px;
-}
-[dir=rtl] .large.square.state {
-  left: -5px;
-}
-.xlarge.square.state {
-  bottom: -3px;
-}
-[dir=ltr] .xlarge.square.state {
-  right: -5px;
-}
-[dir=rtl] .xlarge.square.state {
-  left: -5px;
-}
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+}
+.state {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  display: inline-block;
+}
+.circle.state {
+  border: 1px solid var(--zdt_avatarstatus_size_border);
+}
+.small.square.state, .xsmall.square.state {
+  border: 1px solid var(--zdt_avatarstatus_size_border);
+}
+.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
+  border: 2px solid var(--zdt_avatarstatus_size_border);
+}
+.online {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_online_bg);
+}
+
+.offline {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_offline_bg);
+}
+.idle {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_idle_bg);
+}
+
+.small.state,
+.xsmall.state {
+  width: var(--zd_size7) ;
+  height: var(--zd_size7) ;
+}
+.medium.state,
+.xmedium.state {
+  width: var(--zd_size9) ;
+  height: var(--zd_size9) ;
+}
+.large.state,
+.xlarge.state {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+}
+
+.small.circle.state {
+  bottom: var(--zd_size1) ;
+}
+
+[dir=ltr] .small.circle.state {
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=rtl] .small.circle.state {
+  left: calc( var(--zd_size1) * -1 ) ;
+}
+.xsmall.circle.state {
+  bottom: var(--zd_size3) ;
+}
+[dir=ltr] .xsmall.circle.state {
+  right: 0 ;
+}
+[dir=rtl] .xsmall.circle.state {
+  left: 0 ;
+}
+.medium.circle.state,
+.xmedium.circle.state {
+  bottom: var(--zd_size3) ;
+}
+[dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
+  right: 0 ;
+}
+[dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
+  left: 0 ;
+}
+.large.circle.state {
+  bottom: var(--zd_size7) ;
+}
+[dir=ltr] .large.circle.state {
+  right: var(--zd_size1) ;
+}
+[dir=rtl] .large.circle.state {
+  left: var(--zd_size1) ;
+}
+.xlarge.circle.state {
+  bottom: var(--zd_size6) ;
+}
+[dir=ltr] .xlarge.circle.state {
+  right: var(--zd_size8) ;
+}
+[dir=rtl] .xlarge.circle.state {
+  left: var(--zd_size8) ;
+}
+
+.small.square.state {
+  bottom: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=ltr] .small.square.state {
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=rtl] .small.square.state {
+  left: calc( var(--zd_size1) * -1 ) ;
+}
+.xsmall.square.state {
+  bottom: calc( var(--zd_size1) * -1 ) ;
+}
+[dir=ltr] .xsmall.square.state {
+  right: calc( var(--zd_size2) * -1 ) ;
+}
+[dir=rtl] .xsmall.square.state {
+  left: calc( var(--zd_size2) * -1 ) ;
+}
+.medium.square.state,
+.xmedium.square.state {
+  bottom: calc( var(--zd_size2) * -1 ) ;
+}
+[dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
+  right: calc( var(--zd_size4) * -1 ) ;
+}
+[dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
+  left: calc( var(--zd_size4) * -1 ) ;
+}
+.large.square.state {
+  bottom: calc( var(--zd_size2) * -1 ) ;
+}
+[dir=ltr] .large.square.state {
+  right: calc( var(--zd_size5) * -1 ) ;
+}
+[dir=rtl] .large.square.state {
+  left: calc( var(--zd_size5) * -1 ) ;
+}
+.xlarge.square.state {
+  bottom: calc( var(--zd_size3) * -1 ) ;
+}
+[dir=ltr] .xlarge.square.state {
+  right: calc( var(--zd_size5) * -1 ) ;
+}
+[dir=rtl] .xlarge.square.state {
+  left: calc( var(--zd_size5) * -1 ) ;
+}

package/es/avatar/AvatarThread/AvatarThread.js

@@ -1,4 +1,5 @@
 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';
@@ -57,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
@@ -67,11 +69,10 @@ export default class AvatarThread extends React.Component {
                   ${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
     })), getCustomThread && getCustomThread()));
   }
+
 }
 AvatarThread.defaultProps = defaultProps;
-AvatarThread.propTypes = propTypes;
-
-// if (__DOCS__) {
+AvatarThread.propTypes = propTypes; // if (__DOCS__) {
 //   AvatarThread.docs = {
 //     componentGroup: 'Avatar Group'
 //   };