@zohodesk/dot 1.0.0-beta.18 → 1.0.0-beta.180

package/src/Drawer/Drawer.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import style from './Drawer.module.css';
 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 { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/Responsive';
+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 {
@@ -22,49 +27,77 @@ export class Header extends React.Component {
       onIconClick,
       isIconBold,
       dataId,
-      flexible
+      flexible,
+      getChildren,
+      iconTitle,
+      isBoxIcon
     } = this.props;
     return (
       <CardHeader
-        className={`${style.header} ${style[`${paddingSize}HeaderPadding`]} ${
+        customClass={`${style.header} ${style[`${paddingSize}HeaderPadding`]} ${
           className ? className : ''
         }`}
         dataId={dataId}
       >
-        <Container alignBox='row' align='vertical'>
+        <Container
+          alignBox='row'
+          align='vertical'
+          isCover={false}
+          className={style.subheader}
+        >
           <Box flexible shrink>
-            <Container alignBox='row' align='vertical' isCover={false}>
+            <Container alignBox='row' isCover={false} align='vertical'>
               {iconName ? (
-                <Box className={style.icon} shrink>
-                  <Icon
-                    name={iconName}
-                    size={iconSize}
-                    onClick={onIconClick}
-                    isBold={isIconBold}
-                  />
+                <Box className={style.iconWrapper}>
+                  {isBoxIcon ? (
+                    <IconButton
+                      iconName={iconName}
+                      iconSize={iconSize}
+                      onClick={onIconClick}
+                      hoverType='border'
+                      isBold={isIconBold}
+                      title={iconTitle}
+                    />
+                  ) : (
+                    <Icon
+                      name={iconName}
+                      size={iconSize}
+                      onClick={onIconClick}
+                      title={iconTitle}
+                    />
+                  )}
                 </Box>
               ) : null}
               {title ? (
-                <Box className={style.title} flexible={flexible} shrink>
+                <Box
+                  className={style.title}
+                  flexible={flexible}
+                  shrink
+                  data-title={title}
+                >
                   {title}
                 </Box>
               ) : null}
-              {children}
+              {children ? <Box>{children}</Box> : null}
             </Container>
           </Box>
           {onClose ? (
-            <Box onClick={onClose} dataId='closeButton' data-title={closeTitle}>
-              <Container
-                alignBox='row'
-                className={style.pinContainer}
-                align='both'
-                isCover={false}
-              >
-                <Icon name='ZD-close' size='25' />
-              </Container>
+            <Box>
+              <IconButton
+                onClick={onClose}
+                dataId='closeButton'
+                title={closeTitle}
+                iconName='ZD-cross'
+                iconSize='11'
+              />
             </Box>
           ) : null}
         </Container>
+        {getChildren ? (
+          <Container isCover={false}>
+            <Box flexible>{getChildren()}</Box>
+          </Container>
+        ) : null}
       </CardHeader>
     );
   }
@@ -75,17 +108,22 @@ Header.propTypes = {
   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,
-  flexible: PropTypes.bool
+  isBoxIcon: PropTypes.bool
 };
 Header.defaultProps = {
-  flexible: false
+  flexible: false,
+  paddingSize: 'small',
+  isBoxIcon: true
 };
 
 export class Content extends React.Component {
@@ -95,7 +133,7 @@ export class Content extends React.Component {
       <CardContent
         scroll='vertical'
         isScrollAttribute
-        className={`${className ? className : ''} ${
+        customClass={`${className ? className : ''} ${
           paddingSize ? style[`${paddingSize}ContentPadding`] : ''
         }`}
         eleRef={eleRef}
@@ -139,18 +177,23 @@ Footer.defaultProps = {
 };
 
 export default class Drawer extends React.Component {
-  render() {
+  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,
-      needFreeze,
-      palette,
       size,
       paddingSize,
-      isActive,
-      onClose,
-      forwardRef,
-      responsiveId
+      subDrawerActive,
+      subDrawerChildren,
+      onBodyClick
     } = this.props;
+
     let childrenWithProps = React.Children.map(children, child => {
       if (
         child.type === Header ||
@@ -166,78 +209,145 @@ export default class Drawer extends React.Component {
       }
       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>
+    return (
+      <React.Fragment>
+        {subDrawerChildren ? (
+          <Box className={style.columns}>
+            <VelocityAnimationGroup
+              name='slideRight'
+              isActive={subDrawerActive}
+            >
+              <ResponsiveSender>
+                <Container
+                  className={styleByResolutions}
+                  onClick={e => {
+                    e && e.stopPropagation && e.stopPropagation();
+                  }}
+                >
+                  <Box flexible>{subDrawerChildren}</Box>
+                </Container>
+              </ResponsiveSender>
+            </VelocityAnimationGroup>
+          </Box>
+        ) : null}
+        <Box
+          className={`${style.container} ${style.columns} ${
+            style.drawerModal
+          } ${uptoTablet ? style.mbleSize : style[size]}`}
+        >
+          <Card
+            onClick={e => {
+              e && e.stopPropagation && e.stopPropagation();
+              onBodyClick(e);
+            }}
+          >
+            {childrenWithProps}
+          </Card>
         </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}
+      </React.Fragment>
+    );
+  }
+
+  responsiveFunc({ mediaQueryOR }) {
+    return {
+      uptoTablet: mediaQueryOR([{ maxWidth: 768 }])
+    };
+  }
+
+  render() {
+    let {
+      needFreeze,
+      palette,
+      isActive,
+      onClose,
+      forwardRef,
+      responsiveId,
+      subDrawerSize,
+      subDrawerClass,
+      subDrawerActive,
+      customClass,
+      needAutoZindex,
+      innerPortalName
+    } = this.props;
+
+    return (
+      <ResponsiveReceiver
+        query={this.responsiveFunc}
+        responsiveId={responsiveId}
+      >
+        {({ uptoTablet }) => {
+          let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${
+            uptoTablet
+              ? `${style.secondMobDrawer} ${style.mbleSize}`
+              : `${style[subDrawerSize]}`
+          } `;
+
+          return needFreeze ? (
+            <FreezeLayer
+              onClick={onClose}
+              isActive={isActive}
+              animationName='fade'
+              childAnimationName='slideRight'
+              palette={palette}
+              forwardRef={forwardRef}
+              customClass={customClass}
+              needAutoZindex={needAutoZindex}
             >
-              <Card
-                onClick={e => {
-                  e.stopPropagation();
-                }}
+              <Box flexible>
+                <Container alignBox='row'>
+                  <React.Fragment>
+                    {uptoTablet ? <Box flexible /> : null}
+
+                    <ResponsiveSender>
+                      <Box
+                        flexible
+                        className={
+                          uptoTablet ? style.mobModal : style.drawerModal
+                        }
+                      >
+                        {!subDrawerActive && innerPortalName ? (
+                          <div data-portal={innerPortalName}></div>
+                        ) : null}
+                      </Box>
+                    </ResponsiveSender>
+                    {this.drawers(uptoTablet, styleByResolutions)}
+                  </React.Fragment>
+                </Container>
+              </Box>
+            </FreezeLayer>
+          ) : (
+            <VelocityAnimationGroup isActive={isActive} name='slideRight'>
+              <Container
+                align='right'
+                alignBox='row'
+                scroll='none'
+                eleRef={forwardRef}
+                className={`${style.isOverlay} ${customClass}`}
+                style={
+                  isActive && needAutoZindex
+                    ? { zIndex: `${this.getNextIndex()}` }
+                    : {}
+                }
               >
-                {childrenWithProps}
-              </Card>
-            </div>
-          )}
-        </ResponsiveReceiver>
-      </VelocityAnimationGroup>
+                {this.drawers(uptoTablet, styleByResolutions)}
+              </Container>
+            </VelocityAnimationGroup>
+          );
+        }}
+      </ResponsiveReceiver>
     );
   }
 }
 
 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']),
@@ -248,20 +358,31 @@ Drawer.propTypes = {
     'medium',
     'xmedium',
     'large',
-    'xlarge'
-  ])
+    '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: 'xsmall'
+  size: 'small',
+  subDrawerSize: 'small',
+  subDrawerActive: false,
+  subDrawerClass: '',
+  customClass: '',
+  needAutoZindex: true,
+  onBodyClick: () => {}
 };
 
 if (__DOCS__) {
   Drawer.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide'
+    componentGroup: 'Template'
   };
 }

package/src/Drawer/Drawer.module.css

@@ -1,20 +1,31 @@
 .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;
+  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+  background-color: var(--zdt_drawer_default_bg);
+  transition: width var(--zd_transition3);
 }
-
 .isOverlay {
   right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
+  pointer-events: none;
+}
+.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 {
+  right: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
 .mobModal {
   position: absolute;
   top: 0;
@@ -22,126 +33,71 @@
   bottom: 0;
   left: 0;
 }
-
 .xsmall {
   width: var(--zd_size360);
 }
-
 .small {
   width: var(--zd_size410);
 }
-
 .medium {
   width: var(--zd_size660);
 }
-
 .xmedium {
-  width: 45.625rem;
+  width: var(--zd_size730);
 }
-
 .large {
   width: var(--zd_size936);
 }
 .xlarge {
-  width: 71.375rem;
+  width: var(--zd_size840);
+}
+.xxlarge {
+  width: var(--zd_size1142);
 }
-.mbleSize {
+.mbleSize,
+.default {
   width: 100%;
 }
-
-/* .close {
-  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
-} */
 .header {
-  height: var(--zd_size50);
-  border-bottom: 1px solid var(--dot_border_solitude);
+  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(--dot_text_bunker);
-  font: var(--zd_size16) var(--zd_semibold);
+  color: var( --zdt_drawer_title_text);
+  font: var(--zd_font_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(--zd_border_smoke91);
-  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_size20) 0 var(--zd_size25);
+  padding-right: var(--zd_size11);
+  padding-left: var(--zd_size30);
 }
-
 .smallContentPadding {
-  padding: 0 var(--zd_size25);
-}
-
-.smallFooterPadding {
-  padding: 0 0 0 var(--zd_size25);
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
 }
-
 .mediumHeaderPadding {
-  padding: 0 var(--zd_size20) 0 var(--zd_size30);
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size30);
 }
-
 .mediumContentPadding {
-  padding: 0 var(--zd_size30);
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
 }
-
-.mediumFooterPadding {
-  padding: 0 0 0 var(--zd_size30);
-}
-
 .largeHeaderPadding {
-  padding: 0 var(--zd_size20) 0 var(--zd_size50);
+  padding-right: var(--zd_size15);
+  padding-left: 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);
+  padding-left: var(--zd_size50);
+  padding-right: var(--zd_size50);
+}
+.iconWrapper {
+  margin-right: var(--zd_size10);
 }