@zohodesk/dot 1.0.0-beta.26 → 1.0.0-beta.261

package/es/emptystate/EditionPage/EditionPage.js

@@ -1,100 +1,55 @@
-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, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import EmptyEdition from '@zohodesk/svg/lib/svg/EmptyEdition';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import EmptyCrmPotential from '@zohodesk/svg/lib/emptystate/version3/EmptyCrmPotential';
 import style from './EditionPage.css';
-
-var EditionPage = function (_Component) {
-  _inherits(EditionPage, _Component);
-
-  function EditionPage(props) {
-    _classCallCheck(this, EditionPage);
-
-    return _possibleConstructorReturn(this, (EditionPage.__proto__ || _Object$getPrototypeOf(EditionPage)).call(this, props));
+export default class EditionPage extends Component {
+  constructor(props) {
+    super(props);
   }
-
-  _createClass(EditionPage, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          title = _props.title,
-          subtitle = _props.subtitle,
-          information = _props.information,
-          dataId = _props.dataId,
-          footerText = _props.footerText,
-          onButtonClick = _props.onButtonClick,
-          butttonText = _props.butttonText,
-          children = _props.children;
-
-      return React.createElement(
-        'div',
-        { className: style.editionContainer, 'data-id': dataId },
-        React.createElement(
-          'div',
-          { className: style.svg },
-          React.createElement(EmptyEdition, null)
-        ),
-        React.createElement(
-          'div',
-          { className: style.header },
-          title
-        ),
-        subtitle ? React.createElement(
-          'div',
-          { className: style.description },
-          subtitle
-        ) : null,
-        React.createElement(
-          'div',
-          { className: style.description },
-          information ? information + ' ' : null,
-          butttonText ? React.createElement(
-            'span',
-            {
-              className: style.button,
-              'data-id': dataId + '_button',
-              onClick: onButtonClick
-            },
-            butttonText
-          ) : null
-        ),
-        children ? React.createElement(
-          'div',
-          { className: style.content },
-          children
-        ) : null,
-        footerText ? React.createElement(
-          'div',
-          { 'data-id': dataId + '_footerText', className: style.footer },
-          React.createElement('div', { dangerouslySetInnerHTML: { __html: footerText } })
-        ) : null
-      );
-    }
-  }]);
-
-  return EditionPage;
-}(Component);
-
-export default EditionPage;
-
-EditionPage.defaultProps = {
-  title: '',
-  subtitle: '',
-  dataId: 'edition'
-};
-EditionPage.propTypes = {
-  subTitle: PropTypes.string,
-  title: PropTypes.string,
-  dataId: PropTypes.string,
-  footerText: PropTypes.string
-};
-
-if (false) {
-  EditionPage.docs = {
-    componentGroup: 'EmptyState'
-  };
-}
+  render() {
+    let {
+      title,
+      subtitle,
+      information,
+      dataId,
+      footerText,
+      onButtonClick,
+      butttonText,
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.editionContainer,
+      "data-id": dataId
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.svg
+    }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
+      className: style.header
+    }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
+      className: style.description
+    }, subtitle) : null, /*#__PURE__*/React.createElement("div", {
+      className: style.description
+    }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
+      className: style.button,
+      "data-id": `${dataId}_button`,
+      onClick: onButtonClick
+    }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
+      className: style.content
+    }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
+      "data-id": `${dataId}_footerText`,
+      className: style.footer
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: footerText
+      }
+    })) : null);
+  }
+}
+EditionPage.defaultProps = defaultProps;
+EditionPage.propTypes = propTypes;
+
+// if (__DOCS__) {
+//   EditionPage.docs = {
+//     componentGroup: 'EmptyState'
+//   };
+// }

package/es/emptystate/EditionPage/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  title: '',
+  subtitle: '',
+  dataId: 'edition'
+};

package/es/emptystate/EditionPage/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  footerText: PropTypes.string,
+  subTitle: PropTypes.string,
+  title: PropTypes.string
+};

package/es/errorstate/EmptyStates.module.css

