@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/src/avatar/AvatarThread/AvatarThread.module.css

@@ -0,0 +1,113 @@
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  border-radius: 50%;
+}
+
+.thread {
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  position: absolute;
+}
+.pointer {
+  cursor: pointer;
+}
+.defaultCursor {
+  cursor: default;
+}
+.threadBg {
+  background-color: var(--zdt_avatarthread_bg);
+}
+.thread_xsmall_pos,
+.thread_medium_pos,
+.thread_xmedium_pos {
+  height: var(--zd_size15);
+  width: var(--zd_size15);
+}
+
+.thread_xsmall_pos {
+  top: calc(var(--zd_size5) * -1);
+  right: 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);
+}
+.thread_small_pos i {
+  font-size: var(--zd_font_size8);
+}
+
+.thread_medium_pos {
+  top: calc(var(--zd_size4) * -1);
+  right: calc(var(--zd_size5) * -1);
+}
+
+.thread_xmedium_pos {
+  top: calc(var(--zd_size4) * -1);
+  right: calc(var(--zd_size3) * -1);
+}
+
+.thread_large_pos {
+  top: 0;
+  right: 0;
+  height: var(--zd_size16);
+  width: var(--zd_size16);
+}
+
+.thread_xlarge_pos {
+  top: var(--zd_size2);
+  right: var(--zd_size4);
+  height: var(--zd_size18);
+  width: var(--zd_size18);
+}
+
+.icon {
+  position: absolute;
+  line-height: 0;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.border_primary {
+  border: 1px solid var(--zdt_avatarthread_primary_border);
+}
+
+.border_success {
+  border: 1px solid var(--zdt_avatarthread_success_border);
+}
+.border_danger {
+  border: 1px solid var(--zdt_avatarthread_danger_border);
+}
+.border_default {
+  border: 1px solid var(--zdt_avatarthread_default_border);
+}
+
+.hover .thread {
+  display: none;
+}
+
+.hover .thread {
+  cursor: pointer;
+  z-index: 1;
+}
+
+.hover:hover .thread {
+  display: block;
+}
+
+.text_primary {
+  color: var(--zdt_avatarthread_primary_text);
+}
+.text_success {
+  color: var(--zdt_avatarthread_success_text);
+}
+.text_danger {
+  color: var(--zdt_avatarthread_danger_text);
+}
+.text_default {
+  color: var(--zdt_avatarthread_default_text);
+}

package/src/avatar/AvatarThread/docs/AvatarThread__default.docs.js

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarThread from '../AvatarThread';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class AvatarThread__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let margin = { margin: '10px' };
+    return (
+      <span>
+        <div>
+          <div>
+            <p style={margin}>Show Icon On Hover</p>
+            <span style={margin}>
+              <AvatarThread
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-minus'
+                iconSize='8'
+                iconColor='primary'
+                borderPalette='primary'
+                showOnHover
+              />
+            </span>
+          </div>
+          <div>
+            <p style={margin}>BorderPalatte</p>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-TK-in'
+                iconSize='14'
+                iconColor='primary'
+                borderPalette='primary'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-TK-in'
+                iconSize='14'
+                iconColor='success'
+                borderPalette='success'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-TK-in'
+                iconSize='14'
+                iconColor='danger'
+                borderPalette='danger'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-TK-in'
+                iconSize='14'
+                iconColor='default'
+                borderPalette='default'
+              />
+            </span>
+          </div>
+
+          <div>
+            <p style={margin}>Icon Color</p>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+                iconColor='primary'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+                iconColor='danger'
+              />
+            </span>
+          </div>
+          <div>
+            <p style={margin}>Size</p>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='small'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='xsmall'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='medium'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='xmedium'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='large'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+              />
+            </span>
+            <span style={margin}>
+              <AvatarThread
+                src='https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb'
+                name='Bharathikannan'
+                size='xlarge'
+                iconName='ZD-chFacebook'
+                iconSize='10'
+              />
+            </span>
+          </div>
+        </div>
+      </span>
+    );
+  }
+}
+
+if (__DOCS__) {
+  AvatarThread__default.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/src/avatar/AvatarUser/AvatarUser.js

@@ -0,0 +1,160 @@
+/**** 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 ****/
+
+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 (
+      <div
+        className={`${style.container} ${style[size]}`}
+        data-id={dataId || name || iconName}
+        {...AvatarUserProps}
+      >
+        {iconName ? (
+          <AvatarIcon
+            name={iconName}
+            iconSize={iconSize}
+            size={size}
+            iconClass={iconClass}
+            dataId={iconName}
+            iconColor={iconColor}
+            title={title}
+            {...AvatarIconProps}
+          />
+        ) : (
+          <Avatar
+            src={src}
+            name={name}
+            initial={initial}
+            title={title}
+            onClick={onClick}
+            size={size}
+            needTitle={needTitle}
+            palette={palette}
+            textPalette={textPalette}
+            customClass={customTextClass}
+            alternateSrc={alternateSrc}   
+            {...AvatarProps}
+          />
+        )}
+        {isPaid ? (
+          <span
+            data-title={paidTitle}
+            className={style.paid}
+            data-id='paidUser'
+          >
+            <Icon name='ZD-paiduser' />
+          </span>
+        ) : null}
+        {isPortal ? (
+          <span
+            data-title={portalTitle}
+            className={style.portal}
+            data-id='portalUser'
+          >
+            <Icon name='ZD-globe1' />
+          </span>
+        ) : null}
+        {isLocked ? (
+          <span data-title={lockTitle} className={style.lock} data-id='locked'>
+            <Icon name='ZD-lock01' />
+          </span>
+        ) : null}
+        {needDelete ? (
+          <span
+            className={style.delete}
+            data-id='dltContactPhoto'
+            onClick={onDelete}
+          >
+            <Icon name='ZD-delete2' size='15' />
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+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:{}
+};
+
+if (__DOCS__) {
+  AvatarUser.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/src/avatar/AvatarUser/AvatarUser.module.css

@@ -0,0 +1,100 @@
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+}
+.paid,
+.portal,
+.delete {
+  font-size: var(--zd_font_size10);
+}
+.paid,
+.portal,
+.delete,
+.lock {
+  position: absolute;
+  line-height: 0;
+}
+.paid {
+  composes: middle from '~@zohodesk/components/lib/common/common.module.css';
+  left: 50%;
+}
+.paid {
+  top: calc(var(--zd_size2) * -1);
+}
+.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 var(--zd_transition3);
+  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: var(--zdt_avataruser_delete_bg);
+  color: var(--zdt_avataruser_delete_text);
+}
+.container:hover .delete {
+  opacity: 1;
+}
+.small .portal {
+  top: 0;
+  right: calc(var(--zd_size4) * -1);
+}
+.xsmall .portal {
+  top: var(--zd_size1);
+  right: calc(var(--zd_size2) * -1);
+}
+.medium .portal {
+  top: var(--zd_size1);
+  right: calc(var(--zd_size1) * -1);
+}
+.xmedium .portal {
+  top: var(--zd_size3);
+  right: 0;
+}
+.large .portal {
+  top: var(--zd_size8);
+  right: var(--zd_size1);
+}
+.xlarge .portal {
+  top: var(--zd_size15);
+  right: var(--zd_size2);
+}
+
+.small .lock {
+  top: 0;
+  right: calc(var(--zd_size5) * -1);
+  font-size: var(--zd_font_size11);
+}
+.xsmall .lock {
+  top: var(--zd_size1);
+  right: calc(var(--zd_size4) * -1);
+  font-size: var(--zd_font_size12);
+}
+.medium .lock {
+  top: var(--zd_size2);
+  right: calc(var(--zd_size5) * -1);
+  font-size: var(--zd_font_size13);
+}
+.xmedium .lock {
+  top: var(--zd_size4);
+  right: calc(var(--zd_size6) * -1);
+  font-size: var(--zd_font_size14);
+}
+.large .lock {
+  top: var(--zd_size6);
+  right: calc(var(--zd_size6) * -1);
+  font-size: var(--zd_font_size18);
+}
+.xlarge .lock {
+  top: var(--zd_size12);
+  right: calc(var(--zd_size8) * -1);
+  font-size: var(--zd_font_size22);
+}

package/src/avatar/AvatarUser/docs/AvatarUser__default.docs.js

@@ -0,0 +1,148 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarUser from '../AvatarUser';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class AvatarUser__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='small' isPaid />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xsmall' isPaid />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='medium' isPaid />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xmedium' isPaid />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='large' isPaid />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xlarge' isPaid />
+          </span>
+        </div>
+        <div>
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='small' isPortal />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xsmall' isPortal />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='medium' isPortal />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xmedium' isPortal />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='large' isPortal />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xlarge' isPortal />
+          </span>
+        </div>
+
+        <div>
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser
+              iconName='ZD-chTwitter'
+              iconSize='8'
+              title='Twitter'
+              size='small'
+              isLocked
+            />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser
+              iconName='ZD-chTwitter'
+              iconSize='10'
+              title='Twitter'
+              size='xsmall'
+              isLocked
+            />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='medium' isLocked />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xmedium' isLocked />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='large' isLocked />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xlarge' isLocked />
+          </span>
+        </div>
+        <div>
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser
+              iconName='ZD-chTwitter'
+              iconSize='8'
+              title='Twitter'
+              size='small'
+              needDelete
+            />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser
+              iconName='ZD-chTwitter'
+              iconSize='10'
+              title='Twitter'
+              size='xsmall'
+              needDelete
+            />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='medium' needDelete />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xmedium' needDelete />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='large' needDelete />
+          </span>
+
+          <span className={`${style.docspan} ${style.vtop}`}>
+            <AvatarUser name='Bharathikannan' size='xlarge' needDelete />
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  AvatarUser__default.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}