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

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -0,0 +1,81 @@
+.container {
+  min-height: var(--zd_size54);
+  position: relative;
+}[dir=ltr] .container {
+  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26);
+}[dir=rtl] .container {
+  padding: var(--zd_size12) var(--zd_size26) var(--zd_size12) var(--zd_size45);
+}
+
+[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);
+}
+
+[dir=ltr] .iconContainer {
+  margin: 0 var(--zd_size10) 0 0;
+}
+
+[dir=rtl] .iconContainer {
+  margin: 0 0 0 var(--zd_size10);
+}
+
+.title {
+  font-size: 0;
+}
+
+[dir=ltr] .title {
+  margin: 0 var(--zd_size5) 0 0;
+}
+
+[dir=rtl] .title {
+  margin: 0 0 0 var(--zd_size5);
+}
+
+.iconStyle {
+  display: block;
+}
+
+/* Palette */
+
+.default {
+  background-color: var(--zdt_alertheader_default_bg);
+}
+
+.primary {
+  background-color: var(--zdt_alertheader_primary_bg);
+}
+
+.danger {
+  background-color: var(--zdt_alertheader_danger_bg);
+}
+
+/* icon size */
+
+.icon_delete, .icon_alert, .icon_remoteAssist {
+  font-size: var(--zd_font_size20);
+}
+
+.icon_splitTicket {
+  font-size: var(--zd_font_size16);
+  font-weight: bold;
+}
+
+.icon_update {
+  font-size: var(--zd_font_size16);
+}
+
+.text_danger {
+  color: var(--zdt_alertheader_danger_text);
+}
+
+.text_primary {
+  color: var(--zdt_alertheader_primary_text);
+}
+
+.text_default {
+  color: var(--zdt_alertheader_default_text);
+}

package/es/alert/AlertLookup/AlertLookup.js

