@zohodesk/components 1.2.34 → 1.2.36

package/lib/VelocityAnimation/VelocityAnimation/__tests__/VelocityAnimation.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _VelocityAnimation = _interopRequireDefault(require("../VelocityAnimation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('VelocityAnimation', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VelocityAnimation["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, " Test "))),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/VelocityAnimation/VelocityAnimation/__tests__/__snapshots__/VelocityAnimation.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VelocityAnimation rendering the defult props 1`] = `
+<DocumentFragment>
+  <div>
+     Test 
+  </div>
+</DocumentFragment>
+`;

package/lib/VelocityAnimation/VelocityAnimationGroup/__tests__/VelocityAnimationGroup.spec.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _VelocityAnimationGroup = _interopRequireDefault(require("../VelocityAnimationGroup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('VelocityAnimationGroup', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, " Test "))),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
+      isActive: true
+    }, /*#__PURE__*/_react["default"].createElement("div", null, " Test "))),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/VelocityAnimation/VelocityAnimationGroup/__tests__/__snapshots__/VelocityAnimationGroup.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VelocityAnimationGroup rendering isActive is true 1`] = `
+<DocumentFragment>
+  <div>
+     Test 
+  </div>
+</DocumentFragment>
+`;
+
+exports[`VelocityAnimationGroup rendering the defult props 1`] = `<DocumentFragment />`;

package/lib/semantic/Button/__tests__/Button.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Button', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button rendering the defult props 1`] = `
+<DocumentFragment>
+  <button
+    class="buttonReset "
+    data-id="semanticButton"
+    data-test-id="semanticButton"
+    type="button"
+    value="text"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;

package/lib/v1/DateTime/DateWidget.js

@@ -1093,7 +1093,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         customProps: TextBoxProps
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
-        onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick
+        onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
+        dataId: "".concat(dataId, "_datePicker")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-datepicker",
         size: "12"

package/lib/v1/DropDown/DropDownSearch.js

@@ -35,7 +35,8 @@ function DropDownSearch(props) {
       textBoxSize = props.textBoxSize,
       placeHolder = props.placeHolder,
       customClass = props.customClass,
-      getRef = props.getRef;
+      getRef = props.getRef,
+      dataId = props.dataId;
   var _customClass$searchCl = customClass.searchClass,
       searchClass = _customClass$searchCl === void 0 ? '' : _customClass$searchCl,
       _customClass$customTe = customClass.customTextBox,
@@ -54,7 +55,9 @@ function DropDownSearch(props) {
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass)
+    className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass),
+    "data-id": dataId,
+    "data-test-id": dataId
   }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
     id: id,
     inputRef: getReference,

package/lib/v1/DropDown/props/defaultProps.js

@@ -25,6 +25,7 @@ exports.DropDownItem_defaultProps = DropDownItem_defaultProps;
 var DropDownSearch_defaultProps = {
   size: 'medium',
   textBoxSize: 'medium',
-  customClass: {}
+  customClass: {},
+  dataId: 'DropDownSearch'
 };
 exports.DropDownSearch_defaultProps = DropDownSearch_defaultProps;

package/lib/v1/DropDown/props/propTypes.js

@@ -79,7 +79,7 @@ var DropDownSearch_propTypes = (_DropDownSearch_propT = {
 }, _defineProperty(_DropDownSearch_propT, "placeHolder", _propTypes["default"].string), _defineProperty(_DropDownSearch_propT, "size", _propTypes["default"].oneOf(['small', 'medium'])), _defineProperty(_DropDownSearch_propT, "textBoxSize", _propTypes["default"].string), _defineProperty(_DropDownSearch_propT, "value", _propTypes["default"].string), _defineProperty(_DropDownSearch_propT, "customClass", _propTypes["default"].shape({
   searchClass: _propTypes["default"].string,
   customTextBox: _propTypes["default"].string
-})), _DropDownSearch_propT);
+})), _defineProperty(_DropDownSearch_propT, "dataId", _propTypes["default"].string), _DropDownSearch_propT);
 exports.DropDownSearch_propTypes = DropDownSearch_propTypes;
 var DropDownSeparator_propTypes = {
   customClass: _propTypes["default"].string

package/lib/v1/ListItem/ListItemWithCheckBox.js

@@ -96,7 +96,8 @@ var ListItemWithCheckBox = function ListItemWithCheckBox(props) {
     title: null,
     customProps: ListItemProps
   }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _ListItemModule["default"].iconBox
+    className: _ListItemModule["default"].iconBox,
+    dataId: "".concat(dataId ? dataId : value, "_checkBox")
   }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
     checked: checked,
     a11y: {

package/lib/v1/ListItem/ListItemWithRadio.js

@@ -96,7 +96,8 @@ var ListItemWithRadio = function ListItemWithRadio(props) {
     title: null,
     customProps: ListItemProps
   }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _ListItemModule["default"].iconBox
+    className: _ListItemModule["default"].iconBox,
+    dataId: "".concat(dataId, "_radio")
   }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
     checked: checked,
     id: id,

package/lib/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1014,7 +1014,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
-        isGroupSelect: true
+        isGroupSelect: true,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1085,7 +1086,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             role: 'listbox',
             ariaMultiselectable: true
           },
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1128,7 +1130,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             listItemSize: listItemSize,
             a11y: {
               role: 'option'
-            }
+            },
+            dataId: "".concat(dataId, "_Options")
           }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,

