@zohodesk/components 1.0.0-temp-191 → 1.0.0-temp-192

package/es/Button/css/Button.module.css

@@ -3,13 +3,13 @@
   /*  Variable:Ignore  */
   --button_letter_spacing: 0.2px;
   --button_cursor: pointer;
-  --button_font_size: 13px;
+  --button_font_size: var(--zd_font_size13);
   --button_text_color: var(--zdt_button_default_text);
   --button_font_family: var(--zd_regular);
   --button_text_transform: capitalize;
   --button_bg_color: var(--zdt_button_default_bg);
   --button_border_radius: 4px;
-  --button_min_width: 90px;
+  --button_min_width: var(--zd_size90);
   --button_height: auto;
   --button_border_width: 0;
   --button_border_style: solid;
@@ -19,23 +19,22 @@
   --button_box_shadow: none;
 
   /* button loading status default variables */
-  --button_loading_bg_color: var(--zdt_base_bg);
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
   --button_loading_border_radius: 50%;
 
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
-
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
+  letter-spacing: var(--button_letter_spacing);
+  opacity: var(--button_opacity);
   transition-property: background-color, color, border;
   transition-duration: var(--zd_transition2);
   transition-timing-function: ease;
   border: 0;
-  letter-spacing: var(--button_letter_spacing);
   cursor: var(--button_cursor);
-  opacity: var(--button_opacity);
 }
 
 .native:disabled {
@@ -52,14 +51,14 @@
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
+  min-width: var(--button_min_width);
+  height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
-  min-width: var(--button_min_width);
   border-width: var(--button_border_width);
   border-style: var(--button_border_style);
   border-color: var(--button_border_color);
   padding: var(--button_padding);
-  height: var(--button_height);
   box-shadow: var(--button_box_shadow);
 }
 
@@ -73,39 +72,39 @@
 }
 
 .small {
-  --button_padding: 4px 7px;
-  --button_min_width: 50px;
-  --button_font_size: 10px;
+  --button_padding: var(--zd_size4) var(--zd_size7);
+  --button_min_width: var(--zd_size50);
+  --button_font_size: var(--zd_font_size10);
 }
 
 .medium {
-  --button_padding: 6px 15px;
+  --button_padding: var(--zd_size6) var(--zd_size15);
 }
 
 .large {
-  --button_padding: 9px 14px;
-  --button_min_width: 80px;
-  --button_font_size: 12px;
+  --button_padding: var(--zd_size9) var(--zd_size14);
+  --button_min_width: var(--zd_size80);
+  --button_font_size: var(--zd_font_size12);
 }
 
 .xlarge {
-  --button_padding: 12px 25px;
-  --button_min_width: 90px;
-  --button_font_size: 13px;
+  --button_padding: var(--zd_size12) var(--zd_size25);
+  --button_min_width: var(--zd_size90);
+  --button_font_size: var(--zd_font_size13);
 }
 
 .mediumBtn {
+  --button_height: var(--zd_size42);
+  --button_min_width: var(--zd_size42);
+  --button_font_size: var(--zd_font_size10);
   text-align: center;
-  --button_height: 42px;
-  --button_min_width: 42px;
-  --button_font_size: 10px;
 }
 
 .smallBtn {
+  --button_height: var(--zd_size22);
+  --button_min_width: var(--zd_size22);
+  --button_font_size: var(--zd_font_size13);
   text-align: center;
-  --button_height: 22px;
-  --button_min_width: 22px;
-  --button_font_size: 13px;
 }
 
 .smallBtnprimary,
@@ -133,22 +132,20 @@
 
 .plainprimary {
   --button_text_color: var(--zdt_button_default_text);
-  --button_padding: 5px;
+  --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
-
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: 5px;
+  --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
-
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -163,7 +160,6 @@
 .tertiaryfilled {
   --button_border_width: 1px;
 }
-
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -174,7 +170,6 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
-
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -184,7 +179,6 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
-
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
@@ -195,7 +189,6 @@
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
-
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -205,7 +198,6 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
-
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -216,7 +208,6 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
-
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -226,7 +217,6 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
-
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -237,85 +227,117 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
-
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
 
 .overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   background: inherit;
   border-radius: inherit;
 }
 
