@policystudio/policy-studio-ui-vue 1.0.0 → 1.0.4

package/src/components/buttons/PsButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <button
+    class="psui-font-bold psui-align-middle psui-flex psui-rounded-md"
+    :class="classes" 
+    @click="onClick()"
+  >
+    <i
+      v-if="icon"
+      class="psui-my-auto material-icons psui-mr-2"
+      :class="{ 'psui-text-sm': size === 'small' }"
+    >
+    {{ icon }}
+    </i>
+    <div class="psui-flex-grow psui-text-left">{{ label }}</div>
+    <i
+      v-if="iconRight" class="psui-my-auto material-icons psui-ml-2" 
+      :class="{ 'psui-text-sm': size === 'small' }"
+    >
+    {{ iconRight }}
+    </i>
+  </button>
+</template>
+
+<script>
+export const sizes = ['big', 'medium', 'small']
+export default {  
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    outline: {
+      type: Boolean,
+      default: false
+    },
+    ghost: {
+      type: Boolean,
+      default: false
+    },
+    textOnly: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+    },
+    iconRight: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value) => sizes.indexOf(value) !== -1
+    },
+    disabled: {
+      type: [Boolean, String]
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    classes() {
+      let sizeCss = 'psui-px-4 psui-py-2'
+      if (this.size === 'medium') sizeCss = 'psui-px-4 psui-py-1'
+      if (this.size === 'small') sizeCss = 'psui-px-2 psui-py-psui-px psui-text-sm'
+      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40' : 'psui-border-blue-60 psui-text-blue-60'}`
+      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
+      if (this.textOnly) return `${sizeCss} ${this.disabled ? 'psui-text-gray-40' : 'psui-text-blue-60'}`
+      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40`
+      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner`
+    }  
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return false
+      this.$emit('click');
+    }
+  }
+}
+</script>

package/src/components/controls/PsCheckbox.vue

