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

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

@@ -5,6 +5,9 @@
 
     button {
       @apply transition-default psui-text-small;
+      &.status-disabled {
+        @apply cursor-not-allowed
+      }
     }
 
     &.status-disabled {
@@ -41,6 +44,10 @@
           &.status-active {
             @apply psui-text-white psui-bg-blue-60 psui-font-bold;
           }
+
+          &.status-disabled:hover {
+            @apply psui-text-gray-60;
+          }
         }
       }
     /* ----------------------------------------- 	Layout Standard */
@@ -59,12 +66,12 @@
             margin-right: 20px;
           }
 
-          &:hover {
+          &.status-enable:hover {
             @apply psui-text-blue-60;
           }
 
           &.status-active {
-            @apply psui-text-blue-60 psui-border-blue-60;
+            @apply psui-text-blue-60 psui-border-blue-50
           }
         }
       }
@@ -82,7 +89,7 @@
             margin-right: 4px;
           }
 
-          &:hover {
+          &.status-enable:hover {
             @apply psui-text-gray-60;
           }
 

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

@@ -0,0 +1,52 @@
+@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;    
+
+        .psui-el-toast-icon {
+            @apply psui-flex psui-mr-4;
+            font-size: 24px; 
+        }
+        
+        .psui-el-toast-message {
+            @apply psui-mr-auto
+        }
+
+        .psui-el-toast-actions {
+            @apply psui-flex psui-gap-4
+        }
+
+        &.fill-intense.layout{
+                &-info {
+                    @apply psui-bg-blue-60
+                }
+                
+                &-success {
+                    @apply psui-bg-green-20
+                }
+
+                &-warning {
+                    @apply psui-bg-yellow-20
+                }
+
+                &-error {
+                    @apply psui-bg-red-20
+                }
+            }    
+        
+        &.fill-soft.layout {
+            &-info {
+                @apply psui-text-blue-60 psui-bg-blue-20
+            }
+            
+            &-success {
+                @apply psui-text-green-20 psui-bg-green-10
+            }
+            &-warning {
+                @apply psui-text-yellow-20 psui-bg-yellow-10
+            }
+            &-error {
+                @apply psui-text-red-20 psui-bg-red-10
+            }
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+@layer components{
+
+  .psui-el-toggle {
+    @apply psui-flex psui-rounded-sm psui-bg-gray-10 psui-gap-x-px;
+    padding: 2px;
+
+    button {
+      @apply transition-default psui-inline-flex psui-rounded-sm psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-px-2;
+
+      &.status-active {
+        @apply psui-bg-blue-60 psui-text-white psui-font-bold psui-shadow-elevation-10;
+      }
+
+      &:not(.status-active) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    
+  }
+
+}

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

@@ -0,0 +1,118 @@
+@layer components {
+    .psui-el-tooltip {
+
+        .psui-el-tooltip-wrapper{
+            @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;
+            
+                .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;
+
+                    h2 {
+                        @apply psui-font-bold;
+                    }
+
+                    .psui-el-tooltip-content-wrapper{
+                        @apply psui-text-xsmall psui-font-bold;
+                    }
+
+                    &.layout {
+                        &-gray {
+                            @apply psui-bg-gray-30 psui-text-gray-80 psui-p-4 ;
+                            font-size: 12px;
+                            line-height: 120%;
+                            
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-font-normal psui-mt-1 
+                            }
+                        }
+
+                        &-blue {
+                            @apply psui-bg-blue-70 psui-text-white psui-p-4;
+                            font-size: 12px;
+                            line-height: 120%;
+                            
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-font-normal psui-mt-1
+                            }
+                        }
+
+                        &-red {
+                            @apply psui-bg-red-10 psui-text-red-70 psui-p-4;
+                            font-size: 12px;
+                            line-height: 120%;
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-font-normal psui-mt-1
+                            }
+                        }
+
+                        &-white {
+                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                             
+                            h2 {
+                                @apply psui-text-gray-80 psui-font-bold;
+                                font-size: 17px;
+                                line-height: 120%;
+                            }
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-text-gray-50 psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+
+                                button {
+                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60;
+                                    padding: 7px 16px;
+                                    width: fit-content;
+                                }       
+                            }
+                        }
+
+                        &-dark {
+                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                             
+                            h2 {
+                                @apply psui-text-white psui-font-bold;
+                                font-size: 17px;
+                                line-height: 120%;
+                            }
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-text-white psui-text-small psui-font-normal  psui-flex psui-flex-col psui-gap-3;
+
+                                button {
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    padding: 7px 16px;
+                                    width: fit-content;
+                                }       
+                            }
+                        }
+
+                        &-color {
+                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-gap-3 psui-flex-col;
+                             
+                            h2 {
+                                @apply psui-text-white psui-font-bold;
+                                font-size: 17px;
+                                line-height: 120%;
+                            }
+
+                            .psui-el-tooltip-content-wrapper {
+                                @apply psui-text-white psui-text-small psui-font-normal psui-flex psui-flex-col psui-gap-3;
+
+                                button {
+                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white;
+                                    padding: 7px 16px;
+                                    width: fit-content;
+                                }       
+                            }
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -1,10 +1,13 @@
 <template>
-  <div class="psui-border psui-border-gray-20 psui-rounded-md psui-flex psui-flex-col psui-items-center psui-justify-center psui-px-3 psui-py-2 psui-space-y-2">
-    <h5 class="psui-text-xsmall psui-font-bold psui-text-gray-40">
-      <span class="psui-text-gray-60">{{ title }} </span>{{ subtitle }}
+  <div 
+    class="psui-el-card-infos"
+    @click="onClick()"
+  >
+    <h5 class="psui-el-card-infos-title">
+      <span class="psui-text-gray-60 psui-mr-1">{{ title }}</span>{{ subtitle }}
     </h5>
-    <div class="psui-w-full psui-flex psui-justify-center psui-items-center psui-space-x-2 psui-text-p">
-      <span class="psui-text-blue-50 material-icons-round">{{ icon }}</span>
+    <div class="psui-el-card-infos-content">
+      <span class="psui-el-card-infos-icon material-icons-round">{{ icon }}</span>
       <h5 class="psui-text-gray-80">{{ total }}</h5>
     </div>
   </div>
@@ -30,9 +33,13 @@ export default {
       type: String,
       default: '',
     },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click')
+    }
   }
 }
 </script>
 
