@zohodesk/dot 1.0.0-beta.26 → 1.0.0-beta.260

package/es/Drawer/Drawer.module.css

@@ -1,133 +1,191 @@
 .container {
-  z-index: 5;
-  transition: width 0.3s;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
-  background-color: var(--dot_bg_white);
+  transition: width var(--zd_transition3);
+  box-shadow: var(--zd_bs_drawer_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: var(--zd_bs_drawer_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);
+  width: 360px;
 }
+
 .small {
-  width: var(--zd_size410);
+  width: 410px;
 }
+
 .medium {
-  width: var(--zd_size660);
+  width: 660px;
 }
+
 .xmedium {
-  width: 45.625rem;
+  width: 730px;
 }
+
 .large {
-  width: var(--zd_size936);
+  width: 936px;
 }
+
 .xlarge {
-  width: var(--zd_size840);
+  width: 840px;
 }
+
 .xxlarge {
-  width: 71.375rem;
+  width: 1142px;
 }
-.mbleSize {
+
+.mbleSize,
+.default {
   width: 100%;
 }
+
 .header {
-  height: var(--zd_size51);
-  background-color: var(--dot_bg_catskillWhite);
-  border-bottom: solid 1px var(--dot_border_paleBlue);
+  min-height: 50px;
+  background-color: var(--zdt_drawer_header_bg);
+  border-bottom: solid 1px var(--zdt_drawer_header_border);
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.subheader {
+  min-height: 28px;
 }
+
 .title {
-  color: var(--dot_text_black);
-  font: var(--zd_size16) var(--zd_semibold);
+  color: var(--zdt_drawer_title_text);
+  font-family: var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: 16px;
 }
+
 [dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0;
+  padding: 0 10px 0 0;
 }
+
 [dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-.icon {
-  color: var(--dot_text_bunker);
-}
-[dir=ltr] .icon {
-  margin: 0 var(--zd_size10) 0 0;
-}
-[dir=rtl] .icon {
-  margin: 0 0 0 var(--zd_size10);
-}
-.icon > i {
-  display: block;
+  padding: 0 0 0 10px;
 }
+
 [dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size25);
+  padding-right: 11px;
+  padding-left: 30px;
 }
+
 [dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size25);
+  padding-left: 11px;
+  padding-right: 30px;
 }
+
 [dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size25);
-  padding-right: var(--zd_size25);
+  padding-left: 30px;
+  padding-right: 30px;
 }
+
 [dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size25);
-  padding-left: var(--zd_size25);
+  padding-right: 30px;
+  padding-left: 30px;
 }
+
 [dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size30);
+  padding-right: 15px;
+  padding-left: 30px;
 }
+
 [dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
+  padding-left: 15px;
+  padding-right: 30px;
 }
+
 [dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
+  padding-left: 30px;
+  padding-right: 30px;
 }
+
 [dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
+  padding-right: 30px;
+  padding-left: 30px;
 }
+
 [dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size50);
+  padding-right: 15px;
+  padding-left: 50px;
 }
+
 [dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
+  padding-left: 15px;
+  padding-right: 50px;
 }
+
 [dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50);
-  padding-right: var(--zd_size50);
+  padding-left: 50px;
+  padding-right: 50px;
 }
+
 [dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
+  padding-right: 50px;
+  padding-left: 50px;
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: 10px;
 }
+
+[dir=rtl] .iconWrapper {
+  margin-left: 10px;
+}

package/es/Drawer/index.js

@@ -0,0 +1 @@
+export { Header, Content, Footer, default as Drawer } from './Drawer';

package/es/Drawer/props/defaultProps.js

@@ -0,0 +1,21 @@
+export const Header_defaultProps = {
+  flexible: false,
+  paddingSize: 'small',
+  isBoxIcon: true
+};
+export const Footer_defaultProps = {
+  size: 'small'
+};
+export const Drawer_defaultProps = {
+  isActive: false,
+  palette: 'default',
+  responsiveId: 'Helmet',
+  size: 'small',
+  subDrawerSize: 'small',
+  subDrawerActive: false,
+  subDrawerClass: '',
+  customClass: '',
+  needAutoZindex: true,
+  onBodyClick: () => {},
+  needFocusScope: false
+};

package/es/Drawer/props/propTypes.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+export const 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
+};
+export const Content_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  eleRef: PropTypes.func,
+  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+export const Footer_propTypes = {
+  children: PropTypes.node,
+  paddingLeftSize: PropTypes.string,
+  paddingRightClass: PropTypes.string,
+  size: PropTypes.string
+};
+export const 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']),
+  needFocusScope: PropTypes.bool
+};

package/es/ExternalLink/ExternalLink.js

@@ -1,85 +1,48 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 
 /**** CSS ****/
 import style from './ExternalLink.module.css';
-
-var ExternalLink = function (_React$Component) {
-  _inherits(ExternalLink, _React$Component);
-
-  function ExternalLink() {
-    _classCallCheck(this, ExternalLink);
-
-    return _possibleConstructorReturn(this, (ExternalLink.__proto__ || _Object$getPrototypeOf(ExternalLink)).apply(this, arguments));
-  }
-
-  _createClass(ExternalLink, [{
-    key: 'addHttp',
-    value: function addHttp(url) {
-      var site = url.toLowerCase();
-      var regEx = new RegExp(/((ftp|https|mailto|tel|http?):)/);
-      if (!regEx.test(site)) {
-        return 'http://' + site;
-      }
-      return site;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          href = _props.href,
-          title = _props.title,
-          target = _props.target,
-          className = _props.className,
-          children = _props.children,
-          rel = _props.rel,
-          dataId = _props.dataId;
-
-      var urlOutput = href && typeof href != 'boolean' ? this.addHttp(String(href)) : 'javascript:void(0);';
-      return React.createElement(
-        'a',
-        {
-          href: urlOutput,
-          target: target,
-          className: style.link + ' ' + (className ? className : ''),
-          'data-title': title,
-          rel: rel,
-          'data-id': dataId
-        },
-        children
-      );
+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 ExternalLink;
-}(React.Component);
-
-export default ExternalLink;
-
-
-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 (false) {
-  ExternalLink.docs = {
-    componentGroup: 'Atom'
-  };
-}
+    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 = defaultProps;
+ExternalLink.propTypes = propTypes;
+
+// if (__DOCS__) {
+//   ExternalLink.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ExternalLink/ExternalLink.module.css

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

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

@@ -1,36 +1,27 @@
 import React from 'react';
 import ExternalLink from '../ExternalLink';
 import renderer from 'react-test-renderer';
-
-describe('ExternalLink Component', function () {
-  it('should add http/https to href tag if it is not already present', function () {
-    var checkLinks = ['javascript:alert(1)', 'www.test.com', 'test.com', '#'];
-    checkLinks.forEach(function (link) {
-      var ele = renderer.create(React.createElement(
-        ExternalLink,
-        { href: link },
-        link
-      ));
-      var renderedElement = ele.toJSON();
-      expect(renderedElement.props.href).toEqual('http://' + link);
+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', function () {
-    var ele = renderer.create(React.createElement(
-      ExternalLink,
-      { href: 'https://www.google.com' },
-      'www.google.com'
-    ));
-    var renderedElement = ele.toJSON();
+  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', function () {
-    var ele = renderer.create(React.createElement(
-      ExternalLink,
-      null,
-      'www.google.com'
-    ));
-    var renderedElement = ele.toJSON();
+  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/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  rel: 'noopener noreferrer',
+  target: '_blank',
+  customProps: {}
+};

package/es/ExternalLink/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const 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
+};