@zohodesk/components 1.0.0-temp-121 → 1.0.0-temp-123

package/lib/Tab/Tabs.js

@@ -424,7 +424,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         getTargetRef = _this$props8.getTargetRef,
         position = _this$props8.position,
         customProps = _this$props8.customProps,
-        getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder;
+        getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder,
+        dataSelectorId = _this$props8.dataSelectorId;
       var _customProps$DropBoxP = customProps.DropBoxProps,
         DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
         _customProps$ListItem = customProps.ListItemProps,
@@ -458,7 +459,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           isVirtual: isVirtual
         }, classProps));
       }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_TabsModule["default"].menu, " ")
+        className: "".concat(_TabsModule["default"].menu, " "),
+        dataSelectorId: "".concat(dataSelectorId, "_moreIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
@@ -545,7 +547,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         align = _this$props9.align,
         needAppearance = _this$props9.needAppearance,
         children = _this$props9.children,
-        containerClass = _this$props9.containerClass;
+        containerClass = _this$props9.containerClass,
+        dataSelectorId = _this$props9.dataSelectorId;
       var _this$state2 = this.state,
         totalDimension = _this$state2.totalDimension,
         tabDimensions = _this$state2.tabDimensions,
@@ -558,7 +561,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var tabsClass = (0, _Common.cs)([_TabsModule["default"].tab, className, needAppearance && appearanceClass]);
       var hlClass = (0, _Common.cs)([_TabsModule["default"].highlight, highlightClass, isAnimate && _TabsModule["default"].lineAnimate]);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: containerClass
+        className: containerClass,
+        dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: align === 'vertical' ? 'row' : 'column',
         className: tabsClass,

package/lib/Tab/props/defaultProps.js

@@ -6,15 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.Tabs_defaultProps = exports.Tab_defaultProps = exports.TabWrapper_defaultProps = exports.TabContent_defaultProps = exports.TabContentWrapper_defaultProps = void 0;
 var Tab_defaultProps = {
   dataId: 'tabMenu',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tab'
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
-  dataId: 'tabContent'
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
 };
 exports.TabContent_defaultProps = TabContent_defaultProps;
 var TabContentWrapper_defaultProps = {
-  children: []
+  children: [],
+  dataSelectorId: 'tabContentWrapper'
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {
@@ -34,7 +37,8 @@ var Tabs_defaultProps = {
   iconName: 'ZD-TB-menu',
   iconSize: '7',
   containerClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tabs'
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {
@@ -45,6 +49,7 @@ var TabWrapper_defaultProps = {
   needTabBorder: false,
   type: 'alpha',
   align: 'vertical',
-  needAppearance: true
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
 };
 exports.TabWrapper_defaultProps = TabWrapper_defaultProps;

package/lib/Tab/props/propTypes.js

@@ -30,14 +30,16 @@ var Tab_propTypes = {
   tourId: _propTypes["default"].string,
   type: _propTypes["default"].string,
   customProps: _propTypes["default"].object,
-  isVirtual: _propTypes["default"].bool
+  isVirtual: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   id: _propTypes["default"].string,
-  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none'])
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: _propTypes["default"].string
 };
 exports.TabContent_propTypes = TabContent_propTypes;
 var TabContentWrapper_propTypes = {
@@ -46,7 +48,8 @@ var TabContentWrapper_propTypes = {
   dataId: _propTypes["default"].string,
   onScroll: _propTypes["default"].func,
   selectedTab: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
 var Tabs_propTypes = {
@@ -94,7 +97,8 @@ var Tabs_propTypes = {
     ListItemProps: _propTypes["default"].object,
     MoreButtonProps: _propTypes["default"].object
   }),
-  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func
+  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {
@@ -109,6 +113,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta'])
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta']),
+  dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tag/Tag.js

@@ -99,6 +99,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         onSelectTag = _this$props4.onSelectTag,
         closeTitle = _this$props4.closeTitle,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         iconName = _this$props4.iconName,
         iconSize = _this$props4.iconSize,
         tooltip = _this$props4.tooltip,
@@ -127,7 +128,8 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         ref: this.getRef,
         "data-title": tooltip ? tooltip : text,
         tabIndex: disabled ? '-1' : '0',
-        "aria-labelledby": getAriaId
+        "aria-labelledby": getAriaId,
+        "data-selector-id": dataSelectorId
       }, hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _TagModule["default"].avatar
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {

package/lib/Tag/props/defaultProps.js

@@ -15,6 +15,7 @@ var defaultProps = {
   customClass: {},
   a11y: {},
   needEffect: true,
-  isReadOnly: false
+  isReadOnly: false,
+  dataSelectorId: 'tag'
 };
 exports.defaultProps = defaultProps;

package/lib/Tag/props/propTypes.js

@@ -37,6 +37,7 @@ var propTypes = {
     clearLabel: _propTypes["default"].string
   }),
   needEffect: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool
+  isReadOnly: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/TextBox/TextBox.js

@@ -113,7 +113,8 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
         isFocus = _this$props4.isFocus,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        dataSelectorId = _this$props4.dataSelectorId;
       var ariaLabel = a11y.ariaLabel,
         ariaAutocomplete = a11y.ariaAutocomplete,
         ariaControls = a11y.ariaControls,
@@ -160,6 +161,7 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
         "aria-multiselectable": ariaMultiselectable,
         className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass ? customClass : ''),
         "data-id": "".concat(dataId),
+        "data-selector-id": dataSelectorId,
         id: htmlId || id,
         maxLength: maxLength,
         name: name,

package/lib/TextBox/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = {
   borderColor: 'default',
   a11y: {},
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBox'
 };
 exports.defaultProps = defaultProps;

package/lib/TextBox/props/propTypes.js

@@ -53,5 +53,5 @@ var propTypes = (_propTypes = {
   ariaActivedescendant: _propTypes2["default"].string,
   ariaReadonly: _propTypes2["default"].bool,
   ariaMultiselectable: _propTypes2["default"].bool
-})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _propTypes);
+})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _propTypes);
 exports.propTypes = propTypes;

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -87,6 +87,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         onChange = _this$props2.onChange,
         title = _this$props2.title,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         needReadOnlyStyle = _this$props2.needReadOnlyStyle,
         isClickable = _this$props2.isClickable,
         needEffect = _this$props2.needEffect,
@@ -118,6 +119,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         alignBox: "row",
         isCover: false,
         className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : _TextBoxIconModule["default"].readonly : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
+        dataSelectorId: dataSelectorId,
         "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true

package/lib/TextBoxIcon/props/defaultProps.js

@@ -23,6 +23,7 @@ var defaultProps = {
   customClass: {},
   iconOnHover: false,
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
 };
 exports.defaultProps = defaultProps;

package/lib/TextBoxIcon/props/propTypes.js

@@ -10,6 +10,7 @@ var propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     clearText: _propTypes["default"].string

package/lib/Textarea/Textarea.js

@@ -69,6 +69,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         getRef = _this$props.getRef,
         onFocus = _this$props.onFocus,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         isReadOnly = _this$props.isReadOnly,
         needAppearance = _this$props.needAppearance,
         needReadOnlyStyle = _this$props.needReadOnlyStyle,
@@ -111,7 +112,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         onBlur: this.onBlur,
         ref: getRef,
         value: text,
-        id: htmlId
+        id: htmlId,
+        "data-selector-id": dataSelectorId
       }));
     }
   }]);

