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

package/src/index.js

@@ -1,28 +1,48 @@
-import PsButton from './components/buttons/PsButton.vue';
-import PsCheckbox from './components/controls/PsCheckbox.vue';
-import PsRadioButton from './components/controls/PsRadioButton.vue';
-import PsSlider from './components/controls/PsSlider.vue';
-import PsSwitch from './components/controls/PsSwitch.vue';
-import PsToggle from './components/controls/PsToggle.vue';
-import PsInput from './components/forms/PsInput.vue';
-import PsDialog from './components/notifications/PsDialog.vue';
-import PsToast from './components/notifications/PsToast.vue';
-import PsTabHeader from './components/tabs/PsTabHeader.vue';
+import PsButton from './components/buttons/PsButton.vue'
+import PsCheckbox from './components/controls/PsCheckbox.vue'
+import PsRadioButton from './components/controls/PsRadioButton.vue'
+import PsSlider from './components/controls/PsSlider.vue'
+import PsSwitch from './components/controls/PsSwitch.vue'
+import PsToggle from './components/controls/PsToggle.vue'
+import PsInput from './components/forms/PsInput.vue'
+import PsDialog from './components/notifications/PsDialog.vue'
+import PsToast from './components/notifications/PsToast.vue'
+import PsTabHeader from './components/tabs/PsTabHeader.vue'
+import PsAccordion from './components/accordion/PsAccordion.vue'
+import PsAccordionItem from './components/accordion/PsAccordionItem.vue'
+import PsChips from './components/chips/PsChips.vue'
+import PsDataTable from './components/datatable/PsDataTable.vue'
+import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
+import PsIcon from './components/ui/PsIcon.vue'
+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'
 
 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('PsSlider', PsSlider);
-    Vue.component('PsSwitch', PsSwitch);
-    Vue.component('PsInput', PsInput);
-    Vue.component('PsToggle', PsToggle);
+    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)
+    Vue.component('PsToggle', PsToggle)
+    Vue.component('PsAccordion', PsAccordion)
+    Vue.component('PsAccordionItem', PsAccordionItem)
+    Vue.component('PsChips', PsChips)
+    Vue.component('PsDataTable', PsDataTable)
+    Vue.component('PsDataTableItem', PsDataTableItem)
+    Vue.component('PsIcon', PsIcon)
+    Vue.component('PsTooltip', PsTooltip)
+    Vue.component('PsRichTooltip', PsRichTooltip)
+    Vue.component('PsDialogTooltip', PsDialogTooltip)
+    Vue.component('PsDraggable', PsDraggable)
   }
-};
+}
 
 export {
   PsButton,
@@ -34,5 +54,14 @@ export {
   PsSlider,
   PsSwitch,
   PsInput,
-  PsToggle
+  PsToggle,
+  PsAccordion,
+  PsAccordionItem,
+  PsChips,
+  PsDataTable,
+  PsDataTableItem,
+  PsTooltip,
+  PsRichTooltip,
+  PsDialogTooltip,
+  PsDraggable
 }

package/src/stories/Accordion.stories.js

@@ -0,0 +1,35 @@
+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',
+    }
+}
+
+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>',
+})
+
+

package/src/stories/Button.stories.js

@@ -1,4 +1,4 @@
-import PsButton, { sizes } from '../components/buttons/PsButton.vue';
+import PsButton, { sizes } from '../components/buttons/PsButton.vue'
 const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Button',
@@ -9,7 +9,7 @@ export default {
     icon: { control: { type: 'select',  options: icons} },
     iconRight: { control: { type: 'select',  options: icons} }
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -17,38 +17,38 @@ const Template = (args, { argTypes }) => ({
   template: `
   <PsButton v-bind="$props" />
   `
-});
+})
 
-export const Solid = Template.bind({});
+export const Solid = Template.bind({})
 Solid.args = {
   label: 'Solid button',
   size: 'big',
   disabled: false,
   iconRight: 'add_circle'
-};
+}
 
-export const Outline = Template.bind({});
+export const Outline = Template.bind({})
 Outline.args = {
   label: 'Outline button',
   size: 'big',
   disabled: false,
   icon: 'add_circle',
   outline: true
-};
+}
 
-export const Ghost = Template.bind({});
+export const Ghost = Template.bind({})
 Ghost.args = {
   label: 'Ghost button',
   size: 'big',
   disabled: false,
   ghost: true
-};
+}
 
