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

package/src/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import Drawer, { Header, Content } from '../Drawer';
-import Button from '@zohodesk/components/lib/Button/Button';
-import style from '../Drawer.module.css';
-
-export default class Drawer__multiDrawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: true,
-      subDrawerActive: true,
-      size: 'xsmall'
-    };
-
-    this.onClose = this.onClose.bind(this);
-    this.openSecondDrawer = this.openSecondDrawer.bind(this);
-    this.closeDrawers = this.closeDrawers.bind(this);
-    this.closeSubDrawer = this.closeSubDrawer.bind(this);
-    this.subDrawerChildren = this.subDrawerChildren.bind(this);
-  }
-
-  onClose() {
-    this.setState({
-      isActive: false
-    });
-  }
-
-  openSecondDrawer() {
-    this.setState({
-      subDrawerActive: true
-    });
-  }
-
-  closeDrawers() {
-    this.setState({
-      isActive: false
-    });
-  }
-
-  closeSubDrawer() {
-    this.setState({
-      subDrawerActive: false
-    });
-  }
-  changeSize(drawersize) {
-    this.setState({
-      size: drawersize
-    });
-  }
-
-  subDrawerChildren() {
-    return (
-      <React.Fragment>
-        <Header title='Second Drawer' onClose={this.closeSubDrawer}></Header>
-        <Content paddingSize='small'>
-          <div>Hi, I am Second Drawer Content Area</div>
-        </Content>
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    let { isActive, subDrawerActive, size } = this.state;
-    return (
-      <Drawer
-        isActive={isActive}
-        needFreeze
-        paddingSize='small'
-        subDrawerActive={subDrawerActive}
-        subDrawerSize='small'
-        onClose={this.closeDrawers}
-        subDrawerChildren={this.subDrawerChildren()}
-        size={size} needAutoZindex
-      >
-        <Header title='First Drawer' onClose={this.onClose}></Header>
-        <Content className={style.headerTest}>
-          <div onClick={this.openSecondDrawer}>
-            Click here to Open Second Drawer ..:-)
-          </div>
-          <Button text='small' onClick={this.changeSize.bind(this, 'small')} />
-          <Button
-            text='xsmall'
-            onClick={this.changeSize.bind(this, 'xsmall')}
-          />
-          <Button
-            text='medium'
-            onClick={this.changeSize.bind(this, 'medium')}
-          />
-          <Button
-            text='xmedium'
-            onClick={this.changeSize.bind(this, 'xmedium')}
-          />
-          <Button text='large' onClick={this.changeSize.bind(this, 'large')} />
-          <Button
-            text='xlarge'
-            onClick={this.changeSize.bind(this, 'xlarge')}
-          />
-          <Button
-            text='xxlarge'
-            onClick={this.changeSize.bind(this, 'xxlarge')}
-          />
-        </Content>
-      </Drawer>
-    );
-  }
-}
-if (__DOCS__) {
-  Drawer__multiDrawer.docs = {
-    componentGroup: 'Template'
-  };
-}

package/src/Drawer/docs/Drawer__noFreeze.docs.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Drawer from '../Drawer';
-export default class Drawer__noFreeze extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <Drawer isActive>
-        <div>Children</div>
-      </Drawer>
-    );
-  }
-}
-if (__DOCS__) {
-  Drawer__noFreeze.docs = {
-    componentGroup: 'Template'
-  };
-}

package/src/Drawer/docs/Drawer__withModal.docs.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import Drawer, { Header, Content } from '../Drawer';
-import Modal from '@zohodesk/components/lib/Modal/Modal';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import style from '../Drawer.module.css';
-
-export default class Drawer__withModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: true,
-      modalActive: true
-    };
-
-    this.onClose = this.onClose.bind(this);
-    this.openModal = this.openModal.bind(this);
-    this.closeDrawers = this.closeDrawers.bind(this);
-    this.getNextId = getUniqueId(this);
-  }
-
-  onClose() {
-    this.setState({
-      isActive: false
-    });
-  }
-
-  openModal() {
-    this.setState({
-      modalActive: true
-    });
-  }
-
-  closeDrawers() {
-    this.setState({
-      isActive: false
-    });
-  }
-
-  render() {
-    let { isActive, modalActive } = this.state;
-    let uniqueId =  this.getNextId();
-    return (
-      <Drawer
-        isActive={isActive}
-        needFreeze
-        paddingSize='small'
-        onClose={this.closeDrawers}
-        innerPortalName={uniqueId}
-      >
-        <Header title='Drawer with Modal' onClose={this.onClose}></Header>
-        <Content className={style.headerTest}>
-          <div onClick={this.openModal}>Click here to Open Modal ..:-)</div>
-          {modalActive ? (
-            <Modal portalId={uniqueId}>
-              <div
-                style={{
-                  width: '90%',
-                  height: '400px',
-                  background: '#fff',
-                  margin: '50px auto'
-                }}
-              >
-                Drawer Modal
-              </div>
-            </Modal>
-          ) : null}
-        </Content>
-      </Drawer>
-    );
-  }
-}
-if (__DOCS__) {
-  Drawer__withModal.docs = {
-    componentGroup: 'Template'
-  };
-}

