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

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.5",
   "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/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/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'
+  }