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

package/src/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,120 +0,0 @@
-.varClass {
-  --borderColor: var(--zdt_subtablayout_border);
-}
-.tabHead,
-.shadowStyle {
-  position: relative;
-  composes: varClass;
-  background: var(--zdt_subtablayout_tabhead_bg);
-}
-
-.left {
-  margin-right: var(--zd_size15);
-}
-
-.plusIconLine {
-  position: relative;
-  z-index: 2;
-}
-
-.plusIconLine::before {
-  position: absolute;
-  content: '';
-  left: var(--zd_size20);
-  background: var(--zdt_subtablayout_plusicon_bg);
-  width: var(--zd_size1);
-  height: var(--zd_size28);
-  top: var(--zd_size38);
-  z-index: -1;
-}
-
-.primary_borderStyle,
-.secondary_borderStyle {
-  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
-}
-.tertiary_borderStyle {
-  border-bottom: 1px solid var(--borderColor);
-}
-
-.shadowStyle::before {
-  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
-  border-radius: 100px/10px;
-  bottom: 0;
-  content: '';
-  left: var(--zd_size50);
-  position: absolute;
-  right: var(--zd_size50);
-  top: var(--zd_size20);
-  z-index: -1;
-}
-
-.aside {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.title {
-  color: var(--zdt_subtablayout_title_text);
-  font-size: var(--zd_font_size15);
-}
-
-.label {
-  font-size: var(--zd_font_size12);
-  color: var(--zdt_subtablayout_label_text);
-}
-
-.primary,
-.primary_peek,
-.secondary,
-.secondary_peek,
-.primary_detailFooter,
-.primary_peekFooter,
-.secondary_detailFooter,
-.secondary_peekFooter {
-  padding-top: var(--zd_size27);
-  padding-bottom: var(--zd_size26);
-  padding-left: var(--zd_size25);
-}
-.primary,
-.primary_peek {
-  padding-right: var(--zd_size25);
-}
-.secondary,
-.secondary_peek {
-  padding-right: var(--zd_size115);
-}
-.primary_detailFooter,
-.primary_peekFooter {
-  padding-right: var(--zd_size25);
-}
-.secondary_detailFooter,
-.secondary_peekFooter {
-  padding-right: var(--zd_size115);
-}
-.tertiary,
-.tertiary_peek {
-  height: var(--zd_size50);
-}
-.tertiary,
-.tertiary_detailFooter {
-  padding: 0 var(--zd_size65);
-}
-.tertiary_peek,
-.tertiary_peekFooter {
-  padding: 0 var(--zd_size42);
-}
-.cursor {
-  cursor: pointer;
-}
-.footer {
-  composes: varClass;
-  border-top: 1px solid var(--borderColor);
-}
-.medium {
-  height: var(--zd_size40);
-}
-.large {
-  height: var(--zd_size45);
-}
-.xlarge {
-  height: var(--zd_size50);
-}

package/src/layout/SubtabLayout/docs/SubtabLayout__default.docs.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { SubtabLayout, SubtabHeader, SubtabContent, SubtabFooter } from '../';
-
-export default class SubtabLayout__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { needBorder: true, needShadow: false };
-    this.onScroll = this.onScroll.bind(this);
-    this.interval = null;
-  }
-
-  onScroll() {
-    this.setState({ needBorder: true, needShadow: true });
-    this.interval = null;
-    let intern = setTimeout(() => {
-      clearInterval(this.interval);
-      this.setState({ needBorder: true, needShadow: false });
-    }, 500);
-    this.interval = intern;
-  }
-
-  render() {
-    let boxStyle = {
-      padding: 'var(--zd_size21)'
-    };
-    let { needShadow, needBorder } = this.state;
-
-    return (
-      <div style={{ height: '100vh', width: '100%' }}>
-        <SubtabLayout>
-          <SubtabHeader needShadow={needShadow} needBorder={needBorder} />
-          <SubtabContent>
-            <div
-              onScroll={this.onScroll}
-              style={{ height: '100%', width: '100%' }}
-            >
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 2</div>
-            </div>
-          </SubtabContent>
-          <SubtabFooter>Footer</SubtabFooter>
-        </SubtabLayout>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  SubtabLayout__default.docs = {
-    componentGroup: 'Template'
-  };
-}

package/src/layout/SubtabLayout/index.js

@@ -1,4 +0,0 @@
-export { default as SubtabLayout } from './SubtabLayout';
-export { SubtabHeader } from './SubtabLayout';
-export { SubtabContent } from './SubtabLayout';
-export { SubtabFooter } from './SubtabLayout';

package/src/list/AvatarFlip/AvatarFlip.js

@@ -1,106 +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,
-      textPalette,
-      customTextClass,
-      frontClass,
-      needTitle,
-      tourId,
-      iconSize,
-      isFilledCheckbox,
-      channelTitle
-    } = 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}
-        iconSize={iconSize}
-        iconClass={`${style.iconStyle}`}
-        dataId={dataId}
-        ticListContainer='tic-list-filp-cont'
-        ticList='tic-list-filp'
-        className={className}
-        palette={palette}
-        textPalette={textPalette}
-        customTextClass={customTextClass}
-        frontClass={frontClass}
-        needTitle={needTitle}
-        tourId={tourId}
-        isFilledCheckbox={isFilledCheckbox}
-        channelTitle={channelTitle}
-      />
-    );
-  }
-}
-AvatarFlip.propTypes = {
-  action: PropTypes.string,
-  channel: PropTypes.string,
-  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.string,
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  frontClass: PropTypes.string,
-  icon: PropTypes.string,
-  iconSize: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  initial: PropTypes.string,
-  isChecked: PropTypes.bool,
-  isFilledCheckbox: 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,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  tourId: PropTypes.string
-};
-AvatarFlip.defaultProps = {
-  size: 'xmedium',
-  noNeedFlip: false,
-  iconSize: '21'
-};
-if (__DOCS__) {
-  AvatarFlip.docs = {
-    folderName: 'List',
-    componentGroup: 'AvatarFlip'
-  };
-}

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

@@ -1,3 +0,0 @@
-.iconStyle {
-  color: var(--zdt_avatarflip_default_text);
-}

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

@@ -1,82 +0,0 @@
-import React, { Component } from 'react';
-import AvatarFlip from '../AvatarFlip';
-export default class AvatarFlip__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    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='ZD-taskNone'
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskMeeting'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='ZD-taskMeeting'
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskCall'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='ZD-taskCall'
-            />
-          </div>
-          <div style={{ marginRight: '15px' }}>
-            <AvatarFlip
-              id='taskDemo'
-              noNeedFlip={false}
-              size='xmedium'
-              name='email'
-              icon='ZD-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>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  AvatarFlip__default.docs = {
-    folderName: 'List',
-    componentGroup: 'AvatarFlip'
-  };
-}

package/src/list/BluePrintStatus/BluePrintStatus.js

@@ -1,28 +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 {  title } = this.props;
-    return (
-      <span
-        className={`${style.container}`}
-      >
-        <Icon name='ZD-blueprint' title={title} iconClass={style.iconStyle} />
-      </span>
-    );
-  }
-}
-BluePrintStatus.propTypes = {
-  title: PropTypes.string
-};
-if (__DOCS__) {
-  BluePrintStatus.docs = {
-    componentGroup: 'Atom'
-  };
-}

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

