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

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/src/util/imageLoader.js

@@ -19,7 +19,7 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
     }
 
     xhr.onloadend = () => {
-      const contentType = xhr.getResponseHeader("Content-Type")
+      const contentType = xhr.getResponseHeader('Content-Type')
       if (!contentType.includes('image')) {
         reject(xhr)
       } else {

package/tailwind.config.js

@@ -56,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%'],
@@ -99,6 +99,10 @@ module.exports = {
         20: '0.2',
         95: '0.95',
       },
+      cursor: {
+        'grab': 'grab',
+        'grabbing': 'grabbing'
+      }
     },
   },
   variants: {