@zohodesk/components 1.0.0-alpha-272 → 1.0.0-alpha-274

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;
@@ -72,38 +72,38 @@
 }
 
 .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: 42px;
-  --button_min_width: 42px;
-  --button_font_size: 10px;
+  --button_height: var(--zd_size42);
+  --button_min_width: var(--zd_size42);
+  --button_font_size: var(--zd_font_size10);
   text-align: center;
 }
 
 .smallBtn {
-  --button_height: 22px;
-  --button_min_width: 22px;
-  --button_font_size: 13px;
+  --button_height: var(--zd_size22);
+  --button_min_width: var(--zd_size22);
+  --button_font_size: var(--zd_font_size13);
   text-align: center;
 }
 
@@ -132,7 +132,7 @@
 
 .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);
 }
@@ -142,7 +142,7 @@
 
 .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);
 }
@@ -233,46 +233,46 @@
 
 .overlay {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   background: inherit;
   border-radius: inherit;
 }
 
 [dir=ltr] .overlay {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 [dir=rtl] .overlay {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 .loading {
   position: absolute;
-  top: 50%;
-  width: 20px;
-  height: 20px;
+  top: 50% ;
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
 }
 
 [dir=ltr] .loading {
-  left: 50%;
+  left: 50% ;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
 }
 
 [dir=rtl] .loading {
-  right: 50%;
+  right: 50% ;
   transform: translate(50%, -50%);
   -moz-transform: translate(50%, -50%);
   -webkit-transform: translate(50%, -50%);
 }
 
 .loadingelement {
-  height: inherit;
-  width: inherit;
+  height: inherit ;
+  width: inherit ;
   position: relative;
   display: inline-block;
   border-radius: 50%;
@@ -304,23 +304,23 @@
 
 .smallloading,
 .mediumloading {
-  height: 10px;
-  width: 10px;
+  height: var(--zd_size10) ;
+  width: var(--zd_size10) ;
 }
 
 .loadingelement:after {
-  top: 1px;
-  bottom: 1px;
+  top: var(--zd_size1) ;
+  bottom: var(--zd_size1) ;
 }
 
 [dir=ltr] .loadingelement:after {
-  left: 1px;
-  right: 1px;
+  left: var(--zd_size1) ;
+  right: var(--zd_size1) ;
 }
 
 [dir=rtl] .loadingelement:after {
-  right: 1px;
-  left: 1px;
+  right: var(--zd_size1) ;
+  left: var(--zd_size1) ;
 }
 
 .loadingelement {
@@ -347,21 +347,21 @@
 }
 
 .loadingelement:before {
-  top: -1px;
-  bottom: -1px;
+  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%;
 }
 
 [dir=ltr] .loadingelement:before {
-  left: -1px;
-  right: -1px;
+  left: calc( var(--zd_size1) * -1 ) ;
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 [dir=rtl] .loadingelement:before {
-  right: -1px;
-  left: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
 .primaryelement:before {
@@ -449,8 +449,8 @@
 }
 .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%);
@@ -458,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);
@@ -474,52 +474,52 @@
 
 @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) ;
   }
 }
 

package/es/Buttongroup/Buttongroup.js

@@ -25,6 +25,7 @@ export default class Buttongroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: style[`align${buttonPosition}`]

package/es/Buttongroup/Buttongroup.module.css

@@ -24,17 +24,16 @@
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: 20px 0 20px 60px
-    /*rtl: 20px 60px 20px 0*/
-  ;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60
+)    ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: 20px 0 20px 60px  ;
+  --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;
 }
 
@@ -67,41 +66,41 @@
 }
 
 [dir=ltr] .alignleft>button:first-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }
 
 [dir=rtl] .alignleft>button:first-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=ltr] .alignleft>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }
 
 [dir=rtl] .alignleft>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=ltr] .alignright>button:last-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=rtl] .alignright>button:last-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }
 
 [dir=ltr] .alignright>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=rtl] .alignright>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }
 
 [dir=ltr] .aligncenter>button {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 
 [dir=rtl] .aligncenter>button {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }

package/es/CheckBox/CheckBox.module.css

@@ -41,33 +41,33 @@
   --checkbox_bg_color: inherit;
 }
 .medium {
-  width: 16px;
-  height: 16px;
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
 }
 .small {
-  width: 13px;
-  height: 13px;
+  width: var(--zd_size13) ;
+  height: var(--zd_size13) ;
 }
 
 .checkbox {
   position: relative;
-  font-size: 0;
+  font-size: 0 ;
   display: block;
 }
 .tick {
   position: absolute;
-  left: 0;
+  left: 0 ;
 }
 .mediumtick {
-  top: -2px;
-  height: 20px;
-  width: 20px;
+  top: calc( var(--zd_size2) * -1 ) ;
+  height: var(--zd_size20) ;
+  width: var(--zd_size20) ;
 }
 .smalltick {
-  top: -3px;
-  height: 18px;
-  width: 18px;
-  left: -1px;
+  top: calc( var(--zd_size3) * -1 ) ;
+  height: var(--zd_size18) ;
+  width: var(--zd_size18) ;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 
 .checkedtickPath {
@@ -91,10 +91,10 @@
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
 [dir=ltr] .text {
-  margin-left: 6px;
+  margin-left: var(--zd_size6) ;
 }
 [dir=rtl] .text {
-  margin-right: 6px;
+  margin-right: var(--zd_size6) ;
 }
 
 .checkedprimary,

package/es/DateTime/CalendarView.js

@@ -171,6 +171,7 @@ export default class CalendarView extends React.PureComponent {
       ariaLabel: dayNamesShort
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
+      "data-test-id": `${dataId}_dateContainer`,
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
     }, rows));
   }

