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

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -28,48 +28,48 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: 10px 0 0 0;
+    --dropbox_padding: var(--zd_size10) 0 0 0;
 }
 
 /* sizes */
 .mini {
-    width: 140px;
+    width: var(--zd_size140) ;
 }
 
 .xmini {
-    width: 160px;
+    width: var(--zd_size160) ;
 }
 
 .xsmall {
-    width: 180px;
+    width: var(--zd_size180) ;
 }
 
 .small {
-    width: 200px;
+    width: var(--zd_size200) ;
 }
 
 .medium {
-    width: 220px;
+    width: var(--zd_size220) ;
 }
 
 .large {
-    width: 260px;
+    width: var(--zd_size260) ;
 }
 
 .mlarge {
-    width: 280px;
+    width: var(--zd_size280) ;
 }
 
 .xlarge {
-    width: 304px;
+    width: var(--zd_size304) ;
 }
 
 .xxlarge {
-    width: 364px;
+    width: var(--zd_size364) ;
 }
 
 .default {
-    width: 100%;
+    width: 100% ;
 }
 
 /* shadow */
@@ -95,120 +95,120 @@
 
 /* box direction styles */
 .topStart {
-    bottom: 100%;
-    right: 0;
+    bottom: 100% ;
+    right: 0 ;
 }
 
 .topEnd {
-    bottom: 100%;
-    left: 0;
+    bottom: 100% ;
+    left: 0 ;
 }
 
 .topMid {
-    bottom: 100%;
-    left: 50%;
+    bottom: 100% ;
+    left: 50% ;
     transform: translateX(-50%);
 }
 
 .bottomStart {
-    top: 100%;
-    right: 0;
+    top: 100% ;
+    right: 0 ;
 }
 
 .bottomEnd {
-    top: 100%;
-    left: 0;
+    top: 100% ;
+    left: 0 ;
 }
 
 .bottomMid {
-    top: 100%;
-    left: 50%;
+    top: 100% ;
+    left: 50% ;
     transform: translateX(-50%);
 }
 
 .rightStart {
-    left: 100%;
-    bottom: 0;
+    left: 100% ;
+    bottom: 0 ;
 }
 
 .rightEnd {
-    left: 100%;
-    top: 0;
+    left: 100% ;
+    top: 0 ;
 }
 
 .rightMid {
-    left: 100%;
-    top: 50%;
+    left: 100% ;
+    top: 50% ;
     transform: translateY(-50%);
 }
 
 .leftStart {
-    right: 100%;
-    bottom: 0;
+    right: 100% ;
+    bottom: 0 ;
 }
 
 .leftEnd {
-    right: 100%;
-    top: 0;
+    right: 100% ;
+    top: 0 ;
 }
 
 .leftMid {
-    right: 100%;
-    top: 50%;
+    right: 100% ;
+    top: 50% ;
     transform: translateY(-50%);
 }
 
 /* space for arrow */
 .arrowtop {
-    padding-bottom: 10px;
+    padding-bottom: var(--zd_size10) ;
 }
 
 .arrowright {
-    padding-left: 10px;
+    padding-left: var(--zd_size10) ;
 }
 
 .arrowleft {
-    padding-right: 10px;
+    padding-right: var(--zd_size10) ;
 }
 
 .arrowbottom {
-    padding-top: 10px;
+    padding-top: var(--zd_size10) ;
 }
 
 /* space from target */
 .paddingSpace_top {
-    padding-bottom: 5px;
+    padding-bottom: var(--zd_size5) ;
 }
 
 .paddingSpace_right {
-    padding-left: 5px;
+    padding-left: var(--zd_size5) ;
 }
 
 .paddingSpace_left {
-    padding-right: 5px;
+    padding-right: var(--zd_size5) ;
 }
 
 .paddingSpace_bottom {
-    padding-top: 5px;
+    padding-top: var(--zd_size5) ;
 }
 
 .arrow {
     position: absolute;
-    height: 34px;
-    width: 34px;
-    clip: rect(3px,
-            29px,
-            17px,
-            8px);
-    padding: 4px;
+    height: var(--zd_size34) ;
+    width: var(--zd_size34) ;
+    clip: rect(var(--zd_size3),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    padding: var(--zd_size4) ;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .arrowShape {
-    height: 10px;
-    width: 10px;
+    height: var(--zd_size10) ;
+    width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
@@ -225,20 +225,20 @@
 .top .start,
 .top .end,
 .top .mid {
-    bottom: -17px;
+    bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
 .top .start {
-    left: 28px;
+    left: var(--zd_size28) ;
 }
 
 .top .end {
-    right: 28px;
+    right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
 .top .mid {
-    left: 50%;
+    left: 50% ;
 }
 
 .top .start,
@@ -249,19 +249,19 @@
 .bottom .start,
 .bottom .end,
 .bottom .mid {
-    top: -17px;
+    top: calc( var(--zd_size17) * -1 ) ;
 }
 
 .bottom .start {
-    left: 28px;
+    left: var(--zd_size28) ;
 }
 
 .bottom .mid {
-    left: 50%;
+    left: 50% ;
 }
 
 .bottom .end {
-    right: 28px;
+    right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
@@ -273,20 +273,20 @@
 .left .start,
 .left .mid,
 .left .end {
-    right: -17px;
+    right: calc( var(--zd_size17) * -1 ) ;
 }
 
 .left .start {
-    top: 28px;
+    top: var(--zd_size28) ;
 }
 
 .left .end {
     transform: rotate(90deg) translateX(50%);
-    bottom: 28px;
+    bottom: var(--zd_size28) ;
 }
 
 .left .mid {
-    top: 50%;
+    top: 50% ;
 }
 
 .left .start,
@@ -297,15 +297,15 @@
 .right .start,
 .right .mid,
 .right .end {
-    left: -17px;
+    left: calc( var(--zd_size17) * -1 ) ;
 }
 
 .right .start {
-    top: 28px;
+    top: var(--zd_size28) ;
 }
 
 .right .mid {
-    top: 50%;
+    top: 50% ;
 }
 
 .right .start,
@@ -314,7 +314,7 @@
 }
 
 .right .end {
-    bottom: 28px;
+    bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
 .hidden {
@@ -403,31 +403,31 @@
 
 .responsive {
     position: absolute;
-    bottom: 0;
-    width: 100%;
-    max-height: 90%;
+    bottom: 0 ;
+    width: 100% ;
+    max-height: 90% ;
 }
 
 [dir=ltr] .responsive {
-    left: 0;
+    left: 0 ;
 }
 
 [dir=rtl] .responsive {
-    right: 0;
+    right: 0 ;
 }
 
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
-    width: 20%;
+    width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
-    margin: 0 auto 10px;
+    margin: 0 auto var(--zd_size10) ;
 }
 
 .boxPadding {
-    --dropbox_padding: 10px 0;
+    --dropbox_padding: var(--zd_size10) 0;
 }
 
 .darkPalette {

package/lib/DropBox/css/DropBox.module.css

@@ -32,19 +32,19 @@
 
 .freezeLayer {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   composes: activateInDelay;
 }
 
 [dir=ltr] .freezeLayer {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 [dir=rtl] .freezeLayer {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 .freeze {

package/lib/DropDown/DropDown.js

@@ -162,7 +162,8 @@ var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
         className: _DropDownModule["default"].listGroup,
         onScroll: this.onScroll,
         ref: this.getRef,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, children);
     }
   }]);

package/lib/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
 .listGroup {
-  max-height: 220px;
+  max-height: var(--zd_size220) ;
   composes: oflowy from '../common/common.module.css';
-  margin: 8px 0 4px;
+  margin: var(--zd_size8) 0 var(--zd_size4) ;
 }

package/lib/DropDown/DropDownHeading.js

@@ -73,6 +73,7 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         id: htmlId,
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId // tabindex='0'
 
       }, text, children);

package/lib/DropDown/DropDownHeading.module.css

@@ -2,20 +2,20 @@
   /* dropdownheading default variables */
   --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: 10px 20px;
+  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: 20px;
-  --dropdownheading_underline_height: 1px;
+  --dropdownheading_underline_width: var(--zd_size20);
+  --dropdownheading_underline_height: var(--zd_size1);
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: 20px;
+  --dropdownheading_underline_left: var(--zd_size20);
 }
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
   position: relative;
-  font-size: 11px;
+  font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
   color: var(--dropdownheading_text_color);
@@ -25,7 +25,7 @@
 .default::after {
   position: absolute;
   content: '';
-  bottom: 2px;
+  bottom: var(--zd_size2) ;
   width: var(--dropdownheading_underline_width);
   height: var(--dropdownheading_underline_height);
 }

package/lib/DropDown/DropDownItem.js

@@ -105,7 +105,8 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
         onClick: this.onClick,
         onMouseOver: this.onHover,
         ref: this.getRef,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, children && children[0] ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _DropDownItemModule["default"].children
       }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/_react["default"].createElement("span", {

package/lib/DropDown/DropDownItem.module.css

@@ -1,11 +1,11 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: 9px 19px;
+  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
   --dropdownitem-border-color: var(--zdt_dropdown_default_border);
   --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
 
   /* dropdownitem user default variables */
-  --dropdownitem-user-width: 42px;
+  --dropdownitem-user-width: var(--zd_size42);
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
@@ -19,7 +19,7 @@
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
   color: var(--zdt_dropdown_default_text);
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -42,24 +42,24 @@
 }
 
 [dir=ltr] .padding {
-  --dropdownitem-padding: 0 50px 0 0/*rtl: 0 0 0 50px*/;
+  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
 }
 
 [dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 50px;
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
 }
 
 .children {
   display: inline-block;
-  font-size: 0;
+  font-size: 0 ;
 }
 
 [dir=ltr] .children {
-  margin-right: 10px;
+  margin-right: var(--zd_size10) ;
 }
 
 [dir=rtl] .children {
-  margin-left: 10px;
+  margin-left: var(--zd_size10) ;
 }
 
 .value {
@@ -69,8 +69,8 @@
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
@@ -81,11 +81,11 @@
 }
 
 [dir=ltr] .user {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .user {
-  left: 0;
+  left: 0 ;
 }
 
 .list:hover .user {

package/lib/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 15px 0;
+  --dropdownsearch-padding: 0 var(--zd_size15) 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 5px 0;
+  --dropdownsearch-padding: 0 var(--zd_size5) 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 15px 0;
+  --dropdownsearch-padding: 0 var(--zd_size15) 0;
 }

package/lib/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,7 @@
 .separator {
-  height: 1px;
+  height: var(--zd_size1) ;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: 5px 0;
+  margin: var(--zd_size5) 0 ;
 }

package/lib/Heading/Heading.js

@@ -71,7 +71,8 @@ var Heading = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         onDoubleClick: onDoubleClick,
         'data-title': dataTitle || title,
-        'data-id': dataId
+        'data-id': dataId,
+        'data-test-id': dataId
       }, a11y), title);
     }
   }]);

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: initial;
+  font-size: initial ;
   font-weight: initial;
