@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/src/Drawer/Drawer.js

@@ -1,273 +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 Icon from '@zohodesk/icons/lib/Icon';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import FormAction from '../FormAction/FormAction';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import GridIcons from '../GridIcons/GridIcons';
-
-import style from './Drawer.module.css';
-
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/Responsive';
-export class Header extends React.Component {
-  render() {
-    let {
-      title,
-      onClose,
-      children,
-      className,
-      paddingSize,
-      closeTitle,
-      iconName,
-      iconSize,
-      onIconClick,
-      isIconBold,
-      dataId,
-      flexible
-    } = this.props;
-    return (
-      <CardHeader
-        className={`${style.header} ${style[`${paddingSize}HeaderPadding`]} ${
-          className ? className : ''
-        }`}
-        dataId={dataId}
-      >
-        <Container alignBox="row" align="vertical">
-          <Box flexible shrink>
-            <Container alignBox="row" align="vertical" isCover={false}>
-              {iconName ? (
-                <Box className={style.icon} shrink>
-                  <Icon
-                    name={iconName}
-                    size={iconSize}
-                    onClick={onIconClick}
-                    isBold={isIconBold}
-                  />
-                </Box>
-              ) : null}
-              {title ? (
-                <Box className={style.title} flexible={flexible} shrink>
-                  {title}
-                </Box>
-              ) : null}
-              {children}
-            </Container>
-          </Box>
-          {onClose ? (
-            <Box>
-              <GridIcons
-                onClick={onClose}
-                dataId="closeButton"
-                dataTitle={closeTitle}
-                iconName="ZD-cross"
-                iconSize="11"
-              />
-            </Box>
-          ) : null}
-        </Container>
-      </CardHeader>
-    );
-  }
-}
-
-Header.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  flexible: PropTypes.bool,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isIconBold: PropTypes.bool,
-  onClose: PropTypes.func,
-  onIconClick: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  title: PropTypes.string
-};
-Header.defaultProps = {
-  flexible: false
-};
-Header.defaultProps = {
-  paddingSize: 'small'
-};
-
-export class Content extends React.Component {
-  render() {
-    let { children, className, paddingSize, eleRef } = this.props;
-    return (
-      <CardContent
-        scroll="vertical"
-        isScrollAttribute
-        className={`${className ? className : ''} ${
-          paddingSize ? style[`${paddingSize}ContentPadding`] : ''
-        }`}
-        eleRef={eleRef}
-      >
-        {children}
-      </CardContent>
-    );
-  }
-}
-
-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 (
-      <FormAction
-        size={size}
-        paddingLeftSize={paddingLeftSize}
-        paddingRightClass={paddingRightClass}
-      >
-        {children}
-      </FormAction>
-    );
-  }
-}
-
-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 {
-  render() {
-    let {
-      children,
-      needFreeze,
-      palette,
-      size,
-      paddingSize,
-      isActive,
-      onClose,
-      forwardRef,
-      responsiveId
-    } = 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
-          ? React.cloneElement(child, {
-              paddingSize: childPaddingSize ? childPaddingSize : paddingSize
-            })
-          : child;
-      }
-      return child;
-    });
-    return needFreeze ? (
-      <FreezeLayer
-        onClick={onClose}
-        isActive={isActive}
-        animationName="fade"
-        childAnimationName="slideRight"
-        palette={palette}
-        forwardRef={forwardRef}
-      >
-        <Box flexible>
-          <Container alignBox="row">
-            <ResponsiveReceiver responsiveId={responsiveId}>
-              {({ deviceUpto, deviceBetween }) => (
-                <React.Fragment>
-                  {deviceUpto('TABLET') ? <Box flexible /> : null}
-                  <Box
-                    flexible
-                    className={
-                      deviceUpto('TABLET') ? style.mobModal : style.drawerModal
-                    }
-                    data-portal="drawerModal"
-                  ></Box>
-
-                  <Box
-                    className={`${style.container} ${
-                      deviceUpto('MOBILE') ? style.mbleSize : style[size]
-                    }`}
-                  >
-                    <Card
-                      onClick={e => {
-                        e.stopPropagation();
-                      }}
-                    >
-                      {childrenWithProps}
-                    </Card>
-                  </Box>
-                </React.Fragment>
-              )}
-            </ResponsiveReceiver>
-          </Container>
-        </Box>
-      </FreezeLayer>
-    ) : (
-      <VelocityAnimationGroup isActive={isActive} name="slideRight">
-        <ResponsiveReceiver responsiveId={responsiveId}>
-          {({ deviceUpto }) => (
-            <div
-              className={`${style.container} ${style.isOverlay} ${
-                deviceUpto('MOBILE') ? style.mbleSize : style[size]
-              } `}
-              ref={forwardRef}
-            >
-              <Card
-                onClick={e => {
-                  e.stopPropagation();
-                }}
-              >
-                {childrenWithProps}
-              </Card>
-            </div>
-          )}
-        </ResponsiveReceiver>
-      </VelocityAnimationGroup>
-    );
-  }
-}
-
-Drawer.propTypes = {
-  children: PropTypes.node,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  needFreeze: PropTypes.bool,
-  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'
-  ])
-};
-
-Drawer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  responsiveId: 'Helmet',
-  size: 'xsmall'
-};
-
-if (__DOCS__) {
-  Drawer.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

package/src/Drawer/Drawer.module.css

@@ -1,151 +0,0 @@
-.container {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
-  background-color: var(--dot_bg_white);
-  z-index: 5;
-  transition: width 0.3s;
-}
-
-.isOverlay {
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-.drawerModal {
-  position: relative;
-}
-.mobModal {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.xsmall {
-  width: var(--zd_size360);
-}
-
-.small {
-  width: var(--zd_size410);
-}
-
-.medium {
-  width: var(--zd_size660);
-}
-
-.xmedium {
-  width: 45.625rem;
-}
-
-.large {
-  width: var(--zd_size936);
-}
-.xlarge {
-  width: var(--zd_size840);
-}
-.xxlarge {
-  width: 71.375rem;
-}
-.mbleSize {
-  width: 100%;
-}
-
-/* .close {
-  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
-} */
-.header {
-  height: var(--zd_size51);
-  background-color: var(--dot_bg_catskillWhite);
-  border-bottom: solid 1px var(--dot_border_paleBlue);
-}
-
-.title {
-  color: var(--dot_text_black);
-  font: var(--zd_size16) var(--zd_semibold);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  padding: 0 var(--zd_size10) 0 0;
-}
-
-.footer {
-  border-top: 1px solid var(--dot_border_paleBlue);
-  position: relative;
-  background-color: var(--dot_bg_white);
-}
-
-.innerContainer {
-  padding: var(--zd_size10) 0;
-}
-
-.footer:after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  box-shadow: 0 -2px 4px -2px var(--zd_shadow_graytrans6);
-  top: calc(-1 * var(--zd_size1));
-  bottom: 0;
-  left: 15%;
-  right: 15%;
-  border-radius: var(--zd_size100) / var(--zd_size10);
-}
-
-.icon {
-  margin: 0 var(--zd_size10) 0 0;
-  color: var(--dot_text_bunker);
-}
-
-.icon > i {
-  display: block;
-}
-
-.buttonGap {
-  margin: 0 0 0 var(--zd_size12);
-}
-
-.smallHeaderPadding {
-  padding: 0 var(--zd_size15) 0 var(--zd_size25);
-}
-
-.smallContentPadding {
-  padding: 0 var(--zd_size25);
-}
-
-.smallFooterPadding {
-  padding: 0 0 0 var(--zd_size25);
-}
-
-.mediumHeaderPadding {
-  padding: 0 var(--zd_size15) 0 var(--zd_size30);
-}
-
-.mediumContentPadding {
-  padding: 0 var(--zd_size30);
-}
-
-.mediumFooterPadding {
-  padding: 0 0 0 var(--zd_size30);
-}
-
-.largeHeaderPadding {
-  padding: 0 var(--zd_size15) 0 var(--zd_size50);
-}
-
-.largeContentPadding {
-  padding: 0 var(--zd_size50);
-}
-
-.largeFooterPadding {
-  padding: 0 0 0 var(--zd_size50);
-}
-.pinContainer {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
-  border: 1px solid var(--dot_border_paleBlue);
-  border-radius: var(--zd_size4);
-  cursor: pointer;
-  margin-left: var(--zd_size10);
-}
-.pinContainer:hover {
-  border: solid 1px var(--dot_border_slateGrey);
-}

package/src/Drawer/docs/Drawer__default.docs.js

@@ -1,45 +0,0 @@
-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
-    };
-
-    this.onClose = this.onClose.bind(this);
-  }
-
-  onClose() {
-    this.setState({
-      isActive: false
-    });
-  }
-
-  render() {
-    let { isActive } = this.state;
-    return (
-      <Drawer isActive={isActive} needFreeze paddingSize='small'>
-        <Header
-          title='Add Component'
-          onClose={this.onClose}
-          iconName='zdDuetimeQueueNew'
-          iconSize='15'
-        />
-        <Content className={style.headerTest}>Content</Content>
-        <Footer>
-          <Button text='Save' palette='primaryFilled' />
-          <Button text='Cancel' palette='secondary' />
-        </Footer>
-      </Drawer>
-    );
-  }
-}
-if (__DOCS__) {
-  Drawer__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

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

@@ -1,21 +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',
-    folderName: 'Style Guide'
-  };
-}

package/src/ExternalLink/ExternalLink.js

@@ -1,57 +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) {
-    let site = url.toLowerCase();
-    let regEx = new RegExp(/((ftp|https|mailto|tel|http?):)/);
-    if (!regEx.test(site)) {
-      return `http://${site}`;
-    }
-    return site;
-  }
-  render() {
-    let { href, title, target, className, children, rel, dataId } = this.props;
-    let 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}
-      >
-        {children}
-      </a>
-    );
-  }
-}
-
-ExternalLink.defaultProps = {
-  rel: 'noopener noreferrer',
-  target: '_blank'
-};
-
-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
-};
-
-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'
-  };
-}
-