@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.220

package/es/setup/helptips/Link/Link.js

@@ -1,59 +1,45 @@
-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 './HelpTipsLink.module.css';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
-import { HTMLPurifier } from '@zoho/SecurityJS';
-
-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,
-          text = _props.text,
-          url = _props.url,
-          onClick = _props.onClick,
-          _props$isDangerous = _props.isDangerous,
-          isDangerous = _props$isDangerous === undefined ? false : _props$isDangerous;
-
-      if (isDangerous) {
-        return React.createElement('div', {
-          className: style.container,
-          onClick: onClick,
-          dangerouslySetInnerHTML: { __html: HTMLPurifier.sanitize(text) }
-        });
-      }
-      return React.createElement(
-        ExternalLink,
-        { href: url, onClick: onClick, className: style.text },
-        text
-      );
+  render() {
+    let {
+      text,
+      url,
+      onClick,
+      isDangerous = false
+    } = this.props;
+
+    if (isDangerous) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: style.container,
+        onClick: onClick,
+        dangerouslySetInnerHTML: {
+          __html: text
+        }
+      });
     }
-  }]);
 
-  return Link;
-}(React.Component);
-
-export default Link;
+    return /*#__PURE__*/React.createElement(ExternalLink, {
+      href: url,
+      onClick: onClick,
+      className: style.text
+    }, text);
+  }
 
+}
 Link.propTypes = {
   isDangerous: PropTypes.bool,
   onClick: PropTypes.func,
   text: PropTypes.string,
   url: PropTypes.string
 };
+
 if (false) {
   Link.docs = {
     componentGroup: 'HelpTips',

package/es/setup/helptips/ListGroup/ListGroup.js

@@ -1,64 +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 './ListGroup.module.css';
-
-var ListGroup = function (_React$Component) {
-  _inherits(ListGroup, _React$Component);
-
-  function ListGroup(props) {
-    _classCallCheck(this, ListGroup);
-
-    return _possibleConstructorReturn(this, (ListGroup.__proto__ || _Object$getPrototypeOf(ListGroup)).call(this, props));
+export default class ListGroup extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(ListGroup, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isOrder = _props.isOrder,
-          data = _props.data;
-
-      if (isOrder) {
-        return React.createElement(
-          'ol',
-          { className: style.container, type: '1' },
-          data.map(function (text, index) {
-            return React.createElement(
-              'li',
-              { className: style.orderData, key: index },
-              text
-            );
-          })
-        );
-      }
-      return React.createElement(
-        'ul',
-        { className: style.container },
-        data.map(function (text, index) {
-          return React.createElement(
-            'li',
-            { className: style.unOrderData, key: index },
-            data
-          );
-        })
-      );
+  render() {
+    let {
+      isOrder,
+      data
+    } = this.props;
+
+    if (isOrder) {
+      return /*#__PURE__*/React.createElement("ol", {
+        className: style.container,
+        type: "1"
+      }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+        className: style.orderData,
+        key: index
+      }, text)));
     }
-  }]);
 
-  return ListGroup;
-}(React.Component);
-
-export default ListGroup;
+    return /*#__PURE__*/React.createElement("ul", {
+      className: style.container
+    }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
+      className: style.unOrderData,
+      key: index
+    }, data)));
+  }
 
+}
 ListGroup.propTypes = {
   data: PropTypes.array,
   isOrder: PropTypes.bool
 };
+
 if (false) {
   ListGroup.docs = {
     componentGroup: 'HelpTips',

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

@@ -5,8 +5,8 @@
 }
 .unOrderData,
 .orderData {
-  font-size: var(--zd_size14);
-  color: var(--zd_text_dark5);
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_listgroup_text);
 }
 [dir=ltr] .unOrderData, [dir=ltr] .orderData {
   margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);

package/es/setup/helptips/Title/HelpTipsTitle.module.css

@@ -1,5 +1,5 @@
 .title {
-  font-size: var(--zd_size17);
+  font-size: var(--zd_font_size17);
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zd_text_dark4);
+  color: var(--zdt_helptipstitle_text);
 }

package/es/setup/helptips/Title/Title.js

