@zohodesk/dot 1.0.0-temp-58 → 1.0.0-temp-61

package/src/list/status/StatusListItem/StatusListItem.js

@@ -1,149 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-/**** Components ****/
-import Icon from '@zohodesk/icons/lib/Icon';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-/**** CSS ****/
-import style from './StatusListItem.module.css';
-
-export default class StatusListItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-  }
-
-  getRef(ele) {
-    this.ele = ele;
-    let { index, getRef, id } = this.props;
-    getRef && getRef(ele, index, id);
-  }
-
-  handleClick(e) {
-    let { onClick, id, value, index } = this.props;
-    onClick && onClick(id, value, index, e);
-  }
-
-  handleMouseEnter(e) {
-    let { onMouseEnter, id, value, index } = this.props;
-    onMouseEnter && onMouseEnter(id, value, index, e);
-  }
-
-  render() {
-    let {
-      size,
-      active,
-      highlight,
-      value,
-      autoHover,
-      palette,
-      title,
-      disableTitle,
-      needTick,
-      isLink,
-      href,
-      target,
-      needBorder,
-      isDisabled,
-      bulletColor,
-      a11y
-    } = this.props;
-    let options = {};
-    let { role, ariaSelected, ariaHidden = true } = a11y;
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-    return (
-      <Container
-        role={role}
-        aria-selected={ariaSelected}
-        isCover={false}
-        align='vertical'
-        alignBox='row'
-        className={`${style.list} ${style[size]} ${style[palette]} ${
-          active ? style.active : highlight && !isDisabled ? style.hover : ''
-        } ${autoHover && !isDisabled ? style.effect : ''} ${
-          needTick ? style.withTick : ''
-        } ${isDisabled ? CssProvider('isDisable') : ''} ${
-          needBorder ? style.withBorder : ''
-        }`}
-        dataId={String(value).replace("'", '_')}
-        onClick={!isDisabled && this.handleClick}
-        onMouseEnter={this.handleMouseEnter}
-        eleRef={this.getRef}
-        tagName={isLink ? 'a' : 'li'}
-        data-title={isDisabled ? disableTitle : null}
-        tabindex={isDisabled ? '-1' : '0'}
-        {...options}
-      >
-        <Box className={`${style.statusType} ${style[bulletColor]}`} />
-        <Box
-          data-title={isDisabled ? null : title}
-          flexible
-          shrink
-          className={style.value}
-        >
-          {value}
-        </Box>
-        {needTick && active ? (
-          <div className={style.tickIcon} aria-hidden={ariaHidden}>
-            <Icon name='ZD-ticknew' size='8' />
-          </div>
-        ) : null}
-      </Container>
-    );
-  }
-}
-
-StatusListItem.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  id: '',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  bulletColor: 'black',
-  a11y: {}
-};
-StatusListItem.propTypes = {
-  active: PropTypes.bool,
-  autoHover: PropTypes.bool,
-  bulletColor: PropTypes.oneOf(['black', 'orange', 'green']),
-  disableTitle: PropTypes.string,
-  getRef: PropTypes.func,
-  highlight: PropTypes.bool,
-  href: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  index: PropTypes.number,
-  isDisabled: PropTypes.bool,
-  isLink: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  target: PropTypes.oneOf(['blank', 'self']),
-  title: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaSelected: PropTypes.bool,
-    ariaHidden: PropTypes.bool
-  })
-};
-
-if (__DOCS__) {
-  StatusListItem.docs = {
-    componentGroup: 'StatusListItem',
-    folderName: 'List'
-  };
-}

package/src/list/status/StatusListItem/StatusListItem.module.css

