@zohodesk/dot 1.0.0-beta.235 → 1.0.0-beta.238

package/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -6,22 +6,21 @@ export default class ChannelIcon__default extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let boxStyle = {},
-        style = {
-      border: '1px solid #c3c1c1',
-      padding: '10px',
-      margin: '1px 10px',
-      textAlign: 'center'
-    },
-        titleStyle = {
-      'font-size': '13px',
-      'padding-bottom': '5px',
-      'border-bottom': '1px solid #c3c1c1',
-      margin: '10px 0 5px',
-      textAlign: 'center'
-    };
+      style = {
+        border: '1px solid #c3c1c1',
+        padding: '10px',
+        margin: '1px 10px',
+        textAlign: 'center'
+      },
+      titleStyle = {
+        'font-size': '13px',
+        'padding-bottom': '5px',
+        'border-bottom': '1px solid #c3c1c1',
+        margin: '10px 0 5px',
+        textAlign: 'center'
+      };
     let channels = getChannelMappingObj();
     return /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
       key: i,
@@ -47,9 +46,7 @@ export default class ChannelIcon__default extends Component {
       size: "medium"
     }))))))), /*#__PURE__*/React.createElement("br", null));
   }
-
 }
-
 if (false) {
   ChannelIcon__default.docs = {
     componentGroup: 'Atom'

package/es/Drawer/Drawer.js

@@ -82,7 +82,6 @@ export class Header extends React.Component {
       flexible: true
     }, getChildren())) : null);
   }
-
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -101,7 +100,6 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
-
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -118,7 +116,6 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
-
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -129,7 +126,6 @@ export default class Drawer extends React.Component {
     this.responsiveFunc = this.responsiveFunc.bind(this);
     this.getNextIndex = getZIndex(this);
   }
-
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -148,7 +144,6 @@ export default class Drawer extends React.Component {
           paddingSize: childPaddingSize ? childPaddingSize : paddingSize
         }) : child;
       }
-
       return child;
     });
     return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
@@ -172,7 +167,6 @@ export default class Drawer extends React.Component {
       }
     }, childrenWithProps)));
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -183,7 +177,6 @@ export default class Drawer extends React.Component {
       }])
     };
   }
-
   render() {
     let {
       needFreeze,
@@ -242,11 +235,9 @@ 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'

package/es/Drawer/Drawer.module.css

@@ -1,15 +1,20 @@
 .container {
+  transition: width var(--zd_transition3);
   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;
 }
+[dir=ltr] .isOverlay {
+  right: 0;
+}
+[dir=rtl] .isOverlay {
+  left: 0;
+}
 .columns {
   pointer-events: initial;
 }
@@ -21,17 +26,28 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
-  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
+[dir=ltr] .secondMobDrawer {
+  right: 0;
+}
+[dir=rtl] .secondMobDrawer {
+  left: 0;
+}
 .mobModal {
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
+}
+[dir=ltr] .mobModal {
+  right: 0;
+  left: 0;
+}
+[dir=rtl] .mobModal {
   left: 0;
+  right: 0;
 }
 .xsmall {
   width: var(--zd_size360);
@@ -72,32 +88,64 @@
   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;
 }
-.smallHeaderPadding {
+[dir=rtl] .title {
+  padding: 0 0 0 var(--zd_size10);
+}
+[dir=ltr] .smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-.smallContentPadding {
+[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);
 }
-.mediumHeaderPadding {
+[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);
 }
-.mediumContentPadding {
+[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);
 }
-.largeHeaderPadding {
+[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);
 }
-.largeContentPadding {
+[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);
 }
-.iconWrapper {
+[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/docs/Drawer__default.docs.js

@@ -12,23 +12,19 @@ export default class Drawer__default extends React.Component {
     this.onClose = this.onClose.bind(this);
     this.getFooter = this.getFooter.bind();
   }
-
   onClose() {
     this.setState({
       isActive: false
     });
   }
-
   changeSize(drawersize) {
     this.setState({
       size: drawersize
     });
   }
-
   getFooter() {
     return /*#__PURE__*/React.createElement("p", null, "getChildren");
   }
-
   render() {
     let {
       isActive,
@@ -77,9 +73,7 @@ export default class Drawer__default extends React.Component {
       palette: "secondary"
     })));
   }
-
 }
-
 if (false) {
   Drawer__default.docs = {
     componentGroup: 'Template'

package/es/Drawer/docs/Drawer__multiDrawer.docs.js

@@ -16,37 +16,31 @@ export default class Drawer__multiDrawer extends React.Component {
     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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
       title: "Second Drawer",
@@ -55,7 +49,6 @@ export default class Drawer__multiDrawer extends React.Component {
       paddingSize: "small"
     }, /*#__PURE__*/React.createElement("div", null, "Hi, I am Second Drawer Content Area")));
   }
-
   render() {
     let {
       isActive,
@@ -102,9 +95,7 @@ export default class Drawer__multiDrawer extends React.Component {
       onClick: this.changeSize.bind(this, 'xxlarge')
     })));
   }
