linear-react-components-ui 0.4.76-beta.12 → 0.4.76-beta.17

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/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.16.0

package/.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "files.exclude": {
-    "__error": "Not found",
-    "config": false,
+    "config": true,
     "coverage": true,
     "node_modules": true,
     "scripts": true,

package/README.md

@@ -36,6 +36,39 @@ Compilar para publicação:
 
 `npm run demo:prod`
 
+### Publicação da lib no NPM
+A princípio precisaremos fazer o login no npm para isso rode o comando abaixo:
+
+  `npm login`
+
+Para gerar uma build nova e fazer a publicação no npm rode os comandos a seguir:
+
+  `npm version <versão>`
+
+  `npm run publish:npm`
+
+Caso queira gerar uma build com versão beta e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag beta`
+
+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
 
     

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

@@ -76,12 +76,12 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenulink {
+    > .floatmenuitem {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenulink .-items {
+    > .floatmenuitem .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;
@@ -106,6 +106,32 @@
       transition: all 0.2s ease-in-out;
       &:hover {
         background: $default-hover-color;
+
+        > .floatmenudropdown {
+          visibility: visible;
+          pointer-events: initial;
+          opacity: 1;
+        }
+      }
+      > .floatmenudropdown {
+        position: absolute;
+        padding: 0;
+        top: 5px;
+        right: 5px;
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+      > .floatmenulink {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        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

@@ -2,9 +2,11 @@
 @keyframes slideInFromTop {
   0% {
     transform: translateY(-60%);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
   30% {
     transform: translateY(0);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -719,3 +721,13 @@
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
+
+// SlideWithPosition
+@keyframes slideWithPositionFromLeft {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 100%;
+  }
+}

package/lib/assets/styles/floatMenu.scss

@@ -15,4 +15,3 @@
     }
   }
 }
-

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

@@ -0,0 +1,105 @@
+@import "commons.scss";
+@import "effects.scss";
+.multiSelect-component {
+  width: 100%;
+  display: block;
+  .selectwrapper {
+    height: auto;
+
+    > .multiselect {
+      flex-wrap: wrap;
+      position: relative;
+      > .textinput {
+        order: 1;
+        display: inline-block;
+      }
+      > .selecteditem {
+        font-size: 14px;
+        position: absolute;
+        top: 50%;
+        left: 10px;
+        transform: translateY(-50%);
+      }
+    }
+
+    > .actionbutton {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin: 0 3px;
+      padding: 0 3px;
+
+      > svg {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.multiSelect-component > .dropdown {
+  animation: 0.5s ease-in 0s 1 slideDown;
+  background-color: #fff;
+  border: $component-border-color;
+  @extend %component-menu-dropdown;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  z-index: 9999;
+  > .filtercontainer {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    border: 1px solid $component-border-color;
+    margin: 4px;
+    > .filterinput {
+      border: 0;
+      font-size: 13px;
+      text-indent: 4px;
+      padding: 10px 5px;
+    }
+    > .filtericon {
+      position: absolute;
+      right: 5px;
+      top: 10px;
+    }
+  }
+  > .listcontainer > .item {
+    margin: 0;
+    padding: 6px 10px;
+    display: flex;
+    cursor: pointer;
+    justify-content: stretch;
+    border-bottom: solid 1px #e1e1e1;
+    &:last-child {
+      border-bottom: none;
+    }
+    &:hover {
+      background-color: $default-hover-color;
+    }
+    &.-selected {
+      background-color: $default-hover-color;
+    }
+    .menubutton {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      > .checkboxicon {
+        margin-right: 5px;
+      }
+      > .label {
+        flex-grow: 1;
+      }
+      > .menuicon {
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/lib/assets/styles/panel.scss

@@ -48,7 +48,6 @@
   }
   > .panel-content {
     height: auto;
-    overflow: auto;
     padding: 15px;
   }
 }