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

package/src/components/tooltip/PsTooltip.vue

@@ -0,0 +1,118 @@
+<template>
+  <div @mouseover="open" @mouseleave="close" ref="tooltip">
+    <div ref="tooltiptrigger">
+      <slot name="trigger"></slot>
+    </div>
+
+    <div class="psui-relative">
+      <div
+        role="menu"
+        ref="dialog"
+        class="
+          psui-fixed
+          psui-hidden
+          psui-opacity-0
+          psui-transition-opacity
+          psui-duration-500
+          psui-ease-in-out
+        "
+      >
+        <div
+          class="
+            psui-flex
+            psui-flex-col
+            psui-rounded-md
+            psui-shadow-md
+            psui-z-20
+            psui-p-4
+          "
+          aria-orientation="vertical"
+          :class="cssClass"
+        >
+          <h2 v-if="title" class="psui-font-bold">{{ title}}</h2>
+          <slot name="dialog" class="psui-font-normal"
+            >
+          </slot
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PsTooltip",
+  props: {
+    title: {
+      type: String,
+    },
+    ignoreDialog: {
+      type: Boolean,
+      default: false,
+    },
+    keepOpen: {
+      default: false,
+    },
+    cssClass:{
+        type: String,
+        default: 'psui-bg-gray-50 psui-text-white'
+    }
+  },
+  inheritAttrs: true,
+  emits: ["show"],
+  data() {
+    return {
+      show: false,
+      closingTimeout: null,
+    }
+  },
+  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}px`
+
+      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+        dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else {
+        dialog.style.left = `${rectTrigger.x}px`
+      }
+
+      setTimeout(() => {
+        dialog.style.opacity = 100
+      }, 100)
+    },
+  },
+}
+</script>

package/src/components/ui/PsIcon.vue

@@ -1,25 +1,29 @@
 <template>
   <div style="display: contents">
-    <i
-      v-if="type === 'material-icons'"
+    <span
+      v-if="getIconType === 'material-icons'"
+      class="material-icons-round"
       :class="[getIconClasses]"
     >
-    {{ icon }}
-    </i>
-    <img v-else-if="type == 'url'" src="" :class="[getIconClasses]" />
+      {{ getIcon }}
+    </span>
+    <img v-else-if="getIconType === 'url'" :src="icon" :class="[iconClasses]" />
     <inline-svg
       v-else
-      :src="`/icons/type-prototypes-slug/${type_prototype.slug}.svg`"
-      width="32"
-      height="32"
-      stroke="#A9AEB0"
+      :src="icon"
+      :width="getWidth"
+      :height="getHeight"
+      :stroke="getColor"
+      :fill="getColor"
     ></inline-svg>
   </div>
 </template>
 
 <script>
+import tailwindConfig from '../../../tailwind.config'
+import imageLoader from '../../util/imageLoader'
 export default {
-  name: 'PSIcon',
+  name: 'AppIcon',
   props: {
     icon: {
       type: String,
@@ -27,39 +31,98 @@ export default {
     },
     type: {
       type: String,
-      default: 'material-icons'
     },
     iconClasses: {
       type: String
     },
     size: {
-      type: [Number, String]
+      type: [Number, String],
     },
     width: {
-      type: Number
+      type: Number,
+      default: 24
     },
     height: {
-      type: Number
+      type: Number,
+      default: 24
     },
     stroke: {
       type: String,
+      default: null
     },
     color: {
-      type: String
+      type: String,
+      default: null,
+      validator: value => {
+        return value.includes('psui-text-') && 
+          typeof(tailwindConfig.theme.colors[value.replace('psui-text-', '')]) != 'undefined' ||
+          typeof(tailwindConfig.theme.colors[value]) != 'undefined'
+      }
+    },
+    loaderIcon: {
+      type: String,
+      default: 'hourglass_top'
+    },
+    loaderErrorIcon: {
+      type: String,
+      default: 'more_horiz'
+    }
+  },
+  data() {
+    return {
+      finishedImageLoad: false,
+      imageLoadError: false
     }
-
   },
   computed: {
+    getIconType() {
+      if(this.imageLoadError || !this.finishedImageLoad) return 'material-icons'
+      if(this.type) return this.type
+      if(!this.icon.includes('/')) return 'material-icons'
+      if(!this.icon.includes('.svg')) return 'url'
+      return 'svg'
+    },
+    getIcon() {
+      if(!this.icon.includes('/')) return this.icon
+      if(!this.finishedImageLoad && !this.imageLoadError && this.loaderIcon) return this.loaderIcon
+      if(this.imageLoadError) return this.loaderErrorIcon
+      return this.icon ? this.icon : ''
+    },
     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}`
