@zohodesk/dot 1.0.0-beta.211 → 1.0.0-beta.214

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);
+}

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -0,0 +1,254 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+/**** Components ****/
+
+import Lookup from '../../../lookup/Lookup/Lookup';
+import AlertHeader from '../AlertHeader/AlertHeader';
+import Button from '@zohodesk/components/lib/Button/Button';
+import Section from '../../../lookup/Section/Section';
+import FormAction from '../../../FormAction/FormAction';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+/**** CSS ****/
+
+import style from './AlertLookupNew.module.css';
+let buttonPaletteObject = {
+  success: {
+    buttonPalette: 'successFilled'
+  },
+  error: {
+    buttonPalette: 'dangerFilled'
+  },
+  danger: {
+    buttonPalette: 'dangerFilled'
+  },
+  warning: {
+    buttonPalette: 'dangerFilled'
+  },
+  info: {
+    buttonPalette: 'primaryFilled'
+  },
+  notification: {
+    buttonPalette: 'primaryFilled'
+  }
+};
+export default class AlertLookup extends Component {
+  constructor(props) {
+    super(props);
+    this.getAriaId = getUniqueId(this);
+    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
+    this.getButtonRef = this.getButtonRef.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
+
+    if (prevProps.isActive !== isActive) {
+      isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.documentKeydownHandler);
+  }
+
+  documentKeydownHandler() {
+    let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+      onSubmitClick,
+      onCancelClick,
+      isActive,
+      onEsc,
+      onClose
+    } = this.props;
+
+    if (e.keyCode === 27 && isActive) {
+      e && e.preventDefault && e.preventDefault();
+      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
+    } else if (e.keyCode === 13 && isActive) {
+      e && e.preventDefault && e.preventDefault();
+      onSubmitClick && onSubmitClick(e);
+    }
+  }
+
+  getButtonRef(el) {
+    this.okButton = el;
+    let {
+      isDefaultFocus
+    } = this.props;
+
+    if (isDefaultFocus) {
+      // el && el.focus();
+      setTimeout(() => {
+        this.okButton && this.okButton.focus && this.okButton.focus();
+      }, 100);
+    }
+  }
+
+  render() {
+    let {
+      isActive,
+      size,
+      type = 'danger',
+      title,
+      message,
+      confirmationMessage,
+      submitText,
+      cancelText,
+      onSubmitClick,
+      onCancelClick,
+      children,
+      forwardRef,
+      onClose,
+      headerChildren,
+      wrapHeader,
+      dataId,
+      onLookupClick,
+      customClass = {},
+      needIcon,
+      a11y,
+      customProps,
+      align,
+      childAnimationName,
+      isHtmlContent,
+      scroll
+    } = this.props;
+    const {
+      LookupProps = {},
+      AlertHeaderProps = {},
+      PrimaryButtonProps = {},
+      SecondaryButtonProps = {}
+    } = customProps;
+    let {
+      containerClass = '',
+      sectionClass = ''
+    } = customClass;
+    let {
+      buttonPalette = 'dangerFilled'
+    } = buttonPaletteObject[type] || {};
+    let ariaMessageId = this.getAriaId();
+    let ariaConfirmMsgId = this.getAriaId();
+    let ariaTitleId = this.getAriaId();
+    a11y = {
+      ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
+      ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
+    };
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
+      isActive: isActive,
+      size: size,
+      dataId: dataId,
+      forwardRef: forwardRef,
+      onClick: onLookupClick,
+      customClass: containerClass,
+      a11y: a11y,
+      childAnimationName: childAnimationName
+    }, LookupProps), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: align,
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Section, {
+      alignBox: "row",
+      className: style.section
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
+      htmlId: ariaTitleId,
+      title: title,
+      type: type,
+      needIcon: needIcon,
+      onClose: onClose,
+      breakChildren: wrapHeader
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
+    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
+      id: ariaMessageId,
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
+      id: ariaMessageId
+    }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+      id: ariaConfirmMsgId,
+      className: `${message ? style.confirmMsgText : ''}`
+    }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      text: submitText,
+      dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
+      onClick: onSubmitClick,
+      palette: buttonPalette,
+      getRef: this.getButtonRef
+    }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+      dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
+      text: cancelText,
+      onClick: onCancelClick,
+      palette: "secondary"
+    }, SecondaryButtonProps))))) : null))));
+  }
+
+}
+AlertLookup.propTypes = {
+  cancelText: PropTypes.string,
+  children: PropTypes.node,
+  confirmationMessage: PropTypes.string,
+  customClass: PropTypes.object,
+  dataId: PropTypes.string,
+  forwardRef: PropTypes.object,
+  headerChildren: PropTypes.func,
+  isActive: PropTypes.bool,
+  isDefaultFocus: PropTypes.bool,
+  message: PropTypes.node,
+  needIcon: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onClose: PropTypes.func,
+  onLookupClick: PropTypes.func,
+  onSubmitClick: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'xmedium', 'medium']),
+  submitText: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification']),
+  wrapHeader: PropTypes.bool,
+  alertTitleId: PropTypes.string,
+  a11y: PropTypes.object,
+  customProps: PropTypes.shape({
+    LookupProps: PropTypes.object,
+    AlertHeaderProps: PropTypes.object,
+    PrimaryButtonProps: PropTypes.object,
+    SecondaryButtonProps: PropTypes.object
+  }),
+  align: PropTypes.oneOf(['top', 'vertical']),
+  childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
+  isHtmlContent: PropTypes.bool,
+  scroll: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  onEsc: PropTypes.oneOf(['close', 'cancel'])
+};
+AlertLookup.defaultProps = {
+  isActive: false,
+  size: 'small',
+  wrapHeader: false,
+  dataId: 'alertPopup',
+  isDefaultFocus: true,
+  customProps: {},
+  align: 'top',
+  childAnimationName: 'flyDown',
+  isHtmlContent: false,
+  scroll: '',
+  onEsc: 'cancel'
+};
+
+if (false) {
+  AlertLookup.docs = {
+    componentGroup: 'AlertLookup',
+    folderName: 'Alert'
+  };
+}

package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -0,0 +1,44 @@
+.section {
+  min-height: auto;
+}
+
+.innerSection {
+  color: var(--zdt_alertlookupnew_text);
+  font-size: var(--zd_font_size14);
+  line-height: var(--zd_size18);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
+}
+
+[dir=ltr] .buttonGap {
+  margin: 0 0 0 var(--zd_size12);
+}
+
+[dir=rtl] .buttonGap {
+  margin: 0 var(--zd_size12) 0 0;
+}
+
+.confirmMsgText {
+  margin-top: var(--zd_size20);
+}
+
+.extraSmall .innerSection {
+  padding: var(--zd_size30) var(--zd_size16) var(--zd_size46);
+}
+
+.footer {
+  overflow: hidden;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+}
+.horizontalScroll, .verticalScroll, .bothScroll {
+  height: 100%;
+}
+.horizontalScroll {
+  composes: oflowx from '~@zohodesk/components/lib/common/common.module.css';
+}
+.verticalScroll {
+  composes: oflowy from '~@zohodesk/components/lib/common/common.module.css';
+}
+.bothScroll {
+  composes: oflowA from '~@zohodesk/components/lib/common/common.module.css';
+}