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

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'
+  };
+}

package/src/FormAction/FormAction.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './FormAction.module.css';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export const LeftSide = props => {
+  props.children;
+};
+export const RightSide = props => {
+  props.children;
+};
+export const Center = props => {
+  props.children;
+};
+
+export default class FormAction extends React.Component {
+  render() {
+    let { size, children, paddingLeftSize, paddingRightClass } = this.props;
+    let leftbuttonGroup = [],
+      rightbuttonGroup = [],
+      centerbuttonGroup = [];
+    React.Children.map(children, child => {
+      if (!child) {
+        return child;
+      } else if (child.type === LeftSide) {
+        leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
+      } else if (child.type === RightSide) {
+        rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
+      } else if (child.type === Center) {
+        centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
+      } else {
+        leftbuttonGroup.push(child);
+      }
+    });
+
+    let hasLeftChild = leftbuttonGroup.length > 0;
+
+    let hasRightChild = rightbuttonGroup.length > 0;
+
+    let hasCenterChild = centerbuttonGroup.length > 0;
+    return (
+      <div className={style.wrapperDiv}>
+        <Container
+          alignBox='row'
+          isCover={false}
+          align={
+            hasCenterChild
+              ? 'around'
+              : hasRightChild && !hasLeftChild
+                ? 'right'
+                : null
+          }
+          className={` 
+                        ${`${style.footerParent} ${
+        hasCenterChild
+          ? ''
+          : style[
+            `${
+              paddingLeftSize ? paddingLeftSize : size
+            }Padding`
+          ]
+      } ${paddingRightClass}`}
+
+                        ${style[`${size}Footer`]}
+                    `}
+        >
+          {hasLeftChild ? (
+            <Box
+              flexible={hasRightChild ? true : false}
+              shrink={!hasRightChild && hasLeftChild ? true : false}
+            >
+              {leftbuttonGroup.length > 1
+                ? leftbuttonGroup.map(item => (
+                  <div className={style.marginRight}>{item}</div>
+                ))
+                : leftbuttonGroup[0]}
+            </Box>
+          ) : null}
+          {hasRightChild ? (
+            <Box shrink={hasRightChild && !hasLeftChild ? true : false}>
+              {rightbuttonGroup.length > 1
+                ? rightbuttonGroup.map(item => (
+                  <div className={style.marginRight}>{item}</div>
+                ))
+                : rightbuttonGroup[0]}
+            </Box>
+          ) : null}
+          {hasCenterChild ? (
+            <Box>
+              {centerbuttonGroup.length > 1
+                ? centerbuttonGroup.map((item, index) => (
+                  <div className={style.marginRight} key={index}>
+                    {item}
+                  </div>
+                ))
+                : centerbuttonGroup[0]}
+            </Box>
+          ) : null}
+        </Container>
+      </div>
+    );
+  }
+}
+
+FormAction.propTypes = {
+  children: PropTypes.node,
+  paddingLeftSize: PropTypes.oneOf([
+    'large',
+    'medium',
+    'xmedium',
+    'small',
+    'xsmall'
+  ]),
+  paddingRightClass: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small'])
+};
+
+FormAction.defaultProps = {
+  size: 'medium',
+  paddingRightClass: ''
+};
+
+if (__DOCS__) {
+  FormAction.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/src/FormAction/FormAction.module.css

@@ -0,0 +1,57 @@
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
+.wrapperDiv {
+  position: relative;
+  z-index: 1;
+  composes: varClass;
+}
+.footerParent {
+  position: relative;
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
+}
+.largeFooter {
+  padding-top: var(--zd_size24);
+  padding-bottom: var(--zd_size24);
+}
+.mediumFooter {
+  padding-top: var(--zd_size20);
+  padding-bottom: var(--zd_size20);
+}
+.smallFooter {
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
+}
+
+.largePadding {
+  padding-left: var(--zd_size60);
+}
+.mediumPadding {
+  padding-left: var(--zd_size50);
+}
+.xmediumPadding {
+  padding-left: var(--zd_size30);
+}
+.smallPadding {
+  padding-left: var(--zd_size25);
+}
+.xsmallPadding {
+  padding-left: var(--zd_size20);
+}
+
+.marginRight {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+}
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
+  margin-right: var(--zd_size15);
+}
+.smallFooter .marginRight {
+  margin-right: var(--zd_size12);
+}
+
+.marginRight:last-child {
+  margin-right: 0;
+}