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

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: ' '
+  };
+}

package/src/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -0,0 +1,134 @@
+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';
+
+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 (
+      <span className={`${style.container} `} data-id='avatarWithTeamId' {...AvatarWithTeamProps}>
+        {isTeam && teamName ? (
+          <Avatar
+            name={name}
+            src={src}
+            size={size}
+            initial={initial}
+            needTitle={needTitle}
+            palette={palette}
+            textPalette={textPalette}
+            customClass={customTextClass}
+            borderOnActive={borderOnActive}
+            {...Avatar1Props}
+          />
+        ) : isTeam ? (
+          <AvatarTeam
+            name={name}
+            src={src}
+            size={size}
+            needTitle={needTitle}
+            title={needTitle ? title : undefined}
+            palette={palette}
+            textPalette={textPalette}
+            customClass={{
+              customAvatar: customTextClass
+            }}
+            borderOnActive={borderOnActive}
+           {...AvatarTeam1Props}
+          />
+        ) : (
+          <Avatar
+            name={name}
+            src={src}
+            size={size}
+            initial={initial}
+            needTitle={needTitle}
+            palette={palette}
+            textPalette={textPalette}
+            customClass={customTextClass}
+            borderOnActive={borderOnActive}
+           {...Avatar2Props}
+          />
+        )}
+
+        {teamName ? (
+          <span
+            className={`${style.teamAvatar} ${teamClassName} `}
+            data-id='teamNameTestId'
+            data-title={needTitle ? title : undefined}
+          >
+            <AvatarTeam
+              name={teamName}
+              size='small'
+              palette={palette}
+              textPalette={textPalette}
+              isFilled
+              needTitle={needTitle}
+              customClass={{
+                customAvatar: customTextClass
+              }}
+              borderOnActive={borderOnActive}
+             {...AvatarTeam2Props}
+            />
+          </span>
+        ) : null}
+      </span>
+    );
+  }
+}
+
+AvatarWithTeam.defaultProps = {
+  size: 'xmedium',
+  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,
+  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 (__DOCS__) {
+  AvatarWithTeam.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/src/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -0,0 +1,16 @@
+.container {
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  position: relative;
+}
+
+.teamAvatar {
+  position: absolute;
+  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(--zdt_avatarteam_default_bg);
+  font-size: 0;
+}

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

@@ -0,0 +1,50 @@
+import expect from 'expect';
+import AvatarWithTeam from '../AvatarWithTeam';
+
+let defaultProps = {
+    name: "Tested Team",
+    src: null,
+    teamName: null,
+    isTeam: null
+}
+
+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();
+    });
+
+});

package/src/avatar/AvatarWithTeam/docs/AvatarWithTeam__default.docs.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarWithTeam from '../AvatarWithTeam';
+
+export default class AvatarWithTeam__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <AvatarWithTeam
+          name='feedback'
+          src='https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg'
+          teamName='BK'
+        />
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  AvatarWithTeam__default.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

package/src/deprecated/SelectDropdown/SelectDropdown.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from './SelectDropdown.module.css';
+class SelectDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(id, value, index, e) {
+    let { onClick, togglePopup } = this.props;
+    onClick && onClick(id, value, index, e);
+    togglePopup(e, 'bottomRight');
+  }
+
+  handleTogglePopup(e) {
+    let { togglePopup } = this.props;
+    togglePopup(e, 'bottomRight');
+  }
+
+  render() {
+    let {
+      title,
+      selectedText,
+      isPopupOpen,
+      isPopupReady,
+      getTargetRef,
+      getContainerRef,
+      removeClose,
+      suggestions,
+      selectedId,
+      isSearchRequired = false
+    } = this.props;
+    let { idKey, valueKey, options = [] } = suggestions;
+    return (
+      <span
+        ref={getTargetRef}
+        className={style.container}
+        onClick={removeClose}
+      >
+        <span className={style.departName} onClick={this.handleTogglePopup}>
+          {selectedText}
+        </span>
+        <span className={style.departIcon} onClick={this.handleTogglePopup}>
+          <Icon name='ZD-down1' size='6' />
+        </span>
+        <DropBox
+          size='medium'
+          boxPosition='bottomRight'
+          isArrow
+          isAnimate
+          right='-25'
+          isActive={isPopupOpen && isPopupReady}
+          getRef={getContainerRef}
+        >
+          <Container alignBox='column' className={style.rulesPopup}>
+            <Box className={style.rulesDepart}>
+              <DropDownHeading text={title} />
+            </Box>
+            {isSearchRequired ? (
+              <Box className={style.searchDepart}>
+                <TextBox
+                  name='Test'
+                  id='Test'
+                  maxLength='150'
+                  placeHolder='Search Department'
+                />
+              </Box>
+            ) : null}
+            <Box scroll='vertical' flexible shrink>
+              {options &&
+                options.length &&
+                options.map((obj, index) => (
+                  <ListItem
+                    key={index}
+                    autoHover
+                    value={obj[valueKey]}
+                    active={selectedId == obj[idKey]}
+                    id={obj[idKey]}
+                    onClick={this.handleClick}
+                  />
+                ))}
+            </Box>
+          </Container>
+        </DropBox>
+      </span>
+    );
+  }
+}
+SelectDropdown.propTypes = {
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isSearchRequired: PropTypes.bool,
+  onClick: PropTypes.func,
+  removeClose: PropTypes.func,
+  selectedId: PropTypes.string,
+  selectedText: PropTypes.string,
+  suggestions: PropTypes.shape({
+    idKey: PropTypes.string,
+    valueKey: PropTypes.string,
+    options: PropTypes.array
+  }),
+  title: PropTypes.string
+};
+if (__DOCS__) {
+  SelectDropdown.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}
+
+export default Popup(SelectDropdown);

package/src/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -0,0 +1,47 @@
+.container {
+  padding: var(--zd_size3) var(--zd_size15);
+  margin-left: var(--zd_size15);
+  position: relative;
+  line-height: var(--zd_size18);
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  cursor: pointer;
+}
+.container:hover {
+  background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
+}
+.departName {
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_selectdropdown_departname_text);
+  composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
+}
+.departIcon {
+  color: var(--zdt_selectdropdown_departicon);
+  margin-left: var(--zd_size5);
+  cursor: pointer;
+}
+.rulesPopup {
+  max-height: var(--zd_size260);
+  padding: var(--zd_size10) 0;
+}
+.rulesDepart {
+  margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5);
+}
+.searchDepart {
+  padding: 0 var(--zd_size20);
+  margin: 0 0 var(--zd_size10) 0;
+}
+
+/*Variables */
+/* select dropdown */
+
+[data-mode='dark'] {
+  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+}
+
+[data-mode='default'] {
+  --zdt_selectdropdown_hover_bg: var(--zd_bg_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_text_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_text_dark5);
+}

package/src/deprecated/SelectDropdown/docs/SelectDropdown__default.docs.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SelectDropdown from '../SelectDropdown';
+export default class SelectDropdown__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <SelectDropdown
+        title='DropDown'
+        suggestions={{
+          options: [
+            { id: '1', value: 'Zoho desk' },
+            { id: '2', value: 'Zoho projects' }
+          ],
+          idKey: 'id',
+          valueKey: 'value'
+        }}
+        selectedText='Zoho Desk'
+      />
+    );
+  }
+}
+if (__DOCS__) {
+  SelectDropdown__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}