@policystudio/policy-studio-ui-vue 1.0.99 → 1.1.0

package/dist/css/psui_styles.css

@@ -3923,6 +3923,83 @@ video {
     font-weight: 700;
   }
 
+.psui-el-tag-scope {
+  display: flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-right: 0.5rem;
+  height: 1.5rem;
+  --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));
+  width: 150px;
+}
+
+.psui-el-tag-scope-icon {
+    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;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.125rem;
+  }
+
+.psui-el-tag-scope-true {
+    --text-opacity: 1;
+    color: #44A06A;
+    color: rgba(68, 160, 106, var(--text-opacity));
+    background-color: #D3EFDE;
+  }
+
+.psui-el-bar-chart {
+  display: flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  font-size: 12px;
+  line-height: 130%;
+  font-weight: 700;
+  overflow: hidden;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-right: 0.5rem;
+  height: 1.5rem;
+  position: relative;
+  background-color: #D4E7F0;
+  width: 150px;
+}
+
+.psui-el-bar-chart-total {
+    --text-opacity: 1;
+    color: #00465F;
+    color: rgba(0, 70, 95, var(--text-opacity));
+    margin-left: auto;
+    position: relative;
+    z-index: 1;
+  }
+
+.psui-el-bar-chart-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: #8AC6D9;
+  }
+
 .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.0.99",
