@policystudio/policy-studio-ui-vue 1.0.18 → 1.0.22

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

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

@@ -0,0 +1,32 @@
+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/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 = {}

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),
@@ -19,13 +19,44 @@ const TemplateDefault = (args, { argTypes }) => ({
       }
     }
   },
-  template: `
-    <div class="psui-p-8 psui-bg-gray-10">
-      <PsInput v-bind="$props" />
-      <PsInput v-bind="$props" class="psui-mt-8" :validator="validator"  />
+  template: `    
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
+
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
+      
+      <PsInput label="Resting without hint" />
+      
+      <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+
+      <PsInput v-bind="{...$props, label: 'Focus'}" />
+
+      <PsInput label="Typing" placeholder="Type to see the effect..." />
+
+      <PsInput v-bind="{...$props, label: 'Active', active: true }" />
+      
+      
+      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
+
+      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
+      
+      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+
+
+      <PsInput label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+
     </div>
   `
-});
+})
 
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -52,20 +83,20 @@ const TemplateSlots = (args, { argTypes }) => ({
       </PsInput>
     </div>
   `
-});
+})
 
-export const InputText = TemplateDefault.bind({});
+export const InputText = TemplateDefault.bind({})
 InputText.args = {
-  label: 'Label',
+  label: 'Input Text',
   placeholder: 'Placeholder',
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
   mini: false,
   value: 10,
-};
+}
 
-export const InputPassword = TemplateDefault.bind({});
+export const InputPassword = TemplateDefault.bind({})
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -73,9 +104,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 +114,4 @@ InputSlots.args = {
   disabled: false,
   required: false,
   mini: false,
-};
+}

package/src/stories/MiniTag.stories.js

@@ -0,0 +1,46 @@
+import PsMiniTag, {
+  typeOptions,
+} from '../components/badges-and-tags/PsMiniTag.vue'
+
+export default {
+  title: 'Components/MiniTag',
+  component: PsMiniTag,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: typeOptions,
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsMiniTag },
+  template: '<PsMiniTag v-bind="$props" />',
+})
+
+export const Informative = Template.bind({})
+Informative.args = {
+  type: 'informative',
+  message: 'This is an info alert',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  type: 'success',
+  message: 'This is a success alert',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  type: 'warning',
+  message: 'This is a warning alert',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  type: 'error',
+  message: 'This is an error alert',
+}

package/src/stories/ProgressBar.stories.js

@@ -0,0 +1,23 @@
+import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
+
+export default {
+  title: 'Components/ProgressBar',
+  component: PsProgressBar,
+  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: { PsProgressBar },
+  template: '<PsProgressBar v-bind="$props" />',
+})
+
+export const ProgressBar = Template.bind({})
+ProgressBar.args = {}