@zohodesk/components 1.0.0-temp-157 → 1.0.0-temp-158

package/es/Tooltip/Tooltip.module.css

@@ -13,15 +13,15 @@
 
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
   font-family: var(--zd_semibold);
   word-break: break-word;
   max-width: 420px;
   line-height: var(--zd_size20);
-  min-height: var(--zd_size24);
+  min-height: 24px;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10);
+  padding: 0 10px;
   border-style: solid;
   border-color: transparent;
   border-radius: var(--zd_size4);
@@ -43,7 +43,9 @@
 
 .arrowUp,
 .arrowDown {
+  /*  Variable:Ignore  */
   width: 11px;
+  /*  Variable:Ignore  */
   height: 11px;
   border-top: solid 6px var(--zdt_tooltip_default_bg);
   border-left: solid 6px var(--zdt_tooltip_default_bg);
@@ -54,13 +56,16 @@
 }
 
 .arrowDown {
+  /*  Variable:Ignore  */
   margin-top: -4px !important;
   /* put important because of '.wms-mainui *' have margin: 0; */
 }
 
 .arrowLeft,
 .arrowRight {
+  /*  Variable:Ignore  */
   width: 11px;
+  /*  Variable:Ignore  */
   height: 11px;
   border-top: solid 6px var(--zdt_tooltip_default_bg);
   border-left: solid 6px var(--zdt_tooltip_default_bg);
@@ -71,10 +76,12 @@
 }
 
 .arrowRight {
+  /*  Variable:Ignore  */
   margin-left: -2px;
 }
 
 .arrowLeft {
+  /*  Variable:Ignore  */
   margin-left: 1px;
 }
 

package/es/Tooltip/__tests__/Tooltip.spec.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Tooltip from '../Tooltip';
+
 class SampleComponent extends React.Component {
   constructor(props) {
     super(props);
     this.toolTipRef = /*#__PURE__*/React.createRef();
     this.setToolTipRef = this.setToolTipRef.bind(this);
   }
+
   setToolTipRef(ref) {
     this.toolTipRef = ref;
   }
+
   render() {
     return /*#__PURE__*/React.createElement("div", {
       onMouseOver: e => this.toolTipRef && this.toolTipRef.handleOver(e),
@@ -21,7 +24,9 @@ class SampleComponent extends React.Component {
       ref: this.setToolTipRef
     }));
   }
+
 }
+
 describe('Tooltip component conditions', () => {
   it('Is HandleOver Executed', () => {
     let sampleComponent = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(SampleComponent, null));

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -8,6 +8,7 @@ export default class VelocityAnimation extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       children,
@@ -65,11 +66,11 @@ export default class VelocityAnimation extends React.Component {
       interruptBehavior: "queue"
     }, children);
   }
+
 }
 VelocityAnimation.defaultProps = defaultProps;
 VelocityAnimation.propTypes = propTypes;
-VelocityAnimation.contextType = LibraryContext;
-// if (__DOCS__) {
+VelocityAnimation.contextType = LibraryContext; // if (__DOCS__) {
 //   VelocityAnimation.docs = {
 //     componentGroup: 'Animation'
 //   };

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,10 +1,12 @@
 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';
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
 import LibraryContext from '../../Provider/LibraryContextInit';
+
 function clearProps(props) {
   let newProps = Object.assign({}, props);
   Object.keys(VelocityAnimationGroup.propTypes).forEach(key => {
@@ -12,10 +14,12 @@ function clearProps(props) {
   });
   return newProps;
 }
+
 export default class VelocityAnimationGroup extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       children,
@@ -91,15 +95,13 @@ export default class VelocityAnimationGroup extends React.Component {
       enterShowStyle: enterShowStyle
     }, childProps), isActive ? children : null);
   }
+
 }