-  margin: initial;
+  margin: initial ;
 }

package/lib/Label/Label.js

@@ -72,6 +72,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId,
         onClick: onClick,
         id: id

package/lib/Label/Label.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* label default variables */
-  --label_font_size: 14px;
+  --label_font_size: var(--zd_font_size14);
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
@@ -16,16 +16,16 @@
   cursor: var(--label_cursor);
 }
 .xsmall {
-  --label_font_size: 12px;
+  --label_font_size: var(--zd_font_size12);
 }
 .small {
-  --label_font_size: 13px;
+  --label_font_size: var(--zd_font_size13);
 }
 .medium {
-  --label_font_size: 14px;
+  --label_font_size: var(--zd_font_size14);
 }
 .large {
-  --label_font_size: 26px;
+  --label_font_size: var(--zd_font_size26);
   composes: semibold from '../common/common.module.css';
 }
 .pointer {

package/lib/Layout/Box.js

@@ -18,7 +18,11 @@ var _LayoutModule = _interopRequireDefault(require("./Layout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/* eslint css-modules/no-unused-class: 0 */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /* eslint-disable  react/no-unused-prop-types*/
 function getBoxClassNames(props) {
@@ -109,16 +113,16 @@ function getBoxProps(props) {
 }
 
 function Box(props) {
-  var childProps = getBoxProps(props);
   var tagName = props.tagName;
-  (0, _utils.setProps)(childProps, props, {
+  var componentProps = (0, _utils.setProps)(_objectSpread({}, getBoxProps(props)), props, {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
+    testId: 'data-test-id',
     tourId: 'data-tour',
     dataSelectorId: 'data-selector-id'
   });
-  return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
+  return /*#__PURE__*/_react["default"].createElement(tagName, componentProps);
 }
 
 Box.propTypes = _propTypes.BoxProps;