@@ -1,42 +1,25 @@
-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 './HelpTipsTitle.module.css';
-
-var Title = function (_React$Component) {
-  _inherits(Title, _React$Component);
-
-  function Title(props) {
-    _classCallCheck(this, Title);
-
-    return _possibleConstructorReturn(this, (Title.__proto__ || _Object$getPrototypeOf(Title)).call(this, props));
+export default class Title extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(Title, [{
-    key: 'render',
-    value: function render() {
-      var text = this.props.text;
-
-      return React.createElement(
-        'div',
-        { className: style.title },
-        text
-      );
-    }
-  }]);
-
-  return Title;
-}(React.Component);
-
-export default Title;
+  render() {
+    let {
+      text
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.title
+    }, text);
+  }
 
+}
 Title.propTypes = {
   text: PropTypes.string
 };
+
 if (false) {
   Title.docs = {
     componentGroup: 'HelpTips',

package/es/setup/table/Table/Table.js

@@ -1,48 +1,28 @@
-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 { Container } from '@zohodesk/components/lib/Layout';
-
-var Table = function (_React$Component) {
-  _inherits(Table, _React$Component);
-
-  function Table() {
-    _classCallCheck(this, Table);
-
-    return _possibleConstructorReturn(this, (Table.__proto__ || _Object$getPrototypeOf(Table)).apply(this, arguments));
+export default class Table extends React.Component {
+  render() {
+    let {
+      children,
+      dataId,
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      dataId: dataId,
+      className: customClass
+    }, children);
   }
 
-  _createClass(Table, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          dataId = _props.dataId;
-
-      return React.createElement(
-        Container,
-        { dataId: dataId },
-        children
-      );
-    }
-  }]);
-
-  return Table;
-}(React.Component);
-
-export default Table;
-
-
+}
 Table.propTypes = {
   children: PropTypes.element,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  customClass: PropTypes.string
 };
 Table.defaultProps = {
-  dataId: 'table'
+  dataId: 'table',
+  customClass: ''
 };
 
 if (false) {

package/es/setup/table/TableBody/TableBody.js

@@ -1,48 +1,32 @@
-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 { Box } from '@zohodesk/components/lib/Layout';
-
-var TableBody = function (_React$Component) {
-  _inherits(TableBody, _React$Component);
-
-  function TableBody() {
-    _classCallCheck(this, TableBody);
-
-    return _possibleConstructorReturn(this, (TableBody.__proto__ || _Object$getPrototypeOf(TableBody)).apply(this, arguments));
+export default class TableBody extends React.Component {
+  render() {
+    let {
+      children,
+      eleRef,
+      onScroll = () => {},
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      eleRef: eleRef,
+      flexible: true,
+      scroll: "vertical",
+      onScroll: onScroll,
+      className: customClass
+    }, children);
   }
 
-  _createClass(TableBody, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          eleRef = _props.eleRef,
-          _props$onScroll = _props.onScroll,
-          onScroll = _props$onScroll === undefined ? function () {} : _props$onScroll;
-
-      return React.createElement(
-        Box,
-        { eleRef: eleRef, flexible: true, scroll: 'vertical', onScroll: onScroll },
-        children
-      );
-    }
-  }]);
-
-  return TableBody;
-}(React.Component);
-
-export default TableBody;
-
-
+}
 TableBody.propTypes = {
   children: PropTypes.element,
   eleRef: PropTypes.func,
-  onScroll: PropTypes.func
+  onScroll: PropTypes.func,
+  customClass: PropTypes.string
+};
+TableBody.defaultProps = {
+  customClass: ''
 };
 
 if (false) {

package/es/setup/table/TableData/TableData.js

@@ -1,63 +1,44 @@
-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 { Box } from '@zohodesk/components/lib/Layout';
-import style from './TableData.css';
-
-var TableData = function (_React$Component) {
-  _inherits(TableData, _React$Component);
-
-  function TableData(props) {
-    _classCallCheck(this, TableData);
-
-    return _possibleConstructorReturn(this, (TableData.__proto__ || _Object$getPrototypeOf(TableData)).call(this, props));
+import style from './SetupTableData.module.css';
+export default class TableData extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(TableData, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          flexible = _props.flexible,
-          shrink = _props.shrink,
-          align = _props.align,
-          type = _props.type,
-          dataId = _props.dataId;
-
-      return React.createElement(
-        Box,
-        {
-          dataId: dataId,
-          flexible: flexible,
-          shrink: shrink,
-          className: ' ' + style.container + ' ' + (type ? style[type] : '') + ' ' + (align ? style[align] ? style[align] : '' : '')
-        },
-        children
-      );
-    }
-  }]);
-
-  return TableData;
-}(React.Component);
-
-export default TableData;
+  render() {
+    let {
+      children,
+      flexible,
+      shrink,
+      align,
+      type,
+      dataId,
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: dataId,
+      flexible: flexible,
+      shrink: shrink,
+      className: `${customClass} ${style.container} ${type ? style[type] : ''} ${align ? style[align] ? style[align] : '' : ''}`
+    }, children);
+  }
 
