@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp-63

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

@@ -1,29 +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 (
-      <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

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

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

@@ -1,46 +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 (
-      <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

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

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

@@ -1,29 +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 (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <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
-};

package/src/list/Icons/CompleteIcon.js

@@ -1,30 +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 (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <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
-};

package/src/list/Icons/DeleteIcon.js

@@ -1,31 +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 (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.redHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <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
-};

package/src/list/Icons/EditIcon.js

@@ -1,31 +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 (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <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
-};

package/src/list/Icons/FloatingIcons.js

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

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

@@ -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 (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <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

@@ -1,32 +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 (
-      <span
-        onClick={onClick}
-        className={`${style.iconStyle} ${style.blueHover} ${
-          className ? className : ''
-        }`}
-        data-id={dataId}
-        data-title={dataTitle}
-      >
-        <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
-};

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

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

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