@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.210

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -1,78 +1,83 @@
-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 LinkText from '../LinkText/LinkText';
-import InconvenienceSVG from '@zohodesk/svg/lib/svg/Inconvenience';
+import InconvenienceSVG from '@zohodesk/svg/lib/svg/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);
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
 
-export default Inconvenience;
+  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 = {
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
   description: PropTypes.string,
   onClick: PropTypes.func,
   subtitle: PropTypes.string,
@@ -80,6 +85,11 @@ Inconvenience.propTypes = {
   url: PropTypes.string,
   urlText: PropTypes.string
 };
+Inconvenience.defaultProps = {
+  dataId: 'inconvenience',
+  customClass: ''
+};
+
 if (false) {
   Inconvenience.docs = {
     componentGroup: 'errorStates'

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

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

package/es/errorstate/LinkText/LinkText.js

@@ -1,52 +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 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 = {
+  dataId: PropTypes.string,
   href: PropTypes.string,
   onClick: PropTypes.func,
-  text: PropTypes.string
+  text: PropTypes.string,
+  customClass: PropTypes.string
 };
+LinkText.defaultProps = {
+  dataId: 'LinkText',
+  customClass: ''
+};
+
 if (false) {
   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);
   cursor: pointer;
+  font-size: var(--zd_font_size15);
 }

package/es/errorstate/NoRequestFound/NoRequestFound.js

@@ -1,78 +1,83 @@
-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 commonStyle from '../EmptyStates.module.css';
 import NoRequestFoundSVG from '@zohodesk/svg/lib/svg/NoRequestFound';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import LinkText from '../LinkText/LinkText';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import style from './NoRequestFound.module.css';
-
-var NoRequestFound = function (_React$Component) {
-  _inherits(NoRequestFound, _React$Component);
-
-  function NoRequestFound() {
-    _classCallCheck(this, NoRequestFound);
-
-    return _possibleConstructorReturn(this, (NoRequestFound.__proto__ || _Object$getPrototypeOf(NoRequestFound)).apply(this, arguments));
+export default class NoRequestFound extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  _createClass(NoRequestFound, [{
-    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(NoRequestFoundSVG, { 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 NoRequestFound;
-}(React.Component);
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
 
-export default NoRequestFound;
+  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(NoRequestFoundSVG, {
+        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 : ''
+      })));
+    });
+  }
 
+}
 NoRequestFound.propTypes = {
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
   description: PropTypes.string,
   onClick: PropTypes.func,
   subtitle: PropTypes.string,
@@ -80,6 +85,11 @@ NoRequestFound.propTypes = {
   url: PropTypes.string,
   urlText: PropTypes.string
 };
+NoRequestFound.defaultProps = {
+  dataId: 'noRequestFound',
+  customClass: ''
+};
+
 if (false) {
   NoRequestFound.docs = {
     componentGroup: 'errorStates'

package/es/errorstate/NoRequestFound/NoRequestFound.module.css

@@ -1,5 +1,3 @@
 .imageContainer {
-  height: var(--zd_size400);
   margin-top: calc(var(--zd_size60) * -1);
-  margin-bottom: var(--zd_size20);
 }

package/es/errorstate/PermissionPlay/PermissionPlay.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 PropTypes from 'prop-types';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -10,77 +5,78 @@ import LinkText from '../LinkText/LinkText';
 import UnauthorizedLoginSVG from '@zohodesk/svg/lib/svg/UnauthorizedLogin';
 import commonStyle from '../EmptyStates.module.css';
 import style from './PermissionPlay.module.css';
-
-var PermissionPlay = function (_React$Component) {
-  _inherits(PermissionPlay, _React$Component);
-
-  function PermissionPlay() {
-    _classCallCheck(this, PermissionPlay);
-
-    return _possibleConstructorReturn(this, (PermissionPlay.__proto__ || _Object$getPrototypeOf(PermissionPlay)).apply(this, arguments));
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+export default class PermissionPlay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
-  _createClass(PermissionPlay, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          subtitle = _props.subtitle,
-          title = _props.title,
-          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,
-          null,
-          React.createElement(
-            'div',
-            { className: style.lastBox },
-            React.createElement(
-              'span',
-              null,
-              description
-            ),
-            React.createElement(
-              'span',
-              { className: style.lineText },
-              React.createElement(LinkText, { text: urlText, href: url, onClick: onClick })
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return PermissionPlay;
-}(React.Component);
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tablet: mediaQueryOR([{
+        minWidth: 481,
+        maxWidth: 768
+      }]),
+      uptoMobile: mediaQueryOR([{
+        maxWidth: 480
+      }])
+    };
+  }
 
-export default PermissionPlay;
+  render() {
+    let {
+      subtitle,
+      title,
+      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: uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer
+      }, /*#__PURE__*/React.createElement(UnauthorizedLoginSVG, {
+        isFluid: true,
+        dataId: `${dataId}_svg`
+      })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+        className: `${style.lastBox} ${tablet || uptoMobile ? style.max : style.min}`
+      }, /*#__PURE__*/React.createElement("span", null, description), /*#__PURE__*/React.createElement("span", {
+        className: style.lineText
+      }, /*#__PURE__*/React.createElement(LinkText, {
+        text: urlText,
+        href: url,
+        onClick: onClick,
+        dataId: `${dataId}_link`
+      })))));
+    });
+  }
 
+}
 PermissionPlay.propTypes = {
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
   description: PropTypes.string,
   onClick: PropTypes.func,
   subtitle: PropTypes.string,
@@ -88,6 +84,11 @@ PermissionPlay.propTypes = {
   url: PropTypes.string,
   urlText: PropTypes.string
 };
+PermissionPlay.defaultProps = {
+  dataId: 'permissionPlay',
+  customClass: ''
+};
+
 if (false) {
   PermissionPlay.docs = {
     componentGroup: 'errorStates'

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,22 +1,22 @@
 .headtingText {
   font-family: var(--zd_semibold);
-  font-size: var(--zd_size50);
-  letter-spacing: var(--zd_size1);
+  font-size: var(--zd_font_size50);
   margin-bottom: var(--zd_size5);
+  letter-spacing: var(--zd_size1);
 }
 .title,
 .headtingText,
 .lastBox {
-  color: var(--zd_text_dark3);
+  color: var(--zdt_permissionplay_title_text);
 }
 .title {
-  font-size: var(--zd_size30);
+  font-size: var(--zd_font_size30);
 }
 .lastBox {
-  max-width: 48%;
-  line-height: var(--zd_size24);
-  font-size: var(--zd_size14);
   margin: 0 auto;
+  line-height: var(--zd_size24);
+  font-size: var(--zd_font_size14);
+  margin-bottom: var(--zd_size20);
 }
 .lineText {
   margin: 0 var(--zd_size4);
@@ -26,8 +26,9 @@
   margin-bottom: var(--zd_size30);
 }
 
-@media only screen and (max-width: 48em) {
-  .lastBox {
-    max-width: 100%;
-  }
+.min {
+  max-width: 48%;
+}
+.max {
+  max-width: 95%;
 }