@policystudio/policy-studio-ui-vue 1.1.4 → 1.1.6

package/dist/css/psui_styles.css

@@ -4003,6 +4003,48 @@ video {
     background-color: #8AC6D9;
   }
 
+.psui-el-simple-alert {
+  display: flex;
+  align-items: center;
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  cursor: pointer;
+  width: 100%;
+  border-radius: 0.375rem;
+  word-break:normal ;
+}
+
+.psui-el-simple-alert-message {
+    font-size: 12px;
+    line-height: 130%;
+    letter-spacing: 0.6px;
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: 700;
+  }
+
+.psui-el-simple-alert-button{
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+.psui-el-simple-alert-button:focus{
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+
 .psui-space-y-0 > :not(template) ~ :not(template){
   --space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--space-y-reverse)));

package/package.json

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

package/src/assets/scss/base.scss

@@ -33,6 +33,7 @@
 @import './components/PsDateCardInfo.scss';
 @import './components/PsTagScope.scss';
 @import './components/PsBarChart.scss';
+@import './components/PsSimpleAlert.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsSimpleAlert.scss

@@ -0,0 +1,15 @@
+@layer components {
+    .psui-el-simple-alert {
+        @apply psui-flex psui-items-center psui-gap-1 psui-p-1 psui-cursor-pointer psui-w-full psui-rounded-md;
+        word-break:normal ;
+        &-message {
+            @apply psui-text-accentSmall  psui-mx-auto psui-font-bold;
+        }
+        &-button{
+            @apply psui-icon;
+            &:focus{
+                @apply psui-outline-none;
+            }
+        }
+    }
+}

package/src/components/forms/PsDropdown.vue

@@ -78,18 +78,11 @@ export default {
       default: false,
     },
     /**
-     * It sets the vertical position.
+     * It sets the vertical and horizontal position.
      */
     position: {
       type: String,
-      validator: (value)=> ['bottom','top', 'custom'].includes(value)
-    },
-    /**
-     * It sets the custom positions.
-     */
-    customPosition: {
-      type: String,
-      default: '',
+      validator: (value)=> ['custom'].includes(value)
     },
   },
   data() {
@@ -153,14 +146,9 @@ export default {
         PSDropdownDialog.style.left = `${rectTrigger.x}px`
       }
 
-      if(this.position == 'top') {
-        PSDropdownDialog.style.top = `${(rectTrigger.y - rectDialog.height) - 10}px`
-      }
-
       if(this.position == 'custom') {
-        PSDropdownDialog.style = this.customPosition
-        PSDropdownDialog.style.display = 'block'
-        PSDropdownDialog.style.position = 'absolute'
+        PSDropdownDialog.style.top = `${rectTrigger.y}px`
+        PSDropdownDialog.style.left = `${rectTrigger.x + 80}px`
       }
 
       if (rectTrigger.top < 10) {

package/src/components/notifications/PsSimpleAlert.vue

@@ -0,0 +1,43 @@
+<template >
+    <div class="psui-el-simple-alert" v-bind="$attrs" @click.stop="$emit('click')">
+        <PsIcon
+            :icon="icon"
+            :icon-classes="iconClass"
+            :size="iconSize"
+        />
+        <p class="psui-el-simple-alert-message">{{ message }}</p>
+        <button class="psui-el-simple-alert-button" :class="buttonClass" @click.stop="$emit('close')">close</button>
+    </div>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+
+
+export default {
+    name: 'PsSimpleAlert',
+    components: { PsIcon },
+    props: {
+        message: {
+            type: String,
+            default: ''
+        },
+        icon: {
+            type: String,
+            default: 'info'
+        },
+        iconClass:{
+            type:String,
+            default: ''
+        },
+        buttonClass:{
+            type:String,
+            default: ''
+        },
+        iconSize:{
+            type: [Number, String],
+             default: 24
+        }
+    },
+}
+</script>

package/src/components/table-results/PsTableResults.vue

@@ -125,7 +125,6 @@
                   v-if="shouldShowDropdown(item)"
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
                   position="custom"
-                  custom-position="top: 0; left: 5rem;"
                 >
                   <template v-slot:dropdownTrigger>
                     <PsIcon 

package/src/index.js

@@ -44,6 +44,7 @@ import PsTestimonialCard from './components/badges-and-tags/PsTestimonialCard.vu
 import PsDateCardInfo from './components/badges-and-tags/PsDateCardInfo.vue'
 import PsTagScope from './components/badges-and-tags/PsTagScope.vue'
 import PsBarChart from './components/data-graphics/PsBarChart.vue'
+import PsSimpleAlert from './components/notifications/PsSimpleAlert.vue'
 
 export default {
   install(Vue) {
@@ -88,6 +89,7 @@ export default {
     Vue.component('PsDateCardInfo',PsDateCardInfo)
     Vue.component('PsTagScope',PsTagScope)
     Vue.component('PsBarChart',PsBarChart)
+    Vue.component('PsSimpleAlert',PsSimpleAlert)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -148,6 +150,7 @@ export {
   PsTestimonialCard,
   PsDateCardInfo,
   PsTagScope,
-  PsBarChart
+  PsBarChart,
+  PsSimpleAlert
 }
 

package/src/stories/SimpleAlert.stories.js

@@ -0,0 +1,21 @@
+import PsSimpleAlert from '../components/notifications/PsSimpleAlert.vue'
+
+export default {
+    title: 'Notifications/Simple Alert',
+    component: PsSimpleAlert,
+  }
+
+  const TemplateDefault = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsSimpleAlert },
+    template: `
+      <div style="width:300px;">
+        <PsSimpleAlert v-bind="$props" class="psui-text-blue-60 psui-bg-blue-20"/>
+      </div>
+        `,
+  })
+  
+  export const Default = TemplateDefault.bind({})
+  Default.args = {
+    message:'lorem'
+  }

package/src/stories/TableResults.stories.js

@@ -295,22 +295,6 @@ Simple.args = {
   ],
   summaryData: [
     {
-      actions: [
-        {
-          icon: 'delete_outline',
-          text: 'Remove prototype from your policy',
-          callback: () => {}
-        },
-        {
-          icon: 'add_circle_outline',
-          text: 'Add requirements',
-          callback: () => {}
-        },
-        {
-          icon: 'more_horiz',
-          callback: () => {}
-        },
-      ],
       'data': {
         'forecast_units_affected': 337.5,
         'forecast_emissions_savings': -1470.2228427746163,