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

package/es/docs/generalDocs.js

@@ -0,0 +1,131 @@
+export { default as Image } from '../Image/Image';
+export { default as Image__default } from '../Image/docs/Image__default.docs';
+export { default as AvatarStatus } from '../avatar/AvatarStatus/AvatarStatus';
+export { default as AvatarStatus__state } from '../avatar/AvatarStatus/docs/AvatarStatus__state.docs';
+export { default as AvatarStatus__size } from '../avatar/AvatarStatus/docs/AvatarStatus__size.docs';
+export { default as AvatarIcon } from '../avatar/AvatarIcon/AvatarIcon';
+export { default as AvatarIcon__palette } from '../avatar/AvatarIcon/docs/AvatarIcon__palette.docs';
+export { default as AvatarIcon__size } from '../avatar/AvatarIcon/docs/AvatarIcon__size.docs';
+export { default as AvatarUser } from '../avatar/AvatarUser/AvatarUser';
+export { default as AvatarUser__default } from '../avatar/AvatarUser/docs/AvatarUser__default.docs';
+export { default as AvatarClose } from '../avatar/AvatarClose/AvatarClose';
+export { default as AvatarClose__default } from '../avatar/AvatarClose/docs/AvatarClose__default.docs';
+export { default as AvatarCollision } from '../avatar/AvatarCollision/AvatarCollision';
+export { default as AvatarCollision__default } from '../avatar/AvatarCollision/docs/AvatarCollision__default.docs';
+export { default as AvatarThread } from '../avatar/AvatarThread/AvatarThread';
+export { default as AvatarThread__default } from '../avatar/AvatarThread/docs/AvatarThread__default.docs';
+export { default as AvatarWithTeam } from '../avatar/AvatarWithTeam/AvatarWithTeam';
+export { default as AvatarWithTeam__default } from '../avatar/AvatarWithTeam/docs/AvatarWithTeam__default.docs';
+export { default as ChannelIcon } from '../ChannelIcon/ChannelIcon';
+export { default as ChannelIcon__default } from '../ChannelIcon/docs/ChannelIcon__default.docs';
+export { default as FlipCard } from '../FlipCard/FlipCard';
+export { default as FlipCard__default } from '../FlipCard/docs/FlipCard__default.docs.js';
+export { default as ListAvatarFlip } from '../list/AvatarFlip/AvatarFlip';
+export { default as ListAvatarFlip__default } from '../list/AvatarFlip/docs/AvatarFlip__default.docs.js';
+export { default as ListComment } from '../list/Comment/Comment';
+export { default as ListComment__default } from '../list/Comment/docs/Comment__default.docs';
+export { default as ListDotNew } from '../list/DotNew/DotNew';
+export { default as ListDotNew__default } from '../list/DotNew/docs/DotNew__default.docs';
+export { default as GridStencils } from '../list/GridStencils/GridStencils';
+export { default as GridStencils__default } from '../list/GridStencils/docs/GridStencils__default.docs';
+export { default as ListUserTime } from '../list/UserTime/UserTime';
+export { default as ListUserTime__default } from '../list/UserTime/docs/UserTime__default.docs';
+export { default as ListThread } from '../list/Thread/Thread';
+export { default as ListThread__default } from '../list/Thread/docs/Thread__default.docs';
+export { default as ListTagNew } from '../list/TagNew/TagNew';
+export { default as ListTagNew__default } from '../list/TagNew/docs/TagNew__default.docs';
+export { default as ListItemLayout } from '../list/ListLayout/ListLayout';
+export { default as ListItemLayout__default } from '../list/ListLayout/docs/ListLayout__default.docs';
+export { default as ListStencils } from '../list/ListStencils/ListStencils';
+export { default as ListStencils__default } from '../list/ListStencils/docs/ListStencils__default.docs';
+export { default as SecondryPanel } from '../list/SecondryPanel/SecondryPanel';
+export { default as SecondryPanel__default } from '../list/SecondryPanel/docs/SecondryPanel__default.docs';
+export { default as ListFloatingIcons } from '../list/Icons/FloatingIcons';
+export { default as ListFloatingIcons__default } from '../list/Icons/docs/FloatingIcons__default.docs';
+export { default as Link } from '../Link/Link';
+export { default as Link__default } from '../Link/docs/Link__default.docs';
+export { default as ListSubject } from '../list/Subject/Subject';
+export { default as ListSubject__default } from '../list/Subject/docs/Subject__default.docs';
+export { default as ListStatusDropdown } from '../list/status/StatusDropdown/StatusDropdown';
+export { default as ListStatusDropdown__default } from '../list/status/StatusDropdown/docs/StatusDropdown__default.docs';
+export { default as StatusListItem } from '../list/status/StatusListItem/StatusListItem';
+export { default as StatusListItem__default } from '../list/status/StatusListItem/docs/StatusListItem__default.docs';
+export { default as ToggleDropDown } from '../dropdown/ToggleDropDown/ToggleDropDown';
+export { default as ToggleDropDown__default } from '../dropdown/ToggleDropDown/docs/ToggleDropDown__default.docs';
+export { default as SVG__default } from '../svg/docs/SVG__default.docs';
+export { default as SubtabLayout } from '../layout/SubtabLayout/SubtabLayout';
+export { default as SubtabLayout__default } from '../layout/SubtabLayout/docs/SubtabLayout__default.docs';
+export { default as FreezeLayer } from '../FreezeLayer/FreezeLayer';
+export { default as FreezeLayer__default } from '../FreezeLayer/docs/FreezeLayer__default.docs.js';
+export { default as FreezeLayer__dark } from '../FreezeLayer/docs/FreezeLayer__dark.docs.js';
+export { default as PlusIcon } from '../PlusIcon/PlusIcon';
+export { default as PlusIcon__default } from '../PlusIcon/docs/PlusIcon__default.docs';
+export { default as FormAction } from '../FormAction/FormAction';
+export { default as FormAction__default } from '../FormAction/docs/FormAction__default.docs';
+export { default as ToastMessage } from '../ToastMessage/ToastMessage';
+export { default as ToastMessager__information } from '../ToastMessage/docs/ToastMessage__information.docs';
+export { default as ToastMessager__primary } from '../ToastMessage/docs/ToastMessage__primary.docs';
+export { default as ToastMessager__secondary } from '../ToastMessage/docs/ToastMessage__secondary.docs';
+export { default as ToastMessager__success } from '../ToastMessage/docs/ToastMessage__success.docs';
+export { default as ToastMessager__custom } from '../ToastMessage/docs/ToastMessage__custom.docs';
+export { default as Drawer } from '../Drawer/Drawer';
+export { default as Drawer__default } from '../Drawer/docs/Drawer__default.docs';
+export { default as Drawer__multiDrawer } from '../Drawer/docs/Drawer__multiDrawer.docs';
+export { default as Drawer__withModal } from '../Drawer/docs/Drawer__withModal.docs';
+export { default as Drawer__noFreeze } from '../Drawer/docs/Drawer__noFreeze.docs';
+export { default as CommonEmptyState } from '../emptystate/CommonEmptyState/CommonEmptyState';
+export { default as CommonEmptyState__default } from '../emptystate/CommonEmptyState/docs/CommonEmptyState__default.docs';
+export { default as EditionPage } from '../emptystate/EditionPage/EditionPage';
+export { default as EditionPage__default } from '../emptystate/EditionPage/docs/EditionPage__default.docs';
+export { default as EmState_Inconvenience } from '../errorstate/Inconvenience/Inconvenience';
+export { default as EmState_Inconvenience__default } from '../errorstate/Inconvenience/docs/Inconvenience__default.docs';
+export { default as EmState_NoRequestFound } from '../errorstate/NoRequestFound/NoRequestFound';
+export { default as EmState_NoRequestFound__default } from '../errorstate/NoRequestFound/docs/NoRequestFound__default.docs';
+export { default as EmState_PermissionPlay } from '../errorstate/PermissionPlay/PermissionPlay';
+export { default as EmState_PermissionPlay__default } from '../errorstate/PermissionPlay/docs/PermissionPlay__default.docs';
+export { default as EmState_RequestUrlNotFound } from '../errorstate/RequestUrlNotFound/RequestUrlNotFound';
+export { default as EmState_RequestUrlNotFound__default } from '../errorstate/RequestUrlNotFound/docs/RequestUrlNotFound__default.docs';
+export { default as EmState_UnableToProcess } from '../errorstate/UnableToProcess/UnableToProcess';
+export { default as EmState_UnableToProcess__default } from '../errorstate/UnableToProcess/docs/UnableToProcess__default.docs';
+export { default as EmState_UnauthorizedLogin } from '../errorstate/UnauthorizedLogin/UnauthorizedLogin';
+export { default as EmState_UnauthorizedLogin__unauthorizedLogin } from '../errorstate/UnauthorizedLogin/docs/UnauthorizedLogin__unauthorizedLogin.docs';
+export { default as EmState_UnauthorizedLogin__insufficient } from '../errorstate/UnauthorizedLogin/docs/UnauthorizedLogin__insufficient.docs';
+export { default as EmState_WillBack } from '../errorstate/WillBack/WillBack';
+export { default as EmState_WillBack__default } from '../errorstate/WillBack/docs/WillBack__default.docs';
+export { default as EmState_LinkText } from '../errorstate/LinkText/LinkText';
+export { default as EmState_LinkText__default } from '../errorstate/LinkText/docs/LinkText__default.docs';
+export { default as IconButton } from '../IconButton/IconButton';
+export { default as IconButton__default } from '../IconButton/docs/IconButton__default.docs';
+export { default as AlphabeticList } from '../AlphabeticList/AlphabeticList';
+export { default as AlphabeticList__default } from '../AlphabeticList/docs/AlphabeticList__default.docs';
+export { default as AlphabeticList__horizontal } from '../AlphabeticList/docs/AlphabeticList__horizontal.docs';
+export { default as ImportantNotes } from '../ImportantNotes/ImportantNotes';
+export { default as ImportantNotes__default } from '../ImportantNotes/docs/ImportantNotes__default.docs';
+export { default as Attachment } from '../Attachment/Attachment';
+export { default as Attachment__default } from '../Attachment/docs/Attachment__default.docs';
+export { default as Upload } from '../Upload/Upload';
+export { default as Upload__default } from '../Upload/docs/Upload__default.docs';
+export { default as MessageBanner } from '../MessageBanner/MessageBanner';
+export { default as MessageBanner__default } from '../MessageBanner/docs/MessageBanner__default.docs';
+export { default as Loader } from '../Loader/Loader';
+export { default as Loader__default } from '../Loader/docs/Loader__default.docs';
+export { default as NewStar } from '../NewStar/NewStar';
+export { default as NewStar__default } from '../NewStar/docs/NewStar__default.docs';
+export { default as Message } from '../Message/Message';
+export { default as Message__default } from '../Message/docs/Message__default.docs';
+export { default as ActionButton } from '../ActionButton/ActionButton';
+export { default as ActionButton__default } from '../ActionButton/docs/ActionButton__default.docs';
+/* version 2 error states */
+
+export { default as V2_ErrState_Inconvenience } from '../version2/errorstate/Inconvenience/Inconvenience';
+export { default as V2_ErrState_Inconvenience__default } from '../version2/errorstate/Inconvenience/docs/Inconvenience__default.docs';
+export { default as V2_ErrState_UnableToProcessRequest } from '../version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+export { default as V2_ErrState_UnableToProcessRequest__default } from '../version2/errorstate/UnableToProcessRequest/docs/UnableToProcessRequest__default.docs';
+export { default as V2_ErrState_UrlNotFound } from '../version2/errorstate/UrlNotFound/UrlNotFound';
+export { default as V2_ErrState_UrlNotFound__default } from '../version2/errorstate/UrlNotFound/docs/UrlNotFound__default.docs';
+export { default as V2_ErrState_UnauthorizedLogin } from '../version2/errorstate/UnauthorizedLogin/UnauthorizedLogin';
+export { default as V2_ErrState_UnauthorizedLogin__default } from '../version2/errorstate/UnauthorizedLogin/docs/UnauthorizedLogin__default.docs';
+export { default as V2_ErrState_WillBeRightBack } from '../version2/errorstate/WillBeRightBack/WillBeRightBack';
+export { default as V2_ErrState_WillBeRightBack__default } from '../version2/errorstate/WillBeRightBack/docs/WillBeRightBack__default.docs';
+export { default as V2_ErrState_OopsSomethingMiss } from '../version2/errorstate/OopsSomethingMiss/OopsSomethingMiss';
+export { default as V2_ErrState_OopsSomethingMiss__default } from '../version2/errorstate/OopsSomethingMiss/docs/OopsSomethingMiss__default.docs';

