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

package/src/list/AvatarFlip/AvatarFlip.js

@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import FlipCard from '../../FlipCard/FlipCard';
-import style from './AvatarFlip.module.css';
-export default class AvatarFlip extends Component {
-  render() {
-    let {
-      id,
-      action,
-      name,
-      isChecked,
-      onChange,
-      noNeedFlip,
-      size,
-      onClick,
-      isPaidUser,
-      isPortalUser,
-      channel,
-      src,
-      icon,
-      initial,
-      dataId,
-      className,
-      palette,
-      frontClass,
-      needTitle
-    } = this.props;
-    return (
-      <FlipCard
-        id={id}
-        action={action}
-        name={name}
-        initial={initial}
-        isChecked={isChecked}
-        onChange={onChange}
-        noNeedFlip={noNeedFlip}
-        size={size}
-        onClick={onClick}
-        isPaidUser={isPaidUser}
-        isPortalUser={isPortalUser}
-        channel={channel}
-        src={src}
-        icon={icon}
-        iconClass={`${style.iconStyle}`}
-        dataId={dataId}
-        ticListContainer='tic-list-filp-cont'
-        ticList='tic-list-filp'
-        className={className}
-        palette={palette}
-        frontClass={frontClass}
-        needTitle={needTitle}
-      />
-    );
-  }
-}
-AvatarFlip.propTypes = {
-  action: PropTypes.string,
-  channel: PropTypes.string,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  frontClass: PropTypes.string,
-  icon: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  initial: PropTypes.string,
-  isChecked: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  isPortalUser: PropTypes.bool,
-  name: PropTypes.string,
-  needTitle: PropTypes.bool,
-  noNeedFlip: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string
-};
-AvatarFlip.defaultProps = {
-  size: 'xmedium',
-  noNeedFlip: false
-};
-if (__DOCS__) {
-  AvatarFlip.docs = {
-    folderName: 'List',
-    componentGroup: 'AvatarFlip'
-  };
-}

package/src/list/AvatarFlip/AvatarFlip.module.css

@@ -1,15 +0,0 @@
-.taskNone {
-  font-size: var(--zd_size18);
-}
-.taskMeeting {
-  font-size: var(--zd_size19);
-}
-.taskCall {
-  font-size: var(--zd_size15);
-}
-.taskDemo {
-  font-size: var(--zd_size17);
-}
-.iconStyle {
-  color: var(--dot_text_black);
-}

package/src/list/AvatarFlip/docs/AvatarFlip__default.docs.js

