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

package/src/stories/Dialog.stories.js

@@ -64,7 +64,7 @@ const TemplateExamples = (args, { argTypes }) => ({
               </PsDialog>
             </div>
             
-            <div>
+            <div class="psui-text-red">
               <h2>Success</h2>
               <PsDialog theme="success" layout="vertical" :hasClose="false">
                 <template>

package/src/stories/InlineSelector.stories.js

@@ -0,0 +1,18 @@
+import PsInlineSelector from "../components/controls/PsInlineSelector.vue"
+
+export default {
+    title: 'Components/InlineSelector',
+    component: PsInlineSelector,
+}
+
+const TemplateDefault = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: {PsInlineSelector},
+    template: `
+    <div style="width: auto; margin-right: auto; display: flex; align-items: center;">  
+        <PsInlineSelector v-bind="$props"></PsInlineSelector>
+    </div>
+        `
+})
+
+export const Default = TemplateDefault.bind({})

package/src/stories/InputSelect.stories.js

@@ -0,0 +1,30 @@
+import PsInputSelect from '../components/forms/PsInputSelect.vue'
+
+export default {
+    title: 'Components/InputSelect',
+    component: PsInputSelect
+}
+
+const TemplateDefault = (args, {argTypes})=> ({
+    props: Object.keys(argTypes),
+    components: {PsInputSelect},
+    template: `
+  <div style='display:flex; gap: 30px;'>  
+    <div style='width:300px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Default Select</span>
+        <PsInputSelect v-bind="$props" label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" disabled label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+    <div style='width:90px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Mini Select</span>
+        <PsInputSelect v-bind="$props" layout="mini" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" layout="mini" disabled keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+  </div>
+    `
+})
+
+export const Default = TemplateDefault.bind({})
+Default.args = {
+    items: [{title:'Text 1', value:'Value 1'}, {title:'Text 2', value:'Value 2'}]
+}

package/src/stories/InputTextArea.stories.js

@@ -0,0 +1,25 @@
+import PsInputTextArea from '../components/forms/PsInputTextArea.vue'
+
+export default {
+    title: 'Components/Input Textarea',
+    component: PsInputTextArea,
+}
+
+const Template = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: {PsInputTextArea},
+    template: `
+    <div style='background-color:#F3F6F9; width:400px; height: 100%; padding: 20px 20px; display: flex: display; flex-direction: column;'>
+        <div style='display: flex; align-items:center; gap:30px;'>
+            <h1>Default</h1>
+            <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" optionalLabel="Optional helper/feedback text"></PsInputTextArea>    
+        </div>
+        <div style='display: flex; align-items:center; gap:30px; margin-top:40px;'>
+            <h1>Disable</h1>
+            <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" disabled ></PsInputTextArea>
+        </div>
+    </div>
+    `
+}) 
+
+export const Default = Template.bind({})

package/src/stories/MiniTag.stories.js

@@ -21,26 +21,32 @@ const Template = (args, { argTypes }) => ({
   template: '<PsMiniTag v-bind="$props" />',
 })
 
