@zohodesk/dot 1.0.0-beta.269 → 1.0.0-beta.270

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: 360px;
+  width: var(--zd_size360) ;
 }
 
 .small {
-  width: 410px;
+  width: var(--zd_size410) ;
 }
 
 .medium {
-  width: 660px;
+  width: var(--zd_size660) ;
 }
 
 .xmedium {
-  width: 730px;
+  width: var(--zd_size730) ;
 }
 
 .large {
-  width: 936px;
+  width: var(--zd_size936) ;
 }
 
 .xlarge {
-  width: 840px;
+  width: var(--zd_size840) ;
 }
 
 .xxlarge {
-  width: 1142px;
+  width: var(--zd_size1142) ;
 }
 
 .mbleSize,
 .default {
-  width: 100%;
+  width: 100% ;
 }
 
 .header {
-  min-height: 50px;
+  min-height: var(--zd_size50) ;
   background-color: var(--zdt_drawer_header_bg);
   border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .subheader {
-  min-height: 28px;
+  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: 16px;
+  font-size: var(--zd_font_size16) ;
 }
 
 [dir=ltr] .title {
-  padding: 0 10px 0 0;
+  padding: 0 var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .title {
-  padding: 0 0 0 10px;
+  padding: 0 0 0 var(--zd_size10) ;
 }
 
 [dir=ltr] .smallHeaderPadding {
-  padding-right: 11px;
-  padding-left: 30px;
+  padding-right: var(--zd_size11) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=rtl] .smallHeaderPadding {
-  padding-left: 11px;
-  padding-right: 30px;
+  padding-left: var(--zd_size11) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=ltr] .smallContentPadding {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=rtl] .smallContentPadding {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=ltr] .mediumHeaderPadding {
-  padding-right: 15px;
-  padding-left: 30px;
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=rtl] .mediumHeaderPadding {
-  padding-left: 15px;
-  padding-right: 30px;
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=ltr] .mediumContentPadding {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=rtl] .mediumContentPadding {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=ltr] .largeHeaderPadding {
-  padding-right: 15px;
-  padding-left: 50px;
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size50) ;
 }
 
 [dir=rtl] .largeHeaderPadding {
-  padding-left: 15px;
-  padding-right: 50px;
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size50) ;
 }
 
 [dir=ltr] .largeContentPadding {
-  padding-left: 50px;
-  padding-right: 50px;
+  padding-left: var(--zd_size50) ;
+  padding-right: var(--zd_size50) ;
 }
 
 [dir=rtl] .largeContentPadding {
-  padding-right: 50px;
-  padding-left: 50px;
+  padding-right: var(--zd_size50) ;
+  padding-left: var(--zd_size50) ;
 }
 
 [dir=ltr] .iconWrapper {
-  margin-right: 10px;
+  margin-right: var(--zd_size10) ;
 }
 
 [dir=rtl] .iconWrapper {
-  margin-left: 10px;
+  margin-left: var(--zd_size10) ;
 }

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,
@@ -38,11 +42,10 @@ 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,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,
@@ -130,10 +135,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,11 +68,10 @@ 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

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

package/es/FreezeLayer/css/FreezeLayer.module.css

