@policystudio/policy-studio-ui-vue 1.0.19 → 1.0.23

package/src/stories/Chips.stories.js

@@ -1,4 +1,4 @@
-import PsChips, { type } from "../components/chips/PsChips.vue";
+import PsChips from "../components/chips/PsChips.vue"
 
 export default {
     title: 'Components/Chips',
@@ -8,42 +8,48 @@ export default {
 const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsChips },
+    data: ()=>{
+        return{
+            isChecked: null,
+        }
+    },
     template: `<div >
-               <PsChips v-bind='$props'/>
+                <PsChips v-bind='$props' @update:checked='isChecked = $event' :checked='isChecked'/>
+                <pre>{{isChecked}}</pre>
                </div>
                `
 })
 
-export const Simple = Template.bind({});
+export const Simple = Template.bind({})
 Simple.args = {
     title: 'Simple Chip',
     icon:"",
     type: 'text'
 }
 
-export const SimpleWithIcon = Template.bind({});
+export const SimpleWithIcon = Template.bind({})
 SimpleWithIcon.args = {
     title: 'Simple With Icon',
     icon: 'home',
     type: 'text'
 }
 
-export const Radio = Template.bind({});
+export const Radio = Template.bind({})
 Radio.args = {
     title: 'Radio Chip',
     type:'radio'
 }
 
-export const Checkbox = Template.bind({});
+export const Checkbox = Template.bind({})
 Checkbox.args = {
     title: 'Checkbox Chip',
     type: 'checkbox'
 }
 
-export const Rich = Template.bind({});
+export const Rich = Template.bind({})
 Rich.args = {
     title: 'Rich chips',
     type: 'text',
     icon: 'description',
-    rich: 'true'
+    rich: true
 }

package/src/stories/ClimateZoneBadge.stories.js

