@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.91

package/src/components/tooltip/PsTooltip.vue

@@ -1,24 +1,21 @@
 <template>
   <div 
     ref="tooltip" 
-    class="psui-el-tooltip"
+    class='psui-el-tooltip'
     @mouseenter="open" 
     @mouseleave="close" 
   >
-    <div
-      ref="tooltiptrigger"
-      class="psui-el-tooltip-trigger"
-    >
-      <slot name="trigger" />
+    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
+      <slot name="trigger"></slot>
     </div>
 
     <div 
-      class="psui-el-tooltip-wrapper"
+      class='psui-el-tooltip-wrapper'
     >
       <div
         role="menu"
         ref="dialog"
-        class="psui-el-tooltip-dialog"
+        class='psui-el-tooltip-dialog'
         :class="cssClass"
       >
         <div
@@ -26,14 +23,9 @@
           aria-orientation="vertical"
           :class="getComponentClass"
         >
-          <h2 v-if="title">
-            {{ title }}
-          </h2>
-          <div
-            v-else
-            class="psui-el-tooltip-content-wrapper"
-          >
-            <slot name="content" />
+          <h2 v-if="title">{{ title}}</h2>
+          <div v-else class="psui-el-tooltip-content-wrapper">
+            <slot name="content"></slot>
           </div>
         </div>
       </div>
@@ -102,7 +94,7 @@ export default {
   mounted() {
     document.addEventListener('resize', this.updatePosition)
   },
-  beforeUnmount() {
+  beforeDestroy() {
     document.removeEventListener('resize', this.updatePosition)
   },
   methods: {

package/src/components/ui/PsDotLoader.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="psui-el-dotloader">
-    <div class="psui-el-dotloader-wrapper">
-      <span />
-      <span />
-      <span />
-    </div>
+      <div class="psui-el-dotloader-wrapper">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
   </div>
 </template>
 

package/src/components/ui/PsIcon.vue

@@ -8,11 +8,7 @@
     >
       {{ getIcon }}
     </span>
-    <img
-      v-else-if="getIconType === 'url'"
-      :src="icon"
-      :class="[iconClasses]"
-    >
+    <img v-else-if="getIconType === 'url'" :src="icon" :class="[iconClasses]" />
     <inline-svg
       v-else
       :src="icon"
@@ -20,7 +16,7 @@
       :height="size"
       :stroke="getColor"
       :fill="getColor"
-    />
+    ></inline-svg>
   </div>
 </template>
 

package/src/{index.ts → index.js}

@@ -1,3 +1,4 @@
+
 /**
  * General Components
  */

package/src/stories/{Accordion.stories.ts → Accordion.stories.js}

@@ -8,8 +8,8 @@ export default {
 }
 
 
-export const Index = (args:any, { argTypes }: { argTypes:any }) => ({
-  props: Object.keys({argTypes, args}),
+export const Index = (args, { argTypes }) => ({
+  props: Object.keys(argTypes, args),
   components: { PsAccordion, PsAccordionItem },
   template:
     `

package/src/stories/{BadgeWithIcon.stories.ts → BadgeWithIcon.stories.js}

@@ -7,7 +7,7 @@ export default {
     },
   }
   
-  const TemplateDefault = (args:any, {argTypes}:{argTypes:any})=>({
+  const TemplateDefault = (args, {argTypes})=>({
     props: Object.keys(argTypes),
     components:{PsBadgeWithIcon},
     template: `

package/src/stories/{BarChart.stories.ts → BarChart.stories.js}

@@ -4,7 +4,7 @@ export default {
   component: PsBarChart,
 }
 
-const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
+const defaultTemplate = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsBarChart },
   template: `

package/src/stories/{Breadcrumb.stories.ts → Breadcrumb.stories.js}

@@ -11,7 +11,7 @@ const items = [
   { title: '4th level', route: '' },
 ]
 
-const Template = (args:any, { argTypes }:{argTypes:any}) => ({
+const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsBreadcrumb },
   template: `
@@ -20,3 +20,6 @@ const Template = (args:any, { argTypes }:{argTypes:any}) => ({
 })
 
 export const Default = Template.bind({})
+Default.args = {
+  items: items,
+}

package/src/stories/Button.stories.js

@@ -0,0 +1,130 @@
+import PsButton, { sizes } from '../components/buttons/PsButton.vue'
+const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/Button',
+  component: PsButton,
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } },
+    disabled: { control: 'boolean' },
+    icon: { control: { type: 'select', options: icons } },
+    iconRight: { control: { type: 'select', options: icons } },
+  },
+}
+
+const TemplateDefault = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsButton },
+  template: `
+  <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(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
+          <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' />
+          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>          
+          <PsButton label='Loading Solid'   layout='solid' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, 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/>
+          <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, 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/>
+          <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, 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/>
+          <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, 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/>
+          <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
+    </div>
+
+
+    </div>
+    <p>Size: Medium</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <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'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, 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(6, 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(6, 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 style="display: grid; grid-template-columns: repeat(6, 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(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <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'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, 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 style="display: grid; grid-template-columns: repeat(6, 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/{CardInfos.stories.ts → CardInfos.stories.js}

@@ -6,10 +6,11 @@ export default {
   argTypes: {},
 }
 
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
+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.ts → ChartLegend.stories.js}

@@ -6,10 +6,11 @@ export default {
   argTypes: {},
 }
 
-const Template = (args:any, { argTypes } : { argTypes:any }) => ({
+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.ts → Checkbox.stories.js}

@@ -5,7 +5,7 @@ export default {
   component: PsCheckbox,
 }
 
-const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
+const defaultTemplate = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox},
   template: `

package/src/stories/{CheckboxSimple.stories.ts → CheckboxSimple.stories.js}

@@ -5,7 +5,7 @@ export default {
   component: PsCheckboxSimple,
 }
 
-const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
+const defaultTemplate = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckboxSimple },
   data: () => ({

package/src/stories/{Chips.stories.ts → Chips.stories.js}

@@ -1,33 +1,31 @@
 import PsChips from '../components/chips/PsChips.vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
 
-import * as HeaderStories from '../stories/Header.stories'
-
-const meta: Meta<typeof PsChips> = {
-  component: PsChips
+export default {
+  title: 'Components/Chips',
+  component: PsChips,
 }
 
-export default meta
-
-type Story = StoryObj<typeof PsChips>
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { PsChips },
-    setup(){
-      return { args }
-    },
-    template: `<div style="display:flex; gap: 10px;">
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsChips },
+  data: ()=>{
+    return{
+      isChecked: true,
+      isCheckedTwo: null,
+    }
+  },
+  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='isCheckedTwo = $event' :checked='isCheckedTwo'/>
                 <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
               </div>
-              `,
-    args:{
-      label: 'Simple Chip',
-      icon:'',
-      ...HeaderStories.LoggedIn.args
-    }
-  })
-}
+              `
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Simple Chip',
+  icon:'',
+}

package/src/stories/{ClimateZoneBadge.stories.ts → ClimateZoneBadge.stories.js}

@@ -5,7 +5,7 @@ export default {
   component: PsClimateZoneBadge,
 }
 
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
+const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsClimateZoneBadge },
   template: '<PsClimateZoneBadge v-bind="$props" />',

package/src/stories/{CostEffectBar.stories.ts → CostEffectBar.stories.js}

@@ -13,7 +13,7 @@ export default {
   },
 }
 
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
+const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsCostEffectBar },
   template: '<PsCostEffectBar v-bind="$props" />',

package/src/stories/{Datatable.stories.ts → Datatable.stories.js}

@@ -10,7 +10,7 @@ export default {
     }
 }
 
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
+const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components:  {PsDataTable},
     template: `
