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

package/src/list/TimeInfo/TimeInfo.js

@@ -1,156 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import UserTime from '../UserTime/UserTime';
-
-import { UserTimeDiffFormat, i18NProviderUtils } from '@zohodesk/i18n';
-import { getPriorityColor } from '../../utils/Ticket';
-export default class TimeInfo extends Component {
-  constructor(props) {
-    super(props);
-    this.getTitle = this.getTitle.bind(this);
-    this.getOverDueText = this.getOverDueText.bind(this);
-  }
-
-  getTitle(time, prefix) {
-    let i18N = i18NProviderUtils.getI18NValue;
-    let i18NDate = i18NProviderUtils.userDateFormat;
-    let i18nStr = prefix;
-    let suffix = i18NDate(
-      time,
-      {},
-      'lateby',
-      'left',
-      false,
-      (obj, pattern) => 'DD MMM YYYY hh:mm A'
-    );
-    return i18N(i18nStr, suffix);
-  }
-
-  getOverDueText(dueDate) {
-    let i18N = i18NProviderUtils.getI18NValue;
-    let i18NDate = i18NProviderUtils.userDateFormat;
-    let isOverDue = false;
-    let overDueText = 'support.ticket.label.overduetime.info';
-    let dueDateText = 'support.ticket.label.duetime.info';
-    let formattedDate = i18NDate(
-      dueDate,
-      {},
-      overDueText,
-      dueDateText,
-      false,
-      ({ suffix }) => {
-        if (suffix === overDueText) {
-          isOverDue = true;
-        }
-        return 'DD MMM YYYY hh:mm A';
-      }
-    );
-    let i18nStr = isOverDue ? overDueText : dueDateText;
-    return { isOverDue, overDueText: i18N(i18nStr, formattedDate) };
-  }
-
-  render() {
-    let {
-      closedTime,
-      dueDateTime,
-      createdTime,
-      reverse,
-      priority
-    } = this.props;
-
-    let isClosedTicket = closedTime ? true : false;
-    let isDueDateTicket = dueDateTime ? true : false;
-
-    if (isClosedTicket) {
-      return (
-        <UserTime
-          to={closedTime}
-          format={({ years, days, months, hours }) => {
-            if (years == 0 && days == 0 && months == 0) {
-              return 'hh:mm A';
-            } else if (years == 0 && days < 7 && months == 0) {
-              return 'ddd DD MMM';
-            } else if (years == 0 && months > 1) {
-              return 'DD MMM';
-            }
-            return 'DD MMM YYYY';
-          }}
-          ago='ago'
-          later='late'
-          icon='closedTime'
-          title={this.getTitle(
-            closedTime,
-            'support.ticket.label.closedtime.info'
-          )}
-          dataId='closedTime'
-        />
-      );
-    } else if (isDueDateTicket) {
-      let { isOverDue, overDueText } = this.getOverDueText(
-        dueDateTime,
-        priority
-      );
-      return (
-        <UserTime
-          to={dueDateTime}
-          format={({ years, days, months, hours }) => {
-            if (years == 0 && days == 0 && months == 0) {
-              return 'hh:mm A';
-            } else if (years == 0 && days < 7 && months == 0) {
-              return 'ddd DD MMM';
-            } else if (years == 0 && months > 1) {
-              return 'DD MMM';
-            }
-            return 'DD MMM YYYY';
-          }}
-          ago='ago'
-          later='late'
-          icon={isOverDue ? 'overdue' : 'dueTime'}
-          iconColor={isOverDue ? 'red' : getPriorityColor(priority)}
-          title={overDueText}
-          dataId={isOverDue ? 'overdue' : 'dueTime'}
-        />
-      );
-    }
-    return (
-      <UserTime
-        to={createdTime}
-        format={({ years, days, months, hours }) => {
-          if (years == 0 && days == 0 && months == 0) {
-            return 'hh:mm A';
-          } else if (years == 0 && days < 7 && months == 0) {
-            return 'ddd DD MMM';
-          } else if (years == 0 && months > 1) {
-            return 'DD MMM';
-          }
-          return 'DD MMM YYYY';
-        }}
-        ago='ago'
-        later='late'
-        icon='createdTime'
-        title={this.getTitle(
-          createdTime,
-          'support.ticket.label.createdtime.info'
-        )}
-        iconColor={getPriorityColor(priority)}
-        dataId='createdTime'
-      />
-    );
-  }
-}
-TimeInfo.propTypes = {
-  closedTime: PropTypes.string,
-  createdTime: PropTypes.string,
-  dataId: PropTypes.string,
-  dueDateTime: PropTypes.string,
-  priority: PropTypes.string,
-  reverse: PropTypes.bool
-};
-TimeInfo.defaultProps = {
-  reverse: false
-};
-if (__DOCS__) {
-  TimeInfo.docs = {
-    componentGroup: 'Molecule'
-  };
-}

