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

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

@@ -1,8 +1,3 @@
-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 Table from '../Table';
 import TableHead from '../../TableHead/TableHead';
@@ -11,179 +6,172 @@ import TableBody from '../../TableBody/TableBody';
 import TableRow from '../../TableRow/TableRow';
 import Text from '../../Text/Text';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import hoverCss from '../../TableData/hover.css';
-
-var Table__default = function (_React$Component) {
-  _inherits(Table__default, _React$Component);
-
-  function Table__default(props) {
-    _classCallCheck(this, Table__default);
-
-    var _this = _possibleConstructorReturn(this, (Table__default.__proto__ || _Object$getPrototypeOf(Table__default)).call(this, props));
+import hoverCss from '../../TableData/Tablehover.module.css';
+export default class Table__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.over = this.over.bind(this);
+    this.out = this.out.bind(this);
+  }
 
-    _this.over = _this.over.bind(_this);
-    _this.out = _this.out.bind(_this);
-    return _this;
+  over() {
+    console.log('over');
   }
 
-  _createClass(Table__default, [{
-    key: 'over',
-    value: function over() {
-      console.log('over');
-    }
-  }, {
-    key: 'out',
-    value: function out() {
-      console.log('out');
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        Table,
-        null,
-        React.createElement(
-          TableHead,
-          null,
-          React.createElement(
-            TableData,
-            { flexible: true, shrink: true, type: 'size150' },
-            React.createElement(Text, { type: 'heading', text: 'header1' })
-          ),
-          React.createElement(
-            TableData,
-            { flexible: true, shrink: true, type: 'size150' },
-            React.createElement(Text, { type: 'heading', text: 'header2' })
-          ),
-          React.createElement(
-            TableData,
-            { flexible: true, shrink: true, type: 'size150' },
-            React.createElement(Text, { type: 'heading', text: 'header3' })
-          ),
-          React.createElement(
-            TableData,
-            { flexible: true, shrink: true, type: 'size150', align: 'center' },
-            React.createElement(Text, { type: 'heading', text: 'header4' })
-          )
-        ),
-        React.createElement(
-          TableBody,
-          null,
-          React.createElement(
-            TableRow,
-            { onMouseEnter: this.over, onMouseLeave: this.out },
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { text: 'Data1' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { type: 'semiBold', text: 'Data2' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(
-                Container,
-                { alignBox: 'row' },
-                React.createElement(
-                  Box,
-                  { shrink: 'true' },
-                  React.createElement(Text, { text: 'Not Verified - ' })
-                ),
-                React.createElement(
-                  Box,
-                  { style: { 'margin-left': '4px' } },
-                  React.createElement(Text, { text: ' Verify', type: 'primary' })
-                )
-              )
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150', align: 'center' },
-              React.createElement(Text, { text: 'Data4' })
-            )
-          ),
-          React.createElement(
-            TableRow,
-            null,
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { text: 'Data1' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { type: 'semiBold', text: 'Data2' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { style: { 'margin-left': '4px' }, text: '-' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150', align: 'center' },
-              React.createElement(Text, { text: 'Data4' })
-            )
-          ),
-          React.createElement(
-            TableRow,
-            { className: '' + hoverCss.container },
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { text: 'Data1' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(Text, { type: 'semiBold', text: 'Data2' })
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150' },
-              React.createElement(
-                Container,
-                { alignBox: 'row' },
-                React.createElement(
-                  Box,
-                  { shrink: 'true' },
-                  React.createElement(Text, { text: 'verified' })
-                ),
-                React.createElement(
-                  Box,
-                  { shrink: 'true', style: { 'margin-left': '4px' } },
-                  React.createElement(Text, { text: ' - ' })
-                ),
-                React.createElement(
-                  Box,
-                  {
-                    className: hoverCss.opac0,
-                    style: { 'margin-left': '4px' }
-                  },
-                  React.createElement(Text, { text: ' Details', palette: 'primary' })
-                )
-              )
-            ),
-            React.createElement(
-              TableData,
-              { flexible: true, shrink: true, type: 'size150', align: 'center' },
-              React.createElement(Text, { text: 'Data4' })
-            )
-          )
-        )
-      );
-    }
-  }]);
+  out() {
+    console.log('out');
+  }
 
-  return Table__default;
-}(React.Component);
+  render() {
+    return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header3"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header4"
+    }))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, {
+      onMouseEnter: this.over,
+      onMouseLeave: this.out
+    }, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: "true"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: `Not Verified - `
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` Verify`,
+      type: "primary"
+    })))), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    }))), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        'margin-left': '4px'
+      },
+      text: "-"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    }))), /*#__PURE__*/React.createElement(TableRow, {
+      className: `${hoverCss.container}`
+    }, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: "true"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "verified"
+    })), /*#__PURE__*/React.createElement(Box, {
+      shrink: "true",
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` - `
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: hoverCss.opac0,
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` Details`,
+      palette: "primary"
+    })))), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    })))));
+  }
 
-export default Table__default;
+}
 
 if (false) {
   Table__default.docs = {

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/es/setup/table/TableHead/{TableHead.css → 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);
 }