linear-react-components-ui 0.4.75 → 0.4.76-beta.11

package/lib/gridlayout/gridLayout.spec.js

@@ -0,0 +1,169 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireWildcard(require("."));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+var gridLayout = function gridLayout(propsRow, propsCol) {
+  return /*#__PURE__*/_react["default"].createElement(_.GridRow, _extends({
+    customClass: "mock-gridRow",
+    style: {
+      backgroundColor: 'red'
+    }
+  }, propsRow), /*#__PURE__*/_react["default"].createElement(_["default"], _extends({
+    customClass: "mock-gridCol",
+    style: {
+      backgroundColor: 'blue'
+    }
+  }, propsCol), "Grid Layout"));
+};
+
+describe('GridLayout', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(gridLayout()),
+        container = _render.container;
+
+    expect(container.firstChild).toBeTruthy();
+  });
+  describe('GridRow', function () {
+    it('should apply custom class', function () {
+      var _render2 = (0, _react2.render)(gridLayout()),
+          container = _render2.container;
+
+      expect(container.querySelector('.row')).toHaveClass('mock-gridRow');
+    });
+    it('should apply style', function () {
+      var _render3 = (0, _react2.render)(gridLayout()),
+          container = _render3.container;
+
+      expect(container.querySelector('.row')).toHaveStyle('background-color: red;');
+    });
+    it('should apply with trim', function () {
+      var _render4 = (0, _react2.render)(gridLayout({
+        withTrim: true
+      })),
+          container = _render4.container;
+
+      expect(container.querySelector('.row')).toHaveClass('-withtrim');
+    });
+    it('should apply horizontal align start', function () {
+      var _render5 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'start'
+      })),
+          container = _render5.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-start');
+    });
+    it('should apply horizontal align end', function () {
+      var _render6 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'end'
+      })),
+          container = _render6.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-end');
+    });
+    it('should apply horizontal align center', function () {
+      var _render7 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'center'
+      })),
+          container = _render7.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-center');
+    });
+    it('should apply horizontal align around', function () {
+      var _render8 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'around'
+      })),
+          container = _render8.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-around');
+    });
+    it('should apply horizontal align between', function () {
+      var _render9 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'between'
+      })),
+          container = _render9.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-between');
+    });
+    it('should apply vertical align items-start', function () {
+      var _render10 = (0, _react2.render)(gridLayout({
+        verticalAlign: 'items-start'
+      })),
+          container = _render10.container;
+
+      expect(container.querySelector('.row')).toHaveClass('align-items-start');
+    });
+    it('should apply vertical align items-center', function () {
+      var _render11 = (0, _react2.render)(gridLayout({
+        verticalAlign: 'items-center'
+      })),
+          container = _render11.container;
+
+      expect(container.querySelector('.row')).toHaveClass('align-items-center');
+    });
+    it('should apply vertical align items-end', function () {
+      var _render12 = (0, _react2.render)(gridLayout({
+        verticalAlign: 'items-end'
+      })),
+          container = _render12.container;
+
+      expect(container.querySelector('.row')).toHaveClass('align-items-end');
+    });
+    it('should hide component when visible is false', function () {
+      var _render13 = (0, _react2.render)(gridLayout({
+        visible: false
+      })),
+          container = _render13.container;
+
+      expect(container.querySelector('.row')).not.toBeInTheDocument();
+    });
+  });
+  describe('GridCol', function () {
+    it('should apply custom class', function () {
+      var _render14 = (0, _react2.render)(gridLayout()),
+          container = _render14.container;
+
+      expect(container.querySelector('.grid-container')).toHaveClass('mock-gridCol');
+    });
+    it('should apply style', function () {
+      var _render15 = (0, _react2.render)(gridLayout()),
+          container = _render15.container;
+
+      expect(container.querySelector('.grid-container')).toHaveStyle('background-color: blue;');
+    });
+    it('should apply columns to grid', function () {
+      var _render16 = (0, _react2.render)(gridLayout({}, {
+        cols: '12 12 12 12'
+      })),
+          container = _render16.container;
+
+      expect(container.querySelector('.grid-container')).toHaveClass('col-xs-12');
+      expect(container.querySelector('.grid-container')).toHaveClass('col-sm-12');
+      expect(container.querySelector('.grid-container')).toHaveClass('col-md-12');
+      expect(container.querySelector('.grid-container')).toHaveClass('col-lg-12');
+    });
+    it('should hide component when visible is false', function () {
+      var _render17 = (0, _react2.render)(gridLayout({}, {
+        visible: false
+      })),
+          container = _render17.container;
+
+      expect(container.querySelector('.grid-container')).not.toBeInTheDocument();
+    });
+  });
+});

package/lib/icons/helper.js

