linear-react-components-ui 0.4.76-beta.10 → 0.4.76-beta.14

package/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# . "$(dirname "$0")/_/husky.sh"
 
-npm run check:js
+# npm run check:js

package/lib/assets/styles/button.scss

@@ -275,16 +275,17 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   }
 }
 
-.btn-container, .toolbar-group {
+.btn-container,
+.toolbar-group {
   width: auto;
-  > .button-component { 
+  > .button-component {
     margin-right: 10px;
     line-height: 15px;
   }
-  > .button-component:last-child { 
+  > .button-component:last-child {
     margin-right: 1px;
   }
-}  
+}
 
 .button-component {
   &.-primary .dropdown-icon,
@@ -298,15 +299,12 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     margin-left: 7px;
     margin-right: -10px;
   }
-  // height: 100%;
   &.icon-right .icon-component {
     float: right;
-    // line-height: 1.5px;
     margin: 1px 0 0 6px;
   }
   &.icon-left .icon-component {
     float: left;
-    // line-height: 1.5px;
     margin: 1px 6px 0 0;
   }
   &.icon-top .icon-component {
@@ -314,11 +312,8 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     width: 100%;
   }
   &.icon-center .icon-component {
-    // line-height: 1.5px;
     text-align: center;
     vertical-align: center;
-    // align-items: inherit;
-    // justify-content: inherit;
   }
   &.icon-bottom .icon-component {
     position: relative;
@@ -329,3 +324,15 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     vertical-align: middle;
   }
 }
+
+.button-component.-skeletonized {
+  @extend %skeleton-component;
+  color: transparent !important;
+  text-shadow: none;
+  box-shadow: none;
+  border-color: transparent !important;
+
+  > svg {
+    display: none;
+  }
+}

package/lib/assets/styles/checkbox.scss

@@ -1,79 +1,101 @@
 @import "colors.scss";
 @import "commons.scss";
 @import "effects.scss";
+
 .checkbox-component {
-  position: absolute;
-  z-index: 0;
-  left: -9999999999999px;
-  &:disabled + span {
-    @extend %component-disabled;
-  }
-  &:disabled + span + .description {
-    @extend %component-menu-disabled;
-  }
-  &:checked + span:before {
-    content: "✓";
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: static;
-    margin-top: -5px;
-    font-weight: 600;
-    height: 28px;
-  }
-  + span {
-    display: inline-block;
-    position: relative;
-    top: -1px;
-    width: 18px;
-    height: 18px;
-    margin: -1px 0px 0 0;
-    margin-right: 4px;
-    vertical-align: middle;
-    background: $font-color-second left top no-repeat;
-    border: 1px solid $component-border-color;
-    cursor: pointer;
-    &:hover {
-      animation-duration: .5s;
-      animation-name: blink-effect;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
+  > .inputcontent {
+    > .input {
+      position: absolute;
+      z-index: 0;
+      left: -9999999999999px;
+      &:disabled + span {
+        @extend %component-disabled;
+      }
+      &:disabled + span + .description {
+        @extend %component-menu-disabled;
+      }
+      &:checked + span:before {
+        content: "✓";
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        margin-top: -5px;
+        font-weight: 600;
+        height: 28px;
+      }
+      + span {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        width: 18px;
+        height: 18px;
+        margin: -1px 0px 0 0;
+        margin-right: 4px;
+        vertical-align: middle;
+        background: $font-color-second left top no-repeat;
+        border: 1px solid $component-border-color;
+        cursor: pointer;
+        &:hover {
+          animation-duration: .5s;
+          animation-name: blink-effect;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+        }
+      }
+      &:checked + span {
+        background-color: $check-background;
+        color: $font-color-second;
+        animation-duration: .2s;
+        animation-name: select-checkbox;
+        animation-iteration-count: 1;
+        animation-direction: Normal;
+        box-shadow: inset 0 0 0 1px $checked, 
+        inset 0 0 0 0 #FFFFFF, 
+        inset 0 0 0 16px $checked-effect;
+      }
+      &:focus + span {
+        border: 2px solid $component-selected-color;
+      }
+      &:disabled:checked + span:before {
+        @extend %component-menu-disabled;
+        border: 1px solid;
+        margin-top: -1px;
+        width: 18px;
+        height: 18px;
+        background-color: rgb(229, 229, 229);
+        margin-left: -1px;
+      }
+    }
+    > .description {
+      @extend %input-label;
+      margin-left: 2px;
+      cursor: pointer ;
     }
   }
-  &:checked + span {
-    background-color: $check-background;
-    color: $font-color-second;
-    animation-duration: .2s;
-    animation-name: select-checkbox;
-    animation-iteration-count: 1;
-    animation-direction: Normal;
-    box-shadow: inset 0 0 0 1px $checked, 
-    inset 0 0 0 0 #FFFFFF, 
-    inset 0 0 0 16px $checked-effect;
-  }
-  &:focus + span {
-    border: 2px solid $component-selected-color;
+
+  > .hint {
+    @extend %hint-text;
+    margin-top: 0;
+    padding-left: 22px;
   }
-  &:disabled:checked + span:before {
-    @extend %component-menu-disabled;
-    border: 1px solid;
-    margin-top: -1px;
-    width: 18px;
-    height: 18px;
-    background-color: rgb(229, 229, 229);
-    margin-left: -1px;
+  
+  &.-skeletonized {
+    > .inputcontent {
+      .input {
+        + span {
+          @extend %skeleton-component;
+          border-color: transparent;
+        }
+        &:checked + span,
+        &:disabled:checked + span:before {
+          @extend %skeleton-component;
+        }
+      }
+    }
+    > .inputcontent > .description,
+    > .hint > span {
+      @extend %skeleton-component;
+    }
   }
 }
-
-.checkbox-hint {
-  @extend %hint-text;
-  margin-top: 0;
-  padding-left: 22px;
-}
-
-.checkbox-description {
-  @extend %input-label;
-  margin-left: 2px;
-  cursor: pointer ;
-}
-

package/lib/assets/styles/commons.scss

@@ -99,3 +99,29 @@
   font-size: 17px;
   border: none;
 }
+
+%skeleton-component {
+  pointer-events: none;
+  user-select: none;
+  color: transparent !important;
+  text-shadow: none !important;
+  box-shadow: none;
+  background-image: linear-gradient(to right, #e7edf1 0%, #f8f8f8 50%, #e7edf1 100%);
+  background-size: 400% 400%;
+  background-repeat: initial;
+  animation: shimmer 1.2s ease-in-out infinite;
+
+  &.-white {
+    background-image: linear-gradient(to right, #fff 0%, #e7edf1 50%, #fff 100%);
+  }
+}
+
+/* Efeito utilizado para o componente Skeleton */
+@keyframes shimmer {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: -135% 0%;
+  }
+}

package/lib/assets/styles/drawers.scss

@@ -1,4 +1,5 @@
 @import "colors.scss";
+@import "commons.scss";
 @import "effects.scss";
 .drawer-component {
   position: fixed;
@@ -58,18 +59,17 @@
     display: flex;
     flex-direction: column;
     > .drawerheader {
-      align-items: center;
       background: #ffffff;
       color: #252424;
       font-size: 20px;
       font-weight: 600;
       margin: 10px 0;
-      display: inline-block;
+      display: flex;
       width: 100%;
       .left {
+        flex: 1;
         margin-right: 10px;
         margin-right: 10px;
-        float: left;
         > .title-subtitle {
           display: flex;
           width: 100%;
@@ -86,8 +86,9 @@
         }
         > .drawer-subtitle {
           font-weight: 500;
-          display: block;
-          width: 100%;
+          display: initial;
+          max-width: 100%;
+          overflow-wrap: break-word;
           font-size: 14px;
         }
       }
@@ -96,7 +97,6 @@
         &.modal-title {
           color: #4e4c4c;
           font-weight: 600;
-          float: right;
         }
       }
       .closebutton {
@@ -116,6 +116,22 @@
       width: 100%;
       padding-bottom: 80px
     }
+
+    &.-skeletonized {
+      > .drawerheader {
+        .title-subtitle > .drawer-title,
+        .title-subtitle > .icon-header {
+          @extend %skeleton-component;
+          
+          > svg {
+            fill: transparent;
+          }
+        }
+        .drawer-subtitle {
+          @extend %skeleton-component;
+        }
+      }
+    }
   }
 }
 

package/lib/assets/styles/gridlayout.scss

@@ -22,7 +22,8 @@ html {
 
 .grid-container {
   margin-bottom: 5px;
-  &.-withinput {
+  &.-withinput,
+  &.-withskeleton {
     margin-bottom: 10px;
   }
 }

package/lib/assets/styles/input.scss

@@ -111,6 +111,27 @@
   }
 }
 
+.input-base-component.-skeletonized {
+  > .labelcontainer > .label,
+  > .hint {
+    @extend %skeleton-component;
+    color: transparent;
+  }
+  > .inputwrapper {
+    border: 1px solid transparent;
+    > .sidebuttons {
+      display: none;
+    }
+    > .inputcontent > .textinput {
+      @extend %skeleton-component;
+      content-visibility: hidden;
+      &.-readonly {
+        @extend %skeleton-component;
+      }
+    }
+  }
+}
+
 .textarea-container {
   height: auto;
 }

package/lib/assets/styles/label.scss

@@ -96,6 +96,15 @@ $shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
   }
 }
 
+.label-component.-skeletonized {
+  @extend %skeleton-component;
+  border-color: transparent;
+
+  > svg {
+    fill: transparent;
+  }
+}
+
 .lbl-container {
   width: auto;
   .label-component {
@@ -105,4 +114,3 @@ $shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
     margin-right: 2px;
   }
 }
-

package/lib/assets/styles/radio.scss

@@ -89,3 +89,22 @@ $radio-button-ripple-size: 15px;
   -webkit-transform: scale(1);
   transform: scale(1);
 }
+
+.radio-button.-skeletonized {
+  > .radio-component:not(:checked) +.description,
+  > .radio-component:checked +.description {
+    cursor: initial;
+  }
+
+  > .radio-component:checked + .description:before,
+  > .radio-component:checked +.description:after,
+  > .radio-component:not(:checked) + .description:before,
+  > .radio-component:not(:checked) +.description:after {
+    @extend %skeleton-component;
+    border-color: transparent;
+  }
+
+  > .description > span {
+    @extend %skeleton-component;
+  }
+}

package/lib/assets/styles/skeleton.scss

@@ -0,0 +1,48 @@
+@import "commons.scss";
+@import "colors.scss";
+@import "effects.scss";
+
+.skeletoncontainer-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  &.-row {
+    flex-direction: row;
+  }
+}
+
+.skeleton-component {
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  margin-bottom: 10px;
+  @extend %skeleton-component;
+
+  &.-round {
+    flex-grow: 0;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: 50%;
+
+    &.-mini {
+      width: 36px;
+      height: 36px;
+    }
+    &.-small {
+      width: 48px;
+      height: 48px;
+    }
+    &.-medium {
+      width: 64px;
+      height: 64px;
+    }
+    &.-large {
+      width: 96px;
+      height: 96px;
+    }
+  }
+}

