@policystudio/policy-studio-ui-vue 1.0.29 → 1.0.32

package/src/assets/scss/components/PsInlineSelector.scss

@@ -1,11 +1,22 @@
 @layer components {
     .psui-el-inline-selector {
-        @apply psui-w-auto psui-max-w-full psui-text-h4 psui-overflow-x-hidden psui-relative psui-flex-shrink-0 psui-text-blue-60;
+        @apply psui-w-auto psui-max-w-full psui-text-h4 psui-relative psui-flex-shrink-0 psui-text-blue-60 psui-box-border;
+
+        ::-webkit-scrollbar {
+            @apply psui-bg-gray-30;
+            display: block;
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            @apply psui-bg-blue-70 psui-rounded;
+        }
 
         input {
             @apply psui-border-b psui-border-dashed psui-border-blue-50;
             transition: 300ms ease-in all;
-            
+            padding-bottom: 3px;
+
             &::placeholder {
                 @apply psui-text-h4 psui-text-gray-40
             }
@@ -17,7 +28,6 @@
             span {
                 @apply psui-block psui-opacity-0;
                 min-width: 100px;
-                min-height: 29px;
             }
 
             input {
@@ -30,52 +40,57 @@
         }
 
         .psui-el-inline-selector-dropdown-wrapper {
-            @apply psui-origin-top-right psui-absolute psui-overflow-y-auto psui-left-0 psui-mt-2 psui-rounded psui-shadow-elevation-20 psui-bg-white psui-p-4 psui-z-40;
-            max-height: 50vh;
+            @apply psui-absolute psui-left-0 psui-bg-white psui-rounded psui-shadow-elevation-20 psui-z-50 psui-overflow-y-auto;
+            max-height: 30vh;
+            min-width: 300px;    
 
             .psui-el-inline-selector-dropdown {
-                @apply psui-w-full psui-flex psui-flex-wrap psui-bg-white;
+                @apply psui-flex psui-bg-white;
+    
+                
+                .psui-el-inline-selector-error {
+                    @apply psui-w-full psui-p-3 psui-flex psui-flex-col;
+
+                    h3 {
+                        @apply psui-text-red-20
+                    }
+
+                    p {
+                        @apply psui-text-gray-50
+                    }
+                }
 
                 ul {
-                    @apply psui-w-full;
+                    @apply psui-w-full psui-bg-white;
 
                     li {
-                        @apply psui-w-full psui-cursor-pointer;
+                        @apply psui-flex psui-cursor-pointer;
                         padding: 7.5px 16px;
 
                         &:hover {
-                            @apply psui-text-blue-60 psui-bg-blue-20;
+                                @apply psui-bg-blue-20;
+                                
+                            span p {
+                                    @apply psui-text-blue-60;
+                                }
                         }
 
                         span {
+                            @apply psui-flex psui-items-center psui-w-full;
 
                             > p {
-                                @apply psui-text-big psui-text-gray-60
+                                @apply psui-inline-block psui-text-big psui-text-gray-60 psui-flex-shrink-0;
                             }
 
                             p + p {
-                                @apply psui-text-gray-40;
+                                @apply psui-text-gray-40 psui-ml-auto psui-inline-block;
                                 font-size: 12px;
                                 line-height: 120%;
                             }
                         }
-
-                    }
-                }
-
-                .psui-el-inline-selector-error {
-                    @apply psui-w-full psui-p-3 psui-flex psui-flex-col;
-
-                    h3 {
-                        @apply psui-text-red-20
-                    }
-
-                    p {
-                        @apply psui-text-gray-50
                     }
                 }
             }
         }
-
     }
 }

package/src/assets/scss/components/PsInput.scss

@@ -11,15 +11,20 @@
     }
 
     &-hint {
-      @apply psui-text-gray-50 psui-text-xsmall psui-mt-1
+      @apply psui-text-gray-50 psui-mt-1;
+      font-size: 12px;
+      line-height: 24px;
     }
 
     &-wrapper {
-      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex transition-default
+      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex;
+      transition: ease 130ms;
     }
 
     label {
-      @apply psui-font-bold psui-text-gray-80
+      @apply psui-font-bold psui-text-gray-80;
+      line-height: 32px;
+      
     }
 
     input {

package/src/assets/scss/components/PsInputSelect.scss

@@ -1,6 +1,7 @@
 @layer components {
     .psui-el-input-select {
         @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40 psui-box-border;
+        transition: ease 130ms;
 
         &.disabled {
             @apply psui-pointer-events-none;
@@ -31,7 +32,7 @@
                 content: 'arrow_drop_down';
                 font-family: 'Material Icons Round';
                 font-size: 24px;
-                top: 26px;
+                top: 38px;
                 right: 15px;
                 z-index: -20;
             }
@@ -54,13 +55,15 @@
 
 
         label {
-            @apply psui-flex psui-text-gray-80 psui-text-big psui-items-center psui-w-full psui-font-bold psui-pointer-events-none
+            @apply psui-flex psui-text-gray-80 psui-items-center psui-w-full psui-font-bold psui-pointer-events-none;
+            font-size: 16px;
+            line-height: 32px;
         }
 
         .psui-el-input-helper {
             @apply psui-text-gray-50;
             font-size: 12px;
-            line-height: 120%;
+            line-height: 24px;
         }
 
         &.layout-mini {

package/src/assets/scss/components/PsInputTextArea.scss

@@ -19,9 +19,12 @@
 
         .psui-el-input-textarea-wrapper {
             @apply psui-flex psui-flex-col;
+            transition: ease 130ms;
 
             label {
-                @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1
+                @apply psui-h-full psui-flex psui-items-center psui-font-bold psui-text-big psui-py-1;
+                font-size: 16px;
+                line-height: 32px;
             }
 
             textarea {
@@ -42,7 +45,7 @@
         .psui-el-input-textarea-message {
             @apply psui-text-gray-50 psui-flex psui-font-normal;
             font-size: 12px;
-            line-height: 120%;
+            line-height: 24px;
             padding: 5px 0px;    
         }
     }

package/src/assets/scss/components/PsMiniTag.scss

@@ -5,10 +5,10 @@
 
 
         div {
-            @apply psui-w-full;
-            padding: 3px 8px 3px 8px;
+            @apply psui-w-full psui-font-bold;
+            padding: 1px 8px 0px 8px;
             font-size: 10px;
-
+            letter-spacing: 0.5px;
         }
 
         &-layout{

package/src/assets/scss/components/PsRadioButton.scss

@@ -1,7 +1,7 @@
 @layer components {
 
         .psui-el-radio {
-            @apply psui-relative psui-text-gray-50;
+            @apply psui-relative psui-text-gray-50 psui-flex psui-bg-gray-10;
 
             &.disabled {
                 .psui-el-checkmark {
@@ -28,7 +28,7 @@
                 }
 
                 .psui-el-checkmark {
-                    @apply psui-block psui-cursor-pointer;
+                    @apply psui-cursor-pointer psui-flex psui-items-center;
                     height: 18px;
 
                     span {
@@ -37,7 +37,7 @@
 
                     &::before {
                         content: 'radio_button_unchecked';
-                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        @apply psui-text-gray-40;
                         font-family: 'Material Icons Round';
                         font-size: 18px;
                     }
@@ -59,7 +59,7 @@
                 }
 
                 .psui-el-checkmark {
-                    @apply psui-block psui-cursor-pointer;
+                    @apply psui-cursor-pointer psui-flex psui-items-center;
                     height: 24px;
 
                     span {
@@ -68,7 +68,7 @@
 
                     &::before {
                         content: 'radio_button_unchecked';
-                        @apply psui-text-gray-40 psui-align-text-bottom;
+                        @apply psui-text-gray-40;
                         font-family: 'Material Icons Round';
                         font-size: 24px;
                     }

package/src/assets/scss/components/PsSwitch.scss

@@ -12,7 +12,7 @@
                 .psui-el-switch-button {
                      &.toggle-false{   
                         &::before {
-                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                             box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
                             left: 2px;
                             top: 2px;
@@ -24,7 +24,7 @@
                         @apply psui-bg-green-20;
     
                         &::before {
-                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                            @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                             box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
                             left: 16px;
                             top: 2px;
@@ -44,7 +44,7 @@
                 
                  &.toggle-false{   
                     &::before {
-                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                         left: 2px;
                         top: 2px;
                         content: '';
@@ -55,7 +55,7 @@
                     @apply psui-bg-green-20;
 
                     &::before {
-                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500 psui-shadow-elevation-20;
+                        @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
                         left: 24px;
                         top:2px;
                         content: '';

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

@@ -8,6 +8,10 @@
       &.status-disabled {
         @apply cursor-not-allowed
       }
+
+      &:focus {
+        outline: none;
+      }
     }
 
     &.status-disabled {
@@ -24,6 +28,7 @@
         button {
           @apply psui-bg-gray-10 psui-text-gray-60;
           padding: 6px 12px;
+          box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
 
           &:not(:last-child) {
             margin-right: 1px;
@@ -39,6 +44,7 @@
 
           &:hover {
             @apply psui-text-blue-60;
+            box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
           }
 
           &.status-active {
@@ -62,6 +68,10 @@
           border-bottom: 3px solid transparent;
           padding: 11.5px 0;
 
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
           &:not(:last-child) {
             margin-right: 20px;
           }
@@ -85,6 +95,10 @@
           @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
           padding: 9px 12px;
 
+          &:hover {
+            @apply psui-text-blue-60;
+          }
+
           &:not(:last-child) {
             margin-right: 4px;
           }

package/src/assets/scss/components/PsToast.scss

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-toast {
-        @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold;    
+        @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
 
         .psui-el-toast-icon {
             @apply psui-flex psui-mr-4;
@@ -12,7 +12,7 @@
         }
 
         .psui-el-toast-actions {
-            @apply psui-flex psui-gap-4
+            @apply psui-flex psui-gap-4 psui-text-accentSmall;            
         }
 
         &.fill-intense.layout{
@@ -35,7 +35,7 @@
         
         &.fill-soft.layout {
             &-info {
-                @apply psui-text-blue-60 psui-bg-blue-20
+                @apply psui-text-blue-60 psui-bg-blue-20;
             }
             
             &-success {

package/src/assets/scss/components/PsToggle.scss

@@ -1,11 +1,15 @@
 @layer components{
 
   .psui-el-toggle {
-    @apply psui-flex psui-rounded-sm psui-bg-gray-10 psui-gap-x-px;
+    @apply psui-flex psui-bg-gray-10 psui-items-center;
     padding: 2px;
+    gap: 2px;
+    border-radius: 4px;
 
     button {
-      @apply transition-default psui-inline-flex psui-rounded-sm psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-px-2;
+      @apply transition-default psui-inline-flex psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
+      border-radius: 4px;
+      padding:1px 8px;
 
       &.status-active {
         @apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;

package/src/assets/scss/components/PsTooltip.scss

@@ -5,11 +5,13 @@
             @apply psui-relative;
 
             .psui-el-tooltip-dialog {
-                @apply psui-fixed psui-hidden psui-opacity-0 psui-transition-opacity psui-duration-500 psui-ease-in-out;
-            
+                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
+                transition-delay: 0.4s;
+
                 .psui-el-tooltip-content {
-                    @apply psui-flex psui-flex-col psui-rounded-md psui-shadow-md psui-z-20 psui-bg-gray-50 psui-text-white;
-                    padding: 5px 8px;
+                    @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
+                    padding: 5px 8px 4px 8px;
+                    border-radius: 4px;
 
                     h2 {
                         @apply psui-font-bold;
@@ -21,9 +23,10 @@
 
                     &.layout {
                         &-gray {
-                            @apply psui-bg-gray-30 psui-text-gray-80 psui-p-4 ;
+                            @apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
                             font-size: 12px;
                             line-height: 120%;
+                            padding: 10px 16px 12px 16px;
                             
                             .psui-el-tooltip-content-wrapper {
                                 @apply psui-font-normal psui-mt-1 
@@ -31,9 +34,10 @@
                         }
 
                         &-blue {
-                            @apply psui-bg-blue-70 psui-text-white psui-p-4;
+                            @apply psui-bg-blue-70 psui-text-white psui-shadow-none;
                             font-size: 12px;
                             line-height: 120%;
+                            padding: 10px 16px 12px 16px;
                             
                             .psui-el-tooltip-content-wrapper {
                                 @apply psui-font-normal psui-mt-1
@@ -41,9 +45,10 @@
                         }
 
                         &-red {
-                            @apply psui-bg-red-10 psui-text-red-70 psui-p-4;
+                            @apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
                             font-size: 12px;
                             line-height: 120%;
+                            padding: 10px 16px 12px 16px;
 
                             .psui-el-tooltip-content-wrapper {
                                 @apply psui-font-normal psui-mt-1
@@ -51,7 +56,8 @@
                         }
 
                         &-white {
-                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+                            gap: 8.8px;
                              
                             h2 {
                                 @apply psui-text-gray-80 psui-font-bold;
@@ -60,19 +66,27 @@
                             }
 
                             .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-gray-50 psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+                                @apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
+                                gap: 13.6px;
+                                font-size: 14px;
+                                line-height: 120%;
 
                                 button {
-                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60;
+                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
                                     padding: 7px 16px;
                                     width: fit-content;
+                                    
+                                    &:focus {
+                                        outline: none;
+                                    }
                                 }       
                             }
                         }
 
                         &-dark {
-                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
-                             
+                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+                            gap: 8.8px;
+                            
                             h2 {
                                 @apply psui-text-white psui-font-bold;
                                 font-size: 17px;
@@ -80,19 +94,29 @@
                             }
 
                             .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-white psui-text-small psui-font-normal  psui-flex psui-flex-col psui-gap-3;
+                                @apply psui-text-white psui-font-normal  psui-flex psui-flex-col;
+                                gap: 13.6px;
+                                font-size: 14px;
+                                line-height: 120%;
 
                                 button {
-                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
                                     padding: 7px 16px;
                                     width: fit-content;
+
+                                    &:focus {
+                                        outline: none;
+                                    }
+
                                 }       
                             }
                         }
 
                         &-color {
-                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
-                             
+                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+                            gap: 8.8px; 
+
+
                             h2 {
                                 @apply psui-text-white psui-font-bold;
                                 font-size: 17px;
@@ -100,12 +124,20 @@
                             }
 
                             .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-white psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+                                @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
+                                gap: 13.6px;
+                                font-size: 14px;
+                                line-height: 120%;
 
                                 button {
-                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
                                     padding: 7px 16px;
                                     width: fit-content;
+
+                                    &:focus {
+                                        outline: none;
+                                    }
+
                                 }       
                             }
                         }

package/src/components/accordion/PsAccordion.vue

@@ -1,42 +1,26 @@
 <template>
-  <div class="psui-el-accordion" :class="`layout-${layout}`">
+  <div class="psui-el-accordion" :class="getComponentClass">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export const layouts = ['big', 'medium']
-export const defaultIconsByLayout = {
-  big: { 
-    'iconOpened': 'remove',
-    'iconClosed': 'add'
-  },
-  medium: {
-    'iconOpened': 'expand_less',
-    'iconClosed': 'expand_more'
-  }
-}
 export default {
   name: 'PsAccordion',
   props: {
+    /**
+     * It defines the size of the accordion items. eg: text size and font.
+     */
     layout: {
       type: String,
       default: 'medium',
-      validator: (value) => layouts.indexOf(value) !== -1,
+      validator: (value) => ['medium','big'].includes(value),
     },
-    'iconOpened': {
-      type: String,
-    },
-    'iconClosed': {
-      type: String,
-    }
   },
   computed: {
-    getIcons() {
-      return {
-        'iconOpened' : this.iconOpened ?? defaultIconsByLayout[this.layout].iconOpened,
-        'iconClosed' : this.iconClosed ?? defaultIconsByLayout[this.layout].iconClosed,
-      }
+    getComponentClass() {
+      return `layout-${this.layout}`
     }
   }
 }