@zohodesk/components 1.0.0-temp-42 → 1.0.0-temp-46

package/es/Tag/Tag.module.css

@@ -14,21 +14,16 @@
   --tag_cursor: auto;
 
   /* tag close icon default variables */
+  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
   --tag_closeicon_color: var(--zdt_tag_secondary_text);
+  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6)
+    /*rtl: 0 var(--zd_size6) 0 var(--zd_size7)*/;
   --tag_closeicon_cursor: pointer;
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 
   /* tag normal icon default variables */
-  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
-}[dir=ltr] .varClass {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6)
-    /*rtl: 0 var(--zd_size6) 0 var(--zd_size7)*/;
   --tag_icon_margin: 0 0 0 var(--zd_size5) /*rtl: 0 var(--zd_size5) 0 0*/;
-}[dir=rtl] .varClass {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
-  --tag_icon_margin: 0 var(--zd_size5) 0 0;
+  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }
 .container {
   composes: varClass;
@@ -36,17 +31,17 @@
   position: relative;
   vertical-align: middle;
   color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
-  height: var(--tag_height);
-  max-width: 100%;
-  background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
+  height: var(--tag_height);
   border-width: var(--tag_border_width);
   border-style: var(--tag_border_style);
   border-color: var(--tag_border_color);
   padding: var(--tag_padding);
   cursor: var(--tag_cursor);
+  max-width: 100%;
 }
 .disabled {
   pointer-events: none;
@@ -67,24 +62,18 @@
 }
 .smalltext,
 .mediumtext {
-  font-size: var(--tag_font_size);
-}
-.smalltext, .mediumtext {
   padding: var(--tag_inner_text_padding);
+  font-size: var(--tag_font_size);
 }
 .small {
   --tag_height: var(--zd_size20);
   --tag_padding: var(--zd_size1);
   --tag_inner_text_padding: 0 var(--zd_size7);
 }
-[dir=ltr] .small .avatar {
+.small .avatar {
   transform: scale(0.8) translateX(-2px);
   margin-right: calc(var(--zd_size8) * -1);
 }
-[dir=rtl] .small .avatar {
-  transform: scale(0.8) translateX(2px);
-  margin-left: calc(var(--zd_size8) * -1);
-}
 .smalltext {
   --tag_font_size: var(--zd_font_size12);
 }
@@ -120,34 +109,23 @@
   display: block;
 }
 .close {
+  padding: var(--tag_closeicon_padding);
+  cursor: var(--tag_closeicon_cursor);
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
-  padding: var(--tag_closeicon_padding);
-  cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
   background: var(--tag_closeicon_bg_color);
 }
-[dir=ltr] .close {
-  right: 0;
-}
-[dir=rtl] .close {
-  left: 0;
-}
-[dir=ltr] .lgRadiusClose {
+.lgRadiusClose {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
 }
-[dir=rtl] .lgRadiusClose {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-}
-[dir=ltr] .smRadiusClose {
+.smRadiusClose {
   --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
 }
-[dir=rtl] .smRadiusClose {
-  --tag_closeicon_border_radius: 3px 0 0 3px;
-}
 .closedanger {
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 }

package/es/TextBox/TextBox.module.css

@@ -13,7 +13,7 @@
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
   --textbox_cursor: auto;
-  --textbox_line_height: var(--zd_size35);
+  --textbox_line_height: 2.5;
 
   /* textbox placeholder default variable */
   --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
@@ -41,20 +41,20 @@
 }
 .container {
   composes: basic;
+  background-color: var(--textbox_bg_color);
   transition: border var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
+  padding: var(--textbox_padding);
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
-  line-height: var(--textbox_line_height);
-  background-color: var(--textbox_bg_color);
-  -webkit-transition: border var(--zd_transition2) linear 0s;
-  padding: var(--textbox_padding);
   border-radius: var(--textbox_border_radius);
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
   border-color: var(--textbox_border_color);
+  line-height: var(--textbox_line_height);
 }
 .basic:disabled,
 .container:disabled,
@@ -82,17 +82,21 @@
   --textbox_cursor: pointer;
 }
 /* Need Border */
-.border, .effect:hover, .effect:focus {
+.border,
+.effect:hover,
+.effect:focus {
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
-.effect:hover, .effect:focus {
+.effect:hover,
+.effect:focus {
   border-color: var(--textbox_border_color);
 }
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
-.borderColor_transparent, .borderColor_default {
+.borderColor_transparent,
+.borderColor_default {
   border-color: var(--textbox_border_color);
 }
 .borderColor_transparent {
@@ -114,21 +118,21 @@
 }
 .xmedium {
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: var(--zd_size28);
+  --textbox_line_height: 2;
 }
 .medium {
   --textbox_height: var(--zd_size35);
-  --textbox_line_height: var(--zd_size35);
+  --textbox_line_height: 2.5;
 }
 .small {
   --textbox_font_size: var(--zd_font_size12);
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: var(--zd_size28);
+  --textbox_line_height: 2.3;
 }
 .xsmall {
   --textbox_font_size: var(--zd_font_size13);
   --textbox_height: var(--zd_size25);
-  --textbox_line_height: var(--zd_size25);
+  --textbox_line_height: 1.92;
 }
 .default,
 .primary,

package/es/TextBox/__tests__/TextBox.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBox from '../TextBox';
 import renderer from 'react-test-renderer';

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -33,20 +33,15 @@
 .line {
   position: absolute;
   bottom: 0;
+  left: 0;
+  right: 0;
   min-height: 1px;
   transition: var(--zd_transition2);
-  height: var(--textboxicon_line_height);
   transform: perspective(1px);
+  height: var(--textboxicon_line_height);
 }
-[dir=ltr] .line {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .line {
-  right: 0;
-  left: 0;
-}
-.line, .borderColor_default {
+.line,
+.borderColor_default {
   background-color: var(--textboxicon_line_color);
 }
 .borderColor_transparent {

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBoxIcon from '../TextBoxIcon';
 import renderer from 'react-test-renderer'; // children: PropTypes.node,

package/es/Textarea/Textarea.module.css

@@ -5,7 +5,7 @@
   --textarea_cursor: auto;
   --textarea_text_color: var(--zdt_textarea_default_text);
   --textarea_font_size: var(--zd_font_size14);
-  --textarea_line_height: var(--zd_size22);
+  --textarea_line_height: 1.57;
   --textarea_padding: var(--zd_size2) 0;
   --textarea_height: var(--zd_size30);
 
@@ -19,10 +19,11 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
+  color: var(--textarea_text_color);
 }
-.basic, .noBorder {
+.basic,
+.noBorder {
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
@@ -60,20 +61,20 @@
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   width: 100%;
   max-width: 100%;
   min-width: 100px;
+  border-style: solid;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
-  height: var(--textarea_height);
-  -webkit-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
+  height: var(--textarea_height);
 }
 .needBorder {
   --textarea_border_width: 0 0 1px 0;
@@ -98,13 +99,13 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size28);
-  --textarea_line_height: var(--zd_size19);
+  --textarea_line_height: 1.35;
 }
 .xmedium {
   --textarea_font_size: var(--zd_font_size13);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size25);
-  --textarea_line_height: var(--zd_size17);
+  --textarea_line_height: 1.30;
 }
 .small {
   --textarea_height: var(--zd_size30);

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Textarea from '../Textarea';
 import renderer from 'react-test-renderer';

package/es/Tooltip/Tooltip.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.string.replace";
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Tooltip.module.css';

package/es/Tooltip/Tooltip.module.css

@@ -1,30 +1,28 @@
 .tooltiptext {
   position: fixed;
   z-index: 9999999; /*Hook for editor alert*/
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
   pointer-events: none;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
 }
 .tooltipcont {
+  background-color: var(--zdt_tooltip_default_bg);
   color: var(--zdt_tooltip_default_text);
+  padding: 0 var(--zd_size10);
   font-size: var(--zd_font_size13);
   font-family: var(--zd_semibold);
   word-break: break-word;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
   max-width: 420px;
-  line-height: var(--zd_size20);
+  line-height: 1.53;
   min-height: var(--zd_size24);
   white-space: normal;
   overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10);
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
 }
+/*rtl:begin:ignore*/
 .tooltiparrow {
   content: '';
   position: absolute;
@@ -70,6 +68,7 @@
 .arrowRight {
   transform: rotate(135deg) translateY(50%);
 }
+/*rtl:end:ignore*/
 @keyframes tooltip-grow {
   from {
     opacity: 0;

package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js

@@ -56,9 +56,9 @@ export default class VelocityAnimation__demo extends React.Component {
     let animate = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     };
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js

@@ -76,9 +76,9 @@ export default class VelocityAnimationGroup__demo extends React.Component {
     let animate = {
       width: '200px',
       height: '100px',
-      background: 'var(--dot_bg_black)',
+      background: 'var(--dot_black)',
       textAlign: 'center',
-      color: 'var(--dot_text_white)',
+      color: 'var(--dot_white)',
       lineHeight: '100px'
     },
         field = {

package/es/a11y/FocusScope/FocusScope.js

@@ -225,9 +225,7 @@ function useFocusContainment(scopeRef, contain) {
   }, [raf]);
 }
 
-function isElementInAnyScope(element) {
-  let scopes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
+function isElementInAnyScope(element, scopes = []) {
   for (let scope of scopes.values()) {
     if (isElementInScope(element, scope.current)) {
       return true;
@@ -237,14 +235,11 @@ function isElementInAnyScope(element) {
   return false;
 }
 
-function isElementInScope(element) {
-  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+function isElementInScope(element, scope = []) {
   return scope.some(node => node.contains(element));
 }
 
-function focusElement() {
-  let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
+function focusElement(element = null) {
   if (element != null) {
     element.focus();
   }
@@ -264,8 +259,7 @@ function findElement(elements) {
   return ele.length ? ele[0] : null;
 }
 
-function focusFirstInScope() {
-  let scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function focusFirstInScope(scope = []) {
   let elements = getFocusableElementsInScope(scope, {
     tabbable: true
   });

package/es/beta/FocusRing/FocusRing.js

@@ -16,10 +16,7 @@ const FOCUS_VISIBLE_INPUT_KEYS = {
   Escape: false
 };
 
-function triggerChangeHandlers() {
-  let evType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : eventFrom;
-  let e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : eventType;
-
+function triggerChangeHandlers(evType = eventFrom, e = eventType) {
   for (let handler of changeHandlers) {
     handler(evType, e);
   }

package/es/beta/FocusRing/FocusRing.module.css

@@ -1,24 +1,19 @@
 .input{
   width:100%;
-  outline: 0;
   border: 1px;
-  border-bottom: 1px solid #ddd
+  border-bottom: 1px solid #ddd;
+  outline: 0
 }
 .badFocus {
   display: inline-block;
   margin-top: 10px;
   border-radius: 2px;
   box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+  margin-right: 5px;
   margin-bottom: 30px;
   padding: 2px;
   margin: 10px;
 }
-[dir=ltr] .badFocus {
-  margin-right: 5px;
-}
-[dir=rtl] .badFocus {
-  margin-left: 5px;
-}
 :focus{
   outline: 0;
 }
@@ -29,47 +24,38 @@
   box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
 }
 .inpFocus{
-  width: auto;
   padding: 5px;
   border-radius: 2px;
   margin: 10px;
+  width: auto;
 }
-.mouseFocus, .inpFocus:focus{
+.mouseFocus,.inpFocus:focus{
   box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
 }
-.tabFocus, .tabFocus:focus{
+.tabFocus,.tabFocus:focus{
   box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
 }
 .freezeLayer{
   position: fixed;
+  left:0;
+  right: 0;
   top:0;
   bottom: 0;
+  background-color: rgba(20,20,20,.5);
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(20,20,20,.5);
 }
-[dir=ltr] .freezeLayer{
-  left:0;
-  right: 0;
-}
-[dir=rtl] .freezeLayer{
-  right:0;
-  left: 0;
-}
-[dir=ltr] .element{
+.element{
   margin:1rem 0 1rem .5rem;
 }
-[dir=rtl] .element{
-  margin:1rem .5rem 1rem 0;
-}
 .container{
-  min-width: 400px;
-  transition: .3s ease-in-out;
-  position: absolute;
   background-color: #fff;
   border-radius: 10px;
+  min-width: 400px;
   padding: 20px;
+  transition: .3s ease-in-out;
+  position: absolute;
 }
 .formContainer{
   display: flex;
@@ -85,10 +71,10 @@ label{
 .button {
   -webkit-appearance: none;
   appearance: none;
-  color: white;
-  font-size: 14px;
   background: green;
   border: none;
+  color: white;
+  font-size: 14px;
   padding: 4px 8px;
 }
 
@@ -103,50 +89,39 @@ label{
 .box1{
   transform: scale(1);
 }
-[dir=ltr] .manage{
+.manage{
   right: 0;
 }
-[dir=rtl] .manage{
-  left: 0;
-}
 .primary{
-    color: #fff;
-    text-decoration: none;
-    font-size: 13px;
     background: #00aefe;
+    color: #fff;
     box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
     padding: 7px 12px;
     cursor: pointer;
+    text-decoration: none;
+    font-size: 13px;
     margin-top: 1px;
     border-radius: 3px;
     border: 1px solid #00aefe;
     margin:10px
   }
   .secondary{
-    color: #8c8c8c;
-    text-decoration: none;
-    font-size: 13px;
     background: #fff;
+    color: #8c8c8c;
     box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
     padding: 7px 12px;
     cursor: pointer;
+    text-decoration: none;
+    font-size: 13px;
     margin-top: 1px;
     border-radius: 3px;
     border: 1px solid #8c8c8c
   }
   
-  [dir=ltr] .primary:focus{
-  box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  [dir=rtl] .primary:focus{
-    box-shadow: -2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  [dir=ltr] .secondary:focus{
-  box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+  .primary:focus{
+    box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
   }
   
-  [dir=rtl] .secondary:focus{
-    box-shadow: -2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+  .secondary:focus{
+    box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
   }