package/lib/assets/styles/table.scss

@@ -1,11 +1,6 @@
 @import "colors.scss";
 @import "effects.scss";
 
-.table-component,
-.innertable {
-  contain: strict;
-}
-
 .table-component {
   width: 100%;
   max-width: 100%;
@@ -123,3 +118,9 @@
     }
   }
 }
+
+.table-component.-skeletonized {
+  > .bodycontainer {
+    overflow: hidden;
+  }
+}

package/lib/assets/styles/tabs.scss

@@ -48,7 +48,6 @@
     margin-right: 1px;
     padding: 0;
     width: auto;
-    min-width: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -95,7 +94,8 @@
   > .menucontainer {
     display: flex;
     flex-wrap: nowrap;
-    max-width: 100%;
+    width: 100%;
+    min-height: 35px;
     overflow: hidden;
     @extend %tab-component-menus;
     > .dropdownbutton {
@@ -121,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;
@@ -151,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 {
@@ -177,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 {

package/lib/buttons/DefaultButton.js

@@ -70,7 +70,8 @@ var DefaultButton = function DefaultButton(props) {
       transparent = props.transparent,
       round = props.round,
       permissionAttr = props.permissionAttr,
-      _onBlur = props.onBlur;
+      _onBlur = props.onBlur,
+      skeletonize = props.skeletonize;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -152,7 +153,7 @@ var DefaultButton = function DefaultButton(props) {
       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);
@@ -196,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: '',
@@ -228,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));