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

package/src/stories/Button.stories.js

@@ -1,102 +1,102 @@
-import PsButton, { sizes } from '../components/buttons/PsButton.vue'
-const icons = ['add_circle', 'delete', 'done', 'info', 'send']
-export default {
-  title: 'Components/Button',
-  component: PsButton,
-  argTypes: {
-    size: { control: { type: 'select', options: sizes } },
-    disabled: { control: 'boolean' },
-    icon: { control: { type: 'select',  options: icons} },
-    iconRight: { control: { type: 'select',  options: icons} }
-  },
-}
-
-const TemplateDefault = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: { PsButton },
-  template: `
-  <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 Default = TemplateDefault.bind({})
+import PsButton, { sizes } from '../components/buttons/PsButton.vue'
+const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/Button',
+  component: PsButton,
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } },
+    disabled: { control: 'boolean' },
+    icon: { control: { type: 'select',  options: icons} },
+    iconRight: { control: { type: 'select',  options: icons} }
+  },
+}
+
+const TemplateDefault = (args, {argTypes}) => ({
+  props: Object.keys(argTypes),
+  components: { PsButton },
+  template: `
+  <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 Default = TemplateDefault.bind({})

package/src/stories/Checkbox.stories.js

@@ -3,46 +3,43 @@ import PsCheckbox from '../components/controls/PsCheckbox.vue'
 export default {
   title: 'Components/Checkbox',
   component: PsCheckbox,
-  argTypes: {
-    disabled: { control: 'boolean' },
-  },
 }
 
-const Template = (args, { argTypes }) => ({
+const defaultTemplate = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
-  components: { PsCheckbox },
-  data: () => {
-    return {
-      items: {
-        BUILDING_TYPE: {
-          label: 'Building Type',
-          key: 'BUILDING_TYPE'
-        },
-        CLIMATE_ZONE: {
-          label: 'Climate Zone', 
-          key: 'CLIMATE_ZONE'
-        },
-        YEAR: {
-          label: "Year",
-          key: "YEAR"
-        }
-      },
-      selected: []
-    }
-  },
+  components: { PsCheckbox},
   template: `
-  <div>
-    <PsCheckbox v-bind="$props" v-for="(item, key) in items" :label="item.label" :inputValue="item.key" v-model="selected" />
-    <p>Checked: {{ selected }}</p>
-  </div>
-  `
+    <div style='display:flex; gap: 20px;'>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Resting</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckbox v-bind="$props" label='Label 1' />
+          <PsCheckbox v-bind="$props" label='Label 2' size='small' />
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Active</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckbox v-bind="$props" label='Label 3'  checked />
+          <PsCheckbox v-bind="$props" label='Label 4'  checked size='small'/>
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Mixed</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckbox v-bind="$props" label='Label 5' layout='mixed' checked />
+          <PsCheckbox v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
+        </div>
+      </div>
+      <div style='display:flex; flex-direction:column; gap:5px;'>
+        <p>Disabled</p>
+        <div style='display: flex; flex-direction:column; gap: 10px;'>
+          <PsCheckbox v-bind="$props" label='Label 7' disabled/>
+          <PsCheckbox v-bind="$props" label='Label 8' size='small' disabled/>
+        </div>
+      </div>
+    </div>
+    `
 })
 
-export const Default = Template.bind({})
-Default.args = {
-  size: 18,
-  disabled: false,
-  label: 'Label',
-  labelClasses: '',
-}
- 
+export const Default = defaultTemplate.bind({}) 

package/src/stories/Chips.stories.js

@@ -1,55 +1,44 @@
-import PsChips from "../components/chips/PsChips.vue"
-
-export default {
-    title: 'Components/Chips',
-    component: PsChips,
-}
-
-const Template = (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { PsChips },
-    data: ()=>{
-        return{
-            isChecked: null,
-        }
-    },
-    template: `<div >
-                <PsChips v-bind='$props' @update:checked='isChecked = $event' :checked='isChecked'/>
-                <pre>{{isChecked}}</pre>
-               </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
+import PsChips from "../components/chips/PsChips.vue"
+
+export default {
+  title: 'Components/Chips',
+  component: PsChips,
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsChips },
+  data: ()=>{
+    return{
+      isChecked: null,
+    }
+  },
+  template: `<div >
+              <PsChips v-bind='$props' @update:checked='isChecked = $event' :checked='isChecked'/>
+              </div>
+              `
+})
+
+export const Simple = Template.bind({})
+Simple.args = {
+  label: 'Simple Chip',
+  icon:"",
+}
+
+export const SimpleWithIcon = Template.bind({})
+SimpleWithIcon.args = {
+  label: 'Simple With Icon',
+  icon: 'home',
+}
+
+export const Radio = Template.bind({})
+Radio.args = {
+  label: 'Radio Chip',
+  type:'radio'
+}
+
+export const Checkbox = Template.bind({})
+Checkbox.args = {
+  label: 'Checkbox Chip',
+  type: 'checkbox'
 }

