@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.210

package/es/avatar/AvatarUser/AvatarUser.js

@@ -1,99 +1,114 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+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); }
+
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
 /**** Components ****/
+
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import AvatarIcon from '../AvatarIcon/AvatarIcon';
 import Icon from '@zohodesk/icons/lib/Icon';
 import style from './AvatarUser.module.css';
 /**** Methods ****/
-import { i18NProviderUtils } from '@zohodesk/i18n';
-
-var AvatarUser = function (_React$Component) {
-  _inherits(AvatarUser, _React$Component);
 
-  function AvatarUser() {
-    _classCallCheck(this, AvatarUser);
-
-    return _possibleConstructorReturn(this, (AvatarUser.__proto__ || _Object$getPrototypeOf(AvatarUser)).apply(this, arguments));
+export default class AvatarUser extends React.Component {
+  render() {
+    let {
+      src,
+      alternateSrc,
+      name,
+      size,
+      onClick,
+      onDelete,
+      title,
+      isPaid,
+      isPortal,
+      isLocked,
+      dataId,
+      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
+    }, 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"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-paiduser"
+    })) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
+      "data-title": portalTitle,
+      className: style.portal,
+      "data-id": "portalUser"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-globe1"
+    })) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
+      "data-title": lockTitle,
+      className: style.lock,
+      "data-id": "locked"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-lock01"
+    })) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
+      className: style.delete,
+      "data-id": "dltContactPhoto",
+      onClick: onDelete
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-delete2",
+      size: "15"
+    })) : null);
   }
 
-  _createClass(AvatarUser, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          src = _props.src,
-          name = _props.name,
-          size = _props.size,
-          onClick = _props.onClick,
-          onDelete = _props.onDelete,
-          title = _props.title,
-          isPaid = _props.isPaid,
-          isPortal = _props.isPortal,
-          dataId = _props.dataId,
-          needTitle = _props.needTitle,
-          needDelete = _props.needDelete,
-          initial = _props.initial;
-
-      return React.createElement(
-        'div',
-        {
-          className: style.container + ' ' + style[size],
-          'data-id': dataId || name
-        },
-        React.createElement(Avatar, {
-          src: src,
-          name: name,
-          initial: initial,
-          title: title,
-          onClick: onClick,
-          size: size,
-          needTitle: needTitle
-        }),
-        isPaid ? React.createElement(
-          'span',
-          {
-            'data-title': i18NProviderUtils.getI18NValue('support.customerPortal.users.paidUser'),
-            className: style.paid,
-            'data-id': 'paidUser'
-          },
-          React.createElement(Icon, { name: 'ZD-paiduser' })
-        ) : null,
-        isPortal ? React.createElement(
-          'span',
-          {
-            'data-title': i18NProviderUtils.getI18NValue('crm.end.user'),
-            className: style.portal,
-            'data-id': 'portalUser'
-          },
-          React.createElement(Icon, { name: 'ZD-globe1' })
-        ) : null,
-        needDelete ? React.createElement(
-          'span',
-          {
-            className: style.delete,
-            'data-id': 'dltContactPhoto',
-            onClick: onDelete
-          },
-          React.createElement(Icon, { name: 'ZD-delete2', size: '15' })
-        ) : null
-      );
-    }
-  }]);
-
-  return AvatarUser;
-}(React.Component);
-
-export default AvatarUser;
-
-
+}
 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,
@@ -101,15 +116,29 @@ AvatarUser.propTypes = {
   needTitle: PropTypes.bool,
   onClick: PropTypes.func,
   onDelete: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
-  title: 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
+  needDelete: false,
+  i18nKeys: {},
+  customProps: {}
 };
 
 if (false) {

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

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

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -1,77 +1,117 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+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); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
 import style from './AvatarWithTeam.module.css';
-
-var AvatarWithTeam = function (_React$Component) {
-  _inherits(AvatarWithTeam, _React$Component);
-
-  function AvatarWithTeam() {
-    _classCallCheck(this, AvatarWithTeam);
-
-    return _possibleConstructorReturn(this, (AvatarWithTeam.__proto__ || _Object$getPrototypeOf(AvatarWithTeam)).apply(this, arguments));
+export default class AvatarWithTeam extends React.Component {
+  render() {
+    let {
+      name,
+      size,
+      src,
+      teamName,
+      isTeam,
+      needTitle = false,
+      initial,
+      title,
+      palette,
+      textPalette,
+      customTextClass,
+      teamClassName,
+      borderOnActive,
+      customProps
+    } = this.props;
+    let {
+      AvatarWithTeamProps = {},
+      Avatar1Props = {},
+      AvatarTeam1Props = {},
+      Avatar2Props = {},
+      AvatarTeam2Props = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: `${style.container} `,
+      "data-id": "avatarWithTeamId"
+    }, 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-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: borderOnActive
+    }, AvatarTeam2Props))) : null);
   }
 
-  _createClass(AvatarWithTeam, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          name = _props.name,
-          size = _props.size,
-          src = _props.src,
-          teamName = _props.teamName,
-          isTeam = _props.isTeam,
-          _props$needTitle = _props.needTitle,
-          needTitle = _props$needTitle === undefined ? false : _props$needTitle,
-          initial = _props.initial,
-          title = _props.title;
-
-
-      return React.createElement(
-        'span',
-        { className: style.container + ' ', 'data-id': 'avatarWithTeamId' },
-        isTeam && teamName ? React.createElement(Avatar, { name: name, src: src, size: size, initial: initial, needTitle: needTitle }) : isTeam ? React.createElement(AvatarTeam, { name: name, src: src, size: size, needTitle: needTitle, title: needTitle ? title : undefined }) : React.createElement(Avatar, { name: name, src: src, size: size, initial: initial, needTitle: needTitle }),
-        teamName ? React.createElement(
-          'span',
-          { className: style.teamAvatar, 'data-id': 'teamNameTestId', 'data-title': needTitle ? title : undefined },
-          React.createElement(AvatarTeam, {
-            name: teamName,
-            size: 'small',
-            palette: 'primary',
-            isFilled: true,
-            needTitle: needTitle
-          })
-        ) : null
-      );
-    }
-  }]);
-
-  return AvatarWithTeam;
-}(React.Component);
-
-export default AvatarWithTeam;
-
-
+}
 AvatarWithTeam.defaultProps = {
   size: 'xmedium',
-  isTeam: false
+  isTeam: false,
+  teamClassName: '',
+  borderOnActive: false,
+  customProps: {}
 };