@@ -1,14 +1,14 @@
 .container {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   overflow: hidden;
 }[dir=ltr] .container {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }[dir=rtl] .container {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/es/FreezeLayer/useFreezeLayer.js

@@ -9,11 +9,13 @@ export default function useFreezeLayer(_ref) {
   const [isActive, setActive] = useState(propsActive);
   const [isChildActive, setChildActive] = useState(false);
   let isFreezeLayerEnabled = useRef(false);
+
   function handleClick(e) {
     if (onClick && !isTextSelected()) {
       onClick(e);
     }
   }
+
   function enableFreeze() {
     if (!isFreezeLayerEnabled.current) {
       isFreezeLayerEnabled.current = true;
@@ -21,6 +23,7 @@ export default function useFreezeLayer(_ref) {
       freezeLayerEnable && freezeLayerEnable();
     }
   }
+
   function disableFreeze() {
     if (isFreezeLayerEnabled.current) {
       isFreezeLayerEnabled.current = false;
@@ -28,6 +31,7 @@ export default function useFreezeLayer(_ref) {
       freezeLayerDisable && freezeLayerDisable();
     }
   }
+
   useEffect(() => {
     if (propsActive) {
       enableFreeze();
@@ -38,6 +42,7 @@ export default function useFreezeLayer(_ref) {
       setChildActive(false);
       setTimeout(() => setActive(false));
     }
+
     return () => {
       disableFreeze();
     };

package/es/Hooks/Dragger/useDragger.js

@@ -1,13 +1,13 @@
 //Hooks from React
-import { useEffect, useRef, useCallback } from 'react';
-//CustomFunction
-import { DragPosCalc } from './utils/DraggerUtil';
-//GlobalConfig
-import { getDotLibraryConfig } from '../../Provider/Config';
-//Props
+import { useEffect, useRef, useCallback } from 'react'; //CustomFunction
+
+import { DragPosCalc } from './utils/DraggerUtil'; //GlobalConfig
+
+import { getDotLibraryConfig } from '../../Provider/Config'; //Props
+
 import defaultProps from './props/defaultProps';
-import propTypes from './props/propTypes';
-//CSS
+import propTypes from './props/propTypes'; //CSS
+
 import style from './css/Dragger.module.css';
 export default function useDragger(_ref) {
   let {
@@ -25,8 +25,8 @@ export default function useDragger(_ref) {
   useEffect(() => {
     parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
   }, []); //did Mount
-
   //calculateDragPosition --> To sperate Dom action
+
   const calculateDragPosition = useCallback((x, y) => {
     if (parentEle.current && draggableEle.current) {
       return DragPosCalc({
@@ -46,6 +46,7 @@ export default function useDragger(_ref) {
   const elementDrag = useCallback(e => {
     e = e || window.event;
     e.preventDefault();
+
     if (draggable.current) {
       const left = offset.current.x + e.clientX;
       const top = offset.current.y + e.clientY;
@@ -93,6 +94,7 @@ export default function useDragger(_ref) {
   }, []);
   const removeListener = useCallback(draggableEle => {
     let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+
     if (dragController) {
       dragController.removeEventListener('mousedown', dragMouseDown);
       draggableEle.current = null;
@@ -107,13 +109,13 @@ export default function useDragger(_ref) {
     } else {
       removeListener(draggableEle);
     }
+
     return () => {
       removeListener(draggableEle);
     };
   }, [ChildRef.current, isActive]);
   return null;
-}
+} //Props
 
-//Props
 useDragger.propTypes = propTypes;
 useDragger.defaultProps = defaultProps;

package/es/IconButton/IconButton.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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -19,6 +20,7 @@ export default class IconButton extends React.Component {
     this.triggerMouseOver = this.triggerMouseOver.bind(this);
     this.onBlur = this.onBlur.bind(this);
   }
+
   handleToggle(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
       e.preventDefault();
@@ -26,6 +28,7 @@ export default class IconButton extends React.Component {
       this.triggerMouseDown(e);
     }
   }
+
   triggerClick(e) {
     let {
       onClick,
@@ -35,6 +38,7 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
+
   triggerMouseOver(e) {
     let {
       onMouseOver,
@@ -44,6 +48,7 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
+
   triggerMouseDown(e) {
     let {
       onMouseDown,
@@ -53,6 +58,7 @@ export default class IconButton extends React.Component {
       isPressed: true
     })) : null;
   }
+
   onBlur(e) {
     let {
       isDisabled
@@ -61,6 +67,7 @@ export default class IconButton extends React.Component {
       isPressed: false
     }) : null;
   }
+
   render() {
     let {
       palette,
@@ -132,11 +139,10 @@ export default class IconButton extends React.Component {
       iconClass: iconClass
     }) : null, children ? children : null));
   }
+
 }
 IconButton.propTypes = propTypes;
-IconButton.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+IconButton.defaultProps = defaultProps; // if (__DOCS__) {
 //   IconButton.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/IconButton/IconButton.module.css

@@ -2,8 +2,8 @@
   --iconColor: var(--zdt_iconButton_icon_black);
 }
 .wrapper {
-  height: 28px;
-  width: 28px;
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);

package/es/Image/Image.js

@@ -29,10 +29,10 @@ export default class Image extends React.Component {
       "data-original": original
     });
   }
+
 }
 Image.propTypes = propTypes;
-Image.defaultProps = defaultProps;
-// if (__DOCS__) {
+Image.defaultProps = defaultProps; // if (__DOCS__) {
 //   Image.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/Image/Image.module.css

@@ -1,10 +1,10 @@
 .imgFullSize{
-    height:100%;
-    width:100%
+    height:100% ;
+    width:100% 
 }
 .imgMaxFullSize{
-    max-height:100%;
-    max-width:100%
+    max-height:100% ;
+    max-width:100% 
 }
 .imgFullSize, .imgMaxFullSize{
   /*  Variable:Ignore  */