@policystudio/policy-studio-ui-vue 1.0.20 → 1.0.24

package/src/components/tooltip/PsTooltip.vue

@@ -21,11 +21,10 @@
           class="
             psui-flex
             psui-flex-col
-            psui-py-1
-            psui-px-2
             psui-rounded-md
             psui-shadow-md
             psui-z-20
+            psui-p-4
           "
           aria-orientation="vertical"
           :class="cssClass"
@@ -69,7 +68,6 @@ export default {
     }
   },
   mounted() {
-      console.log(this.$attrs)
     document.addEventListener("resize", this.updatePosition)
   },
   beforeDestroy() {

package/src/index.js

@@ -18,15 +18,17 @@ import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
 import PsDraggable from './components/controls/PsDraggable.vue'
+// import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
+import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
 
 export default {
   install(Vue) {
-    Vue.component('PsButton',  PsButton)
-    Vue.component('PsCheckbox',  PsCheckbox)
-    Vue.component('PsDialog',  PsDialog)
-    Vue.component('PsToast',  PsToast)
-    Vue.component('PsTabHeader',  PsTabHeader)
-    Vue.component('PsRadioButton',  PsRadioButton)
+    Vue.component('PsButton', PsButton)
+    Vue.component('PsCheckbox', PsCheckbox)
+    Vue.component('PsDialog', PsDialog)
+    Vue.component('PsToast', PsToast)
+    Vue.component('PsTabHeader', PsTabHeader)
+    Vue.component('PsRadioButton', PsRadioButton)
     Vue.component('PsSlider', PsSlider)
     Vue.component('PsSwitch', PsSwitch)
     Vue.component('PsInput', PsInput)
@@ -41,7 +43,9 @@ export default {
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
     Vue.component('PsDraggable', PsDraggable)
-  }
+    // Vue.component('PsCardInfos', PsCardInfos)
+    Vue.component('PsChartLegend', PsChartLegend)
+  },
 }
 
 export {
@@ -63,5 +67,7 @@ export {
   PsTooltip,
   PsRichTooltip,
   PsDialogTooltip,
-  PsDraggable
-}
+  PsDraggable,
+  // PsCardInfos,
+  PsChartLegend,
+}

package/src/stories/Accordion.stories.js

@@ -1,35 +1,95 @@
-import PsAccordionItem, {iconTypes, fontCss} from "../components/accordion/PsAccordionItem.vue"
-import PsAccordion, {sizes} from "../components/accordion/PsAccordion.vue"
+import PsAccordionItem, {
+  iconTypes,
+  fontCss,
+} from '../components/accordion/PsAccordionItem.vue'
+import PsAccordion, { sizes } from '../components/accordion/PsAccordion.vue'
 
 export default {
-    title: 'Components/Accordion',
-    component: PsAccordion,
-    subcomponents: { PsAccordionItem },
-    argTypes:{
-        size: { control: { type: 'select', options: sizes } },
-        iconType: {control : {type: 'select', options: iconTypes}},
-        fontCss: {control : { type: 'select', options: fontCss}}
-    },
-    args: {
-        title: 'Section 1',
-    }
+  title: 'Components/Accordion',
+  component: PsAccordion,
+  subcomponents: { PsAccordionItem },
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } },
+    iconType: { control: { type: 'select', options: iconTypes } },
+    fontCss: { control: { type: 'select', options: fontCss } },
+  },
+  args: {
+    title: 'Section 1',
+  },
 }
 
-export const AccordionItem = (args, { argTypes }) => ({
-    props: Object.keys(argTypes, args),
-    components: { PsAccordionItem },
-    template: '<PsAccordionItem v-bind="$props"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p></PsAccordionItem>',
-})
-AccordionItem.parameters = {
-    controls: {
-        include: ['title', 'iconType', 'fontCss']
-    }
-}
 