@@ -1,13 +1,18 @@
-.container {
+.container, .tabletContainer {
   text-align: center;
-  padding-top: var(--zd_size80);
-  background-color: var(--dot_bg_white);
+  background-color: var(--zdt_emptystate_default_bg);
+}
+.container {
+  padding-top: 80px;
+}
+.tabletContainer {
+  padding-top: 50px;
 }
 .top {
-  z-index: 1;
+  position: relative;
 }
 .header {
-  min-width: var(--zd_size400);
+  min-width: 400px;
   display: inline-block;
   margin: 0 auto;
 }
@@ -17,29 +22,67 @@
 [dir=rtl] .header {
   text-align: right;
 }
-
-.title {
-  font-family: var(--zd_semibold);
-  font-size: var(--zd_size50);
+.title,
+.tabletTitle,
+.mobileTitle {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
   letter-spacing: var(--zd_size1);
+}
+.title, .tabletTitle, .mobileTitle {
+  margin-bottom: 5px;
+}
+.title {
+  font-size: 50px;
   line-height: var(--zd_size70);
-  margin-bottom: var(--zd_size5);
+}
+.tabletTitle {
+  font-size: 24px;
+  line-height: var(--zd_size50);
+}
+.mobileTitle {
+  font-size: 22px;
+  line-height: var(--zd_size30);
 }
 .subtitle {
-  font-size: var(--zd_size30);
+  font-size: 30px;
+}
+.tabletSubTitle {
+  font-size: 18px;
+}
+.mobileSubTitle {
+  font-size: 16px;
 }
 .title,
 .subtitle {
-  color: var(--zd_text_dark3);
+  color: var(--zdt_emptystate_title_text);
 }
 
 .footer {
-  min-width: var(--zd_size400);
   display: inline-block;
   text-align: center;
   margin: 0 auto;
 }
+.footerWidth {
+  min-width: 400px;
+}
+.btmText, .tabletBtmText {
+  margin-bottom: 10px;
+}
 .btmText {
-  font-size: var(--zd_size14);
-  margin-bottom: var(--zd_size10);
+  font-size: 14px;
+}
+.tabletBtmText {
+  font-size: 12px;
+}
+.imageContainer, .tabletImageContainer, .mobileImageContainer {
+  margin-bottom: 30px;
+}
+.imageContainer {
+  height: 400px;
+}
+.mobileImageContainer {
+  height: 300px;
 }
+.tabletImageContainer {
+  height: 350px;
+}

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -1,85 +1,80 @@
-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 { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import LinkText from '../LinkText/LinkText';
-import InconvenienceSVG from '@zohodesk/svg/lib/svg/Inconvenience';
+import InconvenienceSVG from '@zohodesk/svg/lib/errorstate/version1/EmptyInconvenience';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import commonStyle from '../EmptyStates.module.css';
 import style from './Inconvenience.module.css';
-
-var Inconvenience = function (_React$Component) {
-  _inherits(Inconvenience, _React$Component);
-
-  function Inconvenience() {
-    _classCallCheck(this, Inconvenience);
-
-    return _possibleConstructorReturn(this, (Inconvenience.__proto__ || _Object$getPrototypeOf(Inconvenience)).apply(this, arguments));
+export default class Inconvenience extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
-
-  _createClass(Inconvenience, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          title = _props.title,
-          subtitle = _props.subtitle,
-          description = _props.description,
-          urlText = _props.urlText,
-          url = _props.url,
-          onClick = _props.onClick;
-
-      return React.createElement(
-        Container,
-        { className: '' + commonStyle.container },
-        React.createElement(
-          Box,
-          { className: commonStyle.top },
-          title ? React.createElement(
-            'div',
-            { className: commonStyle.title },
-            title
-          ) : null,
-          subtitle ? React.createElement(
-            'div',
-            { className: commonStyle.subtitle },
-            subtitle
-          ) : null
-        ),
-        React.createElement(
-          Box,
-          { className: style.imageContainer },
-          React.createElement(InconvenienceSVG, { isFluid: true })
-        ),
-        React.createElement(
-          Box,
-          { className: commonStyle.footer },
-          React.createElement(
-            'div',
-            { className: commonStyle.btmText },
-            description
-          ),
-          React.createElement(LinkText, { text: urlText, href: url, onClick: onClick })
-        )
-      );
-    }
-  }]);
-
-  return Inconvenience;
-}(React.Component);
-
-export default Inconvenience;
-
-Inconvenience.propTypes = {
-  description: PropTypes.string,
-  onClick: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-  urlText: PropTypes.string
-};
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
+  render() {
+    let {
+      title,
+      subtitle,
+      description,
+      urlText,
+      url,
+      onClick,
+      dataId,
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc
+    }, _ref2 => {
+      let {
+        tablet,
+        uptoMobile
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(Container, {
+        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
+        dataId: dataId,
+        scroll: "vertical"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: commonStyle.top
+      }, title ? /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
+        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
+      }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
+        isFluid: true,
+        dataId: `${dataId}_svg`
+      })), /*#__PURE__*/React.createElement(Box, {
+        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      }, description), /*#__PURE__*/React.createElement(LinkText, {
+        text: urlText,
+        href: url,
+        onClick: onClick,
+        dataId: `${dataId}_link`,
+        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
+      })));
+    });
+  }
+}
+Inconvenience.propTypes = propTypes;
+Inconvenience.defaultProps = defaultProps;
 if (false) {
   Inconvenience.docs = {
     componentGroup: 'errorStates'

package/es/errorstate/Inconvenience/Inconvenience.module.css

@@ -1,9 +1,7 @@
 .imageContainer {
-  height: var(--zd_size400);
-  margin-top: calc(var(--zd_size35) * -1);
-  margin-bottom: var(--zd_size20);
+  margin-top: -35px;
 }[dir=ltr] .imageContainer {
-  margin-left: calc(var(--zd_size30) * -1);
+  margin-left: -30px;
 }[dir=rtl] .imageContainer {
-  margin-right: calc(var(--zd_size30) * -1);
+  margin-right: -30px;
 }

package/es/errorstate/Inconvenience/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  dataId: 'inconvenience',
+  customClass: ''
+};

package/es/errorstate/Inconvenience/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  description: PropTypes.string,
+  onClick: PropTypes.func,
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
+  url: PropTypes.string,
+  urlText: PropTypes.string
+};

