@zohodesk/dot 1.2.1 → 1.2.3

package/es/v1/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -0,0 +1,217 @@
+import React, { Component } from 'react';
+import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from '../../../layout/SetupDetailLayout/props/defaultProps';
+import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from '../../../layout/SetupDetailLayout/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Icon } from '@zohodesk/icons';
+import style from '../../../layout/SetupDetailLayout/SetupDetailLayout.module.css';
+export default class SetupDetailLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isHelpInfoOpen: false
+    };
+    this.toggleHelpInfo = this.toggleHelpInfo.bind(this);
+  }
+
+  toggleHelpInfo() {
+    let {
+      isHelpInfoOpen
+    } = this.state;
+    this.setState({
+      isHelpInfoOpen: !isHelpInfoOpen
+    });
+  }
+
+  render() {
+    let {
+      isHelpInfoOpen
+    } = this.state;
+    let {
+      children,
+      needHelpInfo,
+      getHelpInfo,
+      helpInfoTitle,
+      dataId,
+      i18nKeys
+    } = this.props;
+    const {
+      closeText = 'Close'
+    } = i18nKeys;
+    return /*#__PURE__*/React.createElement(Container, {
+      isScrollAttribute: true,
+      dataId: dataId
+    }, React.Children.map(children, child => {
+      if (child && child.type == SetupHeader) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          openHelpInfo: this.toggleHelpInfo,
+          needHelpInfo: needHelpInfo
+        });
+      }
+
+      return child;
+    }), getHelpInfo ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.popup} ${isHelpInfoOpen ? style.open : style.close}`,
+      dataId: `${dataId}_infobox`
+    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.infoHeader
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.infoIcon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-info31"
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.infoText
+    }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
+      onClick: this.toggleHelpInfo,
+      className: style.infoClose,
+      "data-title": closeText,
+      "data-id": `${dataId}_close`,
+      "data-test-id": `${dataId}_close`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close"
+    }))))), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical",
+      className: style.infoFooter
+    }, getHelpInfo()))) : null);
+  }
+
+}
+SetupDetailLayout.propTypes = SetupDetailLayout_propTypes;
+SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps; // if (__DOCS__) {
+//   SetupDetailLayout.docs = {
+//     componentGroup: 'Template'
+//   };
+// }
+
+export class SetupHeader extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title,
+      needBack,
+      onBackClick,
+      openHelpInfo,
+      needHelpInfo,
+      needHelpInfoWrapper,
+      getLeftPlaceHolder,
+      getRightPlaceHolder,
+      leftClassName,
+      rightClassName,
+      isCustomizedHeader,
+      headerCustomStyle,
+      dataId,
+      i18nKeys
+    } = this.props;
+    const {
+      infoText = 'Help',
+      backText = 'Back'
+    } = i18nKeys;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: isCustomizedHeader === true ? headerCustomStyle : style.header,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.back
+    }, needBack ? /*#__PURE__*/React.createElement("span", {
+      className: style.backIcon,
+      onClick: onBackClick,
+      "data-title": backText,
+      "data-id": `${dataId}_back`,
+      "data-test-id": `${dataId}_back`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-back"
+    })) : null), /*#__PURE__*/React.createElement(Box, {
+      flexible: !getLeftPlaceHolder && !getRightPlaceHolder ? true : false,
+      className: style.title,
+      dataId: `${dataId}_title`
+    }, title), getLeftPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getRightPlaceHolder ? true : false,
+      className: leftClassName
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, getLeftPlaceHolder())) : null, getRightPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getLeftPlaceHolder ? true : false,
+      className: rightClassName
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row",
+      className: style.rightPanel
+    }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/React.createElement(Box, null, needHelpInfoWrapper ? /*#__PURE__*/React.createElement("span", {
+      className: style.helpInfoCont
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.helpInfo,
+      onClick: openHelpInfo,
+      "data-title": infoText,
+      "data-id": `${dataId}_info`,
+      "data-test-id": `${dataId}_info`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-info31"
+    }))) : /*#__PURE__*/React.createElement("span", {
+      className: `${style.helpInfo} ${style.mr15}`,
+      onClick: openHelpInfo,
+      "data-title": infoText,
+      "data-id": `${dataId}_info`,
+      "data-test-id": `${dataId}_info`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-info31"
+    }))) : null));
+  }
+
+}
+SetupHeader.propTypes = SetupHeader_propTypes;
+SetupHeader.defaultProps = SetupHeader_defaultProps;
+export class SetupContent extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      children,
+      needPadding,
+      className,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical",
+      className: `${className ? className : ''} ${style.content} ${needPadding ? style.padding : ''} `,
+      isScrollAttribute: true,
+      dataId: dataId
+    }, children);
+  }
+
+}
+SetupContent.propTypes = SetupContent_propTypes;
+SetupContent.defaultProps = SetupContent_defaultProps;
+export class SetupFooter extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      children,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Box, {
+      dataId: dataId
+    }, children);
+  }
+
+}
+SetupFooter.propTypes = SetupFooter_propTypes;
+SetupFooter.defaultProps = SetupFooter_defaultProps;

package/es/v1/layout/SetupDetailLayout/index.js

@@ -0,0 +1,4 @@
+export { default as SetupDetailLayout } from './SetupDetailLayout';
+export { SetupHeader } from './SetupDetailLayout';
+export { SetupFooter } from './SetupDetailLayout';
+export { SetupContent } from './SetupDetailLayout';

package/es/v1/layout/SubtabLayout/SubtabLayout.js

@@ -0,0 +1,144 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from '../../../layout/SubtabLayout/props/propTypes';
+import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from '../../../layout/SubtabLayout/props/defaultProps';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import PlusIcon from '../../PlusIcon/PlusIcon';
+import style from '../../../layout/SubtabLayout/SubtabLayout.module.css';
+export class SubtabHeader extends React.Component {
+  render() {
+    let {
+      onAdd,
+      getLeftPlaceHolder,
+      title,
+      label,
+      getRightPlaceHolder,
+      type,
+      leftClassName,
+      rightClassName,
+      className,
+      needBorder,
+      needShadow,
+      needPlusIconLine,
+      children,
+      dataId,
+      isPeekView
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: `${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${needBorder ? `${style[type]}_borderStyle` : ''}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      className: ` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`,
+      align: "vertical"
+    }, onAdd || children ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.left} ${needPlusIconLine ? style.plusIconLine : ''}`
+    }, onAdd ? /*#__PURE__*/React.createElement(PlusIcon, {
+      dataId: dataId,
+      onClick: onAdd
+    }) : children) : null, title ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.title} ${onAdd ? style.cursor : ''}`,
+      onClick: onAdd ? onAdd : null
+    }, title) : null, getLeftPlaceHolder && /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getRightPlaceHolder ? true : false,
+      className: leftClassName
+    }, label ? /*#__PURE__*/React.createElement("div", {
+      className: style.label
+    }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      adjust: getLeftPlaceHolder ? true : false,
+      className: rightClassName
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: style.aside
+    }, getRightPlaceHolder))));
+  }
+
+}
+SubtabHeader.propTypes = SubtabHeader_propTypes;
+SubtabHeader.defaultProps = SubtabHeader_defaultProps;
+export class SubtabFooter extends React.Component {
+  render() {
+    let {
+      isPeekView,
+      getRightFooterPlaceHolder,
+      dataId,
+      children,
+      className,
+      leftClassName,
+      rightClassName,
+      size,
+      needPadding,
+      type
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      className: ` ${style.footer}  ${needPadding ? isPeekView ? `${style[type]}_peekFooter` : `${style[type]}_detailFooter` : ''} ${style[size]} ${className}`,
+      dataId: dataId
+    }, children ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      className: leftClassName
+    }, children) : null, getRightFooterPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      className: rightClassName
+    }, getRightFooterPlaceHolder) : null);
+  }
+
+}
+SubtabFooter.propTypes = SubtabFooter_propTypes;
+SubtabFooter.defaultProps = SubtabFooter_defaultProps;
+export class SubtabContent extends React.Component {
+  render() {
+    let {
+      children,
+      scroll,
+      className,
+      eleRef,
+      dataId,
+      onScroll
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CardContent, {
+      scroll: scroll,
+      isScrollAttribute: true,
+      onScroll: onScroll,
+      customClass: className ? className : '',
+      eleRef: eleRef,
+      dataId: dataId
+    }, children);
+  }
+
+}
+SubtabContent.propTypes = SubtabContent_propTypes;
+SubtabContent.defaultProps = SubtabContent_defaultProps;
+export default class SubtabLayout extends React.Component {
+  render() {
+    let {
+      children,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Card, _extends({
+      isScrollAttribute: true,
+      dataId: dataId
+    }, this.props, {
+      childTypes: {
+        cardHeader: SubtabHeader,
+        cardContent: SubtabContent
+      }
+    }), children);
+  }
+
+}
+SubtabLayout.defaultProps = SubtabLayout_defaultProps;
+SubtabLayout.propTypes = SubtabLayout_propTypes; // if (__DOCS__) {
+//   SubtabLayout.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/v1/layout/SubtabLayout/index.js

