@zohodesk/components 1.2.34 → 1.2.36

package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyState rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" default"
+    data-id="empty_noOptnsMsg"
+    data-test-id="empty_noOptnsMsg"
+    role="alert"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper     effect"
+    data-id="multiSelect"
+    data-selector-id="multiSelect"
+    data-test-id="multiSelect"
+  >
+    <div
+      class="container medium borderColor_default   hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+          "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelect_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelect_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="flex cover rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelectHeader rendering the basic value 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder selectAll flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="MultiSelectHeader_selectAll"
+    data-selector-id="listItemWithIcon"
+    data-test-id="MultiSelectHeader_selectAll"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="iconBox shrinkOff"
+      data-id="MultiSelectHeader_selectAll_Icon"
+      data-selector-id="box"
+      data-test-id="MultiSelectHeader_selectAll_Icon"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-androidd    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size15);"
+      />
+    </div>
+    <div
+      class="value grow basis shrinkOn"
+      data-id="MultiSelectHeader_selectAll_Text"
+      data-selector-id="box"
+      data-test-id="MultiSelectHeader_selectAll_Text"
+    >
+      List
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`MultiSelectHeader rendering the defult props 1`] = `<DocumentFragment />`;

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" wrapper     effect"
+    data-id="multiSelectWithAvatar"
+    data-selector-id="multiSelectWithAvatar"
+    data-test-id="multiSelectWithAvatar"
+  >
+    <div
+      class="container medium borderColor_default  undefined hasBorder flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+          "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-required="true"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="multiSelectWithAvatar_textBox"
+              data-selector-id="textBoxIcon"
+              data-test-id="multiSelectWithAvatar_textBox"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="icon  shrinkOff"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                <div
+                  class="flex cover rowdir vCenter"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectedOptions rendering the basic select options 1`] = `
+<DocumentFragment>
+  <div
+    class="tag medium shrinkOff"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect    medium lgRadius danger   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="SelectedObject1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        SelectedObject1
+      </div>
+    </div>
+  </div>
+  <div
+    class="tag medium shrinkOff"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect    medium lgRadius danger   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="SelectedObject2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        SelectedObject2
+      </div>
+    </div>
+  </div>
+  <div
+    class="tag medium shrinkOff"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect    medium lgRadius danger   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="SelectedObject3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        SelectedObject3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions rendering the defult props 1`] = `<DocumentFragment />`;

package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Suggestions rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    />
+  </div>
+</DocumentFragment>
+`;

package/lib/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/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/PopOver/__tests__/PopOver.spec.js

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

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

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

package/lib/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js

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

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResponsiveDropBox rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="main hidden container bottomStart default"
+    data-a11y-focus-main-area="true"
+    data-id="dropBox"
+    data-position="bottomStart"
+    data-selector-id="dropBox"
+    data-test-id="dropBox"
+  >
+    <div
+      class="subContainer bottom_shadow radius defaultPalette"
+      data-id="dropBox_subcontainer"
+      data-selector-id="dropBox_subcontainer"
+      data-test-id="dropBox_subcontainer"
+      tabindex="-1"
+    >
+      <div
+        class="end"
+        data-id="dropBox_arrow"
+        data-selector-id="dropBox_arrow"
+        data-test-id="dropBox_arrow"
+      >
+        <div
+          class="arrowShape"
+        />
+      </div>
+      <div
+        class="flex coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/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/Select/SelectWithIcon.js

@@ -440,7 +440,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"], {
@@ -531,7 +532,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/Select/__tests__/GroupSelect.spec.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _GroupSelect = _interopRequireDefault(require("../GroupSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('GroupSelect', function () {
+  test('rendering the defult props', function () {
+    var mockOnChange = jest.fn();
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_GroupSelect["default"], {
+      selectedOption: {
+        selectedOption: []
+      },
+      selected: "Groupselecet",
+      emptyMessage: "GroupEmptyMsg",
+      onChange: mockOnChange
+    })),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Select/__tests__/Select.spec.js

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

package/lib/Select/__tests__/SelectWithAvatar.spec.js

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

package/lib/Select/__tests__/SelectWithIcon.spec.js

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

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GroupSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-id="selectComponent"
+    data-selector-id="groupSelect"
+    data-test-id="selectComponent"
+  >
+    <div
+      class=""
+      data-id="GroupSelect"
+      data-test-id="GroupSelect"
+    >
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            aria-controls="1"
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-owns="1"
+            aria-readonly="true"
+            autocomplete="off"
+            class="  container medium  default  effect  borderColor_default  "
+            data-id="GroupSelect_textBox"
+            data-selector-id="textBoxIcon"
+            data-test-id="GroupSelect_textBox"
+            maxlength="250"
+            placeholder=""
+            readonly=""
+            role="combobox"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="icon  shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="flex cover coldir both"
+                data-id="downIcon"
+                data-selector-id="container"
+                data-test-id="downIcon"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons basic icon-down  arrowIcon  "
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size7);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;