@zohodesk/dot 1.0.0-test.239 → 1.1.0

package/es/Drawer/Drawer.js

@@ -7,10 +7,12 @@ 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 Heading from '@zohodesk/components/lib/Heading/Heading';
 import IconButton from '../IconButton/IconButton';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class Header extends React.Component {
   render() {
     let {
@@ -67,21 +69,30 @@ export class Header extends React.Component {
       alignBox: "row",
       align: "vertical"
     }, title ? /*#__PURE__*/React.createElement(Box, {
-      className: style.title,
       "data-title": title,
       shrink: true
-    }, title) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(Heading, {
+      title: title,
+      className: style.title,
+      a11y: {
+        tabindex: '0'
+      }
+    })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
       onClick: onClose,
       dataId: "closeButton",
       title: closeTitle,
       iconName: "ZD-cross",
-      iconSize: "11"
+      iconSize: "11",
+      a11y: {
+        ariaLabel: 'Close'
+      }
     })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
       isCover: false
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, getChildren())) : null);
   }
+
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -100,6 +111,7 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
+
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -116,6 +128,7 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
+
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -125,7 +138,9 @@ export default class Drawer extends React.Component {
     this.drawers = this.drawers.bind(this);
     this.responsiveFunc = this.responsiveFunc.bind(this);
     this.getNextIndex = getZIndex(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
+
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -133,8 +148,21 @@ export default class Drawer extends React.Component {
       paddingSize,
       subDrawerActive,
       subDrawerChildren,
-      onBodyClick
+      onBodyClick,
+      onClose,
+      needFocusScope,
+      customProps
     } = this.props;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      autoFocus = true,
+      restoreFocus = true,
+      needArrowLoop = false,
+      needTabLoop = true,
+      enableEnterAction = false
+    } = focusScopeProps;
     let childrenWithProps = React.Children.map(children, child => {
       if (child.type === Header || child.type === Footer || child.type === Content) {
         let {
@@ -144,8 +172,20 @@ export default class Drawer extends React.Component {
           paddingSize: childPaddingSize ? childPaddingSize : paddingSize
         }) : child;
       }
+
       return child;
     });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: this.createRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
     return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
       className: style.columns
     }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
@@ -158,15 +198,17 @@ export default class Drawer extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
-    }, /*#__PURE__*/React.createElement(Card, {
-      onClick: e => {
-        e && e.stopPropagation && e.stopPropagation();
-        onBodyClick(e);
-      }
-    }, childrenWithProps)));
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: this.createRef,
+      autoFocus: autoFocus,
+      needTabLoop: needTabLoop,
+      restoreFocus: restoreFocus,
+      needArrowLoop: needArrowLoop,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content);
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -177,6 +219,7 @@ export default class Drawer extends React.Component {
       }])
     };
   }
+
   render() {
     let {
       needFreeze,
@@ -235,11 +278,11 @@ export default class Drawer extends React.Component {
       }, this.drawers(uptoTablet, styleByResolutions)));
     });
   }
+
 }
 Drawer.propTypes = Drawer_propTypes;
-Drawer.defaultProps = Drawer_defaultProps;
-if (false) {
-  Drawer.docs = {
-    componentGroup: 'Template'
-  };
-}
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/Drawer/Drawer.module.css

