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

package/src/components/badges-and-tags/PsChartLegend.vue

@@ -1,15 +1,12 @@
 <template>
-  <div class="toView psui-flex psui-flex-row psui-p-8 psui-rounded">
-    <div class="container psui-p-2 psui-rounded">
-      <div class="psui-flex">
-        <div class="dot"></div>
-        <div class="text">{{ text }}</div>
-      </div>
-      <div class="container1">
-        <span v-if="this.value" :class="isValue">{{ value }}</span>
-        <span :class="isBar"></span>
-        <span :class="isPercentage">{{ percentage }}</span>
-      </div>
+  <div class="psui-flex psui-p-2 psui-rounded">
+    <div class="psui-flex psui-flex-shrink-0">
+      <div :class="dotClass" class="dot psui-rounded-full" :style="dotColor"></div>
+    </div>
+    <div class="psui-flex-grow-1">
+      <div class="psui-text-xsmall psui-text-gray-50 psui-font-bold psui-mb-1">{{ text }}</div>
+      <span v-if="this.total" class="psui-text-p psui-text-gray-80">{{ total }}</span>
+      <span class="psui-text-gray-50" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
     </div>
   </div>
 </template>
@@ -21,108 +18,26 @@ export default {
       type: String,
       default: 'Climate Zone 10',
     },
-    value: {
+    total: {
       type: Number,
-      // required: true,
       default: null,
     },
     percentage: {
-      type: String,
-      // required: true,
-      default: '',
-    },
-  },
-  computed: {
-    isValue() {
-      if (this.value) {
-        return 'value'
-      } else {
-        return 'hide'
-      }
+      type: Boolean,
+      default: false,
     },
-    isPercentage() {
-      if (this.percentage) {
-        return 'percentage'
-      } else {
-        return 'hide'
-      }
-    },
-    isBar() {
-      if (this.value !== 0 && this.percentage !== '') {
-        return 'bar'
-      } else {
-        return 'hide'
-      }
+    dotColor: {
+      type: String,
+      default: ''
     },
   },
 }
 </script>
 
 <style scoped>
-.toView {
-  /* display: flex; */
-  /* flex-direction: row; */
-  /* padding: 32px; */
-
-  width: 351px;
-  height: 119px;
-
-  background: #f3ebfa;
-  border: 1.5px dashed #7b61ff;
-  /* border-radius: 5px; */
-}
-
-.container {
-  /* padding: 8px; */
-
-  width: fit-content;
-  height: fit-content;
-
-  background: #ffffff;
-  /* border-radius: 4px; */
-
-  /* margin: 0px 32px; */
-}
-
-.hide {
-  display: none;
-}
-
 .dot {
-  width: 14px;
-  height: 14px;
-  background: #43cec2;
-  border-radius: 8px;
-  margin: 0px 6px 0px 0px;
-}
-
-.text {
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 120%;
-
-  color: #798490;
-}
-
-.container1 {
-  margin: 0px 0px 0px 20px;
-}
-
-.value {
-  color: #28323b;
-}
-
-.percentage {
-  color: #798490;
-}
-
-.bar {
-  background-color: #d6dde5;
-  height: 14px;
-
-  border-radius: 2px;
-
-  padding: 0px 1px;
-  margin-right: 3px;
+  width: 14px; height: 14px;
+  background-color: #43cec2;
+  margin-right: 6px;
 }
 </style>

package/src/components/buttons/PsButton.vue

@@ -1,129 +1,77 @@
 <template>
   <button
-    class="psui-font-bold psui-items-center psui-flex psui-rounded-md"
-    :class="classes" 
-    @click="onClick()"
-  >
-    <i
-      v-if="icon"
-      :class="['psui-mr-2', iconClasses]"
-    >
-    {{ icon }}
-    </i>
-    <span 
-      v-if="label" 
-      class="psui-flex-grow psui-text-left"
-      >{{ label }}
-    </span>
-    <i
-      v-if="iconRight"
-      :class="['psui-ml-2', iconClasses]"
-    >
-    {{ iconRight }}
-    </i>
+      @click="onClick()" 
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave" 
+      class='psui-el-button' 
+      :class="[getComponentClass, {'hover': isHover}, {'active': isActive}, {'disabled': disabled}]" 
+   >
+    <i v-if="icon"  :class='iconClass' class='material-icons-round'> {{icon}} </i>
+    <span v-if="label" >{{ label }} </span>
   </button>
 </template>
 
 <script>