package/lib/v1/MultiSelect/AdvancedMultiSelect.js

@@ -494,7 +494,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         isReadOnly: isReadOnly,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
-        onSelect: this.handleClickSelectedOption
+        onSelect: this.handleClickSelectedOption,
+        dataId: "".concat(dataIdMultiSelectComp, "_selectedOptions")
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
@@ -503,7 +504,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
         adjust: true,
-        shrink: true
+        shrink: true,
+        dataId: "".concat(dataIdMultiSelectComp, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: " ".concat(_MultiSelectModule["default"].custmSpan, " ").concat(textBoxSize === 'xmedium' ? _MultiSelectModule["default"].custmSpanXmedium : _MultiSelectModule["default"].custmSpanMedium, " ").concat(isShowClearIcon ? _MultiSelectModule["default"].clearIconSpace : '', "\n              ")
       }, searchStr), /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -566,7 +568,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'listbox',
             ariaMultiselectable: true
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
@@ -598,7 +601,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: "".concat(dataIdMultiSelectComp, "_Options")
         }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/v1/MultiSelect/MultiSelect.js

@@ -981,7 +981,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,
         size: size,
-        palette: palette
+        palette: palette,
+        dataId: "".concat(dataId, "_selectedOptions")
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         className: _MultiSelectModule["default"].wrapper,
@@ -1117,7 +1118,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         size: boxSize,
         alignBox: "row",
-        isResponsivePadding: getFooter ? false : true
+        isResponsivePadding: getFooter ? false : true,
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -186,7 +186,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           role: 'listbox'
         },
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: "".concat(dataId, "_dropbox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/lib/v1/MultiSelect/SelectedOptions.js

@@ -66,7 +66,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           onRemove = _this$props.onRemove,
           onSelect = _this$props.onSelect,
           size = _this$props.size,
-          palette = _this$props.palette;
+          palette = _this$props.palette,
+          dataId = _this$props.dataId;
       var isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, selectedOptions.map(function (option) {
         var id = option.id,
@@ -91,7 +92,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "photoTag")
+            key: "".concat(id, "photoTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             hasAvatar: true,
@@ -100,7 +102,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-            key: "".concat(id, "iconTag")
+            key: "".concat(id, "iconTag"),
+            dataId: dataId
           }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
             active: highLightedSelectOptions.indexOf(id) >= 0,
             iconName: icon,
@@ -110,7 +113,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
 
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_SelectedOptionsModule["default"].tag, " ").concat(_SelectedOptionsModule["default"][size]),
-          key: "".concat(id, "tag")
+          key: "".concat(id, "tag"),
+          dataId: dataId
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, commonProps, {
           active: highLightedSelectOptions.indexOf(id) >= 0
         })));

package/lib/v1/MultiSelect/props/defaultProps.js

@@ -163,7 +163,8 @@ var MultiSelectWithAvatar_defaultProps = {
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {

package/lib/v1/MultiSelect/props/propTypes.js

@@ -160,7 +160,8 @@ var SelectedOptions_propTypes = {
     optionType: _propTypes["default"].string
   })),
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
-  palette: _propTypes["default"].string
+  palette: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {

package/lib/v1/Select/SelectWithAvatar.js

@@ -258,7 +258,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         size: tagSize
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _MultiSelectModule["default"].textBox
+        className: _MultiSelectModule["default"].textBox,
+        dataId: "".concat(dataId, "_textBox")
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           ariaActivedescendant: selectedId,
@@ -304,7 +305,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needResponsive: needResponsive,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row"
+          alignBox: "row",
+          dataId: "".concat(dataId, "_dropbox")
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
@@ -342,6 +344,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             role: 'heading'
           }
         })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,

package/lib/v1/Select/SelectWithIcon.js

@@ -442,7 +442,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize,
-        iconClass: iconClass
+        iconClass: iconClass,
+        dataId: "".concat(dataId, "_icon")
       })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -533,7 +534,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
           shrink: true,
-          eleRef: _this5.scrollContentRef
+          eleRef: _this5.scrollContentRef,
+          dataId: "".concat(dataId, "_Options")
         }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
           var iconName = options.iconName,
               iconSize = options.iconSize,

package/lib/v1/Tab/Tabs.js

@@ -510,13 +510,15 @@ var Tabs = function Tabs(props) {
       }, DropBoxProps, {
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: togglePopupLocal
+        onClose: togglePopupLocal,
+        dataId: "".concat(dataId, "_dropbox")
       }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: "".concat(tabletMode ? '' : _v1TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-        onScroll: onScrollLocal
+        onScroll: onScrollLocal,
+        dataId: "".concat(dataId, "_Tabs")
       }, _react["default"].Children.map(moreTabs, function (child) {
         if (!child) {
           return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -67,10 +67,10 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.2.1",
+    "@zohodesk/a11y": "2.2.3",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/icons": "1.0.43",
+    "@zohodesk/icons": "1.0.50",
     "@zohodesk/svg": "1.1.14",
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
@@ -85,7 +85,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.43",
+    "@zohodesk/icons": "1.0.50",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.14",
     "@zohodesk/virtualizer": "1.0.3",
@@ -93,6 +93,6 @@
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.4",
     "@zohodesk/utils": "1.3.13",
-    "@zohodesk/a11y": "2.2.1"
+    "@zohodesk/a11y": "2.2.3"
   }
 }