-<style scoped>
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsCardInfos.scss */</style>

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="psui-flex psui-p-2 psui-rounded">
+  <div class="psui-el-chart-legend">
     <div class="psui-flex psui-flex-shrink-0">
-      <div class="dot psui-rounded-full" :style="dotColor"></div>
+      <div class="psui-el-chart-legend-dot" :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>
-      <span v-if="this.total" class="psui-text-p psui-text-gray-80">{{ total }}</span>
-      <span class="psui-text-gray-50" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
+      <div class="psui-el-chart-legend-text">{{ text }}</div>
+      <span v-if="this.total" class="psui-el-chart-legend-total">{{ total }}</span>
+      <span class="psui-el-chart-legend-percentage" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
     </div>
   </div>
 </template>
@@ -15,7 +15,7 @@
 export default {
   props: {
     text: {
-      type: String,
+      type: [String, Number],
       default: 'Climate Zone 10',
     },
     total: {
@@ -34,10 +34,4 @@ export default {
 }
 </script>
 
-<style scoped>
-.dot {
-  width: 14px; height: 14px;
-  background-color: #43cec2;
-  margin-right: 6px;
-}
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsChartLegend.scss */</style>

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

@@ -1,10 +1,10 @@
 <template>
-  <button
-    class="psui-flex psui-p-3 psui-bg-gray-10 psui-text-gray-50 hover:psui-text-blue-60 hover:psui-bg-blue-20 psui-transition-all psui-duration-300 psui-ease-out psui-shadow-lg psui-rounded"
-  >
-    <i v-if="icon" class="material-icons psui-text-base"> {{ icon }} </i>
-    <p class="psui-text-sm">10</p>
-  </button>
+  <div class="psui-el-climate-zone-badge">
+    <i v-if="icon"> {{ icon }} </i>
+    <span>
+      {{ content }}
+    </span>
+  </div>
 </template>
 
 <script>
@@ -12,7 +12,16 @@ export default {
   props: {
     icon: {
       type: String,
+      default: 'area_chart',
+    },
+    content: {
+      type: Number,
+      default: 10,
     },
   },
 }
 </script>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsClimateZoneBadge.scss */
+</style>

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

@@ -1,33 +1,26 @@
 <template>
-  <div>
-    <div class="container">
-      <div
-        class="loading-bar"
-        :class="{
-          'psui-bg-blue-20': value >= breakEven,
-          'psui-bg-red-10': value < breakEven,
-        }"
-      >
-        <span class="breakEven" :style="breakEvenPosition"> </span>
+  <div class="psui-el-cost-effect-bar">
+    <div>
+      <span :style="breakEvenPosition"> </span>
 
-        <input
-          type="number"
-          min="0"
-          max="100"
-          class="percentage"
-          :style="{ width: `${value}px` }"
-          :class="{
-            'psui-bg-blue-60': value >= breakEven,
-            'psui-bg-red-20': value < breakEven,
-          }"
-        />
-      </div>
+      <PsProgressBar
+        :value="value"
+        :percentageColor="percentageColor"
+        :bgColor="bgColor"
+      >
+      </PsProgressBar>
     </div>
   </div>
 </template>
 
 <script>
+import PsProgressBar from './PsProgressBar.vue'
 export default {
+  name: 'PsCostEffectBar',
+  components: {
+    PsProgressBar,
+  },
+
   props: {
     value: {
       type: Number,
@@ -37,7 +30,7 @@ export default {
     breakEven: {
       type: Number,
       required: true,
-      default: 1,
+      default: 0,
     },
   },
   data() {
@@ -54,61 +47,30 @@ export default {
     },
 
     breakEvenPosition() {
-      return `left: ${this.breakEven}px`
+      return `left: ${this.breakEven >= 98 ? 98 : this.breakEven}px`
     },
+
     getIsBreakEven() {
       if (this.breakEven < 0) return 0
       else if (this.breakEven > 100) return 100
       else return this.breakEven
-      // else return true;
-      // return this.value > this.breakEven ? true : false;
     },
-  },
-}
-</script>
 
-<style scoped>
-.container {
-  overflow: visible;
-}
-
-.loading-bar {
-  position: relative;
-  width: 100px;
-  height: 8px;
-  border-radius: 15px;
-}
-
-.loading-bar .percentage {
-  position: absolute;
-  display: block;
-  max-width: 100px;
-  height: 100%;
-  border-radius: 15px;
-  overflow: visible;
-  background-size: 30px 30px;
-  animation: animate-stripes 3s linear infinite;
-}
+    percentageColor() {
+      return this.value >= this.breakEven
+        ? 'psui-bg-blue-60'
+        : 'psui-bg-red-20'
+    },
 
-.breakEven {
-  position: absolute;
-  background-color: #d6dde5;
-  width: 2px;
-  height: 14px;
-  /* max-width: 100px; */
-  border-radius: 2px;
-  top: -3px;
-  z-index: 1;
-  /* left: 2px; */
-  /* right: -2px; */
+    bgColor() {
+      return this.value >= this.breakEven
+        ? 'psui-bg-blue-20'
+        : 'psui-bg-red-10'
+    },
+  },
 }
+</script>
 
-@keyframes animate-stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 60px 0;
-  }
-}
+<style>
+/* Please, use the file src/assets/scss/components/PsCostEffectBar.scss */
 </style>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="example">
