linear-react-components-ui 0.4.75 → 0.4.76-rc.0

package/lib/assets/styles/table.scss

@@ -1,5 +1,11 @@
 @import "colors.scss";
 @import "effects.scss";
+
+.table-component,
+.innertable {
+  contain: strict;
+}
+
 .table-component {
   width: 100%;
   max-width: 100%;
@@ -8,7 +14,8 @@
   font-size: 14px;
   max-height: 20em;
   position: relative;
-  > .headercontainer, .bodycontainer {
+  > .headercontainer,
+  .bodycontainer {
     width: 100%;
     .innertable {
       width: 100%;
@@ -31,7 +38,8 @@
     vertical-align: middle;
     border-bottom: 1px solid $component-border-color-soft;
     line-height: 18px;
-    > .hidden, > .rowhover { 
+    > .hidden,
+    > .rowhover {
       display: none;
       animation: revealelement 0.2s forwards ease-in-out;
     }
@@ -39,7 +47,7 @@
       border-bottom: 0;
     }
   }
-  
+
   > .bodycontainer > .innertable > .tbody > .trow,
   > .tbody > .trow {
     &.-selected {
@@ -48,7 +56,7 @@
     }
     &:hover {
       > .rowcolumn > .rowhover {
-        display: table
+        display: table;
       }
     }
   }
@@ -84,7 +92,7 @@
       background: $header-container-bg;
     }
     > .headercontainer > .innertable > .theader,
-    > .theader { 
+    > .theader {
       background: $header-container-bg;
     }
   }

package/lib/assets/styles/tabs.scss

@@ -1,4 +1,29 @@
 @import "colors.scss";
+%tab-closepanel {
+  background-color: transparent;
+  border: 0;
+  height: 20px;
+  margin-right: 5px;
+  padding: 0;
+  text-shadow: 0 1px 0 $font-color-second;
+  width: 20px;
+  visibility: hidden;
+  transition: all 0.2s ease-in-out;
+  border-radius: 4px;
+  &:after {
+    content: "×";
+    font-size: 20px;
+    text-shadow: none;
+    color: $font-color-soft;
+    transition: all 0.2s ease-in-out;
+  }
+  &:hover {
+    background-color: $color-light-dark;
+    &:after {
+      color: $font-color-second;
+    }
+  }
+}
 %tab-component-menus {
   .menu {
     -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
@@ -7,22 +32,26 @@
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
-    flex-grow: 1;
+    flex: 1;
     &.-firsttabident > .menuitem:first-child {
       margin-left: 15px;
     }
   }
-  .menu  > .menuitem {
+  .menu > .menuitem {
     border-bottom: 0;
-    border-radius: 5px 5px 0px 0px; 
-    -moz-border-radius: 5px 5px 0px 0px; 
-    -webkit-border-radius: 5px 5px 0px 0px; 	
+    border-radius: 5px 5px 0px 0px;
+    -moz-border-radius: 5px 5px 0px 0px;
+    -webkit-border-radius: 5px 5px 0px 0px;
     text-shadow: 0 1px $font-color-second;
     cursor: pointer;
     line-height: 20px;
     margin-right: 1px;
     padding: 0;
     width: auto;
+    min-width: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -31,40 +60,22 @@
       box-shadow: 0;
       font-weight: bold; /* z-index: 2; */
     }
-    &.selected > .closepanel, &:hover > .closepanel {
+    &.selected > .closepanel,
+    &:hover > .closepanel {
       visibility: visible;
     }
   }
-  .menu  > .menuitem > .menubutton {
+  .menu > .menuitem > .menubutton {
+    white-space: nowrap;
+    text-overflow: ellipsis;
     background: transparent;
     border: 0;
   }
-  .menu  > .menuitem > .closepanel {
-    background-color: transparent;
-    border: 0;
-    float: right;
-    height: 20px;
-    margin: 5px 5px 0 0;
-    padding: 0;
-    text-shadow: 0 1px 0 $font-color-second;
-    width: 20px;
-    visibility: hidden;
-    transition: all 0.2s ease-in-out;
-    border-radius: 4px;
-    &:after {
-      content: "×";
-      font-size: 20px;
-      text-shadow: none;
-      color: $font-color-soft;
-      transition: all 0.2s ease-in-out;
-    }
-    &:hover {
-      background-color: $color-light-dark;
-      &:after {
-        color: $font-color-second;
-      }
-    }
+
+  .menu > .menuitem > .closepanel {
+    @extend %tab-closepanel;
   }
+
   .menubar {
     width: auto;
     border-bottom: 1px solid #dae1e8;
@@ -86,6 +97,10 @@
     flex-wrap: nowrap;
     width: 100%;
     @extend %tab-component-menus;
+    > .dropdownbutton {
+      border-bottom: 1px solid $component-border-color;
+      padding: 0 0.8rem;
+    }
   }
   > .panel {
     background-color: $font-color-second;
@@ -111,9 +126,9 @@
     justify-content: center;
   }
   > .menu > .menuitem {
-    border-radius: 5px 0px 0px 5px; 
-    -moz-border-radius: 5px 0px 0px 5px; 
-    -webkit-border-radius: 5px 0px 0px 5px; 
+    border-radius: 5px 0px 0px 5px;
+    -moz-border-radius: 5px 0px 0px 5px;
+    -webkit-border-radius: 5px 0px 0px 5px;
     &.selected {
       border: 1px solid $component-border-color;
       border-right: 1px solid $font-color-second;
@@ -121,8 +136,8 @@
       width: 100%;
     }
   }
-  > .menu  > .menuitem > .closepanel {
-    float: left
+  > .menu > .menuitem > .closepanel {
+    float: left;
   }
   > .panel {
     border-top: 1px solid $component-border-color;
@@ -139,9 +154,9 @@
     box-shadow: 0 1px 1px 0px $component-border-color inset;
   }
   > .menu > .menuitem {
-    border-radius: 0px 0px 5px 5px; 
-    -moz-border-radius: 0px 0px 5px 5px; 
-    -webkit-border-radius: 0px 0px 5px 5px; 
+    border-radius: 0px 0px 5px 5px;
+    -moz-border-radius: 0px 0px 5px 5px;
+    -webkit-border-radius: 0px 0px 5px 5px;
     &.selected {
       border: 1px solid $component-border-color;
       border-top: 1px solid $font-color-second;
@@ -167,9 +182,9 @@
     justify-content: center;
   }
   > .menu > .menuitem {
-    border-radius: 0px 5px 5px 0px; 
-    -moz-border-radius: 0px 5px 5px 0px; 
-    -webkit-border-radius: 0px 5px 5px 0px; 
+    border-radius: 0px 5px 5px 0px;
+    -moz-border-radius: 0px 5px 5px 0px;
+    -webkit-border-radius: 0px 5px 5px 0px;
     &.selected {
       border: 1px solid $component-border-color;
       border-left: 1px solid $font-color-second;
@@ -182,3 +197,22 @@
     border-right: 0;
   }
 }
+
+/*
+  Dropdown hide tabs
+*/
+.dropdown-hide-tabs .menuitem {
+  cursor: pointer;
+  line-height: 20px;
+  margin-right: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  > .closepanel {
+    @extend %tab-closepanel;
+  }
+  &:hover > .closepanel {
+    visibility: visible;
+  }
+}

package/lib/assets/styles/treeview.scss

@@ -42,6 +42,25 @@
   animation: revealelement 0.3s forwards ease-in-out;
   > .label {
     width: auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    >.node-menu {
+      animation: revealelement 0.3s forwards ease-in-out;
+      margin-left: 10px;
+    }
+    >.node-rightelements {
+      animation: revealelement 0.3s forwards ease-in-out;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    >.node-toolbarelements {
+      animation: revealelement 0.3s forwards ease-in-out;
+      width: auto;
+      height: 100%;
+      margin-left: 10px;
+    }
     &:hover {
       background-color: rgb(209, 209, 209);
     }
@@ -53,3 +72,16 @@
     float: left;
   }
 }
+
+.nodelist > .treeviewitem > .label > .node-rightelements  > .element,
+.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-rightelements > .element {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.nodelist > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar,
+.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar {
+  border: none;
+}

package/lib/avatar/avatar.spec.js

@@ -0,0 +1,190 @@
+"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"));
+
+require("babel-polyfill");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+var _list = _interopRequireWildcard(require("../list"));
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('Avatar', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B"
+    })),
+        container = _render.container;
+
+    expect(container.firstChild).toHaveClass('avatar-component -default');
+    expect(container.firstChild).toHaveTextContent('B');
+    expect(_react2.screen.getByRole('button')).toBeInTheDocument();
+  });
+  it('should apply customClass', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      customClass: "avatarteste"
+    })),
+        container = _render2.container;
+
+    expect(container.firstChild).toHaveClass('avatarteste');
+  });
+  it('should change color', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      color: "#333"
+    })),
+        container = _render3.container;
+
+    expect(container.firstChild).toHaveStyle('background-color: #333');
+  });
+  it('should change to square', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      square: true
+    })),
+        container = _render4.container;
+
+    expect(container.firstChild).toHaveClass('-square');
+  });
+  it('should change to mini', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      size: "mini"
+    })),
+        container = _render5.container;
+
+    expect(container.firstChild).toHaveClass('-mini');
+  });
+  it('should render icon with iconName', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      iconName: "calc"
+    })),
+        container = _render6.container;
+
+    expect(container.firstChild).toContainElement(_react2.screen.getByTestId('icon'));
+  });
+  it('should render Icon with icon', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        name: "user"
+      })
+    })),
+        container = _render7.container;
+
+    expect(container.firstChild).toContainElement(_react2.screen.getByTestId('icon'));
+  });
+  it('should render with image', function () {
+    var mockAvatar = /*#__PURE__*/_react["default"].createElement(_["default"], {
+      src: "https://yt3.ggpht.com/a-/AAuE7mDGQh9L3n_EULfeZEO9rs_JR4BY376CSrlxdw=s900-mo-c-c0xffffffff-rj-k-no",
+      srcAlt: "Avatar Teste"
+    });
+
+    var _render8 = (0, _react2.render)(mockAvatar),
+        container = _render8.container;
+
+    expect(container.firstChild).toContainElement(_react2.screen.getByAltText('Avatar Teste'));
+    expect(_react2.screen.getByAltText('Avatar Teste')).toHaveClass('imgavatar');
+  });
+  it('should not render icon if has image', function () {
+    var mockAvatar = /*#__PURE__*/_react["default"].createElement(_["default"], {
+      src: "https://yt3.ggpht.com/a-/AAuE7mDGQh9L3n_EULfeZEO9rs_JR4BY376CSrlxdw=s900-mo-c-c0xffffffff-rj-k-no",
+      srcAlt: "Avatar Teste"
+    });
+
+    var _render9 = (0, _react2.render)(mockAvatar),
+        container = _render9.container;
+
+    expect(container.firstChild).not.toContainElement(document.querySelector('.icon-component'));
+  });
+  it('should change size', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      width: "56px",
+      height: "56px"
+    })),
+        container = _render10.container;
+
+    expect(container.firstChild).toHaveStyle('width: 56px; height:56px');
+  });
+  it('should open dropdown and render chilren', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var mockAvatar, _render11, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            mockAvatar = /*#__PURE__*/_react["default"].createElement(_["default"], {
+              label: "B",
+              dropdown: true
+            }, /*#__PURE__*/_react["default"].createElement(_list["default"], null, /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
+              rightIconName: "exclamation",
+              text: "Icone na direita"
+            }), /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
+              rightIconName: "user",
+              text: "Icone na direita"
+            }), /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
+              text: "Itemlist sem \xEDcone"
+            }), /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
+              text: "Itemlist sem \xEDcone Disabled",
+              disabled: true
+            })));
+            _render11 = (0, _react2.render)(mockAvatar), container = _render11.container;
+
+            _react2.fireEvent.click(container.firstChild);
+
+            _context.next = 5;
+            return (0, _react2.waitFor)(function () {
+              return _react2.screen.getByTestId('dropdown-component');
+            });
+
+          case 5:
+            expect(container.firstChild).toHaveTextContent('B');
+            expect(_react2.screen.getByTestId('dropdown-component')).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should callback function onClick', function () {
+    var mockOnClick = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      onClick: mockOnClick
+    })),
+        container = _render12.container;
+
+    _react2.fireEvent.click(container.firstChild);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+  it('should use targetRef', function () {
+    var mockTargetRef = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      label: "B",
+      targetRef: mockTargetRef
+    }));
+    expect(mockTargetRef).toBeCalledTimes(1);
+  });
+});

