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

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

@@ -1,156 +0,0 @@
-.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_size20) var(--zd_size11);
-  margin-bottom: var(--zd_size10);
-}
-[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/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
-};

package/es/list/Icons/DeleteIcon.js

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

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

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

@@ -1,16 +0,0 @@
-.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);
-}

package/es/list/Icons/ReadUnreadIcon.js

@@ -1,42 +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 ReadUnreadIcon extends React.Component {
-  render() {
-    let {
-      onClick,
-      dataId,
-      dataTitle,
-      iconClassName,
-      iconClass,
-      className,
-      isRead,
-      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: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
-      size: iconSize,
-      iconClass: `${iconClassName ? iconClassName : ''} ${iconClass ? iconClass : ''}`
-    }));
-  }
-
-}
-ReadUnreadIcon.defaultProps = {
-  isRead: false
-};
-ReadUnreadIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  iconClassName: PropTypes.string,
-  iconClass: PropTypes.string,
-  onClick: PropTypes.func,
-  isRead: PropTypes.bool,
-  iconSize: PropTypes.string
-};

package/es/list/Icons/SmartIcon.js

@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-export default class SmartIcon extends 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-TK-peek",
-      iconClass: iconClass ? iconClass : ''
-    }));
-  }
-
-}
-SmartIcon.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  features: PropTypes.array,
-  iconClass: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};

package/es/list/ListLayout/ListLayout.js

@@ -1,117 +0,0 @@
-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, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './ListLayout.module.css';
-export default class ListLayout extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      children,
-      className,
-      needHover,
-      align,
-      view,
-      containerClass,
-      isActive,
-      onClick,
-      onMouseLeave,
-      dataId,
-      dataTitle,
-      a11y,
-      isHovered,
-      onMouseEnter,
-      needPointer,
-      isKeyboardActive
-    } = this.props;
-    let {
-      role = 'listitem',
-      ariaLabel,
-      ariaPosinset,
-      ariaSetsize
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${containerClass} ${needHover ? style.listHover : ''} ${isActive ? style.active : ''} ${style[view]} ${onClick && needPointer ? style.cursorPointer : ''} ${isHovered ? style.hoveredStyle : ''} ${isKeyboardActive ? style.keyboardActive : ''} `,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      "data-id": dataId,
-      "data-title": dataTitle,
-      tabIndex: "0",
-      role: role,
-      "aria-label": ariaLabel,
-      "aria-setsize": ariaSetsize,
-      "aria-posinset": ariaPosinset
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: align,
-      className: `${style.innerContainer} ${className ? className : ''}`
-    }, children));
-  }
-
-}
-ListLayout.propTypes = {
-  align: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  containerClass: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  isActive: PropTypes.bool,
-  needHover: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaLabel: PropTypes.string,
-    ariaPosinset: PropTypes.number,
-    ariaSetsize: PropTypes.number
-  }),
-  onMouseEnter: PropTypes.func,
-  view: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
-  needPointer: PropTypes.bool,
-  isKeyboardActive: PropTypes.bool
-};
-ListLayout.defaultProps = {
-  needHover: true,
-  view: 'classic',
-  isActive: false,
-  dataId: 'ticketsListInPopup',
-  a11y: {},
-  isHovered: false,
-  onMouseEnter: () => {},
-  needPointer: true,
-  isKeyboardActive: false
-};
-export class Column extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      children,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      className: `${className ? className : ''}`
-    }, this.props), children);
-  }
-
-}
-Column.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-if (false) {
-  ListLayout.docs = {
-    folderName: 'List',
-    componentGroup: 'ListLayout'
-  };
-}

package/es/list/ListLayout/ListLayout.module.css

@@ -1,58 +0,0 @@
-.varClass {
-  --listBorder: var(--zdt_listLayout_border)
-}
-.container {
-  position: relative;
-  composes: varClass;
-}
-.listHover:hover, .hoveredStyle{
-  background-color: var(--zdt_listLayout_hover_bg);
-}
-.active, .active:hover {
-  background-color: var(--zdt_listLayout_active_bg);
-}
-.cursorPointer{
-  cursor: pointer
-}
-/* View */
-.classic .innerContainer {
-  min-height: var(--zd_size70);
-  padding: var(--zd_size13) 0;
-}
-.compact .innerContainer {
-  min-height: var(--zd_size41);
-  padding: var(--zd_size5) 0;
-}
-.superCompact .innerContainer {
-  min-height: var(--zd_size35);
-  padding: var(--zd_size2) 0;
-}
-.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
-  border-bottom: 1px dotted var(--listBorder);
-}
-[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
-  border-left: var(--zd_size2) solid transparent;
-}
-[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  border-right: var(--zd_size2) solid transparent;
-}
-[dir=ltr] .keyboardActive, [dir=ltr] .active{
-  border-top-left-radius: var(--zd_size5);
-  border-bottom-left-radius: var(--zd_size5);
-}
-[dir=rtl] .keyboardActive, [dir=rtl] .active{
-  border-top-right-radius: var(--zd_size5);
-  border-bottom-right-radius: var(--zd_size5);
-}
-[dir=ltr] .keyboardActive{
-  border-left-color: var(--zdt_listLayout_keyboard_active_border);
-}
-[dir=rtl] .keyboardActive{
-  border-right-color: var(--zdt_listLayout_keyboard_active_border);
-}
-[dir=ltr] .active{
-  border-left-color: var(--zdt_listLayout_active_border);
-}
-[dir=rtl] .active{
-  border-right-color: var(--zdt_listLayout_active_border);
-}

package/es/list/ListStencils/ListStencils.js

@@ -1,52 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-/*** Components ***/
-
-import Stencils from '@zohodesk/components/lib/Stencils/Stencils';
-/*** CSS ***/
-
-import style from './ListStencils.module.css';
-export default class ListStencils extends Component {
-  render() {
-    let {
-      listType
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[listType]}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.innerContainer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.avatar
-    }, /*#__PURE__*/React.createElement(Stencils, {
-      shape: "circle",
-      size: listType === 'classic' ? 'large' : listType === 'compact' ? 'medium' : 'small'
-    })), /*#__PURE__*/React.createElement("div", {
-      className: style.detailsColumn
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.detailsInnerColumn}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.primaryRow
-    }, /*#__PURE__*/React.createElement(Stencils, {
-      size: "default"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: style.secondaryRow
-    }, /*#__PURE__*/React.createElement(Stencils, {
-      size: "medium"
-    }))))));
-  }
-
-}
-ListStencils.propTypes = {
-  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
-};
-ListStencils.defaultProps = {
-  listType: 'classic'
-};
-
-if (false) {
-  ListStencils.docs = {
-    folderName: 'List',
-    componentGroup: 'ListStencils'
-  };
-}