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

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 = '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 = {
+  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{
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+   /* 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); */
+  border-radius: 50%;
+  background-color: var(--zdt_dotnew_default_bg);
+  box-shadow: 0 0 15px 1px var(--zdt_dotnew_default_box_shadow);
+}
+@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/DotNew/docs/DotNew__default.docs.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import DotNew from '../DotNew';
+export default class DotNew__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(DotNew, null);
+  }
+
+}
+
+if (false) {
+  DotNew__default.docs = {
+    folderName: 'List',
+    componentGroup: 'DotNew'
+  };
+}

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,147 @@
+.stenLoading {
+  position: relative;
+  background-color: var(--zdt_gridstencils_default_bg);
+  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
+  padding: var(--zd_size13) var(--zd_size15) var(--zd_size11) var(--zd_size15);
+  margin-bottom: var(--zd_size10) ;
+  border-radius: var(--zd_size5);
+}
+[dir=ltr] .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
+}
+[dir=rtl] .stenLoadbody {
+  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20);
+}
+.stenLoadbody::after {
+  content: '';
+  height: var(--zd_size22);
+  width: var(--zd_size22);
+  top: var(--zd_size15);
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--zdt_gridstencils_after_bg);
+}
+[dir=ltr] .stenLoadbody::after {
+  right: var(--zd_size20);
+}
+[dir=rtl] .stenLoadbody::after {
+  left: var(--zd_size20);
+}
+.lineBar {
+  width: 90%;
+}
+.lineBar2 {
+  width: 70%;
+  margin: var(--zd_size22) 0;
+}
+.lineBar3 {
+  width: 50%;
+}
+.lineBar,
+.lineBar2,
+.lineBar3 {
+  height: var(--zd_size5);
+}
+.lineBar, .lineBar2, .lineBar3 {
+  border-radius: var(--zd_size5);
+}
+.stenListBAr {
+  position: relative;
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
+  background-repeat: no-repeat;
+}
+[dir=ltr] .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;
+}
+[dir=rtl] .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;
+}
+.stenListBAr {
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
+  background-repeat: no-repeat;
+}
+[dir=ltr] .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;
+}
+[dir=rtl] .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;
+}
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}
+.threeLayout .stenLoadbody::before {
+  transform: scale(0.8);
+}
+[dir=ltr] .threeLayout .stenLoadbody::before {
+  left: var(--zd_size16);
+}
+[dir=rtl] .threeLayout .stenLoadbody::before {
+  right: var(--zd_size16);
+}
+[dir=ltr] .threeLayout .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;
+}
+[dir=rtl] .threeLayout .stenLoadbody {
+  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20);
+}
+.threeLayout .stenLoadbody::after {
+  top: var(--zd_size15);
+  transform: scale(0.8);
+}
+[dir=ltr] .threeLayout .stenLoadbody::after {
+  right: var(--zd_size20);
+}
+[dir=rtl] .threeLayout .stenLoadbody::after {
+  left: var(--zd_size20);
+}
+[dir=ltr] .leftCont .stenLoadbody::before {
+  left: var(--zd_size33);
+}
+[dir=rtl] .leftCont .stenLoadbody::before {
+  right: var(--zd_size33);
+}
+[dir=ltr] .leftCont .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46);
+}
+[dir=rtl] .leftCont .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size46) var(--zd_size8) var(--zd_size20);
+}
+[dir=ltr] .leftCont .stenLoadbody::after {
+  right: var(--zd_size40);
+}
+[dir=rtl] .leftCont .stenLoadbody::after {
+  left: var(--zd_size40);
+}
+.leftCont .lineBar {
+  width: 80%;
+}
+.leftCont .lineBar2 {
+  width: 60%;
+}
+.leftCont .lineBar3 {
+  width: 40%;
+}

package/es/list/GridStencils/docs/GridStencils__default.docs.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import GridStencils from '../GridStencils';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class GridStencils__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+      className: style.w350
+    }, /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar",
+      from: "leftPanel",
+      isThreeLayout: true
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    }), /*#__PURE__*/React.createElement(GridStencils, {
+      lineBar: "Bar"
+    })));
+  }
+
+}
+
+if (false) {
+  GridStencils__default.docs = {
+    folderName: 'List',
+    componentGroup: 'GridStencils'
+  };
+}

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

package/es/list/Icons/DeleteIcon.js

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

package/es/list/Icons/EditIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './Icons.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class EditIcon extends React.Component {
+  render() {
+    let {
+      onClick,
+      dataId,
+      dataTitle,
+      iconClass,
+      iconSize,
+      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-GN-edit",
+      iconClass: iconClass ? iconClass : '',
+      size: iconSize
+    }));
+  }
+
+}
+EditIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func
+};

package/es/list/Icons/FloatingIcons.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import style from './Icons.module.css';
+export default class FloatingIcons extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      children = [],
+      iconClass
+    } = this.props;
+    const icons = React.Children.toArray(children).filter(o => o);
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.container}`
+    }, icons.map(child => /*#__PURE__*/React.cloneElement(child, {
+      iconClass
+    })));
+  }
+
+}
+FloatingIcons.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element),
+  iconClass: PropTypes.string
+};
+FloatingIcons.defaultProps = {
+  size: 'medium'
+};
+
+if (false) {
+  FloatingIcons.docs = {
+    folderName: 'List',
+    componentGroup: 'FloatingIcons'
+  };
+}

package/es/list/Icons/Icons.module.css

@@ -0,0 +1,16 @@
+.container,
+.iconStyle {
+  composes: inlineFlex from '../listCommon.module.css';
+}
+.iconStyle {
+  color: var(--zdt_icons_default);
+  width: var(--zd_size33);
+  padding: 0 var(--zd_size8);
+  cursor: pointer;
+}
+.blueHover:hover {
+  color: var(--zdt_icons_hover_blue);
+}
+.redHover:hover {
+  color: var(--zdt_icons_hover_red);
+}