@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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

@@ -0,0 +1,178 @@
+// 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=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="6"
+          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: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="6"
+          >
+            Red
+          </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=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="9"
+          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="9"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="3"
+          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="3"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <div
+          aria-labelledby="12"
+          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: rgba(255, 110, 110, 0.2); --tag_text_color: #ff6e6e; --tag_border_color: #ff6e6e;"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="12"
+          >
+            Red
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
+<DocumentFragment>
+  <div
+    class="container box_medium   "
+    data-selector-id="select"
+  >
+    <div
+      class=""
+      data-id="selectComponent"
+      data-test-id="selectComponent"
+    >
+      <div
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+        data-selector-id="container"
+        data-title=""
+      >
+        <span>
+          custom selected value
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/ColorSelect/common/ColorIndicator/ColorIndicator.js

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

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

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

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

@@ -0,0 +1,67 @@
+"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();
+  });
+  test('rendering with custom attributes', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with different color codes', function () {
+    var colors = ['#ff0000', '#00ff00', '#0000ff'];
+    colors.forEach(function (color) {
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+        colorCode: color
+      })),
+          asFragment = _render4.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('rendering with different shapes', function () {
+    var shapes = ['circle', 'square'];
+    shapes.forEach(function (shape) {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+        shape: shape
+      })),
+          asFragment = _render5.asFragment;
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+  test('rendering with custom class', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorIndicator["default"], {
+      customClass: "color-indicator-test-class"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with custom attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-custom-attribute="true"
+    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 different color codes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(255, 0, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different color codes 2`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 255, 0);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different color codes 3`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+    style="background-color: rgb(0, 0, 255);"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different shapes 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator circle "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorIndicator rendering with different shapes 2`] = `
+<DocumentFragment>
+  <div
+    class="varClass indicator square "
+    data-id=""
+    data-test-id=""
+  />
+</DocumentFragment>
+`;

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

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

package/lib/ColorSelect/common/ColorIndicator/props/propTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  colorCode: _propTypes["default"].string,
+  shape: _propTypes["default"].oneOf(['circle', 'square']),
+  customClass: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  customAttributes: _propTypes["default"].object
+};
+exports.propTypes = propTypes;

package/lib/ColorSelect/common/ColoredTag/ColoredTag.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("./props/propTypes");
+
+var _Tag = _interopRequireDefault(require("../../../Tag/Tag"));
+
+var _Common = require("../../../utils/Common.js");
+
+var _excluded = ["colorConfig", "customAttributes", "isActive"];
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ColoredTag(props) {
+  var colorConfig = props.colorConfig,
+      customAttributes = props.customAttributes,
+      isActive = props.isActive,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _ref = colorConfig || _Common.DUMMY_OBJECT,
+      textColor = _ref.textColor,
+      backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor;
+
+  var style = {
+    '--tag_bg_color': backgroundColor,
+    '--tag_text_color': textColor,
+    '--tag_border_color': borderColor
+  };
+
+  var composedAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
+    style: style
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(_Tag["default"], _extends({}, rest, {
+    active: isActive,
+    customAttributes: composedAttributes
+  }));
+}
+
+ColoredTag.propTypes = _propTypes.propTypes;
+var _default = ColoredTag;
+exports["default"] = _default;

package/lib/ColorSelect/common/ColoredTag/__tests__/ColoredTag.spec.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColoredTag = _interopRequireDefault(require("../ColoredTag"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('ColoredTag', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with isActive true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      isActive: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with colorConfig', function () {
+    var colorConfig = {
+      backgroundColor: 'lightsteelblue',
+      textColor: 'dodgerblue',
+      borderColor: 'dodgerblue'
+    };
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      colorConfig: colorConfig
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customAttributes', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with text', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColoredTag["default"], {
+      text: 'Colored Tag'
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/ColorSelect/common/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredTag rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="1"
+    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="1"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with colorConfig 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="3"
+    class="container effect    medium lgRadius default   "
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    style="--tag_bg_color: lightsteelblue; --tag_text_color: dodgerblue; --tag_border_color: dodgerblue;"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="3"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with customAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="4"
+    class="container effect    medium lgRadius default   "
+    data-custom-attribute="true"
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="4"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with isActive true 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="2"
+    class="container effect selected activedefault   medium lgRadius default   "
+    data-id="tag_TagSelected"
+    data-selector-id="tag"
+    data-test-id="tag_TagSelected"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="2"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColoredTag rendering with text 1`] = `
+<DocumentFragment>
+  <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="Colored Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="5"
+    >
+      Colored Tag
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/ColorSelect/common/ColoredTag/props/propTypes.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../../../Tag/props/propTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
+  colorConfig: _propTypes["default"].shape({
+    textColor: _propTypes["default"].string,
+    backgroundColor: _propTypes["default"].string,
+    borderColor: _propTypes["default"].string
+  })
+});
+
+exports.propTypes = propTypes;