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

package/es/Drawer/Drawer.js

@@ -1,347 +0,0 @@
-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';
-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 var Header = function (_React$Component) {
-  _inherits(Header, _React$Component);
-
-  function Header() {
-    _classCallCheck(this, Header);
-
-    return _possibleConstructorReturn(this, (Header.__proto__ || _Object$getPrototypeOf(Header)).apply(this, arguments));
-  }
-
-  _createClass(Header, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          title = _props.title,
-          onClose = _props.onClose,
-          children = _props.children,
-          className = _props.className,
-          paddingSize = _props.paddingSize,
-          closeTitle = _props.closeTitle,
-          iconName = _props.iconName,
-          iconSize = _props.iconSize,
-          onIconClick = _props.onIconClick,
-          isIconBold = _props.isIconBold,
-          dataId = _props.dataId,
-          flexible = _props.flexible;
-
-      return React.createElement(
-        CardHeader,
-        {
-          className: style.header + ' ' + style[paddingSize + 'HeaderPadding'] + ' ' + (className ? className : ''),
-          dataId: dataId
-        },
-        React.createElement(
-          Container,
-          { alignBox: 'row', align: 'vertical' },
-          React.createElement(
-            Box,
-            { flexible: true, shrink: true },
-            React.createElement(
-              Container,
-              { alignBox: 'row', align: 'vertical', isCover: false },
-              iconName ? React.createElement(
-                Box,
-                { className: style.icon, shrink: true },
-                React.createElement(Icon, {
-                  name: iconName,
-                  size: iconSize,
-                  onClick: onIconClick,
-                  isBold: isIconBold
-                })
-              ) : null,
-              title ? React.createElement(
-                Box,
-                { className: style.title, flexible: flexible, shrink: true },
-                title
-              ) : null,
-              children
-            )
-          ),
-          onClose ? React.createElement(
-            Box,
-            null,
-            React.createElement(GridIcons, {
-              onClick: onClose,
-              dataId: 'closeButton',
-              dataTitle: closeTitle,
-              iconName: 'ZD-cross',
-              iconSize: '11'
-            })
-          ) : null
-        )
-      );
-    }
-  }]);
-
-  return Header;
-}(React.Component);
-
-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 var Content = function (_React$Component2) {
-  _inherits(Content, _React$Component2);
-
-  function Content() {
-    _classCallCheck(this, Content);
-
-    return _possibleConstructorReturn(this, (Content.__proto__ || _Object$getPrototypeOf(Content)).apply(this, arguments));
-  }
-
-  _createClass(Content, [{
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          children = _props2.children,
-          className = _props2.className,
-          paddingSize = _props2.paddingSize,
-          eleRef = _props2.eleRef;
-
-      return React.createElement(
-        CardContent,
-        {
-          scroll: 'vertical',
-          isScrollAttribute: true,
-          className: (className ? className : '') + ' ' + (paddingSize ? style[paddingSize + 'ContentPadding'] : ''),
-          eleRef: eleRef
-        },
-        children
-      );
-    }
-  }]);
-
-  return Content;
-}(React.Component);
-
-Content.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  eleRef: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
-};
-
-export var Footer = function (_React$Component3) {
-  _inherits(Footer, _React$Component3);
-
-  function Footer() {
-    _classCallCheck(this, Footer);
-
-    return _possibleConstructorReturn(this, (Footer.__proto__ || _Object$getPrototypeOf(Footer)).apply(this, arguments));
-  }
-
-  _createClass(Footer, [{
-    key: 'render',
-    value: function render() {
-      var _props3 = this.props,
-          paddingLeftSize = _props3.paddingLeftSize,
-          paddingRightClass = _props3.paddingRightClass,
-          children = _props3.children,
-          size = _props3.size;
-
-      return React.createElement(
-        FormAction,
-        {
-          size: size,
-          paddingLeftSize: paddingLeftSize,
-          paddingRightClass: paddingRightClass
-        },
-        children
-      );
-    }
-  }]);
-
-  return Footer;
-}(React.Component);
-
-Footer.propTypes = {
-  children: PropTypes.node,
-  paddingLeftSize: PropTypes.string,
-  paddingRightClass: PropTypes.string,
-  size: PropTypes.string
-};
-Footer.defaultProps = {
-  size: 'small'
-};
-
-var Drawer = function (_React$Component4) {
-  _inherits(Drawer, _React$Component4);
-
-  function Drawer() {
-    _classCallCheck(this, Drawer);
-
-    return _possibleConstructorReturn(this, (Drawer.__proto__ || _Object$getPrototypeOf(Drawer)).apply(this, arguments));
-  }
-
-  _createClass(Drawer, [{
-    key: 'render',
-    value: function render() {
-      var _props4 = this.props,
-          children = _props4.children,
-          needFreeze = _props4.needFreeze,
-          palette = _props4.palette,
-          size = _props4.size,
-          paddingSize = _props4.paddingSize,
-          isActive = _props4.isActive,
-          onClose = _props4.onClose,
-          forwardRef = _props4.forwardRef,
-          responsiveId = _props4.responsiveId;
-
-      var childrenWithProps = React.Children.map(children, function (child) {
-        if (child.type === Header || child.type === Footer || child.type === Content) {
-          var _ref = child.props || {},
-              childPaddingSize = _ref.paddingSize;
-
-          return paddingSize || childPaddingSize ? React.cloneElement(child, {
-            paddingSize: childPaddingSize ? childPaddingSize : paddingSize
-          }) : child;
-        }
-        return child;
-      });
-      return needFreeze ? React.createElement(
-        FreezeLayer,
-        {
-          onClick: onClose,
-          isActive: isActive,
-          animationName: 'fade',
-          childAnimationName: 'slideRight',
-          palette: palette,
-          forwardRef: forwardRef
-        },
-        React.createElement(
-          Box,
-          { flexible: true },
-          React.createElement(
-            Container,
-            { alignBox: 'row' },
-            React.createElement(
-              ResponsiveReceiver,
-              { responsiveId: responsiveId },
-              function (_ref2) {
-                var deviceUpto = _ref2.deviceUpto,
-                    deviceBetween = _ref2.deviceBetween;
-                return React.createElement(
-                  React.Fragment,
-                  null,
-                  deviceUpto('TABLET') ? React.createElement(Box, { flexible: true }) : null,
-                  React.createElement(Box, {
-                    flexible: true,
-                    className: deviceUpto('TABLET') ? style.mobModal : style.drawerModal,
-                    'data-portal': 'drawerModal'
-                  }),
-                  React.createElement(
-                    Box,
-                    {
-                      className: style.container + ' ' + (deviceUpto('MOBILE') ? style.mbleSize : style[size])
-                    },
-                    React.createElement(
-                      Card,
-                      {
-                        onClick: function onClick(e) {
-                          e.stopPropagation();
-                        }
-                      },
-                      childrenWithProps
-                    )
-                  )
-                );
-              }
-            )
-          )
-        )
-      ) : React.createElement(
-        VelocityAnimationGroup,
-        { isActive: isActive, name: 'slideRight' },
-        React.createElement(
-          ResponsiveReceiver,
-          { responsiveId: responsiveId },
-          function (_ref3) {
-            var deviceUpto = _ref3.deviceUpto;
-            return React.createElement(
-              'div',
-              {
-                className: style.container + ' ' + style.isOverlay + ' ' + (deviceUpto('MOBILE') ? style.mbleSize : style[size]) + ' ',
-                ref: forwardRef
-              },
-              React.createElement(
-                Card,
-                {
-                  onClick: function onClick(e) {
-                    e.stopPropagation();
-                  }
-                },
-                childrenWithProps
-              )
-            );
-          }
-        )
-      );
-    }
-  }]);
-
-  return Drawer;
-}(React.Component);
-
-export default Drawer;
-
-
-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 (false) {
-  Drawer.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

package/es/Drawer/Drawer.module.css

@@ -1,219 +0,0 @@
-.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);
-}
-
-.isOverlay {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-[dir=ltr] .isOverlay {
-  right: 0;
-}
-
-[dir=rtl] .isOverlay {
-  left: 0;
-}
-
-.drawerModal {
-  position: relative;
-}
-.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: 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';
-}
-
-[dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0;
-}
-
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-
-.footer {
-  position: relative;
-  border-top: 1px solid var(--dot_border_paleBlue);
-  background-color: var(--dot_bg_white);
-}
-
-.innerContainer {
-  padding: var(--zd_size10) 0;
-}
-
-.footer:after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  top: calc(-1 * var(--zd_size1));
-  bottom: 0;
-  box-shadow: 0 -2px 4px -2px var(--zd_shadow_graytrans6);
-  border-radius: var(--zd_size100) / var(--zd_size10);
-}
-
-[dir=ltr] .footer:after {
-  left: 15%;
-  right: 15%;
-}
-
-[dir=rtl] .footer:after {
-  right: 15%;
-  left: 15%;
-}
-
-.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;
-}
-
-[dir=ltr] .buttonGap {
-  margin: 0 0 0 var(--zd_size12);
-}
-
-[dir=rtl] .buttonGap {
-  margin: 0 var(--zd_size12) 0 0;
-}
-
-[dir=ltr] .smallHeaderPadding {
-  padding: 0 var(--zd_size15) 0 var(--zd_size25);
-}
-
-[dir=rtl] .smallHeaderPadding {
-  padding: 0 var(--zd_size25) 0 var(--zd_size15);
-}
-
-.smallContentPadding {
-  padding: 0 var(--zd_size25);
-}
-
-[dir=ltr] .smallFooterPadding {
-  padding: 0 0 0 var(--zd_size25);
-}
-
-[dir=rtl] .smallFooterPadding {
-  padding: 0 var(--zd_size25) 0 0;
-}
-
-[dir=ltr] .mediumHeaderPadding {
-  padding: 0 var(--zd_size15) 0 var(--zd_size30);
-}
-
-[dir=rtl] .mediumHeaderPadding {
-  padding: 0 var(--zd_size30) 0 var(--zd_size15);
-}
-
-.mediumContentPadding {
-  padding: 0 var(--zd_size30);
-}
-
-[dir=ltr] .mediumFooterPadding {
-  padding: 0 0 0 var(--zd_size30);
-}
-
-[dir=rtl] .mediumFooterPadding {
-  padding: 0 var(--zd_size30) 0 0;
-}
-
-[dir=ltr] .largeHeaderPadding {
-  padding: 0 var(--zd_size15) 0 var(--zd_size50);
-}
-
-[dir=rtl] .largeHeaderPadding {
-  padding: 0 var(--zd_size50) 0 var(--zd_size15);
-}
-
-.largeContentPadding {
-  padding: 0 var(--zd_size50);
-}
-
-[dir=ltr] .largeFooterPadding {
-  padding: 0 0 0 var(--zd_size50);
-}
-
-[dir=rtl] .largeFooterPadding {
-  padding: 0 var(--zd_size50) 0 0;
-}
-.pinContainer {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
-  border: 1px solid var(--dot_border_paleBlue);
-  border-radius: var(--zd_size4);
-  cursor: pointer;
-}
-[dir=ltr] .pinContainer {
-  margin-left: var(--zd_size10);
-}
-[dir=rtl] .pinContainer {
-  margin-right: var(--zd_size10);
-}
-.pinContainer:hover {
-  border: solid 1px var(--dot_border_slateGrey);
-}

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