-export const Informative = Template.bind({})
-Informative.args = {
-  type: 'informative',
+export const Info = Template.bind({})
+Info.args = {
+  layout: 'info',
   message: 'This is an info alert',
 }
 
 export const Success = Template.bind({})
 Success.args = {
-  type: 'success',
+  layout: 'success',
   message: 'This is a success alert',
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
-  type: 'warning',
+  layout: 'warning',
   message: 'This is a warning alert',
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  type: 'error',
+  layout: 'error',
   message: 'This is an error alert',
 }
+
+export const Default = Template.bind({})
+Default.args = {
+  layout: 'default',
+  message: 'This is a default color',
+}

package/src/stories/RadioButton.stories.js

@@ -3,35 +3,38 @@ import PsRadioButton from '../components/controls/PsRadioButton.vue'
 export default {
   title: 'Components/Radio Button',
   component: PsRadioButton,
-  argTypes: {},
-}
+ }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsRadioButton },
-  data: () => {
-    return {
-      selectedValue: 2,
-    }
-  },
-  template: `
-  <div>
-    <div>
-      <PsRadioButton v-bind="$props" name="options" label="Label 1" value="1" v-model="selectedValue" />
-      <PsRadioButton v-bind="$props" name="options" label="Label 2" value="2" v-model="selectedValue" />
-      <PsRadioButton v-bind="$props" name="options" label="Label 3" value="3" v-model="selectedValue" />
-      <div class="result">
-        Radio button selection: {{selectedValue}}
-      </div>
-    </div>
-  </div>
-  `,
-})
+ const DefaultTemplate = (args,{ argTypes}) => ({
+   props: Object.keys(argTypes),
+   components: { PsRadioButton},
+   template: `
+    <div style='display: flex; gap: 20px;'>
+      <div style='display: flex; flex-direction: column; gap:10px;'>
+        <span>Resting</span>
+        <div style='display: flex; flex-direction:column; gap:5px;'> 
+          <PsRadioButton v-bind='$props' label='Label 1' size='big'/>
+          <PsRadioButton v-bind='$props' label='Label 2' size='small'/>
+        </div>
+      </div>  
+      <div style='display: flex; flex-direction: column; gap:10px;'>
+        <span>Active</span>
+        <div style='display: flex; flex-direction:column; gap:5px;'> 
+          <PsRadioButton v-bind='$props' label='Label 3' size='big' checked/>
+          <PsRadioButton v-bind='$props' label='Label 4' size='small' checked/>
+        </div>
+      </div>  
+      <div style='display: flex; flex-direction: column; gap:10px;'>
+        <span>Disable</span>
+        <div style='display: flex; flex-direction:column; gap:5px;'> 
+          <PsRadioButton v-bind='$props' label='Label 5' size='big' disabled/>
+          <PsRadioButton v-bind='$props' label='Label 6' size='small' disabled/>
+        </div>
+      </div>  
+    </div>  
+  `
+ })
 
-export const Default = Template.bind({})
-Default.args = {}
 
-export const Small = Template.bind({})
-Small.args = {
-  small: true,
-}
+export const Default = DefaultTemplate.bind({})
+

package/src/stories/Switch.stories.js

@@ -0,0 +1,33 @@
+import PsSwitch from '../components/controls/PsSwitch.vue'
+export default {
+  title: 'Components/Switch',
+  component: PsSwitch,
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsSwitch },
+  template: `
+    <div style='display: flex; gap:10px;'> 
+      <div style='display: flex; gap: 10px; flex-direction: column; margin-right: 10px;'>
+        <span>Size</span>
+        <span>BIG</span>
+        <span>SMALL</span>
+      </div>
+      <div style='display: flex; gap: 10px; flex-direction: column;'>
+        <span>Disable</span>
+        <PsSwitch v-bind="$props" label='Switch1'  :value="${false}" size='big'/>
+        <PsSwitch v-bind="$props" label='Switch2' :value="${false}" size='small'/>
+      </div>
+      <div style='display: flex; gap: 10px; flex-direction: column;'>
+      <span>Enable</span>
+        <PsSwitch v-bind="$props" label='Switch3' value size='big'/>
+        <PsSwitch v-bind="$props" label='Switch4' value size='small'/>
+      </div>
+    </div>
+  `
+})
+
+export const Default = Template.bind({})
+
+

package/src/stories/Toast.stories.js

@@ -1,58 +1,52 @@
-import PsToast, { typeOptions, fillOptions } from '../components/notifications/PsToast.vue'
+import PsToast from '../components/notifications/PsToast.vue'
 export default {
   title: 'Components/Toast',
   component: PsToast,
-  argTypes: {
-    type: { control: { type: 'select', options: typeOptions } },
-    fill: { control: { type: 'select', options: fillOptions } }
-  },
 }
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsToast },
-  methods: {
-    teste(message) {
-      alert(message)
-    }
-  },
   template: `
-  <PsToast v-bind="$props">
-  <template v-if="${'default' in args}" v-slot>${args.default}</template>
-  </PsToast>
+  <div style="display: flex; gap: 30px;">
+    <div style="display: flex; flex-direction: column; gap: 5px; width:500px;">
+      <PsToast v-bind="$props" message="This is a info alert" layout="info" icon="info" fill="intense" >
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+      <PsToast v-bind="$props" message="This is a success alert" layout="success" icon="check_circle" >
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+      <PsToast v-bind="$props" message="This is a warning alert" layout="warning" icon="warning">
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+      <PsToast v-bind="$props" message="This is a an error alert" layout="error" icon="warning" >
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+    </div>
+    <div style="display: flex; flex-direction: column; gap: 5px; width:500px;">
+      <PsToast v-bind="$props" message="This is a info alert" layout="info" icon="info" fill="soft" >
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+      <PsToast v-bind="$props" message="This is a success alert" layout="success" icon="check_circle" fill="soft">
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+      <PsToast v-bind="$props" message="This is a warning alert" layout="warning" icon="warning" fill="soft">
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+      <PsToast v-bind="$props" message="This is a an error alert" layout="error" icon="warning" fill="soft">
+        <p>Action 1</p>
+        <p>Action 2</p>
+      </PsToast>
+    </div>
+  <div>
   `
 })
 
