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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.20",
+  "version": "1.0.24",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -15,7 +15,8 @@
     "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"
+    "publish": "npm run lint && npm run build-tailwind && npm publish",
+    "dev": "watch 'npm run build-tailwind' ./src/assets"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -26,6 +27,7 @@
     "@storybook/addon-actions": "^6.4.13",
     "@storybook/addon-essentials": "^6.4.13",
     "@storybook/addon-links": "^6.4.13",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/vue": "^6.4.13",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
@@ -38,9 +40,12 @@
     "eslint-plugin-vue": "^6.2.2",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
+    "postcss-import": "^14.0.2",
+    "postcss-nested": "^5.0.6",
     "prettier": "^2.2.1",
     "tailwindcss": "^1.9.6",
     "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "watch": "^1.0.2"
   }
 }

package/postcss.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'postcss-nested': {},
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },

package/src/assets/scss/base.scss

@@ -1,7 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
+@import './components/PsAccordion.scss';
+@import './components/PsInput.scss';
+@import './components/PsButton.scss';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 *:focus {
     outline: none;
@@ -9,4 +12,8 @@
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+}
+
+.transition-default {
+  transition: cubic-bezier(.17,.67,.83,.67) 250ms;
 }

package/src/assets/scss/components/PsAccordion.scss

@@ -0,0 +1,63 @@
+@layer components{
+
+  .psui-el-accordion {
+
+    &-item {
+      border-bottom: 1px solid #e6ecf2;      
+  
+      &-header {
+        @apply psui-flex psui-cursor-pointer psui-transition-all psui-justify-between transition-default;
+        padding-top: 16px;
+        padding-bottom: 16px;
+        &:hover {
+          @apply psui-text-blue-60;
+        }
+      }
+
+      &-content {
+        padding-bottom: 24px;
+      }
+
+      &-icon {
+        font-size: 20px;
+        width: 20px;
+      }    
+      
+    }
+
+    &.layout-big {
+      .psui-el-accordion-item {
+        &-header, &-content {
+          padding-left: 16px;
+          padding-right: 16px;
+        }
+        &-title {
+          @apply psui-text-h5 psui-font-bold;
+        }
+        &-icon {
+          @apply psui-text-gray-30
+        }        
+      }
+    }
+    
+    &.layout-medium {
+      .psui-el-accordion-item {
+        &-title {
+          @apply psui-text-small psui-font-bold;
+        }
+      }
+    }
+
+    .psui-el-accordion-item {
+      &.status-opened, &-header:hover {
+        .psui-el-accordion-item-icon {
+          @apply psui-text-blue-60;
+        }
+      }
+    }
+
+
+
+  }
+
+}

package/src/assets/scss/components/PsButton.scss

