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

package/package.json

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

package/src/assets/scss/base.scss

@@ -13,6 +13,7 @@
 @import './components/PsDataTable.scss';
 @import './components/PsCheckbox.scss';
 @import './components/PsDialog.scss';
+@import './components/PsDotLoader.scss';
 @import './components/PsRadioButton.scss';
 @import './components/PsSwitch.scss';
 @import './components/PsProgressBar.scss';

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

@@ -22,17 +22,22 @@
     &.size-big {
       @apply psui-flex psui-items-center psui-content-center;
       padding: 9.5px 16px;
-      font-size: 16px;
       
-      &.icon-left i {
-        font-size: 24px;
-        margin-right: 8px;
-      }
+        &.icon-left {
+          padding: 8px 16px;
+          i {
+           font-size: 24px;
+           margin-right: 8px;
+          }
+        }
 
-      &.icon-right i {
-        font-size: 24px;
-        margin-left: 8px;
-      }
+        &.icon-right { 
+          padding: 8px 16px;     
+          i {
+              font-size: 24px;
+              margin-left: 8px;
+          }
+        }
     }
 
     &.size-medium {
@@ -56,7 +61,7 @@
       font-size: 14px;
 
       &.layout-onlytext {
-        &:focus:not(.disabled) {
+        &:active:not(.disabled) {
           @apply psui-bg-blue-20 psui-text-blue-60;    
           box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
         }    
@@ -82,14 +87,13 @@
     }
 
     &.layout-solid {
-        
       @apply psui-bg-blue-60 psui-text-white; 
 
       &.hover {
         @apply psui-bg-blue-50 psui-text-white;
       }
 
-      &:focus:not(.disabled) {
+      &:active:not(.disabled) {
         @apply psui-bg-blue-50 psui-text-white;
         box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
       }
@@ -104,7 +108,7 @@
       background: transparent;
 
       &.hover,
-      &:focus {
+      &:active {
         @apply psui-border psui-border-blue-60
       }
 
@@ -117,7 +121,7 @@
       @apply psui-bg-blue-20 psui-text-blue-60;
 
       &.hover, 
-      &:focus:not(.disabled) {
+      &:active:not(.disabled) {
         box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
       }
 

package/src/assets/scss/components/PsClimateZoneBadge.scss

@@ -2,7 +2,7 @@
     .psui-el-climate-zone-badge {
         @apply psui-flex psui-bg-gray-10 psui-text-gray-50 psui-transition-all psui-duration-300 psui-ease-out psui-rounded psui-items-center;
         width: fit-content;
-        padding: 4px 6px;
+        padding: 0px 6px;
 
         &:hover {
             @apply psui-text-blue-60 psui-bg-blue-20;

package/src/assets/scss/components/PsCostEffectBar.scss

@@ -1,31 +1,26 @@
 @layer components {
-    .psui-el-cost-effect-bar {
-        @apply psui-overflow-visible;
-
-        div {
-            @apply psui-relative psui-h-2 psui-rounded-2xl;
-            width: 100px;
-
-            span {
-                @apply psui-absolute psui-rounded-sm psui-z-10; 
-                background-color: #d6dde5;
-                width: 2px;
-                height: 14px;
-                top: -3px; 
-            }
-
-             .psui-el-simple-progress-bar {
-              @apply psui-overflow-hidden;
-
-
-              &-percentage {
-
-                border-radius: unset;
-            }
-    
-            }
-
+  .psui-el-cost-effect-bar {
+    @apply psui-overflow-visible;
+
+    div {
+      @apply psui-relative psui-h-2 psui-rounded-2xl;
+      width: 100px;
+
+      span {
+        @apply psui-absolute psui-rounded-sm psui-z-10; 
+        background-color: #d6dde5;
+        width: 2px;
+        height: 14px;
+        top: -3px; 
+      }
+
+      .psui-el-simple-progress-bar {
+        @apply psui-overflow-hidden;
+
+        &-percentage {
+          border-radius: unset;
         }
-
+      }
     }
+  }
 }

package/src/assets/scss/components/PsDotLoader.scss

@@ -0,0 +1,45 @@
+@layer components {
+
+    .psui-el-dotloader {
+        @apply psui-flex psui-items-center psui-justify-center psui-h-full;
+        padding: 0;
+
+        .psui-el-dotloader-wrapper {
+            @apply psui-relative psui-p-4 psui-flex;
+            height: 15px;
+            span {
+                @apply psui-rounded-full psui-relative psui-float-left psui-left-0 psui-top-0 psui-mr-1;
+                background: #b7b7b7;
+                height: 15px;
+                width: 15px;
+                opacity: 0.15;
+                transform: scale(1);
+                animation: dots-animation 1s 0.2s ease-in-out infinite;
+
+                &:nth-of-type(1) {
+                    animation-delay: 0.2s;
+                }
+
+                &:nth-of-type(2) {
+                    animation-delay: 0.4s;
+                }
+
+                &:nth-of-type(3) {
+                    animation-delay: 0.6s;
+                }      
+            }
+
+            @keyframes dots-animation {
+                0%, 70%, 100% {
+                    opacity: 0.15;
+                    transform: scale(1);
+                }
+
+                35% {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+            }
+        }
+    }
+}

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/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/components/buttons/PsButton.vue

@@ -50,7 +50,11 @@ export default {
   },
   computed: {
     getComponentClass(){
-        return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}` 
+        if(this.icon){
+          return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
+        } else {
+          return `layout-${this.layout} size-${this.size}` 
+        }
     }
   },
   methods: {

package/src/components/chips/PsChips.vue

@@ -17,7 +17,6 @@
     >
       <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
       {{ label }}
-      {{ layout }}
       <button 
         @click="onClose" 
         v-if="layout === 'rich'" 

package/src/components/controls/PsInlineSelector.vue

@@ -13,7 +13,6 @@
       <span> {{ search ? search : placeholder }} </span>
       <input
         ref="input"
-        v-model="search"
         :label="label"
         :placeholder="placeholder"
         @input="$emit('input', $event)"
@@ -40,7 +39,7 @@
         class="psui-el-inline-selector-dropdown-wrapper"
       >
       <slot name='loader'></slot>
-        <div>
+        <div class="psui-el-inline-selector-dropdown">
           <div v-if="requestFetched && !jurisdictions.length">
             <h3>Hmmmm</h3>
             <p>Please check the spelling and try again</p>
@@ -79,9 +78,6 @@ export default {
     shouldScroll: {
       default: false
     },
-    inputClass: {
-      default: 'text-gray02'
-    },
     label: {
       type: String,
       default: 'Type a City or County'
@@ -117,19 +113,11 @@ export default {
     isFocused:{
       type: Boolean,
       default: false,
-    }
-  },
-  computed:{
-    placeholder(){
-      return this.jurisdictionsAsText && !this.isFocused ? this.jurisdictionsAsText : this.label
     },
-    jurisdictionsAsText(){
-      return this.jurisdictionSelected?.title_type ?? false
+    placeholder:{
+      type: String,
     }
-  },
-  mounted(){
-    if(this.focusOnMount) this.$refs.input.focus()
-  },
+  }
 }
 </script>
 

package/src/components/controls/PsSlider.vue

@@ -81,7 +81,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .slider {
   width: 100%;
   -webkit-appearance: none;

package/src/components/forms/PsDropdown.vue

@@ -179,7 +179,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 
   .background-temporary {
     width: 300px;

package/src/components/tabs/PsTabHeader.vue

@@ -13,7 +13,7 @@
           @click="selectTab(item)"
           :class="getButtonClass(item)"
         >
-          <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" type="blue">
+          <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
             <template v-slot:trigger>
               <span>{{ item[keyLabel] }}</span>              
             </template>

package/src/components/ui/PsDotLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="psui-el-dotloader">
+      <div class="psui-el-dotloader-wrapper">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsDotLoader',
+}
+</script>

package/src/index.js

@@ -14,6 +14,7 @@ import PsChips from './components/chips/PsChips.vue'
 import PsDataTable from './components/datatable/PsDataTable.vue'
 import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
 import PsIcon from './components/ui/PsIcon.vue'
+import PsDotLoader from './components/ui/PsDotLoader.vue'
 import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
@@ -42,6 +43,7 @@ export default {
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
     Vue.component('PsIcon', PsIcon)
+    Vue.component('PsDotLoader', PsDotLoader)
     Vue.component('PsTooltip', PsTooltip)
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
@@ -57,19 +59,21 @@ export default {
 export {
   PsButton,
   PsCheckbox,
-  PsDialog,
-  PsToast,
-  PsTabHeader,
   PsRadioButton,
   PsSlider,
   PsSwitch,
-  PsInput,
   PsToggle,
+  PsInput,
+  PsDialog,
+  PsToast,
+  PsTabHeader,
   PsAccordion,
   PsAccordionItem,
   PsChips,
   PsDataTable,
   PsDataTableItem,
+  PsIcon,
+  PsDotLoader,
   PsTooltip,
   PsRichTooltip,
   PsDialogTooltip,
@@ -78,5 +82,5 @@ export {
   PsChartLegend,
   PsInlineSelector,
   PsInputTextArea,
-  PsInputSelect
+  PsInputSelect,
 }

package/src/stories/Colors.stories.mdx

@@ -54,6 +54,7 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="psui-bg-red-80">Red 80 <div>#832F2E</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="psui-bg-red-70">Red 70 <div>#AA3937</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="psui-bg-red-20">Red 20 <div>#D65C5A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-15 click-to-copy" data-to-copy="psui-bg-red-15">Red 15 <div>#EAC5C5</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="psui-bg-red-10">Red 10 <div>#FCEBEB</div></div>
 </div>
 

package/tailwind.config.js

@@ -33,6 +33,7 @@ module.exports = {
       'yellow-80': '#834C0D',
 
       'red-10': '#FCEBEB',
+      'red-15': '#EAC5C5',
       'red-20': '#D65C5A',
       'red-70': '#AA3937',
       'red-80': '#832F2E',