@@ -1,81 +0,0 @@
-.list {
-  color: var(--zdt_statuslistitem_list_text);
-  font-size: var(--zd_font_size13);
-  position: relative;
-  cursor: pointer;
-  list-style: none;
-}
-.withBorder {
-  border-left: 1px solid var(--zdt_statuslistitem_default_border);
-}
-.small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
-}
-.medium {
-  padding: var(--zd_size9) var(--zd_size20);
-}
-.large {
-  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
-  height: var(--zd_size48);
-}
-
-.value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.withBorder.active {
-  border-left-color: var(--zdt_statuslistitem_default_active_border);
-}
-
-.default.hover,
-.default.effect:hover {
-  background-color: var(--zdt_statuslistitem_default_effect_bg);
-}
-.primary.hover,
-.primary.effect:hover,
-.selected {
-  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
-}
-.secondary.hover,
-.secondary.effect:hover {
-  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
-}
-.list.active.default,
-.list.active.primary {
-  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
-}
-.list.active.secondary {
-  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
-}
-.secondary.hover,
-.secondary.effect:hover,
-.list.active.secondary {
-  color: var(--zdt_statuslistitem_secondary_effect_text);
-}
-.tickIcon {
-  color: var(--zdt_statuslistitem_tickicon);
-  position: absolute;
-  right: var(--zd_size20);
-}
-.tickIcon > i {
-  display: block;
-}
-.active.withTick {
-  padding-right: var(--zd_size39);
-}
-/* Status Type */
-.statusType {
-  width: var(--zd_size8);
-  height: var(--zd_size8);
-  border-radius: 50%;
-  margin-right: var(--zd_size13);
-}
-.black {
-  background-color: var(--zdt_statuslistitem_black_bg);
-}
-.orange {
-  background-color: var(--zdt_statuslistitem_orange_bg);
-}
-.green {
-  background-color: var(--zdt_statuslistitem_green_bg);
-}

package/src/list/status/StatusListItem/docs/StatusListItem__default.docs.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import StatusListItem from '../StatusListItem';
-import { StatusText } from '../../../SecondaryText';
-
-export default class StatusListItem__default extends React.Component {
-  render() {
-    return (
-      <div style={{ margin: '30px', display: 'inline-block' }}>
-        <StatusListItem value='On Hold' bulletColor='orange' />
-        <StatusListItem value='Open' bulletColor='black' />
-        <StatusListItem value='Closed' bulletColor='green' />
-      </div>
-    );
-  }
-}
-StatusListItem__default.docs = {
-  componentGroup: 'StatusListItem',
-  folderName: 'List'
-};

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_font_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,113 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-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 {
-  constructor(props) {
-    super(props);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { isActive } = this.props;
-    if (prevProps.isActive !== isActive) {
-      isActive
-        ? document.addEventListener('keydown', this.handleKeyDown)
-        : document.removeEventListener('keydown', this.handleKeyDown);
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown(e) {
-    const { onKeyDown } = this.props;
-    onKeyDown && onKeyDown(e);
-  }
-
-  render() {
-    const {
-      isActive,
-      children,
-      size,
-      dataId,
-      forwardRef,
-      onClick,
-      customClass,
-      htmlId,
-      a11y,
-      childAnimationName
-    } = this.props;
-    const {
-      role = 'dialog',
-      ariaLabelledby,
-      ariaDescribedby,
-      ariaModal = isActive ? true : undefined
-    } = a11y;
-    return (
-      <FreezeLayer
-        align='horizontal'
-        animationName='fade'
-        childAnimationName={childAnimationName}
-        isActive={isActive}
-        palette='snow'
-        forwardRef={forwardRef}
-        onClick={onClick}
-        customClass={customClass}
-      >
-        <Container alignBox='row' className={style.container} dataId='fldValue'>
-          <div
-            tabIndex='0'
-            role={role}
-            aria-labelledby={ariaLabelledby}
-            aria-describedby={ariaDescribedby}
-            aria-modal={ariaModal}
-            id={htmlId}
-            className={`${style.box} ${style[`${size}Size`]}`}
-            data-id={dataId}
-          >
-            {children}
-          </div>
-        </Container>
-      </FreezeLayer>
-    );
-  }
-}
-
-Lookup.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaDescribedby: PropTypes.string,
-    ariaModal: PropTypes.bool
-  }),
-  onKeyDown: PropTypes.func,
-  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
-};
-Lookup.defaultProps = {
-  size: 'medium',
-  customClass: '',
-  a11y: {},
-  childAnimationName: 'flyDown'
-};
-
-if (__DOCS__) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}

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

@@ -1,26 +0,0 @@
-.container {
-  padding-bottom: var(--zd_size10);
-  font-size: var(--zd_font_size16);
-}
-.box {
-  position: relative;
-  margin: auto;
-  height: 100%;
-  width: 100%;
-}
-/* Size */
-.smallSize {
-  max-width: var(--zd_size470);
-}
-.xmediumSize {
-  max-width: var(--zd_size620);
-}
-.mediumSize {
-  max-width: var(--zd_size840);
-}
-.largeSize {
-  max-width: 70%;
-}
-.fullSize {
-  max-width: 90%;
-}