-
 }
-
 if (false) {
   Drawer__multiDrawer.docs = {
     componentGroup: 'Template'

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

@@ -4,15 +4,12 @@ export default class Drawer__noFreeze extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     return /*#__PURE__*/React.createElement(Drawer, {
       isActive: true
     }, /*#__PURE__*/React.createElement("div", null, "Children"));
   }
-
 }
-
 if (false) {
   Drawer__noFreeze.docs = {
     componentGroup: 'Template'

package/es/Drawer/docs/Drawer__withModal.docs.js

@@ -15,25 +15,21 @@ export default class Drawer__withModal extends React.Component {
     this.closeDrawers = this.closeDrawers.bind(this);
     this.getNextId = getUniqueId(this);
   }
-
   onClose() {
     this.setState({
       isActive: false
     });
   }
-
   openModal() {
     this.setState({
       modalActive: true
     });
   }
-
   closeDrawers() {
     this.setState({
       isActive: false
     });
   }
-
   render() {
     let {
       isActive,
@@ -64,9 +60,7 @@ export default class Drawer__withModal extends React.Component {
       }
     }, "Drawer Modal")) : null));
   }
-
 }
-
 if (false) {
   Drawer__withModal.docs = {
     componentGroup: 'Template'

package/es/ExternalLink/ExternalLink.js

@@ -1,23 +1,19 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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,
@@ -41,11 +37,9 @@ export default class ExternalLink extends React.Component {
       onClick: onClick
     }, customProps), children);
   }
-
 }
 ExternalLink.defaultProps = defaultProps;
 ExternalLink.propTypes = propTypes;
-
 if (false) {
   ExternalLink.docs = {
     componentGroup: 'Atom'

package/es/ExternalLink/docs/ExternalLink__default.docs.js

@@ -4,14 +4,12 @@ export default class ExternalLink__default extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     ///agent/:orgName/:deptName/:moduleName/details/:moduleId
+
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExternalLink, null));
   }
-
 }
-
 if (false) {
   ExternalLink__default.docs = {
     componentGroup: 'Atom'

package/es/FlipCard/FlipCard.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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,
@@ -133,11 +128,9 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
-
 }
 FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps;
-
 if (false) {
   FlipCard.docs = {
     componentGroup: 'Molecule'

package/es/FlipCard/FlipCard.module.css

@@ -1,7 +1,8 @@
 .flip,
 .flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
   color: var(--zdt_flipcard_default_text);
+}.flip, .flipNone {
+  background-color: var(--zdt_flipcard_default_bg);
 }
 .container {
   position: relative;
@@ -20,16 +21,24 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-.front {
+[dir=ltr] .front {
   transform: rotateY(180deg) perspective(1px);
 }
+[dir=rtl] .front {
+  transform: rotateY(-180deg) perspective(1px);
+}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-.notFlip .container {
+[dir=ltr] .notFlip .container {
   transform: rotateY(180deg);
 }
-.flip:hover .container,
-.hoverContainer:hover .container {
+[dir=rtl] .notFlip .container {
+  transform: rotateY(-180deg);
+}
+[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
+[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
+  transform: rotateY(-180deg);
+}

package/es/FlipCard/docs/FlipCard__default.docs.js

@@ -8,7 +8,6 @@ export default class FlipCard__default extends Component {
       isChecked: false
     };
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
       channel: "email",
@@ -56,9 +55,7 @@ export default class FlipCard__default extends Component {
       size: "xmedium"
     })));
   }
-
 }
-
 if (false) {
   FlipCard__default.docs = {
     componentGroup: 'Molecule'

package/es/FormAction/FormAction.js

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

package/es/FormAction/FormAction.module.css

@@ -25,33 +25,58 @@
   padding-bottom: var(--zd_size10);
 }
 
-.largePadding {
+[dir=ltr] .largePadding {
   padding-left: var(--zd_size60);
 }
-.mediumPadding {
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60);
+}
+[dir=ltr] .mediumPadding {
   padding-left: var(--zd_size50);
 }
-.xmediumPadding {
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .xmediumPadding {
   padding-left: var(--zd_size30);
 }
-.smallPadding {
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallPadding {
   padding-left: var(--zd_size25);
 }
-.xsmallPadding {
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25);
+}
+[dir=ltr] .xsmallPadding {
   padding-left: var(--zd_size20);
 }
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20);
+}
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
-.largeFooter .marginRight,
-.mediumFooter .marginRight {
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-.smallFooter .marginRight {
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15);
+}
+[dir=ltr] .smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12);
+}
 
-.marginRight:last-child {
+[dir=ltr] .marginRight:last-child {
   margin-right: 0;
 }
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0;
+}

package/es/FormAction/docs/FormAction__default.docs.js

@@ -62,9 +62,7 @@ export default class FormAction__default extends Component {
       size: "small"
     })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "XSmall"))));
   }
-
 }
-
 if (false) {
   FormAction__default.docs = {
     componentGroup: 'Atom'