@@ -0,0 +1,24 @@
+import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
+
+// const icons = ["area_chart"];
+
+export default {
+  title: 'Components/ClimateZoneBadge',
+  component: PsClimateZoneBadge,
+  argTypes: {
+    type: {
+      // icon: { control: { type: "select", options: icons } },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsClimateZoneBadge },
+  template: '<PsClimateZoneBadge v-bind="$props" />',
+})
+
+export const ClimateZoneBadge = Template.bind({})
+ClimateZoneBadge.args = {
+  icon: 'area_chart',
+}

package/src/stories/Colors.stories.mdx

@@ -11,59 +11,59 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 <div class="psui-flex">
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="#5094D3">Blue #5094D3</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="#002A3A">Blue 80 #002A3A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="#00465F">Blue 70 #00465F</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="#318FAC">Blue 60 #318FAC</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="#64B5CE">Blue 50 #64B5CE</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy" data-to-copy="#E0EFF6">Blue 20 #E0EFF6</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy" data-to-copy="#ECF7FB">Blue 10 #ECF7FB</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="#ffffff">White #ffffff</div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="psui-bg-blue">Blue <div>#5094D3</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="psui-bg-blue-80">Blue 80 <div>#002A3A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="psui-bg-blue-70">Blue 70 <div>#00465F</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="psui-bg-blue-60">Blue 60 <div>#318FAC</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="psui-bg-blue-50">Blue 50 <div>#64B5CE</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy" data-to-copy="psui-bg-blue-20">Blue 20 <div>#E0EFF6</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy" data-to-copy="psui-bg-blue-10">Blue 10 <div>#ECF7FB</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="psui-bg-white">White <div>#FFFFFF</div></div>
 </div>
 
 ## Gray
 <div class="psui-flex">
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="#28323B">Gray 80 #28323B</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="#34404A">Gray 70 #34404A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="#515E6A">Gray 60 #515E6A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="#798490">Gray 50 #798490</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="#A2ACB7">Gray 40 #A2ACB7</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="#D6DDE5">Gray 30 #D6DDE5</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="#E6ECF2">Gray 20 #E6ECF2</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="#F3F6F9">Gray 10 #F3F6F9</div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="psui-bg-gray-80">Gray 80 <div>#28323B</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="psui-bg-gray-70">Gray 70 <div>#34404A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="psui-bg-gray-60">Gray 60 <div>#515E6A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="psui-bg-gray-50">Gray 50 <div>#798490</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="psui-bg-gray-40">Gray 40 <div>#A2ACB7</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="psui-bg-gray-30">Gray 30 <div>#D6DDE5</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="psui-bg-gray-20">Gray 20 <div>#E6ECF2</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="psui-bg-gray-10">Gray 10 <div>#F3F6F9</div></div>
 </div>
 
 ## Yellow
 <div class="psui-flex">
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="#834C0D">Yellow 80 #834C0D</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="#B87305">Yellow 70 #B87305</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="#EDAB3E">Yellow 20 #EDAB3E</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy" data-to-copy="#FDF3E3">Yellow 10 #FDF3E3</div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="psui-bg-yellow-80">Yellow 80 <div>#834C0D</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="psui-bg-yellow-70">Yellow 70 <div>#B87305</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="psui-bg-yellow-20">Yellow 20 <div>#EDAB3E</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy" data-to-copy="psui-bg-yellow-10">Yellow 10 <div>#FDF3E3</div></div>
 </div>
 
 ## Green
 <div class="psui-flex">
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="#286943">Green 80 #286943</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="#44A06A">Green 70 #44A06A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="#5DB883">Green 20 #5DB883</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy" data-to-copy="#DEF8E8">Green 10 #DEF8E8</div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="psui-bg-green-80">Green 80 <div>#286943</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="psui-bg-green-70">Green 70 <div>#44A06A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="psui-bg-green-20">Green 20 <div>#5DB883</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy" data-to-copy="psui-bg-green-10">Green 10 <div>#DEF8E8</div></div>
 </div>
 
 ## Red
 <div class="psui-flex">
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="#832F2E">Red 80 #832F2E</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="#AA3937">Red 70 #AA3937</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="#D65C5A">Red 20 #D65C5A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="#FCEBEB">Red 10 #FCEBEB</div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="psui-bg-red-80">Red 80 <div>#832F2E</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="psui-bg-red-70">Red 70 <div>#AA3937</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="psui-bg-red-20">Red 20 <div>#D65C5A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="psui-bg-red-10">Red 10 <div>#FCEBEB</div></div>
 </div>
 
 ## Chart colors
 <div class="psui-flex">
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="#518BE2">Sky #518BE2</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="#57C0BA">Teal #57C0BA</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="#8CCA82">Emerald #8CCA82</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="#E9CF74">Mustard #E9CF74</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="#FF906D">Orange #FF906D</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="#FF77B8">Pink #FF77B8</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="#9278C9">Purple #9278C9</div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="psui-bg-sky">Sky <div>#518BE2</div></div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="psui-bg-teal">Teal <div>#57C0BA</div></div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="psui-bg-emerald">Emerald <div>#8CCA82</div></div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="psui-bg-mustard">Mustard <div>#E9CF74</div></div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="psui-bg-orange">Orange <div>#FF906D</div></div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="psui-bg-pink">Pink <div>#FF77B8</div></div>
+  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="psui-bg-purple">Purple <div>#9278C9</div></div>
 </div>

package/src/stories/CostEffectBar.stories.js

@@ -0,0 +1,23 @@
+import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
+
+export default {
+  title: 'Components/CostEffectBar',
+  component: PsCostEffectBar,
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 100 },
+    },
+    breakEven: {
+      control: { type: 'number', min: 0, max: 100 },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsCostEffectBar },
+  template: '<PsCostEffectBar v-bind="$props" />',
+})
+
+export const SimpleProgressBar = Template.bind({})
+SimpleProgressBar.args = {}

package/src/stories/Datatable.stories.js