@@ -0,0 +1,4 @@
+export { default as SubtabLayout } from './SubtabLayout';
+export { SubtabHeader } from './SubtabLayout';
+export { SubtabContent } from './SubtabLayout';
+export { SubtabFooter } from './SubtabLayout';

package/es/v1/list/AvatarFlip/AvatarFlip.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { defaultProps } from '../../../list/AvatarFlip/props/defaultProps';
+import { propTypes } from '../../../list/AvatarFlip/props/propTypes';
+import FlipCard from '../../FlipCard/FlipCard';
+import style from '../../../list/AvatarFlip/AvatarFlip.module.css';
+export default class AvatarFlip extends Component {
+  render() {
+    let {
+      id,
+      action,
+      name,
+      isChecked,
+      onChange,
+      noNeedFlip,
+      size,
+      onClick,
+      isPaidUser,
+      isPortalUser,
+      channel,
+      src,
+      icon,
+      initial,
+      dataId,
+      className,
+      palette,
+      textPalette,
+      customTextClass,
+      frontClass,
+      needTitle,
+      tourId,
+      iconSize,
+      isFilledCheckbox,
+      channelTitle,
+      customProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FlipCard, {
+      id: id,
+      action: action,
+      name: name,
+      initial: initial,
+      isChecked: isChecked,
+      onChange: onChange,
+      noNeedFlip: noNeedFlip,
+      size: size,
+      onClick: onClick,
+      isPaidUser: isPaidUser,
+      isPortalUser: isPortalUser,
+      channel: channel,
+      src: src,
+      icon: icon,
+      iconSize: iconSize,
+      iconClass: `${style.iconStyle}`,
+      dataId: dataId,
+      ticListContainer: "tic-list-filp-cont",
+      ticList: "tic-list-filp",
+      className: className,
+      palette: palette,
+      textPalette: textPalette,
+      customTextClass: customTextClass,
+      frontClass: frontClass,
+      needTitle: needTitle,
+      tourId: tourId,
+      isFilledCheckbox: isFilledCheckbox,
+      channelTitle: channelTitle,
+      customProps: customProps
+    });
+  }
+
+}
+AvatarFlip.propTypes = propTypes;
+AvatarFlip.defaultProps = defaultProps; // if (__DOCS__) {
+//   AvatarFlip.docs = {
+//     folderName: 'List',
+//     componentGroup: 'AvatarFlip'
+//   };
+// }

