@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

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

@@ -0,0 +1,149 @@
+/**** 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

@@ -0,0 +1,81 @@
+.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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,62 @@
+/*** 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

@@ -0,0 +1,12 @@
+.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

@@ -0,0 +1,17 @@
+/*** 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

@@ -0,0 +1,17 @@
+/*** 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

@@ -0,0 +1,16 @@
+/*** 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

@@ -0,0 +1,17 @@
+/*** 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

@@ -0,0 +1,113 @@
+/*** 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

@@ -0,0 +1,26 @@
+.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%;
+}