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

package/dist/css/psui_styles.css

@@ -1128,11 +1128,17 @@ video {
         color: rgba(40, 50, 59, var(--text-opacity));
       }
 
-.psui-el-accordion-item-header-wrapper:hover {
-          --text-opacity: 1;
-          color: #318FAC;
-          color: rgba(49, 143, 172, var(--text-opacity));
-        }
+.psui-el-accordion-item-header-wrapper:hover .psui-el-accordion-item-icon {
+            --text-opacity: 1 !important;
+            color: #318FAC !important;
+            color: rgba(49, 143, 172, var(--text-opacity)) !important;
+          }
+
+.psui-el-accordion-item-header-wrapper:hover .psui-el-accordion-item-title{
+            --text-opacity: 1;
+            color: #318FAC;
+            color: rgba(49, 143, 172, var(--text-opacity));
+          }
 
 .psui-el-accordion-item-icon {
       font-family: 'Material Icons Round';
@@ -1186,18 +1192,17 @@ video {
           transform: rotate(180deg);
         }
 
-.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header, 
-      .psui-el-accordion .psui-el-accordion-item-header:hover {
-      --text-opacity: 1;
-      color: #318FAC;
-      color: rgba(49, 143, 172, var(--text-opacity));
-    }
+.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-icon {
+          --text-opacity: 1;
+          color: #318FAC;
+          color: rgba(49, 143, 172, var(--text-opacity));
+        }
 
-.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-icon, .psui-el-accordion .psui-el-accordion-item-header:hover .psui-el-accordion-item-icon {
-        --text-opacity: 1;
-        color: #318FAC;
-        color: rgba(49, 143, 172, var(--text-opacity));
-      }
+.psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper .psui-el-accordion-item-title{
+          --text-opacity: 1;
+          color: #318FAC;
+          color: rgba(49, 143, 172, var(--text-opacity));
+        }
 
 .psui-el-accordion .psui-el-accordion-item-content {
     list-style-type: none;
@@ -3918,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.98",
+  "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/PsAccordion.scss

@@ -5,7 +5,6 @@
     &-item {
       border-bottom: 1px solid #e6ecf2;
 
-
       &.disabled {
         .psui-el-accordion-item-header {
           .psui-el-accordion-item-header-wrapper {
@@ -24,7 +23,12 @@
           @apply psui-flex psui-w-full psui-cursor-pointer psui-transition-all psui-justify-between transition-default psui-text-gray-80;
         
           &:hover {
-            @apply psui-text-blue-60;
+            .psui-el-accordion-item-icon {
+              @apply psui-text-blue-60 !important;
+            }
+            .psui-el-accordion-item-title{
+              @apply psui-text-blue-60;
+            }
           }
         }
 
@@ -71,15 +75,19 @@
     }
 
     .psui-el-accordion-item {
-      &.status-opened .psui-el-accordion-item-header, 
-      &-header:hover {
-        @apply psui-text-blue-60;
-
-        .psui-el-accordion-item-icon {
-          @apply psui-text-blue-60;
+      &.status-opened .psui-el-accordion-item-header {
+        .psui-el-accordion-item-header-wrapper {
+          
+          .psui-el-accordion-item-icon {
+            @apply psui-text-blue-60;
+          }
+          .psui-el-accordion-item-title{
+            @apply psui-text-blue-60;
+          }
         }
       }
     }
+    
 
     .psui-el-accordion-item-content {
       @apply psui-list-none psui-text-gray-60 psui-mb-5;

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/components/table-results/PsTableResults.vue

@@ -24,6 +24,8 @@
             },
             `type-${item.type}`
           ]"
+          @mouseenter="onRowHover(index)"
+          @mouseleave="onRowHover(false)"
         >
           <td>
             <div 
@@ -85,6 +87,31 @@
                   @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                 />
               </p>
+              <PsRichTooltip 
+                v-if="shouldShowIcon(item)"
+                position="top"
+                layout="gray"
+                class="psui-inline-flex psui-cursor-default"
+                :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0', { 'is-last-deep' : item.last_deep }]"
+                :ignoreDialog="!shouldShowIcon(item)"
+              >
+                <template v-slot:trigger>
+                  <PsIcon
+                    :icon="getIcon(item)"
+                    class="psui-flex psui-text-gray-40 psui-cursor-pointer leading-none hover:psui-text-blue-60 psui-gap-3 psui-px-5 psui-py-1 transition-all"
+                    size="18"
+                    :style="{ display: 'flex' }"
+                    @click.native="executeCallback(item)"
+                  />
+                </template>
+                <template v-slot:content>
+                  <p
+                    class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
+                  >
+                    {{ getText(item) }}
+                  </p>
+                </template>
+              </PsRichTooltip>
             </div>
           </td>
 
@@ -236,7 +263,8 @@ export default {
     },
   },
   data: () => ({
-    collapsedRows : []
+    collapsedRows : [],
+    isHoveringRow: false
   }),
   computed: {
     getRows() {
@@ -323,7 +351,42 @@ export default {
       }
       this.$forceUpdate()
       this.$emit('collapse-row', this.collapsedRows)
-    }
+    }, 
+    shouldShowIcon(item) {
+      if(item.actions && (item.deep == 1 || item.deep == 2)) {
+        return true
+      } else {
+        return false
+      }
+    },
+    onRowHover(index) {
+      this.isHoveringRow = index
+    },
+    getIcon(item) {
+      if(item.actions && item.is_disabled) {
+        return item.actions[1].icon
+      } else if(item.actions && !item.is_disabled) {
+        return item.actions[0].icon
+      } else {
+        return ''
+      }
+    },
+    getText(item) {
+      if(item.actions && item.is_disabled) {
+        return item.actions[1].text
+      } else if(item.actions && !item.is_disabled) {
+        return item.actions[0].text
+      } else {
+        return ''
+      }
+    },
+    executeCallback(item) {
+      if(item.actions && item.is_disabled) {
+        item.actions[1].callback()
+      } else if(item.actions && !item.is_disabled) {
+        item.actions[0].callback()
+      }
+    },
   }
 }
 </script>

package/src/components/tooltip/PsRichTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position" :ignoreDialog="ignoreDialog">
+  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position" :ignoreDialog="ignoreDialog" :customPosition="customPosition">
     <template v-slot:trigger>
       <slot name="trigger"></slot>
     </template>
@@ -35,16 +35,19 @@ export default {
       type: String,
       default: '',
     },
-    position:{
+    position: {
       type: String,
       default: 'bottom',
-      validator: (value)=> ['bottom','top'].includes(value)
+      validator: (value)=> ['bottom', 'top', 'custom'].includes(value)
     },
     ignoreDialog: {
       type: Boolean,
       default: false
+    },
+    customPosition: {
+      type: String,
+      default: '',
     }
-
   },
 }
 </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' },
@@ -295,6 +295,22 @@ 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,
@@ -433,9 +449,98 @@ Simple.args = {
                 }
               ],
               'is_disabled': false,
