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

package/src/components/tooltip/PsTooltip.vue

@@ -1,39 +1,25 @@
 <template>
-  <div @mouseover="open" @mouseleave="close" ref="tooltip">
-    <div ref="tooltiptrigger">
+  <div @mouseover="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
+    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
       <slot name="trigger"></slot>
     </div>
 
-    <div class="psui-relative">
+    <div class='psui-el-tooltip-wrapper'>
       <div
         role="menu"
         ref="dialog"
-        class="
-          psui-fixed
-          psui-hidden
-          psui-opacity-0
-          psui-transition-opacity
-          psui-duration-500
-          psui-ease-in-out
-        "
+        class='psui-el-tooltip-dialog'
+        :class="cssClass"
       >
         <div
-          class="
-            psui-flex
-            psui-flex-col
-            psui-rounded-md
-            psui-shadow-md
-            psui-z-20
-            psui-p-4
-          "
+          class="psui-el-tooltip-content"
           aria-orientation="vertical"
-          :class="cssClass"
+          :class="getComponentClass"
         >
-          <h2 v-if="title" class="psui-font-bold">{{ title}}</h2>
-          <slot name="dialog" class="psui-font-normal"
-            >
-          </slot
-          >
+          <h2 v-if="title">{{ title}}</h2>
+          <div class="psui-el-tooltip-content-wrapper">
+            <slot name="content"></slot>
+          </div>
         </div>
       </div>
     </div>
@@ -51,12 +37,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    keepOpen: {
-      default: false,
+    layout:{
+        type: String,
     },
     cssClass:{
         type: String,
-        default: 'psui-bg-gray-50 psui-text-white'
     }
   },
   inheritAttrs: true,
@@ -67,6 +52,11 @@ export default {
       closingTimeout: null,
     }
   },
+  computed:{
+    getComponentClass(){
+      return `layout-${this.layout}`
+    }
+  },
   mounted() {
     document.addEventListener("resize", this.updatePosition)
   },

package/src/components/ui/PsIcon.vue

@@ -27,7 +27,7 @@ export default {
   props: {
     icon: {
       type: String,
-      required: true
+      default: 'more_horiz'
     },
     type: {
       type: String,
@@ -39,11 +39,11 @@ export default {
       type: [Number, String],
     },
     width: {
-      type: Number,
+      type: [Number, String],
       default: 24
     },
     height: {
-      type: Number,
+      type: [Number, String],
       default: 24
     },
     stroke: {
@@ -54,7 +54,7 @@ export default {
       type: String,
       default: null,
       validator: value => {
-        return value.includes('psui-text-') && 
+        return value?.includes('psui-text-') && 
           typeof(tailwindConfig.theme.colors[value.replace('psui-text-', '')]) != 'undefined' ||
           typeof(tailwindConfig.theme.colors[value]) != 'undefined'
       }
@@ -78,15 +78,15 @@ export default {
     getIconType() {
       if(this.imageLoadError || !this.finishedImageLoad) return 'material-icons'
       if(this.type) return this.type
-      if(!this.icon.includes('/')) return 'material-icons'
-      if(!this.icon.includes('.svg')) return 'url'
+      if(!this.icon?.includes('/')) return 'material-icons'
+      if(!this.icon?.includes('.svg')) return 'url'
       return 'svg'
     },
     getIcon() {
-      if(!this.icon.includes('/')) return this.icon
+      if(!this.icon?.includes('/')) return this.icon ? this.icon : this.loaderErrorIcon
       if(!this.finishedImageLoad && !this.imageLoadError && this.loaderIcon) return this.loaderIcon
       if(this.imageLoadError) return this.loaderErrorIcon
-      return this.icon ? this.icon : ''
+      return this.icon ? this.icon : this.loaderErrorIcon
     },
     getIconClasses() {
       if(this.iconClasses) return this.iconClasses
@@ -111,7 +111,7 @@ export default {
     }
   },
   mounted() {
-    if(this.icon.includes('/')) this.loadImage()
+    if(this.icon?.includes('/')) this.loadImage()
   },
   methods: {
     loadImage() {

package/src/index.js

@@ -20,6 +20,9 @@ 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'
+import PsInlineSelector from './components/controls/PsInlineSelector.vue'
+import PsInputTextArea from './components/forms/PsInputTextArea.vue'
+import PsInputSelect from './components/forms/PsInputSelect.vue'
 
 export default {
   install(Vue) {
@@ -45,6 +48,9 @@ export default {
     Vue.component('PsDraggable', PsDraggable)
     Vue.component('PsCardInfos', PsCardInfos)
     Vue.component('PsChartLegend', PsChartLegend)
+    Vue.component('PsInlineSelector', PsInlineSelector)
+    Vue.component('PsInputTextArea', PsInputTextArea)
+    Vue.component('PsInputSelect', PsInputSelect)
   },
 }
 
@@ -70,4 +76,7 @@ export {
   PsDraggable,
   PsCardInfos,
   PsChartLegend,
+  PsInlineSelector,
+  PsInputTextArea,
+  PsInputSelect
 }

package/src/stories/Button.stories.js

@@ -1,112 +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>
-    <p>Size: Custom</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: 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' disabled icon='verified' iconPosition='left' />
-      </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/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'}]
+}