package/src/list/TimeInfo/docs/TimeInfo__default.docs.js

@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import TimeInfo from '../TimeInfo';
-import {I18NProvider} from '@zohodesk/i18n';
-export default class TimeInfo__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <I18NProvider timeZone='Asia/Calcutta'>
-        <div>
-          <TimeInfo closedTime='2018-03-14T06:00:00.000Z' dueDateTime='' createdTime='' /><br />
-          <TimeInfo closedTime='' dueDateTime='2018-03-14T06:00:00.000Z' createdTime='' /><br />
-          <TimeInfo closedTime='' dueDateTime='' createdTime='2018-03-14T06:00:00.000Z' /><br />
-        </div>
-      </I18NProvider>
-    );
-  }
-}
-if (__DOCS__) {
-  TimeInfo__default.docs = {
-    componentGroup: 'Molecule'
-  };
-}

package/src/list/UserTime/UserTime.js

@@ -1,130 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Box } from '@zohodesk/components/lib/Layout';
-import { UserTimeDiffFormat } from '@zohodesk/i18n';
-
-import style from './UserTime.module.css';
-export default class UserTime extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      icon,
-      iconColor,
-      to,
-      today,
-      yesterday,
-      tomorrow,
-      others,
-      ago,
-      later,
-      format,
-      title,
-      textClass,
-      iconClass,
-      containerClass,
-      dataId
-    } = this.props;
-    return (
-      <div
-        className={`${style.container} ${containerClass ? containerClass : ''}`}
-        data-title={title}
-        data-id={dataId}
-      >
-        {icon && (
-          <Box className={`${style[iconColor]}`}>
-            {icon === 'closedTime' ? (
-              <Icon
-                iconClass={`${style.iconStyle} ${style.closedTime} ${
-                  style.f8
-                  } ${iconClass ? iconClass : ''}`}
-                name='ZD-closedtime1'
-              />
-            ) : icon === 'overdue' ? (
-              <Icon
-                name='ZD-overdue'
-                iconClass={`${style.iconStyle} ${style.f8} ${
-                  iconClass ? iconClass : ''
-                  }`}
-              />
-            ) : icon === 'createdTime' ? (
-              <Icon
-                name='ZD-createdtime2'
-                iconClass={`${style.iconStyle} ${style.f8} ${
-                  iconClass ? iconClass : ''
-                  }`}
-              />
-            ) : icon === 'completedTask' ? (
-              <Icon
-                iconClass={`${style.iconStyle} ${style.f8} ${
-                  style.completedTask
-                  } ${iconClass ? iconClass : ''}`}
-                name='ZD-completedTask1'
-              />
-            ) : (
-                      <Icon
-                        name='ZD-dueTime'
-                        iconClass={`${style.iconStyle} ${style.f8} ${
-                          iconClass ? iconClass : ''
-                          }`}
-                      />
-                    )}
-          </Box>
-        )}
-        <Box flexible>
-          <UserTimeDiffFormat
-            ago={ago}
-            className={`${style.textStyle} ${textClass ? textClass : ''}`}
-            format={format}
-            later={later}
-            to={to}
-          />
-        </Box>
-      </div>
-    );
-  }
-}
-UserTime.propTypes = {
-  ago: PropTypes.string,
-  containerClass: PropTypes.string,
-  dataId: PropTypes.dtring,
-  format: PropTypes.func,
-  icon: PropTypes.oneOf([
-    'closedTime',
-    'overdue',
-    'createdTime',
-    'completedTask',
-    'dueTime'
-  ]),
-  iconClass: PropTypes.string,
-  iconColor: PropTypes.oneOf(['red', 'green', 'orange', 'gray']),
-  later: PropTypes.string,
-  others: PropTypes.func,
-  textClass: PropTypes.string,
-  title: PropTypes.string,
-  to: PropTypes.string,
-  today: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ]),
-  tomorrow: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ]),
-  yesterday: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ])
-};
-if (__DOCS__) {
-  UserTime.docs = {
-    folderName: 'List',
-    componentGroup: 'UserTime'
-  };
-}

package/src/list/UserTime/UserTime.module.css