-    <div class="dot"></div>
+  <div class="psui-el-highlight-ripple-icon">
+    <div class="psui-el-icon"></div>
   </div>
 </template>
 
@@ -8,71 +8,5 @@
 export default {}
 </script>
 
-<style scoped>
-.example {
-  position: static;
-  /* margin: 0px 32px; */
-  /* width: 275px;
-  height: 229px; */
-  /* left: 0px;
-  top: 0px; */
-  /* border: 1.5px dashed #9b51e0; */
-  /* background: #f3f6f9; */
-  box-sizing: border-box;
-}
-.dot {
-  background: #5db883;
-  /* border: solid 1px #2bb24c; */
-  border-radius: 50%;
-  /* box-shadow: 0px 0 2px #2bb24c; */
-  width: 8px;
-  height: 8px;
-  /* left: 6px;
-  top: 6px; */
-  margin: 100px auto;
-  position: relative;
-}
+<style> /* Please, use the file src/assets/scss/components/PsHighlightRippleDot.scss */</style>
 
-.dot::before,
-.dot::after {
-  background: #def8e8;
-  border: solid 0px #2bb24c;
-  border-radius: 50%;
-  content: '';
-  width: 36px;
-  height: 36px;
-  left: -8px;
-  top: -8px;
-  position: absolute;
-  transform-origin: center center;
-  transform: scale(1) translate(-1px, -1px);
-}
-.dot::before {
-  animation: ripple 1s infinite;
-}
-.dot::after {
-  animation: ripple 1s infinite;
-  /* animation-delay: 0.4s; */
-}
-
-@keyframes ripple {
-  0% {
-    /* transform: scale(1) translate(-1px, -1px);
-    opacity: 0.75; */
-    left: 5px;
-    top: 5px;
-    opacity: 0.95;
-    width: 0;
-    height: 0;
-  }
-  100% {
-    /* transform: scale(2) translate(-1px, -1px);
-    opacity: 0; */
-    left: -13px;
-    top: -13px;
-    opacity: 0;
-    width: 36px;
-    height: 36px;
-  }
-}
-</style>

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