@@ -1,73 +0,0 @@
-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';
-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';
-
-var Drawer__default = function (_React$Component) {
-  _inherits(Drawer__default, _React$Component);
-
-  function Drawer__default(props) {
-    _classCallCheck(this, Drawer__default);
-
-    var _this = _possibleConstructorReturn(this, (Drawer__default.__proto__ || _Object$getPrototypeOf(Drawer__default)).call(this, props));
-
-    _this.state = {
-      isActive: true
-    };
-
-    _this.onClose = _this.onClose.bind(_this);
-    return _this;
-  }
-
-  _createClass(Drawer__default, [{
-    key: 'onClose',
-    value: function onClose() {
-      this.setState({
-        isActive: false
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var isActive = this.state.isActive;
-
-      return React.createElement(
-        Drawer,
-        { isActive: isActive, needFreeze: true, paddingSize: 'small' },
-        React.createElement(Header, {
-          title: 'Add Component',
-          onClose: this.onClose,
-          iconName: 'zdDuetimeQueueNew',
-          iconSize: '15'
-        }),
-        React.createElement(
-          Content,
-          { className: style.headerTest },
-          'Content'
-        ),
-        React.createElement(
-          Footer,
-          null,
-          React.createElement(Button, { text: 'Save', palette: 'primaryFilled' }),
-          React.createElement(Button, { text: 'Cancel', palette: 'secondary' })
-        )
-      );
-    }
-  }]);
-
-  return Drawer__default;
-}(React.Component);
-
-export default Drawer__default;
-
-if (false) {
-  Drawer__default.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}

package/es/Drawer/docs/Drawer__noFreeze.docs.js

@@ -1,43 +0,0 @@
-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';
-import React from 'react';
-import Drawer from '../Drawer';
-
-var Drawer__noFreeze = function (_React$Component) {
-  _inherits(Drawer__noFreeze, _React$Component);
-
-  function Drawer__noFreeze(props) {
-    _classCallCheck(this, Drawer__noFreeze);
-
-    return _possibleConstructorReturn(this, (Drawer__noFreeze.__proto__ || _Object$getPrototypeOf(Drawer__noFreeze)).call(this, props));
-  }
-
-  _createClass(Drawer__noFreeze, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        Drawer,
-        { isActive: true },
-        React.createElement(
-          'div',
-          null,
-          'Children'
-        )
-      );
-    }
-  }]);
-
-  return Drawer__noFreeze;
-}(React.Component);
-
-export default Drawer__noFreeze;
-
-if (false) {
-  Drawer__noFreeze.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
-  };
-}