@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/lookup/header/ViewDropDown/ViewDropDown.js

@@ -13,15 +13,30 @@ import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 /**** Icons ****/
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container } from '@zohodesk/components/lib/Layout';
-import Loader from '@zohodesk/svg/lib/svg/Loader'
+import Loader from '@zohodesk/svg/lib/svg/Loader';
 import style from './ViewDropDown.module.css';
 
 /* eslint-disable react/forbid-component-props */
 /*eslint-disable  react/sort-prop-types*/
 
 class DropDown extends SelectComponent {
+  constructor(props) {
+    super(props);
+    this.onSearchKeyDown = this.onSearchKeyDown.bind(this);
+  }
+
+  onSearchKeyDown(e) {
+    const { closePopupOnly } = this.props;
+
+    if (e.keyCode === 27) {
+      closePopupOnly && closePopupOnly(e);
+    } else {
+      this.handleKeyDown(e);
+    }
+  }
+
   render() {
-    let {
+    const {
       needSearch,
       dropBoxSize,
       emptyMessage,
@@ -39,7 +54,7 @@ class DropDown extends SelectComponent {
       searchBoxPlaceHolder,
       maxLength
     } = this.props;
-    let {
+    const {
       hoverIndex,
       selected,
       searchStr,
@@ -47,23 +62,23 @@ class DropDown extends SelectComponent {
       selectedId
     } = this.state;
 
-    let suggestions = this.handleFilterSuggestions();
+    const suggestions = this.handleFilterSuggestions();
     return (
       <div className={style.container}>
         <div onClick={this.togglePopup} ref={getTargetRef}>
           <div
             className={`${style.labelCnt} ${isPopupOpen ? style.focused : ''}`}
           >
-            <span className={style.labelText}>{selected}</span>
-            <span className={style.arrowIcon}>
-              <Icon name='ZD-blockDownArrow' size='6' />
+            <span className={style.labelText} data-title={selected}>
+              {selected}
             </span>
+            <Icon name='ZD-down' size='7' iconClass={style.arrowIcon} />
           </div>
         </div>
         {isPopupOpen ? (
           <DropBox
             isAnimate
-            isArrow
+            isArrow={false}
             isActive={isPopupReady}
             boxPosition={position || `${defaultDropBoxPosition}Center`}
             getRef={getContainerRef}
@@ -77,7 +92,7 @@ class DropDown extends SelectComponent {
                   <DropDownSearch
                     value={searchStr}
                     onChange={this.handleSearch}
-                    onKeyDown={this.handleKeyDown}
+                    onKeyDown={this.onSearchKeyDown}
                     getRef={this.searchInputRef}
                     size={searchBoxSize}
                     variant={searchBoxVariant}
@@ -88,29 +103,33 @@ class DropDown extends SelectComponent {
               ) : null}
               <CardContent
                 eleRef={this.suggestionContainerRef}
-                className={dropBoxSize ? style[dropBoxSize] : ''}
+                customClass={dropBoxSize ? style[dropBoxSize] : ''}
               >
                 {suggestions.length ? (
-                  suggestions.map((option = {}, index) => {
-                    let { id, value } = option;
-                    return (
-                      <ListItem
-                        active={id === selectedId}
-                        getRef={this.suggestionItemRef}
-                        highlight={hoverIndex === index ? true : false}
-                        id={id}
-                        key={`${id}dropDown`}
-                        onClick={this.handleChange}
-                        onMouseEnter={this.handleMouseEnter}
-                        size='medium'
-                        value={value}
-                        index={index}
-                      />
-                    );
-                  })
+                  <div className={style.listItemContainer}>
+                    {suggestions.map((option = {}, index) => {
+                      const { id, value } = option;
+                      return (
+                        <ListItem
+                          active={id === selectedId}
+                          getRef={this.suggestionItemRef}
+                          highlight={hoverIndex === index ? true : false}
+                          id={id}
+                          key={`${id}dropDown`}
+                          onClick={this.handleChange}
+                          onMouseEnter={this.handleMouseEnter}
+                          size='medium'
+                          value={value}
+                          index={index}
+                          needTick
+                          needBorder={false}
+                        />
+                      );
+                    })}
+                  </div>
                 ) : isFetchingOptions ? (
                   <Container align='both' className={style.loader}>
-                      <Loader />
+                    <Loader />
                   </Container>
                 ) : searchStr ? (
                   <div className={style.emptyState}>
@@ -167,13 +186,14 @@ DropDown.defaultProps = {
   valueField: 'id'
 };
 
+const ViewDropDown = Popup(DropDown);
+ViewDropDown.defaultProps = DropDown.defaultProps;
+
 if (__DOCS__) {
   DropDown.docs = {
     componentGroup: 'Lookup'
   };
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  ViewDropDown.propTypes = DropDown.propTypes;
 }
-
-let ViewDropDown = Popup(DropDown);
-ViewDropDown.propTypes = DropDown.propTypes;
-ViewDropDown.defaultProps = DropDown.defaultProps;
 export default ViewDropDown;

package/src/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -8,9 +8,9 @@
   max-height: var(--zd_size400);
 }
 .emptyState {
-  font-size: var(--zd_size14);
+  font-size: var(--zd_font_size14);
   padding: var(--zd_size12) var(--zd_size15);
-  color: var(--zd_text_smoke20);
+  color: var(--zdt_viewdropdown_empty_text);
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -20,31 +20,27 @@
 .container {
   position: relative;
 }
+.listItemContainer {
+  padding: var(--zd_size10) 0;
+}
 /* Label Style */
 .labelCnt {
-  display: inline-block;
-  vertical-align: middle;
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   padding: 0 var(--zd_size12);
-  line-height: var(--zd_size26);
+  line-height: var(--zd_size20);
   cursor: pointer;
+  color: var(--zdt_viewdropdown_label_text);
 }
 .labelText {
-  font-size: var(--zd_size13);
-  color: var(--dot_text_black);
+  font-size: var(--zd_font_size12);
   margin-right: var(--zd_size5);
   max-width: var(--zd_size180);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.arrowIcon {
-  color: var(--zd_text_dark6);
-  height: var(--zd_size8);
-  line-height: var(--zd_size8);
-}
-.labelCnt.focused,
-.labelCnt:hover {
-  background: var(--zd_bg_solitude);
+.labelCnt:hover .arrowIcon {
+  color: var(--zdt_viewdropdown_hover_label_text);
 }
 
-.loader{
-  padding: var(--zd_size12) var(--zd_size15); 
-}
+.loader {
+  padding: var(--zd_size12) var(--zd_size15);
+}

package/src/lookup/header/lookupHeaderCommon.module.css

@@ -1,20 +1,25 @@
 .container {
-  min-height: var(--zd_size54);
+  min-height: var(--zd_size51);
   position: relative;
-  background-color: var(--zd_bg_smoke45);
-  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size10);
+  padding: 0 var(--zd_size52) 0 var(--zd_size10);
+  background-color: var(--zdt_lookupheader_default_bg);
+  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
 }
 .searchContainer,
 .title {
   margin: 0 var(--zd_size20);
 }
 .searchContainer {
-  width: var(--zd_size193);
   text-align: right;
 }
 .closeContainer {
   position: absolute;
-  right: var(--zd_size23);
+  right: var(--zd_size30);
   top: 50%;
   composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
 }
+.para {
+  margin: 0 var(--zd_size20);
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_lookupheader_para_text);
+}

package/src/lookup/header/lookupHeaderCommonResponsive.module.css

@@ -10,6 +10,6 @@
   text-align: left;
 }
 .extraSmall .searchContainer input {
-  border-bottom: 1px solid var(--zd_border_smoke33);
+  border-bottom: 1px solid var(--zdt_lookupheader_input_border);
   width: var(--zd_size193);
 }

package/src/setup/header/Link/HeaderLink.module.css

@@ -1,15 +1,14 @@
 .container {
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zd_text_primary1);
-  font-size: var(--zd_size12);
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_headerlink_text);
+  font-size: var(--zd_font_size12);
   margin-right: var(--zd_size15);
 }
 .icon {
   margin-right: var(--zd_size5);
 }
 .container:hover .text {
-  border-bottom: 1px solid var(--zd_border_primary1);
+  border-bottom: 1px solid var(--zdt_headerlink_hover_text);
 }
 .text {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';

package/src/setup/header/Search/Search.js

@@ -29,13 +29,24 @@ export default class Search extends React.Component {
   }
 
   render() {
-    let { placeHolder, maxLength, value, onChange, onKeyPress } = this.props;
+    let {
+      placeHolder,
+      maxLength,
+      value,
+      onChange,
+      onKeyPress,
+      customClass
+    } = this.props;
     let { isFocus } = this.state;
     return (
-      <div className={`${style.container} ${isFocus ? style.active : ''}`}>
+      <div
+        className={`${style.container} ${
+          isFocus ? style.active : ''
+        } ${customClass}`}
+      >
         <TextBox
           placeHolder={placeHolder}
-          className={style.input}
+          customClass={style.input}
           maxLength={maxLength}
           value={value}
           onChange={onChange}
@@ -54,6 +65,7 @@ export default class Search extends React.Component {
   }
 }
 Search.propTypes = {
+  customClass: PropTypes.string,
   maxLength: PropTypes.number,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -64,7 +76,8 @@ Search.propTypes = {
 };
 Search.defaultProps = {
   placeHolder: 'Search',
-  maxLength: 150
+  maxLength: 150,
+  customClass: ''
 };
 if (__DOCS__) {
   Search.docs = {

package/src/setup/header/Search/Search.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  transition: width 0.3s;
+  transition: width var(--zd_transition3);
   width: var(--zd_size90);
   margin-right: var(--zd_size15);
 }
@@ -9,48 +9,49 @@
 }
 .active .input,
 .input:hover {
-  border-bottom-color: #999;
+  border-bottom-color: var(--zdt_search_input_border);
 }
 .icon {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
-  color: #999;
+  color: var(--zdt_search_icon);
   line-height: var(--zd_size26);
   cursor: pointer;
 }
 .icon:hover {
-  color: #666;
+  color: var(--zdt_search_hover_icon);
 }
 .input {
   border: 0;
   height: var(--zd_size26);
-  font-size: var(--zd_size13);
+  font-size: var(--zd_font_size13);
   width: 100%;
   letter-spacing: 0.2px;
   border-bottom: 1px solid transparent;
-  transition: all 0.3s ease;
-  color: #333;
+  transition: all var(--zd_transition3) ease;
+  color: var(--zdt_search_input_text);
   font-family: var(--zd_regular);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding-right: var(--zd_size20);
+  background: var(--zdt_search_input_bg);
 }
 .input::placeholder {
-  color: var(--zd_text_smoke12);
+  color: var(--zdt_search_placeholder_text);
 }
 .input::-webkit-placeholder {
-  color: var(--zd_text_smoke12);
+  color: var(--zdt_search_placeholder_text);
 }
 .input::-moz-placeholder {
-  color: var(--zd_text_smoke12);
+  color: var(--zdt_search_placeholder_text);
 }
 .input::-ms-placeholder {
-  color: var(--zd_text_smoke12);
+  color: var(--zdt_search_placeholder_text);
 }
 .input:focus,
 .active .input:focus {
-  border-bottom-color: #0d83dd;
+  border-bottom-color: var(--zdt_search_input_focus_border);
 }

package/src/setup/header/Views/Views.module.css

@@ -6,8 +6,8 @@
   display: inline-block;
   text-align: center;
   cursor: pointer;
-  color: #999;
-  border: 1px solid #e1e1e1;
+  color: var(--zdt_views_icon);
+  border: 1px solid var(--zdt_views_border);
   height: var(--zd_size28);
   width: var(--zd_size28);
   line-height: var(--zd_size26);
@@ -20,8 +20,8 @@
   border-left-width: 0;
 }
 .icon:hover {
-  color: #666;
+  color: var(--zdt_views_hover_icon);
 }
 .icon.active {
-  color: #0d83dd;
+  color: var(--zdt_views_active_icon);
 }

package/src/setup/helptips/Description/Description.js

@@ -1,22 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './HelpTipsDescription.module.css';
-export default class Description extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { text } = this.props;
-    return <p className={style.text}>{text}</p>;
-  }
-}
-Description.propTypes = {
-  text: PropTypes.string
-};
-if (__DOCS__) {
-  Description.docs = {
-    componentGroup: 'HelpTips',
-    folderName: 'Setup'
-  };
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './HelpTipsDescription.module.css';
+export default class Description extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { text } = this.props;
+    return <p className={style.text}>{text}</p>;
+  }
+}
+Description.propTypes = {
+  text: PropTypes.string
+};
+if (__DOCS__) {
+  Description.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/src/setup/helptips/Description/HelpTipsDescription.module.css

@@ -1,6 +1,6 @@
 .text {
-  font-size: var(--zd_size14);
-  color: var(--zd_text_dark5);
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_helptips_text);
   line-height: var(--zd_size24);
   margin: var(--zd_size10) 0;
 }

package/src/setup/helptips/Description/docs/Description__default.docs.js

@@ -1,24 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Description from '../Description';
-export default class Description__default extends React.Component {
-  constructor(props) {
-    super(props);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Description from '../Description';
+export default class Description__default extends React.Component {
+  constructor(props) {
+    super(props);
   }
-
-  render() {
-    return (
-      <div style={{ margin: '1.25rem' }}>
-        <Description
-          text='Create templates to customize email notifications and ticket details according to your specific needs. You can use email templates while replying to ticket, sending notification e-mails and for alerts associated with workflows, SLAs & escalations. These templates are specific to each module. Using ticket templates, you can automatically populate some pre-defined values into some ticket fields while adding new ticket. It saves you a lot of time and effort each time.'
-        />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  Description__default.docs = {
-    componentGroup: 'HelpTips',
-    folderName: 'Setup'
-  };
-}
+
+  render() {
+    return (
+      <div style={{ margin: '1.25rem' }}>
+        <Description
+          text='Create templates to customize email notifications and ticket details according to your specific needs. You can use email templates while replying to ticket, sending notification e-mails and for alerts associated with workflows, SLAs & escalations. These templates are specific to each module. Using ticket templates, you can automatically populate some pre-defined values into some ticket fields while adding new ticket. It saves you a lot of time and effort each time.'
+        />
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  Description__default.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/src/setup/helptips/Link/HelpTipsLink.module.css

@@ -1,6 +1,6 @@
 .container > a,
 .text {
-  color: var(--zd_text_prime);
-  font-size: var(--zd_size14);
+  color: var(--zdt_helptipslink_text);
+  font-size: var(--zd_font_size14);
   margin: var(--zd_size10) 0;
 }

package/src/setup/helptips/Link/Link.js

@@ -1,40 +1,39 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './HelpTipsLink.module.css';
-import ExternalLink from '../../../ExternalLink/ExternalLink';
-import { HTMLPurifier } from '@zoho/SecurityJS';
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { text, url, onClick, isDangerous = false } = this.props;
-    if (isDangerous) {
-      return (
-        <div
-          className={style.container}
-          onClick={onClick}
-          dangerouslySetInnerHTML={{ __html: HTMLPurifier.sanitize(text) }}
-        />
-      );
-    }
-    return (
-      <ExternalLink href={url} onClick={onClick} className={style.text}>
-        {text}
-      </ExternalLink>
-    );
-  }
-}
-Link.propTypes = {
-  isDangerous: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  url: PropTypes.string
-};
-if (__DOCS__) {
-  Link.docs = {
-    componentGroup: 'HelpTips',
-    folderName: 'Setup'
-  };
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './HelpTipsLink.module.css';
+import ExternalLink from '../../../ExternalLink/ExternalLink';
+export default class Link extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { text, url, onClick, isDangerous = false } = this.props;
+    if (isDangerous) {
+      return (
+        <div
+          className={style.container}
+          onClick={onClick}
+          dangerouslySetInnerHTML={{ __html: text}}
+        />
+      );
+    }
+    return (
+      <ExternalLink href={url} onClick={onClick} className={style.text}>
+        {text}
+      </ExternalLink>
+    );
+  }
+}
+Link.propTypes = {
+  isDangerous: PropTypes.bool,
+  onClick: PropTypes.func,
+  text: PropTypes.string,
+  url: PropTypes.string
+};
+if (__DOCS__) {
+  Link.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/src/setup/helptips/Link/docs/Link__default.docs.js

@@ -1,27 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from '../Link';
-export default class Link__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div style={{ margin: '2rem' }}>
-        <Link
-          url={
-            'https://help.zoho.com/portal/kb/articles/creating-and-managing-email-templates'
-          }
-          text='All you need to know about email templates '
-        />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  Link__default.docs = {
-    componentGroup: 'HelpTips',
-    folderName: 'Setup'
-  };
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ margin: '2rem' }}>
+        <Link
+          url={
+            'https://help.zoho.com/portal/kb/articles/creating-and-managing-email-templates'
+          }
+          text='All you need to know about email templates '
+        />
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  Link__default.docs = {
+    componentGroup: 'HelpTips',
+    folderName: 'Setup'
+  };
+}

package/src/setup/helptips/ListGroup/ListGroup.module.css

@@ -6,8 +6,8 @@
 .unOrderData,
 .orderData {
   margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
-  font-size: var(--zd_size14);
-  color: var(--zd_text_dark5);
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_listgroup_text);
 }
 .orderData {
   list-style: decimal;