@@ -1,17 +1,23 @@
 <template>
-  <div :class="cssClass">
-    <div class="psui-w-full">{{ message }}</div>
+  <div class="psui-el-mini-tag" :class="getComponentClass">
+    <div>{{ message }}</div>
   </div>
 </template>
 
 <script>
-export const typeOptions = ['informative', 'success', 'warning', 'error']
+export const typeOptions = [
+  'info',
+  'success',
+  'warning',
+  'error',
+  'default',
+]
 export default {
   name: 'PsMiniTag',
   props: {
-    type: {
+    layout: {
       type: String,
-      default: 'informative',
+      default: 'info',
       validator: (value) => typeOptions.indexOf(value) !== -1,
     },
     message: {
@@ -19,28 +25,13 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      colors: {
-        informative: { background: 'blue-20', color: 'blue-60' },
-        success: { background: 'green-10', color: 'green-70' },
-        warning: { background: 'yellow-10', color: 'yellow-70' },
-        error: { background: 'red-10', color: 'red-20' },
-      },
-    }
-  },
   computed: {
-    cssClass() {
-      return `fit-content psui-flex psui-rounded-lg psui-px-2 psui-items-center psui-justify-center psui-flex-row psui-mx-6 psui-bg-${
-        this.colors[this.type].background
-      } psui-text-${this.colors[this.type].color}`
+    getComponentClass() {
+      return `psui-el-mini-tag-layout-${this.layout}`
     },
   },
 }
 </script>
 
-<style scoped>
-.fit-content {
-  width: fit-content;
-}
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsMiniTag.scss */ </style>
+

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

@@ -0,0 +1,42 @@
+<template> 
+      <div
+        class="psui-el-simple-progress-bar"
+        :class="bgColor"
+        >
+        <div
+          class="psui-el-simple-progress-bar-percentage"
+          :style="{ width: `${value}px` }"
+          :class="percentageColor"
+        ></div>
+      </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+      default: 0,
+      validator: (value) => {
+        return value >= 0 && value <= 100
+      },
+    },
+  percentageColor: {
+    type: String,
+    default: 'psui-bg-blue-60'
+    // required: true,
+
+  },
+  bgColor: {
+    type: String,
+    default: 'psui-bg-blue-20'
+    // required: true,
+  },
+  
+  },
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsProgressBar.scss */ </style>
+