@policystudio/policy-studio-ui-vue 1.0.20 → 1.0.21

package/src/components/notifications/PsDialog.vue

@@ -1,38 +1,57 @@
 <template>
-  <div :class="cssClass">
-    <div class="material-icons psui-my-auto">info</div>
-    <div class="psui-w-full">{{ message }}</div>
-    <div class="psui-cursor-pointer psui-font-bold psui-my-auto psui-pr-4">OK</div>
+  <div class="psui-flex psui-justify-between psui-pr-3 psui-pl-2 psui-py-2 psui-rounded-md" :class="getDialogColor">   
+      <div class="psui-flex psui-justify-between psui-gap-2">
+        <i class="material-icons-round">info</i>
+        <div class="psui-flex psui-flex-col">
+          <p v-if="message" class="psui-w-full">{{ message }}</p>
+          <slot v-else name="content"></slot>
+          <slot v-if="layout === 'vertical'" name="action"></slot>
+        </div>
+      </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">
+          <i class="material-icons-round">close</i>
+        </button>
+      </div>
   </div>
 </template>
 
 <script>
-export const typeOptions = ['informative', 'success', 'alert']
+
 export default {
   name: 'PsDialog',
   props: {
-    type: {
+    status: {
       type: String,
       default: 'informative',
-      validator: (value) => typeOptions.indexOf(value) !== -1
+      validator: (value) => ['informative', 'success', 'alert'].includes(value)
     },
     message: {
       type: String,
-      required: true
+    },
+    layout:{
+      type: String,
+      default: 'horizontal',
+      validator: (value) => ['horizontal', 'vertical'].includes(value)
+    },
+    cssClass:{
+      type: String
     }
   },
-  data() {
-    return {
-      colors: {
-        informative: { background:'blue-20', color: 'blue-60' },
-        success: { background:'green-10', color: 'green-70' },
-        alert: { background:'yellow-10', color: 'yellow-70' }
-      }
+  emits:['close'],
+  computed: {
+    getDialogColor() {
+      let dialogColor = ''
+        if(this.status === 'informative') dialogColor = `psui-bg-blue-20 psui-text-blue-60 ${this.cssClass}`
+        if(this.status === 'success') dialogColor = `psui-bg-green-10 psui-text-green-70 ${this.cssClass}`
+        if(this.status === 'alert') dialogColor = `psui-bg-yellow-10 psui-text-yellow-70 ${this.cssClass}`
+      return dialogColor
     }
   },
-  computed: {
-    cssClass() {
-      return `psui-flex psui-space-x-4 psui-font-small psui-rounded-md psui-py-2 psui-px-4 psui-align-middle psui-flex psui-bg-${this.colors[this.type].background} psui-text-${this.colors[this.type].color}`
+  methods:{
+    onClose(){
+      this.$emit('close')
     }
   }
 }

package/src/components/tooltip/PsRichTooltip.vue

@@ -3,6 +3,9 @@
     <template v-slot:trigger>
       <slot></slot>
     </template>
+    <template v-slot:dialog>
+      <p v-if="text">{{text}}</p>
+    </template>
   </PsTooltip>
 </template>
 
@@ -22,6 +25,9 @@ export default {
       default: "gray",
       validator: (type) => ["gray", "red", "blue"].includes(type),
     },
+    text: {
+      type: String,
+    },
     cssClass: {
       type: String,
       default: "",

package/src/components/tooltip/PsTooltip.vue

@@ -21,11 +21,10 @@
           class="
             psui-flex
             psui-flex-col
-            psui-py-1
-            psui-px-2
             psui-rounded-md
             psui-shadow-md
             psui-z-20
+            psui-p-4
           "
           aria-orientation="vertical"
           :class="cssClass"
@@ -69,7 +68,6 @@ export default {
     }
   },
   mounted() {
-      console.log(this.$attrs)
     document.addEventListener("resize", this.updatePosition)
   },
   beforeDestroy() {

package/src/index.js

@@ -21,12 +21,12 @@ import PsDraggable from './components/controls/PsDraggable.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)
@@ -41,7 +41,7 @@ export default {
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
     Vue.component('PsDraggable', PsDraggable)
-  }
+  },
 }
 
 export {
@@ -63,5 +63,5 @@ export {
   PsTooltip,
   PsRichTooltip,
   PsDialogTooltip,
-  PsDraggable
-}
+  PsDraggable,
+}

package/src/stories/Accordion.stories.js

@@ -1,35 +1,41 @@
-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>',
+    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']
-    }
+  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>',
+  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>',
 })
-
-

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/Chips.stories.js

@@ -8,8 +8,14 @@ export default {
 const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsChips },
+    data: ()=>{
+        return{
+            isChecked: null,
+        }
+    },
     template: `<div >
-               <PsChips v-bind='$props'/>
+                <PsChips v-bind='$props' @update:checked='isChecked = $event' :checked='isChecked'/>
+                <pre>{{isChecked}}</pre>
                </div>
                `
 })

package/src/stories/ClimateZoneBadge.stories.js

