@zohodesk/components 1.4.21 → 1.4.22

package/lib/shared/InputFieldLine/__tests__/InputFieldLine.spec.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _InputFieldLine = _interopRequireDefault(require("../InputFieldLine"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('InputFieldLine', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with title', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      title: "InputFieldLine Test Title"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isActive is true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      isActive: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasPadding is true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      hasPadding: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render hasEffect is false', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      hasEffect: false
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var size = ['medium', 'xmedium'];
+  test.each(size)('Should render size  - %s', function (size) {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      hasPadding: true,
+      size: size
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var border = ['bottom', 'all', 'none'];
+  test.each(border)('Should render border - %s', function (border) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      border: border
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  var borderColor = ['default', 'dark', 'error', 'transparent'];
+  test.each(borderColor)('Should render borderColor - %s', function (borderColor) {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      borderColor: borderColor
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customProps', function () {
+    var customProps = {
+      'data-test': 'inputFieldLine-test'
+    };
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      customProps: customProps
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render customClass', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      customClass: "inputFieldLine-custom-class"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render dataId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
+      dataId: "inputFieldLine-test-id"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputFieldLine Should be render hasEffect is false 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render hasPadding is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should be render with title 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title="InputFieldLine Test Title"
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - all 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_all effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - bottom 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render border - none 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer   effect     flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - dark 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_dark hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - default 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - error 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render borderColor - transparent 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder   inputFieldLine-custom-class flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render customProps 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-test="inputFieldLine-test"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-id="inputFieldLine-test-id"
+    data-selector-id="container"
+    data-test-id="inputFieldLine-test-id"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - medium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine Should render size  - xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer xmedium border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;
+
+exports[`InputFieldLine rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    flex rowdir"
+    data-selector-id="container"
+    data-title=""
+  />
+</DocumentFragment>
+`;

package/lib/shared/InputFieldLine/props/defaultProps.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  isDisabled: false,
+  isReadOnly: false,
+  hasEffect: true,
+  isActive: false,
+  hasPadding: false,
+  title: '',
+  dataId: '',
+  customClass: '',
+  customProps: {},
+  size: 'medium',
+  borderColor: 'default',
+  border: 'bottom',
+  a11yAttributes: {},
+  tagAttribute: {}
+};
+exports["default"] = _default;

package/lib/shared/InputFieldLine/props/propTypes.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../../Layout/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 _default = {
+  isActive: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  hasEffect: _propTypes["default"].bool,
+  hasPadding: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape(_objectSpread({}, _propTypes2.ContainerProps)),
+  onClick: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
+  border: _propTypes["default"].oneOf(['bottom', 'all', 'none']),
+  borderColor: _propTypes["default"].oneOf(['default', 'dark', 'error', 'transparent']),
+  children: _propTypes["default"].node,
+  onKeyDown: _propTypes["default"].func,
+  a11yAttributes: _propTypes["default"].object,
+  tagAttributes: _propTypes["default"].object
+};
+exports["default"] = _default;

package/lib/utils/Common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DUMMY_OBJECT = exports.DUMMY_ARRAY = void 0;
+exports.DUMMY_OBJECT = exports.DUMMY_FUNCTION = exports.DUMMY_ARRAY = void 0;
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
 exports.cancelBubblingEffect = cancelBubblingEffect;
@@ -515,7 +515,11 @@ function isTextSelected() {
   return false;
 }
 
-var DUMMY_OBJECT = {};
+var DUMMY_OBJECT = Object.freeze({});
 exports.DUMMY_OBJECT = DUMMY_OBJECT;
-var DUMMY_ARRAY = [];
-exports.DUMMY_ARRAY = DUMMY_ARRAY;
+var DUMMY_ARRAY = Object.freeze([]);
+exports.DUMMY_ARRAY = DUMMY_ARRAY;
+
+var DUMMY_FUNCTION = function DUMMY_FUNCTION() {};
+
+exports.DUMMY_FUNCTION = DUMMY_FUNCTION;

package/lib/utils/dropDownUtils.js

@@ -9,6 +9,10 @@ var _reselect = require("reselect");
 
 var _Common = require("./Common");
 
+var _selectn = _interopRequireDefault(require("selectn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -291,7 +295,8 @@ var makeFormatOptions = function makeFormatOptions() {
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
         var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
-        var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
+        var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : '';
+        var colorConfig = (0, _selectn["default"])('colorConfig', option); // grouping options (group select/MultiSelect)
 
         id = !(0, _Common.getIsEmptyValue)(id) ? optionIdGrouping(id, prefixText) : '';
         var additionalSearchFieldData = searchFields.reduce(function (value, item) {
@@ -332,6 +337,10 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.listItemProps = listStyle || listItemProps;
           }
 
+          if (colorConfig) {
+            optionDetails.colorConfig = colorConfig;
+          }
+
           if (listStyleCustomProps || listItemCustomProps) {
             optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.21",
+  "version": "1.4.22",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -82,15 +82,16 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.1",
+    "@zohodesk/icons": "1.1.3",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.2.2",
+    "@zohodesk/svg": "1.2.3",
     "@zohodesk/utils": "1.3.15",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
-    "@zohodesk/react-cli": "1.1.27"
+    "@zohodesk/react-cli": "1.1.27",
+    "color": "4.2.3"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -99,9 +100,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.1",
+    "@zohodesk/icons": "1.1.3",
     "@zohodesk/variables": "1.1.0",
-    "@zohodesk/svg": "1.2.2",
+    "@zohodesk/svg": "1.2.3",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -109,6 +110,7 @@
     "@zohodesk/utils": "1.3.15",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.3"
+    "@zohodesk/dotkit": "1.0.3",
+    "color": "4.2.3"
   }
 }