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

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,131 +0,0 @@
-.stenLoading {
-  background-color: var(--dot_bg_white);
-  border-bottom: 1px solid var(--zd_border_gallery1);
-  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) var(--zd_size40);
-}
-
-.stenLoadbody::before {
-  border: 1px solid var(--zd_border_smoke3);
-  content: '';
-  height: var(--zd_size18);
-  width: var(--zd_size18);
-  left: var(--zd_size20);
-  top: var(--zd_size20);
-  position: absolute;
-}
-
-.stenLoadbody::after {
-  content: '';
-  height: var(--zd_size22);
-  width: var(--zd_size22);
-  right: var(--zd_size20);
-  top: var(--zd_size20);
-  border-radius: 50%;
-  position: absolute;
-  background-color: var(--zd_bg_smoke4);
-}
-
-.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: 1s;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background: #f6f7f8;
-
-  background-image: linear-gradient(
-      left,
-      #f6f7f8 0,
-      #edeef1 20%,
-      #f6f7f8 40%,
-      #f6f7f8 100%
-    )
-    ;
-
-  background-repeat: no-repeat;
-  position: relative;
-}
-.stenListBAr {
-  -webkit-animation-duration: 1s;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background: #f6f7f8;
-
-  background-image: linear-gradient(
-      left,
-      #f6f7f8 0,
-      #edeef1 20%,
-      #f6f7f8 40%,
-      #f6f7f8 100%
-    )
-   ;
-
-  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);
-}
-.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,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-class AddNewComponent extends React.Component {
-  render() {
-    let {
-      features,
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
-    return (
-      <RestrictionValidator
-        module='contacts'
-        features={features}
-        action='add_tickets'
-      >
-        <span
-          onClick={onClick}
-          className={`${style.iconStyle} ${style.blueHover} ${
-            className ? className : ''
-          }`}
-          data-id={dataId}
-          data-title={dataTitle}
-        >
-          <Icon name='ZD-addNew' iconClass={iconClass} />
-        </span>
-      </RestrictionValidator>
-    );
-  }
-}
-AddNewComponent.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  features: PropTypes.array,
-  iconClass: PropTypes.string,
-  onClick: PropTypes.func
-};
-export default licensePermissionCheckHOC({
-  component: {
-    license: '*',
-    permission: 'tickets_create'
-  }
-})(AddNewComponent);

package/src/list/Icons/CompleteIcon.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-const Complete = ({ onClick, dataId, dataTitle, iconClass, className }) => (
-  <span
-    onClick={onClick}
-    className={`${style.iconStyle} ${style.blueHover} ${
-      className ? className : ''
-    }`}
-    data-id={dataId}
-    data-title={dataTitle}
-  >
-    <Icon name='ZD-tick8' iconClass={iconClass} />
-  </span>
-);
-Complete.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  features: PropTypes.array,
-  iconClass: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-const CompleteComponent = props => {
-  let { module, features = [] } = props;
-  return (
-    <RestrictionValidator module={module} features={features} action='create'>
-      <Complete {...props} />
-    </RestrictionValidator>
-  );
-};
-CompleteComponent.propTypes = {
-  features: PropTypes.array,
-  module: PropTypes.string
-};
-function CompleteIcon(module) {
-  return licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: `${module}_edit`
-    }
-  })(CompleteComponent);
-}
-
-export const TaskCompleteIcon = CompleteIcon('tasks');
-export const CallCompleteIcon = CompleteIcon('calls');
-export const EventCompleteIcon = CompleteIcon('events');

package/src/list/Icons/DeleteIcon.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-export default class DeleteComponent extends React.Component {
-  render() {
-    let {
-      module,
-      features,
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
-    return (
-      <RestrictionValidator module={module} features={features} action='delete'>
-        <span
-          onClick={onClick}
-          className={`${style.iconStyle} ${style.redHover} ${
-            className ? className : ''
-          }`}
-          data-id={dataId}
-          data-title={dataTitle}
-        >
-          <Icon name='ZD-delete2' iconClass={iconClass} />
-        </span>
-      </RestrictionValidator>
-    );
-  }
-}
-DeleteComponent.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  features: PropTypes.array,
-  iconClass: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-function DeleteIcon(module) {
-  return licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: `${module}_delete`
-    }
-  })(DeleteComponent);
-}
-
-export const TicketDeleteIcon = DeleteIcon('tickets');
-export const ContactDeleteIcon = DeleteIcon('contacts');
-export const TaskDeleteIcon = DeleteIcon('tasks');
-export const CallDeleteIcon = DeleteIcon('calls');
-export const EventDeleteIcon = DeleteIcon('events');
-export const AccountDeleteIcon = DeleteIcon('accounts');
-export const ProductDeleteIcon = DeleteIcon('products');