-export const sizes = ['big', 'medium', 'small']
 export default {  
   props: {
     label: {
       type: String,
     },
-    outline: {
-      type: Boolean,
-      default: false
-    },
-    ghost: {
-      type: Boolean,
-      default: false
-    },
-    textOnly: {
-      type: Boolean,
-      default: false
+    layout: {
+      type: String,
+      required: true,
+      default: 'solid',
+      validator: (value) => ['solid','outline','ghost','onlytext'].includes(value)
     },
     icon: {
       type: String,
     },
-    iconRight: {
+    iconPosition:{
       type: String,
+      default: 'right',
+      validator: (value) => ['left','right'].includes(value)
     },
     size: {
       type: String,
       default: 'big',
-      validator: (value) => sizes.indexOf(value) !== -1
+      validator: (value) => ['small','medium','big'].includes(value)
     },
     disabled: {
-      type: [Boolean, String]
-    },
-    'text-color': {
-      type: String,
-      default: ''
-    },
-    'icon-color': {
-      type: String,
-      default: ''
+      type: Boolean,
+      default: false
     },
-    color: {
-      type: String,
-      default: ''
+    iconClass:{
+      type: String
+    }
+  },
+  data(){
+    return {
+      isHover: false,
+      isActive: false,
     }
   },
   computed: {
-    iconClasses() {
-      const size = this.size === 'small' ? 'psui-text-small' : this.size === 'medium' ? 'psui-text-small' : 'psui-text-big'
-      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
-      return `psui-my-auto material-icons ${size} ${color}`
-    },
-    classes() {
-      let sizeCss = ''
-
-      if (this.size === 'medium') sizeCss = 'medium'      
-      if (this.size === 'small') sizeCss = 'small'
-      if (this.size === 'big') sizeCss = 'big'
-      
-      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40 psui-cursor-default' : 'psui-border-blue-60 psui-text-blue-60'}`
-      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40 psui-cursor-default' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
-      if (this.textOnly) {
-        const hasTextColor = this.textColor.length > 0
-        const color = hasTextColor ? this.textColor.split('hover:')[0] : ''
-        const hover = hasTextColor ? this.textColor.split('hover:')[1] : ''
-
-        let textCss = 'psui-text-blue-50 hover:psui-text-blue-60'
-        if (this.disabled) textCss = 'psui-text-gray-40 psui-cursor-default'
-        
-        if (hasTextColor) textCss = `psui-text-${color}`
-        if (hover) textCss += `hover:psui-text-${hover}`
-
-        return `${sizeCss} ${textCss}`
-      }
-      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40 psui-cursor-default`
-      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner psui-cursor-pointer`
-    }  
+    getComponentClass(){
+        return `layout-${this.layout} ${this.size} ${this.iconPosition}`
+    }
   },
   methods: {
     onClick() {
-      if (this.disabled) return false
+      if (this.disabled) return
+      this.isActive = true, 
       this.$emit('click')
+    },
+    onMouseEnter(){
+      if(!this.disabled){
+        this.isHover = true
+      }
+    },
+    onMouseLeave(){
+      if(!this.disabled){
+        this.isHover = false
+      }
     }
   }
 }
 </script>
 
-<style scoped>
-  .small {
-    padding: 4px 8px 4px 8px;
-    font-size: 14px;
-  }
-
-  .medium{
-    padding: 7px 16px 7px 16px;
-    font-size: 14px;
-  }
-
-  .big{
-    padding: 9.5px 16px 9.5px 16px;
-    font-size: 16px;
-  }
-</style>

package/src/components/controls/PsToggle.vue

@@ -32,7 +32,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .wrapper {
   padding: 2px;
 }

package/src/components/forms/PsInput.vue

@@ -25,7 +25,7 @@
         @keydown="$emit('keydown', $event)"
         @change="$emit('change', $event)"
         v-bind="getAttrs"
-        :class="getInputClasses"
+        :class="{ 'focus': isFocus }"
       />
     
       <div v-if="$slots.append || hasError" class="psui-el-input-append">

package/src/components/notifications/PsDialog.vue

@@ -10,7 +10,7 @@
       </div>
       <div class="psui-flex psui-gap-3">
         <slot v-if="layout === 'horizontal'" name="action"></slot>
-        <button @click="onClose" class="psui-w-4 psui-h-4 focus:psui-outline-none">
+        <button @click="onClose" class="psui-w-4 psui-h-4 focus:psui-outline-none hover:opacity-70 transition-default">
           <i class="material-icons-round">close</i>
         </button>
       </div>

package/src/components/tabs/PsTabHeader.vue

@@ -6,9 +6,10 @@
       :key="item[keyValue]"
       @click="selectTab(item)"
       :class="[
+        'transition-default',
         classes, 
         { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'psui-border-b-2 psui-border-blue-60 psui-text-blue-60 psui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
+        { 'psui-border-blue-60 psui-text-blue-60': getSelected === item[keyValue] && theme === 'underline' },
         { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
       ]"
     >
@@ -53,7 +54,7 @@ export default {
     },
     classes() {
       if (this.theme === 'underline') {
-        return 'psui-text-gray-60 psui-pb-3 hover:psui-text-blue-60'
+        return 'psui-text-gray-60 psui-pb-3 psui-text-small psui-border-b-2 psui-border-transparent psui-font-bold hover:psui-text-blue-60'
       }
       if (this.theme === 'folder') {
         return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'

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,92 @@ 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>
+  </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 = {}