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

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,11 +19,66 @@ 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"  />
-    </div>
+  template: `    
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
+
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
+      </div>
+      
+      <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 class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
+      </div>
+
+      <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />      
+      <PsInput layout="mini" label="Resting without hint" />      
+      <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+      <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
+      <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
+      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+
+      <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+
+    </div> 
   `
 })
 
@@ -56,12 +111,11 @@ const TemplateSlots = (args, { argTypes }) => ({
 
 export const InputText = TemplateDefault.bind({})
 InputText.args = {
-  label: 'Label',
+  label: 'Input Text',
   placeholder: 'Placeholder',
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
   value: 10,
 }
 
@@ -72,7 +126,6 @@ InputPassword.args = {
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
 }
 
 export const InputSlots = TemplateSlots.bind({})
@@ -82,5 +135,4 @@ InputSlots.args = {
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: 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',
+}

package/src/stories/ProgressBar.stories.js

@@ -0,0 +1,23 @@
+import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
+
+export default {
+  title: 'Components/ProgressBar',
+  component: PsProgressBar,
+  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: { PsProgressBar },
+  template: '<PsProgressBar v-bind="$props" />',
+})
+
+export const ProgressBar = Template.bind({})
+ProgressBar.args = {}

package/src/stories/RadioButton.stories.js

@@ -25,7 +25,7 @@ const Template = (args, { argTypes }) => ({
       </div>
     </div>
   </div>
-  `
+  `,
 })
 
 export const Default = Template.bind({})
@@ -33,5 +33,5 @@ Default.args = {}
 
 export const Small = Template.bind({})
 Small.args = {
-  small: true
+  small: true,
 }

package/src/stories/Toggle.stories.js

@@ -12,16 +12,15 @@ const Template = (args, { argTypes }) => ({
   components: { PsToggle },
   template: `
   <PsToggle v-bind="$props" :selected.sync="selected" />
-  `
+  `,
 })
 
 export const Default = Template.bind({})
 Default.args = {
   items: items,
-  selected: selected
+  selected: selected,
 }
 
-
 /**
  * Hey Luciano!
  * Adicionei este script aqui pois não entendi como criar uma story com script em MDX ou algo que rode geral, saca?
@@ -29,18 +28,18 @@ Default.args = {
  * Se quiser dar uma melhorada nessa parte, fique a vontade meu chegado! TMJ
  */
 window.addEventListener('click', (ev) => {
-  if(ev.target.classList.contains('click-to-copy')) {
+  if (ev.target.classList.contains('click-to-copy')) {
     copyText(ev.target.dataset.toCopy)
   }
 })
 
-function copyText(textToCopy) {  
-  var myTemporaryInputElement = document.createElement("input")
-  myTemporaryInputElement.type = "text"
+function copyText(textToCopy) {
+  var myTemporaryInputElement = document.createElement('input')
+  myTemporaryInputElement.type = 'text'
   myTemporaryInputElement.value = textToCopy
   document.body.appendChild(myTemporaryInputElement)
   myTemporaryInputElement.select()
-  document.execCommand("Copy")
+  document.execCommand('Copy')
   document.body.removeChild(myTemporaryInputElement)
   alert('Item copied to clipboard!')
 }

package/src/stories/Tooltip.stories.js

@@ -13,8 +13,8 @@ const TemplateDialog = (args, {argTypes}) => ({
     components: {PsDialogTooltip},
     template: `
             <div style='display: flex; justify-content: flex-end;'>
-                <PsDialogTooltip v-bind='$props'>
-                    <p>Trigger</p>
+                <PsDialogTooltip v-bind='$props'>                      
+                          <p>Trigger</p>                  
                 </PsDialogTooltip>
             <div>
     `,
@@ -29,7 +29,7 @@ const TemplateRich = (args,{argTypes})=>({
     template: `
             <div style='display: flex; justify-content: flex-end;'>
                 <PsRichTooltip v-bind='$props'>
-                    <p>Trigger</p>
+                    <p>Trigger</p>                
                 </PsRichTooltip>
             </div>
             `
@@ -89,8 +89,9 @@ Dialog.args = {
 
 export const Rich = TemplateRich.bind({})
 Rich.args = {
-    type: 'red',
+    type: 'blue',
     title: 'This is a test!!',
+    text: 'Here goes your text',
     cssClass: 'psui-w-32'
 }
 

package/src/util/GeneralFunctions.js

@@ -1,15 +1,15 @@
 export const randomString = (length) => {
-  var result           = ''
-  var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  var result = ''
+  var characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
   var charactersLength = characters.length
-  for ( var i = 0; i < length; i++ ) {
-     result += characters.charAt(Math.floor(Math.random() * charactersLength))
+  for (var i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength))
   }
   return result
 }
 
 export const getParentScrollableEl = (node) => {
-  
   if (node == null) {
     return null
   }
@@ -19,5 +19,4 @@ export const getParentScrollableEl = (node) => {
   } else {
     return getParentScrollableEl(node.parentNode)
   }
-
-}
+}

package/src/util/imageLoader.js

@@ -34,7 +34,7 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
           var headers = xhr.getAllResponseHeaders()
           var mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
           if (mime && mime[1]) options.type = mime[1]
-          var blob = new Blob([this.response], options)
+          var blob = new Blob([xhr.response], options)
           resolve(window.URL.createObjectURL(blob))
         }
       }

package/tailwind.config.js

@@ -15,41 +15,42 @@ module.exports = {
       'gray-80': '#28323B',
 
       'blue': '#5094D3',
-      'blue-10':'#ECF7FB',
-      'blue-20':'#E0EFF6',
-      'blue-50':'#64B5CE', 
-      'blue-60':'#318FAC',
-      'blue-70':'#00465F',
-      'blue-80':'#002A3A',
+      'blue-10': '#ECF7FB',
+      'blue-20': '#E0EFF6',
+      'blue-50': '#64B5CE',
+      'blue-60': '#318FAC',
+      'blue-70': '#00465F',
+      'blue-80': '#002A3A',
 
-      'green-10':'#DEF8E8',
-      'green-20':'#5DB883',
-      'green-70':'#44A06A',
-      'green-80':'#286943',
+      'green-10': '#DEF8E8',
+      'green-20': '#5DB883',
+      'green-70': '#44A06A',
+      'green-80': '#286943',
 
-      'yellow-10':'#FDF3E3',
-      'yellow-20':'#EDAB3E',
-      'yellow-70':'#B87305',
-      'yellow-80':'#834C0D',
+      'yellow-10': '#FDF3E3',
+      'yellow-20': '#EDAB3E',
+      'yellow-70': '#B87305',
+      'yellow-80': '#834C0D',
 
-      'red-10':'#FCEBEB',
-      'red-20':'#D65C5A',
-      'red-70':'#AA3937',
-      'red-80':'#832F2E',
-      
-      'sky': '#518BE2',
-      'teal': '#57C0BA',
-      'emerald': '#8CCA82',
-      'mustard': '#E9CF74',
-      'orange': '#FF906D',
-      'pink': '#FF77B8',
-      'purple': '#9278C9'
+      'red-10': '#FCEBEB',
+      'red-20': '#D65C5A',
+      'red-70': '#AA3937',
+      'red-80': '#832F2E',
+
+      sky: '#518BE2',
+      teal: '#57C0BA',
+      emerald: '#8CCA82',
+      mustard: '#E9CF74',
+      orange: '#FF906D',
+      pink: '#FF77B8',
+      purple: '#9278C9',
+      transparent: 'transparent',
     },
     fontFamily: {
-      'sans': ['Lato'],
+      sans: ['Lato'],
     },
     fontSize: {
-      big:['16px','130%'],
+      big: ['16px', '130%'],
       small: ['14px', '130%'],
       xsmall: ['12px', '130%'],
       accent: ['14px', '130%', { letterSpacing: '0.6px' }],
@@ -61,46 +62,68 @@ module.exports = {
       h4: ['20px', '120%'],
       h5: ['18px', '120%'],
       h6: ['17px', '120%'],
-    },    
+    },
     boxShadow: {
-      'elevation--5': '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      'elevation-5': '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      'elevation-10': '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
-      'elevation-20': '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
-      'elevation-30': '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
-      'elevation-40': '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
+      'elevation--5':
+        '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      'elevation-5':
+        '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      'elevation-10':
+        '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      'elevation-20':
+        '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
+      'elevation-30':
+        '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
+      'elevation-40':
+        '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
       sm: '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      default: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      default:
+        '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
       md: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
       lg: '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
       xl: '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
       inner: '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
       none: 'none',
     },
-    borderColor: theme => ({
+    borderColor: (theme) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.blue-70', 'currentColor'),
     }),
-    divideColor: theme => ({
+    divideColor: (theme) => ({
       ...theme('colors'),
     }),
     extend: {
       divideOpacity: {
-        '10': '0.1',
-        '20': '0.2',
-        '95': '0.95',
-      }
+        10: '0.1',
+        20: '0.2',
+        95: '0.95',
+      },
     },
   },
   variants: {
     boxShadow: ['active'],
     borderRadius: ['last', 'first'],
-    backgroundColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'even', 'first', 'disabled'],
-    textColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'first', 'disabled'],
+    backgroundColor: [
+      'responsive',
+      'hover',
+      'active',
+      'focus',
+      'group-hover',
+      'even',
+      'first',
+      'disabled',
+    ],
+    textColor: [
+      'responsive',
+      'hover',
+      'active',
+      'focus',
+      'group-hover',
+      'first',
+      'disabled',
+    ],
     borderColor: ['disabled'],
-    extend: {
-    },
+    extend: {},
   },
-  plugins: [
-  ],
+  plugins: [],
 }