@zohodesk/components 1.0.0-temp-196.1 → 1.0.0-temp-200

package/lib/Tag/props/defaultProps.js

@@ -13,7 +13,6 @@ var defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

package/lib/Tag/props/propTypes.js

@@ -36,7 +36,6 @@ var propTypes = {
     customTagIcon: _propTypes["default"].string,
     customAvatar: _propTypes["default"].string
   }),
-  customAttributes: _propTypes["default"].object,
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
   }),

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/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,
@@ -66,7 +67,8 @@ function DropDownSearch(props) {
     size: textBoxSize,
     value: value,
     placeHolder: placeHolder,
-    customClass: customTextBox
+    customClass: customTextBox,
+    dataId: dataId
   }));
 }
 

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

@@ -105,7 +105,8 @@ var ListItemWithCheckBox = function ListItemWithCheckBox(props) {
     customClass: {
       customCheckBox: customCheckBox,
       customLabel: customLabel
-    }
+    },
+    dataId: "".concat(dataId, "_checkBox")
   })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     shrink: true,

package/lib/v1/ListItem/ListItemWithRadio.js

@@ -106,7 +106,8 @@ var ListItemWithRadio = function ListItemWithRadio(props) {
     customClass: {
       customRadio: customRadio,
       customRadioWrap: customRadioWrap
-    }
+    },
+    dataId: "".concat(dataId, "_radio")
   })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     shrink: true,

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(dataId, "_selectedOptions")
       }), moreCount > 0 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].more,
         onClick: this.handleMoreClick,
@@ -519,6 +520,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         size: textBoxSize,
         value: searchStr,
         variant: variant,
+        dataId: "".concat(dataId, "_textBox"),
         isReadOnly: isReadOnly,
         tabindex: isDisabled && '-1',
         customClass: {
@@ -566,7 +568,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y: {
             role: 'listbox',
             ariaMultiselectable: true
-          }
+          },
+          dataId: "".concat(dataId, "_dropbox")
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
@@ -598,7 +601,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: "".concat(dataId, "_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,
@@ -85,7 +86,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
           getRef: getRef,
           initial: value,
           id: id,
-          isReadOnly: isReadOnly
+          isReadOnly: isReadOnly,
+          dataId: dataId
         };
 
         if (optionType === 'avatar') {

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

@@ -287,7 +287,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         isClickable: isReadOnly || isDisabled ? false : true,
         borderColor: borderColor,
         htmlId: htmlId,
-        autoComplete: false
+        autoComplete: false,
+        dataId: "".concat(dataId, "_textBox")
       }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
@@ -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/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/lib/v1/Tag/Tag.js

@@ -31,8 +31,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
-
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
@@ -65,7 +63,6 @@ function Tag(props) {
       tooltip = props.tooltip,
       avatarPalette = props.avatarPalette,
       customClass = props.customClass,
-      customAttributes = props.customAttributes,
       a11y = props.a11y,
       needEffect = props.needEffect,
       isReadOnly = props.isReadOnly,
@@ -104,7 +101,7 @@ function Tag(props) {
   var _a11y$clearLabel = a11y.clearLabel,
       clearLabel = _a11y$clearLabel === void 0 ? 'Delete' : _a11y$clearLabel;
   var isDarkPalette = palette === 'dark';
-  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
     "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
     "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
@@ -114,7 +111,7 @@ function Tag(props) {
     tabIndex: disabled ? '-1' : '0',
     "aria-labelledby": getAriaId,
     "data-selector-id": dataSelectorId
-  }, customAttributes), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _TagModule["default"].avatar
   }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
     palette: isDarkPalette ? 'info' : avatarPalette,

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

@@ -13,7 +13,6 @@ var defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

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

@@ -36,7 +36,6 @@ var propTypes = {
     customTagIcon: _propTypes["default"].string,
     customAvatar: _propTypes["default"].string
   }),
-  customAttributes: _propTypes["default"].object,
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
   }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-196.1",
+  "version": "1.0.0-temp-200",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -67,7 +67,7 @@
     "@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.45",
@@ -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"
   }
 }