-VelocityAnimationGroup.defaultProps = {
-  ...defaultProps,
+VelocityAnimationGroup.defaultProps = { ...defaultProps,
   component: React.Fragment
 };
 VelocityAnimationGroup.propTypes = propTypes;
-VelocityAnimationGroup.contextType = LibraryContext;
-
-// if (__DOCS__) {
+VelocityAnimationGroup.contextType = LibraryContext; // if (__DOCS__) {
 //   VelocityAnimationGroup.docs = {
 //     componentGroup: 'Animation'
 //   };

package/es/common/avatarsizes.module.css

@@ -1,8 +1,8 @@
 /*Avatar common Sizes*/
 .varClass {
   /* avatar size default variables */
-  --avatar_width: var(--zd_size34);
-  --avatar_height: var(--zd_size34);
+  --avatar_width: 34px;
+  --avatar_height: 34px;
 }
 .small,
 .xsmall,
@@ -16,34 +16,34 @@
   height: var(--avatar_height);
 }
 .small {
-  --avatar_height: var(--zd_size22);
-  --avatar_width: var(--zd_size22);
+  --avatar_height: 22px;
+  --avatar_width: 22px;
 }
 .xxsmall {
-  --avatar_height: var(--zd_size18);
-  --avatar_width: var(--zd_size18);
+  --avatar_height: 18px;
+  --avatar_width: 18px;
 }
 .xsmall {
-  --avatar_height: var(--zd_size30);
-  --avatar_width: var(--zd_size30);
+  --avatar_height: 30px;
+  --avatar_width: 30px;
 }
 
 .medium {
-  --avatar_height: var(--zd_size34);
-  --avatar_width: var(--zd_size34);
+  --avatar_height: 34px;
+  --avatar_width: 34px;
 }
 
 .xmedium {
-  --avatar_height: var(--zd_size40);
-  --avatar_width: var(--zd_size40);
+  --avatar_height: 40px;
+  --avatar_width: 40px;
 }
 
 .large {
-  --avatar_height: var(--zd_size60);
-  --avatar_width: var(--zd_size60);
+  --avatar_height: 60px;
+  --avatar_width: 60px;
 }
 
 .xlarge {
-  --avatar_height: var(--zd_size80);
-  --avatar_width: var(--zd_size80);
+  --avatar_height: 80px;
+  --avatar_width: 80px;
 }

package/es/common/customscroll.module.css

@@ -1,5 +1,7 @@
 .scroll {
+  /*  Variable:Ignore  */
   --zd-scroll-width: 12px;
+  /*  Variable:Ignore  */
   --zd-scroll-height: 12px;
   --zd-scroll-bg: var(--zdt_customscroll_default_bg);
   --zd-scroll-corner-bg: transparent;

package/es/common/reset.module.css

@@ -8,5 +8,6 @@
   -ms-box-sizing: border-box;
 }
 html {
+  /*  Variable:Ignore  */
   font-size: 16px;
 }

package/es/deprecated/AdvancedMultiSelect.module.css

@@ -5,7 +5,7 @@
   cursor: not-allowed;
 }
 .container {
-  max-height: var(--zd_size120);
+  max-height: 120px;
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
@@ -41,37 +41,37 @@
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
 [dir=ltr] .container.medium {
-  padding: 0 var(--zd_size34) var(--zd_size7) 0;
+  padding: 0 34px 7px 0;
 }
 [dir=rtl] .container.medium {
-  padding: 0 0 var(--zd_size7) var(--zd_size34);
+  padding: 0 0 7px 34px;
 }
 .container.xmedium {
-  min-height: var(--zd_size30);
+  min-height: 30px;
 }
 [dir=ltr] .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+  padding: 0 34px 1px 0;
 }
 [dir=rtl] .container.xmedium {
-  padding: 0 0 var(--zd_size1) var(--zd_size34);
+  padding: 0 0 1px 34px;
 }
 
 .delete {
   position: absolute;
   bottom: 0;
   color: var(--zdt_advancedmultiselect_delete_text);
-  padding-bottom: var(--zd_size10);
+  padding-bottom: 10px;
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
 [dir=ltr] .delete {
-  right: var(--zd_size15);
+  right: 15px;
 }
 
 [dir=rtl] .delete {
-  left: var(--zd_size15);
+  left: 15px;
 }
 
 .delete:hover {
@@ -91,25 +91,25 @@
 }
 
 .small {
-  max-height: var(--zd_size200);
+  max-height: 200px;
 }
 
 .medium {
-  max-height: var(--zd_size350);
+  max-height: 350px;
 }
 
 .large {
-  max-height: var(--zd_size400);
+  max-height: 400px;
 }
 
 .dropContainer {
   display: inline-block;
   max-width: 100%;
-  margin-bottom: var(--zd_size5);
+  margin-bottom: 5px;
 }
 
 .dropPopup {
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
 }
 
 .dropPopup :global .toggleDropIcon {
@@ -117,11 +117,11 @@
 }
 
 .more {
-  font-size: var(--zd_font_size14);
+  font-size: 14px;
   color: var(--zdt_advancedmultiselect_more_text);
   font-family: inherit;
   cursor: pointer;
-  margin-top: var(--zd_size5);
+  margin-top: 5px;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps';
-//Components
+import { defaultProps } from './props/defaultProps'; //Components
+
 import Modal from '../../Modal/Modal';
 let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
   let {
@@ -28,20 +28,23 @@ export default class PortalLayer extends React.Component {
     this.updateState = this.updateState.bind(this);
     this.getState = this.getState.bind(this);
   }
+
   componentDidUpdate(prevProps) {
     let {
-        isActive
-      } = this.props,
-      {
-        isActive: prevActive
-      } = prevProps;
+      isActive
+    } = this.props,
+        {
+      isActive: prevActive
+    } = prevProps;
     isActive = Boolean(isActive), prevActive = Boolean(prevActive);
+
     if (typeof isActive !== 'undefined' && isActive != prevActive && Boolean(this.state.isOpen) != isActive) {
       this.setState({
         isOpen: isActive
       });
     }
   }
+
   updateState(alertState) {
     if (typeof alertState === 'boolean') {
       this.setState({
@@ -51,9 +54,11 @@ export default class PortalLayer extends React.Component {
       this.setState(alertState);
     }
   }
+
   getState() {
     return Object.keys(this.state).length == 1 ? this.state.isOpen : this.state;
   }
+
   componentDidMount() {
     let {
       saveUpdateFunction,
@@ -63,19 +68,20 @@ export default class PortalLayer extends React.Component {
     saveUpdateFunction && saveUpdateFunction(this.updateState, name);
     saveGetFunction && saveGetFunction(this.getState, name);
   }
+
   render() {
     let {
-        children,
-        renderChildren,
-        portalId,
-        autoZIndexNeeded,
-        isChildrenRestrictionNeeded
-      } = this.props,
-      {
-        isOpen = false
-      } = this.state;
+      children,
+      renderChildren,
+      portalId,
+      autoZIndexNeeded,
+      isChildrenRestrictionNeeded
+    } = this.props,
+        {
+      isOpen = false
+    } = this.state;
     let Element = children && children.type,
-      elementProps = children && children.props;
+        elementProps = children && children.props;
     return /*#__PURE__*/React.createElement(Modal, {
       autoZIndexNeeded: autoZIndexNeeded,
       portalId: portalId,
@@ -88,11 +94,10 @@ export default class PortalLayer extends React.Component {
       isActive: isOpen
     }));
   }
+
 }
 PortalLayer.defaultProps = defaultProps;
-PortalLayer.propTypes = propTypes;
-
-// if (__DOCS__) {
+PortalLayer.propTypes = propTypes; // if (__DOCS__) {
 //   PortalLayer.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'Style Guide'

package/es/semantic/Button/Button.js

@@ -6,6 +6,7 @@ export default class Button extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     const {
       value,
@@ -47,10 +48,10 @@ export default class Button extends React.Component {
       "data-title": title
     }, children ? children : text);
   }
+
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes;
-// if (__DOCS__) {
+Button.propTypes = propTypes; // if (__DOCS__) {
 //   Button.docs = {
 //     componentGroup: 'semantic',
 //     folderName: 'DefaultComponents'