package/es/docs/lookupDocs.js

@@ -0,0 +1,44 @@
+// export { default as Lookup } from '../lookup/Lookup/Lookup';
+// export {
+//   default as Lookup__default
+// } from '../lookup/Lookup/docs/Lookup__default.docs';
+// export {
+//   default as Lookup__contact
+// } from '../lookup/Lookup/docs/Lookup__contact.docs';
+export { default as LookupClose } from '../lookup/header/Close/Close';
+export { default as LookupClose__default } from '../lookup/header/Close/docs/Close__default.docs';
+export { default as ModuleLookupHeader } from '../lookup/header/ModuleHeader/ModuleHeader';
+export { default as ModuleLookupHeader__default } from '../lookup/header/ModuleHeader/docs/ModuleHeader__default.docs';
+export { default as LookupSearch } from '../lookup/header/Search/Search';
+export { default as LookupSearch__default } from '../lookup/header/Search/docs/Search__default.docs';
+export { default as TicketLookupHeader } from '../lookup/header/TicketHeader/TicketHeader';
+export { default as TicketLookupHeader__default } from '../lookup/header/TicketHeader/docs/TicketHeader__default.docs';
+export { default as LookupTitle } from '../lookup/header/Title/Title';
+export { default as LookupTitle__default } from '../lookup/header/Title/docs/Title__default.docs';
+export { default as LookupViewDropdown } from '../lookup/header/ViewDropDown/ViewDropDown';
+export { default as LookupViewDropdown__default } from '../lookup/header/ViewDropDown/docs/ViewDropDown__default.docs';
+export { default as AlertLookup } from '../alert/AlertLookup/AlertLookup';
+export { default as AlertLookup__default } from '../alert/AlertLookup/docs/AlertLookup__default.docs';
+export { default as AlertHeader } from '../alert/AlertHeader/AlertHeader';
+export { default as AlertHeader__default } from '../alert/AlertHeader/docs/AlertHeader__default.docs'; // export { default as LookupSection } from '../lookup/Section/Section';
+
+export { default as LookupEmptyPage } from '../lookup/EmptyPage/EmptyPage';
+export { default as LookupEmptyPage__default } from '../lookup/EmptyPage/docs/EmptyPage__default.docs';
+export { default as LookupEmptyPage__product } from '../lookup/EmptyPage/docs/EmptyPage__product.docs';
+export { default as LookupEmptyPage__account } from '../lookup/EmptyPage/docs/EmptyPage__account.docs';
+export { default as LookupEmptyPage__contact } from '../lookup/EmptyPage/docs/EmptyPage__contact.docs'; // New alerts 
+
+export { default as AlertLookupNew } from '../version2/lookup/AlertLookup/AlertLookup';
+export { default as AlertLookupNew__default } from '../version2/lookup/AlertLookup/docs/AlertLookup__default.docs';
+export { default as AlertHeaderNew } from '../version2/lookup/AlertHeader/AlertHeader';
+export { default as AlertHeaderNew__default } from '../version2/lookup/AlertHeader/docs/AlertHeader__default.docs';
+export { default as AlertIconsNew } from '../version2/alertIcons/AlertIcons';
+export { default as AlertIconsNew__default } from '../version2/alertIcons/docs/AlertIcons__default.docs';
+export { default as AlertCloseNew } from '../version2/AlertClose/AlertClose';
+export { default as AlertCloseNew__default } from '../version2/AlertClose/docs/AlertClose__default.docs';
+export { default as GlobalNotification } from '../version2/GlobalNotification/GlobalNotification';
+export { default as GlobalNotification__default } from '../version2/GlobalNotification/docs/GlobalNotification__default.docs';
+export { default as DesktopNotification } from '../version2/notification/DesktopNotification/DesktopNotification';
+export { default as DesktopNotification__default } from '../version2/notification/DesktopNotification/docs/DesktopNotification__default.docs';
+export { default as DesktopNotificationHeader } from '../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader';
+export { default as DesktopNotificationHeader__default } from '../version2/notification/DesktopNotificationHeader/docs/DesktopNotificationHeader__default.docs';

