@zohodesk/dot 1.4.5 → 1.4.7

package/es/ChannelIcon/ChannelIcon.module.css

@@ -13,17 +13,17 @@
 .thread {
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
-  top: calc( var(--zd_size4) * -1 ) ;
-  height: var(--zd_size15) ;
-  width: var(--zd_size15) ;
+  top: -4px;
+  height: 15px;
+  width: 15px;
   /* css:theme-validation:ignore */
   background-color: var(--topIconBg);
 }
 [dir=ltr] .thread {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: -1px;
 }
 [dir=rtl] .thread {
-  left: calc( var(--zd_size1) * -1 ) ;
+  left: -1px;
 }
 .threadBorder {
   /* css:theme-validation:ignore */
@@ -106,22 +106,22 @@
 .email_incoming,
 .email_missed,
 .email_outgoing {
-  bottom: var(--zd_size2) ;
+  bottom: 2px;
 }
 
 /* twitter */
 .twitter_incoming,
 .twitter_outgoing,
 .twitter_missed {
-  bottom: var(--zd_size1) ;
+  bottom: 1px;
 }
 
 /* facebook */
 [dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
-  right: var(--zd_size2) ;
+  right: 2px;
 }
 [dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2) ;
+  left: 2px;
 }
 
 /* chat */
@@ -134,33 +134,33 @@
 .chat_outgoing,
 .offline_chat_outgoing,
 .online_chat_outgoing {
-  bottom: var(--zd_size1) ;
+  bottom: 1px;
 }
 
 /* forums */
 .forums_default {
-  top: var(--zd_size1) ;
+  top: 1px;
 }
 
 /* feedback */
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: var(--zd_size1) ;
+  top: 1px;
 }
 [dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
-  right: var(--zd_size1) ;
+  right: 1px;
 }
 [dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1) ;
+  left: 1px;
 }
 
 /* draft */
 [dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
-  left: var(--zd_size1) ;
+  left: 1px;
 }
 [dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1) ;
+  right: 1px;
 }
 
 /* forward */
@@ -176,7 +176,7 @@
 .web_forward,
 .customerportal_forward,
 .feedback_forward {
-  bottom: var(--zd_size1) ;
+  bottom: 1px;
 }
 
 /* forwarddraft */
@@ -191,21 +191,21 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  bottom: var(--zd_size1) ;
+  bottom: 1px;
 }
 [dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
-  left: var(--zd_size1) ;
+  left: 1px;
 }
 [dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1) ;
+  right: 1px;
 }
 
 /* facebook_dm */
 [dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
-  right: var(--zd_size2) ;
+  right: 2px;
 }
 [dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2) ;
+  left: 2px;
 }
 
 /*Topic Icon colors*/

package/es/Drawer/Drawer.js

@@ -1,3 +1,4 @@
+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 from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
@@ -89,7 +90,6 @@ export class Header extends React.Component {
       flexible: true
     }, getChildren())) : null);
   }
-
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -108,7 +108,6 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
-
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -125,7 +124,6 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
-
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -137,7 +135,6 @@ export default class Drawer extends React.Component {
     this.getNextIndex = getZIndex(this);
     this.createRef = /*#__PURE__*/React.createRef();
   }
-
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -148,7 +145,8 @@ export default class Drawer extends React.Component {
       onBodyClick,
       onClose,
       needFocusScope,
-      customProps
+      customProps,
+      a11y
     } = this.props;
     const {
       focusScopeProps = {}
@@ -169,15 +167,14 @@ export default class Drawer extends React.Component {
           paddingSize: childPaddingSize ? childPaddingSize : paddingSize
         }) : child;
       }
-
       return child;
     });
-    let content = /*#__PURE__*/React.createElement(Box, {
+    let content = /*#__PURE__*/React.createElement(Box, _extends({
       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, {
+    }, a11y), /*#__PURE__*/React.createElement(Card, {
       onClick: e => {
         e && e.stopPropagation && e.stopPropagation();
         onBodyClick(e);
@@ -205,7 +202,6 @@ export default class Drawer extends React.Component {
       needEnterAction: needEnterAction
     }, content) : content);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -216,7 +212,6 @@ export default class Drawer extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       needFreeze,
@@ -276,10 +271,11 @@ export default class Drawer extends React.Component {
       }, this.drawers(uptoTablet, styleByResolutions)));
     });
   }
