@policystudio/policy-studio-ui-vue 1.1.37 → 1.1.40

package/dist/css/psui_styles.css

@@ -4213,24 +4213,32 @@ video {
 .psui-el-date-card {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   --bg-opacity: 1;
   background-color: #318FAC;
   background-color: rgba(49, 143, 172, var(--bg-opacity));
-  color: #ffffff ;
+  --text-opacity: 1;
+  color: #E0EFF6;
+  color: rgba(224, 239, 246, var(--text-opacity));
   font-size: 14px;
   line-height: 130%;
-  width: 2.5rem;
-  border-radius: 3px;
+  font-weight: 700;
+  text-align: center;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  width: 61px;
 }
 
-.psui-el-date-card-month {
-    margin-bottom: 0.25rem;
+.psui-el-date-card-month-day,
+    .psui-el-date-card-year {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
 
-.psui-el-date-card-day {
+.psui-el-date-card-year {
+    --bg-opacity: 1;
+    background-color: #64B5CE;
+    background-color: rgba(100, 181, 206, var(--bg-opacity));
+    width: 100%;
     font-weight: 700;
   }
 

package/package.json

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

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

@@ -1,14 +1,15 @@
 @layer components {
   .psui-el-date-card {
-    @apply psui-flex psui-flex-col psui-items-center psui-py-2 psui-bg-blue-60 psui-text-white psui-text-small psui-w-10;
-    border-radius: 3px;
+    @apply psui-flex psui-flex-col psui-bg-blue-60 psui-text-blue-20 psui-text-small psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
+    width: 61px;
 
-    &-month {
-      @apply psui-mb-1;
+    &-month-day,
+    &-year {
+      @apply psui-py-1;
     }
-    
-    &-day {
-      @apply psui-font-bold;
+
+    &-year {
+      @apply psui-bg-blue-50 psui-w-full psui-font-bold;
     }
   }
 }

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

@@ -1,10 +1,10 @@
 <template>
   <div class="psui-el-date-card">
-    <span class="psui-el-date-card-month">
-      {{getMonthFromDate}}
+    <span class="psui-el-date-card-month-day">
+      {{ getMonthAndDayFromDate }}
     </span>
-    <span class="psui-el-date-card-day">
-      {{getDayFromDate}}
+    <span class="psui-el-date-card-year">
+      {{ getYearFromDate }}
     </span>
   </div>
 </template>
@@ -19,11 +19,12 @@ export default {
     }
   },
   computed: {
-    getMonthFromDate() {
-      return (new Date(this.date))?.toLocaleString('default', { month: 'short' }).replace('.', '') 
+    getMonthAndDayFromDate() {
+      const options = { month: 'short', day: '2-digit' }
+      return (new Date(this.date))?.toLocaleString('default', options).replace('.', '') 
     },
-    getDayFromDate() {
-      return (new Date(this.date))?.toLocaleString('default', { day: '2-digit' }) 
+    getYearFromDate() {
+      return (new Date(this.date))?.toLocaleString('default', { year: 'numeric' }) 
     }
   }
 }

package/src/components/forms/PsInput.vue

@@ -12,7 +12,8 @@
         <slot name="prepend"></slot>
       </div>
       <PsRichTooltip 
-        css-class="w-48"
+        class="psui-w-full"
+        css-class="psui-w-48"
         :ignore-dialog="!showTooltip"
       >
         <template v-slot:trigger>