@@ -1,14 +0,0 @@
-.container {
-  padding-right: var(--zd_size5);
-  display: inherit;
-}
-/* .danger {
-  color: var(--dot_brightRed);
-}
-.default {
-  color: var(--dot_shuttleGrey);
-} */
-.iconStyle {
-  display: block;
-  font-size: var(--zd_font_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,51 +0,0 @@
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { i18NProviderUtils } from '@zohodesk/i18n';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
-import style from './Comment.module.css';
-export default class Comment extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { count, onClick, className } = this.props;
-    let i18N = i18NProviderUtils.getI18NValue;
-    let commentCount = parseInt(count);
-    let commentTitle = !commentCount
-      ? i18N('tabs.request.comment')
-      : commentCount > 1
-      ? i18N('support.comment.many', count)
-      : i18N('support.comment.one');
-    return (
-      <Button
-        customClass={`${style.container} ${className} `}
-        onClick={onClick}
-        dataId='commentLstContainer'
-        title={commentTitle}
-      >
-        <Icon name='ZD-TK-commentLine' iconClass={style.commentIcon} />
-        {count && <span className={style.count}>{count}</span>}
-      </Button>
-    );
-  }
-}
-Comment.defaultProps = {
-  className: ''
-};
-Comment.propTypes = {
-  className: PropTypes.string,
-  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,24 +0,0 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1);
-  font-size: var(--zd_font_size9);
-  text-align: center;
-  left: 100%;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13);
-}

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,119 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
-import { DepartmentText } from '../SecondaryText';
-import style from './DepartmentDropDown.module.css';
-
-class DepartmentDropDown extends Component {
-  constructor(props) {
-    super(props);
-    this.onClick = this.onClick.bind(this);
-    this.onMoveDepartment = this.onMoveDepartment.bind(this);
-  }
-
-  onClick(e) {
-    let { getDepartment, onSearch } = this.props;
-    if (getDepartment) {
-      getDepartment(e);
-    }
-    onSearch('');
-  }
-
-  onMoveDepartment(deptId) {
-    let { onSearch, onMoveDepartment } = this.props;
-    onSearch('');
-    onMoveDepartment(deptId);
-  }
-
-  render() {
-    let {
-      departmentName,
-      departmentList = [],
-      onSelectLabel,
-      isEditable,
-      dataId,
-      isFetching,
-      isPopupActive,
-      getNextOptions,
-      isNextOptions,
-      onSearch,
-      needSearchFetching,
-      searchStr,
-      i18nKeys
-    } = this.props;
-    let {
-      title = 'Move Department',
-      searchEmptyText = 'No results found',
-      searchErrorText = 'OOPS !',
-      placeholder = 'Search Department'
-    } = i18nKeys;
-    return (
-      <ToggleDropDown
-        title={title}
-        options={departmentList}
-        value={
-          <DepartmentText text={departmentName} dataTitle={departmentName} />
-        }
-        keyName='name'
-        idName='id'
-        onClick={this.onMoveDepartment}
-        isArrow={false}
-        isEditable={isEditable}
-        onSelectLabel={onSelectLabel}
-        isPopupActive={isPopupActive}
-        needExternalPopupState
-        isSearch={departmentList.length > 5 || searchStr.length !== 0}
-        boxSize='small'
-        dataId={dataId}
-        isDataLoaded={!isFetching}
-        isPadding={false}
-        searchErrorText={searchErrorText}
-        searchEmptyHint={searchEmptyText}
-        isNeedEffect={false}
-        className={style.departmentBox}
-        placeHolderText={placeholder}
-        getNextOptions={getNextOptions}
-        isNextOptions={isNextOptions}
-        onSearch={onSearch}
-        needSearchFetching={needSearchFetching}
-      />
-    );
-  }
-}
-DepartmentDropDown.defaultProps = {
-  isEditable: true,
-  isPopupActive: true,
-  isNextOptions: false,
-  searchStr: '',
-  i18nKeys: {}
-};
-DepartmentDropDown.propTypes = {
-  dataId: PropTypes.string,
-  departmentList: PropTypes.array,
-  departmentName: PropTypes.string,
-  getDepartment: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  isEditable: PropTypes.bool,
-  isFetching: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  needSearchFetching: PropTypes.bool,
-  onMoveDepartment: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSelectLabel: PropTypes.func,
-  searchStr: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    title: PropTypes.string,
-    searchEmptyText: PropTypes.string,
-    searchErrorText: PropTypes.string,
-    placeholder: PropTypes.string
-  })
-};
-export default DepartmentDropDown;
-if (__DOCS__) {
-  DepartmentDropDown.docs = {
-    folderName: 'List',
-    componentGroup: 'DepartmentDropDown'
-  };
-}

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

@@ -1,9 +0,0 @@
-.departmentBox {
-  max-width: 100%;
-}
-.departmentBox :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_text);
-}
-.departmentBox:hover :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_hover_text);
-}

package/src/list/Dot/Dot.js

@@ -1,27 +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}`}
-      >
-        .
-      </div>
-    );
-  }
-}
-Dot.propTypes = {
-  className: PropTypes.string,
-  spacingType: PropTypes.oneOf(['minimalList', 'list'])
-};
-Dot.defaultProps = {
-  spacingType: 'list',
-  className: ''
-};