@policystudio/policy-studio-ui-vue 1.0.11 → 1.0.15

package/src/components/buttons/PsButton.vue

@@ -6,15 +6,14 @@
   >
     <i
       v-if="icon"
-      class="psui-my-auto material-icons psui-mr-2"
-      :class="{ 'psui-text-sm': size === 'small' }"
+      :class="['psui-mr-2', iconClasses]"
     >
     {{ 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' }"
+      v-if="iconRight"
+      :class="['psui-ml-2', iconClasses]"
     >
     {{ iconRight }}
     </i>
@@ -54,20 +53,45 @@ export default {
     },
     disabled: {
       type: [Boolean, String]
-    }
-  },
-  data () {
-    return {
+    },
+    'text-color': {
+      type: String,
+      default: ''
+    },
+    'icon-color': {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
     }
   },
   computed: {
+    iconClasses() {
+      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
+      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
+      return `psui-my-auto material-icons ${size} ${color}`
+    },
     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.textOnly) {
+        const hasTextColor = this.textColor.length > 0
+        const color = hasTextColor ? this.textColor.split('hover:')[0] : ''
+        const hover = hasTextColor ? this.textColor.split('hover:')[1] : ''
+
+        let textCss = 'psui-text-blue-50 hover:psui-text-blue-60'
+        if (this.disabled) textCss = 'psui-text-gray-40'
+        
+        if (hasTextColor) textCss = `psui-text-${color}`
+        if (hover) textCss += `hover:psui-text-${hover}`
+
+        return `${sizeCss} ${textCss}`
+      }
       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`
     }  

package/src/components/controls/PsCheckbox.vue

@@ -1,12 +1,13 @@
 <template>
-  <label class="container">
+  <label class="container psui-pl-6" :class="[{ 'psui-text-gray-40': disabled }, { 'psui-text-gray-50': !disabled }, labelClasses]">
     {{ label }}
     <input
       type="checkbox"
-      v-model="childValue"
+      v-model="model"
       :disabled="disabled"
+      :value="inputValue"
     />
-    <span class="checkmark"></span>
+    <span class="checkmark psui-border-2" :class="classes" :style="getSize"></span>
   </label>
 </template>
 
@@ -15,68 +16,56 @@ export default {
   name: 'PsCheckbox',
   props: {
     value: {
-      required: true
+      required: true,
     },
+    inputValue: String,    
     label: {
       type: String,
       default: ''
     },
-    bg: {
-      type: String,
-      default: 'blue-20'
-    },
-    type: {
-      type: String,
-      default: 'checkbox'
-    },
     checkboxClasses: {
       type: String,
-      default: 'mb-2'
+      default: 'psui-pl-8'
     },
     labelClasses: {
       type: String,
-      default: 'text-gray04'
+      default: ''
     },
     disabled: {
       type: Boolean,
       default: false
     },
-    tooltip: {
-      type: [Object, Boolean, String, Promise],
-      default: false
-    },
-    prevent: {
-      default: false
-    },
     size: {
-      default: 16
+      default: 18
     }
   },
   computed: {
-    childValue: {
-      get () {
-        return this.value
+    model: {
+      get() {
+        return this.value;
       },
-      set (newValue) {
-        console.log(newValue)
-        if(this.prevent) return
+      set(newValue) {
         this.$emit('input', newValue)
         this.$emit('change', newValue)
-      }
+      },
+    },
+    classes() {
+      return `${this.disabled ? 'psui-border-gray-40': 'psui-border-gray-50'} ${checkboxClasses}`
     },
     getSize() {
-      return { width: this.size + 'px', height: this.size + 'px'}
+      return {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      }
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
 .container {
   display: block;
   position: relative;
-  padding-left: 35px;
-  margin-bottom: 12px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -99,7 +88,6 @@ export default {
   height: 18px;
   width: 18px;
   background-color: #fff;
-  border: solid 2px #A2ACB7;
   border-radius: 2px;
 }
 
@@ -119,10 +107,10 @@ export default {
 }
 
 .container .checkmark:after {
-  left: 5px;
-  top: 1px;
-  width: 7px;
-  height: 13px;
+  left: 35%;
+  top: 8%;
+  width: 35%;
+  height: 65%;
   border: solid white;
   border-radius: 1px;
   border-width: 0 2px 2px 0;

package/src/components/controls/PsSwitch.vue

@@ -12,6 +12,7 @@
 <script>
 export const sizes = ['big', 'small']
 export default {
+  name: 'PsSwitch',
   computed: {
     text() {
       if (this.label && this.labelActived) {
@@ -57,6 +58,10 @@ export default {
 </script>
 
 <style scoped>
+/* 
+	@TODO - Fix the apply error
+	https://www.dropbox.com/s/83vwthcdvdt5t97/Screen%20Shot%202022-01-06%20at%2011.49.00%20AM.png?dl=0
+	
 .ps-switch {
 	width: 46px;
 }
@@ -88,5 +93,5 @@ input:checked + .toggle-bg:after {
 
 input:checked + .toggle-bg {
 	@apply psui-bg-green-20 psui-border-green-20;
-}
+} */
 </style>

package/src/components/controls/PsToggle.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="psui-rounded-sm psui-inline-flex psui-bg-gray-10 wrapper psui-gap-x-px" role="group">
+      <button 
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectOption(item)"
+        type="button"
+        class="psui-inline-flex psui-rounded-sm psui-text-small psui-text-blue-60 psui-px-2"
+        :class="{'psui-bg-blue-60 psui-text-white psui-font-bold': selected === item}"
+      >
+        {{ item }}
+      </button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'PsSlider',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    selected: {},
+  },
+  methods: {
+    selectOption(item) {
+      this.$emit('update:selected', item)
+      this.$emit('change', item)
+    }
+  }
+}
+</script>
+
+<style>
+.wrapper {
+  padding: 2px;
+}
+</style>

package/src/components/forms/PsInput.vue

@@ -0,0 +1,98 @@
+<template>
+	<div>
+		<div v-if="label" class="psui-font-bold psui-text-gray-80">{{ label }}</div>
+    <div class="psui-relative">
+      <div class="psui-absolute psui-inset-y-0 psui-left-0 psui-pl-2 psui-flex psui-items-center psui-pointer-events-none" v-if="this.$slots.prepend">
+        <slot name="prepend"></slot>
+      </div>
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :aria-required="required"
+        :aria-invalid="validation.hasError"
+        :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
+        :required="required"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
+        @input="$emit('input', $event.target.value)"
+        @keydown.enter="$emit('keydown', $event.target.value)"
+        @change="$emit('change')"
+        v-bind="getAttrs"
+      />
+      <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
+        <slot name="append"></slot>
+      </div>
+    </div>
+		<div v-if="hint && !validation.hasError" class="psui-text-gray-50 psui-text-xsmall">{{ hint }}</div>
+		<div v-if="validation.hasError && validation.label" class="psui-text-red psui-text-xsmall">{{ validation.label }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PsInput',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+		required: {
+			type: Boolean
+		},
+		placeholder: {
+			type: String
+		},
+		label: {
+			type: String
+		},
+		hint: {
+			type: String
+		},
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    validation: {
+      type: Object,
+      default: () => {
+        return { hasError: false, checked: false, filled: false, required: false }
+      }
+    },
+    value: {
+      required: true,
+    },    
+	},
+  computed: {
+    getInputClasses() {
+      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-bg-white psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50`
+    },
+    getText() {
+      return this.mini ? 'psui-text-small' : ''
+    },
+    getPadding() {
+      return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
+    },
+    getAttrs() {
+      const defaultAttrs = {
+        autocapitalize: 'sentences',
+        autocomplete: 'chrome-off',
+        autocorrect: 'off',
+        spellcheck: 'spellcheck'
+      }
+      return { ...defaultAttrs, ...this.$attrs }
+    }
+  },
+}
+</script>
+
+<style>
+.mini-p {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+</style>

package/src/index.js

@@ -1,9 +1,13 @@
 import PsButton from './components/buttons/PsButton.vue';
 import PsCheckbox from './components/controls/PsCheckbox.vue';
+import PsRadioButton from './components/controls/PsRadioButton.vue';
+import PsSlider from './components/controls/PsSlider.vue';
+import PsSwitch from './components/controls/PsSwitch.vue';
+import PsToggle from './components/controls/PsToggle.vue';
+import PsInput from './components/forms/PsInput.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) {
@@ -13,6 +17,10 @@ export default {
     Vue.component('PsToast',  PsToast);
     Vue.component('PsTabHeader',  PsTabHeader);
     Vue.component('PsRadioButton',  PsRadioButton);
+    Vue.component('PsSlider', PsSlider);
+    Vue.component('PsSwitch', PsSwitch);
+    Vue.component('PsInput', PsInput);
+    Vue.component('PsToggle', PsToggle);
   }
 };
 
