@policystudio/policy-studio-ui-vue 1.0.95 → 1.0.98

package/dist/css/psui_styles.css

@@ -3842,6 +3842,82 @@ video {
     font-weight: 700;
   }
 
+.psui-el-testimonial {
+  position: relative;
+  background-color: #ffffff ;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  width: 100%;
+  padding: 56px 42px 40px 32px;
+}
+
+.psui-el-testimonial-icon {
+    position: absolute;
+    --bg-opacity: 1;
+    background-color: #318FAC;
+    background-color: rgba(49, 143, 172, var(--bg-opacity));
+    border-radius: 0.125rem;
+    display: flex;
+    align-items: center;
+    top:-15px;
+    right:16px;
+  }
+
+.psui-el-testimonial-description {
+    --text-opacity: 1;
+    color: #002A3A;
+    color: rgba(0, 42, 58, var(--text-opacity));
+    font-style: italic;
+    font-size: 16px;
+    line-height: 130%;
+    margin-bottom: 33px;
+  }
+
+.psui-el-testimonial-info {
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+  }
+
+.psui-el-testimonial-info-user {
+      margin-bottom: 0.25rem;
+      --text-opacity: 1;
+      color: #002A3A;
+      color: rgba(0, 42, 58, var(--text-opacity));
+      font-size: 14px;
+      line-height: 130%;
+      font-weight: 700;
+    }
+
+.psui-el-testimonial-info-position,.psui-el-testimonial-info-jurisdiction {
+      --text-opacity: 1;
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
+      font-size: 14px;
+      line-height: 130%;
+    }
+
+.psui-el-date-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --bg-opacity: 1;
+  background-color: #318FAC;
+  background-color: rgba(49, 143, 172, var(--bg-opacity));
+  color: #ffffff ;
+  padding: 8px 11px;
+  border-radius:3px;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.psui-el-date-card-day {
+    font-weight: 700;
+  }
+
 .psui-space-y-0 > :not(template) ~ :not(template){
   --space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--space-y-reverse)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.95",
