linear-react-components-ui 1.0.2 → 1.0.3-beta.1

package/lib/toolbar/toolbar.spec.js

@@ -0,0 +1,394 @@
+"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");
+
+var _ = _interopRequireWildcard(require("."));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+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 toolBar = function toolBar(propsToolBar, propsButtonBar, propsLabelBar) {
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    customClass: "toolBarCustomClass",
+    style: {
+      backgroundColor: '#00f'
+    }
+  }, propsToolBar), /*#__PURE__*/_react.default.createElement(_.ToolBarGroup, {
+    style: {
+      marginBottom: '10px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.ButtonBar, propsButtonBar)), /*#__PURE__*/_react.default.createElement(_.Separator, null), /*#__PURE__*/_react.default.createElement(_.ToolBarGroup, {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.LabelBar, propsLabelBar, "LabelBar")));
+};
+
+describe('Toolbar', function () {
+  describe('Default', function () {
+    it('should render correctly', function () {
+      var _render = (0, _react2.render)(toolBar()),
+          container = _render.container;
+
+      expect(container.firstChild).toBeTruthy();
+      expect(container.firstChild).toHaveClass('toolbar-component');
+      expect(container.querySelectorAll('.toolbar-group').length).toBe(2);
+      expect(container.querySelector('.separator')).toBeInTheDocument();
+    });
+    it('apply customClass', function () {
+      var _render2 = (0, _react2.render)(toolBar()),
+          container = _render2.container;
+
+      expect(container.firstChild).toHaveClass('toolBarCustomClass');
+    });
+    it('apply small size', function () {
+      var _render3 = (0, _react2.render)(toolBar({
+        size: 'small'
+      })),
+          container = _render3.container;
+
+      expect(container.firstChild).toHaveClass('small-bar');
+    });
+    it('apply large size', function () {
+      var _render4 = (0, _react2.render)(toolBar({
+        size: 'large'
+      })),
+          container = _render4.container;
+
+      expect(container.firstChild).toHaveClass('large-bar');
+    });
+    it('apply style', function () {
+      var _render5 = (0, _react2.render)(toolBar()),
+          container = _render5.container;
+
+      expect(container.firstChild).toHaveStyle({
+        backgroundColor: '#00f'
+      });
+    });
+  });
+  describe('ToolBarGroup', function () {
+    it('should render correctly', function () {
+      var _render6 = (0, _react2.render)(toolBar()),
+          container = _render6.container;
+
+      expect(container.querySelectorAll('.toolbar-group').length).toBe(2);
+    });
+    it('should contain ButtonBar in children', function () {
+      var _render7 = (0, _react2.render)(toolBar()),
+          container = _render7.container;
+
+      expect(container.querySelectorAll('.toolbar-group')[0]).toContainElement(container.querySelector('.buttonbar'));
+    });
+    it('should container LabelBar in children', function () {
+      var _render8 = (0, _react2.render)(toolBar()),
+          container = _render8.container;
+
+      expect(container.querySelectorAll('.toolbar-group')[1]).toContainElement(container.querySelector('.labelbar'));
+    });
+    it('should apply style', function () {
+      var _render9 = (0, _react2.render)(toolBar()),
+          container = _render9.container;
+
+      expect(container.querySelectorAll('.toolbar-group')[0]).toHaveStyle({
+        marginBottom: '10px'
+      });
+      expect(container.querySelectorAll('.toolbar-group')[1]).toHaveStyle({
+        float: 'right'
+      });
+    });
+  });
+  describe('ButtonBar', function () {
+    it('should render correctly', function () {
+      var _render10 = (0, _react2.render)(toolBar()),
+          container = _render10.container;
+
+      expect(container.firstChild).toContainElement(container.querySelector('.buttonbar'));
+      expect(container.querySelector('.buttonbar')).toHaveClass('-default');
+    });
+    it('should apply small size', function () {
+      var _render11 = (0, _react2.render)(toolBar({}, {
+        size: 'small'
+      })),
+          container = _render11.container;
+
+      expect(container.querySelector('.buttonbar')).toHaveClass('-small');
+    });
+    it('should apply large size', function () {
+      var _render12 = (0, _react2.render)(toolBar({}, {
+        size: 'large'
+      })),
+          container = _render12.container;
+
+      expect(container.querySelector('.buttonbar')).toHaveClass('-large');
+    });
+    it('should render icon with iconName', function () {
+      var _render13 = (0, _react2.render)(toolBar({}, {
+        iconName: 'user'
+      })),
+          container = _render13.container,
+          getByTestId = _render13.getByTestId;
+
+      expect(container.querySelector('.buttonbar')).toContainElement(getByTestId('icon'));
+    });
+    it('should render icon with icon', function () {
+      var _render14 = (0, _react2.render)(toolBar({}, {
+        icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+          name: "user"
+        })
+      })),
+          container = _render14.container,
+          getByTestId = _render14.getByTestId;
+
+      expect(container.querySelector('.buttonbar')).toContainElement(getByTestId('icon'));
+    });
+    describe('Custom Type', function () {
+      it('should apply primary', function () {
+        var _render15 = (0, _react2.render)(toolBar({}, {
+          label: 'Primary',
+          type: 'primary'
+        })),
+            container = _render15.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-primary');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Primary');
+      });
+      it('should apply danger', function () {
+        var _render16 = (0, _react2.render)(toolBar({}, {
+          label: 'Danger',
+          type: 'danger'
+        })),
+            container = _render16.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-danger');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Danger');
+      });
+      it('should apply warning', function () {
+        var _render17 = (0, _react2.render)(toolBar({}, {
+          label: 'Warning',
+          type: 'warning'
+        })),
+            container = _render17.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-warning');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Warning');
+      });
+      it('should apply info', function () {
+        var _render18 = (0, _react2.render)(toolBar({}, {
+          label: 'Info',
+          type: 'info'
+        })),
+            container = _render18.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-info');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Info');
+      });
+      it('should apply success', function () {
+        var _render19 = (0, _react2.render)(toolBar({}, {
+          label: 'Success',
+          type: 'success'
+        })),
+            container = _render19.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-success');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Success');
+      });
+      it('should apply add', function () {
+        var _render20 = (0, _react2.render)(toolBar({}, {
+          label: 'Adicionar',
+          type: 'add'
+        })),
+            container = _render20.container,
+            getByTestId = _render20.getByTestId;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-success');
+        expect(container.firstChild).toContainElement(getByTestId('icon'));
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Adicionar');
+      });
+      it('should apply cancel', function () {
+        var _render21 = (0, _react2.render)(toolBar({}, {
+          label: 'Cancelar',
+          type: 'cancel'
+        })),
+            container = _render21.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-default');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Cancelar');
+      });
+      it('should apply destroy', function () {
+        var _render22 = (0, _react2.render)(toolBar({}, {
+          label: 'Deletar',
+          type: 'destroy'
+        })),
+            container = _render22.container,
+            getByTestId = _render22.getByTestId;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-danger');
+        expect(container.firstChild).toContainElement(getByTestId('icon'));
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Deletar');
+      });
+      it('should apply edit', function () {
+        var _render23 = (0, _react2.render)(toolBar({}, {
+          label: 'Editar',
+          type: 'edit'
+        })),
+            container = _render23.container,
+            getByTestId = _render23.getByTestId;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-default');
+        expect(container.firstChild).toContainElement(getByTestId('icon'));
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Editar');
+      });
+      it('should apply save', function () {
+        var _render24 = (0, _react2.render)(toolBar({}, {
+          label: 'Salvar',
+          type: 'save'
+        })),
+            container = _render24.container;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-primary');
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Salvar');
+      });
+      it('should apply activate', function () {
+        var _render25 = (0, _react2.render)(toolBar({}, {
+          label: 'Ativar',
+          type: 'activate'
+        })),
+            container = _render25.container,
+            getByTestId = _render25.getByTestId;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-default');
+        expect(container.firstChild).toContainElement(getByTestId('icon'));
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Ativar');
+      });
+      it('should apply inactivate', function () {
+        var _render26 = (0, _react2.render)(toolBar({}, {
+          label: 'Inativar',
+          type: 'inactivate'
+        })),
+            container = _render26.container,
+            getByTestId = _render26.getByTestId;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-default');
+        expect(container.firstChild).toContainElement(getByTestId('icon'));
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Inativar');
+      });
+      it('should apply restore', function () {
+        var _render27 = (0, _react2.render)(toolBar({}, {
+          label: 'Restaurar',
+          type: 'restore'
+        })),
+            container = _render27.container,
+            getByTestId = _render27.getByTestId;
+
+        expect(container.querySelector('.buttonbar')).toHaveClass('-default');
+        expect(container.firstChild).toContainElement(getByTestId('icon'));
+        expect(container.querySelector('.buttonbar')).toHaveTextContent('Restaurar');
+      });
+    });
+  });
+  describe('LabelBar', function () {
+    it('should render correctly', function () {
+      var _render28 = (0, _react2.render)(toolBar()),
+          container = _render28.container;
+
+      expect(container.firstChild).toContainElement(container.querySelector('.labelbar'));
+    });
+    it('should apply small size', function () {
+      var _render29 = (0, _react2.render)(toolBar({}, {}, {
+        size: 'small'
+      })),
+          container = _render29.container;
+
+      expect(container.querySelector('.labelbar')).toHaveClass('-small');
+    });
+    it('should apply large size', function () {
+      var _render30 = (0, _react2.render)(toolBar({}, {}, {
+        size: 'large'
+      })),
+          container = _render30.container;
+
+      expect(container.querySelector('.labelbar')).toHaveClass('-large');
+    });
+    it('should apply border', function () {
+      var _render31 = (0, _react2.render)(toolBar({}, {}, {
+        bordered: true
+      })),
+          container = _render31.container;
+
+      expect(container.querySelector('.labelbar')).toHaveClass('-bordered');
+    });
+    it('should render icon with iconName', function () {
+      var _render32 = (0, _react2.render)(toolBar({}, {}, {
+        iconName: 'user'
+      })),
+          container = _render32.container,
+          getByTestId = _render32.getByTestId;
+
+      expect(container.querySelector('.labelbar')).toContainElement(getByTestId('icon'));
+    });
+    it('should render icon with icon', function () {
+      var _render33 = (0, _react2.render)(toolBar({}, {}, {
+        icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+          name: "user"
+        })
+      })),
+          container = _render33.container,
+          getByTestId = _render33.getByTestId;
+
+      expect(container.querySelector('.labelbar')).toContainElement(getByTestId('icon'));
+    });
+    describe('Custom Type', function () {
+      it('should apply primary', function () {
+        var _render34 = (0, _react2.render)(toolBar({}, {}, {
+          type: 'primary'
+        })),
+            container = _render34.container;
+
+        expect(container.querySelector('.labelbar')).toHaveClass('-primary');
+      });
+      it('should apply danger', function () {
+        var _render35 = (0, _react2.render)(toolBar({}, {}, {
+          type: 'danger'
+        })),
+            container = _render35.container;
+
+        expect(container.querySelector('.labelbar')).toHaveClass('-danger');
+      });
+      it('should apply warning', function () {
+        var _render36 = (0, _react2.render)(toolBar({}, {}, {
+          type: 'warning'
+        })),
+            container = _render36.container;
+
+        expect(container.querySelector('.labelbar')).toHaveClass('-warning');
+      });
+      it('should apply info', function () {
+        var _render37 = (0, _react2.render)(toolBar({}, {}, {
+          type: 'info'
+        })),
+            container = _render37.container;
+
+        expect(container.querySelector('.labelbar')).toHaveClass('-info');
+      });
+      it('should apply success', function () {
+        var _render38 = (0, _react2.render)(toolBar({}, {}, {
+          type: 'success'
+        })),
+            container = _render38.container;
+
+        expect(container.querySelector('.labelbar')).toHaveClass('-success');
+      });
+    });
+  });
+});