@@ -22,5 +30,9 @@ export {
   PsDialog,
   PsToast,
   PsTabHeader,
-  PsRadioButton
+  PsRadioButton,
+  PsSlider,
+  PsSwitch,
+  PsInput,
+  PsToggle
 }

package/src/stories/Button.stories.js

@@ -47,8 +47,8 @@ Ghost.args = {
 export const TextOnly = Template.bind({});
 TextOnly.args = {
   label: 'TextOnly button',
-  disabled: true,
+  disabled: false,
   icon: 'add_circle',
   size: 'big',
-  textOnly: true
+  textOnly: true,
 };

package/src/stories/Checkbox.stories.js

@@ -23,22 +23,19 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
   <div>
-    <PsCheckbox
-      v-bind="$props"
-      v-for="(item, index) in items"
-      :key="index"
-      :label="item.label"
-      :value.sync="item.id"
-      v-model="selected"
-    />
-    {{ selected }}
+    <PsCheckbox v-bind="$props" label="Label 1" inputValue="1" v-model="selected" />
+    <PsCheckbox v-bind="$props" label="Label 2" inputValue="2" v-model="selected" />
+    <PsCheckbox v-bind="$props" label="Label 3" inputValue="3" v-model="selected" />
+    <p>Checked: {{ selected }}</p>
   </div>
   `
 });
 
 export const Default = Template.bind({});
 Default.args = {
+  size: 18,
+  disabled: false,
   label: 'Label',
-  size: 16
+  labelClasses: '',
 };
  

package/src/stories/Colors.stories.mdx

@@ -10,13 +10,59 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 Out colors are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. The support colors are used as a visual support to communicate and provide better and more meaningful feedback.
 
 ## Blue
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80">Blue 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70">Blue 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60">Blue 60</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50">Blue 50</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white ">White</div>
+</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>
+## Gray
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80">Gray 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70">Gray 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60">Gray 60</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50">Gray 50</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40">Gray 40</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30">Gray 30</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20">Gray 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10">Gray 10</div>
+</div>
+
+## Yellow
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80">Yellow 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70">Yellow 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20">Yellow 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10">Yellow 10</div>
+</div>
+
+## Green
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80">Green 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70">Green 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20">Green 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10">Green 10</div>
+</div>
+
+## Red
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80">Red 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70">Red 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20">Red 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10">Red 10</div>
+</div>
+
+## Chart colors
+<div class="psui-flex">
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky">Sky</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal">Teal</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald">Emerald</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard">Mustard</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange">Orange</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink">Pink</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple">Purple</div>
+</div>

package/src/stories/ElevationSystem.stories.mdx

@@ -31,11 +31,11 @@ The shadows in our elements are projected by these two light sources: main light
 
 ## 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="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 class="psui-grid psui-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-elevation--5">Elevation -5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-5">Elevation 5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-10">Elevation 10</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-20">Elevation 20</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-30">Elevation 30</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-40">Elevation 40</div>
 </div>

package/src/stories/Input.stories.js

@@ -0,0 +1,85 @@
+import PsInput from '../components/forms/PsInput.vue';
+export default {
+  title: 'Components/Input',
+  component: PsInput,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+};
+
+const TemplateDefault = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsInput },
+  data: () => {
+    return {
+      validator: {
+        hasError: true,
+        label: 'Error message!'
+      }
+    }
+  },
+  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>
+  `
+});
+
+const TemplateSlots = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsInput },
+  template: `
+    <div class="psui-p-8 psui-bg-gray-10">
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:append>
+          ft²
+        </template>
+      </PsInput>   
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:prepend>
+          ft²
+        </template>
+      </PsInput>   
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:prepend>
+          ft²
+        </template>
+        <template v-slot:append>
+          ft²
+        </template>
+      </PsInput>
+    </div>
+  `
+});
+
+export const InputText = TemplateDefault.bind({});
+InputText.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  hint: 'Optional Assistive text',
+  disabled: false,
+  required: false,
+  mini: false,
+};
+
+export const InputPassword = TemplateDefault.bind({});
+InputPassword.args = {
+  type: 'password',
+  label: 'Password',
+  hint: 'Optional Assistive text',
+  disabled: false,
+  required: false,
+  mini: false,
+};
+
+export const InputSlots = TemplateSlots.bind({});
+InputSlots.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  hint: 'Optional Assistive text',
+  disabled: false,
+  required: false,
+  mini: false,
+};

package/src/stories/Toggle.stories.js

@@ -0,0 +1,22 @@
+import PsToggle from '../components/controls/PsToggle.vue';
+export default {
+  title: 'Components/Toggle',
+  component: PsToggle,
+  argTypes: {},
+};
+const items = ['Option 1', 'Option 2', 'Option 3']
+const selected = 'Option 2'
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsToggle },
+  template: `
+  <PsToggle v-bind="$props" :selected.sync="selected" />
+  `
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: items,
+  selected: selected
+};