@policystudio/policy-studio-ui-vue 1.0.30 → 1.0.31

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,50 +1,133 @@
 <template>
-  <PsTooltip :layout="layout" :cssClass="cssClass" :title="title">
-    <template v-slot:trigger>
+  <div @mouseenter="open" v-click-outside="close" ref="tooltip" class='psui-el-tooltip'>
+    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
       <slot name="trigger"></slot>
-    </template>
-    <template
-      v-slot:content
-    >
-      <slot name="content"></slot> 
-      <button
-        v-if="buttonText"
-        @click="onClick"
+    </div>
+
+    <div class='psui-el-tooltip-wrapper'>
+      <div
+        role="menu"
+        ref="dialog"
+        class='psui-el-tooltip-dialog'
+        :class="cssClass"
       >
-        {{ buttonText }}
-      </button>
-    </template>
-  </PsTooltip>
+        <div
+          class="psui-el-tooltip-content"
+          aria-orientation="vertical"
+          :class="getComponentClass"
+        >
+          <h2 v-if="title">{{ title}}</h2>
+          <div class="psui-el-tooltip-content-wrapper">
+            <slot name="content"></slot>
+            <button
+              v-if="buttonText"
+              @click="onClick"
+            >
+              {{ buttonText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import PsTooltip from "./PsTooltip.vue"
 
 export default {
   name: "PsDialogTooltip",
-  components: { PsTooltip },
   props: {
-    text: {
-      type: String,
-    },
+    /**
+     * It sets the title of the tooltip if needed.
+     */
     title: {
       type: String,
     },
+    /**
+     * It sets the label of the button within the tooltip if needed.
+     */
     buttonText: {
       type: String,
     },
+    /**
+     * It sets the layout of the tooltip. eg: white, dark and color.
+     */
     layout: {
       type: String,
       default: "white",
       validator: (value) => ["white", "dark", "color"].includes(value),
     },
+    /**
+     * It sets a additional styling if needed.
+     */
     cssClass: {
       type: String,
       required: false,
     },
   },
-  emits: ["click"],
+  inheritAttrs: true,
+  emits: ["show", 'click'],
+  data() {
+    return {
+      show: false,
+      closingTimeout: null,
+    }
+  },
+  computed:{
+    getComponentClass(){
+      return `layout-${this.layout}`
+    }
+  },
+  mounted() {
+    document.addEventListener("resize", this.updatePosition)
+  },
+  beforeDestroy() {
+    document.removeEventListener("resize", this.updatePosition)
+  },
   methods: {
+    open() {
+      if (this.show || this.ignoreDialog) return
+      this.$emit("show")
+      this.show = true
+
+      this.$refs.dialog.style.display = "block"
+      this.$refs.dialog.style.opacity = 0
+
+      setTimeout(() => {
+        this.updatePosition()
+      }, 10)
+    },
+    close() {
+      if (this.show && this.$refs.dialog) {
+        this.$emit("close")
+        this.show = false
+
+        this.$refs.dialog.style.display = "none"
+      }
+    },
+    updatePosition() {
+      const dialog = this.$refs.dialog
+      const trigger = this.$refs.tooltiptrigger
+
+      const rectDialog = dialog.getBoundingClientRect()
+      const rectTrigger = trigger.getBoundingClientRect()
+      const windowWidth = document.documentElement.clientWidth
+      dialog.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
+
+      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+        dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else if (rectTrigger.x - Math.abs(rectTrigger.width-rectDialog.width) < 0) {
+        dialog.style.left = `${rectTrigger.x + 10}px`  
+      } else if (rectDialog.width >= rectTrigger.width){
+        dialog.style.left = `${rectTrigger.x - ((rectDialog.width - rectTrigger.width)/2)}px`
+      } else {
+        dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
+      }
+
+      setTimeout(() => {
+        dialog.style.opacity = 100
+      }, 100)
+    },
     onClick() {
       this.$emit("click", this.$event)
     },

package/src/components/tooltip/PsRichTooltip.vue

@@ -16,18 +16,21 @@ export default {
   name: "PsRichTooltip",
   components: { PsTooltip },
   props: {
+    /**
+     * It sets the title of the tooltip if needed.
+     */
     title: {
       type: String,
       default: "",
     },
+    /**
+     * It sets the layout of the tooltip. eg: gray, red and blue.
+     */
     layout: {
       type: String,
       default: "gray",
       validator: (type) => ["gray", "red", "blue"].includes(type),
     },
-    text: {
-      type: String,
-    },
     cssClass: {
       type: String,
       default: "",

package/src/components/tooltip/PsTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @mouseover="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
+  <div @mouseenter="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
     <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
       <slot name="trigger"></slot>
     </div>
@@ -30,16 +30,28 @@
 export default {
   name: "PsTooltip",
   props: {
+    /**
+     * It sets the title of the tooltip if needed.
+     */
     title: {
       type: String,
     },
+    /**
+     * It disables the dialog section.
+     */
     ignoreDialog: {
       type: Boolean,
       default: false,
     },
+    /**
+     * It sets the layout of the tooltip if needed. Usefull when using rich or dialog tooltip.
+     */
     layout:{
         type: String,
     },
+    /**
+     * It sets a additional styling if needed.
+     */
     cssClass:{
         type: String,
     }
@@ -91,12 +103,16 @@ export default {
       const rectDialog = dialog.getBoundingClientRect()
       const rectTrigger = trigger.getBoundingClientRect()
       const windowWidth = document.documentElement.clientWidth
-      dialog.style.top = `${rectTrigger.y + rectTrigger.height}px`
+      dialog.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
 
       if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
         dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else if (rectTrigger.x - Math.abs(rectTrigger.width-rectDialog.width) < 0) {
+        dialog.style.left = `${rectTrigger.x + 10}px`  
+      } else if (rectDialog.width >= rectTrigger.width){
+        dialog.style.left = `${rectTrigger.x - ((rectDialog.width - rectTrigger.width)/2)}px`
       } else {
-        dialog.style.left = `${rectTrigger.x}px`
+        dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
       }
 
       setTimeout(() => {

package/src/components/ui/PsIcon.vue

@@ -25,31 +25,55 @@ import imageLoader from '../../util/imageLoader'
 export default {
   name: 'AppIcon',
   props: {
+    /**
+     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+     */
     icon: {
       type: String,
       default: 'more_horiz'
     },
+    /**
+     * It sets the type of the icon.
+     */
     type: {
       type: String,
     },
+    /**
+     * It sets the style of the icon.
+     */
     iconClasses: {
       type: String
     },
+    /**
+     * It sets the size of the icon. 
+     */
     size: {
       type: [Number, String],
     },
+    /**
+     * It sets the width of the icon.
+     */
     width: {
       type: [Number, String],
       default: 24
     },
+    /**
+     * It sets the height of the icon.
+     */
     height: {
       type: [Number, String],
       default: 24
     },
+    /**
+     * It sets fill property of the icon.
+     */
     stroke: {
       type: String,
       default: null
     },
+    /**
+     * It sets the color of the icon.
+     */
     color: {
       type: String,
       default: null,
@@ -59,10 +83,16 @@ export default {
           typeof(tailwindConfig.theme.colors[value]) != 'undefined'
       }
     },
+    /**
+     * It set a animation icon if needed.
+     */
     loaderIcon: {
       type: String,
       default: 'hourglass_top'
     },
+    /**
+     * It sets a error when the icon is not available.
+     */
     loaderErrorIcon: {
       type: String,
       default: 'more_horiz'

package/src/index.js

@@ -5,6 +5,10 @@ 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 PsDropdown from './components/forms/PsDropdown.vue'
+import PsDropdownList from './components/forms/PsDropdownList.vue'
+import PsInputTextArea from './components/forms/PsInputTextArea.vue'
+import PsInputSelect from './components/forms/PsInputSelect.vue'
 import PsDialog from './components/notifications/PsDialog.vue'
 import PsToast from './components/notifications/PsToast.vue'
 import PsTabHeader from './components/tabs/PsTabHeader.vue'
@@ -22,8 +26,9 @@ 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'
+import PsScrollBar from './components/playground/PsScrollBar.vue'
+
+
 
 export default {
   install(Vue) {
@@ -53,6 +58,25 @@ export default {
     Vue.component('PsInlineSelector', PsInlineSelector)
     Vue.component('PsInputTextArea', PsInputTextArea)
     Vue.component('PsInputSelect', PsInputSelect)
+    Vue.component('PsDropdown',PsDropdown)
+    Vue.component('PsDropdownList', PsDropdownList)
+    Vue.component('PsScrollBar', PsScrollBar)
+    
+    Vue.directive('click-outside', {
+      bind: function (el, binding, vnode) {
+        el.clickOutsideEvent = function (event) {
+          // here I check that click was outside the el and his children
+          if (!(el == event.target || el.contains(event.target))) {
+            // and if it did, call method provided in attribute value
+            vnode.context[binding.expression](event)
+          }
+        }
+        document.body.addEventListener('click', el.clickOutsideEvent)
+      },
+      unbind: function (el) {
+        document.body.removeEventListener('click', el.clickOutsideEvent)
+      },
+    })
   },
 }
 
@@ -83,4 +107,8 @@ export {
   PsInlineSelector,
   PsInputTextArea,
   PsInputSelect,
+  PsDropdown,
+  PsDropdownList,
+  PsScrollBar
 }
+

package/src/stories/Accordion.stories.js

@@ -1,21 +1,10 @@
-import PsAccordionItem, {
-  iconTypes,
-  fontCss,
-} from '../components/accordion/PsAccordionItem.vue'
-import PsAccordion, { sizes } from '../components/accordion/PsAccordion.vue'
+import PsAccordionItem  from '../components/accordion/PsAccordionItem.vue'
+import PsAccordion 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',
-  },
 }
 
 
@@ -23,8 +12,8 @@ export const Index = (args, { argTypes }) => ({
   props: Object.keys(argTypes, args),
   components: { PsAccordion, PsAccordionItem },
   template:
-    `<div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">                    
-
+    `
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">                    
       <div>
         <div class="psui-my-4">
           <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Big</h1>
@@ -32,6 +21,10 @@ export const Index = (args, { argTypes }) => ({
         <PsAccordion layout="big" class="psui-bg-white">
           <PsAccordionItem title="Header 01">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
           </PsAccordionItem>      
           <PsAccordionItem title="Header 02">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
@@ -49,6 +42,9 @@ export const Index = (args, { argTypes }) => ({
         <PsAccordion layout="medium" class="psui-bg-white">
           <PsAccordionItem title="Header 01">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
           </PsAccordionItem>      
           <PsAccordionItem title="Header 02" :opened="false">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
@@ -58,38 +54,6 @@ export const Index = (args, { argTypes }) => ({
           </PsAccordionItem>      
         </PsAccordion>
       </div>
-      
-      <div>
-        <div class="psui-my-4">
-          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Variations</h1>
-        </div>
-        <PsAccordion layout="medium" class="psui-bg-white" iconOpened="thumb_down" iconClosed="thumb_up">
-          <PsAccordionItem title="Custom Icon">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-          <PsAccordionItem title="Initial Content Opened" :opened="true">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-        </PsAccordion>
-      </div>
-      
-      <div>
-        <div class="psui-my-4">
-          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Custom Icons By Accordion Item</h1>
-        </div>
-        <PsAccordion layout="medium" class="psui-bg-white">
-          <PsAccordionItem title="Custom Icon" iconOpened="thumb_down" iconClosed="thumb_up">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-          <PsAccordionItem title="Initial Content Opened" :opened="true">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-          <PsAccordionItem title="Initial Content Opened" iconOpened="visibility_off" iconClosed="visibility_on">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-        </PsAccordion>
-      </div>
-      
-     </div>    
+    </div>  
     `,
 })

package/src/stories/Button.stories.js

@@ -6,12 +6,12 @@ export default {
   argTypes: {
     size: { control: { type: 'select', options: sizes } },
     disabled: { control: 'boolean' },
-    icon: { control: { type: 'select',  options: icons} },
-    iconRight: { control: { type: 'select',  options: icons} }
+    icon: { control: { type: 'select', options: icons } },
+    iconRight: { control: { type: 'select', options: icons } },
   },
 }
 
-const TemplateDefault = (args, {argTypes}) => ({
+const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsButton },
   template: `
@@ -19,7 +19,7 @@ const TemplateDefault = (args, {argTypes}) => ({
     <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>
+          <span style="text-align: center; color: black;">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' />
@@ -46,11 +46,20 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Text Only' layout='onlytext'/>
           <PsButton label='Disabled' layout='onlytext' 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: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='caution' />
+          <PsButton label='Disabled' layout='caution' 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>
+          <span style="text-align: center; color: black;">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'/>
@@ -77,11 +86,18 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Text Only' layout='onlytext' size='medium'/>
           <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' 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: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='caution' size='medium'/>
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled 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>
+          <span style="text-align: center; color: black;">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'/>
@@ -94,9 +110,16 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Text Only' layout='onlytext' size='small'/>
           <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' 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: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='caution' size='small'/>
+          <PsButton label='Disabled' layout='caution' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
     </div>
     </div>
-  `
+  `,
 })
 
 export const Default = TemplateDefault.bind({})

package/src/stories/Chips.stories.js

@@ -13,8 +13,12 @@ const Template = (args, { argTypes }) => ({
       isChecked: null,
     }
   },
-  template: `<div >
-              <PsChips v-bind='$props' @update:checked='isChecked = $event' :checked='isChecked'/>
+  template: `<div style="display:flex; gap: 10px;">
+                <PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
               </div>
               `
 })
@@ -41,4 +45,12 @@ export const Checkbox = Template.bind({})
 Checkbox.args = {
   label: 'Checkbox Chip',
   type: 'checkbox'
+}
+
+export const Rich = Template.bind({})
+Rich.args = {
+  label: 'Rich Chip',
+  type: 'button',
+  icon: 'text_snippet',
+  layout: 'rich'
 }

package/src/stories/Dropdown.stories.js

@@ -1,32 +1,55 @@
 import PsDropdown from '../components/forms/PsDropdown.vue'
+import PsDropdownList from '../components/forms/PsDropdownList.vue'
 export default {
-  title: 'Components/Dropdown',
-  component: PsDropdown,
-  argTypes: {},
+title: 'Components/Dropdown',
+component: { PsDropdown , PsDropdownList },
 }
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { PsDropdown },
+  components: { PsDropdown, PsDropdownList },
   template: `
-  <div>
-    <PsDropdown
-      buttonClasses="psui-p-3 "
-    >
+  <div style='background: #E6ECF2; width:900px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
+    <PsDropdown>
       <template v-slot:dropdownTrigger>
-        <div>Custom Trigger</div>
+        <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
       </template>
       <template v-slot:items>
+        <p class='psui-uppercase psui-text-gray-40' style='padding: 24px 20px 8px 20px;'>divider label</p>
         <ul>
-          <li>Small list of the drop down</li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>public</i><span>Selectable option 01</span></li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>share</i><span>Selectable option 02</span></li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>person</i><span>Selectable option 03</span></li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>settings</i><span>Selectable option 04</span></li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>save</i><span>Selectable option 05</span></li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
         </ul>
+        <p class='psui-uppercase psui-text-gray-40' style='padding: 24px 20px 8px 20px;'>divider label</p>
+        <ul>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 01</li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 02</li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 03</li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 04</li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 05</li>
+          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 06</li>
+        </ul>   
+   
+      </template>
+    </PsDropdown>
+    <PsDropdown>
+      <template v-slot:dropdownTrigger>
+      <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
       </template>
+      <template v-slot:items>
+        <PsDropdownList v-bind='$props'></PsDropdownList>
+        </template>
     </PsDropdown>
   </div>
   `,
 })
 
-export const CustomTrigger = Template.bind({})
-CustomTrigger.args = {
-  title: 'Custom trigger',
+
+export const DropdownMenu= Template.bind({})
+DropdownMenu.args = {
+  items: ["Selectable option 01", "Selectable option 02", "Selectable option 03", "Selectable option 04"]
 }

package/src/stories/Playground.stories.js

@@ -0,0 +1,16 @@
+import PsScrollBar from '../components/playground/PsScrollBar.vue'
+
+export default {
+    title: 'Components/Playground',
+    component: PsScrollBar
+}
+
+const Template =  (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PsScrollBar},
+    template: `
+            <PsScrollBar v-bind='$props'></PsScrollbar>
+    `
+})
+
+export const ScrollBar = Template.bind({})