+  "version": "1.1.0",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -25,7 +25,6 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "dayjs": "^1.11.7",
     "vue": "^2.6.11"
   },
   "devDependencies": {

package/src/assets/scss/base.scss

@@ -31,6 +31,8 @@
 @import './components/PsBadgeWithIcon.scss';
 @import './components/PsTestimonialCard.scss';
 @import './components/PsDateCardInfo.scss';
+@import './components/PsTagScope.scss';
+@import './components/PsBarChart.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsBarChart.scss

@@ -0,0 +1,17 @@
+@layer components {
+  .psui-el-bar-chart {
+    @apply psui-flex psui-items-center psui-rounded psui-text-xsmall psui-font-bold psui-overflow-hidden psui-py-1 psui-pr-2 psui-h-6 psui-relative;
+    background-color: #D4E7F0;
+    width: 150px;
+
+    &-total {
+      @apply psui-text-blue-70 psui-ml-auto psui-relative;
+      z-index: 1;
+    }
+
+    &-bar {
+      @apply psui-absolute psui-top-0 psui-left-0 psui-h-full;
+      background-color: #8AC6D9;
+    }
+  }
+}

package/src/assets/scss/components/PsTagScope.scss

@@ -0,0 +1,16 @@
+@layer components {
+  .psui-el-tag-scope {
+    @apply psui-flex psui-items-center psui-rounded psui-py-1 psui-pr-2 psui-h-6 psui-bg-gray-10 psui-text-gray-50;
+    width: 150px;
+
+    &-icon {
+      @apply psui-icon psui-mx-auto;
+      font-size: 1.125rem;
+    }
+
+    &-true {
+      @apply psui-text-green-70;
+      background-color: #D3EFDE;
+    }
+  }
+}

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

@@ -10,24 +10,21 @@
 </template>
 
 <script>
-
-import dayjs from 'dayjs'
-
 export default {
-    name:'PsDateCardInfo',
-    props:{
-        date:{
-            type:String,
-            default:'',
-        }
+  name: 'PsDateCardInfo',
+  props: {
+    date: {
+      type: [Date, String],
+      default: new Date(),
+    }
+  },
+  computed: {
+    getMonthFromDate() {
+      return (new Date(this.date))?.toLocaleString('default', { month: 'short' }) 
     },
-    computed:{
-      getMonthFromDate(){
-        return dayjs(this.date).format('MMM')
-      },
-      getDayFromDate(){
-        return dayjs(this.date).format('DD')
-      }
+    getDayFromDate() {
+      return (new Date(this.date))?.toLocaleString('default', { day: '2-digit' }) 
     }
+  }
 }
 </script>

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

@@ -0,0 +1,31 @@
+<template>
+  <div 
+    class="psui-el-tag-scope" 
+    :class="getComponentClass"
+  >
+    <span class="psui-el-tag-scope-icon">{{ getComponentIcon }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsTagScope',
+  props: {
+    included: {
+      type: Boolean,
+      default: true
+    },
+  },
+  computed: {
+    getComponentClass() {
+      return `psui-el-tag-scope-${this.included}`
+    },
+    getComponentIcon() {
+      return this.included ? 'check' : 'remove'
+    }
+  },
+}
+</script>
+
+<style> /* Please, use the file src/assets/scss/components/PsTagScope.scss */ </style>
+

package/src/components/data-graphics/PsBarChart.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="psui-el-bar-chart">
+    <p 
+      v-if="showNumber"
+      class="psui-el-bar-chart-total"
+    >{{ total }}</p>
+
+    <div 
+      class="psui-el-bar-chart-bar"
+      :style="{width: `${fillWidth}%`}"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsBarChart',
+  props: {
+    showNumber: {
+      type: Boolean,
+      default: true
+    },
+    total: {
+      type: String,
+      default: '5,0',
+    },
+    fillWidth: {
+      type: Number,
+      default: 50
+    },
+  },
+  computed: {}
+}
+</script>

package/src/index.js

@@ -42,6 +42,8 @@ import PsProgressBar from './components/badges-and-tags/PsProgressBar.vue'
 import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
 import PsTestimonialCard from './components/badges-and-tags/PsTestimonialCard.vue'
 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'
 
 export default {
   install(Vue) {
@@ -84,6 +86,8 @@ export default {
     Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
     Vue.component('PsTestimonialCard',PsTestimonialCard)
     Vue.component('PsDateCardInfo',PsDateCardInfo)
+    Vue.component('PsTagScope',PsTagScope)
+    Vue.component('PsBarChart',PsBarChart)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -142,6 +146,8 @@ export {
   PsProgressBar,
   PsRadioButtonSimple,
   PsTestimonialCard,
-  PsDateCardInfo
+  PsDateCardInfo,
+  PsTagScope,
+  PsBarChart
 }
 

package/src/stories/BadgeWithIcon.stories.js

@@ -1,7 +1,7 @@
 import  PsBadgeWithIcon  from '../components/badges-and-tags/PsBadgeWithIcon.vue'
 
 export default {
-    title: 'Components/BadgeWithIcon',
+    title: 'Badges & Tags/Badges/BadgeWithIcon',
     component: PsBadgeWithIcon,
     argTypes: {
     },

package/src/stories/BarChart.stories.js

@@ -0,0 +1,17 @@
+import PsBarChart from '../components/data-graphics/PsBarChart.vue'
+export default {
+  title: 'Data Graphics/Charts/BarChart',
+  component: PsBarChart,
+}
+
+const defaultTemplate = (args, {argTypes}) => ({
+  props: Object.keys(argTypes),
+  components: { PsBarChart },
+  template: `
+    <div style='padding: 20px;'>
+      <PsBarChart v-bind="$props"/>
+    </div>
+    `
+})
+
+export const BarChart = defaultTemplate.bind({}) 

package/src/stories/ChartLegend.stories.js

@@ -1,7 +1,7 @@
 import PsChartLegend from '../components/badges-and-tags/PsChartLegend.vue'
 
 export default {
-  title: 'Components/ChartLegend',
+  title: 'Badges & Tags/Badges/ChartLegend',
   component: PsChartLegend,
   argTypes: {},
 }

package/src/stories/Checkbox.stories.js

@@ -1,7 +1,7 @@
 import PsCheckbox from '../components/controls/PsCheckbox.vue'
 // const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
-  title: 'Components/Checkbox',
+  title: 'Controls & Selectors/Checkbox',
   component: PsCheckbox,
 }
 

package/src/stories/CheckboxSimple.stories.js

@@ -1,7 +1,7 @@
 import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
 // const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
-  title: 'Components/Inputs V2/Checkbox',
+  title: 'Text fields & Forms/Inputs V2/Checkbox',
   component: PsCheckboxSimple,
 }
 

package/src/stories/ClimateZoneBadge.stories.js

@@ -1,7 +1,7 @@
 import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
 
 export default {
-  title: 'Components/ClimateZoneBadge',
+  title: 'Badges & Tags/Badges/ClimateZoneBadge',
   component: PsClimateZoneBadge,
 }
 

package/src/stories/CostEffectBar.stories.js

@@ -1,7 +1,7 @@
 import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
 
 export default {
-  title: 'Components/CostEffectBar',
+  title: 'Badges & Tags/Badges/CostEffectBar',
   component: PsCostEffectBar,
   argTypes: {
     value: {

package/src/stories/Datatable.stories.js

@@ -2,7 +2,7 @@ import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
 import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
 
 export default {
-    title: 'Components/DataTable',
+    title: 'Data Tables/DataTable',
     component: PsDataTable,
     subcomponents: { PsDataTableItem },
     argTypes: {

package/src/stories/DateCardInfo.stories.js

@@ -19,6 +19,6 @@ export default {
 
 export const Default = Template.bind({})
 
-Default.args ={
-  date:'23/05/2023'
+Default.args = {
+  date: new Date()
 }

package/src/stories/Dialog.stories.js

@@ -1,7 +1,7 @@
 import PsDialog from '../components/notifications/PsDialog.vue'
 
 export default {
-  title: 'Components/Dialog',
+  title: 'Notifications/Dialog',
   component: PsDialog,
 }
 

package/src/stories/Draggable.stories.js

@@ -1,7 +1,7 @@
 import PsDraggable from '../components/controls/PsDraggable.vue'
 
 export default {
-  title: 'Components/Draggable',
+  title: 'Controls & Selectors/Draggable',
   component: PsDraggable 
 }
 

package/src/stories/HighlightRippleDot.stories.js

@@ -1,9 +1,8 @@
 import PsHighlightRippleDot from '../components/badges-and-tags/PsHighlightRippleDot.vue'
 
 export default {
-  title: 'Components/HighlightRippleDot',
+  title: 'Badges & Tags/Badges/HighlightRippleDot',
   component: PsHighlightRippleDot,
-  argTypes: {},
 }
 
 const Template = (args, { argTypes }) => ({

package/src/stories/InlineSelector.stories.js

@@ -1,18 +1,18 @@
 import PsInlineSelector from '../components/controls/PsInlineSelector.vue'
 
 export default {
-    title: 'Components/InlineSelector',
-    component: PsInlineSelector,
+  title: 'Controls & Selectors/InlineSelector',
+  component: PsInlineSelector,
 }
 
 const TemplateDefault = (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: {PsInlineSelector},
-    template: `
+  props: Object.keys(argTypes),
+  components: {PsInlineSelector},
+  template: `
     <div style="width: auto; margin-right: auto; display: flex; align-items: center;">  
         <PsInlineSelector v-bind="$props"></PsInlineSelector>
     </div>
-        `
+  `
 })
 
 export const Default = TemplateDefault.bind({})

package/src/stories/Input.stories.js

@@ -1,6 +1,6 @@
 import PsInput from '../components/forms/PsInput.vue'
 export default {
-  title: 'Components/Input',
+  title: 'Text fields & Forms/Input',
   component: PsInput,
   argTypes: {
     disabled: { control: 'boolean' },

package/src/stories/InputSelect.stories.js

@@ -1,8 +1,8 @@
 import PsInputSelect from '../components/forms/PsInputSelect.vue'
 
 export default {
-    title: 'Components/InputSelect',
-    component: PsInputSelect
+  title: 'Text fields & Forms/InputSelect',
+  component: PsInputSelect
 }
 
 const TemplateDefault = (args, {argTypes})=> ({

package/src/stories/InputTextArea.stories.js

@@ -1,25 +1,25 @@
 import PsInputTextArea from '../components/forms/PsInputTextArea.vue'
 
 export default {
-    title: 'Components/Input Textarea',
-    component: PsInputTextArea,
+  title: 'Text fields & Forms/Input Textarea',
+  component: PsInputTextArea,
 }
 
 const Template = (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: {PsInputTextArea},
-    template: `
-    <div style='background-color:#F3F6F9; width:400px; height: 100%; padding: 20px 20px; display: flex: display; flex-direction: column;'>
-        <div style='display: flex; align-items:center; gap:30px;'>
-            <h1>Default</h1>
-            <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" optionalLabel="Optional helper/feedback text"></PsInputTextArea>    
-        </div>
-        <div style='display: flex; align-items:center; gap:30px; margin-top:40px;'>
-            <h1>Disable</h1>
-            <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" disabled ></PsInputTextArea>
-        </div>
-    </div>
-    `
+  props: Object.keys(argTypes),
+  components: {PsInputTextArea},
+  template: `
+  <div style='background-color:#F3F6F9; width:400px; height: 100%; padding: 20px 20px; display: flex: display; flex-direction: column;'>
+      <div style='display: flex; align-items:center; gap:30px;'>
+          <h1>Default</h1>
+          <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" optionalLabel="Optional helper/feedback text"></PsInputTextArea>    
+      </div>
+      <div style='display: flex; align-items:center; gap:30px; margin-top:40px;'>
+          <h1>Disable</h1>
+          <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" disabled ></PsInputTextArea>
+      </div>
+  </div>
+  `
 }) 
 
 export const Default = Template.bind({})

package/src/stories/MiniTag.stories.js

@@ -3,7 +3,7 @@ import PsMiniTag, {
 } from '../components/badges-and-tags/PsMiniTag.vue'
 
 export default {
-  title: 'Components/MiniTag',
+  title: 'Badges & Tags/Tags/Mini Tag',
   component: PsMiniTag,
   argTypes: {
     type: {

package/src/stories/ProgressBar.stories.js

@@ -1,7 +1,7 @@
 import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
 
 export default {
-  title: 'Components/ProgressBar',
+  title: 'Badges & Tags/Badges/ProgressBar',
   component: PsProgressBar,
   argTypes: {
     value: {

package/src/stories/RadioButton.stories.js

@@ -1,7 +1,7 @@
 import PsRadioButton from '../components/controls/PsRadioButton.vue'
 
 export default {
-  title: 'Components/Radio Button',
+  title: 'Controls & Selectors/Radio Button',
   component: PsRadioButton,
  }
 

package/src/stories/RadioButtonSimple.stories.js

@@ -1,7 +1,7 @@
 import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue'
 
 export default {
-    title: 'Components/Inputs V2/RadioButton',
+    title: 'Text fields & Forms/Inputs V2/RadioButton',
     component: PsRadioButtonSimple,
   }
 

package/src/stories/Switch.stories.js

@@ -1,6 +1,6 @@
 import PsSwitch from '../components/controls/PsSwitch.vue'
 export default {
-  title: 'Components/Switch',
+  title: 'Controls & Selectors/Switch',
   component: PsSwitch,
 }
 

package/src/stories/TableResults.stories.js

@@ -3,7 +3,7 @@ import PsTableResultsHead from '../components/table-results/PsTableResultsHead.v
 import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
 
 export default {
-  title: 'Components/TableResults',
+  title: 'Data Tables/TableResults',
   component: { PsTableResults, PsTableResultsHead },
   argTypes: {
     onClick: { action: 'clicked' },

package/src/stories/TagScope.stories.js

@@ -0,0 +1,17 @@
+import PsTagScope from '../components/badges-and-tags/PsTagScope.vue'
+export default {
+  title: 'Badges & Tags/Tags/Tag Scope',
+  component: PsTagScope,
+}
+
+const defaultTemplate = (args, {argTypes}) => ({
+  props: Object.keys(argTypes),
+  components: { PsTagScope },
+  template: `
+    <div style='padding: 20px;'>
+      <PsTagScope v-bind="$props"/>
+    </div>
+    `
+})
+
+export const TagScope = defaultTemplate.bind({}) 

package/src/stories/Toast.stories.js

@@ -1,6 +1,6 @@
 import PsToast from '../components/notifications/PsToast.vue'
 export default {
-  title: 'Components/Toast',
+  title: 'Notifications/Toast',
   component: PsToast,
 }