@@ -0,0 +1,128 @@
+<template>
+  <label class="container">
+    {{ label }}
+    <input type="checkbox">
+    <span class="checkmark"></span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'PsCheckbox',
+  props: {
+    value: {
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    bg: {
+      type: String,
+      default: 'blue-20'
+    },
+    type: {
+      type: String,
+      default: 'checkbox'
+    },
+    checkboxClasses: {
+      type: String,
+      default: 'mb-2'
+    },
+    labelClasses: {
+      type: String,
+      default: 'text-gray04'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    tooltip: {
+      type: [Object, Boolean, String, Promise],
+      default: false
+    },
+    prevent: {
+      default: false
+    },
+    size: {
+      default: 16
+    }
+  },
+  computed: {
+    childValue: {
+      get () {
+        return this.value
+      },
+      set (newValue) {
+        if(this.prevent) return
+        this.$emit('input', newValue)
+        this.$emit('change', newValue)
+      }
+    },
+    getSize() {
+      return { width: this.size + 'px', height: this.size + 'px'}
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 18px;
+  width: 18px;
+  background-color: #fff;
+  border: solid 2px #A2ACB7;
+  border-radius: 2px;
+}
+
+.container input:checked ~ .checkmark {
+  background-color: #64B5CE;
+  border: none;
+}
+
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.container .checkmark:after {
+  left: 5px;
+  top: 1px;
+  width: 7px;
+  height: 13px;
+  border: solid white;
+  border-radius: 1px;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+</style>

package/src/components/controls/PsRadioButton.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="w-full">
+    <label class="form-control" :for="id">
+      {{ label }}
+      <input
+        type="radio"
+        name="radio"
+        :id="id"
+        @change="$emit('change')"
+        v-model="childValue"
+      />
+      <span class="radio-button"></span>
+    </label>  
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsRadioButton',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    value: {
+      required: true
+    }
+  },
+  data() {
+    return {
+      id: ''
+    }
+  },
+  computed: {
+    childValue: {
+      get () {
+        return this.value
+      },
+      set (newValue) {
+        this.$emit('input', newValue )
+      }
+    }
+  },
+  mounted() {
+    this.id = 'teste'
+  }
+}
+</script>
+
+<style scoped>
+.form-control {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.form-control input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.radio-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #FFF;
+  border: 2px solid #A2ACB7;
+  border-radius: 50%;
+}
+
+.form-control input:checked ~ .radio-button {
+  background-color: #FFF;
+  border: 2px solid #64B5CE;
+}
+
+.radio-button:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.form-control input:checked ~ .radio-button:after {
+  display: block;
+}
+
+.form-control .radio-button:after {
+ 	top: 3px;
+	left: 3px;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+  background-color: #64B5CE;
+}
+ 
+</style>

package/src/components/notifications/{Dialog.vue → PsDialog.vue}

@@ -1,15 +1,15 @@
 <template>
   <div :class="cssClass">
-    <div class="material-icons my-auto">info</div>
-    <div class="w-full">{{ message }}</div>
-    <div class="cursor-pointer font-bold my-auto pr-4">OK</div>
+    <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>
 </template>
 
 <script>
 export const typeOptions = ['informative', 'success', 'alert']
 export default {
-  name: 'Dialog',
+  name: 'PsDialog',
   props: {
     type: {
       type: String,
@@ -32,7 +32,7 @@ export default {
   },
   computed: {
     cssClass() {
-      return `flex space-x-4 font-small rounded-md py-2 px-4 align-middle flex bg-${this.colors[this.type].background} text-${this.colors[this.type].color}`
+      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}`
     }
   }
 }

package/src/components/notifications/{Toast.vue → PsToast.vue}

@@ -1,8 +1,8 @@
 <template>
   <div :class="cssClass">
-    <span class="material-icons mr-4">{{ icon }}</span>
-    <div class="w-full">{{ message }}</div>
-    <div class="flex space-x-4">
+    <span class="material-icons psui-mr-4">{{ icon }}</span>
+    <div class="psui-w-full">{{ message }}</div>
+    <div class="psui-flex psui-space-x-4">
       <slot></slot>
     </div>
   </div>
@@ -12,7 +12,7 @@
 export const typeOptions = ['info', 'success', 'warning', 'error']
 export const fillOptions = ['soft', 'intense']
 export default {
-  name: 'Toast',
+  name: 'PsToast',
   props: {
     type: {
       type: String,
@@ -46,7 +46,7 @@ export default {
       const textColor = this.fill === 'intense' ? 'white': colors[this.type]
       const background = this.fill === 'soft'? `${colors[this.type].split('-', 1)}-10` : colors[this.type]
 
-      return `font-bold shadow-md rounded-md p-3 h-12 flex bg-${background} text-${textColor}`
+      return `psui-font-bold psui-shadow-md psui-rounded-md psui-p-3 psui-h-12 psui-flex psui-bg-${background} psui-text-${textColor}`
     }
   }
 }

package/src/components/tabs/{Tabs.vue → PsTabHeader.vue}

@@ -7,9 +7,9 @@
       @click="selectTab(item)"
       :class="[
         classes, 
-        { 'bg-blue-60 text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'border-b-2 border-blue-60 text-blue-60 font-bold': getSelected === item[keyValue] && theme === 'underline' },
-        { 'text-blue-60 font-bold bg-white hover:text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
+        { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
+        { 'psui-border-b-2 psui-border-blue-60 psui-text-blue-60 psui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
+        { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
       ]"
     >
       {{ item[keyLabel] }}
@@ -20,25 +20,25 @@
 <script>
 export const themeOptions = ['standard', 'underline', 'folder']
 export default {
-  name: 'Tabs',
+  name: 'PsTabHeader',
   computed: {
     wrapperClasses() {
       if (this.theme === 'underline') {
-        return 'flex space-x-4 border-b border-gray-20'
+        return 'psui-flex psui-space-x-4 psui-border-b psui-border-gray-20'
       }
       if (this.theme === 'folder') {
-        return 'flex space-x-1'
+        return 'psui-flex psui-space-x-1'
       }
-      return 'inline-flex rounded-md flex gap-x-px'
+      return 'psui-inline-flex psui-rounded-md psui-flex psui-gap-x-px'
     },
     classes() {
       if (this.theme === 'underline') {
-        return 'text-gray-60 pb-3 hover:text-blue-60'
+        return 'psui-text-gray-60 psui-pb-3 hover:psui-text-blue-60'
       }
       if (this.theme === 'folder') {
-        return 'bg-gray-10 text-gray-50 py-2 px-4 rounded-t-lg hover:text-gray-60 active:text-blue-60'
+        return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'
       }
-      return 'bg-gray-10 px-4 py-2 text-gray-60 hover:text-blue-60 last:rounded-r-lg first:rounded-l-lg active:text-white active:bg-blue-60'
+      return 'psui-bg-gray-10 psui-px-4 psui-py-2 psui-text-gray-60 hover:psui-text-blue-60 last:psui-rounded-r-lg first:psui-rounded-l-lg active:psui-text-white active:psui-bg-blue-60'
     },
     getIsObject() {
       return typeof this.selected === 'object'

package/src/index.js

@@ -1,14 +1,26 @@
-import Toast from './components/notifications/Toast.vue';
-import Dialog from './components/notifications/Dialog.vue';
+import PsButton from './components/buttons/PsButton.vue';
+import PsCheckbox from './components/controls/PsCheckbox.vue';
+import PsDialog from './components/notifications/PsDialog.vue';
+import PsToast from './components/notifications/PsToast.vue';
+import PsTabHeader from './components/tabs/PsTabHeader.vue';
+import PsRadioButton from './components/controls/PsRadioButton.vue';
 
 export default {
   install(Vue) {
-    Vue.component('Toast', Toast);
-    Vue.component('Dialog', Dialog);
-  },
+    Vue.component(' PsButton',  PsButton);
+    Vue.component(' PsCheckbox',  PsCheckbox);
+    Vue.component(' PsDialog',  PsDialog);
+    Vue.component(' PsToast',  PsToast);
+    Vue.component(' PsTabHeader',  PsTabHeader);
+    Vue.component(' PsRadioButton',  PsRadioButton);
+  }
 };
 
 export {
-	Toast,
-  Dialog
+  PsButton,
+  PsCheckbox,
+  PsDialog,
+  PsToast,
+  PsTabHeader,
+  PsRadioButton
 }

package/src/stories/Button.stories.js

@@ -1,8 +1,8 @@
-import Button, { sizes } from '../components/buttons/Button.vue';
+import PsButton, { sizes } from '../components/buttons/PsButton.vue';
 const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Button',
-  component: Button,
+  component: PsButton,
   argTypes: {
     size: { control: { type: 'select', options: sizes } },
     disabled: { control: 'boolean' },
@@ -13,9 +13,9 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Button },
+  components: { PsButton },
   template: `
-  <Button v-bind="$props" />
+  <PsButton v-bind="$props" />
   `
 });
 

package/src/stories/Checkbox.stories.js

@@ -0,0 +1,23 @@
+import PsCheckbox, { sizes } 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),
+  components: { PsCheckbox },
+  template: `
+  <PsCheckbox v-bind="$props" />
+  `
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Label',
+  size: 16
+};

package/src/stories/Colors.stories.mdx

@@ -11,12 +11,12 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 
-<div class="grid grid-flow-col">
-  <div class="p-2 h-20 text-white bg-blue-80">Blue 80</div>
-  <div class="p-2 h-20 text-white bg-blue-70">Blue 70</div>
-  <div class="p-2 h-20 text-white bg-blue-60">Blue 60</div>
-  <div class="p-2 h-20 text-white bg-blue-50">Blue 50</div>
-  <div class="p-2 h-20 text-blue-70 bg-blue-20">Blue 20</div>
-  <div class="p-2 h-20 text-blue-70 bg-blue-10">Blue 10</div>
-  <div class="p-2 h-20 text-blue-70 bg-white ">White</div>
+<div class="psui-grid psui-grid-flow-col">
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-80">Blue 80</div>
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-70">Blue 70</div>
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-60">Blue 60</div>
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-50">Blue 50</div>
+  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
+  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
+  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-white ">White</div>
 </div>

package/src/stories/Dialog.stories.js

@@ -1,8 +1,8 @@
-import Dialog from '../components/notifications/Dialog.vue';
+import PsDialog from '../components/notifications/PsDialog.vue';
 
 export default {
   title: 'Components/Dialog',
-  component: Dialog,
+  component: PsDialog,
   argTypes: {
     type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
   },
@@ -10,8 +10,8 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Dialog },
-  template: '<Dialog v-bind="$props" />',
+  components: { PsDialog },
+  template: '<PsDialog v-bind="$props" />',
 });
 
 export const Informative = Template.bind({});

package/src/stories/ElevationSystem.stories.mdx

@@ -14,28 +14,28 @@ Elevation is evidenced by the use of shadows. It's another way to establish a vi
 
 ### 1.1. Shadow and light
 The shadows in our elements are projected by these two light sources: main light and ambient light.
-<div class="grid grid-cols-3 gap-4">
-  <div class="bg-gray-20 pt-8">
-    <div class="bg-white w-48 h-48 rounded-md shadow mx-auto"></div>
-    <p class="text-center">Shadow cast by main light</p>
+<div class="psui-grid psui-grid-cols-3 psui-gap-4">
+  <div class="psui-bg-gray-20 psui-pt-8">
+    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow mx-auto"></div>
+    <p class="psui-text-center">Shadow cast by main light</p>
   </div>
-  <div class="bg-gray-20 pt-8">
-    <div class="bg-white w-48 h-48 rounded-md shadow-sm mx-auto"></div>
-    <p class="text-center">Shadow cast by ambient light</p>
+  <div class="psui-bg-gray-20 psui-pt-8">
+    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow-sm mx-auto"></div>
+    <p class="psui-text-center">Shadow cast by ambient light</p>
   </div>
-  <div class="bg-gray-20 pt-8">
-    <div class="bg-white w-48 h-48 rounded-md shadow-md mx-auto"></div>
-    <p class="text-center">Combined shadow from main and ambient lights</p>
+  <div class="psui-bg-gray-20 psui-pt-8">
+    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow-md mx-auto"></div>
+    <p class="psui-text-center">Combined shadow from main and ambient lights</p>
   </div>
 </div>
 
 ## 2. Elevation system
 Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
-<div class="grid grid-cols-2 gap-6 p-6 bg-gray-20">
-  <div class="rounded-md p-8 h-20 shadow-inner">Elevation -5</div>
-  <div class="rounded-md p-8 h-20 bg-white shadow-sm">Elevation 5</div>
-  <div class="rounded-md p-8 h-20 bg-white shadow">Elevation 10</div>
-  <div class="rounded-md p-8 h-20 bg-white shadow-md">Elevation 20</div>
-  <div class="rounded-md p-8 h-20 bg-white shadow-lg">Elevation 30</div>
-  <div class="rounded-md p-8 h-20 bg-white shadow-xl">Elevation 40</div>
+<div class="psui-grid grid-cols-2 psui-gap-6 psui-p-6 psui-bg-gray-20">
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-shadow-inner">Elevation -5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-sm">Elevation 5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow">Elevation 10</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-md">Elevation 20</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-lg">Elevation 30</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-xl">Elevation 40</div>
 </div>

package/src/stories/RadioButton.stories.js

@@ -0,0 +1,21 @@
+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 },
+  template: `
+  <PsRadioButton v-bind="$props" />
+  `
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Label'
+};
+

package/src/stories/{Tabs.stories.js → TabHeader.stories.js}

@@ -1,29 +1,29 @@
-import Tabs from '../components/tabs/Tabs.vue';
+import PsTabHeader from '../components/tabs/PsTabHeader.vue';
 const items = ['Existing Buildings', 'New Constructions', 'Other tab']
 const item = items[0]
 
 export default {
-  title: 'Components/Tabs',
-  component: Tabs,
+  title: 'Components/Tab Header',
+  component: PsTabHeader,
   argTypes: {}
 };
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Tabs },
+  components: { PsTabHeader },
   data: () => {
     return {
     }
   },
   template: `
-  <div class="bg-gray-20 p-8">
-    <tabs :selected.sync=selected v-bind="$props"/>
-    <div v-if="$props['selected'] === 'Existing Buildings'" class="bg-white p-4" :class="{ 'mt-4' : $props['theme'] === 'standard'}">
+  <div class="psui-bg-gray-20 psui-p-8">
+    <PsTabHeader :selected.sync=selected v-bind="$props"/>
+    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
       <p v-for="i of 4">Tab Existing Buildings Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'New Constructions'" class="bg-white p-4" :class="{ 'mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
       <p v-for="i of 4">Tab New Constructions Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'Other tab'" class="bg-white p-4" :class="{ 'mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
       <p v-for="i of 4">Other tab Selected</p>
     </div>
   </div>