@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp.213

package/es/list/AvatarFlip/AvatarFlip.js

@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import FlipCard from '../../FlipCard/FlipCard';
-import style from './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
-    } = 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
-    });
-  }
-
-}
-AvatarFlip.propTypes = {
-  action: PropTypes.string,
-  channel: PropTypes.string,
-  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.string,
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  frontClass: PropTypes.string,
-  icon: PropTypes.string,
-  iconSize: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  initial: PropTypes.string,
-  isChecked: PropTypes.bool,
-  isFilledCheckbox: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  isPortalUser: PropTypes.bool,
-  name: PropTypes.string,
-  needTitle: PropTypes.bool,
-  noNeedFlip: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  tourId: PropTypes.string
-};
-AvatarFlip.defaultProps = {
-  size: 'xmedium',
-  noNeedFlip: false,
-  iconSize: '21'
-};
-
-if (false) {
-  AvatarFlip.docs = {
-    folderName: 'List',
-    componentGroup: 'AvatarFlip'
-  };
-}

package/es/list/AvatarFlip/AvatarFlip.module.css

@@ -1,3 +0,0 @@
-.iconStyle {
-  color: var(--zdt_avatarflip_default_text);
-}

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './BluePrintStatus.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-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 = {
-  title: PropTypes.string
-};
-
-if (false) {
-  BluePrintStatus.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,14 +0,0 @@
-.container {
-  padding-right: var(--zd_size5);
-  display: inherit;
-}
-/* .danger {
-  color: var(--dot_brightRed);
-}
-.default {
-  color: var(--dot_shuttleGrey);
-} */
-.iconStyle {
-  display: block;
-  font-size: var(--zd_font_size10);
-}

package/es/list/Comment/Comment.js

@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { i18NProviderUtils } from '@zohodesk/i18n';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
-import style from './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
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-TK-commentLine",
-      iconClass: style.commentIcon
-    }), count && /*#__PURE__*/React.createElement("span", {
-      className: style.count
-    }, count));
-  }
-
-}
-Comment.defaultProps = {
-  className: ''
-};
-Comment.propTypes = {
-  className: PropTypes.string,
-  count: PropTypes.string,
-  features: PropTypes.array,
-  iconTitle: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-
-if (false) {
-  Comment.docs = {
-    folderName: 'List',
-    componentGroup: 'Comment'
-  };
-}

package/es/list/Comment/Comment.module.css

@@ -1,24 +0,0 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1);
-  font-size: var(--zd_font_size9);
-  text-align: center;
-  left: 100%;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13);
-}

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,129 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
-import { DepartmentText } from '../SecondaryText';
-import style from './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 = 'OOPS !',
-      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 = {
-  isEditable: true,
-  isPopupActive: true,
-  isNextOptions: false,
-  searchStr: '',
-  i18nKeys: {}
-};
-DepartmentDropDown.propTypes = {
-  dataId: PropTypes.string,
-  departmentList: PropTypes.array,
-  departmentName: PropTypes.string,
-  getDepartment: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  isEditable: PropTypes.bool,
-  isFetching: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  needSearchFetching: PropTypes.bool,
-  onMoveDepartment: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSelectLabel: PropTypes.func,
-  searchStr: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    title: PropTypes.string,
-    searchEmptyText: PropTypes.string,
-    searchErrorText: PropTypes.string,
-    placeholder: PropTypes.string
-  })
-};
-export default DepartmentDropDown;
-
-if (false) {
-  DepartmentDropDown.docs = {
-    folderName: 'List',
-    componentGroup: 'DepartmentDropDown'
-  };
-}

package/es/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,9 +0,0 @@
-.departmentBox {
-  max-width: 100%;
-}
-.departmentBox :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_text);
-}
-.departmentBox:hover :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_hover_text);
-}

package/es/list/Dot/Dot.js

@@ -1,27 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './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 = {
-  className: PropTypes.string,
-  spacingType: PropTypes.oneOf(['minimalList', 'list'])
-};
-Dot.defaultProps = {
-  spacingType: 'list',
-  className: ''
-};

package/es/list/Dot/Dot.module.css

@@ -1,15 +0,0 @@
-.varClass {
-  --dotColor: var(--zdt_dot_text)
-}
-.dot {
-  composes: varClass;
-  font-size: var(--zd_font_size16);
-  color: var(--dotColor);
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 var(--zd_size6);
-}
-.minimalList {
-  margin: 0 var(--zd_size6);
-}

package/es/list/DotNew/DotNew.js

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './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 = {
-  className: PropTypes.string,
-  dataTitle: PropTypes.string,
-  size: PropTypes.string
-};
-DotNew.defaultProps = {
-  size: 'medium'
-};
-
-if (false) {
-  DotNew.docs = {
-    folderName: 'List',
-    componentGroup: 'DotNew'
-  };
-}

package/es/list/DotNew/DotNew.module.css

