@zohodesk/dot 1.0.0-temp.213 → 1.0.0-temp.999

package/es/Drawer/docs/Drawer__default.docs.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Drawer, { Header, Content, Footer } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+export default class Drawer__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      size: 'xsmall'
+    };
+    this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("p", null, "getChildren");
+  }
+
+  render() {
+    let {
+      isActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: false,
+      paddingSize: "small",
+      size: size
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Add Component",
+      onClose: this.onClose,
+      iconName: "ZD-zdDuetimeQueueNew",
+      iconSize: "15",
+      align: "column",
+      getChildren: this.getFooter
+    }, /*#__PURE__*/React.createElement("span", null, "children")), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Button, {
+      text: "Save",
+      palette: "primaryFilled"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "Cancel",
+      palette: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -0,0 +1,112 @@
+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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+      title: "Second Drawer",
+      onClose: this.closeSubDrawer
+    }), /*#__PURE__*/React.createElement(Content, {
+      paddingSize: "small"
+    }, /*#__PURE__*/React.createElement("div", null, "Hi, I am Second Drawer Content Area")));
+  }
+
+  render() {
+    let {
+      isActive,
+      subDrawerActive,
+      size
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: true,
+      paddingSize: "small",
+      subDrawerActive: subDrawerActive,
+      subDrawerSize: "small",
+      onClose: this.closeDrawers,
+      subDrawerChildren: this.subDrawerChildren(),
+      size: size,
+      needAutoZindex: true
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "First Drawer",
+      onClose: this.onClose
+    }), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.openSecondDrawer
+    }, "Click here to Open Second Drawer ..:-)"), /*#__PURE__*/React.createElement(Button, {
+      text: "small",
+      onClick: this.changeSize.bind(this, 'small')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xsmall",
+      onClick: this.changeSize.bind(this, 'xsmall')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "medium",
+      onClick: this.changeSize.bind(this, 'medium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xmedium",
+      onClick: this.changeSize.bind(this, 'xmedium')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "large",
+      onClick: this.changeSize.bind(this, 'large')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xlarge",
+      onClick: this.changeSize.bind(this, 'xlarge')
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "xxlarge",
+      onClick: this.changeSize.bind(this, 'xxlarge')
+    })));
+  }
+
+}
+
+if (false) {
+  Drawer__multiDrawer.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/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 /*#__PURE__*/React.createElement(Drawer, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "Children"));
+  }
+
+}
+
+if (false) {
+  Drawer__noFreeze.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/docs/Drawer__withModal.docs.js

@@ -0,0 +1,74 @@
+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 /*#__PURE__*/React.createElement(Drawer, {
+      isActive: isActive,
+      needFreeze: true,
+      paddingSize: "small",
+      onClose: this.closeDrawers,
+      innerPortalName: uniqueId
+    }, /*#__PURE__*/React.createElement(Header, {
+      title: "Drawer with Modal",
+      onClose: this.onClose
+    }), /*#__PURE__*/React.createElement(Content, {
+      className: style.headerTest
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: this.openModal
+    }, "Click here to Open Modal ..:-)"), modalActive ? /*#__PURE__*/React.createElement(Modal, {
+      portalId: uniqueId
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '90%',
+        height: '400px',
+        background: '#fff',
+        margin: '50px auto'
+      }
+    }, "Drawer Modal")) : null));
+  }
+
+}
+
+if (false) {
+  Drawer__withModal.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/ExternalLink/ExternalLink.js

@@ -0,0 +1,66 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** 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 /*#__PURE__*/React.createElement("a", _extends({
+      href: urlOutput,
+      target: target,
+      className: `${style.link} ${className ? className : ''}`,
+      "data-title": title,
+      rel: rel,
+      "data-id": dataId,
+      onClick: onClick
+    }, customProps), children);
+  }
+
+}
+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 (false) {
+  ExternalLink.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/ExternalLink/ExternalLink.module.css

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

package/es/ExternalLink/__tests__/ExternalLink.spec.js

@@ -0,0 +1,27 @@
+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( /*#__PURE__*/React.createElement(ExternalLink, {
+        href: link
+      }, link));
+      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( /*#__PURE__*/React.createElement(ExternalLink, {
+      href: "https://www.google.com"
+    }, "www.google.com"));
+    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( /*#__PURE__*/React.createElement(ExternalLink, null, "www.google.com"));
+    const renderedElement = ele.toJSON();
+    expect(renderedElement.props.href).toEqual('javascript:void(0);');
+  });
+});

package/es/ExternalLink/docs/ExternalLink__default.docs.js

@@ -0,0 +1,19 @@
+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 /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExternalLink, null));
+  }
+
+}
+
+if (false) {
+  ExternalLink__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/FlipCard/FlipCard.js

@@ -0,0 +1,183 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 /*#__PURE__*/React.createElement("div", {
+      className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
+      onClick: this.onClick,
+      "data-id": ticListContainer,
+      "data-tour": tourId
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.container,
+      "data-id": ticList
+    }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: `${style.front} ${frontClass ? frontClass : ''}`
+    }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+      isFilled: isFilledCheckbox,
+      checked: isChecked,
+      onChange: this.onChange,
+      id: `checkbox_${id}`,
+      dataId: `listViewCheckBox_${id}`
+    }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.back
+    }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
+      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 ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
+      name: icon,
+      iconSize: iconSize,
+      size: size,
+      iconClass: iconClass,
+      dataId: icon,
+      className: className,
+      iconColor: iconColor,
+      title: needTitle ? name : ''
+    }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
+      name: name,
+      initial: initial,
+      size: size,
+      isPaid: isPaidUser,
+      isPortal: isPortalUser,
+      src: src,
+      dataId: dataId,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customTextClass: customTextClass
+    }, AvatarUserProps)))));
+  }
+
+}
+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 (false) {
+  FlipCard.docs = {
+    componentGroup: 'Molecule'
+  };
+}

package/es/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/es/FlipCard/docs/FlipCard__default.docs.js

@@ -0,0 +1,66 @@
+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 /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "email",
+      action: "incoming",
+      id: "test1",
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      noNeedFlip: true,
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test2",
+      name: "phone",
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test3",
+      name: "EL",
+      isPaidUser: true,
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test4",
+      name: "BK",
+      isPortalUser: true,
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })));
+  }
+
+}
+
+if (false) {
+  FlipCard__default.docs = {
+    componentGroup: 'Molecule'
+  };
+}