@policystudio/policy-studio-ui-vue 1.0.15 → 1.0.19

package/src/components/forms/PsDropdown.vue

@@ -0,0 +1,196 @@
+<template>
+  <div 
+    class="psui-relative psui-inline-block psui-text-left" 
+    ref="PSDropdown"
+  >
+
+    <div class="psui-bg-red" ref="PSDropdownTrigger" v-if="$slots.dropdownTrigger" @click="show && !toggleWhenActive ? '' : toggle()" >
+      <slot name="dropdownTrigger" ></slot>
+    </div>
+
+    <button
+      v-else
+      @click="show && !toggleWhenActive ? '' : toggle()" 
+      type="button" 
+      class="psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-focus:shadow-outline-blue psui-dropdown-button psui-text-sm psui-leading-none" 
+      :class="[buttonClasses]"
+      :id="id"
+      aria-haspopup="true" 
+      aria-expanded="true"
+      ref="PSDropdownTrigger"
+    >
+      <slot v-if="show && $slots.buttonLabelOnShow" name="buttonLabelOnShow"></slot>
+      <slot v-else name="buttonLabel"></slot>
+    </button>
+
+    <div 
+      ref="PSDropdownDialog"
+      role="menu" 
+      class="psui-dropdown-dialog psui-hidden psui-origin-top-right psui-fixed psui-mt-2 psui-w-auto psui-rounded psui-shadow-lg psui-border psui-border-blue05 psui-z-50 psui-opacity-0" 
+      aria-orientation="vertical" 
+      :aria-labelledby="id"
+      :class="[dialogClasses]"
+      :style="{ minWidth: minWidthDropdown, marginLeft: marginLeft }"
+    >
+      <div class="w-full">
+        <h2 class="psui-text-gray02 psui-font-bold psui-whitespace-no-wrap psui-mb-4 ts--accent--1" v-if="title">{{ title }}</h2>
+        <slot name="items"></slot>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { randomString, getParentScrollableEl } from '../../util/GeneralFunctions'
+
+export default {
+  name: 'PsDropdown',
+  props: {
+    buttonClasses: {
+      type: String,
+      default: 'psui-bg-white psui-border psui-border-blue'
+    },
+    title: {
+      type: String,
+    },
+    dialogClasses: {
+      type: String,
+      default: 'psui-p-6 psui-left-0 psui-bg-white'
+    },
+    minWidthDropdown: {
+      type: [String, Number],
+    },
+    maxWidthDropDown: {
+      type: String,
+      default: '340px'
+    },
+    buttonLabelOnShow: {
+      type: Boolean,
+      default: false
+    },
+    toggleWhenActive: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      show: false,
+      id: randomString(8),
+      marginLeft: '-0px',
+      scrollableParentEl : null 
+    }
+  },
+  computed: {
+    getMaxWidth() {
+      let bounds = this.$refs.PSDropdown.getBoundingClientRect()
+      return (document.documentElement.clientWidth - bounds['left']) -30
+    }
+  },
+  beforeDestroy() {
+    this.unwatchParentScrolling()
+  },
+  methods: {
+    toggle() {
+      if (!this.show) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    watchParentScrolling() {
+      this.scrollableParentEl = getParentScrollableEl(this.$refs.PSDropdown)
+      if (this.scrollableParentEl) {
+        this.scrollableParentEl.addEventListener('scroll', this.updatePosition)
+      }
+    },
+    unwatchParentScrolling() {
+      if (this.scrollableParentEl) {
+        this.scrollableParentEl.removeEventListener('scroll', this.updatePosition)
+      }
+    },
+    updatePosition() {
+      
+      const PSDropdownDialog = this.$refs.PSDropdownDialog
+      const PSDropdownTrigger = this.$refs.PSDropdownTrigger
+      if (!PSDropdownDialog || !PSDropdownTrigger) return 
+
+      const rectTrigger = PSDropdownTrigger.getBoundingClientRect()
+      const rectDialog = PSDropdownDialog.getBoundingClientRect()
+      const windowWidth = document.documentElement.clientWidth
+
+      PSDropdownDialog.style.position = 'fixed'
+      PSDropdownDialog.style.top = `${rectTrigger.y + rectTrigger.height }px`
+      
+      if (( rectTrigger.x + rectDialog.width + 20 ) > windowWidth ) {
+        PSDropdownDialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else {        
+        PSDropdownDialog.style.left = `${rectTrigger.x}px`
+      }
+
+      if(rectTrigger.top < 10) {
+        this.close()
+        console.warn('The dropdown are too close from the top of the page')
+        return
+      }
+
+      setTimeout(() => { PSDropdownDialog.style.opacity = 1 }, 10)
+
+    },
+    open() {
+      this.$emit('open')
+      this.show = true
+      this.$refs.PSDropdownDialog.style.opacity = 0
+      this.$refs.PSDropdownDialog.style.display = 'block'
+      setTimeout(() => {
+        this.updatePosition()
+        this.watchParentScrolling()
+        document.addEventListener("keyup", this.handleEsc)
+        window.addEventListener("resize", this.updatePosition)
+        window.addEventListener("click", this.clickOutside)
+      }, 10)
+    },
+    close() {
+      if (this.show) {
+        this.$emit('close')
+        this.$refs.PSDropdownDialog.style.display = 'none'
+        this.$refs.PSDropdownDialog.style.opacity = 0
+        this.show = false
+        this.unwatchParentScrolling()
+      }
+      document.removeEventListener("keyup", this.handleEsc)
+      document.removeEventListener("resize", this.updatePosition)
+      document.removeEventListener("click", this.clickOutside)
+    },
+    handleEsc(evt) {
+      if (this.show && evt.keyCode === 27) this.close()
+    },
+    clickOutside(event) {
+      if(!this.show) return
+      if (!(this.$refs.PSDropdown == event.target || this.$refs.PSDropdown.contains(event.target))) {
+        this.close()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+  .dropdown-button {
+    background-color: transparent;
+    padding-top: 2.5px;
+    padding-bottom: 2.5px;
+    min-height: 27px;
+  }
+
+  .dropdown-button:focus {
+    outline: none;
+  }
+
+  .psui-dropdown-dialog {
+    transition: opacity 150ms ease-in-out;
+  }
+  
+</style>

package/src/components/forms/PsInput.vue

@@ -13,11 +13,12 @@
         :aria-invalid="validation.hasError"
         :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
         :required="required"
-        @focus="$emit('focus')"
-        @blur="$emit('blur')"
-        @input="$emit('input', $event.target.value)"
-        @keydown.enter="$emit('keydown', $event.target.value)"
-        @change="$emit('change')"
+        :value="value"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        @input="$emit('input', $event)"
+        @keydown.enter="$emit('keydown', $event)"
+        @change="$emit('change', $event)"
         v-bind="getAttrs"
       />
       <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
@@ -69,7 +70,7 @@ export default {
 	},
   computed: {
     getInputClasses() {
-      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-bg-white psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50`
+      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50 ${this.getState}`
     },
     getText() {
       return this.mini ? 'psui-text-small' : ''
@@ -77,6 +78,9 @@ export default {
     getPadding() {
       return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
     },
+    getState() {
+      return this.disabled ? 'disabled:psui-bg-gray-20' : 'psui-bg-white'
+    },
     getAttrs() {
       const defaultAttrs = {
         autocapitalize: 'sentences',

package/src/components/tabs/PsTabHeader.vue

@@ -21,6 +21,26 @@
 export const themeOptions = ['standard', 'underline', 'folder']
 export default {
   name: 'PsTabHeader',
+  props: {
+    theme: {
+      type: String,
+      default: 'standard',
+      validator: (value) => themeOptions.indexOf(value) !== -1
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    selected: {},
+    keyLabel: {
+      type: String,
+      default: 'label'
+    },
+    keyValue: {
+      type: String,
+      default: 'value'
+    }
+  },
   computed: {
     wrapperClasses() {
       if (this.theme === 'underline') {
@@ -67,27 +87,6 @@ export default {
       }
     }
   },
-
-  props: {
-    theme: {
-      type: String,
-      default: 'standard',
-      validator: (value) => themeOptions.indexOf(value) !== -1
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    selected: {},
-    keyLabel: {
-      type: String,
-      default: 'label'
-    },
-    keyValue: {
-      type: String,
-      default: 'value'
-    }
-  },
   methods: {
     selectTab(item) {
       this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )

package/src/components/ui/PsIcon.vue

@@ -0,0 +1,65 @@
+<template>
+  <div style="display: contents">
+    <i
+      v-if="type === 'material-icons'"
+      :class="[getIconClasses]"
+    >
+    {{ icon }}
+    </i>
+    <img v-else-if="type == 'url'" src="" :class="[getIconClasses]" />
+    <inline-svg
+      v-else
+      :src="`/icons/type-prototypes-slug/${type_prototype.slug}.svg`"
+      width="32"
+      height="32"
+      stroke="#A9AEB0"
+    ></inline-svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PSIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'material-icons'
+    },
+    iconClasses: {
+      type: String
+    },
+    size: {
+      type: [Number, String]
+    },
+    width: {
+      type: Number
+    },
+    height: {
+      type: Number
+    },
+    stroke: {
+      type: String,
+    },
+    color: {
+      type: String
+    }
+
+  },
+  computed: {
+    getIconClasses() {
+      if(this.iconClasses) return this.iconClasses
+      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
+      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
+      return `psui-mr-2 psui-my-auto material-icons ${size} ${color}`
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/index.js

@@ -1,28 +1,38 @@
-import PsButton from './components/buttons/PsButton.vue';
-import PsCheckbox from './components/controls/PsCheckbox.vue';
-import PsRadioButton from './components/controls/PsRadioButton.vue';
-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 PsDialog from './components/notifications/PsDialog.vue';
-import PsToast from './components/notifications/PsToast.vue';
-import PsTabHeader from './components/tabs/PsTabHeader.vue';
+import PsButton from './components/buttons/PsButton.vue'
+import PsCheckbox from './components/controls/PsCheckbox.vue'
+import PsRadioButton from './components/controls/PsRadioButton.vue'
+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 PsDialog from './components/notifications/PsDialog.vue'
+import PsToast from './components/notifications/PsToast.vue'
+import PsTabHeader from './components/tabs/PsTabHeader.vue'
+import PsAccordion from './components/accordion/PsAccordion.vue'
+import PsAccordionItem from './components/accordion/PsAccordionItem.vue'
+import PsChips from './components/chips/PsChips.vue'
+import PsDataTable from './components/datatable/PsDataTable.vue'
+import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
 
 export default {
   install(Vue) {
-    Vue.component('PsButton',  PsButton);
-    Vue.component('PsCheckbox',  PsCheckbox);
-    Vue.component('PsDialog',  PsDialog);
-    Vue.component('PsToast',  PsToast);
-    Vue.component('PsTabHeader',  PsTabHeader);
-    Vue.component('PsRadioButton',  PsRadioButton);
-    Vue.component('PsSlider', PsSlider);
-    Vue.component('PsSwitch', PsSwitch);
-    Vue.component('PsInput', PsInput);
-    Vue.component('PsToggle', PsToggle);
+    Vue.component('PsButton',  PsButton)
+    Vue.component('PsCheckbox',  PsCheckbox)
+    Vue.component('PsDialog',  PsDialog)
+    Vue.component('PsToast',  PsToast)
+    Vue.component('PsTabHeader',  PsTabHeader)
+    Vue.component('PsRadioButton',  PsRadioButton)
+    Vue.component('PsSlider', PsSlider)
+    Vue.component('PsSwitch', PsSwitch)
+    Vue.component('PsInput', PsInput)
+    Vue.component('PsToggle', PsToggle)
+    Vue.component('PsAccordion', PsAccordion)
+    Vue.component('PsAccordionItem', PsAccordionItem)
+    Vue.component('PsChips', PsChips)
+    Vue.component('PsDataTable', PsDataTable)
+    Vue.component('PsDataTableItem', PsDataTableItem)
   }
-};
+}
 
 export {
   PsButton,
@@ -34,5 +44,10 @@ export {
   PsSlider,
   PsSwitch,
   PsInput,
-  PsToggle
+  PsToggle,
+  PsAccordion,
+  PsAccordionItem,
+  PsChips,
+  PsDataTable,
+  PsDataTableItem
 }

package/src/stories/Accordion.stories.js

@@ -0,0 +1,35 @@
+import PsAccordionItem, {iconTypes, fontCss} from "../components/accordion/PsAccordionItem.vue";
+import PsAccordion, {sizes} 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',
+    }
+}
+
+export const AccordionItem = (args, { argTypes }) => ({
+    props: Object.keys(argTypes, args),
+    components: { PsAccordionItem },
+    template: '<PsAccordionItem v-bind="$props"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p></PsAccordionItem>',
+})
+AccordionItem.parameters = {
+    controls: {
+        include: ['title', 'iconType', 'fontCss']
+    }
+}
+
+export const Accordion = (args, { argTypes }) => ({
+    props: Object.keys(argTypes, args),
+    components: { PsAccordion, PsAccordionItem },
+    template: '<PsAccordion v-bind="$props"><PsAccordionItem v-bind="$props"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p></PsAccordionItem><PsAccordionItem v-bind="$props"/></PsAccordion>',
+})
+
+

package/src/stories/Checkbox.stories.js

@@ -13,19 +13,26 @@ const Template = (args, { argTypes }) => ({
   components: { PsCheckbox },
   data: () => {
     return {
-      items: [
-        { label: 'Label 1', id: 1 },
-        { label: 'Label 2', id: 2 },
-        { label: 'Label 3', id: 3 }
-      ],
+      items: {
+        BUILDING_TYPE: {
+          label: 'Building Type',
+          key: 'BUILDING_TYPE'
+        },
+        CLIMATE_ZONE: {
+          label: 'Climate Zone', 
+          key: 'CLIMATE_ZONE'
+        },
+        YEAR: {
+          label: "Year",
+          key: "YEAR"
+        }
+      },
       selected: []
     }
   },
   template: `
   <div>
-    <PsCheckbox v-bind="$props" label="Label 1" inputValue="1" v-model="selected" />
-    <PsCheckbox v-bind="$props" label="Label 2" inputValue="2" v-model="selected" />
-    <PsCheckbox v-bind="$props" label="Label 3" inputValue="3" v-model="selected" />
+    <PsCheckbox v-bind="$props" v-for="(item, key) in items" :label="item.label" :inputValue="item.key" v-model="selected" />
     <p>Checked: {{ selected }}</p>
   </div>
   `

package/src/stories/Chips.stories.js

@@ -0,0 +1,49 @@
+import PsChips, { type } from "../components/chips/PsChips.vue";
+
+export default {
+    title: 'Components/Chips',
+    component: PsChips,
+}
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsChips },
+    template: `<div >
+               <PsChips v-bind='$props'/>
+               </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'
+}

package/src/stories/Colors.stories.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import {Meta } from '@storybook/addon-docs';
 
 <Meta title="Colors" />
 
@@ -11,58 +11,59 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 <div class="psui-flex">
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80">Blue 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70">Blue 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60">Blue 60</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50">Blue 50</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white ">White</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="#5094D3">Blue #5094D3</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="#002A3A">Blue 80 #002A3A</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="#00465F">Blue 70 #00465F</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="#318FAC">Blue 60 #318FAC</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="#64B5CE">Blue 50 #64B5CE</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy" data-to-copy="#E0EFF6">Blue 20 #E0EFF6</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy" data-to-copy="#ECF7FB">Blue 10 #ECF7FB</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="#ffffff">White #ffffff</div>
 </div>
 
 ## Gray
 <div class="psui-flex">
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80">Gray 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70">Gray 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60">Gray 60</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50">Gray 50</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40">Gray 40</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30">Gray 30</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20">Gray 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10">Gray 10</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="#28323B">Gray 80 #28323B</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="#34404A">Gray 70 #34404A</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="#515E6A">Gray 60 #515E6A</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="#798490">Gray 50 #798490</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="#A2ACB7">Gray 40 #A2ACB7</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="#D6DDE5">Gray 30 #D6DDE5</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="#E6ECF2">Gray 20 #E6ECF2</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="#F3F6F9">Gray 10 #F3F6F9</div>
 </div>
 
 ## Yellow
 <div class="psui-flex">
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80">Yellow 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70">Yellow 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20">Yellow 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10">Yellow 10</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="#834C0D">Yellow 80 #834C0D</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="#B87305">Yellow 70 #B87305</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="#EDAB3E">Yellow 20 #EDAB3E</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy" data-to-copy="#FDF3E3">Yellow 10 #FDF3E3</div>
 </div>
 
 ## Green
 <div class="psui-flex">
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80">Green 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70">Green 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20">Green 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10">Green 10</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="#286943">Green 80 #286943</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="#44A06A">Green 70 #44A06A</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="#5DB883">Green 20 #5DB883</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy" data-to-copy="#DEF8E8">Green 10 #DEF8E8</div>
 </div>
 
 ## Red
 <div class="psui-flex">
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80">Red 80</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70">Red 70</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20">Red 20</div>
-  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10">Red 10</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="#832F2E">Red 80 #832F2E</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="#AA3937">Red 70 #AA3937</div>
+  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="#D65C5A">Red 20 #D65C5A</div>
+  <div class="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="#FCEBEB">Red 10 #FCEBEB</div>
 </div>
 
 ## Chart colors
 <div class="psui-flex">
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky">Sky</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal">Teal</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald">Emerald</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard">Mustard</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange">Orange</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink">Pink</div>
-  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple">Purple</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="#518BE2">Sky #518BE2</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="#57C0BA">Teal #57C0BA</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="#8CCA82">Emerald #8CCA82</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="#E9CF74">Mustard #E9CF74</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="#FF906D">Orange #FF906D</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="#FF77B8">Pink #FF77B8</div>
+  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="#9278C9">Purple #9278C9</div>
 </div>