package/src/ExternalLink/ExternalLink.js

@@ -1,75 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**** CSS ****/
-import style from './ExternalLink.module.css';
-
-export default class ExternalLink extends React.Component {
-  addHttp(url) {
-    const regEx = new RegExp(
-      /(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i
-    );
-    if (!regEx.test(url)) {
-      return `http://${url}`;
-    }
-    return url;
-  }
-
-  render() {
-    const {
-      href,
-      title,
-      target,
-      className,
-      children,
-      rel,
-      dataId,
-      onClick,
-      customProps
-    } = this.props;
-    const urlOutput =
-      href && typeof href !== 'boolean'
-        ? this.addHttp(String(href))
-        : 'javascript:void(0);';
-
-    return (
-      <a
-        href={urlOutput}
-        target={target}
-        className={`${style.link} ${className ? className : ''}`}
-        data-title={title}
-        rel={rel}
-        data-id={dataId}
-        onClick={onClick}
-        {...customProps}
-      >
-        {children}
-      </a>
-    );
-  }
-}
-
-ExternalLink.defaultProps = {
-  rel: 'noopener noreferrer',
-  target: '_blank',
-  customProps:{}
-};
-
-ExternalLink.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  href: PropTypes.string,
-  rel: PropTypes.string,
-  target: PropTypes.oneOf(['_blank', '_self']),
-  title: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps:PropTypes.object
-};
-
-if (__DOCS__) {
-  ExternalLink.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/ExternalLink/ExternalLink.module.css

@@ -1,4 +0,0 @@
-.link {
-  text-decoration: none;
-  color: inherit
-}

package/src/ExternalLink/__tests__/ExternalLink.spec.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import ExternalLink from '../ExternalLink';
-import renderer from 'react-test-renderer';
-
-describe('ExternalLink Component', () => {
-  it('should add http/https to href tag if it is not already present', () => {
-    const checkLinks = ['javascript:alert(1)', 'www.test.com', 'test.com', '#'];
-    checkLinks.forEach(link => {
-      let ele = renderer.create(
-        <ExternalLink href={link}>{link}</ExternalLink>
-      );
-      const renderedElement = ele.toJSON();
-      expect(renderedElement.props.href).toEqual(`http://${link}`);
-    });
-  });
-  it('should not add http/https to href tag if it is already present', () => {
-    let ele = renderer.create(
-      <ExternalLink href='https://www.google.com'>www.google.com</ExternalLink>
-    );
-    const renderedElement = ele.toJSON();
-    expect(renderedElement.props.href).toEqual('https://www.google.com');
-  });
-  it('should default to / if href is undefined', () => {
-    let ele = renderer.create(<ExternalLink>www.google.com</ExternalLink>);
-    const renderedElement = ele.toJSON();
-    expect(renderedElement.props.href).toEqual('javascript:void(0);');
-  });
-});

package/src/ExternalLink/docs/ExternalLink__default.docs.js

@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import ExternalLink from '../ExternalLink';
-
-export default class ExternalLink__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    ///agent/:orgName/:deptName/:moduleName/details/:moduleId
-
-    return (
-      <div>
-        <ExternalLink />
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ExternalLink__default.docs = {
-    componentGroup: 'Atom'
-  };
-}
-

package/src/FlipCard/FlipCard.js

@@ -1,193 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import AvatarUser from '../avatar/AvatarUser/AvatarUser';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
-import { Container } from '@zohodesk/components/lib/Layout';
-import ChannelIcon from '../ChannelIcon/ChannelIcon';
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
-import style from './FlipCard.module.css';
-import { stopBubbling } from '../utils/General';
-
-export default class FlipCard extends Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick(e) {
-    let { noNeedFlip } = this.props;
-    if (!noNeedFlip) {
-      stopBubbling(e);
-    }
-  }
-
-  onChange(isChecked, e) {
-    let { onChange } = this.props;
-    stopBubbling(e);
-    let { id } = this.props;
-    onChange(id, isChecked, e);
-  }
-
-  render() {
-    let {
-      id,
-      action,
-      name,
-      initial,
-      isChecked,
-      noNeedFlip,
-      size,
-      channel,
-      isPaidUser,
-      isPortalUser,
-      src,
-      icon,
-      iconSize,
-      iconClass,
-      ticListContainer,
-      ticList,
-      dataId,
-      className,
-      palette,
-      textPalette,
-      customTextClass,
-      frontClass,
-      needTitle,
-      iconColor,
-      tourId,
-      isFilledCheckbox,
-      channelTitle,
-      customProps
-    } = this.props;
-    const {
-      CheckBoxProps = {},
-      ChannelIconProps = {},
-      AvatarIconProps = {},
-      AvatarUserProps = {}
-    } = customProps;
-    return (
-      <div
-        className={`${AvatarSize(size)}  ${
-          noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip
-        }`}
-        onClick={this.onClick}
-        data-id={ticListContainer}
-        data-tour={tourId}
-      >
-        <div className={style.container} data-id={ticList}>
-          {!noNeedFlip ? (
-            <Container
-              align='both'
-              className={`${style.front} ${frontClass ? frontClass : ''}`}
-            >
-              <CheckBox
-                isFilled={isFilledCheckbox}
-                checked={isChecked}
-                onChange={this.onChange}
-                id={`checkbox_${id}`}
-                dataId={`listViewCheckBox_${id}`}
-                {...CheckBoxProps}
-              />
-            </Container>
-          ) : null}
-          <Container align='both' className={style.back}>
-            {channel && action ? (
-              <ChannelIcon
-                name={channel}
-                action={action}
-                size={size}
-                iconSize={iconSize}
-                iconClass={iconClass}
-                dataId={channel}
-                className={className}
-                palette={palette}
-                textPalette={textPalette}
-                customTextClass={customTextClass}
-                iconColor={iconColor}
-                title={channelTitle}
-                iconTitle={channelTitle}
-                {...ChannelIconProps}
-              />
-            ) : icon ? (
-              <AvatarIcon
-                name={icon}
-                iconSize={iconSize}
-                size={size}
-                iconClass={iconClass}
-                dataId={icon}
-                className={className}
-                iconColor={iconColor}
-                title={needTitle ? name : ''}
-                {...AvatarIconProps}
-              />
-            ) : (
-              <AvatarUser
-                name={name}
-                initial={initial}
-                size={size}
-                isPaid={isPaidUser}
-                isPortal={isPortalUser}
-                src={src}
-                dataId={dataId}
-                needTitle={needTitle}
-                palette={palette}
-                textPalette={textPalette}
-                customTextClass={customTextClass}
-                {...AvatarUserProps}
-              />
-            )}
-          </Container>
-        </div>
-      </div>
-    );
-  }
-}
-
-FlipCard.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,
-  iconClass: PropTypes.string,
-  iconColor: 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,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  ticList: PropTypes.string,
-  ticListContainer: PropTypes.string,
-  tourId: PropTypes.string,
-  customProps: PropTypes.shape({
-    CheckBoxProps: PropTypes.object,
-    ChannelIconProps: PropTypes.object,
-    AvatarIconProps: PropTypes.object,
-    AvatarUserProps: PropTypes.object
-  })
-};
-FlipCard.defaultProps = {
-  size: 'medium',
-  needTitle: true,
-  customProps: {}
-};
-if (__DOCS__) {
-  FlipCard.docs = {
-    componentGroup: 'Molecule'
-  };
-}

