@policystudio/policy-studio-ui-vue 1.0.29 → 1.0.32

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

@@ -1,4 +1,4 @@
-import PsChips from "../components/chips/PsChips.vue"
+import PsChips from '../components/chips/PsChips.vue'
 
 export default {
   title: 'Components/Chips',
@@ -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>
               `
 })
@@ -22,7 +26,7 @@ const Template = (args, { argTypes }) => ({
 export const Simple = Template.bind({})
 Simple.args = {
   label: 'Simple Chip',
-  icon:"",
+  icon:'',
 }
 
 export const SimpleWithIcon = Template.bind({})
@@ -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/Colors.stories.mdx

@@ -54,6 +54,7 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="psui-bg-red-80">Red 80 <div>#832F2E</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="psui-bg-red-70">Red 70 <div>#AA3937</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="psui-bg-red-20">Red 20 <div>#D65C5A</div></div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-15 click-to-copy" data-to-copy="psui-bg-red-15">Red 15 <div>#EAC5C5</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="psui-bg-red-10">Red 10 <div>#FCEBEB</div></div>
 </div>
 

package/src/stories/Dropdown.stories.js

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

package/src/stories/InlineSelector.stories.js

@@ -1,4 +1,4 @@
-import PsInlineSelector from "../components/controls/PsInlineSelector.vue"
+import PsInlineSelector from '../components/controls/PsInlineSelector.vue'
 
 export default {
     title: 'Components/InlineSelector',

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' thumbColor="blue"></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/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

@@ -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: {