package/lib/Textarea/props/defaultProps.js

@@ -18,6 +18,7 @@ var defaultProps = {
   needEffect: true,
   autoFocus: false,
   customClass: '',
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'textarea'
 };
 exports.defaultProps = defaultProps;

package/lib/Textarea/props/propTypes.js

@@ -12,6 +12,7 @@ var propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   htmlId: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,

package/lib/common/boxShadow.module.css

@@ -37,41 +37,41 @@
 }
 
 :global(.shadowOffWithOutline) {
-    --bs_contrast_outine: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_contrast_outline: 0 0 2px var(--zdt_contrast_shadow);
 
     /* avatar */
-    --bs_avatar_black: var(--bs_contrast_outine);
-    --bs_avatar_white: var(--bs_contrast_outine);
+    --bs_avatar_black: var(--bs_contrast_outline);
+    --bs_avatar_white: var(--bs_contrast_outline);
 
     /* button */
-    --bs_button_primary: var(--bs_contrast_outine);
-    --bs_button_danger: var(--bs_contrast_outine);
+    --bs_button_primary: var(--bs_contrast_outline);
+    --bs_button_danger: var(--bs_contrast_outline);
 
     /* button group */
-    --bs_buttongroup_footer: var(--bs_contrast_outine);
+    --bs_buttongroup_footer: var(--bs_contrast_outline);
 
     /* dropbox */
-    --bs_dropbox_default: var(--bs_contrast_outine);
-    --bs_dropbox_top: var(--bs_contrast_outine);
-    --bs_dropbox_left: var(--bs_contrast_outine);
-    --bs_dropbox_right: var(--bs_contrast_outine);
-    --bs_dropbox_bottom: var(--bs_contrast_outine);
-    --bs_dropbox_arrow: var(--bs_contrast_outine);
+    --bs_dropbox_default: var(--bs_contrast_outline);
+    --bs_dropbox_top: var(--bs_contrast_outline);
+    --bs_dropbox_left: var(--bs_contrast_outline);
+    --bs_dropbox_right: var(--bs_contrast_outline);
+    --bs_dropbox_bottom: var(--bs_contrast_outline);
+    --bs_dropbox_arrow: var(--bs_contrast_outline);
 
     /* ribbon */
-    --bs_ribbon_default: var(--bs_contrast_outine);
-    --bs_ribbon_danger: var(--bs_contrast_outine);
-    --bs_ribbon_primary: var(--bs_contrast_outine);
-    --bs_ribbon_secondary: var(--bs_contrast_outine);
-    --bs_ribbon_info: var(--bs_contrast_outine);
-    --bs_ribbon_dark: var(--bs_contrast_outine);
+    --bs_ribbon_default: var(--bs_contrast_outline);
+    --bs_ribbon_danger: var(--bs_contrast_outline);
+    --bs_ribbon_primary: var(--bs_contrast_outline);
+    --bs_ribbon_secondary: var(--bs_contrast_outline);
+    --bs_ribbon_info: var(--bs_contrast_outline);
+    --bs_ribbon_dark: var(--bs_contrast_outline);
 
     /* switch */
-    --bs_switch_default: var(--bs_contrast_outine);
+    --bs_switch_default: var(--bs_contrast_outline);
 
     /* tabs */
-    --bs_tabs_shadow: var(--bs_contrast_outine);
+    --bs_tabs_shadow: var(--bs_contrast_outline);
 
     /* tooltip */
-    --bs_tooltip_shadow: var(--bs_contrast_outine);
+    --bs_tooltip_shadow: var(--bs_contrast_outline);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-121",
+  "version": "1.0.0-temp-123",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,