@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.230

package/src/setup/header/Link/Link.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Box } from '@zohodesk/components/lib/Layout';
-import ExternalLink from '../../../ExternalLink/ExternalLink';
-import style from './HeaderLink.module.css';
-
-export default class Link extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { url, text, iconName, iconClass, iconSize } = this.props;
-    return (
-      <ExternalLink className={style.container} href={url}>
-        <Box className={style.icon}>
-          <Icon
-            isBold
-            name={iconName}
-            size={iconSize}
-            iconClass={iconClass ? iconClass : ''}
-          />
-        </Box>
-        <Box className={style.text} flexible>
-          {text}
-        </Box>
-      </ExternalLink>
-    );
-  }
-}
-Link.defaultProps = {
-  iconName: 'ZD-newtab',
-  iconSize: 10
-};
-Link.propTypes = {
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.number,
-  text: PropTypes.string,
-  url: PropTypes.string
-};
-if (__DOCS__) {
-  Link.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

@@ -1,20 +0,0 @@
-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 (
-      <Link text='View Page' url='https://zoho.com' />
-    );
-  }
-}
-if (__DOCS__) {
-  Link__default.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
-import style from './Search.module.css';
-
-export default class Search extends React.Component {
-  constructor(props) {
-    super(props);
-    let { value } = this.props;
-    this.state = {
-      value: value || '',
-      isFocus: false
-    };
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-  }
-
-  onFocus(id, name, value) {
-    let { onFocus } = this.props;
-    this.setState({ isFocus: true });
-    onFocus && onFocus(id, name, value);
-  }
-
-  onBlur(id, name, value) {
-    let { onBlur } = this.props;
-    this.state.value == '' && this.setState({ isFocus: false });
-    onBlur && onBlur(id, name, value);
-  }
-
-  render() {
-    let { placeHolder, maxLength, value, onChange, onKeyPress } = this.props;
-    let { isFocus } = this.state;
-    return (
-      <div className={`${style.container} ${isFocus ? style.active : ''}`}>
-        <TextBox
-          placeHolder={placeHolder}
-          className={style.input}
-          maxLength={maxLength}
-          value={value}
-          onChange={onChange}
-          onKeyUp={onKeyPress}
-          onFocus={this.onFocus}
-          needAppearance={false}
-          onBlur={this.onBlur}
-        />
-        {value != '' && value ? (
-          <span className={style.icon} onClick={this.onBlur}>
-            <Icon name='ZD-close' size='19' />
-          </span>
-        ) : null}
-      </div>
-    );
-  }
-}
-Search.propTypes = {
-  maxLength: PropTypes.number,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  placeHolder: PropTypes.string,
-  value: PropTypes.string
-};
-Search.defaultProps = {
-  placeHolder: 'Search',
-  maxLength: 150
-};
-if (__DOCS__) {
-  Search.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

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

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Search from '../Search';
-export default class Search__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '' };
-  }
-
-  render() {
-    return (
-      <div style={{ width: '200px', margin: '50px' }}>
-        <Search
-          value={this.state.value}
-          placeHolder='Search'
-          onChange={value => {
-            this.setState({ value: value });
-          }}
-          onBlur={() => {
-            this.setState({ value: '' });
-          }}
-        />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  Search__default.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

package/src/setup/header/SelectDropdown/SelectDropdown.js

@@ -1,122 +0,0 @@
-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/setup/header/SelectDropdown/SelectDropdown.module.css

@@ -1,35 +0,0 @@
-.container {
-  padding: var(--zd_size3) var(--zd_size15);
-  margin-left: var(--zd_size15);
-  position: relative;
-  line-height: var(--zd_size18);
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  cursor: pointer;
-}
-.container:hover {
-  background: var(--zd_bg_smoke64);
-}
-.departName {
-  font-size: var(--zd_size13);
-  color: var(--zd_text_dark4);
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexgrow from '~@zohodesk/components/lib/common/common.module.css';
-}
-.departIcon {
-  color: var(--zd_text_dark5);
-  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;
-}

package/src/setup/header/SelectDropdown/docs/SelectDropdown__default.docs.js

@@ -1,31 +0,0 @@
-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'
-  };
-}

package/src/setup/header/Views/Views.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Views.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-export default class Views extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      isGrid,
-      isList,
-      gridTitle,
-      listTitle,
-      onListClick,
-      onGridClick
-    } = this.props;
-    return (
-      <span className={style.container}>
-        <span
-          className={`${style.icon} ${style.first} ${
-            isList ? style.active : ''
-          }`}
-          data-title={!isList ? listTitle : ''}
-          onClick={onListClick}
-        >
-          <Icon name='ZD-list22' size='10' />
-        </span>
-        <span
-          className={`${style.icon} ${style.last}  ${
-            isGrid ? style.active : ''
-          }`}
-          data-title={!isGrid ? gridTitle : ''}
-          onClick={onGridClick}
-        >
-          <Icon name='ZD-grid' size='11' />
-        </span>
-      </span>
-    );
-  }
-}
-Views.propTypes = {
-  gridTitle: PropTypes.string,
-  isGrid: PropTypes.bool,
-  isList: PropTypes.bool,
-  listTitle: PropTypes.string,
-  onGridClick: PropTypes.func,
-  onListClick: PropTypes.func
-};
-Views.defaultProps = {
-  isList: true,
-  isGrid: false,
-  listTitle: 'List View',
-  gridTitle: 'Grid View'
-};
-if (__DOCS__) {
-  Views.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

@@ -1,27 +0,0 @@
-.container {
-  display: inline-block;
-  margin-right: var(--zd_size15);
-}
-.icon {
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-  color: #999;
-  border: 1px solid #e1e1e1;
-  height: var(--zd_size28);
-  width: var(--zd_size28);
-  line-height: var(--zd_size26);
-}
-.first {
-  border-radius: 2px 0 0 2px;
-}
-.last {
-  border-radius: 0 2px 2px 0;
-  border-left-width: 0;
-}
-.icon:hover {
-  color: #666;
-}
-.icon.active {
-  color: #0d83dd;
-}

package/src/setup/header/Views/docs/Views__default.docs.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Views from '../Views';
-export default class Views__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div style={{ 'margin': '50px' }}><Views /></div>
-    );
-  }
-}
-if (__DOCS__) {
-  Views__default.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

@@ -1,22 +0,0 @@
-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 +0,0 @@
-.text {
-  font-size: var(--zd_size14);
-  color: var(--zd_text_dark5);
-  line-height: var(--zd_size24);
-  margin: var(--zd_size10) 0;
-}

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

@@ -1,24 +0,0 @@
-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'
-  };
-}

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

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

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

@@ -1,40 +0,0 @@
-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'
-  };
-}

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

@@ -1,27 +0,0 @@
-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'
-  };
-}