-
 AvatarWithTeam.propTypes = {
+  customTextClass: PropTypes.string,
   initial: PropTypes.string,
   isTeam: PropTypes.bool,
   name: PropTypes.string,
   needTitle: PropTypes.bool,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
+  teamClassName: PropTypes.string,
   teamName: PropTypes.string,
-  title: PropTypes.string
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarWithTeamProps: PropTypes.object,
+    Avatar1Props: PropTypes.object,
+    AvatarTeam1Props: PropTypes.object,
+    Avatar2Props: PropTypes.object,
+    AvatarTeam2Props: PropTypes.object
+  })
 };
 
 if (false) {

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -6,18 +6,11 @@
 
 .teamAvatar {
   position: absolute;
-  bottom: -6px;
-  font-size: 0;
-  padding: 3px;
+  padding: var(--zd_size2);
   border-radius: 50%;
+  bottom: calc(var(--zd_size6) * -1);
+  right: calc(var(--zd_size10) * -1);
   transform: scale(0.8);
-  background-color: var(--dot_bg_white);
-}
-
-[dir=ltr] .teamAvatar {
-  right: -10px;
-}
-
-[dir=rtl] .teamAvatar {
-  left: -10px;
+  background-color: var(--zdt_avatarteam_default_bg);
+  font-size: 0;
 }

package/es/avatar/AvatarWithTeam/__tests__/AvatarWithTeam.spec.js

@@ -1,48 +1,47 @@
-import _Object$assign from 'babel-runtime/core-js/object/assign';
 import expect from 'expect';
 import AvatarWithTeam from '../AvatarWithTeam';
-
-var defaultProps = {
-    name: "Tested Team",
-    src: null,
-    teamName: null,
-    isTeam: null
+let defaultProps = {
+  name: "Tested Team",
+  src: null,
+  teamName: null,
+  isTeam: null
 };
-
-describe('SampleTest', function () {
-    var _global$setup = global.setup(AvatarWithTeam, defaultProps),
-        renderedDOM = _global$setup.renderedDOM,
-        props = _global$setup.props;
-
-    var Avatarid = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'avatarWithTeamId');
-
-    it('Check whether Avatar mounted or not', function () {
-        expect(global.TestUtils.isDOMComponent(Avatarid)).toBeTruthy();
-    });
-
-    it('Check children length ', function () {
-        expect(Avatarid.children.length).toBe(1);
-    });
-
-    var properties = _Object$assign({}, defaultProps, { isTeam: true, teamName: "Tested Team", name: "Sangeetha" });
-
-    it('Check whether AvatarWithTeam mounted or not', function () {
-        var _global$setup2 = global.setup(AvatarWithTeam, properties),
-            renderedDOM = _global$setup2.renderedDOM,
-            props = _global$setup2.props;
-
-        var AvatarWithTeamId = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'teamNameTestId');
-        expect(global.TestUtils.isDOMComponent(AvatarWithTeamId)).toBeTruthy();
-    });
-
-    var property = _Object$assign({}, defaultProps, { isTeam: true, name: "Tested Team", teamName: null });
-
-    it('Check whether AvatarTeam  mounted or not', function () {
-        var _global$setup3 = global.setup(AvatarWithTeam, property),
-            renderedDOM = _global$setup3.renderedDOM,
-            props = _global$setup3.props;
-
-        var AvatarTeamId = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'avatarWithTeamId');
-        expect(global.TestUtils.isDOMComponent(AvatarTeamId)).toBeTruthy();
-    });
+describe('SampleTest', () => {
+  let {
+    renderedDOM,
+    props
+  } = global.setup(AvatarWithTeam, defaultProps);
+  let Avatarid = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'avatarWithTeamId');
+  it(`Check whether Avatar mounted or not`, () => {
+    expect(global.TestUtils.isDOMComponent(Avatarid)).toBeTruthy();
+  });
+  it(`Check children length `, () => {
+    expect(Avatarid.children.length).toBe(1);
+  });
+  let properties = Object.assign({}, defaultProps, {
+    isTeam: true,
+    teamName: "Tested Team",
+    name: "Sangeetha"
+  });
+  it(`Check whether AvatarWithTeam mounted or not`, () => {
+    let {
+      renderedDOM,
+      props
+    } = global.setup(AvatarWithTeam, properties);
+    let AvatarWithTeamId = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'teamNameTestId');
+    expect(global.TestUtils.isDOMComponent(AvatarWithTeamId)).toBeTruthy();
+  });
+  let property = Object.assign({}, defaultProps, {
+    isTeam: true,
+    name: "Tested Team",
+    teamName: null
+  });
+  it(`Check whether AvatarTeam  mounted or not`, () => {
+    let {
+      renderedDOM,
+      props
+    } = global.setup(AvatarWithTeam, property);
+    let AvatarTeamId = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'avatarWithTeamId');
+    expect(global.TestUtils.isDOMComponent(AvatarTeamId)).toBeTruthy();
+  });
 });