linear-react-components-ui 0.4.76-rc.9 → 0.4.77-beta.10

package/lib/assets/styles/table.scss

@@ -1,5 +1,7 @@
 @import "colors.scss";
 @import "effects.scss";
+@import "commons.scss";
+
 .table-component {
   width: 100%;
   max-width: 100%;
@@ -8,7 +10,8 @@
   font-size: 14px;
   max-height: 20em;
   position: relative;
-  > .headercontainer, .bodycontainer {
+  > .headercontainer,
+  .bodycontainer {
     width: 100%;
     .innertable {
       width: 100%;
@@ -17,6 +20,13 @@
   > .bodycontainer {
     overflow-y: auto;
   }
+  > .bodycontainer > .innertable > .tbody,
+  > .tbody {
+    position: relative;
+    &.skeleton-transparency::before {
+      @extend %skeleton-transparency;
+    }
+  }
   > .headercontainer > .innertable > .theader > .trow,
   > .bodycontainer > .innertable > .tbody > .trow,
   > .theader > .trow,
@@ -31,7 +41,11 @@
     vertical-align: middle;
     border-bottom: 1px solid $component-border-color-soft;
     line-height: 18px;
-    > .hidden, > .rowhover { 
+    > .rowskeleton {
+      margin: 10px 0;
+    }
+    > .hidden,
+    > .rowhover {
       display: none;
       animation: revealelement 0.2s forwards ease-in-out;
     }
@@ -39,7 +53,7 @@
       border-bottom: 0;
     }
   }
-  
+
   > .bodycontainer > .innertable > .tbody > .trow,
   > .tbody > .trow {
     &.-selected {
@@ -48,7 +62,7 @@
     }
     &:hover {
       > .rowcolumn > .rowhover {
-        display: table
+        display: table;
       }
     }
   }
@@ -84,7 +98,7 @@
       background: $header-container-bg;
     }
     > .headercontainer > .innertable > .theader,
-    > .theader { 
+    > .theader {
       background: $header-container-bg;
     }
   }
@@ -115,3 +129,9 @@
     }
   }
 }
+
+.table-component.-skeletonized {
+  > .bodycontainer {
+    overflow: hidden;
+  }
+}

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,25 @@
     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;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -31,40 +59,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;
@@ -85,7 +95,13 @@
     display: flex;
     flex-wrap: nowrap;
     width: 100%;
+    min-height: 35px;
+    overflow: hidden;
     @extend %tab-component-menus;