@@ -1,151 +1,191 @@
-.container {
-  transition: width var(--zd_transition3);
-  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_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: 0 6px 12px var(--zdt_drawer_default_box_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);
-}
-.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';
-}
-[dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0;
-}
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-[dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11);
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
-}
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size30);
-}
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
-}
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size50);
-}
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50);
-  padding-right: var(--zd_size50);
-}
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
-}
-[dir=ltr] .iconWrapper {
-  margin-right: var(--zd_size10);
-}
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
-}
+.container {
+  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) ;
+}
+
+.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-family: var(--zd_semibold);
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: var(--zd_font_size16) ;
+}
+
+[dir=ltr] .title {
+  padding: 0 var(--zd_size10) 0 0 ;
+}
+
+[dir=rtl] .title {
+  padding: 0 0 0 var(--zd_size10) ;
+}
+
+[dir=ltr] .smallHeaderPadding {
+  padding-right: var(--zd_size11) ;
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .smallHeaderPadding {
+  padding-left: var(--zd_size11) ;
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=ltr] .smallContentPadding {
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=rtl] .smallContentPadding {
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=ltr] .mediumHeaderPadding {
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .mediumHeaderPadding {
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=ltr] .mediumContentPadding {
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=rtl] .mediumContentPadding {
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=ltr] .largeHeaderPadding {
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size50) ;
+}
+
+[dir=rtl] .largeHeaderPadding {
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size50) ;
+}
+
+[dir=ltr] .largeContentPadding {
+  padding-left: var(--zd_size50) ;
+  padding-right: var(--zd_size50) ;
+}
+
+[dir=rtl] .largeContentPadding {
+  padding-right: var(--zd_size50) ;
+  padding-left: var(--zd_size50) ;
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10) ;
+}

package/es/Drawer/index.js

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

package/es/Drawer/props/defaultProps.js

@@ -16,5 +16,7 @@ export const Drawer_defaultProps = {
   subDrawerClass: '',
   customClass: '',
   needAutoZindex: true,
-  onBodyClick: () => {}
+  onBodyClick: () => {},
+  needFocusScope: false,
+  customProps: {}
 };

package/es/Drawer/props/propTypes.js

@@ -45,5 +45,7 @@ export const Drawer_propTypes = {
   subDrawerActive: PropTypes.bool,
   subDrawerChildren: PropTypes.func,
   subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
+  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
+  needFocusScope: PropTypes.bool,
+  customProps: PropTypes.object
 };

package/es/ExternalLink/ExternalLink.js

@@ -1,19 +1,23 @@
 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 { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** CSS ****/
+
 import style from './ExternalLink.module.css';
 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 url;
   }
+
   render() {
     const {
       href,
@@ -34,14 +38,15 @@ export default class ExternalLink extends React.Component {
       "data-title": title,
       rel: rel,
       "data-id": dataId,
+      "data-test-id": dataId,
       onClick: onClick
     }, customProps), children);
   }
+
 }
 ExternalLink.defaultProps = defaultProps;
-ExternalLink.propTypes = propTypes;
-if (false) {
-  ExternalLink.docs = {
-    componentGroup: 'Atom'
-  };
-}
+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/FlipCard/FlipCard.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -16,14 +17,17 @@ export default class FlipCard extends Component {
     this.onChange = this.onChange.bind(this);
     this.onClick = this.onClick.bind(this);
   }
+
   onClick(e) {
     let {
       noNeedFlip
     } = this.props;
+
     if (!noNeedFlip) {
       stopBubbling(e);
     }
   }
+
   onChange(isChecked, e) {
     let {
       onChange
@@ -34,6 +38,7 @@ export default class FlipCard extends Component {
     } = this.props;
     onChange(id, isChecked, e);
   }
+
   render() {
     let {
       id,
@@ -75,10 +80,12 @@ export default class FlipCard extends Component {
       className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
       onClick: this.onClick,
       "data-id": ticListContainer,
+      "data-test-id": ticListContainer,
       "data-tour": tourId
     }, /*#__PURE__*/React.createElement("div", {
       className: style.container,
-      "data-id": ticList
+      "data-id": ticList,
+      "data-test-id": ticList
     }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: `${style.front} ${frontClass ? frontClass : ''}`
@@ -128,11 +135,11 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
+
 }
 FlipCard.propTypes = propTypes;
-FlipCard.defaultProps = defaultProps;
-if (false) {
-  FlipCard.docs = {
-    componentGroup: 'Molecule'
-  };
-}
+FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }