@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.215

package/es/list/AvatarFlip/AvatarFlip.js

@@ -0,0 +1,105 @@
+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

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

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,9 @@
+.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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,102 @@
+.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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,35 @@
+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
+};