package/es/DateTime/DateTime.js

@@ -661,6 +661,7 @@ export default class DateTime extends React.PureComponent {
     const childEle = /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
+      "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
     }, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
       onOpenYearView: this.handleOpenYearView,
@@ -718,7 +719,8 @@ export default class DateTime extends React.PureComponent {
     })) : null));
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
-      "data-id": `${dataId}_dateBoxContainer`
+      "data-id": `${dataId}_dateBoxContainer`,
+      "data-test-id": `${dataId}_dateBoxContainer`
     }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
       size: boxSize,
       boxPosition: position,

package/es/DateTime/DateTime.module.css

@@ -3,24 +3,24 @@
 }
 
 [dir=ltr] .boxPadding {
-  padding-right: 19px;
-  padding-left: 19px;
+  padding-right: var(--zd_size19) ;
+  padding-left: var(--zd_size19) ;
 }
 
 [dir=rtl] .boxPadding {
-  padding-left: 19px;
-  padding-right: 19px;
+  padding-left: var(--zd_size19) ;
+  padding-right: var(--zd_size19) ;
 }
 
 .container {
-  font-size: 16px;
+  font-size: var(--zd_font_size16) ;
   composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
 }
 
 .header {
-  min-height: 36px;
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
@@ -33,18 +33,18 @@
 }
 
 .grid {
-  width: 28px;
-  height: 28px;
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
   line-height: var(--zd_size18);
   text-align: center;
-  padding: 4px 0;
+  padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
 }
 
 .thArrow,
 .datesStr {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
@@ -62,15 +62,15 @@
 }
 
 [dir=ltr] .navigation {
-  margin-left: 2px;
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .navigation {
-  margin-right: 2px;
+  margin-right: var(--zd_size2) ;
 }
 
 .thMonYear {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
@@ -78,8 +78,8 @@
 }
 
 .dateContainer {
-  margin: 0 19px 0 19px;
-  padding: 6px 0 10px 0;
+  margin: 0 var(--zd_size19) 0 var(--zd_size19) ;
+  padding: var(--zd_size6) 0 var(--zd_size10) 0 ;
 }
 
 .separator {
@@ -87,27 +87,27 @@
 }
 
 .days {
-  min-height: 36px;
+  min-height: var(--zd_size36) ;
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: 7px;
+  padding-top: var(--zd_size7) ;
 }
 
 .daysStr {
-  font-size: 10px;
+  font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
 }
 
 .dateRow {
-  height: 28px;
+  height: var(--zd_size28) ;
   composes: alignBetween from '../common/common.module.css';
-  margin: 1px 0 5px;
+  margin: var(--zd_size1) 0 var(--zd_size5) ;
 }
 
 .dateRow:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 ;
 }
 
 .sunday,
@@ -149,24 +149,24 @@
 
 
 .timesection {
-  padding-top: 5px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size5) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .dropDownContainer {
-  padding: 0 5px;
+  padding: 0 var(--zd_size5) ;
 }
 
 .dropDown {
-  width: 60px;
+  width: var(--zd_size60) ;
   display: inline-block;
   position: relative;
-  margin: 0 4px;
+  margin: 0 var(--zd_size4) ;
 }
 
 .footer {
-  margin-top: 10px;
-  padding-bottom: 12px;
+  margin-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size12) ;
 }
 
 .timesection,
@@ -176,7 +176,7 @@
 
 .space {
   display: inline-block;
-  width: 15px;
+  width: var(--zd_size15) ;
 }
 
 .downArrow {
@@ -184,11 +184,11 @@
 }
 
 [dir=ltr] .downArrow {
-  margin-left: 2px;
+  margin-left: var(--zd_size2) ;
 }
 
 [dir=rtl] .downArrow {
-  margin-right: 2px;
+  margin-right: var(--zd_size2) ;
 }
 
 .dateText {
@@ -201,27 +201,27 @@
 
 .text {
   composes: boxPadding;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
   display: block;
-  margin-top: 14px;
+  margin-top: var(--zd_size14) ;
 }
 
 .yearContainer {
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 0 ;
+  width: 100% ;
+  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
-  left: 0;
+  left: 0 ;
 }
 
 [dir=rtl] .yearContainer {
-  right: 0;
+  right: 0 ;
 }
 
 .subContainer {
@@ -229,7 +229,7 @@
 }
 
 .dropBox {
-  width: 100%;
+  width: 100% ;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/es/DateTime/DateWidget.js

@@ -1000,11 +1000,13 @@ class DateWidgetComponent extends React.Component {
       className: `${style.container}`
     }, children ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
       className: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef