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

package/es/setup/header/Button/docs/Button__default.docs.js

@@ -1,33 +1,18 @@
-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 Button from '../Button';
-
-var Button__default = function (_React$Component) {
-  _inherits(Button__default, _React$Component);
-
-  function Button__default(props) {
-    _classCallCheck(this, Button__default);
-
-    return _possibleConstructorReturn(this, (Button__default.__proto__ || _Object$getPrototypeOf(Button__default)).call(this, props));
+export default class Button__default extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Button__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(Button, { text: 'Add New' });
-    }
-  }]);
-
-  return Button__default;
-}(React.Component);
+  render() {
+    return /*#__PURE__*/React.createElement(Button, {
+      text: "Add New"
+    });
+  }
 
-export default Button__default;
+}
 
 if (false) {
   Button__default.docs = {

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

@@ -1,15 +1,20 @@
 .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);
+}[dir=ltr] .container {
   margin-right: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-left: var(--zd_size15);
 }
-.icon {
+[dir=ltr] .icon {
   margin-right: var(--zd_size5);
 }
+[dir=rtl] .icon {
+  margin-left: 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/es/setup/header/Link/Link.js

@@ -1,61 +1,39 @@
-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 { Box } from '@zohodesk/components/lib/Layout';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
 import style from './HeaderLink.module.css';
-
-var Link = function (_React$Component) {
-  _inherits(Link, _React$Component);
-
-  function Link(props) {
-    _classCallCheck(this, Link);
-
-    return _possibleConstructorReturn(this, (Link.__proto__ || _Object$getPrototypeOf(Link)).call(this, props));
+export default class Link extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Link, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          url = _props.url,
-          text = _props.text,
-          iconName = _props.iconName,
-          iconClass = _props.iconClass,
-          iconSize = _props.iconSize;
-
-      return React.createElement(
-        ExternalLink,
-        { className: style.container, href: url },
-        React.createElement(
-          Box,
-          { className: style.icon },
-          React.createElement(Icon, {
-            isBold: true,
-            name: iconName,
-            size: iconSize,
-            iconClass: iconClass ? iconClass : ''
-          })
-        ),
-        React.createElement(
-          Box,
-          { className: style.text, flexible: true },
-          text
-        )
-      );
-    }
-  }]);
-
-  return Link;
-}(React.Component);
-
-export default Link;
+  render() {
+    let {
+      url,
+      text,
+      iconName,
+      iconClass,
+      iconSize
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ExternalLink, {
+      className: style.container,
+      href: url
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      isBold: true,
+      name: iconName,
+      size: iconSize,
+      iconClass: iconClass ? iconClass : ''
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: style.text,
+      flexible: true
+    }, text));
+  }
 
+}
 Link.defaultProps = {
   iconName: 'ZD-newtab',
   iconSize: 10
@@ -67,6 +45,7 @@ Link.propTypes = {
   text: PropTypes.string,
   url: PropTypes.string
 };
+
 if (false) {
   Link.docs = {
     componentGroup: 'Header',

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

@@ -1,32 +1,19 @@
-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 Link from '../Link';
-
-var Link__default = function (_React$Component) {
-  _inherits(Link__default, _React$Component);
-
-  function Link__default(props) {
-    _classCallCheck(this, Link__default);
-
-    return _possibleConstructorReturn(this, (Link__default.__proto__ || _Object$getPrototypeOf(Link__default)).call(this, props));
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Link__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(Link, { text: 'View Page', url: 'https://zoho.com' });
-    }
-  }]);
-
-  return Link__default;
-}(React.Component);
+  render() {
+    return /*#__PURE__*/React.createElement(Link, {
+      text: "View Page",
+      url: "https://zoho.com"
+    });
+  }
 
-export default Link__default;
+}
 
 if (false) {
   Link__default.docs = {

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

@@ -1,89 +1,78 @@
-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 = {
+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);
-    return _this;
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(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
-      );
-    }
-  }]);
+  onFocus(id, name, value) {
+    let {
+      onFocus
+    } = this.props;
+    this.setState({
+      isFocus: true
+    });
+    onFocus && onFocus(id, name, value);
+  }
 
-  return Search;
-}(React.Component);
+  onBlur(id, name, value) {
+    let {
+      onBlur
+    } = this.props;
+    this.state.value == '' && this.setState({
+      isFocus: false
+    });
+    onBlur && onBlur(id, name, value);
+  }
 
-export default Search;
+  render() {
+    let {
+      placeHolder,
+      maxLength,
+      value,
+      onChange,
+      onKeyPress,
+      customClass
+    } = this.props;
+    let {
+      isFocus
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      placeHolder: placeHolder,
+      customClass: style.input,
+      maxLength: maxLength,
+      value: value,
+      onChange: onChange,
+      onKeyUp: onKeyPress,
+      onFocus: this.onFocus,
+      needAppearance: false,
+      onBlur: this.onBlur
+    }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
+      className: style.icon,
+      onClick: this.onBlur
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close",
+      size: "19"
+    })) : null);
+  }
 
+}
 Search.propTypes = {
+  customClass: PropTypes.string,
   maxLength: PropTypes.number,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -94,8 +83,10 @@ Search.propTypes = {
 };
 Search.defaultProps = {
   placeHolder: 'Search',
-  maxLength: 150
+  maxLength: 150,
+  customClass: ''
 };
+
 if (false) {
   Search.docs = {
     componentGroup: 'Header',

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

@@ -1,56 +1,68 @@
 .container {
   position: relative;
-  transition: width 0.3s;
+  transition: width var(--zd_transition3);
   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;
+.active .input, .input:hover {
+  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;
 }
+[dir=ltr] .icon {
+  right: 0;
+}
+[dir=rtl] .icon {
+  left: 0;
+}
 .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;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  background: var(--zdt_search_input_bg);
+}
+[dir=ltr] .input {
   padding-right: var(--zd_size20);
 }
+[dir=rtl] .input {
+  padding-left: var(--zd_size20);
+}
 .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;
+.input:focus, .active .input:focus {
+  border-bottom-color: var(--zdt_search_input_focus_border);
 }

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

@@ -1,50 +1,37 @@
-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;
+export default class Search__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
   }
 
-  _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);
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '200px',
+        margin: '50px'
+      }
+    }, /*#__PURE__*/React.createElement(Search, {
+      value: this.state.value,
+      placeHolder: "Search",
+      onChange: value => {
+        this.setState({
+          value: value
+        });
+      },
+      onBlur: () => {
+        this.setState({
+          value: ''
+        });
+      }
+    }));
+  }
 
-export default Search__default;
+}
 
 if (false) {
   Search__default.docs = {

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

@@ -1,63 +1,41 @@
-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));
+export default class Views extends React.Component {
+  constructor(props) {
+    super(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;
+  render() {
+    let {
+      isGrid,
+      isList,
+      gridTitle,
+      listTitle,
+      onListClick,
+      onGridClick
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: style.container
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
+      "data-title": !isList ? listTitle : '',
+      onClick: onListClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-list22",
+      size: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
+      "data-title": !isGrid ? gridTitle : '',
+      onClick: onGridClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-grid",
+      size: "11"
+    })));
+  }
 
+}
 Views.propTypes = {
   gridTitle: PropTypes.string,
   isGrid: PropTypes.bool,
@@ -72,6 +50,7 @@ Views.defaultProps = {
   listTitle: 'List View',
   gridTitle: 'Grid View'
 };
+
 if (false) {
   Views.docs = {
     componentGroup: 'Header',