@zohodesk/dot 1.2.1 → 1.2.3

package/es/v1/avatar/AvatarCollision/AvatarCollision.js

@@ -0,0 +1,62 @@
+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 '../../../avatar/AvatarCollision/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarCollision/props/propTypes';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import { Icon } from '@zohodesk/icons';
+import style from '../../../avatar/AvatarCollision/AvatarCollision.module.css';
+export default class AvatarCollision extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title,
+      src,
+      name,
+      size,
+      onClick,
+      needCreateChat,
+      isLeft,
+      isIdle,
+      initial,
+      customProps,
+      dataSelectorId
+    } = this.props;
+    let {
+      AvatarCollisionProps = {},
+      AvatarProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      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({
+      src: src,
+      name: name,
+      size: size,
+      palette: "default",
+      needTitle: false,
+      initial: initial
+    }, AvatarProps)), needCreateChat && !isLeft && /*#__PURE__*/React.createElement("span", {
+      className: style.pop,
+      "data-title": title
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-livechat3"
+    }))));
+  }
+
+}
+AvatarCollision.propTypes = propTypes;
+AvatarCollision.defaultProps = defaultProps; // if (__DOCS__) {
+//   AvatarCollision.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/v1/avatar/AvatarIcon/AvatarIcon.js

@@ -0,0 +1,54 @@
+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 '../../../avatar/AvatarIcon/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarIcon/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container } from '@zohodesk/components/lib/Layout';
+import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import style from '../../../avatar/AvatarIcon/AvatarIcon.module.css';
+export default class AvatarIcon extends React.Component {
+  render() {
+    let {
+      name,
+      size,
+      iconSize,
+      iconClass,
+      iconColor,
+      onClick,
+      palette,
+      dataId,
+      className,
+      isIconBold,
+      title,
+      borderOnActive,
+      borderOnHover,
+      customProps,
+      dataSelectorId
+    } = this.props;
+    let {
+      AvatarIconProps = {}
+    } = customProps;
+    let border = borderOnHover || onClick;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette]} ${className}`,
+      onClick: onClick,
+      dataId: dataId,
+      "data-title": title,
+      isInline: true,
+      align: "both",
+      isCover: false,
+      dataSelectorId: dataSelectorId
+    }, AvatarIconProps), /*#__PURE__*/React.createElement(Icon, {
+      name: name,
+      size: iconSize,
+      iconClass: ` ${iconClass} ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`]}` : ''} `,
+      isBold: isIconBold
+    }));
+  }
+
+}
+AvatarIcon.defaultProps = defaultProps;
+AvatarIcon.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarIcon.docs = { componentGroup: 'Avatar Group' };
+// }

package/es/v1/avatar/AvatarStatus/AvatarStatus.js

@@ -0,0 +1,72 @@
+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 '../../../avatar/AvatarStatus/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarStatus/props/propTypes';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import style from '../../../avatar/AvatarStatus/AvatarStatus.module.css';
+export default class AvatarStatus extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      src,
+      name,
+      size,
+      onClick,
+      title,
+      state,
+      dataId,
+      initial,
+      shape,
+      needTitle,
+      className,
+      needBorder,
+      palette,
+      textPalette,
+      customTextClass,
+      statusTitle,
+      customProps,
+      dataSelectorId,
+      needDefaultBorder
+    } = this.props;
+    let {
+      AvatarStatusProps = {},
+      AvatarProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: `${style.container} ${className} `
+    }, AvatarStatusProps, {
+      tabIndex: "0",
+      "aria-label": `${title}, ${name}, ${statusTitle}`,
+      "data-selector-id": dataSelectorId
+    }), /*#__PURE__*/React.createElement(Avatar, _extends({
+      src: src,
+      name: name,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      title: title,
+      onClick: onClick,
+      size: size,
+      dataId: dataId,
+      initial: initial,
+      shape: shape,
+      needTitle: needTitle,
+      needDefaultBorder: needDefaultBorder,
+      needBorder: needBorder
+    }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
+      "data-title": statusTitle,
+      className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
+    }));
+  }
+
+}
+AvatarStatus.defaultProps = defaultProps;
+AvatarStatus.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarStatus.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/v1/avatar/AvatarThread/AvatarThread.js

@@ -0,0 +1,79 @@
+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 '../../../avatar/AvatarThread/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarThread/props/propTypes';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import { Icon } from '@zohodesk/icons';
+import style from '../../../avatar/AvatarThread/AvatarThread.module.css';
+export default class AvatarThread extends React.Component {
+  render() {
+    let {
+      src,
+      name,
+      size,
+      iconColor,
+      iconName,
+      iconSize,
+      borderPalette,
+      onClick,
+      title,
+      iconTitle,
+      onIconClick,
+      showOnHover,
+      dataId,
+      initial,
+      needBorder,
+      needBackground,
+      palette,
+      textPalette,
+      customTextClass,
+      needTitle,
+      customProps,
+      iconClass,
+      getCustomThread,
+      dataSelectorId
+    } = this.props;
+    let {
+      AvatarThreadProps = {},
+      AvatarProps = {}
+    } = customProps;
+    let hoverEffect = showOnHover ? style.hover : '';
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
+      "data-selector-id": dataSelectorId
+    }, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+      initial: initial,
+      src: src,
+      name: name,
+      title: title,
+      size: size,
+      onClick: onClick,
+      dataId: dataId,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      needTitle: needTitle
+    }, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
+      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
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: `${iconClass}
+                  ${style[`text_${iconColor}`] ? style[`text_${iconColor}`] : iconColor}`
+    })), getCustomThread && getCustomThread()));
+  }
+
+}
+AvatarThread.defaultProps = defaultProps;
+AvatarThread.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarThread.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/v1/avatar/AvatarUser/AvatarUser.js

@@ -0,0 +1,116 @@
+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 '../../../avatar/AvatarUser/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarUser/props/propTypes';
+/**** Components ****/
+
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import AvatarIcon from '../AvatarIcon/AvatarIcon';
+import { Icon } from '@zohodesk/icons';
+import style from '../../../avatar/AvatarUser/AvatarUser.module.css';
+/**** Methods ****/
+
+export default class AvatarUser extends React.Component {
+  render() {
+    let {
+      src,
+      alternateSrc,
+      name,
+      size,
+      onClick,
+      onDelete,
+      title,
+      isPaid,
+      isPortal,
+      isLocked,
+      dataId,
+      dataSelectorId,
+      needTitle,
+      needDelete,
+      initial,
+      palette,
+      textPalette,
+      customTextClass,
+      iconName,
+      iconSize,
+      iconClass,
+      iconColor,
+      i18nKeys,
+      customProps
+    } = this.props;
+    let {
+      AvatarUserProps = {},
+      AvatarIconProps = {},
+      AvatarProps = {}
+    } = customProps;
+    let {
+      paidTitle = 'Paid User',
+      portalTitle = 'End User',
+      lockTitle = 'Locked'
+    } = i18nKeys;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: `${style.container} ${style[size]}`,
+      "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,
+      size: size,
+      iconClass: iconClass,
+      dataId: iconName,
+      iconColor: iconColor,
+      title: title
+    }, AvatarIconProps)) : /*#__PURE__*/React.createElement(Avatar, _extends({
+      src: src,
+      name: name,
+      initial: initial,
+      title: title,
+      onClick: onClick,
+      size: size,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      alternateSrc: alternateSrc
+    }, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
+      "data-title": paidTitle,
+      className: style.paid,
+      "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-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-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 (__DOCS__) {
+//   AvatarUser.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/v1/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -0,0 +1,98 @@
+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 '../../../avatar/AvatarWithTeam/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarWithTeam/props/propTypes';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
+import style from '../../../avatar/AvatarWithTeam/AvatarWithTeam.module.css';
+export default class AvatarWithTeam extends React.Component {
+  render() {
+    let {
+      name,
+      size,
+      src,
+      teamName,
+      isTeam,
+      needTitle = false,
+      initial,
+      title,
+      palette,
+      textPalette,
+      customTextClass,
+      teamClassName,
+      borderOnActive,
+      customProps,
+      dataSelectorId,
+      teamBorderActive
+    } = this.props;
+    let {
+      AvatarWithTeamProps = {},
+      Avatar1Props = {},
+      AvatarTeam1Props = {},
+      Avatar2Props = {},
+      AvatarTeam2Props = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: `${style.container} `,
+      "data-id": "avatarWithTeamId",
+      "data-test-id": "avatarWithTeamId",
+      "data-selector-id": dataSelectorId
+    }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
+      name: name,
+      src: src,
+      size: size,
+      initial: initial,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      borderOnActive: borderOnActive
+    }, Avatar1Props)) : isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, _extends({
+      name: name,
+      src: src,
+      size: size,
+      needTitle: needTitle,
+      title: needTitle ? title : undefined,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: {
+        customAvatar: customTextClass
+      },
+      borderOnActive: borderOnActive
+    }, AvatarTeam1Props)) : /*#__PURE__*/React.createElement(Avatar, _extends({
+      name: name,
+      src: src,
+      size: size,
+      initial: initial,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      borderOnActive: borderOnActive
+    }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
+      className: `${style.teamAvatar} ${teamClassName} `,
+      "data-id": "teamNameTestId",
+      "data-test-id": "teamNameTestId",
+      "data-title": needTitle ? title : undefined
+    }, /*#__PURE__*/React.createElement(AvatarTeam, _extends({
+      name: teamName,
+      size: "small",
+      palette: palette,
+      textPalette: textPalette,
+      isFilled: true,
+      needTitle: needTitle,
+      customClass: {
+        customAvatar: customTextClass
+      },
+      borderOnActive: teamBorderActive
+    }, AvatarTeam2Props))) : null);
+  }
+
+}
+AvatarWithTeam.defaultProps = defaultProps;
+AvatarWithTeam.propTypes = propTypes; // if (__DOCS__) {
+//   AvatarWithTeam.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }

package/es/v1/avatar/index.js

@@ -0,0 +1,7 @@
+export { default as AvatarClose } from './AvatarClose/AvatarClose';
+export { default as AvatarCollision } from './AvatarCollision/AvatarCollision';
+export { default as AvatarIcon } from './AvatarIcon/AvatarIcon';
+export { default as AvatarStatus } from './AvatarStatus/AvatarStatus';
+export { default as AvatarThread } from './AvatarThread/AvatarThread';
+export { default as AvatarUser } from './AvatarUser/AvatarUser';
+export { default as AvatarWithTeam } from './AvatarWithTeam/AvatarWithTeam';