@zohodesk/dot 1.0.0-beta.27 → 1.0.0-beta.270

package/es/errorstate/UnableToProcess/UnableToProcess.js

@@ -1,85 +1,84 @@
-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 UnableToProcessRequest from '@zohodesk/svg/lib/svg/UnableToProcessRequest';
+import UnableToProcessRequest from '@zohodesk/svg/lib/errorstate/version1/UnableToProcessRequest';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import commonStyle from '../EmptyStates.module.css';
 import style from './UnableToProcess.module.css';
-
-var UnableToProcess = function (_React$Component) {
-  _inherits(UnableToProcess, _React$Component);
-
-  function UnableToProcess() {
-    _classCallCheck(this, UnableToProcess);
-
-    return _possibleConstructorReturn(this, (UnableToProcess.__proto__ || _Object$getPrototypeOf(UnableToProcess)).apply(this, arguments));
+export default class UnableToProcess extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  _createClass(UnableToProcess, [{
-    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(UnableToProcessRequest, { isFluid: true })
-        ),
-        React.createElement(
-          Box,
-          { className: commonStyle.footer },
-          React.createElement(
-            'div',
-            { className: commonStyle.btmText },
-            description
-          ),
-          React.createElement(LinkText, { text: urlText, href: url, onClick: onClick })
-        )
-      );
-    }
-  }]);
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
 
-  return UnableToProcess;
-}(React.Component);
+  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 : commonStyle.tabletImageContainer}`
+      }, /*#__PURE__*/React.createElement(UnableToProcessRequest, {
+        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 : ''
+      })));
+    });
+  }
 
-export default UnableToProcess;
+}
+UnableToProcess.propTypes = propTypes;
+UnableToProcess.defaultProps = defaultProps;
 
-UnableToProcess.propTypes = {
-  description: PropTypes.string,
-  onClick: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-  urlText: PropTypes.string
-};
 if (false) {
   UnableToProcess.docs = {
     componentGroup: 'errorStates'

package/es/errorstate/UnableToProcess/UnableToProcess.module.css

@@ -1,18 +1,3 @@
-.heading {
-  font-size: var(--zd_size30);
-  color: var(--zd_text_primary);
-  text-shadow: 0 4px 7px var(--zd_shadow_graytrans6);
-}
-[dir=ltr] .smallText {
-  text-align: right;
-  margin-right: var(--zd_size45);
-}
-[dir=rtl] .smallText {
-  text-align: left;
-  margin-left: var(--zd_size45);
-}
 .imageContainer {
-  height: var(--zd_size330);
-  margin-top: calc(var(--zd_size40) * -1);
-  margin-bottom: var(--zd_size30);
+  margin-top: calc( var(--zd_size40) * -1 ) ;
 }

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

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

package/es/errorstate/UnableToProcess/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/UnauthorizedLogin/UnauthorizedLogin.js

@@ -1,87 +1,84 @@
-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 UnauthorizedLoginSVG from '@zohodesk/svg/lib/svg/UnauthorizedLogin';
+import UnauthorizedLoginSVG from '@zohodesk/svg/lib/errorstate/version1/UnauthorizedLogin';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import commonStyle from '../EmptyStates.module.css';
 import style from './UnauthorizedLogin.module.css';
-
-var UnauthorizedLogin = function (_React$Component) {
-  _inherits(UnauthorizedLogin, _React$Component);
-
-  function UnauthorizedLogin() {
-    _classCallCheck(this, UnauthorizedLogin);
-
-    return _possibleConstructorReturn(this, (UnauthorizedLogin.__proto__ || _Object$getPrototypeOf(UnauthorizedLogin)).apply(this, arguments));
+export default class UnauthorizedLogin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  _createClass(UnauthorizedLogin, [{
-    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(UnauthorizedLoginSVG, { 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 UnauthorizedLogin;
-}(React.Component);
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
 
-export default UnauthorizedLogin;
+  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 : commonStyle.tabletImageContainer}`
+      }, /*#__PURE__*/React.createElement(UnauthorizedLoginSVG, {
+        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 : ''
+      })));
+    });
+  }
 
-UnauthorizedLogin.propTypes = {
-  description: PropTypes.string,
-  onClick: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-  urlText: PropTypes.string
-};
-if (false) {
-  UnauthorizedLogin.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+}
+UnauthorizedLogin.propTypes = propTypes;
+UnauthorizedLogin.defaultProps = defaultProps; // if (__DOCS__) {
+//   UnauthorizedLogin.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/UnauthorizedLogin/UnauthorizedLogin.module.css

@@ -1,18 +1,3 @@
-.heading {
-  font-size: var(--zd_size30);
-  color: var(--zd_text_primary);
-  text-shadow: 0 4px 7px var(--zd_shadow_graytrans6);
-}
-[dir=ltr] .smallText {
-  text-align: right;
-  margin-right: var(--zd_size45);
-}
-[dir=rtl] .smallText {
-  text-align: left;
-  margin-left: var(--zd_size45);
-}
 .imageContainer {
-  height: var(--zd_size330);
-  margin-top: calc(var(--zd_size10) * -1);
-  margin-bottom: var(--zd_size30);
+  margin-top: calc( var(--zd_size10) * -1 ) ;
 }

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

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

package/es/errorstate/UnauthorizedLogin/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/WillBack/WillBack.js

