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

package/src/list/SecondaryText/StatusText.js

@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './SecondaryText.module.css';
-export default class StatusText extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { className, color, text, dataTitle, isBold } = this.props;
-    return (
-      <div
-        className={`${style.statusText} ${style[color]} ${
-          isBold ? style.textBold : ''
-        } ${className ? className : ''}`}
-        data-title={dataTitle}
-        data-id='statusContainer'
-      >
-        {text}
-      </div>
-    );
-  }
-}
-StatusText.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.oneOf([
-    'default',
-    'red',
-    'green',
-    'gray',
-    'orange',
-    'black'
-  ]),
-  dataTitle: PropTypes.string,
-  isBold: PropTypes.bool,
-  text: PropTypes.string
-};
-StatusText.defaultProps = {
-  color: 'black',
-  isBold: false
-};
-if (__DOCS__) {
-  StatusText.docs = {
-    folderName: 'List',
-    componentGroup: 'StatusText'
-  };
-}

package/src/list/SecondaryText/TicketId.js

@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './SecondaryText.module.css';
-export default class TicketId extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { text, className, dataId, isLink, dataTitle, onClick } = this.props;
-    return (
-      <div
-        className={`${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${
-          className ? className : ''
-          }`}
-        data-id={dataId}
-        data-title={dataTitle}
-        onClick={onClick}
-      >
-        {text}
-      </div>
-    );
-  }
-}
-TicketId.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  isLink: PropTypes.string
-};
-TicketId.defaultProps = {
-  dataId: 'ticketId'
-};
-if (__DOCS__) {
-  TicketId.docs = {
-    folderName: 'List',
-    componentGroup: 'TicketId'
-  };
-}

package/src/list/SecondaryText/Website.js

