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

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/InlineSelector.stories.js

@@ -9,8 +9,10 @@ const TemplateDefault = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: {PsInlineSelector},
     template: `
+    <div style="width: auto; margin-right: auto; display: flex; align-items: center;">  
         <PsInlineSelector v-bind="$props"></PsInlineSelector>
-    `
+    </div>
+        `
 })
 
 export const Default = TemplateDefault.bind({})

package/src/stories/InputSelect.stories.js

@@ -9,10 +9,18 @@ const TemplateDefault = (args, {argTypes})=> ({
     props: Object.keys(argTypes),
     components: {PsInputSelect},
     template: `
+  <div style='display:flex; gap: 30px;'>  
     <div style='width:300px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Default Select</span>
         <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>
+    <div style='width:90px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Mini Select</span>
+        <PsInputSelect v-bind="$props" layout="mini" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" layout="mini" disabled keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+  </div>
     `
 })
 

package/src/stories/MiniTag.stories.js

@@ -21,26 +21,32 @@ const Template = (args, { argTypes }) => ({
   template: '<PsMiniTag v-bind="$props" />',
 })
 
-export const Informative = Template.bind({})
-Informative.args = {
-  type: 'informative',
+export const Info = Template.bind({})
+Info.args = {
+  layout: 'info',
   message: 'This is an info alert',
 }
 
 export const Success = Template.bind({})
 Success.args = {
-  type: 'success',
+  layout: 'success',
   message: 'This is a success alert',
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
-  type: 'warning',
+  layout: 'warning',
   message: 'This is a warning alert',
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  type: 'error',
+  layout: 'error',
   message: 'This is an error alert',
 }
+
+export const Default = Template.bind({})
+Default.args = {
+  layout: 'default',
+  message: 'This is a default color',
+}

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({})

package/src/stories/Switch.stories.js

@@ -7,6 +7,12 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsSwitch },
+  data(){
+    return {
+      dt: false
+
+    }
+  },
   template: `
     <div style='display: flex; gap:10px;'> 
       <div style='display: flex; gap: 10px; flex-direction: column; margin-right: 10px;'>