@@ -1,42 +0,0 @@
-.container {
-  composes: inlineFlex from '../listCommon.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100%;
-}
-.f8 {
-  font-size: var(--zd_size8);
-}
-.f9 {
-  font-size: var(--zd_size9);
-}
-.closedTime span:last-child:before,
-.completedTask span:first-child:before {
-  color: inherit;
-}
-.closedTime span:first-child:before {
-  color: var(--zd_text_olive10);
-}
-.textStyle {
-  font-size: var(--zd_size11);
-  color: var(--dot_text_shuttleGrey);
-  display: block;
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.iconStyle {
-  display: block;
-  margin-right: var(--zd_size3);
-}
-/* colors */
-.red {
-  color: var(--dot_text_brightRed);
-}
-.green {
-  color: var(--dot_text_strongGreen);
-}
-.orange {
-  color: var(--dot_text_vividOrange);
-}
-.gray {
-  color: var(--dot_text_shuttleGrey);
-}

package/src/list/UserTime/docs/UserTime__default.docs.js

@@ -1,122 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import UserTime from '../UserTime';
-import { I18NProvider } from '@zohodesk/i18n';
-export default class UserTime__default extends Component {
-  constructor( props ) {
-    super( props );
-  }
-
-  render() {
-    return (
-      <I18NProvider timeZone='Asia/Calcutta'>
-        <div>
-          <div style={{ margin: '10px' }}>
-            <UserTime
-              to='2018-02-28T10:12:31.000Z'
-              icon='closedTime'
-              format={( { years, days, months, hours } ) => {
-                if ( years == 0 && days == 0 && months == 0 ) {
-                  return 'hh:mm A';
-                } else if ( years == 0 && days < 7 && months == 0 ) {
-                  return 'ddd DD MMM';
-                } else if ( years == 0 && months > 1 ) {
-                  return 'DD MMM';
-                }
-                return 'DD MMM YYYY';
-
-              }}
-              ago='ago'
-              later='late'
-            />
-          </div>
-          <div style={{ margin: '10px' }}>
-            <UserTime
-              to='2018-02-28T10:12:31.000Z'
-              icon='overdue'
-              iconColor='red'
-              format={( { years, days, months, hours } ) => {
-                if ( years == 0 && days == 0 && months == 0 ) {
-                  return 'hh:mm A';
-                } else if ( years == 0 && days < 7 && months == 0 ) {
-                  return 'ddd DD MMM';
-                } else if ( years == 0 && months > 1 ) {
-                  return 'DD MMM';
-                }
-                return 'DD MMM YYYY';
-
-              }}
-              ago='ago'
-              later='late'
-            />
-          </div>
-          <div style={{ margin: '10px' }}>
-            <UserTime
-              to='2018-02-28T10:12:31.000Z'
-              icon='createdtime'
-              iconColor='green'
-              format={( { years, days, months, hours } ) => {
-                if ( years == 0 && days == 0 && months == 0 ) {
-                  return 'hh:mm A';
-                } else if ( years == 0 && days < 7 && months == 0 ) {
-                  return 'ddd DD MMM';
-                } else if ( years == 0 && months > 1 ) {
-                  return 'DD MMM';
-                }
-                return 'DD MMM YYYY';
-
-              }}
-              ago='ago'
-              later='late'
-            />
-          </div>
-          <div style={{ margin: '10px' }}>
-            <UserTime
-              to='2018-02-28T10:12:31.000Z'
-              icon='completedTask'
-              format={( { years, days, months, hours } ) => {
-                if ( years == 0 && days == 0 && months == 0 ) {
-                  return 'hh:mm A';
-                } else if ( years == 0 && days < 7 && months == 0 ) {
-                  return 'ddd DD MMM';
-                } else if ( years == 0 && months > 1 ) {
-                  return 'DD MMM';
-                }
-                return 'DD MMM YYYY';
-
-              }}
-              ago='ago'
-              later='late'
-            />
-          </div>
-          <div style={{ margin: '10px' }}>
-            <UserTime
-              to='2018-02-28T10:12:31.000Z'
-              icon='dueTime'
-              iconColor='orange'
-              format={( { years, days, months, hours } ) => {
-                if ( years == 0 && days == 0 && months == 0 ) {
-                  return 'hh:mm A';
-                } else if ( years == 0 && days < 7 && months == 0 ) {
-                  return 'ddd DD MMM';
-                } else if ( years == 0 && months > 1 ) {
-                  return 'DD MMM';
-                }
-                return 'DD MMM YYYY';
-
-              }}
-              ago='ago'
-              later='late'
-            />
-          </div>
-        </div>
-      </I18NProvider>
-    );
-  }
-}
-if ( __DOCS__ ) {
-  UserTime__default.docs = {
-    folderName: 'List',
-    componentGroup: 'UserTime'
-  };
-}

package/src/list/listCommon.module.css

@@ -1,84 +0,0 @@
-.inlineBlockMiddle {
-  display: inline-block;
-  vertical-align: middle;
-}
-.inlineFlex {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-}
-.avatarMargin {
-  margin-right: var(--zd_size25);
-}
-
-.subject {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size16);
-}
-.secondaryText {
-  font-size: var(--zd_size12);
-  cursor: pointer;
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100%;
-}
-.blueText {
-  composes: secondaryText;
-  color: var(--zd_text_primary);
-  composes: inlineBlockMiddle;
-}
-.linkText {
-  composes: secondaryText;
-  color: var(--dot_text_shuttleGrey);
-  display: block;
-}
-.linkText:hover {
-  color: var(--zd_text_primary);
-}
-.secondaryPanel {
-  min-height: var(--zd_size21);
-  line-height: var(--zd_size18);
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  composes: flexwrap from '~@zohodesk/components/lib/common/common.module.css';
-}
-.classic .floatingIconContainer {
-  display: none;
-}
-.compact .floatingIconContainer,
-.superCompact .floatingIconContainer,
-.listContainer:hover .classic .floatingIconContainer {
-  display: inline-flex;
-  align-items: center;
-}
-.compact .floatingIconContainer,
-.superCompact .floatingIconContainer {
-  opacity: 0;
-  visibility: hidden;
-}
-.floatingIcons {
-  font-size: var(--zd_size13);
-}
-.listContainer {
-  position: relative;
-  transition: 0.5s all ease;
-}
-.listContainer:hover .compact .floatingIconContainer,
-.listContainer:hover .superCompact .floatingIconContainer {
-  opacity: 1;
-  visibility: visible;
-}
-.assignPopup {
-  composes: inlineBlockMiddle;
-}
-.default {
-  color: var(--zd_text_smoke18);
-}
-.primary {
-  color: var(--zd_text_olive6);
-}
-.danger {
-  color: var(--zd_text_danger);
-}
-.statusColumn {
-  composes: inlineBlockMiddle;
-  text-align: right;
-}

