@zohodesk/dot 1.0.0-beta.209 → 1.0.0-beta.211

package/es/Drawer/Drawer.js

@@ -1,314 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import FreezeLayer from '../FreezeLayer/FreezeLayer';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import FormAction from '../FormAction/FormAction';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import IconButton from '../IconButton/IconButton';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import style from './Drawer.module.css';
-export class Header extends React.Component {
-  render() {
-    let {
-      title,
-      onClose,
-      children,
-      className,
-      paddingSize,
-      closeTitle,
-      iconName,
-      iconSize,
-      onIconClick,
-      isIconBold,
-      dataId,
-      flexible,
-      getChildren,
-      iconTitle,
-      isBoxIcon,
-      getTitleChildren
-    } = this.props;
-    return /*#__PURE__*/React.createElement(CardHeader, {
-      customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
-      dataId: dataId
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "vertical",
-      isCover: false,
-      className: style.subheader
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      isCover: false,
-      align: "vertical"
-    }, iconName ? /*#__PURE__*/React.createElement(Box, {
-      className: style.iconWrapper
-    }, isBoxIcon ? /*#__PURE__*/React.createElement(IconButton, {
-      iconName: iconName,
-      iconSize: iconSize,
-      onClick: onIconClick,
-      hoverType: "border",
-      isBold: isIconBold,
-      title: iconTitle
-    }) : /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      size: iconSize,
-      onClick: onIconClick,
-      title: iconTitle
-    })) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
-      flexible: flexible,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "vertical"
-    }, title ? /*#__PURE__*/React.createElement(Box, {
-      className: style.title,
-      "data-title": title,
-      shrink: true
-    }, title) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
-      onClick: onClose,
-      dataId: "closeButton",
-      title: closeTitle,
-      iconName: "ZD-cross",
-      iconSize: "11"
-    })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
-      isCover: false
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, getChildren())) : null);
-  }
-
-}
-Header.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  flexible: PropTypes.bool,
-  getChildren: PropTypes.func,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  iconTitle: PropTypes.string,
-  isIconBold: PropTypes.bool,
-  onClose: PropTypes.func,
-  onIconClick: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  title: PropTypes.string,
-  isBoxIcon: PropTypes.bool,
-  getTitleChildren: PropTypes.func
-};
-Header.defaultProps = {
-  flexible: false,
-  paddingSize: 'small',
-  isBoxIcon: true
-};
-export class Content extends React.Component {
-  render() {
-    let {
-      children,
-      className,
-      paddingSize,
-      eleRef
-    } = this.props;
-    return /*#__PURE__*/React.createElement(CardContent, {
-      scroll: "vertical",
-      isScrollAttribute: true,
-      customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
-      eleRef: eleRef
-    }, children);
-  }
-
-}
-Content.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  eleRef: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
-};
-export class Footer extends React.Component {
-  render() {
-    let {
-      paddingLeftSize,
-      paddingRightClass,
-      children,
-      size
-    } = this.props;
-    return /*#__PURE__*/React.createElement(FormAction, {
-      size: size,
-      paddingLeftSize: paddingLeftSize,
-      paddingRightClass: paddingRightClass
-    }, children);
-  }
-
-}
-Footer.propTypes = {
-  children: PropTypes.node,
-  paddingLeftSize: PropTypes.string,
-  paddingRightClass: PropTypes.string,
-  size: PropTypes.string
-};
-Footer.defaultProps = {
-  size: 'small'
-};
-export default class Drawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.drawers = this.drawers.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
-    this.getNextIndex = getZIndex(this);
-  }
-
-  drawers(uptoTablet, styleByResolutions) {
-    let {
-      children,
-      size,
-      paddingSize,
-      subDrawerActive,
-      subDrawerChildren,
-      onBodyClick
-    } = this.props;
-    let childrenWithProps = React.Children.map(children, child => {
-      if (child.type === Header || child.type === Footer || child.type === Content) {
-        let {
-          paddingSize: childPaddingSize
-        } = child.props || {};
-        return paddingSize || childPaddingSize ? /*#__PURE__*/React.cloneElement(child, {
-          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
-        }) : child;
-      }
-
-      return child;
-    });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
-      className: style.columns
-    }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: "slideRight",
-      isActive: subDrawerActive
-    }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
-      className: styleByResolutions,
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      }
-    }, childrenWithProps)));
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      uptoTablet: mediaQueryOR([{
-        maxWidth: 768
-      }])
-    };
-  }
-
-  render() {
-    let {
-      needFreeze,
-      palette,
-      isActive,
-      onClose,
-      forwardRef,
-      responsiveId,
-      subDrawerSize,
-      subDrawerClass,
-      subDrawerActive,
-      customClass,
-      needAutoZindex,
-      innerPortalName
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: responsiveId
-    }, _ref2 => {
-      let {
-        uptoTablet
-      } = _ref2;
-      let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
-      return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
-        onClick: onClose,
-        isActive: isActive,
-        animationName: "fade",
-        childAnimationName: "slideRight",
-        palette: palette,
-        forwardRef: forwardRef,
-        customClass: customClass,
-        needAutoZindex: needAutoZindex
-      }, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row"
-      }, /*#__PURE__*/React.createElement(React.Fragment, null, uptoTablet ? /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }) : null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        className: uptoTablet ? style.mobModal : style.drawerModal
-      }, !subDrawerActive && innerPortalName ? /*#__PURE__*/React.createElement("div", {
-        "data-portal": innerPortalName
-      }) : null)), this.drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-        isActive: isActive,
-        name: "slideRight"
-      }, /*#__PURE__*/React.createElement(Container, {
-        align: "right",
-        alignBox: "row",
-        scroll: "none",
-        eleRef: forwardRef,
-        className: `${style.isOverlay} ${customClass}`,
-        style: isActive && needAutoZindex ? {
-          zIndex: `${this.getNextIndex()}`
-        } : {}
-      }, this.drawers(uptoTablet, styleByResolutions)));
-    });
-  }
-
-}
-Drawer.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  needAutoZindex: PropTypes.bool,
-  needFreeze: PropTypes.bool,
-  onBodyClick: PropTypes.func,
-  onClose: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain']),
-  responsiveId: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default']),
-  subDrawerActive: PropTypes.bool,
-  subDrawerChildren: PropTypes.func,
-  subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
-};
-Drawer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  responsiveId: 'Helmet',
-  size: 'small',
-  subDrawerSize: 'small',
-  subDrawerActive: false,
-  subDrawerClass: '',
-  customClass: '',
-  needAutoZindex: true,
-  onBodyClick: () => {}
-};
-
-if (false) {
-  Drawer.docs = {
-    componentGroup: 'Template'
-  };
-}