+    > .dropdownbutton {
+      border-bottom: 1px solid $component-border-color;
+      padding: 0 0.8rem;
+    }
   }
   > .panel {
     background-color: $font-color-second;
@@ -105,24 +121,26 @@
 .tabs-component.menu-left {
   grid-template-columns: auto 1fr;
   grid-template-rows: none;
-  > .menu {
-    box-shadow: -1px 0px 0px 0px $component-border-color inset;
-    flex-direction: column;
-    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; 
-    &.selected {
-      border: 1px solid $component-border-color;
-      border-right: 1px solid $font-color-second;
-      border-left: 2px solid $component-selected-color;
-      width: 100%;
+  > .menucontainer {
+    > .menu {
+      box-shadow: -1px 0px 0px 0px $component-border-color inset;
+      flex-direction: column;
+      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;
+      &.selected {
+        border: 1px solid $component-border-color;
+        border-right: 1px solid $font-color-second;
+        border-left: 2px solid $component-selected-color;
+        width: 100%;
+      }
+    }
+    > .menu > .menuitem > .closepanel {
+      float: left;
     }
-  }
-  > .menu  > .menuitem > .closepanel {
-    float: left
   }
   > .panel {
     border-top: 1px solid $component-border-color;
@@ -135,18 +153,20 @@
 */
 .tabs-component.menu-bottom {
   grid-template-rows: 1fr auto;
-  > .menu {
-    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; 
-    &.selected {
-      border: 1px solid $component-border-color;
-      border-top: 1px solid $font-color-second;
-      border-bottom: 2px solid $component-selected-color;
-      height: 100%;
+  .menucontainer {
+    > .menu {
+      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;
+      &.selected {
+        border: 1px solid $component-border-color;
+        border-top: 1px solid $font-color-second;
+        border-bottom: 2px solid $component-selected-color;
+        height: 100%;
+      }
     }
   }
   > .panel {
@@ -161,20 +181,22 @@
 .tabs-component.menu-right {
   grid-template-columns: 1fr auto;
   grid-template-rows: none;
-  > .menu {
-    box-shadow: 2px 0 0px -1px $component-border-color inset;
-    flex-direction: column;
-    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; 
-    &.selected {
-      border: 1px solid $component-border-color;
-      border-left: 1px solid $font-color-second;
-      border-right: 2px solid $component-selected-color;
-      width: 100%;
+  .menucontainer{
+    > .menu {
+      box-shadow: 2px 0 0px -1px $component-border-color inset;
+      flex-direction: column;
+      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;
+      &.selected {
+        border: 1px solid $component-border-color;
+        border-left: 1px solid $font-color-second;
+        border-right: 2px solid $component-selected-color;
+        width: 100%;
+      }
     }
   }
   > .panel {
@@ -182,3 +204,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

@@ -15,6 +15,11 @@
       margin-left: -20px;
       cursor: pointer;
     }
+    .loading {
+      margin-left: -30px;
+      position: absolute;
+      margin-top: -5px;
+    }
   }
 }
 
@@ -42,8 +47,31 @@
   animation: revealelement 0.3s forwards ease-in-out;
   > .label {
     width: auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 25px;
+    color: $font-color-soft;
+    >.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 {
+      cursor: pointer;
       background-color: rgb(209, 209, 209);
+      text-decoration: underline;
     }
   }
   > .nodelist {
@@ -53,3 +81,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/assets/styles/uitour.scss

@@ -0,0 +1,112 @@
+@import "commons.scss";
+@import "colors.scss";
+@import "effects.scss";
+
+$step-arrow-size: 22px;
+$step-arrow-shadow-size: 26px;
+%step-arrow {
+  content: '';
+  position: absolute;
+  border-bottom: $step-arrow-size solid transparent;
+  border-right: $step-arrow-size solid #fff;
+  border-top: $step-arrow-size solid transparent;
+}
+%step-arrow-shadow {
+  content: '';
+  position: absolute;
+  border-bottom: $step-arrow-shadow-size solid transparent;
+  border-right: $step-arrow-shadow-size solid rgba(0, 0, 0, 0.6);
+  border-top: $step-arrow-shadow-size solid transparent;
+}
+.uitour-component {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 99999999999999999999;
+  > .step {
+    background-color: #fff;
+    position: relative;
+    max-width: 450px;
+    display: flex;
+    flex-direction: column;
+    border: 3px solid rgba(0, 0, 0, 0.6);
+    border-radius: 8px;
+    padding: 5px 0;
+    &.-left {
+      animation: slideRightToLeftWithFade 0.5s;
+      &:before {
+        @extend %step-arrow-shadow;
+        top: 6px;
+        left: -$step-arrow-shadow-size;
+      }
+      &:after {
+        @extend %step-arrow;
+        top: 10px;
+        left: -$step-arrow-size;
+      }
+    }
+    &.-right {
+      animation: slideLeftToRightWithFade 0.5s;
+      &:before {
+        @extend %step-arrow-shadow;
+        top: 6px;
+        right: -$step-arrow-shadow-size;
+        transform: rotate(180deg);
+      }
+      &:after {
+        @extend %step-arrow;
+        top: 10px;
+        right: -$step-arrow-size;
+        transform: rotate(180deg);
+      }
+    }
+    > .closebutton {
+      align-self: flex-end;
+      padding: 0 5px 5px;
+      line-height: 0;
+    }
+    > .content {
+      width: 100%;
+      padding: 0px 20px;
+      margin-bottom: 0;
+      display: flex;
+      > .number {
+        display: flex;
+        width: 40px;
+        height: 40px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: $success-color;
+        color: #fff;
+        margin-right: 10px;
+        font-weight: bold;
+        font-size: 20px;
+        line-height: 0;
+      }
+      > .about {
+        flex: 1;
+        margin-bottom: 10px;
+        > h3 {
+          font-size: 16px;
+          font-weight: bold;
+        }
+        > .description {
+          font-size: 14px;
+          line-height: 18px;
+          strong {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    > .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      padding: 5px 10px 10px;
+    }
+  }
+}

package/lib/avatar/avatar.spec.js

@@ -103,18 +103,29 @@ describe('Avatar', function () {
     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 _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
       label: "B",
       width: "56px",
       height: "56px"
     })),
-        container = _render9.container;
+        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, _render10, container;
+    var mockAvatar, _render11, container;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -135,7 +146,7 @@ describe('Avatar', function () {
               text: "Itemlist sem \xEDcone Disabled",
               disabled: true
             })));
-            _render10 = (0, _react2.render)(mockAvatar), container = _render10.container;
+            _render11 = (0, _react2.render)(mockAvatar), container = _render11.container;
 
             _react2.fireEvent.click(container.firstChild);
 
@@ -158,11 +169,11 @@ describe('Avatar', function () {
   it('should callback function onClick', function () {
     var mockOnClick = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_["default"], {
       label: "B",
       onClick: mockOnClick
     })),
-        container = _render11.container;
+        container = _render12.container;
 
     _react2.fireEvent.click(container.firstChild);
 

package/lib/avatar/index.js

@@ -85,7 +85,7 @@ 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),

package/lib/buttons/DefaultButton.js

@@ -37,7 +37,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -69,7 +69,9 @@ var DefaultButton = function DefaultButton(props) {
       boxShadow = props.boxShadow,
       transparent = props.transparent,
       round = props.round,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      _onBlur = props.onBlur,
+      skeletonize = props.skeletonize;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -147,8 +149,11 @@ var DefaultButton = function DefaultButton(props) {
       if (dropdown) showDropdown();
       if (_onClick && toggleable) setActiveButton(!activeButton);
     },
+    onBlur: function onBlur(e) {
+      if (_onBlur) _onBlur(e);
+    },
     disabled: shouldDisable(),
-    className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : ''),
+    className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : '', " ").concat(skeletonize ? '-skeletonized' : ''),
     ref: function ref(r) {
       if (targetRef) targetRef(r);
       setButtonRef(r);
@@ -176,6 +181,7 @@ DefaultButton.propTypes = {
   boxShadow: _propTypes["default"].bool,
   icon: _propTypes["default"].instanceOf(Object),
   onClick: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
   targetRef: _propTypes["default"].func,
   tabIndex: _propTypes["default"].string,
   dropdown: _propTypes["default"].bool,
@@ -191,7 +197,8 @@ DefaultButton.propTypes = {
   id: _propTypes["default"].string,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
   className: _propTypes["default"].string,
-  transparent: _propTypes["default"].bool
+  transparent: _propTypes["default"].bool,
+  skeletonize: _propTypes["default"].bool
 };
 DefaultButton.defaultProps = {
   label: '',
@@ -211,6 +218,7 @@ DefaultButton.defaultProps = {
   icon: null,
   content: null,
   onClick: null,
+  onBlur: null,
   targetRef: undefined,
   tabIndex: undefined,
   isLoading: false,
@@ -222,7 +230,8 @@ DefaultButton.defaultProps = {
   id: undefined,
   permissionAttr: undefined,
   className: undefined,
-  transparent: false
+  transparent: false,
+  skeletonize: false
 };
 
 var _default = (0, _withDropdown["default"])((0, _withTooltip["default"])(DefaultButton));