package/es/docs/setupDocs.js

@@ -0,0 +1,22 @@
+export { default as SetupDetailLayout } from '../layout/SetupDetailLayout/SetupDetailLayout';
+export { default as SetupDetailLayout__default } from '../layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs';
+export { default as HelpLink } from '../setup/helptips/Link/Link';
+export { default as HelpLink__default } from '../setup/helptips/Link/docs/Link__default.docs';
+export { default as HelpDescription } from '../setup/helptips/Description/Description';
+export { default as HelpDescription__default } from '../setup/helptips/Description/docs/Description__default.docs';
+export { default as HelpTitle } from '../setup/helptips/Title/Title';
+export { default as HelpTitle__default } from '../setup/helptips/Title/docs/Title__default.docs';
+export { default as HelpListGroup } from '../setup/helptips/ListGroup/ListGroup';
+export { default as HelpListGroup__default } from '../setup/helptips/ListGroup/docs/ListGroup__default.docs';
+export { default as SetupHeaderViews } from '../setup/header/Views/Views';
+export { default as SetupHeaderViews__default } from '../setup/header/Views/docs/Views__default.docs';
+export { default as SetupHeaderSearch } from '../setup/header/Search/Search';
+export { default as SetupHeaderSearch__default } from '../setup/header/Search/docs/Search__default.docs';
+export { default as SetupHeaderLink } from '../setup/header/Link/Link';
+export { default as SetupHeaderLink__Link } from '../setup/header/Link/docs/Link__default.docs';
+export { default as SetupHeaderButton } from '../setup/header/Button/Button';
+export { default as SetupHeaderButton__default } from '../setup/header/Button/docs/Button__default.docs';
+export { default as Text } from '../setup/table/Text/Text.js';
+export { default as Setup_Text__default } from '../setup/table/Text/docs/Text__default.docs.js';
+export { default as Table } from '../setup/table/Table/Table.js';
+export { default as Setup_Table__default } from '../setup/table/Table/docs/Table__default.docs.js';

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