-export const Info = Template.bind({})
-Info.args = {
-  type: 'info',
-  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',
-}
-
-export const Actions = Template.bind({})
-Actions.args = {
-  type: 'info',
-  message: 'This is an info alert with actions',
-  default: `
-    <span class="psui-cursor-pointer" @click="teste('Callback Action 1')">ACTION1</span>
-    <span class="psui-cursor-pointer" @click="teste('Callback Action 2')">ACTION2</span>
-    `
-}
+export const Default = Template.bind({})

package/src/stories/Tooltip.stories.js

@@ -1,6 +1,6 @@
 import PsTooltip from '../components/tooltip/PsTooltip.vue'
 import PsRichTooltip from '../components/tooltip/PsRichTooltip.vue'
-import PsDialogTooltip,{ CSSCOLORS} from '../components/tooltip/PsDialogTooltip.vue'
+import PsDialogTooltip from '../components/tooltip/PsDialogTooltip.vue'
 
 export default {
     title: 'Components/Tooltip',
@@ -12,103 +12,103 @@ const TemplateDialog = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: {PsDialogTooltip},
     template: `
-            <div style='display: flex; justify-content: flex-end;'>
-                <PsDialogTooltip v-bind='$props'>                      
-                          <p>Trigger</p>                  
-                </PsDialogTooltip>
-            <div>
+    <div style='display: flex; justify-content: space-between;'>
+        <PsDialogTooltip v-bind='$props' layout='white' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-48'>
+            <template v-slot:trigger>                      
+                  <p>Trigger</p>                  
+            </template>
+            <template v-slot:content>
+                   <p>Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.</p> 
+            </template>
+        </PsDialogTooltip>
+        <PsDialogTooltip v-bind='$props' layout='dark' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-48'>
+            <template v-slot:trigger>                      
+                  <p>Trigger</p>                  
+            </template>
+            <template v-slot:content>
+                   <p>Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.</p> 
+            </template>
+        </PsDialogTooltip>
+        <PsDialogTooltip v-bind='$props' layout='color' title='Duct Sealing' buttonText='More Info' cssClass='psui-w-48'>
+            <template v-slot:trigger>                      
+                  <p>Trigger</p>                  
+            </template>
+            <template v-slot:content>
+                   <p>Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.</p> 
+            </template>
+        </PsDialogTooltip>
+    </div>
     `,
-    argTypes:{
-        type: { control : { type: 'select', options: CSSCOLORS}}
-    }
 })
 
 const TemplateRich = (args,{argTypes})=>({
     props: Object.keys(argTypes),
     components: {PsRichTooltip},
     template: `
-            <div style='display: flex; justify-content: flex-end;'>
-                <PsRichTooltip v-bind='$props'>
-                    <p>Trigger</p>                
-                </PsRichTooltip>
-            </div>
-            `
+    <div style='display: flex; justify-content: space-between;'>
+        <PsRichTooltip v-bind='$props' layout='red' title='Measures that are not cost-effective cannot be added to a combination' cssClass='psui-w-48'>
+            <template v-slot:trigger>
+                <p>Trigger</p>                            
+            </template>
+            <template v-slot:content>
+                <p>Here you can add an optional supporting text</p> 
+            </template>
+        </PsRichTooltip>
+        <PsRichTooltip v-bind='$props' layout='blue' title='Select to create a combination of measures for your Policy' cssClass='psui-w-48'>
+            <template v-slot:trigger>
+                <p>Trigger</p>                            
+            </template>
+            <template v-slot:content>
+                <p>Here you can add an optional supporting text</p> 
+            </template>
+        </PsRichTooltip>
+        <PsRichTooltip v-bind='$props' layout='gray' title='Did not account for the cost of combustion safety testing' cssClass='psui-w-48'>
+            <template v-slot:trigger>
+                <p>Trigger</p>                            
+            </template>
+            <template v-slot:content>
+                <p>Here you can add an optional supporting text</p> 
+            </template>
+        </PsRichTooltip>
+    </div>
+`
 })
 
-
-const TemplateRight = (args,{argTypes})=>({
-    props: Object.keys(argTypes),
-    components: {PsTooltip},
-    template: `
-            <div style='display: flex; justify-content: flex-end;'>
-                <PsTooltip v-bind='$props'>
-                    <template v-slot:trigger>
-                        Trigger
-                    </template>
-                </PsTooltip>
-            </div>
-            `
-})
-
-const TemplateMiddle = (args, {argTypes})=> ({
-    props: Object.keys(argTypes),
-    components: {PsTooltip},
-    template: `
-            <div style='display: flex; justify-content: center;'>
-            <PsTooltip v-bind='$props'>
-                <template v-slot:trigger>
-                    Trigger
-                </template>
-            </PsTooltip>
-            </div>
-    `
-})
-
-const TemplateLeft = (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: {PsTooltip},
-    template: `
-            <div style='display: flex; justify-content: flex-start;'>
-            <PsTooltip v-bind='$props'>
-                <template v-slot:trigger>
-                    Trigger
-                </template>
-            </PsTooltip>
-            </div>    
-    `
+const TemplateDefault = (args, {argTypes}) => ({
+props: Object.keys(argTypes),
+components: {PsTooltip},
+template: `
+    <div style='display: flex; justify-content: space-between;'>
+        <PsTooltip v-bind='$props'>
+            <template v-slot:trigger>
+                Trigger
+            </template>
+            <template v-slot:content>
+                Basic Tooltip
+            </template>
+        </PsTooltip>
+        <PsTooltip v-bind='$props'>
+            <template v-slot:trigger>
+                Trigger
+            </template>
+            <template v-slot:content>
+                Basic Tooltip
+            </template>
+        </PsTooltip>
+        <PsTooltip v-bind='$props'>
+            <template v-slot:trigger>
+                Trigger
+            </template>
+            <template v-slot:content>
+                Basic Tooltip
+            </template>
+        </PsTooltip>
+    </div>    
+`
 })
 
 export const Dialog = TemplateDialog.bind({})
-Dialog.args = {
-    text: 'Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.',
-    title: 'Duct Sealing',
-    buttonText: 'More info',
-    cssClass: 'psui-w-32',
-    type: 'color'
-}
 
 export const Rich = TemplateRich.bind({})
-Rich.args = {
-    type: 'blue',
-    title: 'This is a test!!',
-    text: 'Here goes your text',
-    cssClass: 'psui-w-32'
-}
-
-export const RightSide = TemplateRight.bind({})
-RightSide.args = {
-    title: 'This is a test!!!',
-    type: 'red',
-}
-
-export const Middle = TemplateMiddle.bind({})
-Middle.args = {
-    title: 'This is a test!!!',
-    type: 'blue',
-}
 
-export const Left = TemplateLeft.bind({})
-Left.args = {
-    title: 'This is a test!!!',
-    type: 'gray',
-}
+export const Default = TemplateDefault.bind({})

package/tailwind.config.js

@@ -33,6 +33,7 @@ module.exports = {
       'yellow-80': '#834C0D',
 
       'red-10': '#FCEBEB',
+      'red-15': '#EAC5C5',
       'red-20': '#D65C5A',
       'red-70': '#AA3937',
       'red-80': '#832F2E',
@@ -112,6 +113,7 @@ module.exports = {
       'even',
       'first',
       'disabled',
+      'checked',
     ],
     textColor: [
       'responsive',
@@ -121,8 +123,13 @@ module.exports = {
       'group-hover',
       'first',
       'disabled',
+      'checked',
+    ],
+    borderColor: [
+      'disabled',
+      'hover',
+      'checked'
     ],
-    borderColor: ['disabled'],
     extend: {},
   },
   plugins: [],

package/src/assets/images/check-checkbox-button.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" width="16px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>

package/src/assets/images/radio-checked-button.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#64b5ce"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><circle cx="12" cy="12" r="5"/></svg>

package/src/stories/Swith.stories.js

@@ -1,38 +0,0 @@
-import PsSwitch, { sizes } from '../components/controls/PsSwitch.vue'
-export default {
-  title: 'Components/Switch',
-  component: PsSwitch,
-  argTypes: {
-    size: { control: { type: 'select', options: sizes } }
-  },
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsSwitch },
-  data: () => {
-    return {
-      model: true
-    }
-  },
-  template: `
-  <div>
-    <PsSwitch v-bind="$props" v-model="model" />
-    <p>{{ model }}</p>
-  </div>
-  `
-})
-
-export const Big = Template.bind({})
-Big.args = {
-  size: 'big',
-  label: 'Switch Big',
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-  label: 'Switch Small',
-  small: true
-}
-