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

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

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

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

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

package/src/list/AvatarFlip/AvatarFlip.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+
+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}
+        customProps={{
+          'aria-label':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

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

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

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

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

@@ -0,0 +1,27 @@
+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: ''
+};