@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/es/setup/header/Search/Search.js

@@ -1,104 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-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';
-
-var Search = function (_React$Component) {
-  _inherits(Search, _React$Component);
-
-  function Search(props) {
-    _classCallCheck(this, Search);
-
-    var _this = _possibleConstructorReturn(this, (Search.__proto__ || _Object$getPrototypeOf(Search)).call(this, props));
-
-    var value = _this.props.value;
-
-    _this.state = {
-      value: value || '',
-      isFocus: false
-    };
-    _this.onFocus = _this.onFocus.bind(_this);
-    _this.onBlur = _this.onBlur.bind(_this);
-    return _this;
-  }
-
-  _createClass(Search, [{
-    key: 'onFocus',
-    value: function onFocus(id, name, value) {
-      var onFocus = this.props.onFocus;
-
-      this.setState({ isFocus: true });
-      onFocus && onFocus(id, name, value);
-    }
-  }, {
-    key: 'onBlur',
-    value: function onBlur(id, name, value) {
-      var onBlur = this.props.onBlur;
-
-      this.state.value == '' && this.setState({ isFocus: false });
-      onBlur && onBlur(id, name, value);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          placeHolder = _props.placeHolder,
-          maxLength = _props.maxLength,
-          value = _props.value,
-          onChange = _props.onChange,
-          onKeyPress = _props.onKeyPress;
-      var isFocus = this.state.isFocus;
-
-      return React.createElement(
-        'div',
-        { className: style.container + ' ' + (isFocus ? style.active : '') },
-        React.createElement(TextBox, {
-          placeHolder: placeHolder,
-          className: style.input,
-          maxLength: maxLength,
-          value: value,
-          onChange: onChange,
-          onKeyUp: onKeyPress,
-          onFocus: this.onFocus,
-          needAppearance: false,
-          onBlur: this.onBlur
-        }),
-        value != '' && value ? React.createElement(
-          'span',
-          { className: style.icon, onClick: this.onBlur },
-          React.createElement(Icon, { name: 'ZD-close', size: '19' })
-        ) : null
-      );
-    }
-  }]);
-
-  return Search;
-}(React.Component);
-
-export default Search;
-
-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 (false) {
-  Search.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

@@ -1,67 +0,0 @@
-.container {
-  position: relative;
-  transition: width 0.3s;
-  width: var(--zd_size90);
-}[dir=ltr] .container {
-  margin-right: var(--zd_size15);
-}[dir=rtl] .container {
-  margin-left: var(--zd_size15);
-}
-.active {
-  width: var(--zd_size180);
-}
-.active .input, .input:hover {
-  border-bottom-color: #999;
-}
-.icon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  color: #999;
-  line-height: var(--zd_size26);
-  cursor: pointer;
-}
-[dir=ltr] .icon {
-  right: 0;
-}
-[dir=rtl] .icon {
-  left: 0;
-}
-.icon:hover {
-  color: #666;
-}
-.input {
-  height: var(--zd_size26);
-  font-size: var(--zd_size13);
-  width: 100%;
-  letter-spacing: 0.2px;
-  transition: all 0.3s ease;
-  color: #333;
-  font-family: var(--zd_regular);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  border-bottom: 1px solid transparent;
-}
-[dir=ltr] .input {
-  padding-right: var(--zd_size20);
-}
-[dir=rtl] .input {
-  padding-left: 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/es/setup/header/Search/docs/Search__default.docs.js

@@ -1,54 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React from 'react';
-import PropTypes from 'prop-types';
-import Search from '../Search';
-
-var Search__default = function (_React$Component) {
-  _inherits(Search__default, _React$Component);
-
-  function Search__default(props) {
-    _classCallCheck(this, Search__default);
-
-    var _this = _possibleConstructorReturn(this, (Search__default.__proto__ || _Object$getPrototypeOf(Search__default)).call(this, props));
-
-    _this.state = { value: '' };
-    return _this;
-  }
-
-  _createClass(Search__default, [{
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      return React.createElement(
-        'div',
-        { style: { width: '200px', margin: '50px' } },
-        React.createElement(Search, {
-          value: this.state.value,
-          placeHolder: 'Search',
-          onChange: function onChange(value) {
-            _this2.setState({ value: value });
-          },
-          onBlur: function onBlur() {
-            _this2.setState({ value: '' });
-          }
-        })
-      );
-    }
-  }]);
-
-  return Search__default;
-}(React.Component);
-
-export default Search__default;
-
-if (false) {
-  Search__default.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

package/es/setup/header/SelectDropdown/SelectDropdown.js

@@ -1,162 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-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';
-
-var SelectDropdown = function (_React$Component) {
-  _inherits(SelectDropdown, _React$Component);
-
-  function SelectDropdown(props) {
-    _classCallCheck(this, SelectDropdown);
-
-    var _this = _possibleConstructorReturn(this, (SelectDropdown.__proto__ || _Object$getPrototypeOf(SelectDropdown)).call(this, props));
-
-    _this.handleTogglePopup = _this.handleTogglePopup.bind(_this);
-    _this.handleClick = _this.handleClick.bind(_this);
-    return _this;
-  }
-
-  _createClass(SelectDropdown, [{
-    key: 'handleClick',
-    value: function handleClick(id, value, index, e) {
-      var _props = this.props,
-          onClick = _props.onClick,
-          togglePopup = _props.togglePopup;
-
-      onClick && onClick(id, value, index, e);
-      togglePopup(e, 'bottomRight');
-    }
-  }, {
-    key: 'handleTogglePopup',
-    value: function handleTogglePopup(e) {
-      var togglePopup = this.props.togglePopup;
-
-      togglePopup(e, 'bottomRight');
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _props2 = this.props,
-          title = _props2.title,
-          selectedText = _props2.selectedText,
-          isPopupOpen = _props2.isPopupOpen,
-          isPopupReady = _props2.isPopupReady,
-          getTargetRef = _props2.getTargetRef,
-          getContainerRef = _props2.getContainerRef,
-          removeClose = _props2.removeClose,
-          suggestions = _props2.suggestions,
-          selectedId = _props2.selectedId,
-          _props2$isSearchRequi = _props2.isSearchRequired,
-          isSearchRequired = _props2$isSearchRequi === undefined ? false : _props2$isSearchRequi;
-      var idKey = suggestions.idKey,
-          valueKey = suggestions.valueKey,
-          _suggestions$options = suggestions.options,
-          options = _suggestions$options === undefined ? [] : _suggestions$options;
-
-      return React.createElement(
-        'span',
-        {
-          ref: getTargetRef,
-          className: style.container,
-          onClick: removeClose
-        },
-        React.createElement(
-          'span',
-          { className: style.departName, onClick: this.handleTogglePopup },
-          selectedText
-        ),
-        React.createElement(
-          'span',
-          { className: style.departIcon, onClick: this.handleTogglePopup },
-          React.createElement(Icon, { name: 'ZD-down1', size: '6' })
-        ),
-        React.createElement(
-          DropBox,
-          {
-            size: 'medium',
-            boxPosition: 'bottomRight',
-            isArrow: true,
-            isAnimate: true,
-            right: '-25',
-            isActive: isPopupOpen && isPopupReady,
-            getRef: getContainerRef
-          },
-          React.createElement(
-            Container,
-            { alignBox: 'column', className: style.rulesPopup },
-            React.createElement(
-              Box,
-              { className: style.rulesDepart },
-              React.createElement(DropDownHeading, { text: title })
-            ),
-            isSearchRequired ? React.createElement(
-              Box,
-              { className: style.searchDepart },
-              React.createElement(TextBox, {
-                name: 'Test',
-                id: 'Test',
-                maxLength: '150',
-                placeHolder: 'Search Department'
-              })
-            ) : null,
-            React.createElement(
-              Box,
-              { scroll: 'vertical', flexible: true, shrink: true },
-              options && options.length && options.map(function (obj, index) {
-                return React.createElement(ListItem, {
-                  key: index,
-                  autoHover: true,
-                  value: obj[valueKey],
-                  active: selectedId == obj[idKey],
-                  id: obj[idKey],
-                  onClick: _this2.handleClick
-                });
-              })
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return SelectDropdown;
-}(React.Component);
-
-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 (false) {
-  SelectDropdown.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}
-
-export default Popup(SelectDropdown);

package/es/setup/header/SelectDropdown/SelectDropdown.module.css

@@ -1,43 +0,0 @@
-.container {
-  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';
-  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(--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);
-  cursor: pointer;
-}
-[dir=ltr] .departIcon {
-  margin-left: var(--zd_size5);
-}
-[dir=rtl] .departIcon {
-  margin-right: var(--zd_size5);
-}
-.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/es/setup/header/SelectDropdown/docs/SelectDropdown__default.docs.js

@@ -1,44 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React from 'react';
-import PropTypes from 'prop-types';
-import SelectDropdown from '../SelectDropdown';
-
-var SelectDropdown__default = function (_React$Component) {
-  _inherits(SelectDropdown__default, _React$Component);
-
-  function SelectDropdown__default(props) {
-    _classCallCheck(this, SelectDropdown__default);
-
-    return _possibleConstructorReturn(this, (SelectDropdown__default.__proto__ || _Object$getPrototypeOf(SelectDropdown__default)).call(this, props));
-  }
-
-  _createClass(SelectDropdown__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(SelectDropdown, {
-        title: 'DropDown',
-        suggestions: {
-          options: [{ id: '1', value: 'Zoho desk' }, { id: '2', value: 'Zoho projects' }],
-          idKey: 'id',
-          valueKey: 'value'
-        },
-        selectedText: 'Zoho Desk'
-      });
-    }
-  }]);
-
-  return SelectDropdown__default;
-}(React.Component);
-
-export default SelectDropdown__default;
-
-if (false) {
-  SelectDropdown__default.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

package/es/setup/header/Views/Views.js

@@ -1,80 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Views.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-var Views = function (_React$Component) {
-  _inherits(Views, _React$Component);
-
-  function Views(props) {
-    _classCallCheck(this, Views);
-
-    return _possibleConstructorReturn(this, (Views.__proto__ || _Object$getPrototypeOf(Views)).call(this, props));
-  }
-
-  _createClass(Views, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isGrid = _props.isGrid,
-          isList = _props.isList,
-          gridTitle = _props.gridTitle,
-          listTitle = _props.listTitle,
-          onListClick = _props.onListClick,
-          onGridClick = _props.onGridClick;
-
-      return React.createElement(
-        'span',
-        { className: style.container },
-        React.createElement(
-          'span',
-          {
-            className: style.icon + ' ' + style.first + ' ' + (isList ? style.active : ''),
-            'data-title': !isList ? listTitle : '',
-            onClick: onListClick
-          },
-          React.createElement(Icon, { name: 'ZD-list22', size: '10' })
-        ),
-        React.createElement(
-          'span',
-          {
-            className: style.icon + ' ' + style.last + '  ' + (isGrid ? style.active : ''),
-            'data-title': !isGrid ? gridTitle : '',
-            onClick: onGridClick
-          },
-          React.createElement(Icon, { name: 'ZD-grid', size: '11' })
-        )
-      );
-    }
-  }]);
-
-  return Views;
-}(React.Component);
-
-export default Views;
-
-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 (false) {
-  Views.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

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

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

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

@@ -1,40 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React from 'react';
-import PropTypes from 'prop-types';
-import Views from '../Views';
-
-var Views__default = function (_React$Component) {
-  _inherits(Views__default, _React$Component);
-
-  function Views__default(props) {
-    _classCallCheck(this, Views__default);
-
-    return _possibleConstructorReturn(this, (Views__default.__proto__ || _Object$getPrototypeOf(Views__default)).call(this, props));
-  }
-
-  _createClass(Views__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        { style: { 'margin': '50px' } },
-        React.createElement(Views, null)
-      );
-    }
-  }]);
-
-  return Views__default;
-}(React.Component);
-
-export default Views__default;
-
-if (false) {
-  Views__default.docs = {
-    componentGroup: 'Header',
-    folderName: 'Setup'
-  };
-}

package/es/setup/helptips/Description/Description.js

@@ -1,45 +0,0 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './HelpTipsDescription.module.css';
-
-var Description = function (_React$Component) {
-  _inherits(Description, _React$Component);
-
-  function Description(props) {
-    _classCallCheck(this, Description);
-
-    return _possibleConstructorReturn(this, (Description.__proto__ || _Object$getPrototypeOf(Description)).call(this, props));
-  }
-
-  _createClass(Description, [{
-    key: 'render',
-    value: function render() {
-      var text = this.props.text;
-
-      return React.createElement(
-        'p',
-        { className: style.text },
-        text
-      );
-    }
-  }]);
-
-  return Description;
-}(React.Component);
-
-export default Description;
-
-Description.propTypes = {
-  text: PropTypes.string
-};
-if (false) {
-  Description.docs = {
-    componentGroup: 'HelpTips',
-    folderName: 'Setup'
-  };
-}

package/es/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;
-}