@@ -9,16 +9,23 @@
 .title {
   padding-top: var(--zd_size6);
 }
-.default_arrow,
-.overlay_arrow {
+[dir=ltr] .default_arrow, [dir=ltr] .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;
@@ -44,12 +51,18 @@
 .cursor {
   cursor: pointer;
 }
-.dropBoxContainer {
+[dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-.iconBox {
+[dir=rtl] .dropBoxContainer {
+  text-align: right;
+}
+[dir=ltr] .iconBox {
   margin-right: var(--zd_size4);
 }
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size4);
+}
 .iconBox > i {
   display: block;
 }
@@ -70,10 +83,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,228 @@
+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,10 +5,16 @@
   --linkHoverColor: var(--zdt_commonEmptyState_default_link_hover);
 }
 .container {
+  composes: varClass;
   text-align: center;
+}
+[dir=ltr] .container {
   margin-left: auto;
   margin-right: auto;
-  composes: varClass;
+}
+[dir=rtl] .container {
+  margin-right: auto;
+  margin-left: auto;
 }
 .fluid {
   max-width: var(--zd_size430);
@@ -44,17 +50,19 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20);
 }
-.linkDesc,
-.desc {
+[dir=ltr] .linkDesc, [dir=ltr] .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);

package/es/emptystate/CommonEmptyState/docs/CommonEmptyState__default.docs.js

