@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp.213

package/es/list/status/StatusListItem/StatusListItem.js

@@ -1,163 +0,0 @@
-import "core-js/modules/es.string.replace";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/**** 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 /*#__PURE__*/React.createElement(Container, _extends({
-      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), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.statusType} ${style[bulletColor]}`
-    }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
-      flexible: true,
-      shrink: true,
-      className: style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
-  }
-
-}
-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 (false) {
-  StatusListItem.docs = {
-    componentGroup: 'StatusListItem',
-    folderName: 'List'
-  };
-}

package/es/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/es/list/status/StatusListItem/docs/StatusListItem__default.docs.js

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

package/es/lookup/EmptyPage/EmptyPage.js

@@ -1,71 +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 /*#__PURE__*/React.createElement(EmptySearch, {
-          className: style.image
-        });
-
-      case 'account':
-        return /*#__PURE__*/React.createElement(EmptyAccounts, {
-          className: style.image
-        });
-
-      case 'contact':
-        return /*#__PURE__*/React.createElement(EmptyContact, {
-          className: style.image
-        });
-
-      case 'product':
-        return /*#__PURE__*/React.createElement(EmptyProducts, {
-          className: style.image
-        });
-
-      default:
-        return null;
-    }
-  }
-
-  render() {
-    let {
-      type,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-id": `empty_${type}`
-    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-      className: style.contentDiv
-    }, title));
-  }
-
-}
-EmptyPage.propTypes = {
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['search', 'account', 'contact', 'product'])
-};
-EmptyPage.defaultProps = {
-  title: 'No Results Found',
-  type: 'search'
-};
-
-if (false) {
-  EmptyPage.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/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/es/lookup/EmptyPage/docs/EmptyPage__account.docs.js

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

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

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

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

@@ -1,17 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-/*** Components ***/
-
-import EmptyPage from '../EmptyPage';
-export default class EmptyPage__default extends Component {
-  render() {
-    return /*#__PURE__*/React.createElement(EmptyPage, null);
-  }
-
-}
-
-if (false) {
-  EmptyPage__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}

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

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

package/es/lookup/Lookup/Lookup.js

@@ -1,112 +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 /*#__PURE__*/React.createElement(FreezeLayer, {
-      align: "horizontal",
-      animationName: "fade",
-      childAnimationName: childAnimationName,
-      isActive: isActive,
-      palette: "snow",
-      forwardRef: forwardRef,
-      onClick: onClick,
-      customClass: customClass
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: style.container,
-      dataId: "fldValue"
-    }, /*#__PURE__*/React.createElement("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)));
-  }
-
-}
-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 (false) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/es/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%;
-}