-
 }
 Drawer.propTypes = Drawer_propTypes;
-Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
+Drawer.defaultProps = Drawer_defaultProps;
+
+// if (__DOCS__) {
 //   Drawer.docs = {
 //     componentGroup: 'Template'
 //   };

package/es/Drawer/Drawer.module.css

@@ -5,18 +5,18 @@
 }
 
 .isOverlay {
-  top: 0 ;
-  bottom: 0 ;
+  top: 0;
+  bottom: 0;
   position: absolute;
   pointer-events: none;
 }
 
 [dir=ltr] .isOverlay {
-  right: 0 ;
+  right: 0;
 }
 
 [dir=rtl] .isOverlay {
-  left: 0 ;
+  left: 0;
 }
 
 .columns {
@@ -34,158 +34,158 @@
 
 .secondMobDrawer {
   position: absolute;
-  top: 0 ;
+  top: 0;
   z-index: 1;
 }
 
 [dir=ltr] .secondMobDrawer {
-  right: 0 ;
+  right: 0;
 }
 
 [dir=rtl] .secondMobDrawer {
-  left: 0 ;
+  left: 0;
 }
 
 .mobModal {
   position: absolute;
-  top: 0 ;
-  bottom: 0 ;
+  top: 0;
+  bottom: 0;
 }
 
 [dir=ltr] .mobModal {
-  right: 0 ;
-  left: 0 ;
+  right: 0;
+  left: 0;
 }
 
 [dir=rtl] .mobModal {
-  left: 0 ;
-  right: 0 ;
+  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: var(--zd_size730) ;
+  width: 730px;
 }
 
 .large {
-  width: var(--zd_size936) ;
+  width: 936px;
 }
 
 .xlarge {
-  width: var(--zd_size840) ;
+  width: 840px;
 }
 
 .xxlarge {
-  width: var(--zd_size1142) ;
+  width: 1142px;
 }
 
 .mbleSize,
 .default {
-  width: 100% ;
+  width: 100%;
 }
 
 .header {
-  min-height: var(--zd_size50) ;
+  min-height: 50px;
   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) ;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .subheader {
-  min-height: var(--zd_size28) ;
+  min-height: 28px;
 }
 
 .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) ;
+  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) ;
+  padding: 0 0 0 10px;
 }
 
 [dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11) ;
-  padding-left: var(--zd_size30) ;
+  padding-right: 11px;
+  padding-left: 30px;
 }
 
 [dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11) ;
-  padding-right: var(--zd_size30) ;
+  padding-left: 11px;
+  padding-right: 30px;
 }
 
 [dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30) ;
-  padding-right: var(--zd_size30) ;
+  padding-left: 30px;
+  padding-right: 30px;
 }
 
 [dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30) ;
-  padding-left: var(--zd_size30) ;
+  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: var(--zd_size10) ;
+  margin-right: 10px;
 }
 
 [dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10) ;
+  margin-left: 10px;
 }

package/es/Drawer/props/defaultProps.js

@@ -18,5 +18,6 @@ export const Drawer_defaultProps = {
   needAutoZindex: true,
   onBodyClick: () => {},
   needFocusScope: false,
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };

package/es/Drawer/props/propTypes.js

@@ -48,5 +48,6 @@ export const Drawer_propTypes = {
   subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium']),
   needFocusScope: PropTypes.bool,
   customProps: PropTypes.object,
-  innerPortalName: PropTypes.string
+  innerPortalName: PropTypes.string,
+  a11y: PropTypes.object
 };

package/es/ExternalLink/ExternalLink.js

@@ -1,23 +1,19 @@
 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 ****/
 
