@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/lib/ColorSelect/__tests__/ColorMultiSelect.spec.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _ColorMultiSelect = _interopRequireDefault(require("../ColorMultiSelect"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var options = [{
-  id: 1,
-  text: 'Red',
-  colorCode: '#ff6e6e'
-}, {
-  id: 2,
-  text: 'Green',
-  colorCode: '#77d779'
-}, {
-  id: 3,
-  text: 'Blue',
-  colorCode: '#649cff'
-}];
-describe('ColorMultiSelect', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], null)),
-        asFragment = _render.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the default selected value', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
-      options: options
-    })),
-        asFragment = _render2.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the selected value', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
-      options: options,
-      selectedOptions: [1, 2]
-    })),
-        asFragment = _render3.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomColorIndicator', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
-      options: options,
-      renderCustomColorIndicator: function renderCustomColorIndicator() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, " custom color indicator");
-      }
-    })),
-        asFragment = _render4.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomSelectedValue', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
-      options: options,
-      renderCustomSelectedValue: function renderCustomSelectedValue() {
-        return /*#__PURE__*/_react["default"].createElement("span", null, "custom selected value");
-      }
-    })),
-        asFragment = _render5.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/lib/ColorSelect/__tests__/ColorSingleSelect.spec.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _ColorSingleSelect = _interopRequireDefault(require("../ColorSingleSelect"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var options = [{
-  id: 1,
-  text: 'Red',
-  colorCode: '#ff6e6e'
-}, {
-  id: 2,
-  text: 'Green',
-  colorCode: '#77d779'
-}, {
-  id: 3,
-  text: 'Blue',
-  colorCode: '#649cff'
-}];
-describe('ColorSingleSelect', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], null)),
-        asFragment = _render.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the default selected value', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
-      options: options
-    })),
-        asFragment = _render2.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render the selected value', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
-      options: options,
-      selectedValue: "green"
-    })),
-        asFragment = _render3.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomColorIndicator', function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
-      options: options,
-      renderCustomColorIndicator: function renderCustomColorIndicator() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, " custom color indicator");
-      }
-    })),
-        asFragment = _render4.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('renders with renderCustomSelectedValue', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
-      options: options,
-      renderCustomSelectedValue: function renderCustomSelectedValue() {
-        return /*#__PURE__*/_react["default"].createElement("span", null, "custom selected value");
-      }
-    })),
-        asFragment = _render5.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -1,547 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorMultiSelect Should render the default selected value 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="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
-          data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
-        >
-          <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="rightPlaceholder inflex rowdir vCenter"
-                  data-id="containerComponent"
-                  data-selector-id="container"
-                  data-test-id="containerComponent"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ColorMultiSelect Should render the selected value 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="tag medium shrinkOff"
-        data-id="multiSelect_selectedOptions"
-        data-selector-id="box"
-        data-test-id="multiSelect_selectedOptions"
-      >
-        <div
-          aria-labelledby="7"
-          class="container effect    medium lgRadius danger  pointer "
-          data-id="tag_Tag"
-          data-selector-id="tag"
-          data-test-id="tag_Tag"
-          data-title="Red"
-          style="--tag_bg_color: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
-          tabindex="0"
-        >
-          <div
-            aria-hidden="true"
-            class="text mediumtext"
-            id="7"
-          >
-            Red
-          </div>
-          <button
-            aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
-            data-id="tag_RemoveTag"
-            data-test-id="tag_RemoveTag"
-            type="button"
-            value="text"
-          >
-            <div
-              class="flex cover coldir both"
-              data-id="containerComponent"
-              data-selector-id="container"
-              data-test-id="containerComponent"
-            >
-              <i
-                aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
-                data-id="fontIcon"
-                data-selector-id="fontIcon"
-                data-test-id="fontIcon"
-                style="--zd-iconfont-size: var(--zd_font_size8);"
-              />
-            </div>
-          </button>
-        </div>
-      </div>
-      <div
-        class="tag medium shrinkOff"
-        data-id="multiSelect_selectedOptions"
-        data-selector-id="box"
-        data-test-id="multiSelect_selectedOptions"
-      >
-        <div
-          aria-labelledby="8"
-          class="container effect    medium lgRadius danger  pointer "
-          data-id="tag_Tag"
-          data-selector-id="tag"
-          data-test-id="tag_Tag"
-          data-title="Green"
-          style="--tag_bg_color: rgba(119, 215, 121, 0.2); --tag_text_color: #77d779; --tag_border_color: #77d779;"
-          tabindex="0"
-        >
-          <div
-            aria-hidden="true"
-            class="text mediumtext"
-            id="8"
-          >
-            Green
-          </div>
-          <button
-            aria-label="Delete"
-            class="buttonReset close 
-            lgRadiusClose 
-             closedanger"
-            data-id="tag_RemoveTag"
-            data-test-id="tag_RemoveTag"
-            type="button"
-            value="text"
-          >
-            <div
-              class="flex cover coldir both"
-              data-id="containerComponent"
-              data-selector-id="container"
-              data-test-id="containerComponent"
-            >
-              <i
-                aria-hidden="true"
-                class="zd_font_icons basic icon-close2 fbold   "
-                data-id="fontIcon"
-                data-selector-id="fontIcon"
-                data-test-id="fontIcon"
-                style="--zd-iconfont-size: var(--zd_font_size8);"
-              />
-            </div>
-          </button>
-        </div>
-      </div>
-      <div
-        class="wrapper grow basisAuto shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span
-          class=" custmSpan custmSpanMedium clearIconSpace
-          "
-        />
-        <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
-          data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
-        >
-          <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"
-              placeholder=""
-              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="rightPlaceholder inflex rowdir vCenter"
-                  data-id="containerComponent"
-                  data-selector-id="container"
-                  data-test-id="containerComponent"
-                >
-                  <button
-                    aria-label="Clear all"
-                    class="delete defaultDelete shrinkOff"
-                    data-id="multiSelect_clearIcon"
-                    data-selector-id="box"
-                    data-test-id="multiSelect_clearIcon"
-                    data-title="Clear all"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="zd_font_icons basic icon-delete    rtl "
-                      data-id="fontIcon"
-                      data-selector-id="fontIcon"
-                      data-test-id="fontIcon"
-                      style="--zd-iconfont-size: var(--zd_font_size15);"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ColorMultiSelect 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="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
-          data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
-        >
-          <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="rightPlaceholder inflex rowdir vCenter"
-                  data-id="containerComponent"
-                  data-selector-id="container"
-                  data-test-id="containerComponent"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ColorMultiSelect renders with renderCustomColorIndicator 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="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
-          data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
-        >
-          <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="rightPlaceholder inflex rowdir vCenter"
-                  data-id="containerComponent"
-                  data-selector-id="container"
-                  data-test-id="containerComponent"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ColorMultiSelect renders with renderCustomSelectedValue 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="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
-          data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
-        >
-          <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="rightPlaceholder inflex rowdir vCenter"
-                  data-id="containerComponent"
-                  data-selector-id="container"
-                  data-test-id="containerComponent"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;