@policystudio/policy-studio-ui-vue 1.0.28 → 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/PsDotLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="psui-el-dotloader">
+      <div class="psui-el-dotloader-wrapper">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsDotLoader',
+}
+</script>

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'
@@ -14,6 +18,7 @@ import PsChips from './components/chips/PsChips.vue'
 import PsDataTable from './components/datatable/PsDataTable.vue'
 import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
 import PsIcon from './components/ui/PsIcon.vue'
+import PsDotLoader from './components/ui/PsDotLoader.vue'
 import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
@@ -21,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) {
@@ -42,6 +48,7 @@ export default {
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
     Vue.component('PsIcon', PsIcon)
+    Vue.component('PsDotLoader', PsDotLoader)
     Vue.component('PsTooltip', PsTooltip)
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
@@ -51,25 +58,46 @@ 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)
+      },
+    })
   },
 }
 
 export {
   PsButton,
   PsCheckbox,
-  PsDialog,
-  PsToast,
-  PsTabHeader,
   PsRadioButton,
   PsSlider,
   PsSwitch,
-  PsInput,
   PsToggle,
+  PsInput,
+  PsDialog,
+  PsToast,
+  PsTabHeader,
   PsAccordion,
   PsAccordionItem,
   PsChips,
   PsDataTable,
   PsDataTableItem,
+  PsIcon,
+  PsDotLoader,
   PsTooltip,
   PsRichTooltip,
   PsDialogTooltip,
@@ -78,5 +106,9 @@ export {
   PsChartLegend,
   PsInlineSelector,
   PsInputTextArea,
-  PsInputSelect
+  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/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>