@@ -538,6 +538,22 @@ function getIcons() {
     minusCircle: {
       viewbox: '0 0 16 16',
       paths: ['M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM4 7h8v2h-8z']
+    },
+    zoomIn: {
+      viewbox: '0 0 16 16',
+      paths: ['M6 3h-1v2h-2v1h2v2h1v-2h2v-1h-2zM9.962 8.716c0.653-0.905 1.038-2.015 1.038-3.216 0-3.038-2.462-5.5-5.5-5.5s-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5c1.201 0 2.312-0.385 3.216-1.038l5.284 6.038 2-2-6.038-5.284zM5.5 9.5c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z']
+    },
+    zoomOut: {
+      viewbox: '0 0 16 16',
+      paths: ['M3 5h5v1h-5zM9.962 8.716c0.653-0.905 1.038-2.015 1.038-3.216 0-3.038-2.462-5.5-5.5-5.5s-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5c1.201 0 2.312-0.385 3.216-1.038l5.284 6.038 2-2-6.038-5.284zM5.5 9.5c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z']
+    },
+    flipVertical3: {
+      viewbox: '0 0 16 16',
+      paths: ['M10.854 1.854c0.143-0.143 0.186-0.358 0.108-0.545s-0.26-0.309-0.462-0.309h-10c-0.202 0-0.385 0.122-0.462 0.309-0.026 0.062-0.038 0.127-0.038 0.191 0 0.13 0.051 0.258 0.146 0.354l5 5c0.195 0.195 0.512 0.195 0.707 0l5-5z', 'M9 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M6 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M3 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M0 8.5c0-0.276 0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1c-0.276 0-0.5-0.224-0.5-0.5z', 'M10.962 15.691c0.026-0.062 0.038-0.127 0.038-0.191 0-0.13-0.051-0.258-0.146-0.354l-5-5c-0.195-0.195-0.512-0.195-0.707 0l-5 5c-0.143 0.143-0.186 0.358-0.108 0.545s0.26 0.309 0.462 0.309h10c0.202 0 0.385-0.122 0.462-0.309zM2.009 14.875l3.491-3.491 3.491 3.491h-6.982z', 'M13 12.5c1.257-0.943 2-2.419 2-4 0-1.672-0.831-3.226-2.222-4.158-0.229-0.154-0.54-0.092-0.694 0.137s-0.092 0.54 0.137 0.694c1.113 0.745 1.778 1.989 1.778 3.327 0 1.313-0.64 2.534-1.716 3.284l-1.284-1.284v3.5h3.5l-1.5-1.5z']
+    },
+    flipVertical4: {
+      viewbox: '0 0 16 16',
+      paths: ['M0.854 5.146c-0.143-0.143-0.358-0.186-0.545-0.108s-0.309 0.26-0.309 0.462v10c0 0.202 0.122 0.385 0.309 0.462 0.062 0.026 0.127 0.038 0.191 0.038 0.13 0 0.258-0.051 0.354-0.146l5-5c0.195-0.195 0.195-0.512 0-0.707l-5-5z', 'M7.5 7c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 10c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 13c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M7.5 16c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z', 'M14.691 5.038c-0.062-0.026-0.127-0.038-0.191-0.038-0.13 0-0.258 0.051-0.354 0.146l-5 5c-0.195 0.195-0.195 0.512 0 0.707l5 5c0.143 0.143 0.358 0.186 0.545 0.108s0.309-0.26 0.309-0.462v-10c0-0.202-0.122-0.385-0.309-0.462zM13.875 13.991l-3.491-3.491 3.491-3.491v6.982z', 'M11.5 3c-0.943-1.257-2.419-2-4-2-1.672 0-3.226 0.831-4.158 2.222-0.154 0.229-0.092 0.54 0.137 0.694s0.54 0.092 0.694-0.137c0.745-1.113 1.989-1.778 3.327-1.778 1.313 0 2.534 0.64 3.284 1.716l-1.284 1.284h3.5v-3.5l-1.5 1.5z']
     }
   };
   return icons;