package/es/v1/list/BluePrintStatus/BluePrintStatus.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { propTypes } from '../../../list/BluePrintStatus/props/propTypes';
+import style from '../../../list/BluePrintStatus/BluePrintStatus.module.css';
+import { Icon } from '@zohodesk/icons';
+export default class BluePrintStatus extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.container}`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-blueprint",
+      title: title,
+      iconClass: style.iconStyle
+    }));
+  }
+
+}
+BluePrintStatus.propTypes = propTypes; // if (__DOCS__) {
+//   BluePrintStatus.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/list/Comment/Comment.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { defaultProps } from '../../../list/Comment/props/defaultProps';
+import { propTypes } from '../../../list/Comment/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import Button from '@zohodesk/components/lib/semantic/Button/Button';
+import style from '../../../list/Comment/Comment.module.css';
+export default class Comment extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      count,
+      onClick,
+      className
+    } = this.props;
+    let i18N = i18NProviderUtils.getI18NValue;
+    let commentCount = parseInt(count);
+    let commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
+    return /*#__PURE__*/React.createElement(Button, {
+      customClass: `${style.container} ${className} `,
+      onClick: onClick,
+      dataId: "commentLstContainer",
+      title: commentTitle,
+      a11y: {
+        ariaLabel: commentTitle
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-TK-commentLine",
+      iconClass: style.commentIcon
+    }), count && /*#__PURE__*/React.createElement("span", {
+      className: style.count
+    }, count));
+  }
+
+}
+Comment.defaultProps = defaultProps;
+Comment.propTypes = propTypes; // if (__DOCS__) {
+//   Comment.docs = {
+//     folderName: 'List',
+//     componentGroup: 'Comment'
+//   };
+// }

package/es/v1/list/DepartmentDropDown/DepartmentDropDown.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import { defaultProps } from '../../../list/DepartmentDropDown/props/defaultProps';
+import { propTypes } from '../../../list/DepartmentDropDown/props/propTypes';
+import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
+import { DepartmentText } from '../SecondaryText';
+import style from '../../../list/DepartmentDropDown/DepartmentDropDown.module.css';
+
+class DepartmentDropDown extends Component {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+    this.onMoveDepartment = this.onMoveDepartment.bind(this);
+  }
+
+  onClick(e) {
+    let {
+      getDepartment,
+      onSearch
+    } = this.props;
+
+    if (getDepartment) {
+      getDepartment(e);
+    }
+
+    onSearch('');
+  }
+
+  onMoveDepartment(deptId) {
+    let {
+      onSearch,
+      onMoveDepartment
+    } = this.props;
+    onSearch('');
+    onMoveDepartment(deptId);
+  }
+
+  render() {
+    let {
+      departmentName,
+      departmentList = [],
+      onSelectLabel,
+      isEditable,
+      dataId,
+      isFetching,
+      isPopupActive,
+      getNextOptions,
+      isNextOptions,
+      onSearch,
+      needSearchFetching,
+      searchStr,
+      i18nKeys
+    } = this.props;
+    let {
+      title = 'Move Department',
+      searchEmptyText = 'No results found',
+      searchErrorText = 'No results',
+      placeholder = 'Search Department'
+    } = i18nKeys;
+    return /*#__PURE__*/React.createElement(ToggleDropDown, {
+      title: title,
+      options: departmentList,
+      value: /*#__PURE__*/React.createElement(DepartmentText, {
+        text: departmentName,
+        dataTitle: departmentName
+      }),
+      keyName: "name",
+      idName: "id",
+      onClick: this.onMoveDepartment,
+      isArrow: false,
+      isEditable: isEditable,
+      onSelectLabel: onSelectLabel,
+      isPopupActive: isPopupActive,
+      needExternalPopupState: true,
+      isSearch: departmentList.length > 5 || searchStr.length !== 0,
+      boxSize: "small",
+      dataId: dataId,
+      isDataLoaded: !isFetching,
+      isPadding: false,
+      searchErrorText: searchErrorText,
+      searchEmptyHint: searchEmptyText,
+      isNeedEffect: false,
+      className: style.departmentBox,
+      placeHolderText: placeholder,
+      getNextOptions: getNextOptions,
+      isNextOptions: isNextOptions,
+      onSearch: onSearch,
+      needSearchFetching: needSearchFetching
+    });
+  }
+
+}
+
+DepartmentDropDown.defaultProps = defaultProps;
+DepartmentDropDown.propTypes = propTypes;
+export default DepartmentDropDown; // if (__DOCS__) {
+//   DepartmentDropDown.docs = {
+//     folderName: 'List',
+//     componentGroup: 'DepartmentDropDown'
+//   };
+// }

package/es/v1/list/Dot/Dot.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { defaultProps } from '../../../list/Dot/props/defaultProps';
+import { propTypes } from '../../../list/Dot/props/propTypes';
+import style from '../../../list/Dot/Dot.module.css';
+export default class Dot extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      className,
+      spacingType
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.dot} ${style[spacingType]} ${className}`
+    }, ".");
+  }
+
+}
+Dot.propTypes = propTypes;
+Dot.defaultProps = defaultProps;

package/es/v1/list/DotNew/DotNew.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { defaultProps } from '../../../list/DotNew/props/defaultProps';
+import { propTypes } from '../../../list/DotNew/props/propTypes';
+import style from '../../../list/DotNew/DotNew.module.css';
+export default class DotNew extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      className,
+      dataTitle,
+      size
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${style[size]} ${className ? className : ''}`,
+      "data-title": dataTitle
+    });
+  }
+
+}
+DotNew.propTypes = propTypes;
+DotNew.defaultProps = defaultProps; // if (__DOCS__) {
+//   DotNew.docs = {
+//     folderName: 'List',
+//     componentGroup: 'DotNew'
+//   };
+// }