package/src/stories/ClimateZoneBadge.stories.js

@@ -1,15 +1,8 @@
 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 }) => ({

package/src/stories/Dialog.stories.js

@@ -5,21 +5,6 @@ export default {
   component: PsDialog,
 }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsDialog },
-  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 },
@@ -32,10 +17,7 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="horizontal">
-                <template v-slot:content>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
+              <PsDialog theme="informative" layout="horizontal" message="teste">                
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -44,8 +26,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="horizontal">
-                <template v-slot:content>
+              <PsDialog theme="success" layout="horizontal" :hasClose="false">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -56,8 +38,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="horizontal">
-                <template v-slot:content>
+              <PsDialog theme="alert" layout="horizontal">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -72,8 +54,8 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="informative" layout="vertical">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -82,10 +64,10 @@ const TemplateExamples = (args, { argTypes }) => ({
               </PsDialog>
             </div>
             
-            <div>
+            <div class="psui-text-red">
               <h2>Success</h2>
-              <PsDialog status="success" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="success" layout="vertical" :hasClose="false">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -96,8 +78,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="alert" layout="vertical">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -115,7 +97,7 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="informative" layout="vertical" message="This component uses only the props message!">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -124,7 +106,7 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="success" layout="vertical" message="This component uses only the props message!" :hasClose="false">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -133,7 +115,7 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="alert" layout="vertical" message="This component uses only the props message!">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -146,22 +128,4 @@ const TemplateExamples = (args, { argTypes }) => ({
 
 export const Examples = TemplateExamples.bind({})
 
-export const Informative = Template.bind({})
-Informative.args = {
-  status: 'informative',
-  layout: 'vertical',
-  cssClass: 'psui-w-2/3'
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  status: 'success',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  status: 'alert',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
 

package/src/stories/InlineSelector.stories.js

@@ -0,0 +1,16 @@
+import PsInlineSelector from "../components/controls/PsInlineSelector.vue"
+
+export default {
+    title: 'Components/InlineSelector',
+    component: PsInlineSelector,
+}
+
+const TemplateDefault = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: {PsInlineSelector},
+    template: `
+        <PsInlineSelector v-bind="$props"></PsInlineSelector>
+    `
+})
+
+export const Default = TemplateDefault.bind({})

package/src/stories/InputSelect.stories.js

@@ -0,0 +1,22 @@
+import PsInputSelect from '../components/forms/PsInputSelect.vue'
+
+export default {
+    title: 'Components/InputSelect',
+    component: PsInputSelect
+}
+
+const TemplateDefault = (args, {argTypes})=> ({
+    props: Object.keys(argTypes),
+    components: {PsInputSelect},
+    template: `
+    <div style='width:300px; display:flex; flex-direction: column; gap:20px;'>
+        <PsInputSelect v-bind="$props" label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" disabled label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+    `
+})
+
+export const Default = TemplateDefault.bind({})
+Default.args = {
+    items: [{title:'Text 1', value:'Value 1'}, {title:'Text 2', value:'Value 2'}]
+}

package/src/stories/InputTextArea.stories.js

@@ -0,0 +1,25 @@
+import PsInputTextArea from '../components/forms/PsInputTextArea.vue'
+
+export default {
+    title: 'Components/Input Textarea',
+    component: PsInputTextArea,
+}
+
+const Template = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: {PsInputTextArea},
+    template: `
+    <div style='background-color:#F3F6F9; width:400px; height: 100%; padding: 20px 20px; display: flex: display; flex-direction: column;'>
+        <div style='display: flex; align-items:center; gap:30px;'>
+            <h1>Default</h1>
+            <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" optionalLabel="Optional helper/feedback text"></PsInputTextArea>    
+        </div>
+        <div style='display: flex; align-items:center; gap:30px; margin-top:40px;'>
+            <h1>Disable</h1>
+            <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" disabled ></PsInputTextArea>
+        </div>
+    </div>
+    `
+}) 
+
+export const Default = Template.bind({})