@@ -0,0 +1,145 @@
+@layer components {
+
+    .psui-el-button {
+
+        @apply psui-font-bold psui-items-center psui-flex psui-content-center psui-rounded-md transition-default;
+
+        span {
+            @apply psui-font-bold;
+            line-height: 130%;
+            font-family: inherit;
+            text-align: right;
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &.right {
+            @apply psui-flex-row-reverse;
+        }
+        
+        &.big {
+            @apply psui-flex psui-items-center psui-content-center;
+            padding: 9.5px 16px;
+            font-size: 16px;
+            
+            &.left i {
+                font-size: 24px;
+                margin-right: 8px;
+            }
+
+            &.right i {
+                    font-size: 24px;
+                    margin-left: 8px;
+            }
+
+        }
+
+        &.medium {
+
+            @apply psui-flex psui-items-center psui-content-center;
+            padding: 7px 16px;
+            font-size: 14px;
+
+            &.left i {
+                    font-size: 18px;
+                    margin-right: 4px;
+            }
+
+            &.right i {
+                    font-size: 18px;
+                    margin-left: 4px;
+            }
+        }
+
+        &.small {
+
+            @apply psui-flex psui-items-center psui-content-center;
+            padding: 4px 8px;
+            font-size: 14px;
+
+            &.active {
+                @apply psui-bg-blue-20 psui-text-blue-60;
+                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+            }
+
+            &.hover.layout-onlytext {
+                @apply psui-text-blue-60 psui-bg-blue-20 !important;
+            }
+
+            &.left {
+                i {
+                    font-size: 18px;
+                    margin-right: 4px;
+                }      
+            }
+
+            &.right {
+                i {
+                    font-size: 18px;
+                    margin-left: 4px;
+                }  
+            }
+
+        }
+
+        &.layout-solid {
+            
+            @apply psui-bg-blue-60 psui-text-white; 
+
+            &.hover {
+                @apply psui-bg-blue-50 psui-text-white;
+            }
+
+            &.active {
+                @apply psui-bg-blue-50 psui-text-white;
+                box-shadow: inset 0px 1px 2px rgba(0,0,0,0.15);
+            }
+
+            &.disabled {
+                @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+            }                
+        }
+
+        &.layout-outline {
+
+            @apply psui-text-blue-60 psui-border psui-border-blue-50;
+            background: transparent;
+
+            &.hover,
+            &.active {
+                @apply psui-border psui-border-blue-60
+            }
+
+            &.disabled {
+                @apply psui-text-gray-40 psui-border-gray-30 psui-cursor-default;
+            } 
+        }
+
+        &.layout-ghost {
+
+            @apply psui-bg-blue-20 psui-text-blue-60;
+            &.hover,
+            &.active {
+                @apply psui-bg-blue-10
+            }
+            &.disabled {
+                @apply psui-text-gray-40 psui-bg-gray-20 psui-cursor-default
+            }
+        }
+
+        &.layout-onlytext {
+
+            @apply psui-bg-white psui-text-blue-60;
+
+            &.disabled {
+                @apply psui-text-gray-40 psui-cursor-default
+            }
+            
+            &.hover {
+                @apply psui-text-blue-50
+            }
+        }
+    }
+}

package/src/assets/scss/components/PsInput.scss

@@ -0,0 +1,104 @@
+@layer components{
+
+  .psui-el-input {
+    
+    &-prepend {
+      @apply psui-pl-2 psui-flex psui-items-center psui-pointer-events-none 
+    }
+
+    &-append {
+      @apply psui-pr-2 psui-flex psui-items-center
+    }
+
+    &-hint {
+      @apply psui-text-gray-50 psui-text-xsmall psui-mt-1
+    }
+
+    &-wrapper {
+      @apply psui-relative psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-bg-white psui-flex transition-default
+    }
+
+    label {
+      @apply psui-font-bold psui-text-gray-80
+    }
+
+    input {
+      @apply psui-bg-white psui-text-gray-60 psui-w-full psui-rounded-md   
+    }
+    
+    &.status-error {
+      .psui-el-input-wrapper {
+        @apply psui-border-red-20
+      }
+      .psui-el-input-hint  {
+        @apply psui-text-red-20
+      }
+    }
+
+    &.status-disabled {
+      .psui-el-input-wrapper {
+        @apply psui-bg-gray-20 psui-border-gray-20
+      }
+      input {
+        @apply psui-bg-gray-20 psui-text-gray-40
+      }
+      label {
+        @apply psui-text-gray-40
+      }
+    }
+    
+    /* Layout Default */
+    /* ----------------------------------------- */
+    
+      &.layout-default {
+        
+        input {
+          @apply psui-text-p;
+          padding: 11.5px 16px;
+        }          
+
+        &.status-resting {
+          .psui-el-input-wrapper.hover {
+            @apply psui-border-blue-50
+          }          
+        }
+
+        &.status-active {
+          .psui-el-input-wrapper {
+            @apply psui-border-blue-60
+          }
+        }
+
+      }
+    /* ----------------------------------------- Layout Default */
+    
+    
+    /* Layout Mini */
+    /* ----------------------------------------- */
+      &.layout-mini {
+        input {
+          @apply psui-text-small;
+          padding: 7px 8px;
+        }
+        &.status-resting {
+          .psui-el-input-wrapper.hover {
+            @apply psui-border-green-20
+          }
+        }
+        &.status-active {
+          .psui-el-input-wrapper {
+            @apply psui-border-green-20;
+            input {
+              @apply psui-text-green-20;
+              &.focus {
+                @apply psui-text-gray-60
+              }
+            }
+          }
+        }
+      }
+    /* ----------------------------------------- Layout Mini */
+    
+  }
+
+}

package/src/components/accordion/PsAccordion.vue

@@ -1,44 +1,45 @@
 <template>
-  <div :class="classes" class='accordion' >
-      <slot></slot>
+  <div class="psui-el-accordion" :class="`layout-${layout}`">
+    <slot></slot>
   </div>
 </template>
 
 <script>
-export const sizes = ['big', 'medium']
-
+export const layouts = ['big', 'medium']
+export const defaultIconsByLayout = {
+  big: { 
+    'iconOpened': 'remove',
+    'iconClosed': 'add'
+  },
+  medium: {
+    'iconOpened': 'expand_less',
+    'iconClosed': 'expand_more'
+  }
+}
 export default {
-  name:"PsAccordion",
+  name: 'PsAccordion',
   props: {
-    size:{
+    layout: {
       type: String,
       default: 'medium',
-      required: true
+      required: true,
+      validator: (value) => layouts.indexOf(value) !== -1,
+    },
+    'iconOpened': {
+      type: String,
+    },
+    'iconClosed': {
+      type: String,
     }
   },
-  computed:{
-    classes(){
-      if( this.size === 'big') return 'big'
-      return 'medium'
+  computed: {
+    getIcons() {
+      return {
+        'iconOpened' : this.iconOpened ?? defaultIconsByLayout[this.layout].iconOpened,
+        'iconClosed' : this.iconClosed ?? defaultIconsByLayout[this.layout].iconClosed,
+      }
     }
   }
-
 }
 </script>
-<style scoped>
- .medium {
-   width: 390px;
- }
-
- .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>
+<style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>

package/src/components/accordion/PsAccordionItem.vue

@@ -1,34 +1,16 @@
 <template>
-  <div class="container">
-    <div
-      @click="toggleTitle"
-      :class="cssClass"
-      class="
-        psui-flex psui-cursor-pointer psui-transition-all psui-justify-between
-      "
-    >
-      <div
-        v-if="title"
-        :class="display ? 'selected' : ''"
-        class="psui-font-bold psui-gray04"
-      >
-        {{ title }}
-      </div>
-      <span v-if="!display" class="material-icons">{{ iconClass.closed }}</span>
-      <span v-else :class="display ? 'selected' : ''" class="material-icons">{{
-        iconClass.open
-      }}</span>
+  <div class="psui-el-accordion-item" :class="`status-${isOpen ? 'opened' : 'closed'}`">
+    <div @click="toggle" class="psui-el-accordion-item-header">
+      <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
+      <i class="psui-el-accordion-item-icon material-icons">{{ getIcon }}</i>
     </div>
-    <div v-if="display" class="psui-transition-all psui-duration-300">
+    <div v-if="isOpen" class="psui-el-accordion-item-content">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
-export const iconTypes = ["mathsign", "chevron"]
-export const fontCss = ["medium", "big"]
-
 export default {
   name: "PsAccordionItem",
   props: {
@@ -36,67 +18,47 @@ export default {
       type: String,
       required: true,
     },
-    iconType: {
+    'iconOpened': {
       type: String,
-      required: true,
-      default: "chevron",
     },
-    fontCss: {
+    'iconClosed': {
       type: String,
-      default: "medium",
     },
+    opened: {
+      type: [Boolean],
+      default: false
+    }
   },
   data() {
     return {
-      display: false,
+      localOpened: null,
     }
   },
   computed: {
-    iconClass() {
-      if (this.iconType === "chevron") {
-        return { closed: "expand_more", open: "expand_less" }
-      } else if (this.iconType === "mathsign") {
-        return { closed: "add", open: "remove" }
+    getIcons() {
+      return {
+        'iconOpened' : this.iconOpened ?? this.$parent.getIcons.iconOpened,
+        'iconClosed' : this.iconClosed ?? this.$parent.getIcons.iconClosed,
       }
-      return ''
     },
-    cssClass() {
-      if (this.fontCss === "big") return "big"
-      return "medium"
+    getIcon() {
+      return this.isOpen ? this.getIcons.iconOpened : this.getIcons.iconClosed
     },
+    isOpen() {
+      return this.localOpened !== null ? this.localOpened : this.opened
+    }
   },
   methods: {
-    toggleTitle() {
-      this.display = !this.display
+    toggle() {
+      if (this.localOpened === null) {
+        this.localOpened = !this.opened
+      } else {
+        this.localOpened = !this.localOpened
+      }
     },
-  },
+  }
 }
 </script>
 
-<style scoped>
-.container {
-  border-bottom: 1px solid #e6ecf2;
-  padding: 16px;
-}
-
-span {
-  font-weight: 700;
-  color: #e6ecf2;
-}
-
-.selected {
-  color: #318fac;
-  transition: color 300ms;
-}
-
-.big {
-  font-size: 18px;
-  line-height: 130%;
-}
-
-.medium {
-  font-size: 16px;
-  line-height: 130%;
-}
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>
 

package/src/components/badges-and-tags/PsCardInfos.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="psui-border psui-border-gray-20 psui-rounded-md psui-flex psui-flex-col psui-items-center psui-justify-center psui-px-3 psui-py-2 psui-space-y-2">
+    <h5 class="psui-text-xsmall psui-font-bold psui-text-gray-40">
+      <span class="psui-text-gray-60">{{ title }} </span>{{ subtitle }}
+    </h5>
+    <div class="psui-w-full psui-flex psui-justify-center psui-items-center psui-space-x-2 psui-text-p">
+      <span class="psui-text-blue-50 material-icons-round">{{ icon }}</span>
+      <h5 class="psui-text-gray-80">{{ total }}</h5>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsCardInfos',
+  props: {
+    title: {
+      type: String,
+      default: 'Total',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'edit',
+    },
+    total: {
+      type: String,
+      default: '',
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/badges-and-tags/PsChartLegend.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="psui-flex psui-p-2 psui-rounded">
+    <div class="psui-flex psui-flex-shrink-0">
+      <div :class="dotClass" class="dot psui-rounded-full" :style="dotColor"></div>
+    </div>
+    <div class="psui-flex-grow-1">
+      <div class="psui-text-xsmall psui-text-gray-50 psui-font-bold psui-mb-1">{{ text }}</div>
+      <span v-if="this.total" class="psui-text-p psui-text-gray-80">{{ total }}</span>
+      <span class="psui-text-gray-50" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: 'Climate Zone 10',
+    },
+    total: {
+      type: Number,
+      default: null,
+    },
+    percentage: {
+      type: Boolean,
+      default: false,
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+}
+</script>
+
+<style scoped>
+.dot {
+  width: 14px; height: 14px;
+  background-color: #43cec2;
+  margin-right: 6px;
+}
+</style>

package/src/components/badges-and-tags/PsClimateZoneBadge.vue

@@ -0,0 +1,18 @@
+<template>
+  <button
+    class="psui-flex psui-p-3 psui-bg-gray-10 psui-text-gray-50 hover:psui-text-blue-60 hover:psui-bg-blue-20 psui-transition-all psui-duration-300 psui-ease-out psui-shadow-lg psui-rounded"
+  >
+    <i v-if="icon" class="material-icons psui-text-base"> {{ icon }} </i>
+    <p class="psui-text-sm">10</p>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+    },
+  },
+}
+</script>