+  "version": "1.0.98",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "dayjs": "^1.11.7",
     "vue": "^2.6.11"
   },
   "devDependencies": {

package/src/assets/scss/base.scss

@@ -29,6 +29,8 @@
 @import './components/PsInputSelect.scss';
 @import './components/PsDraggable.scss';
 @import './components/PsBadgeWithIcon.scss';
+@import './components/PsTestimonialCard.scss';
+@import './components/PsDateCardInfo.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsDateCardInfo.scss

@@ -0,0 +1,13 @@
+@layer components {
+    .psui-el-date-card {
+        @apply psui-flex psui-flex-col psui-items-center psui-bg-blue-60 psui-text-white;
+        padding: 8px 11px;
+        border-radius:3px;
+        width: fit-content;
+        height: fit-content;
+        
+        &-day {
+            @apply psui-font-bold;    
+        }
+    }
+}

package/src/assets/scss/components/PsTestimonialCard.scss

@@ -0,0 +1,28 @@
+@layer components {
+    .psui-el-testimonial {
+        @apply psui-relative psui-bg-white psui-flex psui-flex-col psui-rounded-lg w-full;
+        padding: 56px 42px 40px 32px;
+
+        &-icon {
+            @apply psui-absolute psui-bg-blue-60 psui-rounded-sm psui-flex psui-items-center;
+            top:-15px;
+            right:16px;
+        }
+
+        &-description {
+            @apply psui-text-blue-80 psui-italic psui-text-p;
+            margin-bottom: 33px;
+        }
+
+        &-info {
+            @apply psui-flex psui-flex-col psui-mt-auto;
+            &-user {
+                @apply psui-mb-1 psui-text-blue-80 psui-text-small psui-font-bold;
+            }
+
+            &-position,&-jurisdiction {
+                @apply psui-text-gray-50 psui-text-small;    
+            }
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="psui-el-date-card">
+    <span class="psui-el-date-card-month">
+      {{getMonthFromDate}}
+    </span>
+    <span class="psui-el-date-card-day">
+      {{getDayFromDate}}
+    </span>
+  </div>
+</template>
+
+<script>
+
+import dayjs from 'dayjs'
+
+export default {
+    name:'PsDateCardInfo',
+    props:{
+        date:{
+            type:String,
+            default:'',
+        }
+    },
+    computed:{
+      getMonthFromDate(){
+        return dayjs(this.date).format('MMM')
+      },
+      getDayFromDate(){
+        return dayjs(this.date).format('DD')
+      }
+    }
+}
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+    <div class="psui-el-testimonial">
+      <div class="psui-el-testimonial-icon">
+        <PsIcon
+          icon="format_quote"
+          size="35"
+          color="psui-text-white"
+        />
+      </div>
+      <p class="psui-el-testimonial-description">{{description}}</p>
+      <div class="psui-el-testimonial-info">
+        <span class="psui-el-testimonial-info-user" >{{user}}</span>
+        <span class="psui-el-testimonial-info-position">{{position}}</span>
+        <span class="psui-el-testimonial-info-jurisdiction">{{jurisdiction}}</span>
+      </div>
+    </div>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+
+export default {
+    name: 'PsTestimonialCard',
+    components:{
+      PsIcon
+    },
+    props:{
+      description:{
+        type: String,
+        default: '',
+      },
+      user:{
+        type: String,
+        default: '',
+      },
+      position:{
+        type: String,
+        default: '',
+      },
+      jurisdiction:{
+        type: String,
+        default: '',
+      },
+    }
+}
+</script>
+

package/src/index.js

@@ -1,3 +1,8 @@
+
+/**
+ * General Components
+ */
+
 import PsButton from './components/buttons/PsButton.vue'
 import PsCheckbox from './components/controls/PsCheckbox.vue'
 import PsRadioButton from './components/controls/PsRadioButton.vue'
@@ -35,8 +40,8 @@ import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
 import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
 import PsProgressBar from './components/badges-and-tags/PsProgressBar.vue'
 import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
-
-
+import PsTestimonialCard from './components/badges-and-tags/PsTestimonialCard.vue'
+import PsDateCardInfo from './components/badges-and-tags/PsDateCardInfo.vue'
 
 export default {
   install(Vue) {
@@ -77,6 +82,8 @@ export default {
     Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
     Vue.component('PsProgressBar', PsProgressBar)
     Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
+    Vue.component('PsTestimonialCard',PsTestimonialCard)
+    Vue.component('PsDateCardInfo',PsDateCardInfo)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -133,6 +140,8 @@ export {
   PsCheckboxSimple,
   PsBadgeWithIcon,
   PsProgressBar,
-  PsRadioButtonSimple
+  PsRadioButtonSimple,
+  PsTestimonialCard,
+  PsDateCardInfo
 }
 

package/src/stories/DateCardInfo.stories.js

@@ -0,0 +1,24 @@
+import PsDateCardInfo from '../components/badges-and-tags/PsDateCardInfo.vue'
+
+export default {
+    title: 'Components/DateCardInfo',
+    component: PsDateCardInfo,
+  }
+
+  const Template = (args,{argTypes}) => ({
+    props: Object.keys(argTypes),
+    components:{PsDateCardInfo},
+    template: `
+      <div style="width: 1000px; background:#DBE9F1; display:flex; gap: 7px; padding: 20px; height: 100%;">
+        <PsDateCardInfo v-bind="$props"/>
+        <PsDateCardInfo v-bind="$props"/>
+        <PsDateCardInfo v-bind="$props"/>
+      </div>
+    `
+}) 
+
+export const Default = Template.bind({})
+
+Default.args ={
+  date:'23/05/2023'
+}

package/src/stories/TestimonialCard.stories.js

@@ -0,0 +1,27 @@
+import PsTestimonialCard from '../components/badges-and-tags/PsTestimonialCard.vue'
+
+export default {
+    title: 'Components/TestimonialCard',
+    component: PsTestimonialCard,
+  }
+
+  const Template = (args,{argTypes}) => ({
+    props: Object.keys(argTypes),
+    components:{PsTestimonialCard},
+    template: `
+      <div style="width: 1000px; background:#DBE9F1; display:flex; gap: 7px; padding: 20px; height: 100%;">
+        <PsTestimonialCard v-bind="$props"/>
+        <PsTestimonialCard v-bind="$props"/>
+        <PsTestimonialCard v-bind="$props"/>
+      </div>
+    `
+}) 
+
+export const Default = Template.bind({})
+
+Default.args = {
+  testimonial: 'I used to spend most of my time helping California cities make reach codes. Now, i just show them the Explorer and get to focus on helping cities in other states.',
+  user:'Amy Rider',
+  position:'Head Sustainability Department',
+  jurisdiction:'City of Chula vista'
+}