@policystudio/policy-studio-ui-vue 1.0.24 → 1.0.25

package/dist/css/psui_styles.css

@@ -16081,6 +16081,252 @@ html {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.transition-default {
+  transition: cubic-bezier(.17,.67,.83,.67) 250ms;
+}
+
+.psui-el-dialog {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-right: 0.75rem;
+  padding-left: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-radius: 0.375rem;
+}
+
+.psui-el-dialog-wrapper {
+    display: flex;
+    flex-grow: 1
+  }
+
+.psui-el-dialog-icon {
+    display: flex;
+    margin-right: 0.5rem;
+    vertical-align: top;
+  }
+
+.psui-el-dialog-close {
+    margin-left: auto;
+    display: inline-block;
+  }
+
+.psui-el-dialog-close:focus{
+      outline: 2px solid transparent;
+      outline-offset: 2px
+    }
+
+.psui-el-dialog-close i {
+      vertical-align: middle;
+      font-size: 18px;
+    }
+
+.psui-el-dialog.layout-vertical {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    display: flex;
+    align-items: flex-start;
+  }
+
+.psui-el-dialog.layout-vertical .psui-el-dialog-wrapper {
+      flex-direction: column;
+      font-size: 14px;
+      line-height: 130%
+    }
+
+.psui-el-dialog.layout-vertical i {
+      vertical-align: top
+    }
+
+.psui-el-dialog.layout-vertical .psui-el-dialog-action {
+      padding-top: 0.5rem
+    }
+
+.psui-el-dialog.layout-horizontal .psui-el-dialog-close {
+      margin-left: 0.75rem
+    }
+
+.psui-el-dialog.layout-horizontal .psui-el-dialog-default {
+      margin-right: auto
+    }
+
+.psui-el-dialog.layout-horizontal .psui-el-dialog-action {
+      margin-left: 0.75rem
+    }
+
+.psui-el-dialog.layout-horizontal .psui-el-dialog-wrapper {
+      font-size: 14px;
+      line-height: 130%;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem
+    }
+
+.psui-el-dialog.theme-informative {
+    --bg-opacity: 1;
+    background-color: #E0EFF6;
+    background-color: rgba(224, 239, 246, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #318FAC;
+    color: rgba(49, 143, 172, var(--text-opacity));
+  }
+
+.psui-el-dialog.theme-success {
+    --bg-opacity: 1;
+    background-color: #DEF8E8;
+    background-color: rgba(222, 248, 232, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #44A06A;
+    color: rgba(68, 160, 106, var(--text-opacity));
+  }
+
+.psui-el-dialog.theme-alert {
+    --bg-opacity: 1;
+    background-color: #FDF3E3;
+    background-color: rgba(253, 243, 227, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #B87305;
+    color: rgba(184, 115, 5, var(--text-opacity));
+  }
+
+.psui-el-tab-header {
+  display: flex;
+  /* 	Layout Standard  */
+  /* ----------------------------------------- 	Layout Standard */
+  /* Layout Underline */
+  /* ----------------------------------------- Layout Underline */
+  /* Layout Folder */
+  /* ----------------------------------------- Layout Folder */
+}
+
+.psui-el-tab-header button {
+    transition: cubic-bezier(.17,.67,.83,.67) 250ms;
+    font-size: 14px;
+    line-height: 130%;
+  }
+
+.psui-el-tab-header.status-disabled .psui-el-input-wrapper {
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      --border-opacity: 1;
+      border-color: #E6ECF2;
+      border-color: rgba(230, 236, 242, var(--border-opacity))
+    }
+
+/* ----------------------------------------- */
+
+.psui-el-tab-header.layout-standard {
+    border-radius: 0.375rem;
+  }
+
+.psui-el-tab-header.layout-standard button {
+      --bg-opacity: 1;
+      background-color: #F3F6F9;
+      background-color: rgba(243, 246, 249, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #515E6A;
+      color: rgba(81, 94, 106, var(--text-opacity));
+      padding: 6px 12px;
+    }
+
+.psui-el-tab-header.layout-standard button:not(:last-child) {
+        margin-right: 1px;
+      }
+
+.psui-el-tab-header.layout-standard button:first-child {
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+      }
+
+.psui-el-tab-header.layout-standard button:last-child {
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+      }
+
+.psui-el-tab-header.layout-standard button:hover {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
+.psui-el-tab-header.layout-standard button.status-active {
+        color: #ffffff;
+        --bg-opacity: 1;
+        background-color: #318FAC;
+        background-color: rgba(49, 143, 172, var(--bg-opacity));
+        font-weight: 700;
+      }
+
+/* ----------------------------------------- */
+
+.psui-el-tab-header.layout-underline {
+    border-bottom-width: 1px;
+    --border-opacity: 1;
+    border-color: #E6ECF2;
+    border-color: rgba(230, 236, 242, var(--border-opacity));
+  }
+
+.psui-el-tab-header.layout-underline button {
+      --text-opacity: 1;
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
+      font-weight: 700;
+      border-bottom: 3px solid transparent;
+      padding: 11.5px 0;
+    }
+
+.psui-el-tab-header.layout-underline button:not(:last-child) {
+        margin-right: 20px;
+      }
+
+.psui-el-tab-header.layout-underline button:hover {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
+.psui-el-tab-header.layout-underline button.status-active {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+        --border-opacity: 1;
+        border-color: #318FAC;
+        border-color: rgba(49, 143, 172, var(--border-opacity));
+      }
+
+/* ----------------------------------------- */
+
+.psui-el-tab-header.layout-folder button {
+      --bg-opacity: 1;
+      background-color: #F3F6F9;
+      background-color: rgba(243, 246, 249, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
+      padding: 9px 12px;
+    }
+
+.psui-el-tab-header.layout-folder button:not(:last-child) {
+        margin-right: 4px;
+      }
+
+.psui-el-tab-header.layout-folder button:hover {
+        --text-opacity: 1;
+        color: #515E6A;
+        color: rgba(81, 94, 106, var(--text-opacity));
+      }
+
+.psui-el-tab-header.layout-folder button.status-active {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+        font-weight: 700;
+        background-color: #ffffff;
+      }
+
 .psui-el-accordion-item {
     border-bottom: 1px solid #e6ecf2;
   }
@@ -16091,6 +16337,9 @@ html {
       transition-property: all;
       justify-content: space-between;
       transition: cubic-bezier(.17,.67,.83,.67) 250ms;
+      --text-opacity: 1;
+      color: #28323B;
+      color: rgba(40, 50, 59, var(--text-opacity));
       padding-top: 16px;
       padding-bottom: 16px;
     }
@@ -16133,7 +16382,19 @@ html {
         font-weight: 700;
       }
 
-.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-icon, .psui-el-accordion .psui-el-accordion-item-header:hover .psui-el-accordion-item-icon {
+.psui-el-accordion.layout-medium .psui-el-accordion-item-icon {
+        --text-opacity: 1;
+        color: #515E6A;
+        color: rgba(81, 94, 106, var(--text-opacity))
+      }
+
+.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header, .psui-el-accordion .psui-el-accordion-item-header:hover {
+      --text-opacity: 1;
+      color: #318FAC;
+      color: rgba(49, 143, 172, var(--text-opacity));
+    }
+
+.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-icon, .psui-el-accordion .psui-el-accordion-item-header:hover .psui-el-accordion-item-icon {
         --text-opacity: 1;
         color: #318FAC;
         color: rgba(49, 143, 172, var(--text-opacity));
@@ -16305,11 +16566,11 @@ html {
     outline: none;
   }
 
-.psui-el-button.right {
+.psui-el-button.icon-right {
     flex-direction: row-reverse;
   }
 
-.psui-el-button.big {
+.psui-el-button.size-big {
     display: flex;
     align-items: center;
     align-content: center;
@@ -16317,17 +16578,17 @@ html {
     font-size: 16px;
   }
 
-.psui-el-button.big.left i {
+.psui-el-button.size-big.icon-left i {
       font-size: 24px;
       margin-right: 8px;
     }
 
-.psui-el-button.big.right i {
+.psui-el-button.size-big.icon-right i {
       font-size: 24px;
       margin-left: 8px;
     }
 
-.psui-el-button.medium {
+.psui-el-button.size-medium {
     display: flex;
     align-items: center;
     align-content: center;
@@ -16335,17 +16596,17 @@ html {
     font-size: 14px;
   }
 
-.psui-el-button.medium.left i {
+.psui-el-button.size-medium.icon-left i {
       font-size: 18px;
       margin-right: 4px;
     }
 
-.psui-el-button.medium.right i {
+.psui-el-button.size-medium.icon-right i {
       font-size: 18px;
       margin-left: 4px;
     }
 
-.psui-el-button.small {
+.psui-el-button.size-small {
     display: flex;
     align-items: center;
     align-content: center;
@@ -16353,7 +16614,7 @@ html {
     font-size: 14px;
   }
 
-.psui-el-button.small.active {
+.psui-el-button.size-small:focus {
       --bg-opacity: 1;
       background-color: #E0EFF6;
       background-color: rgba(224, 239, 246, var(--bg-opacity));
@@ -16363,7 +16624,7 @@ html {
       box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
     }
 
-.psui-el-button.small.hover.layout-onlytext {
+.psui-el-button.size-small.hover.layout-onlytext {
       --text-opacity: 1 !important;
       color: #318FAC !important;
       color: rgba(49, 143, 172, var(--text-opacity)) !important;
@@ -16372,12 +16633,12 @@ html {
       background-color: rgba(224, 239, 246, var(--bg-opacity)) !important;
     }
 
-.psui-el-button.small.left i {
+.psui-el-button.size-small.icon-left i {
         font-size: 18px;
         margin-right: 4px;
       }
 
-.psui-el-button.small.right i {
+.psui-el-button.size-small.icon-right i {
         font-size: 18px;
         margin-left: 4px;
       }
@@ -16396,7 +16657,7 @@ html {
       color: #ffffff;
     }
 
-.psui-el-button.layout-solid.active {
+.psui-el-button.layout-solid:focus {
       --bg-opacity: 1;
       background-color: #64B5CE;
       background-color: rgba(100, 181, 206, var(--bg-opacity));
@@ -16426,7 +16687,7 @@ html {
   }
 
 .psui-el-button.layout-outline.hover,
-            .psui-el-button.layout-outline.active {
+            .psui-el-button.layout-outline:focus {
       border-width: 1px;
       --border-opacity: 1;
       border-color: #318FAC;
@@ -16452,11 +16713,9 @@ html {
     color: rgba(49, 143, 172, var(--text-opacity));
   }
 
-.psui-el-button.layout-ghost.hover,
-            .psui-el-button.layout-ghost.active {
-      --bg-opacity: 1;
-      background-color: #ECF7FB;
-      background-color: rgba(236, 247, 251, var(--bg-opacity))
+.psui-el-button.layout-ghost.hover, 
+            .psui-el-button.layout-ghost:focus {
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
     }
 
 .psui-el-button.layout-ghost.disabled {
@@ -16489,10 +16748,6 @@ html {
       color: rgba(100, 181, 206, var(--text-opacity))
     }
 
-.transition-default {
-  transition: cubic-bezier(.17,.67,.83,.67) 250ms;
-}
-
 @media (min-width: 640px){
   .sm\:psui-container{
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -1,7 +1,9 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
+@import './components/PsTabHeader.scss';
 @import './components/PsAccordion.scss';
 @import './components/PsInput.scss';
 @import './components/PsButton.scss';
+@import './components//PsDialog.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsAccordion.scss

@@ -6,7 +6,7 @@
       border-bottom: 1px solid #e6ecf2;      
   
       &-header {
-        @apply psui-flex psui-cursor-pointer psui-transition-all psui-justify-between transition-default;
+        @apply psui-flex psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
         padding-top: 16px;
         padding-bottom: 16px;
         &:hover {
@@ -45,11 +45,15 @@
         &-title {
           @apply psui-text-small psui-font-bold;
         }
+        &-icon {
+          @apply psui-text-gray-60
+        }   
       }
     }
 
     .psui-el-accordion-item {
-      &.status-opened, &-header:hover {
+      &.status-opened .psui-el-accordion-item-header, &-header:hover {
+        @apply psui-text-blue-60;
         .psui-el-accordion-item-icon {
           @apply psui-text-blue-60;
         }

package/src/assets/scss/components/PsButton.scss

@@ -15,52 +15,52 @@
             outline: none;
         }
 
-        &.right {
+        &.icon-right {
             @apply psui-flex-row-reverse;
         }
         
-        &.big {
+        &.size-big {
             @apply psui-flex psui-items-center psui-content-center;
             padding: 9.5px 16px;
             font-size: 16px;
             
-            &.left i {
+            &.icon-left i {
                 font-size: 24px;
                 margin-right: 8px;
             }
 
-            &.right i {
+            &.icon-right i {
                     font-size: 24px;
                     margin-left: 8px;
             }
 
         }
 
-        &.medium {
+        &.size-medium {
 
             @apply psui-flex psui-items-center psui-content-center;
             padding: 7px 16px;
             font-size: 14px;
 
-            &.left i {
+            &.icon-left i {
                     font-size: 18px;
                     margin-right: 4px;
             }
 
-            &.right i {
+            &.icon-right i {
                     font-size: 18px;
                     margin-left: 4px;
             }
         }
 
-        &.small {
+        &.size-small {
 
             @apply psui-flex psui-items-center psui-content-center;
             padding: 4px 8px;
             font-size: 14px;
 
-            &.active {
-                @apply psui-bg-blue-20 psui-text-blue-60;
+            &:focus {
+                @apply psui-bg-blue-20 psui-text-blue-60;    
                 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
             }
 
@@ -68,14 +68,14 @@
                 @apply psui-text-blue-60 psui-bg-blue-20 !important;
             }
 
-            &.left {
+            &.icon-left {
                 i {
                     font-size: 18px;
                     margin-right: 4px;
                 }      
             }
 
-            &.right {
+            &.icon-right {
                 i {
                     font-size: 18px;
                     margin-left: 4px;
@@ -92,7 +92,7 @@
                 @apply psui-bg-blue-50 psui-text-white;
             }
 
-            &.active {
+            &:focus {
                 @apply psui-bg-blue-50 psui-text-white;
                 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
             }
@@ -108,7 +108,7 @@
             background: transparent;
 
             &.hover,
-            &.active {
+            &:focus {
                 @apply psui-border psui-border-blue-60
             }
 
@@ -120,10 +120,12 @@
         &.layout-ghost {
 
             @apply psui-bg-blue-20 psui-text-blue-60;
-            &.hover,
-            &.active {
-                @apply psui-bg-blue-10
+
+            &.hover, 
+            &:focus {
+                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
             }
+
             &.disabled {
                 @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
             }

package/src/assets/scss/components/PsDialog.scss

@@ -0,0 +1,71 @@
+@layer components {
+
+  .psui-el-dialog {
+    @apply psui-flex psui-justify-start psui-items-start psui-pr-3 psui-pl-2 psui-py-2 psui-rounded-md;
+
+    &-wrapper {
+      @apply psui-flex psui-flex-grow
+    }
+    &-icon {
+      @apply psui-flex psui-mr-2 psui-align-top; 
+      
+    }
+    &-close {
+      @apply psui-ml-auto psui-inline-block;
+
+      &:focus{
+        @apply psui-outline-none
+      }
+
+      i {
+        @apply psui-align-middle;
+        font-size: 18px;
+      }
+
+    }
+
+    &.layout-vertical {
+      @apply psui-pr-2 psui-pl-2 psui-flex psui-items-start;
+
+      .psui-el-dialog-wrapper {
+        @apply psui-flex-col psui-text-small
+      }
+
+      i {
+        @apply psui-align-top
+      }
+
+      .psui-el-dialog-action {
+        @apply psui-pt-2
+      }
+    }
+    
+    &.layout-horizontal {
+      .psui-el-dialog-close {
+        @apply psui-ml-3
+      }
+      .psui-el-dialog-default {
+        @apply psui-mr-auto
+      }
+      .psui-el-dialog-action {
+        @apply psui-ml-3
+      }
+      .psui-el-dialog-wrapper {
+        @apply psui-text-small psui-py-1
+      }
+    }
+        
+
+    &.theme-informative {
+      @apply psui-bg-blue-20 psui-text-blue-60;    
+    }
+
+    &.theme-success {
+      @apply psui-bg-green-10 psui-text-green-70;
+    }
+
+    &.theme-alert {
+      @apply psui-bg-yellow-10 psui-text-yellow-70;
+    }
+  }
+}

package/src/assets/scss/components/PsTabHeader.scss

@@ -0,0 +1,98 @@
+@layer components{
+
+  .psui-el-tab-header {
+    @apply psui-flex;
+
+    button {
+      @apply transition-default psui-text-small;
+    }
+
+    &.status-disabled {
+      .psui-el-input-wrapper {
+        @apply psui-bg-gray-20 psui-border-gray-20
+      }
+    }
+
+    /* 	Layout Standard  */
+    /* ----------------------------------------- */
+      &.layout-standard {
+        @apply psui-rounded-md;
+        
+        button {
+          @apply psui-bg-gray-10 psui-text-gray-60;
+          padding: 6px 12px;
+
+          &:not(:last-child) {
+            margin-right: 1px;
+          }
+
+          &:first-child {
+            @apply psui-rounded-l;
+          }
+
+          &:last-child {
+            @apply psui-rounded-r;
+          }
+
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
+          &.status-active {
+            @apply psui-text-white psui-bg-blue-60 psui-font-bold;
+          }
+        }
+      }
+    /* ----------------------------------------- 	Layout Standard */
+    
+    /* Layout Underline */
+    /* ----------------------------------------- */
+      &.layout-underline {
+        @apply psui-border-b psui-border-gray-20;
+
+        button {
+          @apply psui-text-gray-50 psui-font-bold;
+          border-bottom: 3px solid transparent;
+          padding: 11.5px 0;
+
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
+          &.status-active {
+            @apply psui-text-blue-60 psui-border-blue-60;
+          }
+        }
+      }
+    /* ----------------------------------------- Layout Underline */
+    
+    
+    /* Layout Folder */
+    /* ----------------------------------------- */
+      &.layout-folder {
+        button {
+          @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
+          padding: 9px 12px;
+
+          &:not(:last-child) {
+            margin-right: 4px;
+          }
+
+          &:hover {
+            @apply psui-text-gray-60;
+          }
+
+          &.status-active {
+            @apply psui-text-blue-60 psui-font-bold psui-bg-white;
+          }
+        }
+      }
+    /* ----------------------------------------- Layout Folder */
+    
+  }
+
+}

package/src/components/accordion/PsAccordion.vue

@@ -22,7 +22,6 @@ export default {
     layout: {
       type: String,
       default: 'medium',
-      required: true,
       validator: (value) => layouts.indexOf(value) !== -1,
     },
     'iconOpened': {

package/src/components/accordion/PsAccordionItem.vue

@@ -37,8 +37,8 @@ export default {
   computed: {
     getIcons() {
       return {
-        'iconOpened' : this.iconOpened ?? this.$parent.getIcons.iconOpened,
-        'iconClosed' : this.iconClosed ?? this.$parent.getIcons.iconClosed,
+        'iconOpened' : this.iconOpened ?? this.getParentVueComponentByName(this.$parent, 'PsAccordion').getIcons.iconOpened,
+        'iconClosed' : this.iconClosed ?? this.getParentVueComponentByName(this.$parent, 'PsAccordion').getIcons.iconClosed,
       }
     },
     getIcon() {
@@ -56,6 +56,13 @@ export default {
         this.localOpened = !this.localOpened
       }
     },
+    getParentVueComponentByName(comp, name) {
+      if (comp.$options.name === name) {
+        return comp
+      } else {
+        return this.getParentVueComponentByName(comp.$parent, name)
+      }
+    }
   }
 }
 </script>

package/src/components/badges-and-tags/PsChartLegend.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="psui-flex psui-p-2 psui-rounded">
     <div class="psui-flex psui-flex-shrink-0">
-      <div :class="dotClass" class="dot psui-rounded-full" :style="dotColor"></div>
+      <div class="dot psui-rounded-full" :style="dotColor"></div>
     </div>
     <div class="psui-flex-grow-1">
       <div class="psui-text-xsmall psui-text-gray-50 psui-font-bold psui-mb-1">{{ text }}</div>
@@ -19,16 +19,16 @@ export default {
       default: 'Climate Zone 10',
     },
     total: {
-      type: Number,
+      type: String,
       default: null,
     },
     percentage: {
-      type: Boolean,
-      default: false,
+      type: String,
+      default: null,
     },
     dotColor: {
-      type: String,
-      default: ''
+      type: Object,
+      default: null
     },
   },
 }

package/src/components/buttons/PsButton.vue

@@ -4,10 +4,10 @@
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave" 
       class='psui-el-button' 
-      :class="[getComponentClass, {'hover': isHover}, {'active': isActive}, {'disabled': disabled}]" 
+      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled}]" 
    >
-    <i v-if="icon"  :class='iconClass' class='material-icons-round'> {{icon}} </i>
-    <span v-if="label" >{{ label }} </span>
+    <i v-if="icon" :class='iconClass' class='material-icons-round'>{{icon}}</i>
+    <span v-if="label">{{ label }}</span>
   </button>
 </template>
 
@@ -19,7 +19,6 @@ export default {
     },
     layout: {
       type: String,
-      required: true,
       default: 'solid',
       validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
     },
@@ -28,13 +27,13 @@ export default {
     },
     iconPosition:{
       type: String,
-      default: 'right',
+      default: 'left',
       validator: (value) => ['left','right'].includes(value)
     },
     size: {
       type: String,
       default: 'big',
-      validator: (value) => ['small','medium','big'].includes(value)
+      validator: (value) => ['small','medium','big','custom'].includes(value)
     },
     disabled: {
       type: Boolean,
@@ -47,18 +46,20 @@ export default {
   data(){
     return {
       isHover: false,
-      isActive: false,
     }
   },
   computed: {
     getComponentClass(){
-        return `layout-${this.layout} ${this.size} ${this.iconPosition}`
+      if (this.size != 'custom') {
+        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
+      } else {
+        return `layout-${this.layout} icon-${this.iconPosition}`
+      }
     }
   },
   methods: {
     onClick() {
       if (this.disabled) return
-      this.isActive = true, 
       this.$emit('click')
     },
     onMouseEnter(){

package/src/components/notifications/PsDialog.vue

@@ -1,28 +1,33 @@
 <template>
-  <div class="psui-flex psui-justify-between psui-pr-3 psui-pl-2 psui-py-2 psui-rounded-md" :class="getDialogColor">   
-      <div class="psui-flex psui-justify-between psui-gap-2">
-        <i class="material-icons-round">info</i>
-        <div class="psui-flex psui-flex-col">
-          <p v-if="message" class="psui-w-full">{{ message }}</p>
-          <slot v-else name="content"></slot>
-          <slot v-if="layout === 'vertical'" name="action"></slot>
-        </div>
+  <div class="psui-el-dialog" :class="getComponentClass">   
+    <div class="psui-el-dialog-icon">
+      <i class="material-icons-round">{{icon}}</i>
+    </div>
+    <div class="psui-el-dialog-wrapper">      
+      <div class="psui-el-dialog-default">
+        <slot>
+          <p class="psui-el-dialog-message">{{ message }}</p>
+        </slot>
       </div>
-      <div class="psui-flex psui-gap-3">
-        <slot v-if="layout === 'horizontal'" name="action"></slot>
-        <button @click="onClose" class="psui-w-4 psui-h-4 focus:psui-outline-none hover:opacity-70 transition-default">
-          <i class="material-icons-round">close</i>
-        </button>
+      <div class="psui-el-dialog-action">
+        <slot name="action"></slot>
       </div>
+    </div>
+    <button
+      class="psui-el-dialog-close" 
+      v-if="hasClose" 
+      @click="onClose">
+      <i class="material-icons-round">close</i>
+    </button>
   </div>
 </template>
 
 <script>
-
+// Figma - 3. Inline Dialog https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=3694%3A55841
 export default {
   name: 'PsDialog',
   props: {
-    status: {
+    theme: {
       type: String,
       default: 'informative',
       validator: (value) => ['informative', 'success', 'alert'].includes(value)
@@ -35,18 +40,19 @@ export default {
       default: 'horizontal',
       validator: (value) => ['horizontal', 'vertical'].includes(value)
     },
-    cssClass:{
-      type: String
+    hasClose: {
+      type: Boolean,
+      default: true
+    },
+    icon: {
+      type: String,
+      default: 'info'
     }
   },
   emits:['close'],
   computed: {
-    getDialogColor() {
-      let dialogColor = ''
-        if(this.status === 'informative') dialogColor = `psui-bg-blue-20 psui-text-blue-60 ${this.cssClass}`
-        if(this.status === 'success') dialogColor = `psui-bg-green-10 psui-text-green-70 ${this.cssClass}`
-        if(this.status === 'alert') dialogColor = `psui-bg-yellow-10 psui-text-yellow-70 ${this.cssClass}`
-      return dialogColor
+    getComponentClass() {
+      return [`layout-${this.layout}`, `theme-${this.theme}`, `close-${this.hasClose ? 'on' : 'off'}` ]
     }
   },
   methods:{

package/src/components/tabs/PsTabHeader.vue

@@ -1,38 +1,36 @@
 <template>
-  <div :class="wrapperClasses" role="group">
+  <div 
+    class="psui-el-tab-header" 
+    :class="[getComponentClass, `layout-${layout}`]" 
+    role="group"
+  >
+		
     <button
       type="button" 
       v-for="item in getItems" 
       :key="item[keyValue]"
       @click="selectTab(item)"
-      :class="[
-        'transition-default',
-        classes, 
-        { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'psui-border-blue-60 psui-text-blue-60': getSelected === item[keyValue] && theme === 'underline' },
-        { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
-      ]"
+      :class="{ 'status-active': getSelected === item[keyValue] }"
     >
       {{ item[keyLabel] }}
     </button>
-  </div>
+
+	</div>
 </template>
 
 <script>
-export const themeOptions = ['standard', 'underline', 'folder']
 export default {
   name: 'PsTabHeader',
   props: {
-    theme: {
+    layout: {
       type: String,
       default: 'standard',
-      validator: (value) => themeOptions.indexOf(value) !== -1
+      validator: (value) => ['standard', 'underline', 'folder'].includes(value)
     },
     items: {
       type: Array,
       required: true
     },
-    selected: {},
     keyLabel: {
       type: String,
       default: 'label'
@@ -40,26 +38,20 @@ export default {
     keyValue: {
       type: String,
       default: 'value'
-    }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    selected: {},
   },
   computed: {
-    wrapperClasses() {
-      if (this.theme === 'underline') {
-        return 'psui-flex psui-space-x-4 psui-border-b psui-border-gray-20'
-      }
-      if (this.theme === 'folder') {
-        return 'psui-flex psui-space-x-1'
-      }
-      return 'psui-inline-flex psui-rounded-md psui-flex psui-gap-x-px'
-    },
-    classes() {
-      if (this.theme === 'underline') {
-        return 'psui-text-gray-60 psui-pb-3 psui-text-small psui-border-b-2 psui-border-transparent psui-font-bold hover:psui-text-blue-60'
-      }
-      if (this.theme === 'folder') {
-        return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'
+    getComponentClass() {
+      if (this.disabled) {
+        return 'status-disabled'  
+      } else {
+        return 'status-resting'
       }
-      return 'psui-bg-gray-10 psui-px-4 psui-py-2 psui-text-gray-60 hover:psui-text-blue-60 last:psui-rounded-r-lg first:psui-rounded-l-lg active:psui-text-white active:psui-bg-blue-60'
     },
     getIsObject() {
       return typeof this.selected === 'object'
@@ -86,7 +78,7 @@ export default {
       } else {
         return this.items
       }
-    }
+    },
   },
   methods: {
     selectTab(item) {
@@ -97,3 +89,5 @@ export default {
 
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsTabHeader.scss */</style>

package/src/index.js

@@ -18,7 +18,7 @@ import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
 import PsDraggable from './components/controls/PsDraggable.vue'
-// import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
+import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
 import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
 
 export default {
@@ -43,7 +43,7 @@ export default {
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
     Vue.component('PsDraggable', PsDraggable)
-    // Vue.component('PsCardInfos', PsCardInfos)
+    Vue.component('PsCardInfos', PsCardInfos)
     Vue.component('PsChartLegend', PsChartLegend)
   },
 }
@@ -68,6 +68,6 @@ export {
   PsRichTooltip,
   PsDialogTooltip,
   PsDraggable,
-  // PsCardInfos,
+  PsCardInfos,
   PsChartLegend,
 }

package/src/stories/Button.stories.js

@@ -75,7 +75,7 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
           <PsButton label='Text Only' layout='onlytext' size='medium'/>
-          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left'size='medium'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
       </div>
     </div>
     <p>Size: Small</p>
@@ -92,7 +92,17 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
           <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
           <PsButton label='Text Only' layout='onlytext' size='small'/>
-          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left'size='small'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
+    </div>
+    <p>Size: Custom</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+        <span style="text-align: center; color: green;">Only-Text Style</span>
+        <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
+        <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
+        <PsButton label='Text Only' layout='onlytext'/>
+        <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' />
       </div>
     </div>
   </div>

package/src/stories/Dialog.stories.js

@@ -5,21 +5,6 @@ export default {
   component: PsDialog,
 }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsDialog },
-  template: `
-          <PsDialog v-bind="$props">
-            <template v-slot:content>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-            </template>
-            <template v-slot:action>
-              <p style='font-weight: 700;'>Action</p>
-            </template>
-          </PsDialog>
-          `,
-})
-
 const TemplateExamples = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
@@ -32,10 +17,7 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="horizontal">
-                <template v-slot:content>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
+              <PsDialog theme="informative" layout="horizontal" message="teste">                
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -44,8 +26,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="horizontal">
-                <template v-slot:content>
+              <PsDialog theme="success" layout="horizontal" :hasClose="false">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -56,8 +38,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="horizontal">
-                <template v-slot:content>
+              <PsDialog theme="alert" layout="horizontal">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -72,8 +54,8 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="informative" layout="vertical">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -84,8 +66,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="success" layout="vertical" :hasClose="false">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -96,8 +78,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="alert" layout="vertical">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -115,7 +97,7 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="informative" layout="vertical" message="This component uses only the props message!">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -124,7 +106,7 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="success" layout="vertical" message="This component uses only the props message!" :hasClose="false">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -133,7 +115,7 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="alert" layout="vertical" message="This component uses only the props message!">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -146,22 +128,4 @@ const TemplateExamples = (args, { argTypes }) => ({
 
 export const Examples = TemplateExamples.bind({})
 
-export const Informative = Template.bind({})
-Informative.args = {
-  status: 'informative',
-  layout: 'vertical',
-  cssClass: 'psui-w-2/3'
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  status: 'success',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  status: 'alert',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
 

package/src/stories/TabHeader.stories.js

@@ -17,13 +17,13 @@ const Template = (args, { argTypes }) => ({
   template: `
   <div class="psui-bg-gray-20 psui-p-8">
     <PsTabHeader :selected.sync=selected v-bind="$props"/>
-    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
       <p v-for="i of 4">Tab Existing Buildings Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
       <p v-for="i of 4">Tab New Constructions Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
       <p v-for="i of 4">Other tab Selected</p>
     </div>
   </div>
@@ -32,21 +32,21 @@ const Template = (args, { argTypes }) => ({
 
 export const Standard = Template.bind({})
 Standard.args = {
-  theme: 'standard',
+  layout: 'standard',
   items: items,
   selected: item
 }
 
 export const Underline = Template.bind({})
 Underline.args = {
-  theme: 'underline',
+  layout: 'underline',
   items: items,
   selected: item
 }
 
 export const Folder = Template.bind({})
 Folder.args = {
-  theme: 'folder',
+  layout: 'folder',
   items: items,
   selected: item
 }