@@ -20,7 +20,7 @@ const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
         `
 })
 
-const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
+const RichTemplate = (args, { argTypes } ) => ({
     props: Object.keys(argTypes),
     components: {PsDataTable, PsDataTableItem},
     template: `

package/src/stories/{DateCardInfo.stories.ts → DateCardInfo.stories.js}

@@ -5,7 +5,7 @@ export default {
     component: PsDateCardInfo,
   }
 
-  const Template = (args:any, {argTypes}:{argTypes:any}) => ({
+  const Template = (args,{argTypes}) => ({
     props: Object.keys(argTypes),
     components:{PsDateCardInfo},
     template: `
@@ -18,3 +18,7 @@ export default {
 }) 
 
 export const Default = Template.bind({})
+
+Default.args = {
+  date: '2021/02/23'
+}

package/src/stories/{ElevationSystem.mdx → ElevationSystem.stories.mdx}

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Elevation system" />
 

package/src/stories/{InlineSelector.stories.ts → InlineSelector.stories.js}

@@ -5,7 +5,7 @@ export default {
   component: PsInlineSelector,
 }
 
-const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
+const TemplateDefault = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: {PsInlineSelector},
   template: `

package/src/stories/{InputTextArea.stories.ts → InputTextArea.stories.js}

@@ -5,7 +5,7 @@ export default {
   component: PsInputTextArea,
 }
 
-const Template = (args:any, {argTypes}:{argTypes:any}) => ({
+const Template = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: {PsInputTextArea},
   template: `