package/lib/icons/icons.spec.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+var IconMock = function IconMock(props) {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], _extends({
+    name: "user"
+  }, props));
+};
+
+var mockSvgStruct = {
+  viewbox: '0 0 18 18',
+  paths: ['M17.064,4.656l-2.05-2.035C14.936,2.544,14.831,2.5,14.721,2.5H3.854c-0.229,0-0.417,0.188-0.417,417v14.167c0,0.229,0.188,0.417,0.417,0.417h12.917c0.229,0,0.416-0.188,0.416-0.417V4.952C17.188,4.84,17.144,4.733,17.064,4.656M6.354,3.333h7.917V10H6.354V3.333z M16.354,16.667H4.271V3.333h1.25v7.083c0,0.229,0.188,0.417,0.417,0.417h8.75c0.229,0,0.416-0.188,0.416-0.417V3.886l1.25,1.239V16.667z M13.402,4.688v3.958c0,0.229-0.186,0.417-0.417,0.417c-0.229,0-0.417-0.188-0.417-0.417V4.688c0-0.229,0.188-0.417,0.417-0.417C13.217,4.271,13.402,4.458,13.402,4.688']
+};
+describe('Icons', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(IconMock, null)),
+        getByTestId = _render.getByTestId;
+
+    expect(getByTestId('icon')).toBeTruthy();
+  });
+  it('should change icon size', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(IconMock, {
+      size: 64
+    })),
+        getByTestId = _render2.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('width', '64px');
+    expect(getByTestId('icon')).toHaveAttribute('height', '64px');
+  });
+  it('should change icon color', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(IconMock, {
+      color: "red"
+    })),
+        getByTestId = _render3.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('fill', 'red');
+  });
+  it('should change pointer-events', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(IconMock, {
+      pointerEvents: "all"
+    })),
+        getByTestId = _render4.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('pointer-events', 'all');
+  });
+  it('should fire click on icon', function () {
+    var mockOnClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(IconMock, {
+      onClick: mockOnClick
+    })),
+        getByTestId = _render5.getByTestId;
+
+    _react2.fireEvent.click(getByTestId('icon'));
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+  it('should hide component when visible is false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(IconMock, {
+      visible: false
+    })),
+        container = _render6.container;
+
+    expect(container.firstChild).not.toBeInTheDocument();
+  });
+  it('should render icon when use svgStruct', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      svgStruct: mockSvgStruct
+    })),
+        getByTestId = _render7.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('viewBox', mockSvgStruct.viewbox);
+    expect(getByTestId('icon-path')).toHaveAttribute('d', mockSvgStruct.paths[0]);
+  });
+});

package/lib/icons/index.js

@@ -37,6 +37,7 @@ var Icon = function Icon(_ref) {
   if (!name && !svgStruct) throw new Error('One of the "name" and "svgStruct" props must be filled');
   if (!visible) return null;
   return /*#__PURE__*/_react["default"].createElement("svg", {
+    "data-testid": "icon",
     onClick: function onClick() {
       if (_onClick && !disabled) _onClick();
     },
@@ -49,6 +50,7 @@ var Icon = function Icon(_ref) {
     style: style
   }, getPaths().map(function (p) {
     return /*#__PURE__*/_react["default"].createElement("path", {
+      "data-testid": "icon-path",
       d: p,
       key: p
     });

package/lib/inputs/base/InputTextBase.js

@@ -11,12 +11,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 var _inputHOC = _interopRequireDefault(require("../inputHOC"));
 
 require("../../assets/styles/input.scss");
 
 var helpers = _interopRequireWildcard(require("./helpers"));
 
+var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
+
 var _permissionValidations = require("../../permissionValidations");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -73,7 +77,8 @@ var InputTextBase = function InputTextBase(props) {
       visible = props.visible,
       permissionAttr = props.permissionAttr,
       onDeniedActions = props.onDeniedActions,
-      handlerSetOnDenied = props.handlerSetOnDenied;
+      handlerSetOnDenied = props.handlerSetOnDenied,
+      targetRef = props.targetRef;
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
 
   var _useState = (0, _react.useState)(onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(permissionAttr, options)),
@@ -107,7 +112,17 @@ var InputTextBase = function InputTextBase(props) {
       name: name,
       id: id,
       className: helpers.getInputClass(props),
-      ref: inputRef
+      ref: function ref(r) {
+        if (inputRef) {
+          if (!_lodash["default"].isFunction(inputRef)) {
+            inputRef.current = r;
+          } else {
+            inputRef(r);
+          }
+        }
+
+        if (targetRef) targetRef(r);
+      }
     };
 
     if (!disableCallbacks) {
@@ -146,12 +161,14 @@ var InputTextBase = function InputTextBase(props) {
   }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
     className: "-requiredlabel"
   }, "*"))), /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "testInputWrapper",
     className: helpers.getInputWrapperClass(_extends({}, props, {
       disabled: shouldDisable() || hideContent
     }))
   }, leftElements && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sidebuttons ".concat(customClassForSideButtons)
   }, leftElements), /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "testInputContent",
     className: "inputcontent ".concat(customClassForInputContent)
   }, type === 'textarea' ? /*#__PURE__*/_react["default"].createElement("textarea", _extends({
     rows: props.rows,
@@ -202,7 +219,8 @@ InputTextBase.propTypes = {
   visible: _propTypes["default"].bool,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
   onDeniedActions: _propTypes["default"].object,
-  handlerSetOnDenied: _propTypes["default"].func
+  handlerSetOnDenied: _propTypes["default"].func,
+  targetRef: _propTypes["default"].func
 };
 InputTextBase.defaultProps = {
   value: undefined,
@@ -242,9 +260,10 @@ InputTextBase.defaultProps = {
   visible: true,
   permissionAttr: undefined,
   onDeniedActions: undefined,
-  handlerSetOnDenied: undefined
+  handlerSetOnDenied: undefined,
+  targetRef: undefined
 };
 
-var _default = (0, _inputHOC["default"])(InputTextBase);
+var _default = (0, _inputHOC["default"])((0, _withTooltip["default"])(InputTextBase));
 
 exports["default"] = _default;