@@ -1,58 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** Components ****/
-import ExternalLink from '../../ExternalLink/ExternalLink';
-
-/**** CSS ****/
-import style from './SecondaryText.module.css';
-
-export default class Website extends Component {
-  render() {
-    let { text, className, title, href, dataId, isLink, target } = this.props;
-    return (
-      <React.Fragment>
-        {isLink ? (
-          <ExternalLink
-            className={`${style.textStyle} ${className ? className : ''}`}
-            href={href}
-            title={title}
-            dataId={dataId}
-            target={target}
-          >
-            {text}
-          </ExternalLink>
-        ) : (
-          <div
-            className={`${style.secondaryText} ${className ? className : ''}`}
-          >
-            {text}
-          </div>
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-Website.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  target: PropTypes.string,
-  text: PropTypes.string,
-  title: PropTypes.string
-};
-
-Website.defaultProps = {
-  isLink: true
-};
-
-if (__DOCS__) {
-  Website.docs = {
-    folderName: 'List',
-    componentGroup: 'WebsiteText'
-  };
-}

package/src/list/SecondaryText/docs/ContactName__default.docs.js

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

package/src/list/SecondaryText/index.js

@@ -1,11 +0,0 @@
-export { default as ContactName } from './ContactName';
-export { default as AccountName } from './AccountName';
-export { default as TicketId } from './TicketId';
-export { default as StatusText } from './StatusText';
-export { default as DepartmentText } from './DepartmentText';
-export { default as PriorityText } from './PriorityText';
-export { default as Email } from './Email';
-export { default as PhoneNumber } from './PhoneNumber';
-export { default as Website } from './Website';
-export { default as SecondaryText } from './SecondaryText';
-export { default as HappinessRating } from './HappinessRating';

package/src/list/SecondryPanel/SecondryPanel.js

@@ -1,120 +0,0 @@
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** Components ****/
-import { ResponsiveBox, Box } from '@zohodesk/components/lib/Layout';
-import Dot from '../Dot/Dot';
-
-/**** CSS ****/
-import style from './SecondryPanel.module.css';
-
-export default class SecondryPanel extends Component {
-  render() {
-    let { children, className } = this.props;
-    return <div className={className ? className : ''}>{children}</div>;
-  }
-}
-SecondryPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-export class SecondryPanelUL extends Component {
-  render() {
-    let { children, className, dataId } = this.props;
-    return (
-      <div
-        className={`${style.listItemContainer} ${className ? className : ''}`}
-        data-id={dataId}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-SecondryPanelUL.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string
-};
-
-export class SecondryPanelLI extends Component {
-  render() {
-    let { children, className, isHiddenSizes, isShrink } = this.props;
-    return (
-      <Box
-        flexible
-        // eslint-disable-next-line react/forbid-component-props
-        className={`${className ? className : ''}`}
-        adjust
-        shrink={isShrink ? true : false}
-        isHiddenSizes={isHiddenSizes}
-      >
-        {children}
-      </Box>
-    );
-  }
-}
-SecondryPanelLI.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  isHiddenSizes: PropTypes.array,
-  isShrink: PropTypes.bool
-};
-SecondryPanelLI.defaultProps = {
-  isShrink: true
-};
-
-export class SecondryPanelItem extends Component {
-  render() {
-    let {
-      children,
-      className,
-      dotClass,
-      isDot,
-      flex,
-      clipped,
-      dotSpacingType
-    } = this.props;
-    return (
-      <div
-        className={`${clipped ? style.dottedStyle : ''} ${
-          flex ? style.panelListItemFlex : style.panelListItem
-        } ${className ? className : ''}`}
-      >
-        <Box flexible>{children}</Box>
-        {isDot ? (
-          <Box>
-            <Dot
-              // eslint-disable-next-line react/forbid-component-props
-              className={`${style.dot} ${dotClass ? dotClass : ''}`}
-              spacingType={dotSpacingType}
-            />
-          </Box>
-        ) : null}
-      </div>
-    );
-  }
-}
-SecondryPanelItem.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  clipped: PropTypes.bool,
-  dotClass: PropTypes.string,
-  dotSpacingType: PropTypes.oneOf(['minimalList', 'list']),
-  flex: PropTypes.bool,
-  isDot: PropTypes.bool
-};
-SecondryPanelItem.defaultProps = {
-  clipped: true,
-  dotSpacingType: 'list',
-  flex: true,
-  isDot: true
-};
-if (__DOCS__) {
-  SecondryPanel.docs = {
-    folderName: 'List',
-    componentGroup: 'SecondaryLayout'
-  };
-}

package/src/list/SecondryPanel/SecondryPanel.module.css

@@ -1,27 +0,0 @@
-.listItemContainer {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  align-items: baseline;
-  max-width: 100%;
-}
-.panelListItem {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItem,
-.panelListItemFlex {
-  align-items: baseline;
-  max-width: 100%;
-}
-.dottedStyle {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItemFlex {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.panelListItemBox {
-  composes: flexgrow from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexbasis from '~@zohodesk/components/lib/common/common.module.css';
-}
-.dot {
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
-}

package/src/list/SecondryPanel/docs/SecondryPanelDocs.module.css

@@ -1,41 +0,0 @@
-.layoutWrapper {
-  width: 100%;
-  margin-bottom: 20px;
-  padding: 10px;
-}
-@media only screen and (max-width: 500px) {
-  .layoutContainer {
-    flex-direction: column;
-  }
-}
-.container {
-  background: gray;
-}
-.itemId {
-  composes: flexshrink from "~@zohodesk/components/lib/common/common.module.css";
-}
-.itemInner {
-  composes: dflex from "~@zohodesk/components/lib/common/common.module.css";
-  composes: alignVertical from "~@zohodesk/components/lib/common/common.module.css";
-  padding: 5px;
-  background: #fafafa;
-  max-width: 15rem;
-  font-size: 13px;
-}
-.itemText {
-  composes: flexgrow from "~@zohodesk/components/lib/common/common.module.css";
-  composes: flexshrink from "~@zohodesk/components/lib/common/common.module.css";
-  composes: flexbasis from "~@zohodesk/components/lib/common/common.module.css";
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.itemDot {
-  display: inline-block;
-  vertical-align: middle;
-  width: 3px;
-  height: 3px;
-  background-color: red;
-  border-radius: 50%;
-  margin: 0 10px;
-}

package/src/list/SecondryPanel/docs/SecondryPanel__default.docs.js

@@ -1,66 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import SecondryPanel, {
-  SecondryPanelUL,
-  SecondryPanelLI
-} from '../SecondryPanel';
-
-import style from './SecondryPanelDocs.module.css';
-export default class SecondryPanel__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <SecondryPanel className={style.layoutWrapper}>
-        <SecondryPanelUL className={style.layoutContainer}>
-          <SecondryPanelLI>
-            <SecondryPanelUL className={style.container}>
-              <SecondryPanelLI className={`${style.itemId}`}>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>#12303456789</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-              <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>Nicole Hawkins</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-              <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>Welcome to Diffchecker</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-            </SecondryPanelUL>
-          </SecondryPanelLI>
-          <SecondryPanelLI>
-            <SecondryPanelUL className={style.container}>
-              <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>28 Jun 2019</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-              <SecondryPanelLI>
-                <span className={style.itemInner}>
-                  <span className={style.itemText}>28 May 2019 07:41 PM</span>
-                  <span className={style.itemDot} />
-                </span>
-              </SecondryPanelLI>
-            </SecondryPanelUL>
-          </SecondryPanelLI>
-        </SecondryPanelUL>
-      </SecondryPanel>
-    );
-  }
-}
-if (__DOCS__) {
-  SecondryPanel__default.docs = {
-    folderName: 'List',
-    componentGroup: 'SecondaryLayout'
-  };
-}

package/src/list/SentimentStatus/SentimentStatus.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './SentimentStatus.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-export default class SentimentStatus extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { type, dataTitle } = this.props;
-    const icons = {
-      neutral: 'ZD-botNeutral',
-      negative: 'ZD-botNegative',
-      positive: 'ZD-botPositive'
-    };
-    return (
-      <div className={style.container} data-title={dataTitle}>
-        <Icon name={icons[type]} iconClass={style.sentimentIcon} />
-      </div>
-    );
-  }
-}
-SentimentStatus.propTypes = {
-  dataTitle: PropTypes.string,
-  type: PropTypes.oneOf(['neutral', 'negative', 'positive'])
-};
-if (__DOCS__) {
-  SentimentStatus.docs = {
-    componentGroup: ''
-  };
-}

package/src/list/SentimentStatus/SentimentStatus.module.css

@@ -1,9 +0,0 @@
-.container {
-  margin: 0 0 0 var(--zd_size5);
-  vertical-align: middle;
-  font-size: var(--zd_size10);
-}
-
-.sentimentIcon {
-  display: block;
-}

package/src/list/SentimentStatus/docs/SentimentStatus__default.docs.js

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

package/src/list/StatusDropdown/StatusDropdown.js

@@ -1,174 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import BluePrintStatus from '../BluePrintStatus/BluePrintStatus';
-import { StatusText } from '../SecondaryText';
-import Icon from '@zohodesk/icons/lib/Icon';
-import style from './StatusDropdown.module.css';
-import {
-  licensePermissionCheckHOC,
-  RestrictionValidator
-} from '@zohodesk/permissions';
-import { compose } from 'redux';
-class StatusComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.onClick = this.onClick.bind(this);
-    this.onChangeStatus = this.onChangeStatus.bind(this);
-  }
-
-  onClick(e) {
-    let { isPopupOpen, onStatusPopupOpen, togglePopup } = this.props;
-    if (!isPopupOpen && onStatusPopupOpen) {
-      onStatusPopupOpen();
-    }
-    togglePopup(e);
-  }
-
-  onChangeStatus(e, status) {
-    let { onChangeStatusMapping, togglePopup } = this.props;
-    onChangeStatusMapping(status);
-    togglePopup(e);
-  }
-
-  render() {
-    let {
-      status,
-      removeClose,
-      statusMapping,
-      isReadOnly,
-      statusColor,
-      labelClass,
-      isRead,
-      bluePrintDetail,
-      disablePopup,
-      isPopupOpen,
-      isPopupReady,
-      position,
-      getTargetRef,
-      getContainerRef
-    } = this.props;
-    let disableClick = !(isReadOnly || disablePopup);
-    let isOverdue = (bluePrintDetail && bluePrintDetail.isOverdue) || false;
-    let iconText = (bluePrintDetail && bluePrintDetail.iconText) || '';
-    return (
-      <span
-        className={style.container}
-        onClick={disableClick ? this.onClick : removeClose}
-      >
-        <span
-          className={`${style.label} ${disableClick && style.pointer} ${
-            isRead ? style.read : ''
-          }`}
-          ref={getTargetRef}
-          data-id="tktStatus"
-        >
-          {bluePrintDetail && (
-            <BluePrintStatus isOverdue={isOverdue} title={iconText} />
-          )}
-          <StatusText
-            className={`${style.statusValue} ${labelClass}`}
-            color={statusColor}
-            text={status}
-            isBold={isRead}
-            dataTitle={status}
-          />
-          <span className={`${disableClick ? style.arrow : style.hiddenArrow}`}>
-            <Icon name="ZD-blockDownArrow" size="6" />
-          </span>
-        </span>
-        {isPopupOpen ? (
-          <DropBox
-            isActive={isPopupReady}
-            boxPosition={position == 'bottomCenter' ? 'bottomLeft' : 'topLeft'}
-            isAnimate
-            size="small"
-            top={8}
-            right={-27}
-            getRef={getContainerRef}
-            isArrow={false}
-          >
-            <div className={style.dropdown} data-id="StatusList">
-              {statusMapping.map((item, i) => (
-                <ListItem
-                  key={i}
-                  value={item.name}
-                  autoHover
-                  active={status == item.name ? true : false}
-                  needBorder={false}
-                  needTick
-                  onClick={this.onChangeStatus}
-                />
-              ))}
-            </div>
-          </DropBox>
-        ) : null}
-      </span>
-    );
-  }
-}
-StatusComponent.defaultProps = {
-  isReadOnly: false,
-  statusColor: 'black'
-};
-StatusComponent.propTypes = {
-  bluePrintDetail: PropTypes.object,
-  disablePopup: PropTypes.bool,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isRead: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  labelClass: PropTypes.string,
-  onChangeStatusMapping: PropTypes.func,
-  onStatusPopupOpen: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  status: PropTypes.string,
-  statusColor: PropTypes.oneOf(['default', 'black', 'red', 'orange', 'green']),
-  statusMapping: PropTypes.array,
-  togglePopup: PropTypes.func
-};
-const StatusDropDownComponent = props => {
-  let { features = [], module = 'tickets' } = props;
-  return (
-    <RestrictionValidator features={features} module={module} action="status">
-      <StatusComponent {...props} />
-    </RestrictionValidator>
-  );
-};
-StatusDropDownComponent.propTypes = {
-  dataId: PropTypes.string,
-  features: PropTypes.array,
-  module: PropTypes.string
-};
-let StatusDropDown = compose(
-  Popup,
-  licensePermissionCheckHOC({
-    component: {
-      license: '*',
-      permission: '*'
-    },
-    props: {
-      disablePopup: props => {
-        let { module = 'tickets' } = props;
-        let permission = `${module}_edit`;
-        return {
-          permission,
-          obj: false,
-          falseObj: true
-        };
-      }
-    }
-  })
-)(StatusDropDownComponent);
-export default StatusDropDown;
-if (__DOCS__) {
-  StatusDropDown.docs = {
-    folderName: 'List',
-    componentGroup: 'StatusDropDown'
-  };
-}