package/src/list/Icons/EditIcon.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import {
-  RestrictionValidator,
-  licensePermissionCheckHOC
-} from '@zohodesk/permissions';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-class EditComponent extends React.Component {
-  render() {
-    let {
-      module,
-      features = [],
-      onClick,
-      dataId,
-      dataTitle,
-      iconClass,
-      className
-    } = this.props;
-    return (
-      <RestrictionValidator module={module} features={features} action='edit'>
-        <span
-          onClick={onClick}
-          className={`${style.iconStyle} ${style.blueHover} ${
-            className ? className : ''
-          }`}
-          data-id={dataId}
-          data-title={dataTitle}
-        >
-          <Icon name='ZD-pen2' iconClass={iconClass} />
-        </span>
-      </RestrictionValidator>
-    );
-  }
-}
-EditComponent.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  features: PropTypes.array,
-  iconClass: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-function EditIcon(module) {
-  return licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: `${module}_edit`
-    }
-  })(EditComponent);
-}
-
-export const TicketEditIcon = EditIcon('tickets');
-export const ContactEditIcon = EditIcon('contacts');
-export const TaskEditIcon = EditIcon('tasks');
-export const CallEditIcon = EditIcon('calls');
-export const EventEditIcon = EditIcon('events');
-export const AccountEditIcon = EditIcon('accounts');
-export const ProductEditIcon = EditIcon('products');

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.element,
-  iconClass: PropTypes.string
-};
-FloatingIcons.defaultProps = {
-  size: 'medium'
-};
-if (__DOCS__) {
-  FloatingIcons.docs = {
-    folderName: 'List',
-    componentGroup: 'FloatingIcons'
-  };
-}

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

@@ -1,15 +0,0 @@
-.container,
-.iconStyle {
-  composes: inlineFlex from '../listCommon.module.css';
-}
-.iconStyle {
-  padding: 0 var(--zd_size9);
-  cursor: pointer;
-  color: var(--dot_text_shuttleGrey);
-}
-.blueHover:hover {
-  color: var(--dot_text_primary);
-}
-.redHover:hover {
-  color: var(--dot_text_brightRed);
-}

package/src/list/Icons/SmartIcon.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Icons.module.css';
-import { RestrictionValidator } from '@zohodesk/permissions';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-const Smart = ({ onClick, dataId, dataTitle, iconClass, className }) => (
-  <span
-    onClick={onClick}
-    className={`${style.iconStyle} ${style.blueHover} ${
-      className ? className : ''
-    }`}
-    data-id={dataId}
-    data-title={dataTitle}
-  >
-    <Icon name='ZD-smartviewIcon' iconClass={iconClass} />
-  </span>
-);
-Smart.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  features: PropTypes.array,
-  iconClass: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-const SmartIcon = props => {
-  let { module, features } = props;
-  return (
-    <RestrictionValidator module={module} features={features} action='peek'>
-      <Smart {...props} />
-    </RestrictionValidator>
-  );
-};
-SmartIcon.propTypes = {
-  features: PropTypes.array,
-  module: PropTypes.string
-};
-export default SmartIcon;

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

@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import FloatingIcons from '../FloatingIcons';
-import { I18NProvider } from '@zohodesk/i18n';
-import { TicketEditIcon } from '../EditIcon';
-import { TicketDeleteIcon } from '../DeleteIcon';
-import SmartIcon from '../SmartIcon';
-
-export default class FloatingIcons__default extends Component {
-  constructor( props ) {
-    super( props );
-  }
-
-  render() {
-    let permission = {
-      tickets: {
-        edit: true,
-        delete: true
-      }
-    };
-    return (
-      <I18NProvider permission={permission} license={{}}>
-        <FloatingIcons>
-          <TicketEditIcon />
-          <TicketDeleteIcon />
-          <SmartIcon />
-        </FloatingIcons>
-      </I18NProvider>
-    );
-  }
-}
-if ( __DOCS__ ) {
-  FloatingIcons__default.docs = {
-    folderName: 'List',
-    componentGroup: 'FloatingIcons'
-  };
-}

package/src/list/ListLayout/ListLayout.js

@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { VelocityTransitionGroup, VelocityComponent } from 'velocity-react';
-
-import style from './ListLayout.module.css';
-export default class ListLayout extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      children,
-      className,
-      needHover,
-      footer,
-      align,
-      view,
-      containerClass,
-      isActive,
-      onClick,
-      dataId
-    } = this.props;
-    return (
-      <Container
-        alignBox='column'
-        isCover={false}
-        className={`${style.container} ${containerClass} ${
-          needHover ? style.listHover : ''
-        } ${isActive ? style.active : ''} ${style[view]}`}
-        onClick={onClick}
-        dataId={dataId}
-      >
-        <VelocityComponent>
-          <Container
-            alignBox='row'
-            align={align}
-            className={`${style.innerContainer} ${className ? className : ''}`}
-          >
-            {children}
-          </Container>
-        </VelocityComponent>
-        <VelocityTransitionGroup
-          enter={{
-            animation: 'slideDown',
-            duration: 250
-          }}
-          leave={{
-            animation: 'slideUp',
-            duration: 250
-          }}
-        >
-          {footer && footer()}
-        </VelocityTransitionGroup>
-      </Container>
-    );
-  }
-}
-ListLayout.propTypes = {
-  align: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  containerClass: PropTypes.string,
-  dataId: PropTypes.string,
-  footer: PropTypes.func,
-  isActive: PropTypes.bool,
-  needHover: PropTypes.bool,
-  onClick: PropTypes.func,
-  view: PropTypes.oneOf(['classic', 'compact', 'subtablist', 'superCompact'])
-};
-ListLayout.defaultProps = {
-  needHover: true,
-  view: 'classic',
-  isActive: false,
-  dataId: 'ticketsListInPopup'
-};
-export class Column extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { children, flexible, className } = this.props;
-    return (
-      <Box
-        className={`${className ? className : ''}`}
-        flexible={flexible ? true : false}
-      >
-        {children}
-      </Box>
-    );
-  }
-}
-Column.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  flexible: PropTypes.bool
-};
-if (__DOCS__) {
-  ListLayout.docs = {
-    folderName: 'List',
-    componentGroup: 'ListLayout'
-  };
-}