@@ -0,0 +1,24 @@
+import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
+
+// const icons = ["area_chart"];
+
+export default {
+  title: 'Components/ClimateZoneBadge',
+  component: PsClimateZoneBadge,
+  argTypes: {
+    type: {
+      // icon: { control: { type: "select", options: icons } },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsClimateZoneBadge },
+  template: '<PsClimateZoneBadge v-bind="$props" />',
+})
+
+export const ClimateZoneBadge = Template.bind({})
+ClimateZoneBadge.args = {
+  icon: 'area_chart',
+}

package/src/stories/Colors.stories.mdx

@@ -11,7 +11,7 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 <div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="psui-bg-blue">Blue #5094D3</div>
+  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="psui-bg-blue">Blue <div>#5094D3</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="psui-bg-blue-80">Blue 80 <div>#002A3A</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="psui-bg-blue-70">Blue 70 <div>#00465F</div></div>
   <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="psui-bg-blue-60">Blue 60 <div>#318FAC</div></div>

package/src/stories/CostEffectBar.stories.js

@@ -0,0 +1,23 @@
+import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
+
+export default {
+  title: 'Components/CostEffectBar',
+  component: PsCostEffectBar,
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 100 },
+    },
+    breakEven: {
+      control: { type: 'number', min: 0, max: 100 },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsCostEffectBar },
+  template: '<PsCostEffectBar v-bind="$props" />',
+})
+
+export const SimpleProgressBar = Template.bind({})
+SimpleProgressBar.args = {}

package/src/stories/Dialog.stories.js

@@ -3,32 +3,165 @@ import PsDialog from '../components/notifications/PsDialog.vue'
 export default {
   title: 'Components/Dialog',
   component: PsDialog,
-  argTypes: {
-    type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
-  },
 }
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
-  template: '<PsDialog v-bind="$props" />',
+  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 },
+  template: `
+          <div class="psui-grid psui-grid-cols-3 psui-gap-4">
+            
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Horizontal</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog status="informative" layout="horizontal">
+                <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>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog status="success" layout="horizontal">
+                <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>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog status="alert" layout="horizontal">
+                <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>
+            </div>
+
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog status="informative" layout="vertical">
+                <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>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog status="success" layout="vertical">
+                <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>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog status="alert" layout="vertical">
+                <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>
+            </div>
+
+            
+            
+            <!-- PSDialog Vertical -->
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical Props Message</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog status="informative" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog status="success" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog status="alert" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+          </div>
+          `,
+})
+
+export const Examples = TemplateExamples.bind({})
+
 export const Informative = Template.bind({})
 Informative.args = {
-  type: 'informative',
-  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+  status: 'informative',
+  layout: 'vertical',
+  cssClass: 'psui-w-2/3'
 }
 
 export const Success = Template.bind({})
 Success.args = {
-  type: 'success',
+  status: 'success',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
-  type: 'alert',
+  status: 'alert',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
 }
 

package/src/stories/Draggable.stories.js

@@ -9,16 +9,14 @@ const Template = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsDraggable },
     template: `
-        <div style='width: 200px'>
-            <PsDraggable v-bind='$props'>
-                <button>Teste 1</button>
-                <button>Teste 2</button>
-            </PSDraggable> 
+        <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+            <PsDraggable v-bind='$props'/>
         </div>
             `
 })
 
 export const Component = Template.bind({})
 Component.args = {
-    data: [{title: 'Teste 1', columns: [ 1 , 2 , 3, 4]}]
+    getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Teste1' , 'Teste2' , 'Teste3', 'Teste4']}, {title: 'PER HOME RESULTS', columns: [ 'Teste5' , 'Teste6' , 'Teste7', 'Teste8']}]},
+    module: 'comparison'
 }

package/src/stories/Dropdown.stories.js

@@ -2,8 +2,7 @@ import PsDropdown from '../components/forms/PsDropdown.vue'
 export default {
   title: 'Components/Dropdown',
   component: PsDropdown,
-  argTypes: {
-  },
+  argTypes: {},
 }
 
 const Template = (args, { argTypes }) => ({
@@ -24,11 +23,10 @@ const Template = (args, { argTypes }) => ({
       </template>
     </PsDropdown>
   </div>
-  `
+  `,
 })
 
 export const CustomTrigger = Template.bind({})
 CustomTrigger.args = {
-  title: 'Custom trigger'
+  title: 'Custom trigger',
 }
- 

package/src/stories/HighlightRippleDot.stories.js

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

package/src/stories/Input.stories.js

@@ -19,10 +19,41 @@ const TemplateDefault = (args, { argTypes }) => ({
       }
     }
   },
-  template: `
-    <div class="psui-p-8 psui-bg-gray-10">
-      <PsInput v-bind="$props" />
-      <PsInput v-bind="$props" class="psui-mt-8" :validator="validator"  />
+  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" />
+      
+      <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: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </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>
   `
 })
@@ -56,7 +87,7 @@ const TemplateSlots = (args, { argTypes }) => ({
 
 export const InputText = TemplateDefault.bind({})
 InputText.args = {
-  label: 'Label',
+  label: 'Input Text',
   placeholder: 'Placeholder',
   hint: 'Optional Assistive text',
   disabled: false,

package/src/stories/MiniTag.stories.js

@@ -0,0 +1,46 @@
+import PsMiniTag, {
+  typeOptions,
+} from '../components/badges-and-tags/PsMiniTag.vue'
+
+export default {
+  title: 'Components/MiniTag',
+  component: PsMiniTag,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: typeOptions,
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsMiniTag },
+  template: '<PsMiniTag v-bind="$props" />',
+})
+
+export const Informative = Template.bind({})
+Informative.args = {
+  type: 'informative',
+  message: 'This is an info alert',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  type: 'success',
+  message: 'This is a success alert',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  type: 'warning',
+  message: 'This is a warning alert',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  type: 'error',
+  message: 'This is an error alert',
+}