@@ -1,207 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import AvatarFlip from '../AvatarFlip';
-export default class AvatarFlip__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let channelList = [
-      'EMAIL',
-      'FACEBOOK',
-      'FACEBOOK_DM',
-      'TWITTER',
-      'FORUMS',
-      'CHAT',
-      'OFFLINE_CHAT',
-      'ONLINE_CHAT',
-      'PHONE',
-      'WEB',
-      'CUSTOMERPORTAL',
-      'FEEDBACK'
-    ];
-    const header = {
-      display: 'flex',
-      borderBottom: '1px solid #e9ebec',
-      alignItems: 'center'
-    };
-    const column = {
-      flex: '1 300px',
-      paddingTop: '15px',
-      paddingBottom: '15px',
-      paddingLeft: '10px'
-    };
-    return (
-      <div style={{ padding: '20px' }}>
-        <h2 style={{ marginBottom: '10px' }}>Task Module Icon</h2>
-        <div style={{ display: 'flex' }}>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskIcon'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='taskNone'
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskMeeting'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='taskMeeting'
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskCall'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='taskCall'
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskDemo'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='taskDemo'
-            />
-          </div>
-        </div>
-        <h2 style={{ marginBottom: '10px', marginTop: '10px' }}>
-          Customers Module Icon
-        </h2>
-        <div style={{ display: 'flex' }}>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='portalUser'
-              noNeedFlip={false}
-              size='xmedium'
-              name='Antro J'
-              isPortalUser
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='paidUser'
-              noNeedFlip={false}
-              size='xmedium'
-              name='Antro J'
-              isPaidUser
-            />
-          </div>
-        </div>
-        <h2 style={{ marginBottom: '10px', marginTop: '10px' }}>
-          Ticket Channel Icons
-        </h2>
-        <div style={{ border: '1px solid #e9ebec' }}>
-          <div style={header}>
-            <div style={column}>
-              <b>Channel</b>
-            </div>
-            <div style={column}>
-              <b>default</b>
-            </div>
-            <div style={column}>
-              <b>incoming</b>
-            </div>
-            <div style={column}>
-              <b>outgoing</b>
-            </div>
-            <div style={column}>
-              <b>draft</b>
-            </div>
-            <div style={column}>
-              <b>forward</b>
-            </div>
-            <div style={column}>
-              <b>forwardDraft</b>
-            </div>
-            <div style={column}>
-              <b>missed</b>
-            </div>
-          </div>
-          {channelList.map((data, index) => (
-            <div style={header} key={index}>
-              <div style={column}>{data.toLowerCase()}</div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='default'
-                  id={`test${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='incoming'
-                  id={`test1${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='outgoing'
-                  id={`test2${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='draft'
-                  id={`test3${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='forward'
-                  id={`test4${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='forwardDraft'
-                  id={`test5${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-              <div style={column}>
-                <AvatarFlip
-                  channel={data.toLowerCase()}
-                  action='missed'
-                  id={`test6${index}`}
-                  size='xmedium'
-                  name='email'
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  AvatarFlip__default.docs = {
-    folderName: 'List',
-    componentGroup: 'AvatarFlip'
-  };
-}

package/src/list/BluePrintStatus/BluePrintStatus.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './BluePrintStatus.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
-export default class BluePrintStatus extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { isOverdue, title } = this.props;
-    return (
-      <span
-        className={`${style.container} ${
-          isOverdue ? style.danger : style.default
-        }`}
-      >
-        <Icon name='ZD-blueprint' title={title} iconClass={style.iconStyle} />
-      </span>
-    );
-  }
-}
-BluePrintStatus.propTypes = {
-  isOverdue: PropTypes.bool,
-  title: PropTypes.string
-};
-if (__DOCS__) {
-  BluePrintStatus.docs = {
-    componentGroup: ''
-  };
-}

package/src/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,13 +0,0 @@
-.container {
-  padding-right: var(--zd_size5);
-}
-.danger {
-  color: var(--dot_text_brightRed);
-}
-.default {
-  color: var(--dot_text_shuttleGrey);
-}
-.iconStyle {
-  display: block;
-  font-size: var(--zd_size10);
-}

package/src/list/BluePrintStatus/docs/BluePrintStatus__default.docs.js

@@ -1,20 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import BluePrintStatus from '../BluePrintStatus';
-export default class BluePrintStatus__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <BluePrintStatus />
-    );
-  }
-}
-if (__DOCS__) {
-  BluePrintStatus__default.docs = {
-    componentGroup: ''
-  };
-}

package/src/list/Comment/Comment.js

@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { RestrictionValidator } from '@zohodesk/permissions';
-
-import { i18NProviderUtils } from '@zohodesk/i18n';
-
-import style from './Comment.module.css';
-export default class Comment extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { count, onClick, features = [], module = 'tickets' } = this.props;
-    let i18N = i18NProviderUtils.getI18NValue;
-    let commentCount = parseInt(count);
-    let commentTitle = !commentCount
-      ? i18N('tabs.request.comment')
-      : commentCount > 1
-        ? i18N('support.comment.many.count', count)
-        : i18N('support.comment.count.one');
-    return (
-      <RestrictionValidator
-        features={features}
-        module={module}
-        action='show_comment'
-      >
-        <div
-          className={style.container}
-          onClick={onClick}
-          data-id='commentLstContainer'
-          data-title={commentTitle}
-        >
-          <Icon name='ZD-comments1' iconClass={style.commentIcon} />
-          {count && <span className={style.count}>{count}</span>}
-        </div>
-      </RestrictionValidator>
-    );
-  }
-}
-Comment.propTypes = {
-  count: PropTypes.string,
-  features: PropTypes.array,
-  iconTitle: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-if (__DOCS__) {
-  Comment.docs = {
-    folderName: 'List',
-    componentGroup: 'Comment'
-  };
-}

package/src/list/Comment/Comment.module.css

@@ -1,17 +0,0 @@
-.container {
-  composes: inlineBlockMiddle from "../listCommon.module.css";
-  position: relative;
-  color: var(--dot_text_shuttleGrey);
-  padding: 0 var(--zd_size2);
-  cursor: pointer;
-}
-.count {
-  position: absolute;
-  top: 0;
-  font-size: var(--zd_size9);
-  text-align: center;
-  left: 100%;
-}
-.commentIcon {
-  font-size: var(--zd_size10);
-}

package/src/list/Comment/docs/Comment__default.docs.js

@@ -1,22 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Comment from '../Comment';
-export default class Comment__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div style={{ margin: '30px' }}>
-        <Comment count='2' />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  Comment__default.docs = {
-    folderName: 'List',
-    componentGroup: 'Comment'
-  };
-}

package/src/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
-import { DepartmentText } from '../SecondaryText';
-import { i18NProviderUtils } from '@zohodesk/i18n';
-
-class DepartmentDropDown extends Component {
-  constructor(props) {
-    super(props);
-    this.onClick = this.onClick.bind(this);
-    this.onMoveDepartment = this.onMoveDepartment.bind(this);
-  }
-
-  onClick(e) {
-    let { getDepartment, onSearchDepts } = this.props;
-    if (getDepartment) {
-      getDepartment(e);
-    }
-    onSearchDepts('');
-  }
-
-  onMoveDepartment(deptId) {
-    let { onSearchDepts, onMoveDepartment } = this.props;
-    onSearchDepts('');
-    onMoveDepartment(deptId);
-  }
-
-  render() {
-    let {
-      departmentName,
-      departmentList = [],
-      onSelectLabel,
-      isEditable,
-      dataId,
-      isFetching
-    } = this.props;
-    return (
-      <ToggleDropDown
-        title={i18NProviderUtils.getI18NValue('support.label.move.department')}
-        options={departmentList}
-        value={<DepartmentText text={departmentName} />}
-        dataTitle={departmentName}
-        keyName='name'
-        idName='id'
-        onClick={this.onMoveDepartment}
-        isArrow={false}
-        isEditable={isEditable}
-        onSelectLabel={onSelectLabel}
-        isSearch={departmentList.length > 5}
-        boxSize='small'
-        dataId={dataId}
-        isDataLoaded={!isFetching}
-        showIconOnHover
-      />
-    );
-  }
-}
-DepartmentDropDown.defaultProps = {
-  isEditable: true
-};
-DepartmentDropDown.propTypes = {
-  dataId: PropTypes.string,
-  departmentList: PropTypes.array,
-  departmentName: PropTypes.string,
-  getDepartment: PropTypes.func,
-  isEditable: PropTypes.bool,
-  isFetching: PropTypes.bool,
-  onMoveDepartment: PropTypes.func,
-  onSearchDepts: PropTypes.func,
-  onSelectLabel: PropTypes.func
-};
-export default DepartmentDropDown;
-if (__DOCS__) {
-  DepartmentDropDown.docs = {
-    folderName: 'List',
-    componentGroup: 'DepartmentDropDown'
-  };
-}

package/src/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,62 +0,0 @@
-.container {
-  position: relative;
-  cursor: default;
-  width: 100%;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.read {
-  font-family: var(--zd_semibold);
-}
-
-.label {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  width: 100%;
-}
-
-.departmentName {
-  font-style: italic;
-  font-size: var(--zd_size12);
-  color: var(--dot_text_shuttleGrey);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-family: var(--zd_light);
-}
-
-.arrow {
-  margin-left: var(--zd_size5);
-  vertical-align: middle;
-}
-
-.arrow,
-.hiddenArrow {
-  visibility: hidden;
-}
-
-.container:hover .arrow {
-  visibility: visible;
-}
-
-.dropdown {
-  max-height: var(--zd_size200);
-  margin: var(--zd_size10) 0;
-  composes: oflowy from '~@zohodesk/components/lib/common/common.module.css';
-  text-align: left;
-}
-
-.moveDepartment {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  font: var(--zd_size13) var(--zd_semibold);
-  padding: var(--zd_size10);
-  text-align: left;
-  border-bottom: 1px solid var(--zd_text_dark6);
-}
-.iconSize {
-  font-size: var(--zd_size8);
-}

package/src/list/Dot/Dot.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './Dot.module.css';
-export default class Dot extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { className, spacingType } = this.props;
-    return (
-      <div
-        className={`${style.dot} ${style[spacingType]} ${
-          className ? className : ''
-        }`}
-      >
-        .
-      </div>
-    );
-  }
-}
-Dot.propTypes = {
-  className: PropTypes.string,
-  spacingType: PropTypes.oneOf(['minimalList', 'list'])
-};
-Dot.propTypes = {
-  spacingType: 'list'
-};

package/src/list/Dot/Dot.module.css

@@ -1,13 +0,0 @@
-.dot {
-  font-size: 100%;
-  color: var(--dot_text_paleNavy);
-  position: relative;
-  bottom: 0;
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 var(--zd_size10);
-}
-.minimalList {
-  margin: 0 var(--zd_size6);
-}

package/src/list/DotNew/DotNew.js

@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './DotNew.module.css';
-export default class DotNew extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { className } = this.props;
-    return (
-      <div className={`${style.dotStyle} ${className ? className : ''}`} />
-    );
-  }
-}
-DotNew.propTypes = {
-  className: PropTypes.string
-};
-if (__DOCS__) {
-  DotNew.docs = {
-    folderName: 'List',
-    componentGroup: 'DotNew'
-  };
-}

package/src/list/DotNew/DotNew.module.css

@@ -1,16 +0,0 @@
-.dotStyle {
-  width: var(--zd_size6);
-  height: var(--zd_size6);
-  border-radius: 50%;
-  background-color: var(--dot_bg_primary);
-  /* box-shadow: 0 0 15px rgba(10, 115, 235, 0.6); */
-  composes: inlineFlex from '../listCommon.module.css';
-  box-shadow: 0 0 0 0 var(--dot_bg_catskillWhite),
-    0 0 0 0 rgba(10, 115, 235, 0.6);
-  animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
-}
-@keyframes dotAnimation {
-  to {
-    box-shadow: 0 0 0 12px transparent, 0 0 0 8px rgba(255, 255, 255, 0);
-  }
-}