package/src/FlipCard/FlipCard.module.css

@@ -1,35 +0,0 @@
-.flip,
-.flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
-  color: var(--zdt_flipcard_default_text);
-}
-.container {
-  position: relative;
-  transition: var(--zd_transition3) all;
-  transform-style: preserve-3d;
-}
-.container,
-.front,
-.back {
-  width: inherit;
-  height: inherit;
-}
-.front,
-.back {
-  position: absolute;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-.front {
-  transform: rotateY(180deg) perspective(1px);
-}
-.back {
-  transform: rotateY(0deg) perspective(1px);
-}
-.notFlip .container {
-  transform: rotateY(180deg);
-}
-.flip:hover .container,
-.hoverContainer:hover .container {
-  transform: rotateY(180deg);
-}

package/src/FlipCard/docs/FlipCard__default.docs.js

@@ -1,76 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import FlipCard from '../FlipCard';
-
-export default class FlipCard__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { isChecked: false };
-  }
-
-  render() {
-    return (
-      <div>
-        <div>
-          <FlipCard
-            channel='email'
-            action='incoming'
-            id='test1'
-            onChange={(id, checked) => {
-              this.setState({ isChecked: checked });
-            }}
-            noNeedFlip
-            isChecked={this.state.isChecked}
-            size='xmedium'
-          />
-        </div>
-        <br />
-        <br />
-        <div>
-          <FlipCard
-            id='test2'
-            name='phone'
-            onChange={(id, checked) => {
-              this.setState({ isChecked: checked });
-            }}
-            isChecked={this.state.isChecked}
-            size='xmedium'
-          />
-        </div>
-        <br />
-        <br />
-        <div>
-          <FlipCard
-            id='test3'
-            name='EL'
-            isPaidUser
-            onChange={(id, checked) => {
-              this.setState({ isChecked: checked });
-            }}
-            isChecked={this.state.isChecked}
-            size='xmedium'
-          />
-        </div>
-        <br />
-        <br />
-        <div>
-          <FlipCard
-            id='test4'
-            name='BK'
-            isPortalUser
-            onChange={(id, checked) => {
-              this.setState({ isChecked: checked });
-            }}
-            isChecked={this.state.isChecked}
-            size='xmedium'
-          />
-        </div>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  FlipCard__default.docs = {
-    componentGroup: 'Molecule'
-  };
-}