-export const TextOnly = Template.bind({});
+export const TextOnly = Template.bind({})
 TextOnly.args = {
   label: 'TextOnly button',
   disabled: false,
   icon: 'add_circle',
   size: 'big',
   textOnly: true,
-};
+}

package/src/stories/Checkbox.stories.js

@@ -1,41 +1,48 @@
-import PsCheckbox, { sizes } from '../components/controls/PsCheckbox.vue';
-const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+import PsCheckbox from '../components/controls/PsCheckbox.vue'
+// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Checkbox',
   component: PsCheckbox,
   argTypes: {
     disabled: { control: 'boolean' },
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox },
   data: () => {
     return {
-      items: [
-        { label: 'Label 1', id: 1 },
-        { label: 'Label 2', id: 2 },
-        { label: 'Label 3', id: 3 }
-      ],
+      items: {
+        BUILDING_TYPE: {
+          label: 'Building Type',
+          key: 'BUILDING_TYPE'
+        },
+        CLIMATE_ZONE: {
+          label: 'Climate Zone', 
+          key: 'CLIMATE_ZONE'
+        },
+        YEAR: {
+          label: "Year",
+          key: "YEAR"
+        }
+      },
       selected: []
     }
   },
   template: `
   <div>
-    <PsCheckbox v-bind="$props" label="Label 1" inputValue="1" v-model="selected" />
-    <PsCheckbox v-bind="$props" label="Label 2" inputValue="2" v-model="selected" />
-    <PsCheckbox v-bind="$props" label="Label 3" inputValue="3" v-model="selected" />
+    <PsCheckbox v-bind="$props" v-for="(item, key) in items" :label="item.label" :inputValue="item.key" v-model="selected" />
     <p>Checked: {{ selected }}</p>
   </div>
   `
-});
+})
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   size: 18,
   disabled: false,
   label: 'Label',
   labelClasses: '',
-};
+}
  

package/src/stories/Chips.stories.js

@@ -0,0 +1,49 @@
+import PsChips from "../components/chips/PsChips.vue"
+
+export default {
+    title: 'Components/Chips',
+    component: PsChips,
+}
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsChips },
+    template: `<div >
+               <PsChips v-bind='$props'/>
+               </div>
+               `
+})
+
+export const Simple = Template.bind({})
+Simple.args = {
+    title: 'Simple Chip',
+    icon:"",
+    type: 'text'
+}
+
+export const SimpleWithIcon = Template.bind({})
+SimpleWithIcon.args = {
+    title: 'Simple With Icon',
+    icon: 'home',
+    type: 'text'
+}
+
+export const Radio = Template.bind({})
+Radio.args = {
+    title: 'Radio Chip',
+    type:'radio'
+}
+
+export const Checkbox = Template.bind({})
+Checkbox.args = {
+    title: 'Checkbox Chip',
+    type: 'checkbox'
+}
+
+export const Rich = Template.bind({})
+Rich.args = {
+    title: 'Rich chips',
+    type: 'text',
+    icon: 'description',
+    rich: true
+}

package/src/stories/Colors.stories.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import {Meta } from '@storybook/addon-docs';
 
 <Meta title="Colors" />
 
@@ -11,58 +11,59 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 <div class="psui-flex">
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80">Blue 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70">Blue 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60">Blue 60</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50">Blue 50</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white ">White</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 #5094D3</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="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80">Gray 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70">Gray 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60">Gray 60</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50">Gray 50</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40">Gray 40</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30">Gray 30</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20">Gray 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10">Gray 10</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="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80">Yellow 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70">Yellow 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20">Yellow 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10">Yellow 10</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="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80">Green 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70">Green 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20">Green 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10">Green 10</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="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80">Red 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70">Red 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20">Red 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10">Red 10</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 psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky">Sky</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal">Teal</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald">Emerald</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard">Mustard</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange">Orange</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink">Pink</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple">Purple</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/Datatable.stories.js