-              'is_last': true,
+              'is_last': false,
               'index': '0-0-0',
               'last_deep': false
+            },
+            {
+              'data': {
+                'forecast_units_affected': 77.5,
+                'forecast_emissions_savings': 1427.3145433224304,
+                'forecast_therms_savings': 296624.89395,
+                'forecast_kwh_savings': -2102697.449999999,
+                'forecast_lifecycle_savings': 19620.35775000001,
+                'forecast_initial_cost': 408160,
+                'initial_cost': 2014,
+                'annual_bill_savings_avg': null,
+                'annual_bill_savings': -439.0199999999999,
+                'emissions_savings': 2.045,
+                'kwh_savings': -3999,
+                'therms_savings': 400.1415,
+                'lifecycle_savings': -4160.687805,
+                'compliance_margin': 29.6,
+                'baseline_fuel_type': 'Mixed-fuel',
+                'energy_savings_combined': 26.36819047,
+                'on_bill_cost_ratio': 1.460322707,
+                'tdv_benefit_to_cost_ratio': 1.42,
+                'simple_payback': 0,
+                'tdv2022_benefit_to_cost_ratio': 0
+              },
+              'deep': 2,
+              'id': 'policy:container-2459:climateZone-2-PGE',
+              'title': 'Climate Zone 2',
+              'items': [
+                {
+                  'data': {
+                    'forecast_units_affected': 77.5,
+                    'forecast_emissions_savings': 1427.3145433224304,
+                    'forecast_therms_savings': 296624.89395,
+                    'forecast_kwh_savings': -2102697.449999999,
+                    'forecast_lifecycle_savings': 19620.35775000001,
+                    'forecast_initial_cost': 408160,
+                    'initial_cost': 2014,
+                    'annual_bill_savings': -439.02,
+                    'emissions_savings': 2.045,
+                    'kwh_savings': -3999,
+                    'therms_savings': 400.1415,
+                    'lifecycle_savings': -4160.687805,
+                    'compliance_margin': 29.6,
+                    'baseline_fuel_type': 'Mixed-fuel',
+                    'energy_savings_combined': 26.36819047,
+                    'on_bill_cost_ratio': 1.460322707,
+                    'tdv_benefit_to_cost_ratio': 1.42,
+                    'simple_payback': 0,
+                    'tdv2022_benefit_to_cost_ratio': null
+                  },
+                  'deep': 3,
+                  'id': 'policy:container-2459:climateZone-2-PGE:fuel-all-electric',
+                  'title': 'All Electric',
+                  'items': null,
+                  'is_disabled': false,
+                  'is_last': false,
+                  'index': '0-0-0-0',
+                  'last_deep': true
+                },
+                {
+                  'data': {
+                    'initial_cost': 1806.25,
+                    'annual_bill_savings': 186.04,
+                    'emissions_savings': 0.42,
+                    'kwh_savings': 89.395,
+                    'therms_savings': 68.604,
+                    'lifecycle_savings': 5647.744375,
+                    'compliance_margin': 11.95,
+                    'baseline_fuel_type': 'Mixed-fuel',
+                    'energy_savings_combined': 7.16541574,
+                    'on_bill_cost_ratio': 2.784541829,
+                    'tdv_benefit_to_cost_ratio': 2.75,
+                    'simple_payback': 9.708831573,
+                    'tdv2022_benefit_to_cost_ratio': null
+                  },
+                  'deep': 3,
+                  'id': 'policy:container-2459:climateZone-2-PGE:fuel-mixed-fuel',
+                  'title': 'Mixed-fuel',
+                  'items': null,
+                  'is_disabled': true,
+                  'is_last': true,
+                  'index': '0-0-0-1',
+                  'last_deep': true
+                }
+              ],
+              'is_disabled': true,
+              'is_last': true,
+              'index': '0-0-1',
+              'last_deep': false
             }
           ],
           'is_disabled': false,

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,
 }