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

package/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/svg/ErrorOopsSomethingMiss';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+export default class OopsSomethingMiss extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorOopsSomethingMiss = this.errorOopsSomethingMiss.bind(this);
+  }
+
+  errorOopsSomethingMiss() {
+    return /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
+      className: style.errorSvg
+    });
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: `${style.container} ${style[size]}`
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: title,
+      description: description,
+      getEmptyState: this.errorOopsSomethingMiss,
+      className: `${style.errorState} ${className}`,
+      isFluid: isFluid,
+      dataId: dataId,
+      linkUrl: url,
+      linkText: urlText,
+      onUrlClick: onClick,
+      linkTarget: urlTarget,
+      customClass: {
+        titleClass: style.title,
+        descriptionClass: style.desc
+      }
+    }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+      palette: "secondary",
+      text: buttonText,
+      customClass: {
+        customButton: style.errorBtn
+      },
+      onClick: onButtonClick,
+      dataId: "goBack"
+    }) : null));
+  }
+
+}
+OopsSomethingMiss.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+OopsSomethingMiss.defaultProps = {
+  dataId: 'oopssomethingmiss',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (false) {
+  OopsSomethingMiss.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/svg/ErrorUnableToProcessRequest';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+export default class UnableToProcessRequest extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorUnableToProcess = this.errorUnableToProcess.bind(this);
+  }
+
+  errorUnableToProcess() {
+    return /*#__PURE__*/React.createElement(ErrorUnableToProcessRequest, {
+      className: style.errorSvg
+    });
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: `${style.container} ${style[size]}`
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: title,
+      description: description,
+      getEmptyState: this.errorUnableToProcess,
+      className: `${style.errorState} ${className}`,
+      isFluid: isFluid,
+      dataId: dataId,
+      linkUrl: url,
+      linkText: urlText,
+      onUrlClick: onClick,
+      linkTarget: urlTarget,
+      customClass: {
+        titleClass: style.title,
+        descriptionClass: style.desc
+      }
+    }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+      palette: "primaryFilled",
+      text: buttonText,
+      customClass: {
+        customButton: style.errorBtn
+      },
+      onClick: onButtonClick
+    }) : null));
+  }
+
+}
+UnableToProcessRequest.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+UnableToProcessRequest.defaultProps = {
+  dataId: 'unabletoprocessrequest',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (false) {
+  UnableToProcessRequest.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/version2/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorUnauthorizedLogin from '@zohodesk/svg/lib/svg/ErrorUnauthorizedLogin';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+export default class UnauthorizedLogin extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorUnauthorizedLogin = this.errorUnauthorizedLogin.bind(this);
+  }
+
+  errorUnauthorizedLogin() {
+    return /*#__PURE__*/React.createElement(ErrorUnauthorizedLogin, {
+      className: style.errorSvg
+    });
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      buttonPalette,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: `${style.container} ${style[size]}`
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: title,
+      description: description,
+      getEmptyState: this.errorUnauthorizedLogin,
+      className: `${style.errorState} ${className}`,
+      isFluid: isFluid,
+      dataId: dataId,
+      linkUrl: url,
+      linkText: urlText,
+      onUrlClick: onClick,
+      linkTarget: urlTarget,
+      customClass: {
+        titleClass: style.title,
+        descriptionClass: style.desc
+      }
+    }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+      palette: buttonPalette,
+      text: buttonText,
+      customClass: {
+        customButton: style.errorBtn
+      },
+      onClick: onButtonClick,
+      dataId: `${dataId}_button`
+    }) : null));
+  }
+
+}
+UnauthorizedLogin.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  buttonPalette: PropTypes.oneOf(['primaryFilled', 'secondary']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+UnauthorizedLogin.defaultProps = {
+  dataId: 'permissionPlay',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  buttonPalette: 'primaryFilled',
+  size: 'large'
+};
+
+if (false) {
+  UnauthorizedLogin.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/version2/errorstate/UrlNotFound/UrlNotFound.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorUrlNotFound from '@zohodesk/svg/lib/svg/ErrorUrlNotFound';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+export default class UrlNotFound extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorUrlNotFound = this.errorUrlNotFound.bind(this);
+  }
+
+  errorUrlNotFound() {
+    return /*#__PURE__*/React.createElement(ErrorUrlNotFound, {
+      className: style.errorSvg
+    });
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: `${style.container} ${style[size]}`
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: title,
+      description: description,
+      getEmptyState: this.errorUrlNotFound,
+      className: `${style.errorState} ${className}`,
+      isFluid: isFluid,
+      dataId: dataId,
+      linkUrl: url,
+      linkText: urlText,
+      onUrlClick: onClick,
+      linkTarget: urlTarget,
+      customClass: {
+        titleClass: style.title,
+        descriptionClass: style.desc
+      }
+    }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+      palette: "primaryFilled",
+      text: buttonText,
+      customClass: {
+        customButton: style.errorBtn
+      },
+      onClick: onButtonClick
+    }) : null));
+  }
+
+}
+UrlNotFound.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+UrlNotFound.defaultProps = {
+  dataId: 'urlnotfound',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (false) {
+  UrlNotFound.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/version2/errorstate/V2_ErrorStates.module.css

@@ -0,0 +1,46 @@
+.container {
+  padding-bottom: var(--zd_size30);
+}
+.errorBtn {
+  margin-top: var(--zd_size15);
+}
+.title {
+  font-family: var(--zd_bold);
+}
+.desc {
+  line-height: var(--zd_size22);
+}
+.large .errorState {
+  width: var(--zd_size450);
+  margin-top: var(--zd_size40);
+}
+.large .errorSvg {
+  width: var(--zd_size350);
+  height: var(--zd_size350);
+}
+.medium .errorState {
+  width: var(--zd_size350);
+  margin-top: var(--zd_size30);
+}
+.medium .errorSvg {
+  width: var(--zd_size250);
+  height: var(--zd_size250);
+}
+.medium .title {
+  font-size: var(--zd_font_size18);
+}
+.medium .desc,
+.small .desc {
+  font-size: var(--zd_font_size13)
+}
+.small .errorState {
+  width: var(--zd_size230);
+  margin-top: var(--zd_size20);
+}
+.small .errorSvg {
+  width: var(--zd_size220);
+  height: var(--zd_size220);
+}
+.small .title {
+  font-size: var(--zd_font_size16);
+}

package/es/version2/errorstate/WillBeRightBack/WillBeRightBack.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@zohodesk/components/lib/Layout';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ErrorWillBeRightBack from '@zohodesk/svg/lib/svg/ErrorWillBeRightBack';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from './../V2_ErrorStates.module.css';
+export default class WillBeRightBack extends React.Component {
+  constructor(props) {
+    super(props);
+    this.errorWillBeRightBack = this.errorWillBeRightBack.bind(this);
+  }
+
+  errorWillBeRightBack() {
+    return /*#__PURE__*/React.createElement(ErrorWillBeRightBack, {
+      className: style.errorSvg
+    });
+  }
+
+  render() {
+    let {
+      title,
+      description,
+      isButtonNeeded,
+      className,
+      isFluid,
+      dataId,
+      buttonText,
+      onButtonClick,
+      urlText,
+      url,
+      onClick,
+      urlTarget,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      scroll: "vertical",
+      className: `${style.container} ${style[size]}`
+    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+      title: title,
+      description: description,
+      getEmptyState: this.errorWillBeRightBack,
+      className: `${style.errorState} ${className}`,
+      isFluid: isFluid,
+      dataId: dataId,
+      linkUrl: url,
+      linkText: urlText,
+      onUrlClick: onClick,
+      linkTarget: urlTarget,
+      customClass: {
+        titleClass: style.title,
+        descriptionClass: style.desc
+      }
+    }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+      palette: "primaryFilled",
+      text: buttonText,
+      customClass: {
+        customButton: style.errorBtn
+      },
+      onClick: onButtonClick
+    }) : null));
+  }
+
+}
+WillBeRightBack.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  isButtonNeeded: PropTypes.bool,
+  className: PropTypes.string,
+  isFluid: PropTypes.bool,
+  dataId: PropTypes.string,
+  buttonText: PropTypes.string,
+  onButtonClick: PropTypes.func,
+  urlText: PropTypes.string,
+  url: PropTypes.string,
+  onClick: PropTypes.func,
+  urlTarget: PropTypes.oneOf(['_blank', '_self']),
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+WillBeRightBack.defaultProps = {
+  dataId: 'willberightback',
+  isButtonNeeded: false,
+  className: '',
+  isFluid: true,
+  urlTarget: '_self',
+  size: 'large'
+};
+
+if (false) {
+  WillBeRightBack.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/version2/lookup/AlertHeader/AlertHeader.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import AlertClose from '../../AlertClose/AlertClose';
+import AlertIcons from '../../alertIcons/AlertIcons';
+import style from './AlertHeaderNew.module.css';
+export default class AlertHeader extends Component {
+  render() {
+    let {
+      title,
+      needIcon,
+      onClose,
+      closeTitle,
+      children,
+      breakChildren,
+      dataId,
+      type,
+      htmlId
+    } = this.props;
+    let headerElement = title || children;
+    return /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row",
+      className: `${style.container} ${headerElement ? style.headerLayout : ''} ${style[type]}`,
+      isCover: false,
+      wrap: "wrap"
+    }, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, /*#__PURE__*/React.createElement(AlertIcons, {
+      type: type
+    })) : null, headerElement && /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center",
+      wrap: breakChildren ? 'wrap' : null
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.title,
+      shrink: true,
+      id: htmlId
+    }, title), children ? /*#__PURE__*/React.createElement(Box, {
+      adjust: true,
+      flexible: true
+    }, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: `${dataId}_close`,
+      type: "light"
+    })) : null);
+  }
+
+}
+AlertHeader.propTypes = {
+  breakChildren: PropTypes.bool,
+  children: PropTypes.node,
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  needIcon: PropTypes.bool,
+  onClose: PropTypes.func,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification']),
+  htmlId: PropTypes.string
+};
+AlertHeader.defaultProps = {
+  needIcon: true,
+  type: 'danger',
+  breakChildren: false,
+  dataId: 'alertHeader'
+};
+
+if (false) {
+  AlertHeader.docs = {
+    componentGroup: 'AlertHeader',
+    folderName: 'Alert'
+  };
+}