-export const Accordion = (args, { argTypes }) => ({
-    props: Object.keys(argTypes, args),
-    components: { PsAccordion, PsAccordionItem },
-    template: '<PsAccordion v-bind="$props"><PsAccordionItem v-bind="$props"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p></PsAccordionItem><PsAccordionItem v-bind="$props"/></PsAccordion>',
-})
+export const Index = (args, { argTypes }) => ({
+  props: Object.keys(argTypes, args),
+  components: { PsAccordion, PsAccordionItem },
+  template:
+    `<div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">                    
 
+      <div>
+        <div class="psui-my-4">
+          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Big</h1>
+        </div>
+        <PsAccordion layout="big" class="psui-bg-white">
+          <PsAccordionItem title="Header 01">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>      
+          <PsAccordionItem title="Header 02">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>      
+          <PsAccordionItem title="Header 03">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>      
+        </PsAccordion>
+      </div>
 
+      <div>
+        <div class="psui-my-4">
+          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Medium</h1>
+        </div>
+        <PsAccordion layout="medium" class="psui-bg-white">
+          <PsAccordionItem title="Header 01">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>      
+          <PsAccordionItem title="Header 02" :opened="false">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>      
+          <PsAccordionItem title="Header 03">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>      
+        </PsAccordion>
+      </div>
+      
+      <div>
+        <div class="psui-my-4">
+          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Variations</h1>
+        </div>
+        <PsAccordion layout="medium" class="psui-bg-white" iconOpened="thumb_down" iconClosed="thumb_up">
+          <PsAccordionItem title="Custom Icon">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>
+          <PsAccordionItem title="Initial Content Opened" :opened="true">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>
+        </PsAccordion>
+      </div>
+      
+      <div>
+        <div class="psui-my-4">
+          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Custom Icons By Accordion Item</h1>
+        </div>
+        <PsAccordion layout="medium" class="psui-bg-white">
+          <PsAccordionItem title="Custom Icon" iconOpened="thumb_down" iconClosed="thumb_up">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>
+          <PsAccordionItem title="Initial Content Opened" :opened="true">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>
+          <PsAccordionItem title="Initial Content Opened" iconOpened="visibility_off" iconClosed="visibility_on">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+          </PsAccordionItem>
+        </PsAccordion>
+      </div>
+      
+     </div>    
+    `,
+})

package/src/stories/Button.stories.js

@@ -11,44 +11,92 @@ export default {
   },
 }
 
-const Template = (args, { argTypes }) => ({
+const TemplateDefault = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsButton },
   template: `
-  <PsButton v-bind="$props" />
+  <div style="display:flex; flex-direction: column;">
+    <p>Size: Big</p> 
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Solid Style</span>
+          <PsButton label='Left Icon'  layout='solid' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='solid' />
+          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: blue;">Outline Style</span>
+          <PsButton label='Left Icon'  layout='outline' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon'    layout='outline' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='outline'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='ghost' />
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='onlytext'/>
+          <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
+      </div>
+    </div>
+    <p>Size: Medium</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Solid Style</span>
+          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='solid'  size='medium'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: blue;">Outline Style</span>
+          <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='outline' size='medium'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='ghost' size='medium'/>
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='onlytext' size='medium'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left'size='medium'/>
+      </div>
+    </div>
+    <p>Size: Small</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Solid Style</span>
+          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='solid' size='small'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='onlytext' size='small'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left'size='small'/>
+      </div>
+    </div>
+  </div>
   `
 })
 
-export const Solid = Template.bind({})
-Solid.args = {
-  label: 'Solid button',
-  size: 'big',
-  disabled: false,
-  iconRight: 'add_circle'
-}
-
-export const Outline = Template.bind({})
-Outline.args = {
-  label: 'Outline button',
-  size: 'big',
-  disabled: false,
-  icon: 'add_circle',
-  outline: true
-}
-
-export const Ghost = Template.bind({})
-Ghost.args = {
-  label: 'Ghost button',
-  size: 'big',
-  disabled: false,
-  ghost: true
-}
-
-export const TextOnly = Template.bind({})
-TextOnly.args = {
-  label: 'TextOnly button',
-  disabled: false,
-  icon: 'add_circle',
-  size: 'big',
-  textOnly: true,
-}
+export const Default = TemplateDefault.bind({})

package/src/stories/CardInfos.stories.js

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

package/src/stories/ChartLegend.stories.js

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

package/src/stories/Chips.stories.js

@@ -8,8 +8,14 @@ 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>
                `
 })

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,7 +11,7 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 <div class="psui-flex">
-  <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 #5094D3</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>

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/Dialog.stories.js

@@ -3,32 +3,165 @@ 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>
+          `,
 })
 
+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({})
 Success.args = {
-  type: 'success',
+  status: 'success',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
 }
 
 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

@@ -9,16 +9,14 @@ const Template = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsDraggable },
     template: `
-        <div style='width: 200px'>
-            <PsDraggable v-bind='$props'>
-                <button>Teste 1</button>
-                <button>Teste 2</button>
-            </PSDraggable> 
+        <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+            <PsDraggable v-bind='$props'/>
         </div>
             `
 })
 
 export const Component = Template.bind({})
 Component.args = {
-    data: [{title: 'Teste 1', columns: [ 1 , 2 , 3, 4]}]
+    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

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