@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/src/Drawer/Drawer.js

@@ -0,0 +1,398 @@
+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 (
+      <CardHeader
+        customClass={`${style.header} ${style[`${paddingSize}HeaderPadding`]} ${
+          className ? className : ''
+        }`}
+        dataId={dataId}
+      >
+        <Container
+          alignBox='row'
+          align='vertical'
+          isCover={false}
+          className={style.subheader}
+        >
+          <Box flexible shrink>
+            <Container alignBox='row' isCover={false} align='vertical'>
+              {iconName ? (
+                <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 || getTitleChildren ? (
+                <Box
+                  flexible={flexible}
+                  shrink
+                >
+                  <Container alignBox='row' align='vertical'>
+                    {title?<Box
+                      className={style.title}
+                      data-title={title}
+                      shrink
+                    >
+                      {title}
+                    </Box>:null}
+                    {getTitleChildren?<Box>{getTitleChildren()}</Box>:null}
+                  </Container>
+                </Box>
+              ) : null}
+              {children ? <Box>{children}</Box> : null}
+            </Container>
+          </Box>
+          {onClose ? (
+            <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>
+    );
+  }
+}
+
+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 (
+      <CardContent
+        scroll='vertical'
+        isScrollAttribute
+        customClass={`${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 {
+  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
+          ? React.cloneElement(child, {
+              paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+            })
+          : child;
+      }
+      return child;
+    });
+
+    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>
+      </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}
+            >
+              <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()}` }
+                    : {}
+                }
+              >
+                {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']),
+  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 (__DOCS__) {
+  Drawer.docs = {
+    componentGroup: 'Template'
+  };
+}

package/src/Drawer/Drawer.module.css

@@ -0,0 +1,103 @@
+.container {
+  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;
+  right: 0;
+  bottom: 0;
+  left: 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';
+  padding: 0 var(--zd_size10) 0 0;
+}
+.smallHeaderPadding {
+  padding-right: var(--zd_size11);
+  padding-left: var(--zd_size30);
+}
+.smallContentPadding {
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
+}
+.mediumHeaderPadding {
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size30);
+}
+.mediumContentPadding {
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
+}
+.largeHeaderPadding {
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size50);
+}
+.largeContentPadding {
+  padding-left: var(--zd_size50);
+  padding-right: var(--zd_size50);
+}
+.iconWrapper {
+  margin-right: var(--zd_size10);
+}

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

@@ -0,0 +1,86 @@
+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,
+      size: 'xsmall'
+    };
+
+    this.onClose = this.onClose.bind(this);
+    this.getFooter = this.getFooter.bind();
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+  getFooter() {
+    return <p>getChildren</p>;
+  }
+
+  render() {
+    let { isActive, size } = this.state;
+    return (
+      <Drawer
+        isActive={isActive}
+        needFreeze={false}
+        paddingSize='small'
+        size={size}
+      >
+        <Header
+          title='Add Component'
+          onClose={this.onClose}
+          iconName='ZD-zdDuetimeQueueNew'
+          iconSize='15'
+          align='column'
+          getChildren={this.getFooter}
+        >
+          <span>children</span>
+        </Header>
+        <Content className={style.headerTest}>
+          <Button text='small' onClick={this.changeSize.bind(this, 'small')} />
+          <Button
+            text='xsmall'
+            onClick={this.changeSize.bind(this, 'xsmall')}
+          />
+          <Button
+            text='medium'
+            onClick={this.changeSize.bind(this, 'medium')}
+          />
+          <Button
+            text='xmedium'
+            onClick={this.changeSize.bind(this, 'xmedium')}
+          />
+          <Button text='large' onClick={this.changeSize.bind(this, 'large')} />
+          <Button
+            text='xlarge'
+            onClick={this.changeSize.bind(this, 'xlarge')}
+          />
+          <Button
+            text='xxlarge'
+            onClick={this.changeSize.bind(this, 'xxlarge')}
+          />
+        </Content>
+        <Footer>
+          <Button text='Save' palette='primaryFilled' />
+          <Button text='Cancel' palette='secondary' />
+        </Footer>
+      </Drawer>
+    );
+  }
+}
+if (__DOCS__) {
+  Drawer__default.docs = {
+    componentGroup: 'Template'
+  };
+}

package/src/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import Drawer, { Header, Content } from '../Drawer';
+import Button from '@zohodesk/components/lib/Button/Button';
+import style from '../Drawer.module.css';
+
+export default class Drawer__multiDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: true,
+      subDrawerActive: true,
+      size: 'xsmall'
+    };
+
+    this.onClose = this.onClose.bind(this);
+    this.openSecondDrawer = this.openSecondDrawer.bind(this);
+    this.closeDrawers = this.closeDrawers.bind(this);
+    this.closeSubDrawer = this.closeSubDrawer.bind(this);
+    this.subDrawerChildren = this.subDrawerChildren.bind(this);
+  }
+
+  onClose() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  openSecondDrawer() {
+    this.setState({
+      subDrawerActive: true
+    });
+  }
+
+  closeDrawers() {
+    this.setState({
+      isActive: false
+    });
+  }
+
+  closeSubDrawer() {
+    this.setState({
+      subDrawerActive: false
+    });
+  }
+  changeSize(drawersize) {
+    this.setState({
+      size: drawersize
+    });
+  }
+
+  subDrawerChildren() {
+    return (
+      <React.Fragment>
+        <Header title='Second Drawer' onClose={this.closeSubDrawer}></Header>
+        <Content paddingSize='small'>
+          <div>Hi, I am Second Drawer Content Area</div>
+        </Content>
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    let { isActive, subDrawerActive, size } = this.state;
+    return (
+      <Drawer
+        isActive={isActive}
+        needFreeze
+        paddingSize='small'
+        subDrawerActive={subDrawerActive}
+        subDrawerSize='small'
+        onClose={this.closeDrawers}
+        subDrawerChildren={this.subDrawerChildren()}
+        size={size} needAutoZindex
+      >
+        <Header title='First Drawer' onClose={this.onClose}></Header>
+        <Content className={style.headerTest}>
+          <div onClick={this.openSecondDrawer}>
+            Click here to Open Second Drawer ..:-)
+          </div>
+          <Button text='small' onClick={this.changeSize.bind(this, 'small')} />
+          <Button
+            text='xsmall'
+            onClick={this.changeSize.bind(this, 'xsmall')}
+          />
+          <Button
+            text='medium'
+            onClick={this.changeSize.bind(this, 'medium')}
+          />
+          <Button
+            text='xmedium'
+            onClick={this.changeSize.bind(this, 'xmedium')}
+          />
+          <Button text='large' onClick={this.changeSize.bind(this, 'large')} />
+          <Button
+            text='xlarge'
+            onClick={this.changeSize.bind(this, 'xlarge')}
+          />
+          <Button
+            text='xxlarge'
+            onClick={this.changeSize.bind(this, 'xxlarge')}
+          />
+        </Content>
+      </Drawer>
+    );
+  }
+}
+if (__DOCS__) {
+  Drawer__multiDrawer.docs = {
+    componentGroup: 'Template'
+  };
+}

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

@@ -0,0 +1,20 @@
+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'
+  };
+}