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

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

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

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

package/src/lookup/Lookup/Lookup.js

@@ -1,80 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/Responsive';
-import FreezeLayer from '../../FreezeLayer/FreezeLayer';
-import { Container } from '@zohodesk/components/lib/Layout';
-
-/*** CSS ***/
-import style from './Lookup.module.css';
-
-/*eslint-disable react/forbid-component-props */
-
-export default class Lookup extends Component {
-  render() {
-    let {
-      isActive,
-      children,
-      size,
-      dataId,
-      forwardRef,
-      responsiveId
-    } = this.props;
-    return (
-      <FreezeLayer
-        align='horizontal'
-        animationName='fade'
-        childAnimationName='flyDown'
-        isActive={isActive}
-        palette='snow'
-        forwardRef={forwardRef}
-      >
-        <ResponsiveReceiver responsiveId={responsiveId}>
-          {({ deviceUpto, deviceOnly }) => (
-            <Container
-              alignBox='row'
-              className={style.container}
-              dataId='fldValue'
-            >
-              <div
-                className={`${style.box} 
-            ${
-              size === 'medium'
-                ? deviceOnly(['LAPTOP_S'])
-                  ? style.tabSize
-                  : deviceUpto('TABLET')
-                  ? style.mbleSize
-                  : style.mediumSize
-                : style.smallSize
-            }`}
-                data-id={dataId}
-              >
-                {children}
-              </div>
-            </Container>
-          )}
-        </ResponsiveReceiver>
-      </FreezeLayer>
-    );
-  }
-}
-
-Lookup.propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium']),
-  responsiveId: PropTypes.string
-};
-Lookup.defaultProps = {
-  size: 'medium',
-  responsiveId: 'Helmet'
-};
-
-if (__DOCS__) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/Lookup/Lookup.module.css

@@ -1,22 +0,0 @@
-.container {
-  padding-bottom: var(--zd_size10);
-  font-size: var(--zd_size16);
-}
-.box {
-  position: relative;
-  margin: auto;
-  height: 100%;
-}
-/* Size */
-.smallSize {
-  width: var(--zd_size430);
-}
-.mediumSize {
-  width: var(--zd_size840);
-}
-.tabSize{
-  width: var(--zd_size750);
-}
-.mbleSize{
-  width: 99%
-}