@policystudio/policy-studio-ui-vue 1.0.48 → 1.0.58

package/dist/css/psui_styles.css

@@ -8025,11 +8025,13 @@ video {
 .psui-text-accent{
   font-size: 14px;
   line-height: 130%;
+  letter-spacing: 0.6px;
 }
 
 .psui-text-accentSmall{
   font-size: 12px;
   line-height: 130%;
+  letter-spacing: 0.6px;
 }
 
 .psui-text-p{
@@ -17181,6 +17183,75 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+.psui-el-badge-with-icon {
+  display: flex;
+  align-items: center;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.psui-el-badge-with-icon.layout-grey{
+    --bg-opacity: 1;
+    background-color: #F3F6F9;
+    background-color: rgba(243, 246, 249, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #798490;
+    color: rgba(121, 132, 144, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon.layout-blue{
+    --bg-opacity: 1;
+    background-color: #E0EFF6;
+    background-color: rgba(224, 239, 246, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #318FAC;
+    color: rgba(49, 143, 172, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon.layout-green{
+    --bg-opacity: 1;
+    background-color: #DEF8E8;
+    background-color: rgba(222, 248, 232, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #44A06A;
+    color: rgba(68, 160, 106, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon.layout-yellow{
+    --bg-opacity: 1;
+    background-color: #FDF3E3;
+    background-color: rgba(253, 243, 227, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #B87305;
+    color: rgba(184, 115, 5, var(--text-opacity));
+  }
+
+.psui-el-badge-with-icon .psui-el-badge-with-icon-icon {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 16px;
+    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-badge-with-icon .psui-el-badge-with-icon-message {
+    margin-left: 0.25rem;
+    font-size: 12px;
+    line-height: 130%;
+    font-weight: 700;
+  }
+
 .psui-el-draggable {
   width: 100%;
   display: flex;
@@ -17218,6 +17289,7 @@ html {
 .psui-el-draggable .psui-el-draggable-wrapper-title p {
         font-size: 12px;
         line-height: 130%;
+        letter-spacing: 0.6px;
         --text-opacity: 1;
         color: #28323B;
         color: rgba(40, 50, 59, var(--text-opacity));
@@ -17259,16 +17331,31 @@ html {
       color: rgba(121, 132, 144, var(--text-opacity));
       font-size: 14px;
       line-height: 130%;
-      font-weight: 700;
     }
 
-.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkmark:before {
-          margin-right: 0.25rem;
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox {
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity));
+      }
+
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark:before {
+            margin-right: 0.25rem;
+            --text-opacity: 1;
+            color: #D6DDE5;
+            color: rgba(214, 221, 229, var(--text-opacity));
+          }
+
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.active {
           --text-opacity: 1;
-          color: #D6DDE5;
-          color: rgba(214, 221, 229, var(--text-opacity));
+          color: #515E6A;
+          color: rgba(81, 94, 106, var(--text-opacity));
         }
 
+.psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.disabled .psui-el-checkmark {
+            color: #798490 !important;
+          }
+
 .psui-el-draggable .psui-el-draggable-item-append {
       display: flex;
       --text-opacity: 1;
@@ -17291,6 +17378,18 @@ html {
       opacity: 0.2;
     }
 
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark span {
+          font-weight: 700;
+        }
+
+.psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 24px;
+          min-height: 24px;
+        }
+
 .psui-el-input-select {
   width: 100%;
   display: flex;
@@ -17590,6 +17689,7 @@ html {
       transition-property: opacity;
       transition-duration: 300ms;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 10;
       transition-delay: 0.4s;
     }
 
@@ -18003,7 +18103,8 @@ html {
 .psui-el-mini-tag span {
     width: 100%;
     font-weight: 700;
-    padding: 1px 8px 0px 8px;
+    text-transform: uppercase;
+    padding: 3px 8px 3px 8px;
     font-size: 10px;
     letter-spacing: 0.5px;
   }
@@ -18119,6 +18220,7 @@ html {
     gap: 1rem;
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
 .psui-el-toast.fill-intense.layout-info {
@@ -19734,7 +19836,7 @@ html {
   }
 
 .psui-el-tab-header button.status-disabled {
-      cursor: not-allowed
+      cursor: not-allowed;
     }
 
 .psui-el-tab-header button:focus {
@@ -19756,6 +19858,10 @@ html {
     border-radius: 0.375rem;
   }
 
+.psui-el-tab-header.layout-standard .psui-el-tooltip:not(:last-child) {
+        margin-right: 20px;
+      }
+
 .psui-el-tab-header.layout-standard button {
       --bg-opacity: 1;
       background-color: #F3F6F9;
@@ -19811,6 +19917,10 @@ html {
     border-color: rgba(230, 236, 242, var(--border-opacity));
   }
 
+.psui-el-tab-header.layout-underline .psui-el-tooltip:not(:last-child) {
+        margin-right: 20px;
+      }
+
 .psui-el-tab-header.layout-underline button {
       --text-opacity: 1;
       color: #798490;
@@ -19847,6 +19957,10 @@ html {
 
 /* ----------------------------------------- */
 
+.psui-el-tab-header.layout-folder .psui-el-tooltip:not(:last-child) {
+        margin-right: 20px;
+      }
+
 .psui-el-tab-header.layout-folder button {
       --bg-opacity: 1;
       background-color: #F3F6F9;
@@ -25600,11 +25714,13 @@ html {
   .sm\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .sm\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .sm\:psui-text-p{
@@ -40020,11 +40136,13 @@ html {
   .md\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .md\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .md\:psui-text-p{
@@ -54440,11 +54558,13 @@ html {
   .lg\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .lg\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .lg\:psui-text-p{
@@ -68860,11 +68980,13 @@ html {
   .xl\:psui-text-accent{
     font-size: 14px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .xl\:psui-text-accentSmall{
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
   .xl\:psui-text-p{

package/package.json

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

package/src/assets/scss/base.scss

@@ -27,6 +27,7 @@
 @import './components/PsInputTextArea.scss';
 @import './components/PsInputSelect.scss';
 @import './components/PsDraggable.scss';
+@import './components//PsBadgeWithIcon.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsBadgeWithIcon.scss

@@ -0,0 +1,40 @@
+@layer components {
+
+  .psui-el-badge-with-icon {
+    @apply psui-flex psui-items-center psui-py-1 psui-px-2 psui-rounded;
+
+    &.layout-grey{
+      @apply psui-bg-gray-10 psui-text-gray-50;
+    }
+    &.layout-blue{
+      @apply psui-bg-blue-20 psui-text-blue-60;
+    }
+    &.layout-green{
+      @apply psui-bg-green-10 psui-text-green-70;
+    }
+    &.layout-yellow{
+      @apply psui-bg-yellow-10 psui-text-yellow-70;
+    }
+
+
+    .psui-el-badge-with-icon-icon {
+      font-family: 'Material Icons Round';
+      font-weight: normal;
+      font-style: normal;
+      font-size: 16px;
+      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-badge-with-icon-message {
+      @apply psui-ml-1 psui-text-xsmall psui-font-bold;
+    }
+  }
+}

package/src/assets/scss/components/PsDraggable.scss

@@ -31,11 +31,25 @@
       padding: 7px 16px;
 
       &-title {
-        @apply psui-text-gray-50 psui-text-small psui-font-bold;
+        @apply psui-text-gray-50 psui-text-small;
 
-        .psui-el-checkmark {
-          &:before {
-            @apply psui-mr-1 psui-text-gray-30;
+        .psui-el-checkbox {
+          @apply psui-text-gray-50;
+
+          .psui-el-checkmark {
+            &:before {
+              @apply psui-mr-1 psui-text-gray-30;
+            }
+          }
+
+          &.active {
+            @apply psui-text-gray-60;
+          }
+
+          &.disabled {
+            .psui-el-checkmark {
+              color: #798490 !important;
+            }
           }
         }
       }
@@ -58,6 +72,19 @@
       &.on-drag-over {
         opacity: 0.2;
       }
+
+      .psui-el-checkbox.size-small {
+        .psui-el-checkmark {
+          span {
+            @apply psui-font-bold;
+          }
+          &:before {
+            @apply psui-flex psui-items-center psui-justify-center;
+            font-size: 24px;
+            min-height: 24px;
+          }
+        }
+      }
     }
   }
 }

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

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

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

@@ -6,7 +6,7 @@
     button {
       @apply transition-default psui-text-small;
       &.status-disabled {
-        @apply cursor-not-allowed
+        @apply cursor-not-allowed;
       }
 
       &:focus {
@@ -24,6 +24,12 @@
     /* ----------------------------------------- */
       &.layout-standard {
         @apply psui-rounded-md;
+
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
         
         button {
           @apply psui-bg-gray-10 psui-text-gray-60;
@@ -63,6 +69,12 @@
       &.layout-underline {
         @apply psui-border-b psui-border-gray-20;
 
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
+
         button {
           @apply psui-text-gray-50 psui-font-bold;
           border-bottom: 3px solid transparent;
@@ -91,6 +103,13 @@
     /* Layout Folder */
     /* ----------------------------------------- */
       &.layout-folder {
+
+        .psui-el-tooltip{
+          &:not(:last-child) {
+            margin-right: 20px;
+          }
+        }
+
         button {
           @apply psui-bg-gray-10 psui-text-gray-50 psui-rounded-t;
           padding: 9px 12px;

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

@@ -5,7 +5,7 @@
             @apply psui-relative;
 
             .psui-el-tooltip-dialog {
-                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
+                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-z-10;
                 transition-delay: 0.4s;
 
                 .psui-el-tooltip-content {

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="psui-el-badge-with-icon" :class="getComponentClass">
+    <i 
+      v-if="icon" 
+      :class="iconClass"
+      class="psui-el-badge-with-icon-icon"
+    >{{icon}}</i>
+    <span class="psui-el-badge-with-icon-message">{{message}}</span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'PsBadgeWithIcon',
+    props: {
+      icon: {
+        type: String,
+        default:'info'
+      },
+      /**
+       * It set any further css style that might be needed.
+       */
+      iconClass: {
+        type: String
+      },
+      message: {
+        type: String,
+        default: 'Lorem ipsum'
+      },
+      layout: {
+        type: String,
+        default: 'grey',
+        validator: (value) => ['grey', 'blue', 'green','yellow'].includes(value)
+      }
+    },
+    computed:{
+      getComponentClass(){
+        return `layout-${this.layout}`
+      }
+    }
+  }
+</script>
+

package/src/components/controls/PsCheckboxSimple.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class='psui-el-checkbox' @click="$emit('click')" :class="[getComponentClass, {'disabled':disabled}]" >
+    <input 
+      type="checkbox" 
+      :checked="checked" 
+      :disabled="disabled"
+      :name="label"
+    />
+    <label 
+      :for="label" 
+      class="psui-el-checkmark"
+    >
+      <slot v-if="!label" name="content"></slot>
+      <span v-else>{{ label }}</span>
+    </label>    
+  </div>
+</template>
+
+<script>
+//FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
+
+export default {
+  name: 'PsCheckboxSimple',
+  props: {
+    /**
+     * It sets the label of the checkbox input.
+     */
+    label: {
+      type: String,
+    },
+    /**
+     * It disables the checkbox input.
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * It set the of the checkbox input. eg: big and small.
+     */
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value)=> ['big', 'small'].includes(value)
+    },
+    /**
+     * It set the layout of the checkbox input. eg: default and mixed.
+     */
+    layout:{
+      type: String,
+      default: 'default',
+      validator: (value)=> ['default','mixed'].includes(value)
+    }
+  },
+  computed:{
+    getComponentClass(){
+      return `size-${this.size} layout-${this.layout}`
+    }, 
+  },
+}
+</script>

package/src/components/controls/PsDraggable.vue

@@ -36,6 +36,9 @@
                 size="small"
                 :value="column.isActive"
                 :label="column.title"
+                :class="{'active' : column.isActive}"
+                :disabled="column.isDisabled"
+                class="psui-el-draggable-item-checkbox"
                 @input="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
               />
             </span>
@@ -66,6 +69,24 @@ export default {
     module:{
       type: String
     },
+
+    /**
+     * It disables the input. All mouse events are disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
   },
+  computed: {
+    getStatus() {
+      console.log('var:', this.column.key)
+      if (this.column.key == 'compliance_margin') {
+        return true 
+      } else {
+        return false
+      }
+    },
+  }
 }
 </script>

package/src/components/controls/PsRadioButton.vue

@@ -1,23 +1,27 @@
 <template>
   <div class='psui-el-radio' :class="[getComponentClass, {'disabled':disabled}]" >
-    <input 
-      :id="label" 
-      type="radio" 
+    <input
+      :id="inputId"
+      type="radio"
       :value="inputValue"
       v-model="model"
       :disabled='disabled'      
     />
-    <label :for="label" class="psui-el-checkmark"><span>{{ label }}</span></label>    
+    <label :for="inputId" class="psui-el-checkmark"><span>{{ label }}</span></label>    
   </div>
-
+ 
 </template>
-
+ 
 <script>
 //FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
-
+ 
 export default {
   name: 'PsRadioButton',
   props: {
+    inputId: {
+      type: String,
+      default: ''
+    },
     /**
     * It sets the label of the radio button.
      */
@@ -29,10 +33,10 @@ export default {
     * It's the value of the checkbox
      */
     inputValue:{
-      type: String,
+      type: [String, Object],
     },
     value:{
-      type: String
+      type: [String, Object]
     },
     /**
     * It disables the radio button. All mouse events are disabled.
@@ -64,5 +68,4 @@ export default {
   }  
   },
 }
-</script>
-
+</script>

package/src/index.js

@@ -28,6 +28,8 @@ import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
 import PsInlineSelector from './components/controls/PsInlineSelector.vue'
 import PsScrollBar from './components/playground/PsScrollBar.vue'
 import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
+import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
+import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
 
 
 
@@ -63,6 +65,8 @@ export default {
     Vue.component('PsDropdownList', PsDropdownList)
     Vue.component('PsScrollBar', PsScrollBar)
     Vue.component('PsMiniTag', PsMiniTag)
+    Vue.component('PsCheckboxSimple', PsCheckboxSimple)
+    Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -112,6 +116,8 @@ export {
   PsDropdown,
   PsDropdownList,
   PsScrollBar,
-  PsMiniTag
+  PsMiniTag,
+  PsCheckboxSimple,
+  PsBadgeWithIcon
 }
 

package/src/stories/BadgeWithIcon.stories.js

@@ -0,0 +1,31 @@
+import  PsBadgeWithIcon  from '../components/badges-and-tags/PsBadgeWithIcon.vue'
+
+export default {
+    title: 'Components/BadgeWithIcon',
+    component: PsBadgeWithIcon,
+    argTypes: {
+    },
+  }
+  
+  const TemplateDefault = (args, {argTypes})=>({
+    props: Object.keys(argTypes),
+    components:{PsBadgeWithIcon},
+    template: `
+        <div style="display: flex; flex-direction: column;">
+          <div style="width: fit-content; display:flex; gap:70px; margin-left: 40px;"> 
+            <span>Grey</span>
+            <span style="margin-left: 8px;">Blue</span>
+            <span style="margin-left: 5px;">Green</span>
+            <span>Yellow</span>
+          </div>
+          <div style="width: fit-content; display:flex; gap:5px;"> 
+            <PsBadgeWithIcon/>
+            <PsBadgeWithIcon layout="blue"/>
+            <PsBadgeWithIcon layout="green"/>
+            <PsBadgeWithIcon layout="yellow"/>
+          </div>
+        </div>
+    `
+  })
+
+  export const Default = TemplateDefault.bind({}) 

package/src/stories/CheckboxSimple.stories.js

@@ -0,0 +1,48 @@
+import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
+// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/CheckboxSimple',
+  component: PsCheckboxSimple,
+}
+
+const defaultTemplate = (args, {argTypes}) => ({
+  props: Object.keys(argTypes),
+  components: { PsCheckboxSimple },
+  data: () => ({
+    checkBox1 : true
+  }),
+  template: `
+    <div style='display:flex; gap: 20px;'>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Resting</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple :checked="checkBox1" @click="checkBox1 = !checkBox1" label='Label 1' />
+          <PsCheckboxSimple v-bind="$props" label='Label 2' size='small' />
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Active</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple v-bind="$props" label='Label 3'  checked />
+          <PsCheckboxSimple v-bind="$props" label='Label 4'  checked size='small'/>
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Mixed</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple v-bind="$props" label='Label 5' layout='mixed' checked />
+          <PsCheckboxSimple v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Disabled</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckboxSimple v-bind="$props" label='Label 7' disabled/>
+          <PsCheckboxSimple v-bind="$props" label='Label 8' size='small' disabled/>
+        </div>
+      </div>
+    </div>
+    `
+})
+
+export const Default = defaultTemplate.bind({}) 

package/tailwind.config.js

@@ -54,8 +54,8 @@ module.exports = {
       big: ['16px', '130%'],
       small: ['14px', '130%'],
       xsmall: ['12px', '130%'],
-      accent: ['14px', '130%', { letterSpacing: '0.6px' }],
-      accentSmall: ['12px', '130%', { letterSpacing: '0.6px' }],
+      accent: ['14px', { lineHeight: '130%', letterSpacing: '0.6px' }],
+      accentSmall: ['12px', { lineHeight: '130%', letterSpacing: '0.6px' }],
       p: ['16px', '130%'],
       h1: ['28px', '130%'],
       h2: ['24px', '130%'],