@@ -16,8 +22,8 @@ const Template = (args, { argTypes }) => ({
       </div>
       <div style='display: flex; gap: 10px; flex-direction: column;'>
         <span>Disable</span>
-        <PsSwitch v-bind="$props" label='Switch1'  :value="${false}" size='big'/>
-        <PsSwitch v-bind="$props" label='Switch2' :value="${false}" size='small'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch1'   size='big'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch2' size='small'/>
       </div>
       <div style='display: flex; gap: 10px; flex-direction: column;'>
       <span>Enable</span>

package/src/stories/Toast.stories.js

@@ -11,38 +11,38 @@ const Template = (args, { argTypes }) => ({
   <div style="display: flex; gap: 30px;">
     <div style="display: flex; flex-direction: column; gap: 5px; width:500px;">
       <PsToast v-bind="$props" message="This is a info alert" layout="info" icon="info" fill="intense" >
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
       <PsToast v-bind="$props" message="This is a success alert" layout="success" icon="check_circle" >
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
       <PsToast v-bind="$props" message="This is a warning alert" layout="warning" icon="warning">
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
       <PsToast v-bind="$props" message="This is a an error alert" layout="error" icon="warning" >
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
     </div>
     <div style="display: flex; flex-direction: column; gap: 5px; width:500px;">
       <PsToast v-bind="$props" message="This is a info alert" layout="info" icon="info" fill="soft" >
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
       <PsToast v-bind="$props" message="This is a success alert" layout="success" icon="check_circle" fill="soft">
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
       <PsToast v-bind="$props" message="This is a warning alert" layout="warning" icon="warning" fill="soft">
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
       <PsToast v-bind="$props" message="This is a an error alert" layout="error" icon="warning" fill="soft">
-        <p>Action 1</p>
-        <p>Action 2</p>
+        <p class="hover:psui-underline">Action 1</p>
+        <p class="hover:psui-underline">Action 2</p>
       </PsToast>
     </div>
   <div>

package/src/stories/Tooltip.stories.js

@@ -13,7 +13,7 @@ const TemplateDialog = (args, {argTypes}) => ({
     components: {PsDialogTooltip},
     template: `
     <div style='display: flex; justify-content: space-between;'>
-        <PsDialogTooltip v-bind='$props' layout='white' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-48'>
+        <PsDialogTooltip v-bind='$props' layout='white' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-64'>
             <template v-slot:trigger>                      
                   <p>Trigger</p>                  
             </template>
@@ -21,7 +21,7 @@ const TemplateDialog = (args, {argTypes}) => ({
                    <p>Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.</p> 
             </template>
         </PsDialogTooltip>
-        <PsDialogTooltip v-bind='$props' layout='dark' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-48'>
+        <PsDialogTooltip v-bind='$props' layout='dark' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-64'>
             <template v-slot:trigger>                      
                   <p>Trigger</p>                  
             </template>
@@ -29,7 +29,7 @@ const TemplateDialog = (args, {argTypes}) => ({
                    <p>Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.</p> 
             </template>
         </PsDialogTooltip>
-        <PsDialogTooltip v-bind='$props' layout='color' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-48'>
+        <PsDialogTooltip v-bind='$props' layout='color' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-64'>
             <template v-slot:trigger>                      
                   <p>Trigger</p>                  
             </template>
@@ -46,7 +46,7 @@ const TemplateRich = (args,{argTypes})=>({
     components: {PsRichTooltip},
     template: `
     <div style='display: flex; justify-content: space-between;'>
-        <PsRichTooltip v-bind='$props' layout='red' title='Measures that are not cost-effective cannot be added to a combination' cssClass='psui-w-48'>
+        <PsRichTooltip v-bind='$props' layout='red' title='Measures that are not cost-effective cannot be added to a combination' cssClass='psui-w-64'>
             <template v-slot:trigger>
                 <p>Trigger</p>                            
             </template>
@@ -54,7 +54,7 @@ const TemplateRich = (args,{argTypes})=>({
                 <p>Here you can add an optional supporting text</p> 
             </template>
         </PsRichTooltip>
-        <PsRichTooltip v-bind='$props' layout='blue' title='Select to create a combination of measures for your Policy' cssClass='psui-w-48'>
+        <PsRichTooltip v-bind='$props' layout='blue' title='Select to create a combination of measures for your Policy' cssClass='psui-w-64'>
             <template v-slot:trigger>
                 <p>Trigger</p>                            
             </template>
@@ -62,7 +62,7 @@ const TemplateRich = (args,{argTypes})=>({
                 <p>Here you can add an optional supporting text</p> 
             </template>
         </PsRichTooltip>
-        <PsRichTooltip v-bind='$props' layout='gray' title='Did not account for the cost of combustion safety testing' cssClass='psui-w-48'>
+        <PsRichTooltip v-bind='$props' layout='gray' title='Did not account for the cost of combustion safety testing' cssClass='psui-w-64'>
             <template v-slot:trigger>
                 <p>Trigger</p>                            
             </template>

package/src/stories/Typography.stories.mdx

@@ -124,49 +124,49 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
       <p class="psui-font-bold">Headline 1</p>
       psui-text-h1
     </td>
-    <td class="psui-text-h1">The lazy fox jumped overthe brown dog</td>
+    <td class="psui-text-h1 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h1">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
     <td>
       <p class="psui-font-bold">Headline 2</p>
       psui-text-h2
     </td>
-    <td class="psui-text-h2">The lazy fox jumped over the brown dog</td>
+    <td class="psui-text-h2 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h2">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
     <td>
       <p class="psui-font-bold">Headline 3</p>
       psui-text-h3
     </td>
-    <td class="psui-text-h3">The lazy fox jumped over the brown dog</td>
+    <td class="psui-text-h3 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h3">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
     <td>
       <p class="psui-font-bold">Headline 4</p>
       psui-text-h4
     </td>
-    <td class="psui-text-h4">The lazy fox jumped over the brown dog</td>
+    <td class="psui-text-h4 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h4">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
     <td>
       <p class="psui-font-bold">Headline 5</p>
       psui-text-h5
     </td>
-    <td class="psui-text-h5">The lazy fox jumped over the brown dog</td>
+    <td class="psui-text-h5 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h5">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
     <td>
-      <p class="psui-font-bold">Headline 6</p>
+      <p class="psui-font-bold" >Headline 6</p>
       psui-text-h6
     </td>
-    <td class="psui-text-h6">The lazy fox jumped over the brown dog</td>
+    <td class="psui-text-h6 psui-cursor-pointer click-to-copy" data-to-copy="psui-text-h6">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
     <td>
       <p class="psui-font-bold">Paragraph</p>
       psui-text-p
     </td>
-    <td class="psui-text-p">
+    <td class="psui-text-p psui-cursor-pointer click-to-copy" data-to-copy="psui-text-p">
       This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.    
     </td>
   </tr>
@@ -175,7 +175,7 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
       <p class="psui-font-bold">Small</p>
       psui-text-small
     </td>
-    <td class="psui-text-small">
+    <td class="psui-text-small psui-cursor-pointer click-to-copy" data-to-copy="psui-text-small">
       This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
     </td>
   </tr>
@@ -184,23 +184,27 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e
       <p class="psui-font-bold">XSmall</p>
       psui-text-xsmall
     </td>
-    <td class="psui-text-xsmall">
+    <td class="psui-text-xsmall psui-cursor-pointer click-to-copy" data-to-copy="psui-text-xsmall">
       This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
     </td>
   </tr>
   <tr>
-    <td>
-      <p class="psui-font-bold">Accent</p>
-      psui-text-accent
+    <td class="psui-flex psui-flex-col">
+      <span class="psui-font-bold">Accent</span>
+      <span>psui-text-accent</span>
+      <span>psui-uppercase</span>
+      <span>psui-font-bold</span>
     </td>
-    <td class="psui-text-accent">UPPERCASE THE LAZY FOX JUNPED OVER THE BROWN DOG</td>
+    <td class="psui-text-accent psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accent psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
   </tr>
   <tr>
-    <td>
-      <p class="psui-font-bold">Accent Small</p>
-      psui-text-accent-small
+    <td class="psui-flex psui-flex-col">
+      <span class="psui-font-bold">Accent Small</span>
+      <span>psui-text-accentSmall</span>
+      <span>psui-uppercase</span>
+      <span>psui-font-bold</span>
     </td>
-    <td class="psui-text-accent-small">UPPERCASE THE LAZY FOX JUNPED OVER THE BROWN DOG</td>
+    <td class="psui-text-accentSmall psui-uppercase psui-font-bold psui-cursor-pointer click-to-copy" data-to-copy="psui-text-accentSmall psui-uppercase psui-font-bold">The lazy fox jumped over the brown dog</td>
   </tr>
 </table> 
 

package/src/util/GeneralFunctions.js

@@ -20,3 +20,11 @@ export const getParentScrollableEl = (node) => {
     return getParentScrollableEl(node.parentNode)
   }
 }
+
+export const getParentVueComponentByName = (comp, name) => {
+  if (comp.$options.name === name) {
+    return comp
+  } else {
+    return getParentVueComponentByName(comp.$parent, name)
+  }
+}

package/tailwind.config.js

@@ -33,6 +33,7 @@ module.exports = {
       'yellow-80': '#834C0D',
 
       'red-10': '#FCEBEB',
+      'red-15': '#EAC5C5',
       'red-20': '#D65C5A',
       'red-70': '#AA3937',
       'red-80': '#832F2E',
@@ -55,9 +56,9 @@ module.exports = {
       xsmall: ['12px', '130%'],
       accent: ['14px', '130%', { letterSpacing: '0.6px' }],
       accentSmall: ['12px', '130%', { letterSpacing: '0.6px' }],
-      p: ['16px', '120%'],
-      h1: ['28px', '120%'],
-      h2: ['24px', '120%'],
+      p: ['16px', '130%'],
+      h1: ['28px', '130%'],
+      h2: ['24px', '130%'],
       h3: ['22px', '120%'],
       h4: ['20px', '120%'],
       h5: ['18px', '120%'],
@@ -98,6 +99,10 @@ module.exports = {
         20: '0.2',
         95: '0.95',
       },
+      cursor: {
+        'grab': 'grab',
+        'grabbing': 'grabbing'
+      }
     },
   },
   variants: {