package/es/errorstate/LinkText/LinkText.js

@@ -1,54 +1,29 @@
-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 { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Link from '../../Link/Link';
 import style from './LinkText.module.css';
-
-var LinkText = function (_React$Component) {
-  _inherits(LinkText, _React$Component);
-
-  function LinkText() {
-    _classCallCheck(this, LinkText);
-
-    return _possibleConstructorReturn(this, (LinkText.__proto__ || _Object$getPrototypeOf(LinkText)).apply(this, arguments));
+export default class LinkText extends React.Component {
+  render() {
+    let {
+      text,
+      href,
+      onClick,
+      dataId,
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Link, {
+      href: href ? href : 'javascript:void(0)',
+      className: `${style.text} ${customClass} `,
+      onClick: onClick,
+      dataId: dataId
+    }, text);
   }
-
-  _createClass(LinkText, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          text = _props.text,
-          href = _props.href,
-          onClick = _props.onClick;
-
-      return React.createElement(
-        Link,
-        {
-          href: href ? href : 'javascript:void(0)',
-          className: style.text,
-          onClick: onClick
-        },
-        text
-      );
-    }
-  }]);
-
-  return LinkText;
-}(React.Component);
-
-export default LinkText;
-
-LinkText.propTypes = {
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  text: PropTypes.string
-};
-if (false) {
-  LinkText.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+}
+LinkText.propTypes = propTypes;
+LinkText.defaultProps = defaultProps;
+// if (__DOCS__) {
+//   LinkText.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/LinkText/LinkText.module.css

@@ -1,6 +1,6 @@
 .text {
-  color: var(--zd_text_primary);
+  color: var(--zdt_linktext_default_text);
   display: inline-block;
-  font-size: var(--zd_size15);
+  font-size: 15px;
   cursor: pointer;
 }

package/es/errorstate/LinkText/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  dataId: 'LinkText',
+  customClass: ''
+};

package/es/errorstate/LinkText/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  text: PropTypes.string,
+  customClass: PropTypes.string
+};