@@ -0,0 +1,196 @@
+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';
+/**** CSS ****/
+
+import style from './AlertLookup.module.css';
+export default class AlertLookup extends Component {
+  constructor(props) {
+    super(props);
+    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();
+    }
+  }
+
+  render() {
+    let {
+      isActive,
+      palette,
+      size,
+      type,
+      title,
+      message,
+      confirmationMessage,
+      submitText,
+      cancelText,
+      onSubmitClick,
+      onCancelClick,
+      children,
+      forwardRef,
+      onClose,
+      headerChildren,
+      wrapHeader,
+      sectionClassName,
+      dataId,
+      onLookupClick,
+      customClass,
+      needIcon,
+      iconName,
+      iconClass,
+      iconSize,
+      customProps
+    } = this.props;
+    const {
+      LookupProps = {},
+      AlertHeaderProps = {},
+      PrimaryButtonProps = {},
+      SecondaryButtonProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
+      isActive: isActive,
+      size: size,
+      dataId: dataId,
+      forwardRef: forwardRef,
+      onClick: onLookupClick,
+      customClass: customClass
+    }, LookupProps), /*#__PURE__*/React.createElement(AlertHeader, _extends({
+      title: title,
+      palette: palette,
+      iconType: type,
+      needIcon: Boolean(type) || needIcon,
+      onClose: onClose,
+      breakChildren: wrapHeader,
+      iconName: iconName,
+      iconClass: iconClass,
+      iconSize: iconSize
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null), /*#__PURE__*/React.createElement(Section, {
+      alignBox: "row",
+      className: style.section
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.innerSection} ${sectionClassName}`
+    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+      className: style.text
+    }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xsmall"
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      text: submitText,
+      dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
+      onClick: onSubmitClick,
+      palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled',
+      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.string,
+  dataId: PropTypes.string,
+  forwardRef: PropTypes.object,
+  headerChildren: PropTypes.func,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isActive: PropTypes.bool,
+  isDefaultFocus: PropTypes.bool,
+  message: PropTypes.node,
+  needIcon: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onClose: PropTypes.func,
+  onLookupClick: PropTypes.func,
+  onSubmitClick: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'danger']),
+  sectionClassName: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  submitText: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['delete', 'alert', 'remoteAssist', 'splitTicket']),
+  wrapHeader: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LookupProps: PropTypes.object,
+    AlertHeaderProps: PropTypes.object,
+    PrimaryButtonProps: PropTypes.object,
+    SecondaryButtonProps: PropTypes.object
+  }),
+  onEsc: PropTypes.oneOf(['close', 'cancel'])
+};
+AlertLookup.defaultProps = {
+  isActive: false,
+  palette: 'danger',
+  size: 'small',
+  type: 'alert',
+  wrapHeader: false,
+  sectionClassName: '',
+  dataId: 'alertPopup',
+  customClass: '',
+  isDefaultFocus: true,
+  customProps: {},
+  onEsc: 'cancel'
+};
+
+if (false) {
+  AlertLookup.docs = {
+    componentGroup: 'AlertLookup',
+    folderName: 'Alert'
+  };
+}

package/es/alert/AlertLookup/AlertLookup.module.css

@@ -0,0 +1,27 @@
+.section {
+  min-height: auto;
+}
+
+.innerSection {
+  line-height: var(--zd_size25);
+  color: var(--zdt_alertlookup_innersection_text);
+  font-size: var(--zd_font_size15);
+  word-break: break-word;
+  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
+}
+
+[dir=ltr] .buttonGap {
+  margin: 0 0 0 var(--zd_size12);
+}
+
+[dir=rtl] .buttonGap {
+  margin: 0 var(--zd_size12) 0 0;
+}
+
+.text {
+  margin-top: var(--zd_size20);
+}
+
+.extraSmall .innerSection {
+  padding: var(--zd_size30) var(--zd_size16) var(--zd_size46);
+}

package/es/avatar/AvatarClose/AvatarClose.js

@@ -0,0 +1,67 @@
+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); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './AvatarClose.module.css';
+export default class AvatarClose extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title,
+      src,
+      name,
+      size,
+      isClose,
+      onClick,
+      customProps
+    } = this.props;
+    let {
+      AvatarCloseProps = {},
+      AvatarProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: style.container
+    }, AvatarCloseProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+      src: src,
+      name: name,
+      title: title,
+      size: size
+    }, AvatarProps)), isClose && /*#__PURE__*/React.createElement("span", {
+      className: style.pop,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-plus"
+    }))));
+  }
+
+}
+AvatarClose.propTypes = {
+  isClose: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  src: PropTypes.string,
+  title: PropTypes.string,
+  customProps: PropTypes.shape({
+    AvatarCloseProps: PropTypes.object,
+    AvatarProps: PropTypes.object
+  })
+};
+AvatarClose.defaultProps = {
+  isClose: false,
+  size: 'medium',
+  customProps: {}
+};
+
+if (false) {
+  AvatarClose.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/es/avatar/AvatarClose/AvatarClose.module.css

@@ -0,0 +1,37 @@
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+}
+.pop {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  opacity: 0;
+  visibility: hidden;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  transition: opacity var(--zd_transition2);
+  color: var(--zdt_avatarclose_pop_text);
+  cursor: pointer;
+  transform: translateZ(0);
+  background-color: var(--zdt_avatarclose_pop_bg);
+}
+[dir=ltr] .pop {
+  left: 0;
+  transform: rotate(45deg);
+}
+[dir=rtl] .pop {
+  right: 0;
+  transform: rotate(-45deg);
+}
+.icon {
+  position: absolute;
+  line-height: 0;
+  font-size: var(--zd_font_size16);
+  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+}
+.container:hover .pop {
+  opacity: 1;
+  visibility: visible;
+}

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -0,0 +1,80 @@
+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); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './AvatarCollision.module.css';
+export default class AvatarCollision extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title,
+      src,
+      name,
+      size,
+      onClick,
+      needCreateChat,
+      isLeft,
+      isIdle,
+      initial,
+      customProps
+    } = this.props;
+    let {
+      AvatarCollisionProps = {},
+      AvatarProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: `${style.container} ${isLeft ? style.off : isIdle ? style.idle : style.on}`,
+      onClick: onClick,
+      "data-id": "collsionPop",
+      "data-title": title
+    }, AvatarCollisionProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+      src: src,
+      name: name,
+      size: size,
+      palette: "default",
+      needTitle: false,
+      initial: initial
+    }, AvatarProps)), needCreateChat && !isLeft && /*#__PURE__*/React.createElement("span", {
+      className: style.pop,
+      "data-title": title
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-livechat3"
+    }))));
+  }
+
+}
+AvatarCollision.propTypes = {
+  initial: PropTypes.string,
+  isIdle: PropTypes.bool,
+  isLeft: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  needCreateChat: PropTypes.bool,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  src: PropTypes.string,
+  title: PropTypes.string,
+  customProps: PropTypes.shape({
+    AvatarCollisionProps: PropTypes.object,
+    AvatarProps: PropTypes.object
+  })
+};
+AvatarCollision.defaultProps = {
+  needCreateChat: true,
+  isLeft: false,
+  isIdle: false,
+  size: 'xmedium',
+  customProps: {}
+};
+
+if (false) {
+  AvatarCollision.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/es/avatar/AvatarCollision/AvatarCollision.module.css

@@ -0,0 +1,69 @@
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  border-radius: 50%;
+  padding: var(--zd_size2);
+}
+.on {
+  border: 1px solid var(--zdt_avatarcollision_on_border);
+}
+.off {
+  border: 1px solid var(--zdt_avatarcollision_off_border);
+}
+.idle {
+  composes: on;
+  opacity: 0.4;
+}
+.pop {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  opacity: 0;
+  visibility: hidden;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  transition: opacity var(--zd_transition2);
+  color: var(--zdt_avatarcollision_pop_text);
+  cursor: pointer;
+  transform: translateZ(0);
+  background-color: var(--zdt_avatarcollision_pop_bg);
+}
+[dir=ltr] .pop {
+  left: 0;
+}
+[dir=rtl] .pop {
+  right: 0;
+}
+.icon {
+  position: absolute;
+  line-height: 0;
+  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_avatarcollision_icon_text);
+  font-size: var(--zd_font_size13);
+}
+.container:hover .pop {
+  opacity: 1;
+  visibility: visible;
+}
+
+.off::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  height: var(--zd_size4);
+  border: 1px solid var(--zdt_avatarcollision_off_after_border);
+  background-color: var(--zdt_avatarcollision_off_after_bg);
+}
+
+[dir=ltr] .off::after {
+  left: calc(var(--zd_size5) * -1);
+  right: calc(var(--zd_size5) * -1);
+  transform: translateY(-50%) rotate(130deg);
+}
+
+[dir=rtl] .off::after {
+  right: calc(var(--zd_size5) * -1);
+  left: calc(var(--zd_size5) * -1);
+  transform: translateY(-50%) rotate(-130deg);
+}

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -0,0 +1,84 @@
+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); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container } from '@zohodesk/components/lib/Layout';
+import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import style from './AvatarIcon.module.css';
+export default class AvatarIcon extends React.Component {
+  render() {
+    let {
+      name,
+      size,
+      iconSize,
+      iconClass,
+      iconColor,
+      onClick,
+      palette,
+      dataId,
+      className,
+      isIconBold,
+      title,
+      borderOnActive,
+      borderOnHover,
+      customProps
+    } = this.props;
+    let {
+      AvatarIconProps = {}
+    } = customProps;
+    let border = borderOnHover || onClick;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ${AvatarSize(size)} ${style[palette]} ${className}`,
+      onClick: onClick,
+      dataId: dataId,
+      "data-title": title,
+      isInline: true,
+      align: "both",
+      isCover: false
+    }, AvatarIconProps), /*#__PURE__*/React.createElement(Icon, {
+      name: name,
+      size: iconSize,
+      iconClass: ` ${iconClass} ${style.iconColor} ${iconColor ? ` ${style[`icon_${iconColor}`]}` : ''} `,
+      isBold: isIconBold
+    }));
+  }
+
+}
+AvatarIcon.defaultProps = {
+  iconSize: '15',
+  name: 'ZD-addAgent',
+  palette: 'default',
+  size: 'medium',
+  isIconBold: false,
+  iconClass: '',
+  className: '',
+  iconColor: 'default',
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {}
+};
+AvatarIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconColor: PropTypes.oneOf(['default', 'primary', 'success', 'danger', 'smoke18', 'grey', 'dark']),
+  iconSize: PropTypes.string,
+  isIconBold: PropTypes.bool,
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'danger']),
+  size: PropTypes.string,
+  title: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarIconProps: PropTypes.object
+  })
+};
+
+if (false) {
+  AvatarIcon.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -0,0 +1,58 @@
+.varClass {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.container {
+  vertical-align: middle;
+  composes: varClass;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+  border-color: var(--border_color)
+}
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--border_hoverColor)
+}
+.default {
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.primary {
+  --border_color: var(--zdt_avatarIcon_primary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
+}
+.secondary {
+  --border_color: var(--zdt_avatarIcon_secondary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
+}
+.success {
+  --border_color: var(--zdt_avatarIcon_success_border);
+  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
+}
+.danger {
+  --border_color: var(--zdt_avatarIcon_danger_border);
+  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
+}
+.iconColor {
+  color: var(--icon_color);
+}
+.icon_danger {
+  --icon_color: var(--zdt_avatarIcon_danger_icon);
+}
+.icon_primary {
+  --icon_color: var(--zdt_avatarIcon_primary_icon);
+}
+.icon_grey {
+  --icon_color: var(--zdt_avatarIcon_grey_icon);
+}
+.icon_success {
+  --icon_color: var(--zdt_avatarIcon_success_icon);
+}
+.icon_smoke18 {
+  --icon_color: var(--zdt_avatarIcon_smoke_icon);
+}
+.icon_dark {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+}
+