package/src/lookup/EmptyPage/EmptyPage.js

@@ -1,62 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
-import EmptyAccounts from '@zohodesk/svg/lib/svg/EmptyAccounts';
-import EmptyContact from '@zohodesk/svg/lib/svg/EmptyContact';
-import EmptyProducts from '@zohodesk/svg/lib/svg/EmptyProducts';
-/*** CSS ***/
-import style from './LookupEmptyPage.module.css';
-
-export default class EmptyPage extends Component {
-  constructor(props) {
-    super(props);
-    this.renderEmptyState = this.renderEmptyState.bind();
-  }
-
-  renderEmptyState(type) {
-    switch (type) {
-      case 'search':
-        return <EmptySearch className={style.image} />;
-
-      case 'account':
-        return <EmptyAccounts className={style.image} />;
-
-      case 'contact':
-        return <EmptyContact className={style.image} />;
-
-      case 'product':
-        return <EmptyProducts className={style.image} />;
-
-      default:
-        return null;
-    }
-  }
-
-  render() {
-    let { type, title } = this.props;
-    return (
-      <div className={style.container} data-id={`empty_${type}`}>
-        {this.renderEmptyState(type)}
-        <div className={style.contentDiv}>{title}</div>
-      </div>
-    );
-  }
-}
-
-EmptyPage.propTypes = {
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['search', 'account', 'contact', 'product'])
-};
-
-EmptyPage.defaultProps = {
-  title: 'No Results Found',
-  type: 'search'
-};
-
-if (__DOCS__) {
-  EmptyPage.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,12 +0,0 @@
-.container {
-  text-align: center;
-}
-.image {
-  margin: var(--zd_size20) auto;
-}
-.contentDiv {
-  font-size: var(--zd_size20);
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  margin-top: var(--zd_size15);
-}

package/src/lookup/EmptyPage/docs/EmptyPage__account.docs.js

@@ -1,17 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import EmptyPage from '../EmptyPage';
-
-export default class EmptyPage__account extends Component {
-  render() {
-    return <EmptyPage type='account' title='No Accounts Found' />;
-  }
-}
-
-if (__DOCS__) {
-  EmptyPage__account.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/EmptyPage/docs/EmptyPage__contact.docs.js

@@ -1,17 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import EmptyPage from '../EmptyPage';
-
-export default class EmptyPage__contact extends Component {
-  render() {
-    return <EmptyPage type='contact' title='No Contacts Found' />;
-  }
-}
-
-if (__DOCS__) {
-  EmptyPage__contact.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/EmptyPage/docs/EmptyPage__default.docs.js

@@ -1,16 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import EmptyPage from '../EmptyPage';
-
-export default class EmptyPage__default extends Component {
-  render() {
-    return <EmptyPage />;
-  }
-}
-if (__DOCS__) {
-  EmptyPage__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}