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

package/dist/css/psui_styles.css

@@ -7135,6 +7135,11 @@ video {
   height: 100vh;
 }
 
+.psui-text-big {
+  font-size: 16px;
+  line-height: 130%;
+}
+
 .psui-text-small {
   font-size: 14px;
   line-height: 130%;
@@ -12622,6 +12627,7 @@ video {
 .psui-select-all {
   -webkit-user-select: all;
      -moz-user-select: all;
+      -ms-user-select: all;
           user-select: all;
 }
 
@@ -15937,55 +15943,6 @@ html {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.toggle-bg:after {
-  content: '';
-  position: absolute;
-  background-color: #ffffff;
-  --border-opacity: 1;
-  border-color: #A2ACB7;
-  border-color: rgba(162, 172, 183, var(--border-opacity));
-  border-radius: 9999px;
-  height: 1.25rem;
-  width: 1.25rem;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-}
-
-.toggle-bg:after + .ps-switch-small {
-  content: '';
-  position: absolute;
-  background-color: #ffffff;
-  --border-opacity: 1;
-  border-color: #A2ACB7;
-  border-color: rgba(162, 172, 183, var(--border-opacity));
-  border-radius: 9999px;
-  height: 0.5rem;
-  width: 0.5rem;
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-}
-
-input:checked + .toggle-bg:after + .ps-switch-small {
-  transform: translateX(100%);
-  position: absolute;
-  left: 2px;
-  border-color: #ffffff;
-}
-
-input:checked + .toggle-bg:after {
-  transform: translateX(100%);
-  position: absolute;
-  left: 4px;
-  border-color: #ffffff;
-}
-
-input:checked + .toggle-bg {
-  --bg-opacity: 1;
-  background-color: #5DB883;
-  background-color: rgba(93, 184, 131, var(--bg-opacity));
-  --border-opacity: 1;
-  border-color: #5DB883;
-  border-color: rgba(93, 184, 131, var(--border-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:psui-container {
     width: 100%;
@@ -21028,6 +20985,11 @@ input:checked + .toggle-bg {
     height: 100vh;
   }
 
+  .sm\:psui-text-big {
+    font-size: 16px;
+    line-height: 130%;
+  }
+
   .sm\:psui-text-small {
     font-size: 14px;
     line-height: 130%;
@@ -26411,6 +26373,7 @@ input:checked + .toggle-bg {
   .sm\:psui-select-all {
     -webkit-user-select: all;
        -moz-user-select: all;
+        -ms-user-select: all;
             user-select: all;
   }
 
@@ -34692,6 +34655,11 @@ input:checked + .toggle-bg {
     height: 100vh;
   }
 
+  .md\:psui-text-big {
+    font-size: 16px;
+    line-height: 130%;
+  }
+
   .md\:psui-text-small {
     font-size: 14px;
     line-height: 130%;
@@ -40075,6 +40043,7 @@ input:checked + .toggle-bg {
   .md\:psui-select-all {
     -webkit-user-select: all;
        -moz-user-select: all;
+        -ms-user-select: all;
             user-select: all;
   }
 
@@ -48356,6 +48325,11 @@ input:checked + .toggle-bg {
     height: 100vh;
   }
 
+  .lg\:psui-text-big {
+    font-size: 16px;
+    line-height: 130%;
+  }
+
   .lg\:psui-text-small {
     font-size: 14px;
     line-height: 130%;
@@ -53739,6 +53713,7 @@ input:checked + .toggle-bg {
   .lg\:psui-select-all {
     -webkit-user-select: all;
        -moz-user-select: all;
+        -ms-user-select: all;
             user-select: all;
   }
 
@@ -62020,6 +61995,11 @@ input:checked + .toggle-bg {
     height: 100vh;
   }
 
+  .xl\:psui-text-big {
+    font-size: 16px;
+    line-height: 130%;
+  }
+
   .xl\:psui-text-small {
     font-size: 14px;
     line-height: 130%;
@@ -67403,6 +67383,7 @@ input:checked + .toggle-bg {
   .xl\:psui-select-all {
     -webkit-user-select: all;
        -moz-user-select: all;
+        -ms-user-select: all;
             user-select: all;
   }
 
@@ -70640,4 +70621,4 @@ input:checked + .toggle-bg {
     -webkit-animation: bounce 1s infinite;
             animation: bounce 1s infinite;
   }
-} 
+}

package/package.json

@@ -1,40 +1,46 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
   "url": "https://bitbucket.org/policy-studio/policy-studio-ui-vue",
-  "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build-tailwind": "postcss src/assets/scss/base.scss -o src/assets/scss/tailwind.css && postcss src/assets/scss/base.scss -o dist/css/psui_styles.css",
-    "publish": "npm run build-tailwind && npm publish"
-  },
+  "license": "MIT",
   "keywords": [
     "vue",
     "ui"
   ],
-  "license": "MIT",
+  "scripts": {
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-tailwind": "postcss src/assets/scss/base.scss -o dist/css/psui_styles.css",
+    "publish": "npm run lint && npm run build-tailwind && npm publish"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.5",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/addon-essentials": "^6.4.12",
-    "@storybook/addon-links": "^6.4.12",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue": "^6.4.12",
-    "autoprefixer": "^10.4.0",
+    "@babel/core": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.13",
+    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/addon-links": "^6.4.13",
+    "@storybook/vue": "^6.4.13",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.3",
-    "eslint": "^8.6.0",
-    "eslint-plugin-storybook": "^0.5.5",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
+    "prettier": "^2.2.1",
     "tailwindcss": "^1.9.6",
-    "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
-    "vue-router": "^3.5.3",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.11"
   }
 }

package/src/assets/scss/base.scss

@@ -9,31 +9,4 @@
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-	
-.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;
-} 
+}

package/src/components/accordion/PsAccordion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes" class='psui-flex psui-flex-col' >
+  <div :class="classes" class='accordion' >
       <slot></slot>
   </div>
 </template>
@@ -33,4 +33,12 @@ export default {
  .big {
    width: 580px;
  }
+
+ .accordion {
+   display: flex;
+   flex-direction: column;
+   border-right:1px solid #e6ecf2;
+   border-left:1px solid #e6ecf2;
+   border-top:1px solid #e6ecf2;
+ }
 </style>

package/src/components/accordion/PsAccordionItem.vue

@@ -75,7 +75,7 @@ export default {
 
 <style scoped>
 .container {
-  border: 1px solid #e6ecf2;
+  border-bottom: 1px solid #e6ecf2;
   padding: 16px;
 }
 

package/src/components/buttons/PsButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="psui-font-bold psui-align-middle psui-flex psui-rounded-md"
+    class="psui-font-bold psui-items-center psui-flex psui-rounded-md"
     :class="classes" 
     @click="onClick()"
   >
@@ -10,11 +10,11 @@
     >
     {{ icon }}
     </i>
-    <div 
+    <span 
       v-if="label" 
       class="psui-flex-grow psui-text-left"
       >{{ label }}
-    </div>
+    </span>
     <i
       v-if="iconRight"
       :class="['psui-ml-2', iconClasses]"
@@ -72,31 +72,34 @@ export default {
   },
   computed: {
     iconClasses() {
-      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
+      const size = this.size === 'small' ? 'psui-text-small' : this.size === 'medium' ? 'psui-text-small' : 'psui-text-big'
       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'}`
+      let sizeCss = ''
+
+      if (this.size === 'medium') sizeCss = 'medium'      
+      if (this.size === 'small') sizeCss = 'small'
+      if (this.size === 'big') sizeCss = 'big'
+      
+      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40 psui-cursor-default' : 'psui-border-blue-60 psui-text-blue-60'}`
+      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40 psui-cursor-default' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
       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 (this.disabled) textCss = 'psui-text-gray-40 psui-cursor-default'
         
         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`
+      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40 psui-cursor-default`
+      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner psui-cursor-pointer`
     }  
   },
   methods: {
@@ -107,3 +110,20 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .small {
+    padding: 4px 8px 4px 8px;
+    font-size: 14px;
+  }
+
+  .medium{
+    padding: 7px 16px 7px 16px;
+    font-size: 14px;
+  }
+
+  .big{
+    padding: 9.5px 16px 9.5px 16px;
+    font-size: 16px;
+  }
+</style>

package/src/components/chips/PsChips.vue

@@ -1,25 +1,26 @@
 <template>
   <label
     @click="onClick"
-    
     :for="title"
-
     :class="cssClass"
-
     class="
       psui-flex
-      psui-items-center
       psui-gap-2
-      psui-justify-center
       psui-bg-gray-10
-      psui-text-gray-60
-      psui-rounded-md
-      psui-py-1
+      psui-text-gray-50
       psui-px-2
-      psui-cursor-pointer
+      psui-py-1
+      psui-rounded-md
+      psui-items-center
     "
   >
-    <input @change="onChange" v-if="type !== 'text'" :type="type" :id="title" />
+    <input
+      @change="onChange"
+      v-if="type !== 'text'"
+      :type="type"
+      :id="title"
+      :checked="checked"
+    />
     <i v-if="icon" class="material-icons">{{ icon }}</i>
     {{ title }}
     <button @click="onClose" v-if="rich" class="psui-flex psui-items-center">
@@ -47,53 +48,62 @@ export default {
       default: "",
     },
     rich: {
-        type: Boolean,
-        default: false
-    }
+      type: Boolean,
+      default: false,
+    },
+    checked: {
+      type: Boolean,
+    },
   },
   emits: ["click", "change"],
   data() {
     return {
       isChecked: false,
+      value: null,
     }
   },
   computed: {
     cssClass() {
+      let cssClass = ''
+      
       if (this.isChecked === true && this.type === "radio") {
-        return "psui-text-blue-50"
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
       }
 
       if (this.isChecked === true && this.type === "checkbox") {
-        return "psui-text-blue-50"
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
       }
 
-      if (this.isChecked === true){
-        return "psui-text-blue-50"
+      if (this.isChecked === true) {
+        cssClass = "psui-text-blue-50 psui-bg-blue-20"
       }
-      return "psui-text-blue-50"
+
+      return cssClass
     },
   },
   methods: {
     onClick() {
       if (this.disabled) return false
+
       if (this.type !== "checkbox" || this.type !== "radio") {
         this.isChecked = !this.isChecked
       }
+
       this.$emit("click")
     },
     onChange(event) {
       this.isChecked = event.target.checked
-      this.$emit("change")
+      this.checked = event.target.checked
+      this.$emit("change", event.target.checked)
     },
-    onClose(){
+    onClose() {
       this.$emit("close")
-    }
-  } 
+    },
+  },
 }
 </script>
 
 <style scoped>
-
 input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -103,7 +113,8 @@ input[type="radio"] {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid #4b5563;
+  border: 1px solid #d6dde5;
+  cursor: pointer;
 }
 
 input[type="checkbox"] {
@@ -115,7 +126,8 @@ input[type="checkbox"] {
   width: 16px;
   height: 16px;
   border-radius: 25%;
-  border: 1px solid #4b5563;
+  border: 1px solid #d6dde5;
+  cursor: pointer;
 }
 
 input[type="radio"]:hover,
@@ -125,16 +137,19 @@ input[type="checkbox"]:hover {
 
 input[type="radio"]:checked {
   border-color: #64b5ce;
-  background: url('../../assets/images/radio-checked-button.svg') #ffffff no-repeat center;
+  background: url("../../assets/images/radio-checked-button.svg") #ffffff
+    no-repeat center;
 }
 
 input[type="checkbox"]:checked {
   border-color: #64b5ce;
-  background: url('../../assets/images/check-checkbox-button.svg') #64b5ce no-repeat center;
+  background: url("../../assets/images/check-checkbox-button.svg") #64b5ce
+    no-repeat center;
 }
 
 label {
-    width: fit-content;
+  width: fit-content;
+  cursor: pointer;
 }
 
 label:hover {
@@ -142,5 +157,8 @@ label:hover {
   background: #ffffff;
 }
 
+button {
+  outline: none;
+}
 </style>
 

package/src/components/controls/PsDraggable.vue

@@ -1,10 +1,35 @@
 <template>
-  
+  <div>
+      <div>
+          <div class="psui-bg-gray-20 psui-rounded-lg psui-mb-4">
+              <div class="psui-flex psui-justify-between psui-items-center psui-p-2">
+                <h2 class="psui-text-gray-80 psui-font-bold psui-leading-4">Cost Effectiveness</h2>
+                <i class="material-icons-round psui-text-gray-40" >drag_indicator</i>
+              </div>
+          </div>
+            <div>
+                <div class="psui-flex psui-flex-col psui-bg-gray-20 psui-rounded-lg psui-mb-4">
+                    <div class="psui-flex psui-justify-between psui-items-center psui-p-2">
+                        <h2 class="psui-text-gray-80 psui-font-bold psui-leading-4">Per Home Results</h2>
+                        <i class="material-icons-round psui-text-gray-40">drag_indicator</i>
+                    </div>
+                    <slot>
+                    </slot>
+                </div>
+            </div>
+      </div>
+  </div>
 </template>
 
 <script>
 export default {
-
+    name: 'PsDraggable',
+    props:{
+        data: {
+            type: Array,
+            required: true,
+        }
+    }
 }
 </script>