package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css

@@ -0,0 +1,87 @@
+.varClass {
+  --commonalert_border_color: var(--zdt_commonalert_default_border);
+}
+.container {
+  composes: varClass;
+  position: relative;
+  background-color: var(--zdt_alertlookup_bg);
+  border-style: solid;
+  border-color: var(--commonalert_border_color);
+  border-width: 2px 0 0 0;
+}
+.headerLayout {
+  min-height: var(--zd_size54);
+}
+[dir=ltr] .headerLayout {
+  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
+}
+[dir=rtl] .headerLayout {
+  padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
+}
+
+.success {
+  --commonalert_border_color: var(--zdt_commonalert_success_border);
+}
+
+.info,.notification {
+  --commonalert_border_color: var(--zdt_commonalert_info_border);
+}
+
+.danger {
+  --commonalert_border_color: var(--zdt_commonalert_danger_border);
+}
+
+.error {
+  --commonalert_border_color: var(--zdt_commonalert_error_border);
+}
+
+.warning {
+  --commonalert_border_color: var(--zdt_commonalert_warning_border);
+}
+
+[dir=ltr] .extraSmall {
+  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
+}
+
+[dir=rtl] .extraSmall {
+  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
+}
+
+.iconContainer {
+  height: var(--zd_size51);
+  width: var(--zd_size51);
+}
+
+.title {
+  color: var(--zdt_alertlookupnew_text);
+  font-size: var(--zd_font_size18);
+  line-height: var(--zd_size22);
+  font-family: var(--zd_bold);
+  composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+}
+
+[dir=ltr] .title {
+  margin: 0 var(--zd_size5) 0 var(--zd_size10);
+}
+
+[dir=rtl] .title {
+  margin: 0 var(--zd_size10) 0 var(--zd_size5);
+}
+
+.iconStyle {
+  display: block;
+}
+
+.close {
+  position: absolute;
+  top: var(--zd_size12);
+}
+
+[dir=ltr] .close {
+  right: var(--zd_size12);
+}
+
+[dir=rtl] .close {
+  left: var(--zd_size12);
+}