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

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

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

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

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

@@ -0,0 +1,75 @@
+/**** 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

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

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

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

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

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

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

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