linear-react-components-ui 0.4.76-rc.7 → 0.4.76

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/README.md

@@ -53,22 +53,34 @@ Caso queira gerar uma build com versão beta e fazer a publicação no npm rode
 
   `npm run publish:npm --tag beta`
 
-no local onde esta denominado o campo versão, você deverá colocar a nova versão do pacote, um exemplo: 0.4.75 ou para o caso de uma 
-versão beta siga o seguinte exemplo: 0.4.75-beta.1, ficando da seguinte maneira:
+Caso queira gerar uma build com versão candidata e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag rc`
+
+no local onde esta denominado o campo versão, você deverá colocar a nova versão do pacote, alguns exemplos para o campo versão:
+ - release: 0.4.75
+ - beta: 0.4.75-beta.0
+ - candidata: 0.4.75-rc.0
+ 
+ficando da seguinte maneira:
 
   `npm version 0.4.75`
 
 
 ### Publicar versão de demonstração no Heroku
 
+  Pré-requesistos
+   - Ter um conta no heroku
+   - Ser um colaborador do projeto no Heroku
+   - Ter o heroku cli instalado: https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli 
     
-  No diretorio da aplicação clonar 
-  `heroku git:clone -a linear-react-comp-demo`
- 
-  Renomear a pastar  `linear-react-comp-demo` para `demo`
-  
   Fazer login no Heroku
  `heroku login`
+
+  No diretorio da aplicação clonar 
+  `heroku git:clone -a linear-react-comp-demo demo`
  
   Executar o comando
   `npm run deploy:heroku`

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,17 @@ $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;
+  transition: none;
+
+  > svg {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

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,39 @@
   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%);
+  }
+}
+
+%skeleton-transparency {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgb(255,255,255);
+  background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
+    rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 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/dropdown.scss

@@ -129,6 +129,9 @@
         justify-content: center;
         flex: 1;
         width: 100%;
+        text-decoration: none;
+        color: #666666;
+        text-align: center;
       }
       &.iconcontainer {
         padding-bottom: 10px;

package/lib/assets/styles/effects.scss

@@ -731,3 +731,23 @@
     left: 100%;
   }
 }
+
+@keyframes slideRightToLeftWithFade {
+  from {
+    opacity: 0;
+    transform: translateX(2%);
+  } to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideLeftToRightWithFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2%);
+  } to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

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/list.scss

@@ -20,6 +20,14 @@ $item-height: 48px;
       line-height: 40px!important;
     }
   }
+  > .skeleton-transparency {
+    position: relative;
+    &::after {
+      @extend %skeleton-transparency;
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 .item-container {

package/lib/assets/styles/panel.scss

@@ -6,6 +6,8 @@
   height: 100%;
   margin-bottom: 20px;
   border: solid 1px $component-border-color;
+  display: flex;
+  flex-direction: column;
   &.panel-shadow {
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   }
@@ -47,7 +49,8 @@
     }
   }
   > .panel-content {
-    height: auto;
+    flex: 1;
+    overflow: auto;
     padding: 15px;
   }
 }

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/select.scss

@@ -48,7 +48,7 @@
   }
 }
 
-.select-component > .dropdown {
+.dropdown-component > .select-dropdown {
   animation: 0.5s ease-in 0s 1 slideDown;
   background-color: #FFF;
   border: $component-border-color;
@@ -58,17 +58,17 @@
   height: auto;
   overflow-y: auto;
   overflow-x: hidden;
-  position: absolute;
   margin-top: 2px;
-  z-index: 99999999999;
   > .filtercontainer {
     display: grid;
     grid-template-columns: 1fr 20px;
+    align-items: center;
     border: 1px solid $component-border-color;
     margin: 4px;
   }
   > .filtercontainer > .filterinput {
     border: 0;
+    width: 100%;
     font-size: 13px;
     text-indent: 4px;
     padding: 10px 5px;

package/lib/assets/styles/sidenav.scss

@@ -12,6 +12,10 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   overflow: hidden;
   background-color: transparent;
   border: 1px solid #eee;
+  &.-blocked {
+    opacity: 0.4;
+    pointer-events: none;
+  }
   > .expandedmenu,
   > .collapsedmenu {
     height: auto;
@@ -26,10 +30,16 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
         align-items: center;
         justify-content: center;
         padding-left: 0px;
+        > .searchmenubutton {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
       &.-customsidenavitem:hover {
         background-color: white;
-        cursor: text;
       }
       &.-disabled {
         @extend %component-disabled;

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;
+    }
+  }
+}