@@ -1,5 +1,5 @@
-import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue';
-import PsDataTableItem from '../components/datatable/PsDataTableItem.vue';
+import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
+import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
 
 export default {
     title: 'Components/DataTable',
@@ -12,29 +12,36 @@ export default {
 
 const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
-    components:  {PsDataTable}  ,
-    template: `<PsDataTable v-bind="$props" />`
+    components:  {PsDataTable},
+    template: `
+        <div style="width:400px;">
+            <PsDataTable v-bind="$props" />
+        </div>
+        `
 })
 
 const RichTemplate = (args, { argTypes } ) => ({
     props: Object.keys(argTypes),
     components: {PsDataTable, PsDataTableItem},
-    template: `<PsDataTable v-bind="$props">
+    template: `
+            <div style="width:400px">    
+                <PsDataTable v-bind="$props">
                     <PsDataTableItem v-bind="$props"/>
                </PsDataTable>
+            </div>   
     `
 })
 
 
-export const Simple = Template.bind({});
+export const Simple = Template.bind({})
 Simple.args = {
     header: ['year', 'month', 'sale'],
     data: [{ year: '1992', month: '12', sale: '1000.00' }, { year: '1989', month: '02', sale: '1200.00' }],
     footer: ['Footer 1', 'Footer 2', 'Footer 3'],
-    type: 'simple'
+    type: 'simple',
 }
 
-export const Rich = RichTemplate.bind({});
+export const Rich = RichTemplate.bind({})
 Rich.args = {
     header: ['header 1', 'header 2', 'header 3'],
     data:[[ [ 20, -3],  [  20,  2], [  20,  2] ], { header4: { value: 20, delta: 2}, header5: { value: 20, delta: 2}, header6: { value: 20, delta: 2} }],

package/src/stories/Dialog.stories.js

@@ -1,34 +1,167 @@
-import PsDialog from '../components/notifications/PsDialog.vue';
+import PsDialog from '../components/notifications/PsDialog.vue'
 
 export default {
   title: 'Components/Dialog',
   component: PsDialog,
-  argTypes: {
-    type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
-  },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
-  template: '<PsDialog v-bind="$props" />',
-});
+  template: `
+          <PsDialog v-bind="$props">
+            <template v-slot:content>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+            </template>
+            <template v-slot:action>
+              <p style='font-weight: 700;'>Action</p>
+            </template>
+          </PsDialog>
+          `,
+})
 
-export const Informative = Template.bind({});
+const TemplateExamples = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsDialog },
+  template: `
+          <div class="psui-grid psui-grid-cols-3 psui-gap-4">
+            
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Horizontal</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog status="informative" layout="horizontal">
+                <template v-slot:content>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog status="success" layout="horizontal">
+                <template v-slot:content>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog status="alert" layout="horizontal">
+                <template v-slot:content>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog status="informative" layout="vertical">
+                <template v-slot:content>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog status="success" layout="vertical">
+                <template v-slot:content>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog status="alert" layout="vertical">
+                <template v-slot:content>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+            
+            
+            <!-- PSDialog Vertical -->
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical Props Message</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog status="informative" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog status="success" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog status="alert" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+          </div>
+          `,
+})
+
+export const Examples = TemplateExamples.bind({})
+
+export const Informative = Template.bind({})
 Informative.args = {
-  type: 'informative',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+  status: 'informative',
+  layout: 'vertical',
+  cssClass: 'psui-w-2/3'
+}
 
-export const Success = Template.bind({});
+export const Success = Template.bind({})
 Success.args = {
-  type: 'success',
+  status: 'success',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 
-export const Warning = Template.bind({});
+export const Warning = Template.bind({})
 Warning.args = {
-  type: 'alert',
+  status: 'alert',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 

package/src/stories/Draggable.stories.js

@@ -0,0 +1,22 @@
+import PsDraggable from '../components/controls/PsDraggable.vue'
+
+export default {
+    title: 'Components/Draggable',
+    component: PsDraggable 
+}
+
+const Template = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PsDraggable },
+    template: `
+        <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+            <PsDraggable v-bind='$props'/>
+        </div>
+            `
+})
+
+export const Component = Template.bind({})
+Component.args = {
+    getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Teste1' , 'Teste2' , 'Teste3', 'Teste4']}, {title: 'PER HOME RESULTS', columns: [ 'Teste5' , 'Teste6' , 'Teste7', 'Teste8']}]},
+    module: 'comparison'
+}

package/src/stories/Dropdown.stories.js

@@ -1,10 +1,9 @@
-import PsDropdown from '../components/forms/PsDropdown.vue';
+import PsDropdown from '../components/forms/PsDropdown.vue'
 export default {
   title: 'Components/Dropdown',
   component: PsDropdown,
-  argTypes: {
-  },
-};
+  argTypes: {},
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -24,11 +23,10 @@ const Template = (args, { argTypes }) => ({
       </template>
     </PsDropdown>
   </div>
-  `
-});
+  `,
+})
 
-export const CustomTrigger = Template.bind({});
+export const CustomTrigger = Template.bind({})
 CustomTrigger.args = {
-  title: 'Custom trigger'
-};
- 
+  title: 'Custom trigger',
+}

package/src/stories/HighlightRippleDot.stories.js

@@ -0,0 +1,16 @@
+import PsHighlightRippleDot from '../components/badges-and-tags/PsHighlightRippleDot.vue'
+
+export default {
+  title: 'Components/HighlightRippleDot',
+  component: PsHighlightRippleDot,
+  argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsHighlightRippleDot },
+  template: '<PsHighlightRippleDot v-bind="$props" />',
+})
+
+export const HighlightRippleDot = Template.bind({})
+HighlightRippleDot.args = {}