@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.232

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

package/src/list/ListLayout/ListLayout.module.css

@@ -1,30 +0,0 @@
-.container {
-  cursor: pointer;
-  padding: 0 var(--zd_size30);
-  position: relative;
-}
-.listHover:hover {
-  background: var(--dot_listItemHover);
-}
-.active,
-.active:hover {
-  background: var(--dot_listItemActive);
-}
-
-/* View */
-.classic .innerContainer {
-  padding: var(--zd_size13) 0;
-  min-height: var(--zd_size70);
-}
-.compact .innerContainer {
-  padding: var(--zd_size5) 0;
-}
-.superCompact .innerContainer {
-  padding: var(--zd_size2) 0;
-  min-height: var(--zd_size35);
-}
-.compact .innerContainer,
-.classic .innerContainer,
-.superCompact .innerContainer {
-  border-bottom: 1px dotted var(--dot_border_solitude);
-}

package/src/list/ListLayout/docs/ListLayout__default.docs.js

@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ListLayout, { Column } from '../ListLayout';
-export default class ListLayout__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  generateFooter() {
-    return (
-      <div style={{ padding: '20px' }}>Footer Area..!</div>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <h3>
-        We have to define at least 1 Column and maximum 3 column in <b>ListLayout</b> Component
-        </h3>
-        <h4>Variation1</h4>
-        <ListLayout footer={this.generateFooter}>
-          <Column>
-            <div style={{ padding: '20px' }}>Column One</div>
-          </Column>
-          <Column flexible>
-            <div style={{ padding: '20px' }}>Column Two</div>
-          </Column>
-          <Column>
-            <div style={{ padding: '20px' }}>Column Three</div>
-          </Column>
-          <Column>
-            <div style={{ padding: '20px' }}>Column Four</div>
-          </Column>
-        </ListLayout>
-        <h4>Variation2</h4>
-        <ListLayout needHover>
-          <Column flexible>
-            <div style={{ padding: '20px' }}>Column One</div>
-          </Column>
-          <Column>
-            <div style={{ padding: '20px' }}>Column Two</div>
-          </Column>
-        </ListLayout>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ListLayout__default.docs = {
-    folderName: 'List',
-    componentGroup: 'ListLayout'
-  };
-}

package/src/list/ListStencils/ListStencils.js

@@ -1,34 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import Stencils from '@zohodesk/components/lib/Stencils/Stencils';
-/*** CSS ***/
-import style from './ListStencils.module.css';
-
-export default class ListStencils extends Component {
-  render() {
-    return (
-      <div className={style.container}>
-        <div className={style.innerContainer}>
-          <div className={style.avatar}>
-            <Stencils shape='circle' size='large' />
-          </div>
-          <div className={style.innerEleContainer}>
-            <Stencils size='default' />
-            <div className={style.mt10}>
-              <Stencils size='medium' />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  ListStencils.docs = {
-    folderName: 'List',
-    componentGroup: 'ListStencils'
-  };
-}

package/src/list/ListStencils/ListStencils.module.css

@@ -1,24 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-  padding: 0 var(--zd_size30);
-}
-.innerContainer {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  padding: var(--zd_size13) 0;
-  height: var(--zd_size70);
-  border-bottom: 1px dotted var(--dot_border_solitude);
-}
-.avatar {
-  margin-right: var(--zd_size25);
-}
-
-.innerEleContainer {
-  flex-basis: 60%;
-  min-height: 0;
-  min-width: 0;
-}
-.mt10 {
-  margin-top: var(--zd_size10);
-}

package/src/list/ListStencils/docs/ListStencils__default.docs.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ListStencils from '../ListStencils';
-export default class ListStencils__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return <ListStencils />;
-  }
-}
-if (__DOCS__) {
-  ListStencils__default.docs = {
-    folderName: 'List',
-    componentGroup: 'ListStencils'
-  };
-}

package/src/list/SecondaryText/AccountName.js

@@ -1,80 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** Components ****/
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Link from '../../Link/Link';
-
-/**** CSS ****/
-import style from './SecondaryText.module.css';
-
-export default class AccountName extends Component {
-  render() {
-    let {
-      dataTitle,
-      dataId,
-      urlName,
-      urlData,
-      onClick,
-      isLink,
-      className,
-      text,
-      href,
-      notAccessible = false
-    } = this.props;
-    return (
-      <Container
-        alignBox='row'
-        align='vertical'
-        isCover={false}
-        data-title={dataTitle}
-        dataId={dataId}
-      >
-        <Box flexible>
-          {isLink ? (
-            <Link
-              href={href}
-              urlName={urlName}
-              urlData={urlData}
-              onClick={onClick}
-              className={`${style.textStyle} ${className ? className : ''}`}
-            >
-              {text}
-            </Link>
-          ) : (
-            <div
-              className={`${style.secondaryText} ${
-                className ? className : ''
-              } ${notAccessible ? style.disable : ''}`}
-            >
-              {text}
-            </div>
-          )}
-        </Box>
-      </Container>
-    );
-  }
-}
-AccountName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  notAccessible: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string
-};
-AccountName.defaultProps = {
-  isLink: true
-};
-if (__DOCS__) {
-  AccountName.docs = {
-    folderName: 'List',
-    componentGroup: 'AccountName'
-  };
-}