+      return `${this.size} ${this.color}`
     },
+    getWidth() {
+      if(this.size) return this.size
+      return this.width
+    },
+    getHeight() {
+      if(this.size) return this.size
+      return this.height
+    },
+    getColor() {
+      if(this.getIconType === 'material-icons') return this.color
+      return tailwindConfig.theme.colors[this.color.replace('psui-text-', '')] || tailwindConfig.theme.colors[this.color]
+    }
+  },
+  watch: {
+    'icon': function() {
+      this.loadImage()
+    }
+  },
+  mounted() {
+    if(this.icon.includes('/')) this.loadImage()
+  },
+  methods: {
+    loadImage() {
+      imageLoader({ imageUrl: this.icon, returnsBase64: false })
+        .then(() => {
+          this.finishedImageLoad = true
+        })
+        .catch(() => {
+          this.imageLoadError = true
+        })
+    }
   }
 }
-</script>
-
-<style>
-
-</style>
+</script>

package/src/index.js

@@ -13,15 +13,22 @@ 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'
+import PsIcon from './components/ui/PsIcon.vue'
+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) {
-    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('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)
@@ -31,7 +38,14 @@ export default {
     Vue.component('PsChips', PsChips)
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
-  }
+    Vue.component('PsIcon', PsIcon)
+    Vue.component('PsTooltip', PsTooltip)
+    Vue.component('PsRichTooltip', PsRichTooltip)
+    Vue.component('PsDialogTooltip', PsDialogTooltip)
+    Vue.component('PsDraggable', PsDraggable)
+    // Vue.component('PsCardInfos', PsCardInfos)
+    Vue.component('PsChartLegend', PsChartLegend)
+  },
 }
 
 export {
@@ -49,5 +63,11 @@ export {
   PsAccordionItem,
   PsChips,
   PsDataTable,
-  PsDataTableItem
-}
+  PsDataTableItem,
+  PsTooltip,
+  PsRichTooltip,
+  PsDialogTooltip,
+  PsDraggable,
+  // PsCardInfos,
+  PsChartLegend,
+}

package/src/stories/Accordion.stories.js

@@ -1,35 +1,95 @@
-import PsAccordionItem, {iconTypes, fontCss} from "../components/accordion/PsAccordionItem.vue";
-import PsAccordion, {sizes} from "../components/accordion/PsAccordion.vue";
+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',
-    }
+  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>',
-})
+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>
+        <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

@@ -1,4 +1,4 @@
-import PsButton, { sizes } from '../components/buttons/PsButton.vue';
+import PsButton, { sizes } from '../components/buttons/PsButton.vue'
 const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Button',
@@ -9,46 +9,94 @@ export default {
     icon: { control: { type: 'select',  options: icons} },
     iconRight: { control: { type: 'select',  options: icons} }
   },
-};
+}
 
-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 = {}

package/src/stories/ChartLegend.stories.js

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

package/src/stories/Checkbox.stories.js

@@ -1,12 +1,12 @@
-import PsCheckbox, { sizes } from '../components/controls/PsCheckbox.vue';
-const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+import PsCheckbox from '../components/controls/PsCheckbox.vue'
+// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Checkbox',
   component: PsCheckbox,
   argTypes: {
     disabled: { control: 'boolean' },
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -36,13 +36,13 @@ const Template = (args, { argTypes }) => ({
     <p>Checked: {{ selected }}</p>
   </div>
   `
-});
+})
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   size: 18,
   disabled: false,
   label: 'Label',
   labelClasses: '',
-};
+}