@policystudio/policy-studio-ui-vue 1.0.5 → 1.0.9

package/README.md

@@ -1,11 +1,29 @@
 # UI library of Vue components with StoryBook
 
-### Run documentation
-```$ npm run storybook```
+### Instalation
+```sh
+npm i -S @policystudio/policy-studio-ui-vue
+```
 
-### Instalation for use
-```$ npm i -S @policystudio/policy-studio-ui-vue```
+### Import the library
+```javascript
+// src/initComponents.js
 
+import PolicyStudioUiVue from '@policystudio/policy-studio-ui-vue'
+// ...
+Vue.use(PolicyStudioUiVue) 
+```
 ### Import CSS
 Add in your css file
-```@import '~@policystudio/policy-studio-ui-vue/src/assets/scss/tailwind.css'```
+
+```css
+/* src/assets/css/index.css */
+
+@import '~@policystudio/policy-studio-ui-vue/src/assets/scss/tailwind.css'
+```
+
+### Run documentation
+```npm run storybook```
+
+### Website
+[ui.policystudio.co](https://ui.policystudio.co/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -3,27 +3,3 @@
 @tailwind utilities;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
-.text-h1 {
-  font-size: 28;
-  line-height: 120%;    
-}
-.text-h2 {
-  font-size: 24px;
-  line-height: 120%;    
-}
-.text-h3 {
-  font-size: 22px;
-  line-height: 120%;    
-}
-.text-h4 {
-  font-size: 20px;
-  line-height: 120%;    
-}
-.text-h5 {
-  font-size: 18px;
-  line-height: 120%;    
-}
-.text-h6 {
-  font-size: 17px;
-  line-height: 120%;    
-}

package/src/assets/scss/tailwind.css

@@ -6571,44 +6571,59 @@ video {
   height: 100vh;
 }
 
-.psui-text-xs {
-  font-size: 0.75rem;
+.psui-text-small {
+  font-size: 14px;
+  line-height: 130%;
 }
 
-.psui-text-sm {
-  font-size: 0.875rem;
+.psui-text-xSmall {
+  font-size: 12px;
+  line-height: 130%;
 }
 
-.psui-text-base {
-  font-size: 1rem;
+.psui-text-accent {
+  font-size: 14px;
+  line-height: 130%;
 }
 
-.psui-text-lg {
-  font-size: 1.125rem;
+.psui-text-accentSmall {
+  font-size: 12px;
+  line-height: 130%;
 }
 
-.psui-text-xl {
-  font-size: 1.25rem;
+.psui-text-p {
+  font-size: 16px;
+  line-height: 120%;
 }
 
-.psui-text-2xl {
-  font-size: 1.5rem;
+.psui-text-h1 {
+  font-size: 28px;
+  line-height: 120%;
 }
 
-.psui-text-3xl {
-  font-size: 1.875rem;
+.psui-text-h2 {
+  font-size: 24px;
+  line-height: 120%;
 }
 
-.psui-text-4xl {
-  font-size: 2.25rem;
+.psui-text-h3 {
+  font-size: 22px;
+  line-height: 120%;
 }
 
-.psui-text-5xl {
-  font-size: 3rem;
+.psui-text-h4 {
+  font-size: 20px;
+  line-height: 120%;
 }
 
-.psui-text-6xl {
-  font-size: 4rem;
+.psui-text-h5 {
+  font-size: 18px;
+  line-height: 120%;
+}
+
+.psui-text-h6 {
+  font-size: 17px;
+  line-height: 120%;
 }
 
 .psui-leading-3 {
@@ -14733,36 +14748,6 @@ video {
 
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
-.text-h1 {
-  font-size: 28;
-  line-height: 120%;
-}
-
-.text-h2 {
-  font-size: 24px;
-  line-height: 120%;
-}
-
-.text-h3 {
-  font-size: 22px;
-  line-height: 120%;
-}
-
-.text-h4 {
-  font-size: 20px;
-  line-height: 120%;
-}
-
-.text-h5 {
-  font-size: 18px;
-  line-height: 120%;
-}
-
-.text-h6 {
-  font-size: 17px;
-  line-height: 120%;
-}
-
 @media (min-width: 640px) {
   .sm\:psui-container {
     width: 100%;
@@ -19669,44 +19654,59 @@ video {
     height: 100vh;
   }
 
-  .sm\:psui-text-xs {
-    font-size: 0.75rem;
+  .sm\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
+  }
+
+  .sm\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-sm {
-    font-size: 0.875rem;
+  .sm\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-base {
-    font-size: 1rem;
+  .sm\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-lg {
-    font-size: 1.125rem;
+  .sm\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-xl {
-    font-size: 1.25rem;
+  .sm\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-2xl {
-    font-size: 1.5rem;
+  .sm\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-3xl {
-    font-size: 1.875rem;
+  .sm\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-4xl {
-    font-size: 2.25rem;
+  .sm\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-5xl {
-    font-size: 3rem;
+  .sm\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-6xl {
-    font-size: 4rem;
+  .sm\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .sm\:psui-leading-3 {
@@ -32614,44 +32614,59 @@ video {
     height: 100vh;
   }
 
-  .md\:psui-text-xs {
-    font-size: 0.75rem;
+  .md\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
+  }
+
+  .md\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-sm {
-    font-size: 0.875rem;
+  .md\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-base {
-    font-size: 1rem;
+  .md\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-lg {
-    font-size: 1.125rem;
+  .md\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-xl {
-    font-size: 1.25rem;
+  .md\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-2xl {
-    font-size: 1.5rem;
+  .md\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-3xl {
-    font-size: 1.875rem;
+  .md\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-4xl {
-    font-size: 2.25rem;
+  .md\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-5xl {
-    font-size: 3rem;
+  .md\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-6xl {
-    font-size: 4rem;
+  .md\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .md\:psui-leading-3 {
@@ -45559,44 +45574,59 @@ video {
     height: 100vh;
   }
 
-  .lg\:psui-text-xs {
-    font-size: 0.75rem;
+  .lg\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-sm {
-    font-size: 0.875rem;
+  .lg\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-base {
-    font-size: 1rem;
+  .lg\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-lg {
-    font-size: 1.125rem;
+  .lg\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-xl {
-    font-size: 1.25rem;
+  .lg\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-2xl {
-    font-size: 1.5rem;
+  .lg\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-3xl {
-    font-size: 1.875rem;
+  .lg\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-4xl {
-    font-size: 2.25rem;
+  .lg\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-5xl {
-    font-size: 3rem;
+  .lg\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-6xl {
-    font-size: 4rem;
+  .lg\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
+  }
+
+  .lg\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .lg\:psui-leading-3 {
@@ -58504,44 +58534,59 @@ video {
     height: 100vh;
   }
 
-  .xl\:psui-text-xs {
-    font-size: 0.75rem;
+  .xl\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-sm {
-    font-size: 0.875rem;
+  .xl\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-base {
-    font-size: 1rem;
+  .xl\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-lg {
-    font-size: 1.125rem;
+  .xl\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-xl {
-    font-size: 1.25rem;
+  .xl\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-2xl {
-    font-size: 1.5rem;
+  .xl\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-3xl {
-    font-size: 1.875rem;
+  .xl\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-4xl {
-    font-size: 2.25rem;
+  .xl\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-5xl {
-    font-size: 3rem;
+  .xl\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-6xl {
-    font-size: 4rem;
+  .xl\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
+  }
+
+  .xl\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .xl\:psui-leading-3 {
@@ -66542,3 +66587,4 @@ video {
             animation: bounce 1s infinite;
   }
 }
+

package/src/components/controls/PsCheckbox.vue

@@ -1,7 +1,11 @@
 <template>
   <label class="container">
     {{ label }}
-    <input type="checkbox">
+    <input
+      type="checkbox"
+      v-model="childValue"
+      :disabled="disabled"
+    />
     <span class="checkmark"></span>
   </label>
 </template>
@@ -54,6 +58,7 @@ export default {
         return this.value
       },
       set (newValue) {
+        console.log(newValue)
         if(this.prevent) return
         this.$emit('input', newValue)
         this.$emit('change', newValue)

package/src/components/controls/PsDraggable.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

package/src/components/controls/PsSlider.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <div v-if="label" class="psui-mb-2">
+      <div class="psui-float-right">{{ value }}</div>
+      <div>{{ label }}</div> 
+    </div>
+    <div class="" :class="{'psui-flex psui-items-center': !label && !bubble }">
+      <div
+        v-if="bubble"
+        class="psui-relative psui-bg-gray-40 psui-text-gray-20 psui-rounded-md psui-text-white psui-font-bold psui-w-10 psui-text-center range-value"
+        :style="{ left: `${positionBubble}px` }"
+      >
+        {{ value }}
+      </div>
+      <input
+        type="range"
+        :min="min"
+        :max="max"
+        :value="value" 
+        @input="$emit('update:value', Number($event.target.value))"
+        class="slider psui-float-left"
+        ref="slider"
+      />
+      <span v-if="!label && !bubble" class="psui-bg-gray-20 psui-font-bold psui-text-gray-50 psui-px-2 psui-py-px psui-rounded-sm psui-float-left psui-ml-2">{{ value }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsSlider',
+  computed: {
+    positionBubble() {
+      if (this.bubble && this.isMounted) {
+        return (this.$refs.slider.offsetWidth / this.max) * this.value - 15
+      }
+    }
+  },
+  methods: {
+    getValueToScale(value) {
+      return 100 * value / this.rangeDistanceMax
+    }
+  },
+  props: {
+    min: {
+      type: Number,
+      default: 0,
+    },    
+    max: {
+      type: Number,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+    value: {
+      type: [Number, String],
+    },
+    baseValue: {
+      type: [Number, Boolean]
+    },
+    labelPosition: {
+      type: String
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    bubble: {
+      type: Boolean
+    }
+  },
+  data: () => {
+    return {
+      isMounted: false
+    }
+  },
+  mounted() {
+    this.isMounted = true
+  }
+}
+</script>
+
+<style>
+.slider {
+  width: 100%;
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 5px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  border: none;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #64B5CE;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  border: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #64B5CE;
+  cursor: pointer;
+}
+.slider::-webkit-slider-progress, .slider::-moz-range-progress {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: #64B5CE;
+  height: 6px;
+}
+
+.range-value{
+  margin-bottom: 10px;
+  padding: 2px 4px;
+
+}
+</style>

package/src/components/controls/PsSwitch.vue

@@ -0,0 +1,92 @@
+<template>
+	<label for="ps-switch" class="psui-flex psui-items-center psui-cursor-pointer psui-relative">
+		<input type="checkbox" id="ps-switch" class="psui-hidden" :checked="active">
+		<div 
+			:class="classes"
+			@click="change()"
+		></div>
+		<span class="psui-ml-3 psui-text-gray-50 psui-text-sm psui-font-medium">{{ label }}</span>
+	</label>
+</template>
+
+<script>
+export const sizes = ['big', 'small']
+export default {
+  computed: {
+    text() {
+      if (this.label && this.labelActived) {
+        return this.active ? this.labelActived : this.label
+      } else if (this.label) {
+        return this.label
+      } else {
+        return false
+      }
+    },
+		classes() {
+			if (this.size === 'small') {
+				return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-4 ps-switch-small psui-rounded-full'
+			}
+			return 'toggle-bg psui-bg-gray-40 psui-border-gray-40 psui-border-2 psui-h-6 ps-switch psui-rounded-full'
+		}
+  },
+  props: {
+    label: String,
+    active: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+		size: {
+			type: String,
+			default: 'big',
+      validator: (value) => sizes.indexOf(value) !== -1
+		}
+  },
+  methods: {
+    change() {
+      if (!this.disabled) {
+        this.$emit('update:active', !this.active)
+        this.$emit('change', !this.active)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ps-switch {
+	width: 46px;
+}
+.ps-switch-small {
+	width: 30px;
+}
+.toggle-bg:after {
+	content: '';
+	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-5 psui-w-5 psui-transition;
+}
+.toggle-bg:after + .ps-switch-small {
+	content: '';
+	@apply psui-absolute psui-bg-white psui-border-gray-40 psui-rounded-full psui-h-2 psui-w-2 psui-transition;
+}
+
+input:checked + .toggle-bg:after + .ps-switch-small {
+	transform: translateX(100%);
+	position: absolute;
+	left: 2px;
+	@apply border-white;
+}
+
+input:checked + .toggle-bg:after {
+	transform: translateX(100%);
+	position: absolute;
+	left: 4px;
+	@apply border-white;
+}
+
+input:checked + .toggle-bg {
+	@apply psui-bg-green-20 psui-border-green-20;
+}
+</style>

package/src/stories/Checkbox.stories.js

@@ -11,8 +11,28 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox },
+  data: () => {
+    return {
+      items: [
+        { label: 'Label 1', id: 1 },
+        { label: 'Label 2', id: 2 },
+        { label: 'Label 3', id: 3 }
+      ],
+      selected: []
+    }
+  },
   template: `
-  <PsCheckbox v-bind="$props" />
+  <div>
+    <PsCheckbox
+      v-bind="$props"
+      v-for="(item, index) in items"
+      :key="index"
+      :label="item.label"
+      :value.sync="item.id"
+      v-model="selected"
+    />
+    {{ selected }}
+  </div>
   `
 });
 
@@ -21,3 +41,4 @@ Default.args = {
   label: 'Label',
   size: 16
 };
+ 

package/src/stories/Slider.stories.js

@@ -0,0 +1,40 @@
+import PsSlider from '../components/controls/PsSlider.vue';
+export default {
+  title: 'Components/Slider',
+  component: PsSlider,
+  argTypes: {
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsSlider },
+  template: `
+  <div style="width: 500px;">
+    <PsSlider v-bind="$props" :value.sync="value" />
+  </div>
+  `
+});
+
+export const Label = Template.bind({});
+Label.args = {
+  min: 1,
+  max: 100,
+  value: 30,
+  label: 'Score Label'
+};
+
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+  min: 1,
+  max: 100,
+  value: 15
+};
+
+export const Bubble = Template.bind({});
+Bubble.args = {
+  min: 1,
+  max: 100,
+  value: 23,
+  bubble: true
+};

package/src/stories/Swith.stories.js

@@ -0,0 +1,38 @@
+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" :active.sync="model" />
+  </div>
+  `
+});
+
+export const Big = Template.bind({});
+Big.args = {
+  size: 'big',
+  active: false,
+  label: 'Switch Big',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  active: false,
+  label: 'Switch Small',
+};
+

package/tailwind.config.js

@@ -38,7 +38,26 @@ module.exports = {
     fontFamily: {
       'sans': ['Lato'],
     },
+    fontSize: {
+      small: ['14px', '130%'],
+      xSmall: ['12px', '130%'],
+      accent: ['14px', '130%', { letterSpacing: '0.6px' }],
+      accentSmall: ['12px', '130%', { letterSpacing: '0.6px' }],
+      p: ['16px', '120%'],
+      h1: ['28px', '120%'],
+      h2: ['24px', '120%'],
+      h3: ['22px', '120%'],
+      h4: ['20px', '120%'],
+      h5: ['18px', '120%'],
+      h6: ['17px', '120%'],
+    },    
     boxShadow: {
+      // elevationInner: '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      // elevation5: '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      // elevation10: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      // elevation20: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
+      // elevation30: '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
+      // elevation40: '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)',
       md: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',