@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import CommonEmptyState from '../CommonEmptyState';
+import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
+import EmptyAccounts from '@zohodesk/svg/lib/svg/EmptyAccounts';
+import EmptyTicket from '@zohodesk/svg/lib/svg/EmptyTicket';
+import Button from '@zohodesk/components/lib/Button/Button';
+import { Container } from '@zohodesk/components/lib/Layout';
+export default class CommonEmptyState__default extends Component {
+  constructor(props) {
+    super(props);
+    this.emptySearch = this.emptySearch.bind(this);
+    this.emptyAccount = this.emptyAccount.bind(this);
+    this.emptyTicket = this.emptyTicket.bind(this);
+  }
+
+  emptySearch() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+
+  emptyAccount() {
+    return /*#__PURE__*/React.createElement(EmptyAccounts, null);
+  }
+
+  emptyTicket() {
+    return /*#__PURE__*/React.createElement(EmptyTicket, null);
+  }
+
+  render() {
+    let styles = {
+      height: '300px',
+      width: ' 400px',
+      margin: '5px 10px',
+      border: '1px solid #eee'
+    };
+    return /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: "oops!",
+      description: "There are no views matching the keyword.",
+      size: "small",
+      getEmptyState: this.emptySearch
+    })), /*#__PURE__*/React.createElement("div", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: "No Accounts Found",
+      description: "Add a new account.",
+      linkText: "Learn more",
+      linkUrl: "#",
+      getEmptyState: this.emptyAccount
+    })), /*#__PURE__*/React.createElement("div", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: "oops!",
+      description: "There are no views matching the keyword.",
+      linkDescription: "Search in",
+      linkText: "Archived views",
+      linkUrl: "#",
+      size: "small",
+      getEmptyState: this.emptySearch
+    })), /*#__PURE__*/React.createElement("div", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: "No Archived Views",
+      linkText: "Learn more",
+      size: "small",
+      getEmptyState: this.emptySearch
+    })), /*#__PURE__*/React.createElement("div", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: "No Ticket Found",
+      description: "Get started by adding a new tickets to help desk or Import tickets from an external Database.",
+      linkText: "Learn more",
+      linkUrl: "#",
+      getEmptyState: this.emptyTicket
+    }, /*#__PURE__*/React.createElement(Button, {
+      palette: "primaryFilled",
+      text: "Add Ticket"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: "No Ticket Found",
+      description: "Get started by adding a new tickets to help desk or Import tickets from an external Database.",
+      linkText: "Learn more",
+      linkUrl: "#",
+      getEmptyState: this.emptyTicket
+    }, /*#__PURE__*/React.createElement(Button, {
+      palette: "primaryFilled",
+      text: "Add Ticket"
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '0 18px'
+      }
+    }, "or"), /*#__PURE__*/React.createElement(Button, {
+      palette: "primaryFilled",
+      text: "Import Ticket"
+    }))));
+  }
+
+}
+
+if (false) {
+  CommonEmptyState__default.docs = {
+    componentGroup: 'EmptyState'
+  };
+}