@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

package/src/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/src/list/DotNew/DotNew.js

@@ -0,0 +1,29 @@
+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 (
+      <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 (__DOCS__) {
+  DotNew.docs = {
+    folderName: 'List',
+    componentGroup: 'DotNew'
+  };
+}

package/src/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_bg_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/src/list/DotNew/docs/DotNew__default.docs.js

@@ -0,0 +1,18 @@
+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 <DotNew />;
+  }
+}
+if (__DOCS__) {
+  DotNew__default.docs = {
+    folderName: 'List',
+    componentGroup: 'DotNew'
+  };
+}

package/src/list/GridStencils/GridStencils.js

@@ -0,0 +1,46 @@
+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 (
+      <div
+        className={
+          from == 'leftPanel' && isThreeLayout
+            ? `${style.stenLoading} ${style.threeLayout}`
+            : from == 'leftPanel'
+              ? `${style.stenLoading} ${style.leftCont}`
+              : style.stenLoading
+        }
+        style={styles}
+        order={order}
+      >
+        {lineBar ? (
+          <div className={style.stenLoadbody}>
+            <div className={`${style.lineBar} ${style.stenListBAr}`} />
+            <div className={`${style.lineBar2} ${style.stenListBAr}`} />
+            <div className={`${style.lineBar3} ${style.stenListBAr}`} />
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+}
+GridStencils.propTypes = {
+  from: PropTypes.string,
+  isThreeLayout: PropTypes.bool,
+  lineBar: PropTypes.string,
+  styles: PropTypes.object
+};
+
+if (__DOCS__) {
+  GridStencils.docs = {
+    folderName: 'List',
+    componentGroup: 'GridStencils'
+  };
+}

package/src/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/src/list/GridStencils/docs/GridStencils__default.docs.js

@@ -0,0 +1,30 @@
+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 (
+      <span>
+        <div className={style.w350}>
+          <GridStencils lineBar='Bar' from='leftPanel' isThreeLayout />
+          <GridStencils lineBar='Bar' />
+          <GridStencils lineBar='Bar' />
+          <GridStencils lineBar='Bar' />
+          <GridStencils lineBar='Bar' />
+        </div>
+      </span>
+    );
+  }
+}
+
+if (__DOCS__) {
+  GridStencils__default.docs = {
+    folderName: 'List',
+    componentGroup: 'GridStencils'
+  };
+}

package/src/list/Icons/AddNewIcon.js

@@ -0,0 +1,34 @@
+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,customProps } = this.props;
+    let {AddNewIconProps}=customProps
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+        {...AddNewIconProps}
+      >
+        <Icon name='ZD-SE-addTickets' iconClass={iconClass?iconClass:''} />
+      </span>
+    );
+  }
+}
+AddNewIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps:PropTypes.shape({
+    AddNewIconProps:PropTypes.object
+  })
+};

package/src/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,customProps } =
+      this.props;
+      let {CompleteIconProps}=customProps
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+        {...CompleteIconProps}
+      >
+        <Icon name='ZD-GN-checkbox' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+CompleteIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps:PropTypes.shape({
+    CompleteIcon:PropTypes.object
+  })
+};

package/src/list/Icons/DeleteIcon.js

@@ -0,0 +1,36 @@
+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,customProps } =
+      this.props;
+      let {DeleteIconProps}=customProps
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.redHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+        {...DeleteIconProps}
+      >
+        <Icon name='ZD-GN-delete' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+DeleteComponent.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps:PropTypes.shape({
+    DeleteIconProps:PropTypes.object
+  })
+};

package/src/list/Icons/EditIcon.js

@@ -0,0 +1,36 @@
+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,customProps } =
+      this.props;
+      let {EditIconProps}=customProps
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+        {...EditIconProps}
+      >
+        <Icon name='ZD-GN-edit' iconClass={iconClass?iconClass:''} size={iconSize} />
+      </span>
+    );
+  }
+}
+EditIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconSize: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps:PropTypes.shape({
+    EditIconProps:PropTypes.object
+  })
+};

package/src/list/Icons/FloatingIcons.js

@@ -0,0 +1,32 @@
+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 (
+      <span className={`${style.container}`}>
+        {icons.map(child => React.cloneElement(child, { iconClass }))}
+      </span>
+    );
+  }
+}
+FloatingIcons.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element),
+  iconClass: PropTypes.string
+};
+FloatingIcons.defaultProps = {
+  size: 'medium'
+};
+if (__DOCS__) {
+  FloatingIcons.docs = {
+    folderName: 'List',
+    componentGroup: 'FloatingIcons'
+  };
+}

package/src/list/Icons/Icons.module.css

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

package/src/list/Icons/ReadUnreadIcon.js

@@ -0,0 +1,44 @@
+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,customProps } =
+      this.props;
+      let {ReadUnreadIconProps}=customProps
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+        {...ReadUnreadIconProps}
+      >
+        <Icon
+          name={isRead ? 'ZD-GN-read' : 'ZD-GN-unread'}
+          size={iconSize}
+          iconClass={`${iconClassName?iconClassName:''} ${iconClass?iconClass:''}`}
+        />
+      </span>
+    );
+  }
+}
+
+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/src/list/Icons/SmartIcon.js

@@ -0,0 +1,37 @@
+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,customProps } = this.props;
+    let {PeekIconProps}=customProps
+    return (
+      <span
+        onClick={onClick}
+        className={`${style.iconStyle} ${style.blueHover} ${
+          className ? className : ''
+        }`}
+        data-id={dataId}
+        data-title={dataTitle}
+        {...PeekIconProps}
+      >
+        <Icon name='ZD-TK-peek' iconClass={iconClass?iconClass:''} />
+      </span>
+    );
+  }
+}
+
+SmartIcon.propTypes = {
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  features: PropTypes.array,
+  iconClass: PropTypes.string,
+  module: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps:PropTypes.shape({
+    PeekIconProps:PropTypes.object
+  })
+};

package/src/list/Icons/docs/FloatingIcons__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import FloatingIcons from '../FloatingIcons';
+import EditIcon from '../EditIcon';
+import DeleteIcon from '../DeleteIcon';
+import SmartIcon from '../SmartIcon';
+import ReadUnreadIcon from '../ReadUnreadIcon';
+
+export default class FloatingIcons__default extends Component {
+  render() {
+    return (
+      <FloatingIcons>
+        <ReadUnreadIcon isRead iconSize="15" />
+        <ReadUnreadIcon iconSize="15" />
+        <EditIcon />
+        <DeleteIcon />
+        <SmartIcon />
+      </FloatingIcons>
+    );
+  }
+}
+if (__DOCS__) {
+  FloatingIcons__default.docs = {
+    folderName: 'List',
+    componentGroup: 'FloatingIcons'
+  };
+}

package/src/list/ListLayout/ListLayout.js

@@ -0,0 +1,117 @@
+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 (
+      <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}
+      >
+        <Container
+          alignBox='row'
+          align={align}
+          className={`${style.innerContainer} ${className ? className : ''}`}
+        >
+          {children}
+        </Container>
+      </div>
+    );
+  }
+}
+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 (
+      <Box className={`${className ? className : ''}`} {...this.props}>
+        {children}
+      </Box>
+    );
+  }
+}
+Column.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+if (__DOCS__) {
+  ListLayout.docs = {
+    folderName: 'List',
+    componentGroup: 'ListLayout'
+  };
+}