@zohodesk/dot 1.0.0-temp.999 → 1.0.0-test.113

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

@@ -0,0 +1,13 @@
+export const defaultProps = {
+  iconSize: '15',
+  name: 'ZD-addAgent',
+  palette: 'default',
+  size: 'medium',
+  isIconBold: false,
+  iconClass: '',
+  className: '',
+  iconColor: 'default',
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {}
+};

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

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconColor: PropTypes.oneOf(['default', 'primary', 'success', 'danger', 'smoke18', 'grey', 'dark']),
+  iconSize: PropTypes.string,
+  isIconBold: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'danger']),
+  size: PropTypes.string,
+  title: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarIconProps: PropTypes.object
+  })
+};

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -1,14 +1,13 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import style from './AvatarStatus.module.css';
 export default class AvatarStatus extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       src,
@@ -35,7 +34,10 @@ export default class AvatarStatus extends React.Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.container} ${className} `
-    }, AvatarStatusProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+    }, AvatarStatusProps, {
+      tabIndex: "0",
+      "aria-label": `${title}, ${name}, ${statusTitle}`
+    }), /*#__PURE__*/React.createElement(Avatar, _extends({
       src: src,
       name: name,
       palette: palette,
@@ -54,40 +56,9 @@ export default class AvatarStatus extends React.Component {
       className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
     }));
   }
-
 }
-AvatarStatus.defaultProps = {
-  size: 'medium',
-  state: 'offline',
-  shape: 'circle',
-  className: '',
-  palette: 'info',
-  statusTitle: '',
-  customProps: {}
-};
-AvatarStatus.propTypes = {
-  className: PropTypes.string,
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  initial: PropTypes.string,
-  name: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needTitle: PropTypes.bool,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  shape: PropTypes.string,
-  size: PropTypes.string,
-  src: PropTypes.string,
-  state: PropTypes.string,
-  statusTitle: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  title: PropTypes.string,
-  customProps: PropTypes.shape({
-    AvatarStatusProps: PropTypes.object,
-    AvatarProps: PropTypes.object
-  })
-};
-
+AvatarStatus.defaultProps = defaultProps;
+AvatarStatus.propTypes = propTypes;
 if (false) {
   AvatarStatus.docs = {
     componentGroup: 'Avatar Group'

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

@@ -11,28 +11,24 @@
 .circle.state {
   border: 1px solid var(--zdt_avatarstatus_size_border);
 }
-.small.square.state,
-.xsmall.square.state {
+.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 {
+.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
   border: 2px solid var(--zdt_avatarstatus_size_border);
 }
 .online {
-  background-color: var(--zdt_avatarstatus_online_bg);
   composes: state;
+  background-color: var(--zdt_avatarstatus_online_bg);
 }
 
 .offline {
-  background-color: var(--zdt_avatarstatus_offline_bg);
   composes: state;
+  background-color: var(--zdt_avatarstatus_offline_bg);
 }
 .idle {
-  background-color: var(--zdt_avatarstatus_idle_bg);
   composes: state;
+  background-color: var(--zdt_avatarstatus_idle_bg);
 }
 
 .small.state,
@@ -53,44 +49,98 @@
 
 .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/AvatarStatus/props/defaultProps.js

@@ -0,0 +1,9 @@
+export const defaultProps = {
+  size: 'medium',
+  state: 'offline',
+  shape: 'circle',
+  className: '',
+  palette: 'info',
+  statusTitle: '',
+  customProps: {}
+};

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

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  className: PropTypes.string,
+  customTextClass: PropTypes.string,
+  dataId: PropTypes.string,
+  initial: PropTypes.string,
+  name: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needTitle: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: PropTypes.string,
+  size: PropTypes.string,
+  src: PropTypes.string,
+  state: PropTypes.string,
+  statusTitle: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  customProps: PropTypes.shape({
+    AvatarStatusProps: PropTypes.object,
+    AvatarProps: PropTypes.object
+  })
+};

package/es/avatar/AvatarThread/AvatarThread.js

@@ -1,7 +1,7 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
+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 style from './AvatarThread.module.css';
@@ -65,45 +65,9 @@ export default class AvatarThread extends React.Component {
                   ${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
     })), getCustomThread && getCustomThread()));
   }
-
 }
-AvatarThread.defaultProps = {
-  size: 'medium',
-  iconSize: '6',
-  borderPalette: 'default',
-  needBorder: true,
-  needBackground: true,
-  customProps: {}
-};
-AvatarThread.propTypes = {
-  borderPalette: PropTypes.oneOfType(['primary', 'success', 'danger', 'default']),
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  iconColor: PropTypes.string,
-  iconName: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  iconTitle: PropTypes.string,
-  initial: PropTypes.string,
-  name: PropTypes.string,
-  needBackground: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  needTitle: PropTypes.bool,
-  onClick: PropTypes.func,
-  onIconClick: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  showOnHover: PropTypes.bool,
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  title: PropTypes.string,
-  customProps: PropTypes.shape({
-    AvatarThreadProps: PropTypes.object,
-    AvatarProps: PropTypes.object
-  }),
-  iconClass: PropTypes.string,
-  getCustomThread: PropTypes.func
-};
-
+AvatarThread.defaultProps = defaultProps;
+AvatarThread.propTypes = propTypes;
 if (false) {
   AvatarThread.docs = {
     componentGroup: 'Avatar Group'

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

@@ -27,51 +27,99 @@
 
 .thread_xsmall_pos {
   top: calc(var(--zd_size5) * -1);
+}
+
+[dir=ltr] .thread_xsmall_pos {
   right: calc(var(--zd_size5) * -1);
 }
 
+[dir=rtl] .thread_xsmall_pos {
+  left: calc(var(--zd_size5) * -1);
+}
 .thread_small_pos {
   top: calc(var(--zd_size3) * -1);
-  right: calc(var(--zd_size6) * -1);
   height: var(--zd_size12);
   width: var(--zd_size12);
 }
+[dir=ltr] .thread_small_pos {
+  right: calc(var(--zd_size6) * -1);
+}
+[dir=rtl] .thread_small_pos {
+  left: calc(var(--zd_size6) * -1);
+}
+
 .thread_small_pos i {
   font-size: var(--zd_font_size8);
 }
 
 .thread_medium_pos {
   top: calc(var(--zd_size4) * -1);
+}
+
+[dir=ltr] .thread_medium_pos {
   right: calc(var(--zd_size5) * -1);
 }
 
+[dir=rtl] .thread_medium_pos {
+  left: calc(var(--zd_size5) * -1);
+}
+
 .thread_xmedium_pos {
   top: calc(var(--zd_size4) * -1);
+}
+
+[dir=ltr] .thread_xmedium_pos {
   right: calc(var(--zd_size3) * -1);
 }
 
+[dir=rtl] .thread_xmedium_pos {
+  left: calc(var(--zd_size3) * -1);
+}
+
 .thread_large_pos {
   top: 0;
-  right: 0;
   height: var(--zd_size16);
   width: var(--zd_size16);
 }
 
+[dir=ltr] .thread_large_pos {
+  right: 0;
+}
+
+[dir=rtl] .thread_large_pos {
+  left: 0;
+}
+
 .thread_xlarge_pos {
   top: var(--zd_size2);
-  right: var(--zd_size4);
   height: var(--zd_size18);
   width: var(--zd_size18);
 }
 
+[dir=ltr] .thread_xlarge_pos {
+  right: var(--zd_size4);
+}
+
+[dir=rtl] .thread_xlarge_pos {
+  left: var(--zd_size4);
+}
+
 .icon {
   position: absolute;
   line-height: 0;
-  left: 50%;
   top: 50%;
+}
+
+[dir=ltr] .icon {
+  left: 50%;
   transform: translate(-50%, -50%);
 }
 
+[dir=rtl] .icon {
+  right: 50%;
+  transform: translate(50%, -50%);
+}
+
 .border_primary {
   border: 1px solid var(--zdt_avatarthread_primary_border);
 }
@@ -85,14 +133,17 @@
 .border_default {
   border: 1px solid var(--zdt_avatarthread_default_border);
 }
+.border_orange {
+  border: 1px solid var(--zdt_avatarthread_orange_border);
+}
 
 .hover .thread {
   display: none;
 }
 
 .hover .thread {
-  cursor: pointer;
   z-index: 1;
+  cursor: pointer;
 }
 
 .hover:hover .thread {
@@ -111,3 +162,6 @@
 .text_default {
   color: var(--zdt_avatarthread_default_text);
 }
+.text_orange {
+  color: var(--zdt_avatarthread_orange_text);
+}

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

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  size: 'medium',
+  iconSize: '6',
+  borderPalette: 'default',
+  needBorder: true,
+  needBackground: true,
+  customProps: {}
+};

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

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  borderPalette: PropTypes.oneOfType(['primary', 'success', 'danger', 'default', 'orange']),
+  customTextClass: PropTypes.string,
+  dataId: PropTypes.string,
+  iconColor: PropTypes.string,
+  iconName: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  iconTitle: PropTypes.string,
+  initial: PropTypes.string,
+  name: PropTypes.string,
+  needBackground: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTitle: PropTypes.bool,
+  onClick: PropTypes.func,
+  onIconClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  showOnHover: PropTypes.bool,
+  size: PropTypes.string,
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  customProps: PropTypes.shape({
+    AvatarThreadProps: PropTypes.object,
+    AvatarProps: PropTypes.object
+  }),
+  iconClass: PropTypes.string,
+  getCustomThread: PropTypes.func
+};

package/es/avatar/AvatarUser/AvatarUser.js

@@ -1,10 +1,9 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 PropTypes from 'prop-types';
+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';
@@ -98,49 +97,9 @@ export default class AvatarUser extends React.Component {
       size: "15"
     })) : null);
   }
-
 }
-AvatarUser.propTypes = {
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconColor: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  initial: PropTypes.string,
-  isLocked: PropTypes.bool,
-  isPaid: PropTypes.bool,
-  isPortal: PropTypes.bool,
-  name: PropTypes.string,
-  needDelete: PropTypes.bool,
-  needTitle: PropTypes.bool,
-  onClick: PropTypes.func,
-  onDelete: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  title: PropTypes.string,
-  alternateSrc: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    paidTitle: PropTypes.string,
-    portalTitle: PropTypes.string,
-    lockTitle: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    AvatarUserProps: PropTypes.object,
-    AvatarIconProps: PropTypes.object,
-    AvatarProps: PropTypes.object
-  })
-};
-AvatarUser.defaultProps = {
-  needTitle: true,
-  size: 'medium',
-  needDelete: false,
-  i18nKeys: {},
-  customProps: {}
-};
-
+AvatarUser.propTypes = propTypes;
+AvatarUser.defaultProps = defaultProps;
 if (false) {
   AvatarUser.docs = {
     componentGroup: 'Avatar Group'