+}
 TableData.defaultProps = {
   flexible: false,
-  dataId: 'tableData'
+  dataId: 'tableData',
+  customClass: ''
 };
-
 TableData.propTypes = {
+  align: PropTypes.oneOf(['center', 'left', 'right']),
   children: PropTypes.element,
+  dataId: PropTypes.string,
   flexible: PropTypes.string,
   shrink: PropTypes.string,
-  align: PropTypes.oneOf(['center', 'left', 'right']),
   type: PropTypes.oneOf(['size70', 'size90', 'size150', 'size220']),
-  dataId: PropTypes.string
+  customClass: PropTypes.string
 };
 
 if (false) {

package/{lib/setup/table/TableHead/TableHead.css → es/setup/table/TableHead/SetupTableHead.module.css}

@@ -1,5 +1,5 @@
 .container {
-  border-bottom: 1px solid var(--zd_border_smoke59);
+  border-bottom: 1px solid var(--zdt_setuptablehead_border);
 }[dir=ltr] .container {
   padding-right: var(--zd_size40);
   padding-left: var(--zd_size40);

package/es/setup/table/TableHead/TableHead.js

@@ -1,58 +1,33 @@
-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 { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './TableHead.css';
-
-var TableHead = function (_React$Component) {
-  _inherits(TableHead, _React$Component);
-
-  function TableHead(props) {
-    _classCallCheck(this, TableHead);
-
-    return _possibleConstructorReturn(this, (TableHead.__proto__ || _Object$getPrototypeOf(TableHead)).call(this, props));
+import style from './SetupTableHead.module.css';
+export default class TableHead extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(TableHead, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          className = _props.className,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          dataId = _props.dataId;
-
-      return React.createElement(
-        Box,
-        {
-          className: style.container + ' ' + className + ' ',
-          dataId: dataId,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave
-        },
-        React.createElement(
-          Container,
-          {
-            alignBox: 'row',
-            align: 'vertical',
-            className: style.subContainer
-          },
-          children
-        )
-      );
-    }
-  }]);
-
-  return TableHead;
-}(React.Component);
-
-export default TableHead;
+  render() {
+    let {
+      children,
+      className,
+      onMouseEnter,
+      onMouseLeave,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${className} `,
+      dataId: dataId,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.subContainer
+    }, children));
+  }
 
+}
 TableHead.defaultProps = {
   dataId: 'tableHead',
   className: ''

package/es/setup/table/TableRow/{TableRow.css → SetupTableRow.module.css}

@@ -1,7 +1,7 @@
 .container {
   position: relative;
   height: var(--zd_size52);
-  border-bottom: 1px solid var(--zd_border_alabaster);
+  border-bottom: 1px solid var(--zdt_setuptablerow_border);
 }[dir=ltr] .container {
   margin-right: var(--zd_size40);
   margin-left: var(--zd_size40);
@@ -10,5 +10,5 @@
   margin-right: var(--zd_size40);
 }
 .container:hover {
-  background-color: var(--zd_bg_snow);
+  background-color: var( --zdt_setuptablerow_hover_bg);
 }