package/lib/avatar/index.js

@@ -54,6 +54,7 @@ var Avatar = function Avatar(props) {
       iconName = props.iconName,
       icon = props.icon,
       src = props.src,
+      srcAlt = props.srcAlt,
       customClass = props.customClass,
       targetRef = props.targetRef,
       label = props.label,
@@ -64,6 +65,7 @@ var Avatar = function Avatar(props) {
       id = props.id;
   var dropdownRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "avatar",
     id: id,
     onKeyPress: null,
     role: "button",
@@ -83,14 +85,14 @@ var Avatar = function Avatar(props) {
       backgroundColor: "".concat(color),
       cursor: "".concat(dropdown ? 'pointer' : 'normal')
     }, style)
-  }, (iconName || icon) && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
+  }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
     className: "imgavatar",
     style: {
       width: "".concat(width),
       height: "".concat(height)
     },
     src: src,
-    alt: "not-found"
+    alt: srcAlt
   }), label), dropdown && getDropdownPopup(dropdownRef.current));
 };
 
@@ -103,6 +105,7 @@ Avatar.propTypes = {
   iconName: _propTypes["default"].string,
   icon: _propTypes["default"].instanceOf(Object),
   src: _propTypes["default"].string,
+  srcAlt: _propTypes["default"].string,
   children: _propTypes["default"].element,
   square: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
@@ -124,6 +127,7 @@ Avatar.defaultProps = {
   iconName: '',
   icon: null,
   src: '',
+  srcAlt: 'Avatar',
   customClass: '',
   children: null,
   square: false,

package/lib/badge/badge.spec.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireDefault(require("."));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+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 mockBadge = function mockBadge(props) {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], _extends({
+    customClass: "mockBadge",
+    customClassForBadge: "classforbadge",
+    content: "10"
+  }, props), /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "bell_alert"
+  }));
+};
+
+describe('Badges', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(mockBadge()),
+        container = _render.container;
+
+    expect(container.firstChild).toBeTruthy();
+  });
+  it('should render children', function () {
+    var _render2 = (0, _react2.render)(mockBadge()),
+        container = _render2.container,
+        getByTestId = _render2.getByTestId;
+
+    expect(container.firstChild).toContainElement(getByTestId('icon'));
+  });
+  it('should render content', function () {
+    var _render3 = (0, _react2.render)(mockBadge()),
+        container = _render3.container;
+
+    expect(container.firstChild).toHaveTextContent('10');
+  });
+  it('should apply custom class', function () {
+    var _render4 = (0, _react2.render)(mockBadge()),
+        container = _render4.container;
+
+    expect(container.firstChild).toHaveClass('mockBadge');
+  });
+  it('should apply custom class', function () {
+    var _render5 = (0, _react2.render)(mockBadge()),
+        container = _render5.container;
+
+    expect(container.firstChild).toHaveClass('mockBadge');
+  });
+  it('should apply custom class for badge', function () {
+    var _render6 = (0, _react2.render)(mockBadge()),
+        container = _render6.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('classforbadge');
+  });
+  it('should apply custom top', function () {
+    var _render7 = (0, _react2.render)(mockBadge({
+      top: '10px'
+    })),
+        container = _render7.container;
+
+    expect(container.querySelector('.badge')).toHaveStyle('top: 10px;');
+  });
+  it('should apply custom right', function () {
+    var _render8 = (0, _react2.render)(mockBadge({
+      right: '10px'
+    })),
+        container = _render8.container;
+
+    expect(container.querySelector('.badge')).toHaveStyle('right: 10px;');
+  });
+  it('should apply default color', function () {
+    var _render9 = (0, _react2.render)(mockBadge()),
+        container = _render9.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('-default');
+  });
+  it('should apply primary color', function () {
+    var _render10 = (0, _react2.render)(mockBadge({
+      color: 'primary'
+    })),
+        container = _render10.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('-primary');
+  });
+  it('should apply danger color', function () {
+    var _render11 = (0, _react2.render)(mockBadge({
+      color: 'danger'
+    })),
+        container = _render11.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('-danger');
+  });
+  it('should apply warning color', function () {
+    var _render12 = (0, _react2.render)(mockBadge({
+      color: 'warning'
+    })),
+        container = _render12.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('-warning');
+  });
+  it('should apply success color', function () {
+    var _render13 = (0, _react2.render)(mockBadge({
+      color: 'success'
+    })),
+        container = _render13.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('-success');
+  });
+  it('should apply info color', function () {
+    var _render14 = (0, _react2.render)(mockBadge({
+      color: 'info'
+    })),
+        container = _render14.container;
+
+    expect(container.querySelector('.badge')).toHaveClass('-info');
+  });
+});

package/lib/badge/index.js

@@ -13,8 +13,6 @@ require("../assets/styles/badge.scss");
 
 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 Badge = function Badge(props) {
   var color = props.color,
       customClass = props.customClass,
@@ -23,9 +21,9 @@ var Badge = function Badge(props) {
       content = props.content,
       top = props.top,
       right = props.right;
-  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: "badge-component ".concat(customClass)
-  }, props), children, /*#__PURE__*/_react["default"].createElement("span", {
+  }, children, /*#__PURE__*/_react["default"].createElement("span", {
     className: "badge -".concat(color, " ").concat(customClassForBadge),
     style: {
       top: "".concat(top),
@@ -49,7 +47,7 @@ Badge.propTypes = {
   children: _propTypes["default"].element.isRequired,
   customClass: _propTypes["default"].string,
   customClassForBadge: _propTypes["default"].string,
-  content: _propTypes["default"].object
+  content: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string])
 };
 var _default = Badge;
 exports["default"] = _default;