@@ -0,0 +1,50 @@
+import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
+import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
+
+export default {
+    title: 'Components/DataTable',
+    component: PsDataTable,
+    subcomponents: { PsDataTableItem },
+    argTypes: {
+        align: { control: { type: 'select', options: alignment } },
+    }
+}
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components:  {PsDataTable},
+    template: `
+        <div style="width:400px;">
+            <PsDataTable v-bind="$props" />
+        </div>
+        `
+})
+
+const RichTemplate = (args, { argTypes } ) => ({
+    props: Object.keys(argTypes),
+    components: {PsDataTable, PsDataTableItem},
+    template: `
+            <div style="width:400px">    
+                <PsDataTable v-bind="$props">
+                    <PsDataTableItem v-bind="$props"/>
+               </PsDataTable>
+            </div>   
+    `
+})
+
+
+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',
+}
+
+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} }],
+    footer: ['Footer 1', 'Footer 2', 'Footer 3'],
+    type: 'rich'
+}

package/src/stories/Dialog.stories.js

@@ -1,4 +1,4 @@
-import PsDialog from '../components/notifications/PsDialog.vue';
+import PsDialog from '../components/notifications/PsDialog.vue'
 
 export default {
   title: 'Components/Dialog',
@@ -6,29 +6,29 @@ export default {
   argTypes: {
     type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
   template: '<PsDialog v-bind="$props" />',
-});
+})
 
-export const Informative = Template.bind({});
+export const Informative = Template.bind({})
 Informative.args = {
   type: 'informative',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 
-export const Success = Template.bind({});
+export const Success = Template.bind({})
 Success.args = {
   type: 'success',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 
-export const Warning = Template.bind({});
+export const Warning = Template.bind({})
 Warning.args = {
   type: 'alert',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 

package/src/stories/Draggable.stories.js

@@ -0,0 +1,24 @@
+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: 200px'>
+            <PsDraggable v-bind='$props'>
+                <button>Teste 1</button>
+                <button>Teste 2</button>
+            </PSDraggable> 
+        </div>
+            `
+})
+
+export const Component = Template.bind({})
+Component.args = {
+    data: [{title: 'Teste 1', columns: [ 1 , 2 , 3, 4]}]
+}

package/src/stories/Dropdown.stories.js

@@ -0,0 +1,34 @@
+import PsDropdown from '../components/forms/PsDropdown.vue'
+export default {
+  title: 'Components/Dropdown',
+  component: PsDropdown,
+  argTypes: {
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsDropdown },
+  template: `
+  <div>
+    <PsDropdown
+      buttonClasses="psui-p-3 "
+    >
+      <template v-slot:dropdownTrigger>
+        <div>Custom Trigger</div>
+      </template>
+      <template v-slot:items>
+        <ul>
+          <li>Small list of the drop down</li>
+        </ul>
+      </template>
+    </PsDropdown>
+  </div>
+  `
+})
+
+export const CustomTrigger = Template.bind({})
+CustomTrigger.args = {
+  title: 'Custom trigger'
+}
+ 

package/src/stories/Input.stories.js

@@ -1,4 +1,4 @@
-import PsInput from '../components/forms/PsInput.vue';
+import PsInput from '../components/forms/PsInput.vue'
 export default {
   title: 'Components/Input',
   component: PsInput,
@@ -6,7 +6,7 @@ export default {
     disabled: { control: 'boolean' },
     required: { control: 'boolean' },
   },
-};
+}
 
 const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -25,7 +25,7 @@ const TemplateDefault = (args, { argTypes }) => ({
       <PsInput v-bind="$props" class="psui-mt-8" :validator="validator"  />
     </div>
   `
-});
+})
 
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -52,9 +52,9 @@ const TemplateSlots = (args, { argTypes }) => ({
       </PsInput>
     </div>
   `
-});
+})
 
-export const InputText = TemplateDefault.bind({});
+export const InputText = TemplateDefault.bind({})
 InputText.args = {
   label: 'Label',
   placeholder: 'Placeholder',
@@ -63,9 +63,9 @@ InputText.args = {
   required: false,
   mini: false,
   value: 10,
-};
+}
 
-export const InputPassword = TemplateDefault.bind({});
+export const InputPassword = TemplateDefault.bind({})
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -73,9 +73,9 @@ InputPassword.args = {
   disabled: false,
   required: false,
   mini: false,
-};
+}
 
-export const InputSlots = TemplateSlots.bind({});
+export const InputSlots = TemplateSlots.bind({})
 InputSlots.args = {
   label: 'Label',
   placeholder: 'Placeholder',
@@ -83,4 +83,4 @@ InputSlots.args = {
   disabled: false,
   required: false,
   mini: false,
-};
+}