@@ -1,22 +0,0 @@
-.medium {
-  width: var(--zd_size6);
-  height: var(--zd_size6);
-}
-.small{
-  width: var(--zd_size5);
-  height: var(--zd_size5);
-}
-.container{
-  border-radius: 50%;
-  background-color: var(--zdt_dotnew_default_bg);
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  box-shadow: 0 0 15px 1px var(--zdt_dotnew_default_box_shadow);
-   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
-  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
-    0 0 0 0 rgba(10, 115, 235, 0.6); */
-}
-@keyframes dotAnimation {
-  to {
-    box-shadow: 0 0 0 12px var(--zdt_dotnew_animate_box_shadow), 0 0 0 8px var(--zdt_dotnew_animate_to_box_shadow);
-  }
-}

package/es/list/GridStencils/GridStencils.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './GridStencils.module.css';
-export default class GridStencils extends React.Component {
-  render() {
-    let {
-      lineBar,
-      from,
-      isThreeLayout,
-      styles,
-      order
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: from == 'leftPanel' && isThreeLayout ? `${style.stenLoading} ${style.threeLayout}` : from == 'leftPanel' ? `${style.stenLoading} ${style.leftCont}` : style.stenLoading,
-      style: styles,
-      order: order
-    }, lineBar ? /*#__PURE__*/React.createElement("div", {
-      className: style.stenLoadbody
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar} ${style.stenListBAr}`
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar2} ${style.stenListBAr}`
-    }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.lineBar3} ${style.stenListBAr}`
-    })) : '');
-  }
-
-}
-GridStencils.propTypes = {
-  from: PropTypes.string,
-  isThreeLayout: PropTypes.bool,
-  lineBar: PropTypes.string,
-  styles: PropTypes.object
-};
-
-if (false) {
-  GridStencils.docs = {
-    folderName: 'List',
-    componentGroup: 'GridStencils'
-  };
-}

package/es/list/GridStencils/GridStencils.module.css

@@ -1,102 +0,0 @@
-.stenLoading {
-  background-color: var(--zdt_gridstencils_default_bg);
-  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
-  padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  position: relative;
-  margin-bottom: var(--zd_size10);
-}
-.stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
-}
-.stenLoadbody::after {
-  content: '';
-  height: var(--zd_size22);
-  width: var(--zd_size22);
-  right: var(--zd_size20);
-  top: var(--zd_size15);
-  border-radius: 50%;
-  position: absolute;
-  background-color: var(--zdt_gridstencils_after_bg);
-}
-
-.lineBar {
-  width: 90%;
-}
-.lineBar2 {
-  width: 70%;
-  margin: var(--zd_size22) 0;
-}
-.lineBar3 {
-  width: 50%;
-}
-.lineBar,
-.lineBar2,
-.lineBar3 {
-  height: var(--zd_size5);
-  border-radius: var(--zd_size5);
-}
-.stenListBAr {
-  -webkit-animation-duration:var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background: var(--zdt_gridstencils_listbar_bg);
-  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
-  position: relative;
-}
-.stenListBAr {
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background: var(--zdt_gridstencils_listbar_bg);
-  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
-}
-@keyframes placeHolderShimmer {
-  0% {
-    background-position: -468px 0;
-  }
-
-  100% {
-    background-position: 468px 0;
-  }
-}
-.threeLayout .stenLoadbody::before {
-  left: var(--zd_size16);
-  transform: scale(0.8);
-}
-
-.threeLayout .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
-}
-.threeLayout .stenLoadbody::after {
-  right: var(--zd_size20);
-  transform: scale(0.8);
-  top: var(--zd_size15);
-}
-
-.leftCont .stenLoadbody::before {
-  left: var(--zd_size33);
-}
-
-.leftCont .stenLoadbody {
-  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46);
-}
-
-.leftCont .stenLoadbody::after {
-  right: var(--zd_size40);
-}
-
-.leftCont .lineBar {
-  width: 80%;
-}
-.leftCont .lineBar2 {
-  width: 60%;
-}
-.leftCont .lineBar3 {
-  width: 40%;
-}

package/es/list/Icons/AddNewIcon.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import style from './Icons.module.css';
-export default class AddNewIcon extends React.Component {
-  render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-SE-addTickets",
-      iconClass: iconClass ? iconClass : ''
-    }));
-  }
-
-}
-AddNewIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
-  onClick: PropTypes.func
-};

package/es/list/Icons/CompleteIcon.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import style from './Icons.module.css';
-export default class CompleteIcon extends React.Component {
-  render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className,
-      iconSize
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      "data-id": dataId,
-      "data-title": dataTitle
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-checkbox",
-      iconClass: iconClass ? iconClass : '',
-      size: iconSize
-    }));
-  }
-
-}
-CompleteIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconSize: PropTypes.string,
-  onClick: PropTypes.func
-};