package/es/Drawer/Drawer.module.css

@@ -1,151 +0,0 @@
-.container {
-  transition: width var(--zd_transition3);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
-  background-color: var(--zdt_drawer_default_bg);
-}
-.isOverlay {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  pointer-events: none;
-}
-[dir=ltr] .isOverlay {
-  right: 0;
-}
-[dir=rtl] .isOverlay {
-  left: 0;
-}
-.columns {
-  pointer-events: initial;
-}
-.drawerModal {
-  position: relative;
-}
-.secondDrawer {
-  background-color: var(--zdt_drawer_default_bg);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
-}
-.secondMobDrawer {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-}
-[dir=ltr] .secondMobDrawer {
-  right: 0;
-}
-[dir=rtl] .secondMobDrawer {
-  left: 0;
-}
-.mobModal {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-}
-[dir=ltr] .mobModal {
-  right: 0;
-  left: 0;
-}
-[dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
-}
-.xsmall {
-  width: var(--zd_size360);
-}
-.small {
-  width: var(--zd_size410);
-}
-.medium {
-  width: var(--zd_size660);
-}
-.xmedium {
-  width: var(--zd_size730);
-}
-.large {
-  width: var(--zd_size936);
-}
-.xlarge {
-  width: var(--zd_size840);
-}
-.xxlarge {
-  width: var(--zd_size1142);
-}
-.mbleSize,
-.default {
-  width: 100%;
-}
-.header {
-  min-height: var(--zd_size50);
-  background-color: var(--zdt_drawer_header_bg);
-  border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
-}
-.subheader {
-  min-height: var(--zd_size28);
-}
-.title {
-  color: var( --zdt_drawer_title_text);
-  font: var(--zd_font_size16) var(--zd_semibold);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0;
-}
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-[dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11);
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
-}
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
-}
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size50);
-}
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50);
-  padding-right: var(--zd_size50);
-}
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
-}
-[dir=ltr] .iconWrapper {
-  margin-right: var(--zd_size10);
-}
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
-}

package/es/ExternalLink/ExternalLink.js

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

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

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

@@ -1,27 +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( /*#__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);');
-  });
-});