@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.245

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

@@ -0,0 +1,170 @@
+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 /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "small",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xsmall",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      isPaid: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "small",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xsmall",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      isPortal: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "8",
+      title: "Twitter",
+      size: "small",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "10",
+      title: "Twitter",
+      size: "xsmall",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      isLocked: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "8",
+      title: "Twitter",
+      size: "small",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "10",
+      title: "Twitter",
+      size: "xsmall",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      needDelete: true
+    }))));
+  }
+}
+if (false) {
+  AvatarUser__default.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

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

@@ -6,18 +6,11 @@
 
 .teamAvatar {
   position: absolute;
-  bottom: calc(var(--zd_size6) * -1);
-  font-size: 0;
   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);
-}
-
-[dir=ltr] .teamAvatar {
-  right: calc(var(--zd_size10) * -1);
-}
-
-[dir=rtl] .teamAvatar {
-  left: calc(var(--zd_size10) * -1);
+  font-size: 0;
 }

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

@@ -0,0 +1,21 @@
+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 /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarWithTeam, {
+      name: "feedback",
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg",
+      teamName: "BK"
+    }));
+  }
+}
+if (false) {
+  AvatarWithTeam__default.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

package/es/common/dot_animation.module.css

@@ -1,12 +1,9 @@
 
-[dir=ltr] .rotate{
-  animation-name:  rotate-ltr ;
-}
-[dir=rtl] .rotate{
-  animation-name:  rotate-rtl ;
+.rotate{
+  animation-name: rotate;
 }
 
-@keyframes rotate-ltr {
+@keyframes rotate {
   from {
       transform: rotate(0);
   }
@@ -14,14 +11,4 @@
   to {
       transform: rotate(360deg);
   }
-  }
-
-@keyframes rotate-rtl {
-  from {
-      transform: rotate(0);
-  }
-  
-  to {
-      transform: rotate(-360deg);
-  }
   }

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -1,13 +1,10 @@
 .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';
-  padding: var(--zd_size3) var(--zd_size15);
   cursor: pointer;
-}[dir=ltr] .container {
-  margin-left: var(--zd_size15);
-}[dir=rtl] .container {
-  margin-right: var(--zd_size15);
 }
 .container:hover {
   background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
@@ -19,13 +16,8 @@
 }
 .departIcon {
   color: var(--zdt_selectdropdown_departicon);
-  cursor: pointer;
-}
-[dir=ltr] .departIcon {
   margin-left: var(--zd_size5);
-}
-[dir=rtl] .departIcon {
-  margin-right: var(--zd_size5);
+  cursor: pointer;
 }
 .rulesPopup {
   max-height: var(--zd_size260);

package/es/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 /*#__PURE__*/React.createElement(SelectDropdown, {
+      title: "DropDown",
+      suggestions: {
+        options: [{
+          id: '1',
+          value: 'Zoho desk'
+        }, {
+          id: '2',
+          value: 'Zoho projects'
+        }],
+        idKey: 'id',
+        valueKey: 'value'
+      },
+      selectedText: "Zoho Desk"
+    });
+  }
+}
+if (false) {
+  SelectDropdown__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -12,23 +12,16 @@
 .title {
   padding-top: var(--zd_size6);
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
+.default_arrow,
+.overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0;
-}
 .overlay_arrow {
   position: absolute;
+  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
-[dir=ltr] .overlay_arrow {
-  left: 100%;
-}
-[dir=rtl] .overlay_arrow {
-  right: 100%;
-}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -55,18 +48,12 @@
 .cursor {
   cursor: pointer;
 }
-[dir=ltr] .dropBoxContainer {
+.dropBoxContainer {
   text-align: left;
 }
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
-}
-[dir=ltr] .iconBox {
+.iconBox {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4);
-}
 .iconBox > i {
   display: block;
 }
@@ -87,10 +74,10 @@
 }
 .hiddenInputElement{
   width: 100%;
+  padding: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding: 0;
   border: 0;
 }
 .groupName {

package/es/dropdown/ToggleDropDown/docs/ToggleDropDown__default.docs.js

@@ -0,0 +1,224 @@
+import React from 'react';
+import ToggleDropDown from '../ToggleDropDown';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class ToggleDropDown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 'One',
+      groupValue: 'One',
+      valueId: 'one',
+      groupValueId: 'one'
+    };
+    this.onDropdownSelect = this.onSelect.bind(this, 'value');
+    this.onGroupSelect = this.onSelect.bind(this, 'groupValue');
+    this.getFooter = this.getFooter.bind(this);
+  }
+  onSelect(type, element, e) {
+    this.setState({
+      [type]: e.value,
+      [`${type}Id`]: e.id
+    });
+  }
+  getFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
+  }
+  render() {
+    let {
+      value,
+      groupValue,
+      groupValueId,
+      valueId
+    } = this.state;
+    let options = [{
+      value: 'One',
+      id: 'one',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Two',
+      id: 'two',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Three',
+      id: 'three',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Four',
+      id: 'four',
+      iconName: 'ZD-setupFields'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Five',
+      id: 'five',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Six',
+      id: 'six',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Seven',
+      id: 'seven',
+      iconName: 'ZD-setupFields'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Eight',
+      id: 'eight',
+      iconName: 'ZD-setupFields'
+    }, {
+      needDivider: true
+    }, {
+      value: 'Nine',
+      id: 'nine',
+      iconName: 'ZD-setupFields'
+    }, {
+      value: 'Ten',
+      id: 'ten',
+      iconName: 'ZD-setupFields'
+    }];
+    let groupOptions = [{
+      name: 'Group 1',
+      items: [{
+        value: 'One',
+        id: 'one'
+      }, {
+        value: 'Two',
+        id: 'two'
+      }, {
+        value: 'Three',
+        id: 'three'
+      }]
+    }, {
+      name: 'Group 2',
+      items: [{
+        value: 'Four',
+        id: 'four'
+      }, {
+        value: 'Five',
+        id: 'five'
+      }, {
+        value: 'Six',
+        id: 'six'
+      }, {
+        value: 'Seven',
+        id: 'seven'
+      }],
+      needDivider: true
+    }, {
+      name: 'Group 3',
+      items: [{
+        value: 'Eight',
+        id: 'eight'
+      }, {
+        value: 'Nine',
+        id: 'nine'
+      }, {
+        value: 'Ten',
+        id: 'ten'
+      }],
+      needDivider: true
+    }, {
+      name: 'Group 4',
+      items: [{
+        value: 'Eleven',
+        id: 'eleven'
+      }, {
+        value: 'Twelve',
+        id: 'twelve'
+      }, {
+        value: 'Thirteen',
+        id: 'thirteen'
+      }, {
+        value: 'Fourteen',
+        id: 'fourteen'
+      }, {
+        value: 'Fifteen',
+        id: 'fifteen'
+      }],
+      needDivider: true
+    }, {
+      name: 'Group 5',
+      items: [{
+        value: 'Sixteen',
+        id: 'sixteen'
+      }, {
+        value: 'Seventeen',
+        id: 'seventeen'
+      }, {
+        value: 'Eighteen',
+        id: 'eighteen'
+      }]
+    }];
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      style: {
+        padding: 20
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      style: {
+        width: 330
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: '14px var(--zd_semibold)',
+        marginBottom: 9,
+        textTransform: 'uppercase'
+      }
+    }, "DropDown"), /*#__PURE__*/React.createElement(ToggleDropDown, {
+      value: value,
+      dataTitle: value,
+      keyName: "value",
+      onClick: this.onDropdownSelect,
+      isSearch: true,
+      options: options,
+      boxSize: "large",
+      boxPosition: "bottomRight",
+      selectedId: valueId,
+      isNeedEffect: false
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: {
+        width: 330
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: '14px var(--zd_semibold)',
+        marginBottom: 9,
+        textTransform: 'uppercase'
+      }
+    }, "Group DropDown"), /*#__PURE__*/React.createElement(ToggleDropDown, {
+      value: groupValue,
+      dataTitle: groupValue,
+      keyName: "value",
+      onClick: this.onGroupSelect,
+      isSearch: true,
+      options: groupOptions,
+      boxSize: "large",
+      boxPosition: "bottomRight",
+      isGroupDropDown: true,
+      selectedId: groupValueId,
+      isNeedEffect: false
+    })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: '14px var(--zd_semibold)',
+        marginBottom: 9,
+        textTransform: 'uppercase'
+      }
+    }, "Custom Footer"), /*#__PURE__*/React.createElement(ToggleDropDown, {
+      value: value,
+      dataTitle: value,
+      keyName: "value",
+      onClick: this.onDropdownSelect,
+      isSearch: true,
+      options: options,
+      boxSize: "large",
+      boxPosition: "bottomRight",
+      selectedId: valueId,
+      isNeedEffect: false,
+      getFooter: this.getFooter
+    })));
+  }
+}
+ToggleDropDown__default.docs = {
+  componentGroup: 'Molecule'
+};

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -5,16 +5,10 @@
   --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
 }
 .container {
-  composes: varClass;
   text-align: center;
-}
-[dir=ltr] .container {
   margin-left: auto;
   margin-right: auto;
-}
-[dir=rtl] .container {
-  margin-right: auto;
-  margin-left: auto;
+  composes: varClass;
 }
 .fluid {
   max-width: var(--zd_size430);
@@ -50,19 +44,17 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20);
 }
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
+.linkDesc,
+.desc {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
-  margin-left: var(--zd_size4);
-}
 .desc {
   line-height: var(--zd_size19);
 }
 .link {
+  cursor: pointer;
   color: var(--linkColor);
   display: inline-block;
-  cursor: pointer;
 }
 .link:hover {
   color: var(--linkHoverColor);