@policystudio/policy-studio-ui-vue 1.0.22 → 1.0.26

package/src/index.js

@@ -18,6 +18,8 @@ import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
 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'
 
 export default {
   install(Vue) {
@@ -41,6 +43,8 @@ export default {
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
     Vue.component('PsDraggable', PsDraggable)
+    Vue.component('PsCardInfos', PsCardInfos)
+    Vue.component('PsChartLegend', PsChartLegend)
   },
 }
 
@@ -64,4 +68,6 @@ export {
   PsRichTooltip,
   PsDialogTooltip,
   PsDraggable,
+  PsCardInfos,
+  PsChartLegend,
 }

package/src/stories/Accordion.stories.js

@@ -18,24 +18,78 @@ export default {
   },
 }
 
-export const AccordionItem = (args, { argTypes }) => ({
-    props: Object.keys(argTypes, args),
-    components: { PsAccordionItem },
-    template: `
-               <PsAccordionItem v-bind="$props" style='width:400px'>
-                    <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 }) => ({
+export const Index = (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>',
+    `<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>
+        </div>
+        <PsAccordion layout="big" class="psui-bg-white">
+          <PsAccordionItem title="Header 01">
+            <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>
+          </PsAccordionItem>      
+          <PsAccordionItem title="Header 03">
+            <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">Accordion Medium</h1>
+        </div>
+        <PsAccordion layout="medium" class="psui-bg-white">
+          <PsAccordionItem title="Header 01">
+            <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>
+          </PsAccordionItem>      
+          <PsAccordionItem title="Header 03">
+            <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">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>    
+    `,
 })

package/src/stories/Button.stories.js

@@ -11,44 +11,102 @@ export default {
   },
 }
 
-const Template = (args, { argTypes }) => ({
+const TemplateDefault = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsButton },
   template: `
-  <PsButton v-bind="$props" />
+  <div style="display:flex; flex-direction: column;">
+    <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>
+          <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' />
+          <PsButton label='Disabled'   layout='solid' 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: blue;">Outline Style</span>
+          <PsButton label='Left Icon'  layout='outline' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon'    layout='outline' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='outline'/>
+          <PsButton label='Disabled' layout='outline' 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: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='ghost' />
+          <PsButton label='Disabled' layout='ghost' 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: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='onlytext'/>
+          <PsButton label='Disabled' layout='onlytext' 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>
+          <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'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled 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: blue;">Outline Style</span>
+          <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='outline' size='medium'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled 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: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='ghost' size='medium'/>
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled 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: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='onlytext' size='medium'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' 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>
+          <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'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled 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: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='onlytext' size='small'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
+    </div>
+    <p>Size: Custom</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: green;">Only-Text Style</span>
+        <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
+        <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
+        <PsButton label='Text Only' layout='onlytext'/>
+        <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' />
+      </div>
+    </div>
+  </div>
   `
 })
 
-export const Solid = Template.bind({})
-Solid.args = {
-  label: 'Solid button',
-  size: 'big',
-  disabled: false,
-  iconRight: 'add_circle'
-}
-
-export const Outline = Template.bind({})
-Outline.args = {
-  label: 'Outline button',
-  size: 'big',
-  disabled: false,
-  icon: 'add_circle',
-  outline: true
-}
-
-export const Ghost = Template.bind({})
-Ghost.args = {
-  label: 'Ghost button',
-  size: 'big',
-  disabled: false,
-  ghost: true
-}
-
-export const TextOnly = Template.bind({})
-TextOnly.args = {
-  label: 'TextOnly button',
-  disabled: false,
-  icon: 'add_circle',
-  size: 'big',
-  textOnly: true,
-}
+export const Default = TemplateDefault.bind({})

package/src/stories/CardInfos.stories.js

@@ -0,0 +1,16 @@
+import PsCardInfos from '../components/badges-and-tags/PsCardInfos.vue'
+
+export default {
+  title: 'Components/CardInfos',
+  component: PsCardInfos,
+  argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsCardInfos },
+  template: '<PsCardInfos v-bind="$props" />',
+})
+
+export const CardInfos = Template.bind({})
+CardInfos.args = {}

package/src/stories/Dialog.stories.js

@@ -5,21 +5,6 @@ export default {
   component: PsDialog,
 }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsDialog },
-  template: `
-          <PsDialog v-bind="$props">
-            <template v-slot:content>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-            </template>
-            <template v-slot:action>
-              <p style='font-weight: 700;'>Action</p>
-            </template>
-          </PsDialog>
-          `,
-})
-
 const TemplateExamples = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
@@ -32,10 +17,7 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="horizontal">
-                <template v-slot:content>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
+              <PsDialog theme="informative" layout="horizontal" message="teste">                
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -44,8 +26,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="horizontal">
-                <template v-slot:content>
+              <PsDialog theme="success" layout="horizontal" :hasClose="false">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -56,8 +38,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="horizontal">
-                <template v-slot:content>
+              <PsDialog theme="alert" layout="horizontal">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -72,8 +54,8 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="informative" layout="vertical">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -84,8 +66,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="success" layout="vertical" :hasClose="false">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -96,8 +78,8 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="vertical">
-                <template v-slot:content>
+              <PsDialog theme="alert" layout="vertical">
+                <template>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 </template>
                 <template v-slot:action>
@@ -115,7 +97,7 @@ const TemplateExamples = (args, { argTypes }) => ({
 
             <div>
               <h2>Informative</h2>
-              <PsDialog status="informative" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="informative" layout="vertical" message="This component uses only the props message!">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -124,7 +106,7 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Success</h2>
-              <PsDialog status="success" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="success" layout="vertical" message="This component uses only the props message!" :hasClose="false">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -133,7 +115,7 @@ const TemplateExamples = (args, { argTypes }) => ({
             
             <div>
               <h2>Alert</h2>
-              <PsDialog status="alert" layout="vertical" message="This component uses only the props message!">
+              <PsDialog theme="alert" layout="vertical" message="This component uses only the props message!">
                 <template v-slot:action>
                   <p style='font-weight: 700;'>Action</p>
                 </template>
@@ -146,22 +128,4 @@ const TemplateExamples = (args, { argTypes }) => ({
 
 export const Examples = TemplateExamples.bind({})
 
-export const Informative = Template.bind({})
-Informative.args = {
-  status: 'informative',
-  layout: 'vertical',
-  cssClass: 'psui-w-2/3'
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  status: 'success',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  status: 'alert',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-}
 

package/src/stories/Input.stories.js

@@ -22,24 +22,20 @@ const TemplateDefault = (args, { argTypes }) => ({
   template: `    
     <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
 
-      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
-      
-      <PsInput label="Resting without hint" />
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
+      </div>
       
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />      
+      <PsInput label="Resting without hint" />      
       <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />      
  
-
       <PsInput v-bind="{...$props, label: 'Focus'}" />
-
       <PsInput label="Typing" placeholder="Type to see the effect..." />
-
       <PsInput v-bind="{...$props, label: 'Active', active: true }" />
       
-      
       <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
-
-      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
-      
+      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
       <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
         <template v-slot:append>
           Append
@@ -49,12 +45,40 @@ const TemplateDefault = (args, { argTypes }) => ({
         </template>
       </PsInput>
 
-
       <PsInput label="Disabled" :disabled="true" value="100,000" />      
       <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
       <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
 
-    </div>
+      
+
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
+      </div>
+
+      <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />      
+      <PsInput layout="mini" label="Resting without hint" />      
+      <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+      <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
+      <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
+      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+
+      <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+
+    </div> 
   `
 })
 
@@ -92,7 +116,6 @@ InputText.args = {
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
   value: 10,
 }
 
@@ -103,7 +126,6 @@ InputPassword.args = {
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
 }
 
 export const InputSlots = TemplateSlots.bind({})
@@ -113,5 +135,4 @@ InputSlots.args = {
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
 }

package/src/stories/TabHeader.stories.js

@@ -17,13 +17,13 @@ const Template = (args, { argTypes }) => ({
   template: `
   <div class="psui-bg-gray-20 psui-p-8">
     <PsTabHeader :selected.sync=selected v-bind="$props"/>
-    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
       <p v-for="i of 4">Tab Existing Buildings Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
       <p v-for="i of 4">Tab New Constructions Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
       <p v-for="i of 4">Other tab Selected</p>
     </div>
   </div>
@@ -32,21 +32,21 @@ const Template = (args, { argTypes }) => ({
 
 export const Standard = Template.bind({})
 Standard.args = {
-  theme: 'standard',
+  layout: 'standard',
   items: items,
   selected: item
 }
 
 export const Underline = Template.bind({})
 Underline.args = {
-  theme: 'underline',
+  layout: 'underline',
   items: items,
   selected: item
 }
 
 export const Folder = Template.bind({})
 Folder.args = {
-  theme: 'folder',
+  layout: 'folder',
   items: items,
   selected: item
 }

package/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     colors: {
-      white: '#ffffff !important',
+      'white': '#ffffff !important',
       'gray-10': '#F3F6F9',
       'gray-20': '#E6ECF2',
       'gray-30': '#D6DDE5',
@@ -14,7 +14,7 @@ module.exports = {
       'gray-70': '#34404A',
       'gray-80': '#28323B',
 
-      blue: '#5094D3',
+      'blue': '#5094D3',
       'blue-10': '#ECF7FB',
       'blue-20': '#E0EFF6',
       'blue-50': '#64B5CE',
@@ -44,6 +44,7 @@ module.exports = {
       orange: '#FF906D',
       pink: '#FF77B8',
       purple: '#9278C9',
+      transparent: 'transparent',
     },
     fontFamily: {
       sans: ['Lato'],