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

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;
@@ -18003,7 +18102,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 +18219,7 @@ html {
     gap: 1rem;
     font-size: 12px;
     line-height: 130%;
+    letter-spacing: 0.6px;
   }
 
 .psui-el-toast.fill-intense.layout-info {
@@ -25600,11 +25701,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 +40123,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 +54545,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 +68967,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.54",
   "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/components/badges-and-tags/PsBadgeWithIcon.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="psui-el-badge-with-icon" :class="getComponentClass">
+      <i 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'
+        },
+        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>
+
+<style scoped>
+    .material-icons-round{
+        font-size: 16px;
+    }
+</style>>
+

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/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%'],