@@ -1,79 +1,75 @@
-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 WillBeRightBack from '@zohodesk/svg/lib/svg/WillBeRightBack';
+import WillBeRightBack from '@zohodesk/svg/lib/errorstate/version1/WillBeRightBack';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import commonStyle from '../EmptyStates.module.css';
 import style from './WillBack.module.css';
-
-var WillBack = function (_React$Component) {
-  _inherits(WillBack, _React$Component);
-
-  function WillBack() {
-    _classCallCheck(this, WillBack);
-
-    return _possibleConstructorReturn(this, (WillBack.__proto__ || _Object$getPrototypeOf(WillBack)).apply(this, arguments));
+export default class WillBack extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  _createClass(WillBack, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        Container,
-        { className: '' + commonStyle.container },
-        React.createElement(
-          Box,
-          { className: commonStyle.top },
-          React.createElement(
-            'div',
-            { className: commonStyle.header + ' ' + style.header + ' ' },
-            React.createElement(
-              'div',
-              { className: style.title },
-              'We\'ll be right back !'
-            )
-          )
-        ),
-        React.createElement(
-          Box,
-          { className: style.imageContainer },
-          React.createElement(WillBeRightBack, { isFluid: true })
-        ),
-        React.createElement(
-          Box,
-          { className: commonStyle.footer },
-          React.createElement(
-            'div',
-            { className: commonStyle.btmText },
-            'Our Service is temporarity unavailable. We are currently working to restore it.'
-          ),
-          React.createElement(
-            'div',
-            { className: commonStyle.btmText + ' ' + style.bottomSpace + ' ' },
-            'Please try again later or report this issue'
-          ),
-          React.createElement(
-            'div',
-            { className: commonStyle.btmText },
-            '2013, Zoho Corp, All rights reserved.'
-          )
-        )
-      );
-    }
-  }]);
-
-  return WillBack;
-}(React.Component);
-
-export default WillBack;
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
 
+  render() {
+    let {
+      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
+      }, /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile || tablet ? '' : `${commonStyle.header} ${style.header} `
+      }, /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile ? style.mobileTitle : tablet ? style.tabletTitle : style.title
+      }, "We'll be right back !"))), /*#__PURE__*/React.createElement(Box, {
+        className: uptoMobile ? style.mobileImageContainer : tablet ? style.tabletImageContainer : style.imageContainer
+      }, /*#__PURE__*/React.createElement(WillBeRightBack, {
+        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
+      }, "Our Service is temporarity unavailable. We are currently working to restore it."), /*#__PURE__*/React.createElement("div", {
+        className: `${uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText} ${style.bottomSpace} `
+      }, "Please try again later or report this issue"), /*#__PURE__*/React.createElement("div", {
+        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      }, "2013, Zoho Corp, All rights reserved.")));
+    });
+  }
 
-if (false) {
-  WillBack.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+}
+WillBack.propTypes = propTypes;
+WillBack.defaultProps = defaultProps; // if (__DOCS__) {
+//   WillBack.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/WillBack/WillBack.module.css

@@ -1,21 +1,34 @@
-/* .heading {
-  font-size: var(--zd_size30);
-  color: var(--zd_text_primary);
-  text-shadow: 0 4px 7px var(--zd_shadow_graytrans6);
-} */
+.title,
+.tabletTitle,
+.mobileTitle {
+  color: var(--zdt_willback_title_text);
+  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+}
 .title {
-  font-size: var(--zd_size50);
-  color: var(--zd_text_dark20);
-  font-family: var(--zd_bold);
+  font-size: var(--zd_font_size50) ;
+}
+.tabletTitle {
+  font-size: var(--zd_font_size24) ;
+}
+.mobileTitle {
+  font-size: var(--zd_font_size22) ;
 }
 .header {
-  min-width: var(--zd_size450);
+  min-width: var(--zd_size450) ;
+}
+.imageContainer, .tabletImageContainer, .mobileImageContainer {
+  margin-top: calc( var(--zd_size70) * -1 ) ;
+  margin-bottom: var(--zd_size30) ;
 }
 .imageContainer {
-  height: var(--zd_size450);
-  margin-top: calc(var(--zd_size70) * -1);
-  margin-bottom: var(--zd_size30);
+  height: var(--zd_size450) ;
+}
+.mobileImageContainer {
+  height: var(--zd_size300) ;
+}
+.tabletImageContainer {
+  height: var(--zd_size350) ;
 }
 .bottomSpace {
-  margin-bottom: var(--zd_size20);
+  margin-bottom: var(--zd_size20) ;
 }

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

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

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

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

package/es/errorstate/index.js

@@ -0,0 +1,8 @@
+export { default as Inconvenience } from './Inconvenience/Inconvenience';
+export { default as LinkText } from './LinkText/LinkText';
+export { default as NoRequestFound } from './NoRequestFound/NoRequestFound';
+export { default as PermissionPlay } from './PermissionPlay/PermissionPlay';
+export { default as RequestUrlNotFound } from './RequestUrlNotFound/RequestUrlNotFound';
+export { default as UnableToProcess } from './UnableToProcess/UnableToProcess';
+export { default as UnauthorizedLogin } from './UnauthorizedLogin/UnauthorizedLogin';
+export { default as WillBack } from './WillBack/WillBack';