+/**** 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,
@@ -42,10 +38,11 @@ export default class ExternalLink extends React.Component {
       onClick: onClick
     }, customProps), children);
   }
-
 }
 ExternalLink.defaultProps = defaultProps;
-ExternalLink.propTypes = propTypes; // if (__DOCS__) {
+ExternalLink.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   ExternalLink.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/FlipCard/FlipCard.js

@@ -1,5 +1,4 @@
 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';
@@ -17,17 +16,14 @@ 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
@@ -38,7 +34,6 @@ export default class FlipCard extends Component {
     } = this.props;
     onChange(id, isChecked, e);
   }
-
   render() {
     let {
       id,
@@ -135,10 +130,10 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
-
 }
 FlipCard.propTypes = propTypes;
-FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
+FlipCard.defaultProps = defaultProps;
+// if (__DOCS__) {
 //   FlipCard.docs = {
 //     componentGroup: 'Molecule'
 //   };

package/es/FlipCard/FlipCard.module.css

@@ -12,8 +12,8 @@
 .container,
 .front,
 .back {
-  width: inherit ;
-  height: inherit ;
+  width: inherit;
+  height: inherit;
 }
 .front,
 .back {

package/es/FormAction/FormAction.js

@@ -22,8 +22,8 @@ export default class FormAction extends React.Component {
       dataSelectorId
     } = this.props;
     let leftbuttonGroup = [],
-        rightbuttonGroup = [],
-        centerbuttonGroup = [];
+      rightbuttonGroup = [],
+      centerbuttonGroup = [];
     React.Children.map(children, child => {
       if (!child) {
         return child;
@@ -68,10 +68,11 @@ export default class FormAction extends React.Component {
       key: index
     }, item)) : centerbuttonGroup[0]) : null));
   }
-
 }
 FormAction.propTypes = propTypes;
-FormAction.defaultProps = defaultProps; // if (__DOCS__) {
+FormAction.defaultProps = defaultProps;
+
+// if (__DOCS__) {
 //   FormAction.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/FormAction/FormAction.module.css

@@ -15,70 +15,70 @@
   border-top: solid 1px var(--footerBorder);
 }
 .largeFooter {
-  padding-top: var(--zd_size24) ;
-  padding-bottom: var(--zd_size24) ;
+  padding-top: 24px;
+  padding-bottom: 24px;
 }
 .mediumFooter {
-  padding-top: var(--zd_size20) ;
-  padding-bottom: var(--zd_size20) ;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 .smallFooter {
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 [dir=ltr] .largePadding {
-  padding-left: var(--zd_size60) ;
+  padding-left: 60px;
 }
 
 [dir=rtl] .largePadding {
-  padding-right: var(--zd_size60) ;
+  padding-right: 60px;
 }
 [dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50) ;
+  padding-left: 50px;
 }
 [dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50) ;
+  padding-right: 50px;
 }
 [dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30) ;
+  padding-left: 30px;
 }
 [dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30) ;
+  padding-right: 30px;
 }
 [dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25) ;
+  padding-left: 25px;
 }
 [dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25) ;
+  padding-right: 25px;
 }
 [dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20) ;
+  padding-left: 20px;
 }
 [dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20) ;
+  padding-right: 20px;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15) ;
+  margin-right: 15px;
 }
 [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15) ;
+  margin-left: 15px;
 }
 [dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12) ;
+  margin-right: 12px;
 }
 [dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12) ;
+  margin-left: 12px;
 }
 
 [dir=ltr] .marginRight:last-child {
-  margin-right: 0 ;
+  margin-right: 0;
 }
 
 [dir=rtl] .marginRight:last-child {
-  margin-left: 0 ;
+  margin-left: 0;
 }

package/es/FreezeLayer/FreezeLayer.js

@@ -66,7 +66,9 @@ export default function FreezeLayer(props) {
   }, children))));
 }
 FreezeLayer.propTypes = propTypes;
-FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
+FreezeLayer.defaultProps = defaultProps;
+
+// if (__DOCS__) {
 //   FreezeLayer.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'General'