+[dir=ltr] .overlay {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .overlay {
+  right: 0 ;
+  left: 0 ;
+}
+
 .loading {
   position: absolute;
-  left: 50%;
-  top: 50%;
+  top: 50% ;
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}
+
+[dir=ltr] .loading {
+  left: 50% ;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
-  width: 20px;
-  height: 20px;
+}
+
+[dir=rtl] .loading {
+  right: 50% ;
+  transform: translate(50%, -50%);
+  -moz-transform: translate(50%, -50%);
+  -webkit-transform: translate(50%, -50%);
 }
 
 .loadingelement {
-  animation: crlrotate var(--zd_no_transition8) linear infinite;
-  -moz-animation: crlrotate var(--zd_no_transition8) linear infinite;
-  -webkit-animation: crlrotate var(--zd_no_transition8) linear infinite;
-  border-radius: 50%;
-  height: inherit;
-  width: inherit;
+  height: inherit ;
+  width: inherit ;
   position: relative;
   display: inline-block;
+  border-radius: 50%;
   transform-origin: 50%;
 }
 
+[dir=ltr] .loadingelement {
+  animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
+  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
+  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
+}
+
+[dir=rtl] .loadingelement {
+  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
+  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
+  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
+}
+
 .loadingelement:before,
 .loadingelement:after {
   content: '';
   position: absolute;
+}
+
+.loadingelement:before, .loadingelement:after {
   background-color: var(--button_loading_bg_color);
   border-radius: var(--button_loading_border_radius);
 }
 
 .smallloading,
 .mediumloading {
-  height: 10px;
-  width: 10px;
+  height: var(--zd_size10) ;
+  width: var(--zd_size10) ;
 }
 
 .loadingelement:after {
-  top: 1px;
-  bottom: 1px;
-  left: 1px;
-  right: 1px;
+  top: var(--zd_size1) ;
+  bottom: var(--zd_size1) ;
+}
+
+[dir=ltr] .loadingelement:after {
+  left: var(--zd_size1) ;
+  right: var(--zd_size1) ;
+}
+
+[dir=rtl] .loadingelement:after {
+  right: var(--zd_size1) ;
+  left: var(--zd_size1) ;
 }
 
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
-
 .primaryelement {
-  --button_loading_bg_color: var(--zdt_base_bg);
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
-
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
-
 .dangerelement {
-  --button_loading_bg_color: var(--zdt_base_bg);
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
-
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
-
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -325,25 +347,33 @@
 }
 
 .loadingelement:before {
+  top: calc( var(--zd_size1) * -1 ) ;
+  bottom: calc( var(--zd_size1) * -1 ) ;
   background: var(--zdt_button_loading_linear_gradient);
   background-repeat: no-repeat;
   background-size: 50% 50%;
-  top: -1px;
-  bottom: -1px;
-  left: -1px;
-  right: -1px;
+}
+
+[dir=ltr] .loadingelement:before {
+  left: calc( var(--zd_size1) * -1 ) ;
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=rtl] .loadingelement:before {
+  right: calc( var(--zd_size1) * -1 ) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
-  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
-  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
 }
 
 .primarysuccess {
@@ -358,7 +388,7 @@
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
-@keyframes crlrotate {
+@keyframes crlrotate-ltr {
   0% {
     transform: scaleX(-1) rotate(0deg);
   }
@@ -368,7 +398,17 @@
   }
 }
 
-@-moz-keyframes crlrotate {
+@keyframes crlrotate-rtl {
+  0% {
+    transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    transform: scaleX(-1) rotate(360deg);
+  }
+}
+
+@-moz-keyframes crlrotate-ltr {
   0% {
     -moz-transform: scaleX(-1) rotate(0deg);
   }
@@ -378,7 +418,17 @@
   }
 }
 
-@-webkit-keyframes crlrotate {
+@-moz-keyframes crlrotate-rtl {
+  0% {
+    -moz-transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: scaleX(-1) rotate(360deg);
+  }
+}
+
+@-webkit-keyframes crlrotate-ltr {
   0% {
     -webkit-transform: scaleX(-1) rotate(0deg);
   }
@@ -388,11 +438,19 @@
   }
 }
 
-/*rtl:begin:ignore*/
+@-webkit-keyframes crlrotate-rtl {
+  0% {
+    -webkit-transform: scaleX(-1) rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: scaleX(-1) rotate(360deg);
+  }
+}
 .success {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 50% ;
+  left: 50% ;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
@@ -400,10 +458,10 @@
 }
 
 .successelement {
-  height: 15px;
+  height: var(--zd_size15) ;
   position: relative;
-  top: -2px;
-  width: 6px;
+  top: calc( var(--zd_size2) * -1 ) ;
+  width: var(--zd_size6) ;
   transform: scaleX(-1) rotate(135deg);
   -moz-transform: scaleX(-1) rotate(135deg);
   -webkit-transform: scaleX(-1) rotate(135deg);
@@ -416,57 +474,55 @@
 
 @keyframes tick {
   0% {
-    height: 0;
-    width: 0;
+    height: 0 ;
+    width: 0 ;
   }
 
   50% {
-    height: 0;
-    width: 6px;
+    height: 0 ;
+    width: var(--zd_size6) ;
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
   }
 }
 
 @-moz-keyframes tick {
   0% {
-    height: 0;
-    width: 0;
+    height: 0 ;
+    width: 0 ;
   }
 
   50% {
-    height: 0;
-    width: 6px;
+    height: 0 ;
+    width: var(--zd_size6) ;
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
   }
 }
 
 @-webkit-keyframes tick {
   0% {
-    height: 0;
-    width: 0;
+    height: 0 ;
+    width: 0 ;
   }
 
   50% {
-    height: 0;
-    width: 6px;
+    height: 0 ;
+    width: var(--zd_size6) ;
   }
 
   100% {
-    height: 15px;
-    width: 6px;
+    height: var(--zd_size15) ;
+    width: var(--zd_size6) ;
   }
 }
 
-/*rtl:end:ignore*/
-
-.loader {
-  color: var(--dot_mirror)
+.loader{
+  color:var(--dot_mirror)
 }

package/es/Buttongroup/Buttongroup.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* button group default variables */
-  --buttongroup_bg_color: var(--zdt_base_bg);
+  --buttongroup_bg_color: var(--zdt_buttongroup_default_bg);
   --buttongroup_box_shadow: none;
   --buttongroup_padding: 0;
   --buttongroup_border_width: 0;
@@ -20,25 +20,38 @@
 }
 
 .footer {
-  --buttongroup_padding: 20px 0 20px 60px
-    /*rtl: 20px 60px 20px 0*/
-  ;
   --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
 }
 
+[dir=ltr] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
+[dir=rtl] .footer {
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60);
+}
+
 .header {
-  --buttongroup_padding: 12px 20px;
+  --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
 
-.tab>div button:first-child {
+[dir=ltr] .tab>div button:first-child {
   border-radius: 5px 0 0 5px;
 }
 
-.tab>div button:last-child {
+[dir=rtl] .tab>div button:first-child {
+  border-radius: 0 5px 5px 0;
+}
+
+[dir=ltr] .tab>div button:last-child {
   border-radius: 0 5px 5px 0;
 }
 
+[dir=rtl] .tab>div button:last-child {
+  border-radius: 5px 0 0 5px;
+}
+
 .alignleft {
   composes: fleft from '../common/common.module.css';
 }
@@ -51,22 +64,42 @@
   composes: tcenter from '../common/common.module.css';
 }
 
-.alignleft>button:first-child {
-  margin-left: 0;
+[dir=ltr] .alignleft>button:first-child {
+  margin-left: 0 ;
+}
+
+[dir=rtl] .alignleft>button:first-child {
+  margin-right: 0 ;
+}
+
+[dir=ltr] .alignleft>button {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=rtl] .alignleft>button {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=ltr] .alignright>button:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .alignright>button:last-child {
+  margin-left: 0 ;
 }
 
-.alignleft>button {
-  margin-left: 15px;
+[dir=ltr] .alignright>button {
+  margin-right: var(--zd_size15) ;
 }
 
-.alignright>button:last-child {
-  margin-right: 0;
+[dir=rtl] .alignright>button {
+  margin-left: var(--zd_size15) ;
 }
 
-.alignright>button {
-  margin-right: 15px;
+[dir=ltr] .aligncenter>button {
+  margin-right: var(--zd_size15) ;
 }
 
-.aligncenter>button {
-  margin-right: 15px;
+[dir=rtl] .aligncenter>button {
+  margin-left: var(--zd_size15) ;
 }

package/es/CheckBox/CheckBox.js

@@ -1,3 +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 { propTypes } from './props/propTypes';
 import { defaultProps } from './props/defaultProps';
@@ -73,7 +75,7 @@ export default class CheckBox extends React.Component {
       role = 'checkbox',
       ariaChecked = checked
     } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       dataId: dataId,
       isCover: false,
       isInline: text ? false : true,
@@ -90,9 +92,8 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector-id": dataSelectorId || id,
-      ...CheckBoxProps
-    }, /*#__PURE__*/React.createElement(Box, {
+      "data-selector-id": dataSelectorId || id
+    }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
@@ -144,7 +145,7 @@ export default class CheckBox extends React.Component {
     }) : null))), text && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.text
-    }, /*#__PURE__*/React.createElement(Label, {
+    }, /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
       palette: disabled ? 'disable' : labelPalette,
       id: id,
@@ -155,9 +156,8 @@ export default class CheckBox extends React.Component {
       customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
                             ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
                             ${accessMode} ${customLabel}`,
-      title: toolTip ? toolTip : text,
-      ...LabelProps
-    })));
+      title: toolTip ? toolTip : text
+    }, LabelProps))));
   }
 
 }