@zohodesk/components 1.4.21 → 1.4.22

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

@@ -0,0 +1,422 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorSingleSelect Should render the default selected value 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="3"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="3"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              aria-labelledby="5"
+              class="container effect    medium lgRadius default   "
+              data-id="tag_Tag"
+              data-selector-id="tag"
+              data-test-id="tag_Tag"
+              data-title="Red"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
+              tabindex="0"
+            >
+              <div
+                aria-hidden="true"
+                class="text mediumtext"
+                id="5"
+              >
+                Red
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect Should render the selected value 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="6"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="6"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              aria-labelledby="8"
+              class="container effect    medium lgRadius default   "
+              data-id="tag_Tag"
+              data-selector-id="tag"
+              data-test-id="tag_Tag"
+              tabindex="0"
+            >
+              <div
+                aria-hidden="true"
+                class="text mediumtext"
+                id="8"
+              />
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="1"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="1"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="dotted size14 placeholder"
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="9"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="9"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="dotted size14 placeholder"
+            >
+              placeholder Text
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="11"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="11"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              aria-labelledby="13"
+              class="container effect    medium lgRadius default   "
+              data-id="tag_Tag"
+              data-selector-id="tag"
+              data-test-id="tag_Tag"
+              data-title="Red"
+              style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
+              tabindex="0"
+            >
+              <div
+                aria-hidden="true"
+                class="text mediumtext"
+                id="13"
+              >
+                Red
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=" arrowContainer "
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        aria-controls="14"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-owns="14"
+        aria-readonly="false"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="flex cover rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <span>
+              custom selected value
+            </span>
+          </div>
+          <div
+            aria-hidden="true"
+            class="arrowIcon      inflex coldir both"
+            data-id="undefined_downIcon"
+            data-selector-id="container"
+            data-test-id="undefined_downIcon"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-down    "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size7);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _Common = require("../../../utils/Common");
+
+var _ColorIndicatorModule = _interopRequireDefault(require("./ColorIndicator.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function ColorIndicator(props) {
+  var colorConfig = props.colorConfig,
+      shape = props.shape,
+      customClass = props.customClass,
+      customId = props.customId,
+      testId = props.testId,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes;
+
+  var _ref = colorConfig || _Common.DUMMY_OBJECT,
+      background = _ref.background;
+
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({}, tagAttributes, a11yAttributes, {
+    className: "".concat(_ColorIndicatorModule["default"].varClass, " ").concat(_ColorIndicatorModule["default"].indicator, " ").concat(_ColorIndicatorModule["default"][shape], " ").concat(customClass),
+    style: {
+      backgroundColor: background
+    },
+    "data-id": customId,
+    "data-test-id": testId
+  }));
+}
+
+ColorIndicator.propTypes = _propTypes.propTypes;
+ColorIndicator.defaultProps = _defaultProps.defaultProps;
+var _default = ColorIndicator;
+exports["default"] = _default;

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -0,0 +1,19 @@
+.varClass {
+    --local-colorIndicator-height: var(--zd_size10);
+    --local-colorIndicator-width: var(--zd_size10);
+    --local-colorIndicator-border-radius: 10px;
+}
+
+.circle {
+    --local-colorIndicator-border-radius: 10px;
+}
+
+.square {
+    --local-colorIndicator-border-radius: 2px;
+}
+
+.indicator {
+    height: var(--local-colorIndicator-height);
+    width: var(--local-colorIndicator-width);
+    border-radius: var(--local-colorIndicator-border-radius);
+}

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColorIndicator = _interopRequireDefault(require("../ColorIndicator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('ColorIndicator', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with custom id and test id', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      customId: "custom-id",
+      testId: "test-id"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // const colors = ['#ff0000', '#00ff00', '#0000ff'];
+
+  var colorConfigurations = [{
+    background: '#ff0000',
+    text: '#000000',
+    border: '#ffffff'
+  }, {
+    background: '#00ff00',
+    text: '#000000',
+    border: '#ffffff'
+  }, {
+    background: '#0000ff',
+    text: '#ffffff',
+    border: '#000000'
+  }];
+  test.each(colorConfigurations)('rendering the color of- %s', function (color) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      colorConfig: color
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var shapes = ['circle', 'square'];
+  test.each(shapes)('rendering the shape of- %s', function (shape) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      shape: shape
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with custom class', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      customClass: "color-indicator-test-class"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with a11yAttributes', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      a11yAttributes: {
+        'aria-label': "color_indicator_aria-label"
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with tagAttributes', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      tagAttributes: {
+        title: "color_indicator_tagAttributes"
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator rendering the color of- { background: '#0000ff', text: '#ffffff', border: '#000000' } 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 0, 255);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the color of- { background: '#00ff00', text: '#000000', border: '#ffffff' } 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 255, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the color of- { background: '#ff0000', text: '#000000', border: '#ffffff' } 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(255, 0, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the shape of- circle 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering the shape of- square 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator square "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with a11yAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="color_indicator_aria-label"
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with custom class 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle color-indicator-test-class"
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with custom id and test id 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id="custom-id"
+    data-test-id="test-id"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with tagAttributes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    title="color_indicator_tagAttributes"
+  />
+</DocumentFragment>
+`;

package/lib/ColorSelect/_shared/ColorIndicator/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  shape: 'circle',
+  customId: '',
+  testId: '',
+  customClass: '',
+  tagAttributes: {},
+  a11yAttributes: {}
+};
+exports.defaultProps = defaultProps;