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

package/src/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -1,116 +0,0 @@
-.header {
-  height: var(--zd_size50);
-  border-bottom: 1px solid var(--zd_border_smoke59);
-  z-index: 2;
-}
-.back {
-  width: var(--zd_size60);
-}
-.backIcon {
-  height: var(--zd_size30);
-  width: var(--zd_size30);
-  font-size: var(--zd_size12);
-  display: inline-block;
-  text-align: center;
-  color: var(--zd_text_dark4);
-  margin-left: var(--zd_size19);
-  border-radius: 50%;
-  line-height: var(--zd_size30);
-  cursor: pointer;
-}
-
-.backIcon:hover {
-  background-color: var(--zd_bg_smoke64);
-}
-.title {
-  font-size: var(--zd_size16);
-  line-height: var(--zd_size16);
-  padding-right: var(--zd_size12);
-  font-family: var(--zd_semibold);
-  color: var(--zd_text_dark4);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.rightPanel {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-.helpInfoCont {
-  position: absolute;
-  z-index: 10;
-  right: 0;
-  padding: var(--zd_size12) var(--zd_size15) 0 0;
-}
-.helpInfo {
-  border: 1px solid var(--zd_border_smoke29);
-  border-radius: 2px;
-  line-height: var(--zd_size26);
-  height: var(--zd_size28);
-  width: var(--zd_size28);
-  color: var(--zd_text_dark6);
-  font-size: var(--zd_size11);
-  text-align: center;
-  cursor: pointer;
-  display: inline-block;
-}
-.mr15 {
-  margin-right: var(--zd_size15);
-}
-
-.content {
-  z-index: 1;
-}
-.padding {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60);
-}
-.popup {
-  z-index: 3;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--zd_size330);
-  border: 1px solid var(--zd_border_smoke71);
-  background-color: var(--dot_bg_white);
-  transform: translateX(100%);
-  transition: transform 0.3s;
-}
-.popup.open {
-  transform: translateX(0);
-}
-.close {
-  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.infoHeader {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size11);
-  border-bottom: 1px solid var(--zd_border_smoke71);
-  background-color: var(--zd_bg_primarytrans11);
-  color: var(--zd_text_primary1);
-}
-
-.infoIcon {
-  height: var(--zd_size26);
-  width: var(--zd_size26);
-  font-size: var(--zd_size12);
-  text-align: center;
-  border: 1px solid var(--zd_border_primary1);
-  border-radius: 2px;
-  line-height: var(--zd_size24);
-}
-
-.infoText {
-  margin-left: var(--zd_size8);
-  margin-right: var(--zd_size8);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: var(--zd_size13);
-}
-
-.infoClose {
-  font-size: var(--zd_size28);
-  color: var(--zd_text_smoke20);
-  cursor: pointer;
-}
-
-.infoFooter {
-  padding: var(--zd_size10) var(--zd_size20);
-}