package/lib/tooltip/index.js

@@ -1,27 +1,36 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _uuid = _interopRequireDefault(require("uuid"));
+
 require("../assets/styles/tooltip.scss");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
+
 var Tooltip = function Tooltip(_ref) {
   var text = _ref.text,
-    tooltipRef = _ref.tooltipRef,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? '' : _ref$style,
-    tooltipDimensions = _ref.tooltipDimensions,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? 'bottom' : _ref$className,
-    _ref$handlerSetDimens = _ref.handlerSetDimensions,
-    handlerSetDimensions = _ref$handlerSetDimens === void 0 ? function () {} : _ref$handlerSetDimens;
+      tooltipRef = _ref.tooltipRef,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? '' : _ref$style,
+      tooltipDimensions = _ref.tooltipDimensions,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? 'bottom' : _ref$className,
+      _ref$handlerSetDimens = _ref.handlerSetDimensions,
+      handlerSetDimensions = _ref$handlerSetDimens === void 0 ? function () {} : _ref$handlerSetDimens;
   var tooltipComponent = (0, _react.useRef)(document.createElement('div'));
   (0, _react.useEffect)(function () {
     tooltipComponent.current.id = "tooltip-".concat(_uuid.default.v1());
@@ -32,17 +41,20 @@ var Tooltip = function Tooltip(_ref) {
     var tooltipEl = document.querySelector("div#".concat(tooltipComponent.current.id));
     var widthDimension = tooltipEl === null || tooltipEl === void 0 ? void 0 : tooltipEl.offsetWidth;
     var heightDimension = tooltipEl === null || tooltipEl === void 0 ? void 0 : tooltipEl.offsetHeight;
+
     if (tooltipDimensions && tooltipDimensions.width) {
       widthDimension = tooltipDimensions.width;
     }
+
     handlerSetDimensions({
       width: widthDimension,
       height: Number(heightDimension)
-    });
-    // eslint-disable-next-line no-param-reassign
+    }); // eslint-disable-next-line no-param-reassign
+
     if (tooltipRef) {
       tooltipRef.current = tooltipEl;
     }
+
     return function () {
       document.body.removeChild(tooltipComponent.current);
     };
@@ -53,12 +65,15 @@ var Tooltip = function Tooltip(_ref) {
   (0, _react.useEffect)(function () {
     tooltipComponent.current.style.cssText = style;
   }, [style]);
+
   var getTooltipContent = function getTooltipContent() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "tooltipcontent"
     }, text);
   };
+
   return /*#__PURE__*/_reactDom.default.createPortal(getTooltipContent(), tooltipComponent.current);
 };
+
 var _default = Tooltip;
 exports.default = _default;