@policystudio/policy-studio-ui-vue 1.2.0-access.6 → 1.2.0-access.61

package/src/assets/scss/components/table-layouts/LayoutFlexible.scss

@@ -0,0 +1,325 @@
+@mixin renderFlexible {
+  tr {
+    th,
+    td {
+      &:last-child {
+        @apply psui-pr-2;
+      }
+    }
+  }
+
+  thead {
+    @apply psui-bg-white psui-items-start psui-sticky psui-top-0 psui-z-15;
+
+    &:after {
+      content: "";
+      @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
+      right: -8px;
+    }
+
+    tr {
+      .title {
+        @apply psui-text-14 psui-font-semibold psui-text-gray-80;
+      }
+
+      th {
+        @apply  psui-text-right psui-w-auto psui-align-top;
+
+        .description {
+          @apply psui-text-xsmall psui-font-normal psui-text-gray-60;
+          line-height: 110%;
+        }
+
+        &:first-child {
+          @apply psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
+          padding-left: 0;
+
+          > div {
+            @apply psui-items-start;
+          }
+
+          &.pseudo-line {
+            &::after {
+              content: "";
+              position: absolute;
+              top: 10px;
+              right: 0;
+              width: 1px;
+              height: calc(100%);
+              background-color: #d6dde5;
+            }
+          }
+        }
+      }
+
+      &:first-of-type {
+        th {
+          @apply psui-text-left;
+          padding-top: 0;
+          padding-bottom: 0;
+          padding-left: 10px;
+          position: sticky;
+
+          &:first-child {
+            padding-left: 0;
+            width: 598px;
+          }
+
+          > div {
+            @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-2;
+
+            > .title {
+              @apply psui-text-14 psui-text-gray-80 psui-font-semibold;
+            }
+          }
+        }
+
+        p {
+          @apply psui-text-16;
+          line-height: 18px;
+        }
+      }
+
+      &:not(:first-of-type) {
+        th {
+          &:not(:first-of-type) {
+            > div {
+              > div {
+                @apply psui-mx-auto;
+              }
+            }
+          }
+
+          > div {
+            @apply psui-border-b psui-border-gray-20 psui-pr-[20px];
+          }
+
+          .title {
+            @apply psui-text-gray-80;
+          }
+
+          p:not(:first-of-type) {
+            @apply psui-text-gray-60;
+          }
+
+          &:first-child {
+            @apply psui-text-left;
+            width: 352px;
+            padding-left: 0;
+          }
+
+          &:nth-child(2) {
+            @apply psui-sticky psui-z-10 psui-bg-white;
+            left: 352px;
+            min-width: 140px;
+          }
+
+          &:nth-child(3) {
+            @apply psui-sticky psui-z-10 psui-bg-white;
+            left: 492px;
+          }
+        }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      @apply psui-border-gray-20;
+      transition: background-color 0.5s ease;
+
+      .title {
+        @apply psui-flex psui-items-center psui-text-small psui-text-gray-80;
+      }
+
+      &.removed-class {
+        td {
+          .title {
+            @apply psui-text-gray-80 psui-text-14 psui-leading-[130%];
+          }
+
+          &:first-child {
+            > div {
+              margin-left: 4px;
+            }
+          }
+        }
+      }
+
+      &.is-disabled {
+        td {
+          &.hover-color {
+            background-color: #e6ecf2 !important;
+            opacity: 0.99;
+            transition: background-color 0.5s ease;
+          }
+        }
+      }
+
+      td {
+        @apply psui-text-gray-80 psui-h-[32px] psui-text-right psui-text-14;
+
+        &.hover-color {
+          background-color: #ecf7fb !important;
+          opacity: 0.99;
+          transition: background-color 0.5s ease;
+        }
+
+        > div {
+          @apply psui-flex psui-items-center;
+        }
+
+        .actions {
+          @apply psui-flex psui-items-center psui-h-full psui-relative;
+
+          &-button {
+            @apply psui-cursor-pointer;
+          }
+        }
+
+        &:first-child {
+          @apply psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
+          width: 352px;
+        }
+
+        &:nth-child(2) {
+          @apply psui-sticky psui-z-10;
+          width: 140px;
+          left: 352px;
+          > div {
+            @apply psui-justify-center;
+          }
+        }
+
+        &:nth-child(3) {
+          @apply psui-sticky psui-z-10;
+          min-width: 140px;
+          left: 492px;
+          > div {
+            @apply psui-justify-center;
+          }
+        }
+
+        &:nth-child(n + 3) {
+          padding-right: 20px;
+        }
+
+        .psui-el-tooltip-dialog {
+          text-align: left;
+          max-width: 180px;
+
+          .psui-el-tooltip-content-wrapper {
+            white-space: normal;
+          }
+        }
+      }
+
+      &.is-first {
+        @apply psui-border-transparent;
+
+        .actions-button span {
+          @apply psui-text-gray-60;
+          font-size: 16px !important;
+        }
+
+        .title {
+          @apply psui-text-xsmall psui-font-bold psui-text-gray-60;
+        }
+
+        td {
+          @apply psui-h-auto psui-py-1;
+          min-height: 1rem;
+        }
+
+        &.removed-class {
+          td {
+            .title {
+              @apply psui-ml-[6px] psui-text-gray-80 psui-text-14 psui-font-semibold;
+            }
+
+            .actions-button {
+              margin-left: 2px;
+            }
+
+            &:first-child {
+              @apply psui-sticky;
+              min-width: 330px;
+            }
+          }
+
+          &.closed {
+            td {
+              &:first-child {
+                @apply psui-sticky;
+
+                .actions-button {
+                  margin-left: 2px;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &:not(.is-first):not(.removed-class) {
+        td {
+          &:first-child {
+            @apply psui-sticky;
+
+            &:before,
+            &:after {
+              content: "";
+              @apply psui-absolute psui-top-0;
+            }
+
+            &:before {
+              @apply psui-bg-white psui-left-0;
+              width: 14px;
+              height: calc(100% + 1px);
+            }
+
+            &:after {
+              @apply psui-bg-gray-20 psui-w-px psui-h-0 psui-rounded-lg;
+              left: 8px;
+            }
+          }
+        }
+
+        &:hover {
+          td {
+            @apply psui-bg-blue-10;
+          }
+        }
+
+        &.opened {
+          td:first-child {
+            &:after {
+              height: calc(100% + 1px);
+            }
+          }
+        }
+      }
+
+      &:not(.is-first) {
+        td {
+          &:first-child {
+            > div {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+
+      &.is-active {
+        td {
+          padding-top: 9px;
+          padding-bottom: 9px;
+
+          .title {
+            @apply psui-text-14 psui-text-gray-60;
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/components/table-layouts/LayoutResults.scss

@@ -0,0 +1,102 @@
+%sticky-first-column {
+  @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
+  box-shadow: inset -1px 0px 0px #ebeef0;
+}
+
+@mixin renderResults {
+  tr th:last-child,
+  tr td:last-child {
+    @apply psui-pr-2;
+  }
+
+  thead {
+    @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
+
+    &::after {
+      content: '';
+      @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white psui-right-[-8px];
+    }
+
+    tr {
+      .title {
+        @apply psui-text-14 psui-font-semibold psui-text-gray-80;
+      }
+
+      th {
+        @apply psui-pl-6 psui-text-gray-60 psui-text-right psui-w-auto psui-align-top psui-py-[13px];
+
+        .description {
+          @apply psui-text-14 psui-text-gray-60 psui-font-normal;
+        }
+
+        &:first-child {
+          @extend %sticky-first-column;
+          @apply psui-min-w-[300px];
+
+          > div {
+            @apply psui-pl-0;
+          }
+        }
+      }
+    }
+
+    tr:first-of-type {
+      th {
+        @apply psui-text-left psui-py-0;
+
+        > div {
+          @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-[0.688rem] psui-px-0;
+        }
+      }
+    }
+  }
+
+  tbody tr {
+    @apply psui-border-b psui-border-gray-20;
+
+    .title {
+      @apply psui-flex psui-items-center psui-text-14 psui-leading-[24px];
+    }
+
+    &.is-first .title {
+      @apply psui-text-gray-80 psui-font-bold;
+    }
+
+    td {
+      @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14 psui-py-[0.688rem] psui-min-h-[41.5px];
+
+      > div {
+        @apply psui-flex psui-items-center;
+      }
+
+      &:not(:first-child) > div {
+        @apply psui-justify-end;
+      }
+
+      &:first-child {
+        @extend %sticky-first-column;
+        @apply psui-block psui-py-2;
+      }
+    }
+
+    td .actions {
+      @apply psui-flex psui-items-center psui-h-full psui-relative;
+
+      &-button {
+        @apply psui-cursor-pointer psui-ml-1;
+      }
+
+      .is-last-deep {
+        @apply psui-pl-10;
+      }
+    }
+
+    &.is-active {
+      @apply psui-bg-gray-10;
+
+      td:first-child {
+        @apply psui-bg-gray-10;
+      }
+    }
+  }
+}

package/src/components/accordion/PsAccordionItem.vue

@@ -2,7 +2,6 @@
   <div
     class="psui-el-accordion-item"
     :class="{ 'status-opened': isOpen, disabled: disabled }"
-    tabindex="0"
   >
     <div class="psui-el-accordion-item-header">
       <slot
@@ -12,7 +11,9 @@
       >
         <div
           @click="toggle"
+          @keydown.enter.stop="toggle"
           class="psui-el-accordion-item-header-wrapper"
+          tabindex="0"
           v-if="!hasCustomHeader"
         >
           <h2
@@ -50,8 +51,10 @@
 
 <script setup>
 import { getParentVueComponentByName } from '../../util/GeneralFunctions.js'
+import { useCollapseAnimation } from '../../../dist/composables/useCollapseAnimation.js'
 import { ref, computed, getCurrentInstance  } from 'vue'
 
+const { beforeEnter, enter, afterEnter, beforeLeave, leave } = useCollapseAnimation()
 defineExpose({
   toggle: () => toggle()  
 })
@@ -132,67 +135,6 @@ const toggle = () => {
   }
 }
 
-const beforeEnter = (el) => {
-  el.style.height = '0'
-  el.style.opacity = '0'
-  el.style.overflow = 'hidden'
-  el.style.paddingTop = '0'
-  el.style.paddingBottom = '0'
-  el.style.marginTop = '0'
-  el.style.marginBottom = '0'
-}
-
-const enter = (el, done) => {
-  void el.offsetHeight 
-
-  el.style.transition = 'all 0.3s ease-in-out'
-  el.style.height = el.scrollHeight + 'px'
-  el.style.opacity = '1'
-
-  el.style.removeProperty('padding-top')
-  el.style.removeProperty('padding-bottom')
-  el.style.removeProperty('margin-top')
-  el.style.removeProperty('margin-bottom')
-
-  el.addEventListener('transitionend', done, { once: true })
-}
-
-const afterEnter = (el) => {
-  el.style.height = 'auto'
-  el.style.overflow = 'visible'
-  el.style.transition = '' 
-}
-
-const beforeLeave = (el) => {
-  if (!el) return
-
-  el.style.height = el.scrollHeight + 'px'
-  el.style.overflow = 'hidden'
-
-  const style = window.getComputedStyle(el)
-  el.style.paddingTop = style.paddingTop
-  el.style.paddingBottom = style.paddingBottom
-  el.style.marginTop = style.marginTop
-  el.style.marginBottom = style.marginBottom
-}
-
-const leave = (el, done) => {
-  if (!el) return
-
-  void el.offsetHeight 
-  el.style.transition = 'all 0.3s ease-in-out'
-
-  requestAnimationFrame(() => {
-    el.style.height = '0'
-    el.style.opacity = '0'
-    el.style.paddingTop = '0'
-    el.style.paddingBottom = '0'
-    el.style.marginTop = '0'
-    el.style.marginBottom = '0'
-  })
-
-  el.addEventListener('transitionend', done, { once: true })
-}
 </script>
 
 <style>

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

@@ -1,7 +1,11 @@
 <template>
   <div
     class="psui-el-card-infos"
+    role="button"
+    tabindex="0"
+    :aria-label="`View details for ${title} ${subtitle}`"
     @click="onClick()"
+    @keyup.enter="onClick()"
   >
     <span class="psui-el-card-infos-title">
       <span :class="[titleClass, 'psui-mr-1']">{{ title }}</span>
@@ -53,14 +57,14 @@ defineProps({
    */
   titleClass: {
     type: String,
-    default: 'psui-text-gray-60 psui-font-bold',
+    default: 'psui-text-gray-80 psui-font-bold',
   },
   /**
    * It sets the class for the subtitle text (color, font-weight, font-size, etc.).
    */
   subtitleClass: {
     type: String,
-    default: 'psui-text-gray-40 psui-font-bold',
+    default: 'psui-text-gray-80',
   },
   /**
    * It sets the class for the total text (color, font-weight, font-size, etc.).

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

@@ -16,7 +16,7 @@
           class="psui-el-chart-legend-total"
         >{{ total }}</span>
         <span
-          class="psui-text-gray-30"
+          class="psui-text-gray-60"
           v-if="total && percentage"
         > | </span>
         <span

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

@@ -1,8 +1,14 @@
 <template>
   <div class="psui-el-date-card">
-    <span class="psui-el-date-card-month-day">
-      {{ getMonthAndDayFromDate }}
-    </span>
+    <div class="psui-el-date-card-month-day">
+      <span>
+        {{ getMonth }}
+      </span>
+      <span>
+        {{ getDay }}
+      </span>
+    </div>
+    
     <span class="psui-el-date-card-year">
       {{ getYearFromDate }}
     </span>
@@ -19,11 +25,16 @@ const props = defineProps({
   },
 })
 
-const getMonthAndDayFromDate = computed(() => {
-  const options = { month: 'short', day: '2-digit' }
+const getMonth= computed(() => {
+  const options = { month: 'short'}
   return new Date(props.date)?.toLocaleString('default', options).replace('.', '')
 })
 
+const getDay = computed(() => {
+  const options = { day: '2-digit' }
+  return new Date(props.date)?.toLocaleString('default', options)
+})
+
 const getYearFromDate = computed(() => {
   return new Date(props.date)?.toLocaleString('default', { year: 'numeric' })
 })

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

@@ -23,11 +23,11 @@ const props = defineProps({
     'warning',
     'error',
     'default',
-    'solid-info',
-    'solid-success',
-    'solid-warning',
-    'solid-error',
-    'solid-default'
+    'dark-info',
+    'dark-success',
+    'dark-warning',
+    'dark-error',
+    'dark-default'
     ].indexOf(value) !== -1,  
   },
   /**

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

@@ -1,22 +1,24 @@
 <template>
-  <div class="psui-el-testimonial">
+  <figure class="psui-el-testimonial">
     <div class="psui-el-testimonial-icon">
       <PsIcon
         icon="format_quote"
         size="40"
         color="psui-text-white"
+        tabindex="-1"
+        aria-hidden="true"
         display="flex"
       />
     </div>
-    <p class="psui-el-testimonial-description">
+    <blockquote class="psui-el-testimonial-description">
       {{ description }}
-    </p>
-    <div class="psui-el-testimonial-info">
+    </blockquote>
+    <figcaption 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>
+    </figcaption>
+  </figure>
 </template>
 
 <script setup>