package/src/layout/SetupDetailLayout/docs/SetupDetailLayout__default.docs.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { SetupDetailLayout, SetupHeader, SetupFooter, SetupContent } from '../';
-import FormAction from '../../../FormAction/FormAction';
-export default class SetupDetailLayout__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <SetupDetailLayout getHelpInfo={() => {}} needHelpInfo>
-        <SetupHeader
-          title='Setup'
-          getLeftPlaceHolder={() => <p>setupLeft</p>}
-          getRightPlaceHolder={() => <p>setupRight</p>}
-        />
-        <SetupContent>
-          <span>Content</span>
-        </SetupContent>
-        <SetupFooter>
-          <FormAction size='large'>
-            <p>Footer</p>
-          </FormAction>
-        </SetupFooter>
-      </SetupDetailLayout>
-    );
-  }
-}
-if (__DOCS__) {
-  SetupDetailLayout__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

package/src/layout/SetupDetailLayout/index.js

@@ -1,4 +0,0 @@
-export { default as SetupDetailLayout } from './SetupDetailLayout';
-export { SetupHeader } from './SetupDetailLayout';
-export { SetupFooter } from './SetupDetailLayout';
-export { SetupContent } from './SetupDetailLayout';

package/src/layout/SubtabLayout/SubtabLayout.js

@@ -1,166 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import PlusIcon from '../../PlusIcon/PlusIcon';
-//-----------style-----------//
-import style from './SubtabLayout.module.css';
-export class SubtabHeader extends React.Component {
-  render() {
-    let {
-      onAdd,
-      getLeftPlaceHolder,
-      title,
-      label,
-      getRightPlaceHolder,
-      type,
-      leftClassName,
-      rightClassName,
-      needBorder,
-      needShadow,
-      needPlusIconLine,
-      children,
-      dataId
-    } = this.props;
-    return (
-      <CardHeader
-        className={`${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${
-          needBorder ? style.borderStyle : ''
-        }`}
-        {...this.props}
-      >
-        <Container alignBox='row' className={`${style[type]}`} align='vertical'>
-          {onAdd || children ? (
-            <Box
-              className={`${style.left} ${
-                needPlusIconLine ? style.plusIconLine : ''
-              }`}
-            >
-              {onAdd ? <PlusIcon dataId={dataId} onClick={onAdd} /> : children}
-            </Box>
-          ) : null}
-          {title ? (
-            <Box
-              className={`${style.title} ${onAdd ? style.cursor : ''}`}
-              onClick={onAdd ? onAdd : null}
-            >
-              {title}
-            </Box>
-          ) : null}
-          {getLeftPlaceHolder && (
-            <Box
-              flexible
-              shrink
-              adjust={getRightPlaceHolder ? true : false}
-              className={`${leftClassName ? leftClassName : ''}`}
-            >
-              {label ? <div className={style.label}>{label}</div> : null}
-              {getLeftPlaceHolder}
-            </Box>
-          )}
-          {getRightPlaceHolder && (
-            <Box
-              flexible
-              shrink
-              adjust={getLeftPlaceHolder ? true : false}
-              className={` ${rightClassName ? rightClassName : ''}`}
-            >
-              <Container
-                alignBox='row'
-                align='vertical'
-                className={style.aside}
-              >
-                {getRightPlaceHolder}
-              </Container>
-            </Box>
-          )}
-        </Container>
-      </CardHeader>
-    );
-  }
-}
-
-SubtabHeader.propTypes = {
-  children: PropTypes.element,
-  dataId: PropTypes.string,
-  getLeftPlaceHolder: PropTypes.oneOf([PropTypes.func, PropTypes.object]),
-  getRightPlaceHolder: PropTypes.func,
-  label: PropTypes.string,
-  leftClassName: PropTypes.string,
-  needBorderShadow: PropTypes.bool,
-  needPlusIconLine: PropTypes.bool,
-  onAdd: PropTypes.func,
-  rightClassName: PropTypes.string,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['primary', 'secondary'])
-};
-
-SubtabHeader.defaultProps = {
-  type: 'primary',
-  needBorder: true,
-  needShadow: true,
-  needPlusIconLine: true,
-  dataId: 'addreqNowbutton'
-};
-
-export class SubtabContent extends React.Component {
-  render() {
-    let { children, scroll, className, eleRef, dataId, onScroll } = this.props;
-    return (
-      <CardContent
-        scroll={scroll}
-        isScrollAttribute
-        onScroll={onScroll}
-        className={className ? className : ''}
-        eleRef={eleRef}
-        dataId={dataId}
-      >
-        {children}
-      </CardContent>
-    );
-  }
-}
-
-SubtabContent.propTypes = {
-  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
-  className: PropTypes.element,
-  dataId: PropTypes.string,
-  eleRef: PropTypes.func,
-  scroll: PropTypes.oneOf(['vertical'])
-};
-
-SubtabContent.defaultProps = {
-  scroll: 'vertical'
-};
-
-export default class SubtabLayout extends React.Component {
-  render() {
-    let { children, dataId } = this.props;
-    return (
-      <Card
-        isScrollAttribute
-        dataId={dataId}
-        {...this.props}
-        childTypes={{ cardHeader: SubtabHeader, cardContent: SubtabContent }}
-      >
-        {children}
-      </Card>
-    );
-  }
-}
-
-if (__DOCS__) {
-  SubtabLayout.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}
-
-SubtabLayout.defaultProps = {
-  dataId: 'subTabLayout'
-};
-
-SubtabLayout.propTypes = {
-  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
-  dataId: PropTypes.string
-};

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

@@ -1,66 +0,0 @@
-.tabHead,
-.shadowStyle {
-  position: relative;
-  background: var(--dot_bg_white);
-}
-
-.left {
-  margin-right: var(--zd_size15);
-}
-
-.plusIconLine {
-  position: relative;
-  z-index: 2;
-}
-
-.plusIconLine::before {
-  position: absolute;
-  content: '';
-  left: var(--zd_size20);
-  background: var(--zd_bg_smoke3);
-  width: var(--zd_size1);
-  height: var(--zd_size28);
-  top: var(--zd_size38);
-  z-index: -1;
-}
-
-.borderStyle {
-  border-bottom: 1px solid var(--zd_border_smoke5);
-}
-
-.shadowStyle::before {
-  box-shadow: 0 0 6px var(--zd_shadow_graytrans5);
-  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(--zd_text_primary);
-  font-size: var(--zd_size15);
-}
-
-.label {
-  font-size: var(--zd_size12);
-  color: var(--zd_text_smoke18);
-}
-
-.primary {
-  padding: var(--zd_size27) var(--zd_size25) var(--zd_size26) var(--zd_size25);
-}
-
-.secondary {
-  padding: var(--zd_size27) var(--zd_size115) var(--zd_size26) var(--zd_size25);
-}
-.cursor {
-  cursor: pointer;
-}

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import { SubtabLayout, SubtabHeader, SubtabContent } 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 style={boxStyle}>box 3345</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-              <div style={boxStyle}>box 1</div>
-            </div>
-          </SubtabContent>
-        </SubtabLayout>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  SubtabLayout__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

package/src/layout/SubtabLayout/index.js

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

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);
-}