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

package/dist/css/psui_styles.css

@@ -2021,8 +2021,8 @@ video {
               --border-opacity: 1;
               border-color: #D6DDE5;
               border-color: rgba(214, 221, 229, var(--border-opacity));
-              padding-top: 11px;
-              padding-bottom: 11px;
+              padding-top: 0.688rem;
+              padding-bottom: 0.688rem;
             }
 
 .psui-el-table-results.layout-results thead tr:first-of-type p {
@@ -2060,8 +2060,8 @@ video {
           text-align: right;
           font-size: 14px;
           line-height: 130%;
-          padding-top: 11px;
-          padding-bottom: 11px;
+          padding-top: 0.688rem;
+          padding-bottom: 0.688rem;
           min-height: 41.5px;
         }
 
@@ -2118,7 +2118,7 @@ video {
 
 .psui-el-table-results.layout-comparison {
     border-collapse: separate;
-    border-spacing: 2px 8px;
+    border-spacing: 0px 8px;
   }
 
 .psui-el-table-results.layout-comparison tr th, .psui-el-table-results.layout-comparison tr td {
@@ -2126,7 +2126,9 @@ video {
       }
 
 .psui-el-table-results.layout-comparison thead {
-      background-color: transparent;
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
       align-items: flex-start;
     }
 
@@ -2154,8 +2156,8 @@ video {
           color: rgba(121, 132, 144, var(--text-opacity));
           text-align: center;
           vertical-align: top;
-          padding-top: 13px;
-          padding-bottom: 13px;
+          padding-top: 0.688rem;
+          padding-bottom: 0.188rem;
           min-width: 200px;
         }
 
@@ -2169,14 +2171,16 @@ video {
 .psui-el-table-results.layout-comparison thead tr:not(:first-of-type) th:after {
               position: absolute;
               top: 0;
-              height: 100%;
+              right: 0;
               display: inline-block;
-              --bg-opacity: 1;
-              background-color: #D6DDE5;
-              background-color: rgba(214, 221, 229, var(--bg-opacity));
               width: 1px;
               content: '';
-              right: -1px;
+              height: calc(100% + 0.5rem);
+              background-color: #C3CAD1;
+            }
+
+.psui-el-table-results.layout-comparison thead tr:not(:first-of-type) th:last-child:after {
+              display: none;
             }
 
 .psui-el-table-results.layout-comparison thead tr:first-of-type th {
@@ -2186,35 +2190,46 @@ video {
             color: rgba(121, 132, 144, var(--text-opacity));
             font-size: 16px;
             line-height: 130%;
-            padding-top: 11px;
-            padding-bottom: 11px;
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+            padding-top: 7px;
+            padding-bottom: 7px;
           }
 
+.psui-el-table-results.layout-comparison thead tr:first-of-type th:after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              display: inline-block;
+              content: '';
+              width: 1px;
+              height: calc(100% + 0.5rem);
+              background-color: #C3CAD1;
+            }
+
 .psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child {
-              padding-left: 0;
-              padding-top: 1rem;
+              vertical-align: middle;
+              padding-left: 22px;
               min-width: 240px;
             }
 
 .psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child .title {
+                font-size: 17px;
+                line-height: 120%;
                 --text-opacity: 1;
                 color: #28323B;
                 color: rgba(40, 50, 59, var(--text-opacity));
                 font-weight: 700;
               }
 
-.psui-el-table-results.layout-comparison thead tr:first-of-type th:not(:first-child):before {
-                display: inline-block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                content: '';
-                background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF2 100%);
-                border-radius: 12px 12px 0px 0px;
-                height: 5.5rem;
+.psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child:after {
+                width: 2px;
               }
 
+.psui-el-table-results.layout-comparison thead tr:first-of-type th:last-child:after {
+              display: none;
+            }
+
 .psui-el-table-results.layout-comparison thead tr:first-of-type p {
             font-size: 14px;
             line-height: 130%;
@@ -2228,10 +2243,16 @@ video {
               font-weight: 400;
             }
 
+.psui-el-table-results.layout-comparison tbody tr {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
 .psui-el-table-results.layout-comparison tbody tr td {
-          background-color: #ffffff ;
           position: relative;
-          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+          border-right: 1px solid #C8D0D9;
         }
 
 .psui-el-table-results.layout-comparison tbody tr td .title {
@@ -2262,26 +2283,13 @@ video {
 .psui-el-table-results.layout-comparison tbody tr td:before {
             display: inline-block;
             position: absolute;
-            width: 100%;
             height: 0.5rem;
-            background-color: #ffffff ;
             left: 0;
             content: '';
             top: -8px;
-          }
-
-.psui-el-table-results.layout-comparison tbody tr td:after {
-            top: 0;
-            position: absolute;
-            height: 100%;
-            display: inline-block;
-            --bg-opacity: 1;
-            background-color: #E0EFF6;
-            background-color: rgba(224, 239, 246, var(--bg-opacity));
-            content: '';
-            width: 2px;
-            right: -2px;
-            background: linear-gradient(90deg, rgba(214,221,229,1) 50%, rgba(255,255,255,1) 50%);
+            width: calc(100% + 2px);
+            border-right: 2px solid #C8D0D9;
+            background-color: #FFF;
           }
 
 .psui-el-table-results.layout-comparison tbody tr td:first-child {
@@ -2289,22 +2297,27 @@ video {
             padding-right: 0.75rem;
             border-top-left-radius: 0.375rem;
             border-bottom-left-radius: 0.375rem;
+            border-right-width: 2px;
           }
 
-.psui-el-table-results.layout-comparison tbody tr td:first-child:after {
-              --bg-opacity: 1;
-              background-color: #E6ECF2;
-              background-color: rgba(230, 236, 242, var(--bg-opacity));
-              background-image: none;
-            }
+.psui-el-table-results.layout-comparison tbody tr td:last-child {
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+            border-top-right-radius: 0.375rem;
+            border-bottom-right-radius: 0.375rem;
+          }
 
 .psui-el-table-results.layout-comparison tbody tr.is-first td:before {
               display: none;
             }
 
 .psui-el-table-results.layout-comparison tbody tr.is-first.opened td:first-child {
-              border-bottom-left-radius: 0;
-            }
+                border-bottom-left-radius: 0;
+              }
+
+.psui-el-table-results.layout-comparison tbody tr.opened {
+          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+        }
 
 .psui-el-table-results.layout-comparison tbody tr:not(.is-first) td:first-child {
               border-top-left-radius: 0;
@@ -2936,47 +2949,40 @@ video {
   margin-bottom: 1rem;
 }
 
-.psui-el-dropdown-menu-list-item {
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    font-size: 16px;
+    margin-left: 0;
+    margin-right: 0;
+    font-size: 14px;
     line-height: 130%;
-    border-radius: 0.375rem;
     --text-opacity: 1;
     color: #515E6A;
     color: rgba(81, 94, 106, var(--text-opacity));
-    margin-left: 1rem;
-    margin-right: 1rem;
     cursor: pointer;
     transition-property: all;
   }
 
-.psui-el-dropdown-menu-list-item:hover * {
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item:hover * {
         opacity: 1 !important;
       }
 
-.psui-el-dropdown-menu-list-item.absolute-childrens {
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item.absolute-childrens {
       position: relative;
     }
 
-.psui-el-dropdown-menu-list-item.absolute-childrens .helper {
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item.absolute-childrens .helper {
         position: absolute;
         top: 0;
         right: -18px;
       }
 
-.psui-el-dropdown-menu-list-item{
-    padding: 11.5px 16px 11.5px 8px;
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item{
+    padding: 7px 20px;
 }
 
-.psui-el-dropdown-menu-list-item:hover {
-      --bg-opacity: 1;
-      background-color: #F3F6F9;
-      background-color: rgba(243, 246, 249, var(--bg-opacity));
-    }
-
-.psui-el-dropdown-menu-list-item-left-label {
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item-left-label {
       font-weight: 700;
       display: flex;
       align-items: center;
@@ -2984,50 +2990,81 @@ video {
       width: auto;
     }
 
-.psui-el-dropdown-menu-list-item-line {
-      display: flex;
-      flex: 1 1 0%;
-      border-bottom-width: 1px;
-      --border-opacity: 1;
-      border-color: #A2ACB7;
-      border-color: rgba(162, 172, 183, var(--border-opacity));
-      border-style: dashed;
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-      margin-bottom: 0.25rem;
-    }
-
-.psui-el-dropdown-menu-list-item-right-label {
-      display: flex;
-      flex: 0 1 auto;
-      width: auto;
-      font-weight: 400;
-    }
-
-.psui-el-dropdown-menu-list-item.is-selected {
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item:hover {
       --bg-opacity: 1;
       background-color: #ECF7FB;
       background-color: rgba(236, 247, 251, var(--bg-opacity));
+    }
+
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item.is-selected {
       --text-opacity: 1;
       color: #318FAC;
       color: rgba(49, 143, 172, var(--text-opacity));
+      background-color: transparent;
+    }
+
+.psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item.is-selected:hover {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item {
+      font-size: 16px;
+      line-height: 130%;
+      border-radius: 0.375rem;
+      margin-left: 1rem;
+      margin-right: 1rem;
+      padding: 11.5px 16px 11.5px 8px;
     }
 
-.psui-el-dropdown-menu-list-item.is-selected .psui-el-dropdown-menu-list-item-line {
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item:hover {
+        --bg-opacity: 1;
+        background-color: #F3F6F9;
+        background-color: rgba(243, 246, 249, var(--bg-opacity));
+      }
+
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item-line {
+        display: flex;
+        flex: 1 1 0%;
+        border-bottom-width: 1px;
         --border-opacity: 1;
-        border-color: #318FAC;
-        border-color: rgba(49, 143, 172, var(--border-opacity));
+        border-color: #A2ACB7;
+        border-color: rgba(162, 172, 183, var(--border-opacity));
+        border-style: dashed;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+        margin-bottom: 0.25rem;
       }
 
-.psui-el-dropdown-menu-list-item.is-selected:hover {
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item-right-label {
+        display: flex;
+        flex: 0 1 auto;
+        width: auto;
+        font-weight: 400;
+      }
+
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item.is-selected {
         --bg-opacity: 1;
         background-color: #ECF7FB;
         background-color: rgba(236, 247, 251, var(--bg-opacity));
-        --text-opacity: 1;
-        color: #318FAC;
-        color: rgba(49, 143, 172, var(--text-opacity));
       }
 
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item.is-selected .psui-el-dropdown-menu-list-item-line {
+          --border-opacity: 1;
+          border-color: #318FAC;
+          border-color: rgba(49, 143, 172, var(--border-opacity));
+        }
+
+.psui-el-dropdown-menu-list.layout-rich .psui-el-dropdown-menu-list-item.is-selected:hover {
+          --bg-opacity: 1;
+          background-color: #ECF7FB;
+          background-color: rgba(236, 247, 251, var(--bg-opacity));
+          --text-opacity: 1;
+          color: #318FAC;
+          color: rgba(49, 143, 172, var(--text-opacity));
+        }
+
 .psui-el-slider .psui-el-slider-label {
     margin-bottom: 0.5rem;
   }

package/package.json

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

package/src/assets/scss/base.scss

@@ -97,5 +97,5 @@ html {
 }
 
 .psui-transition {
-  @apply .psui-transition-all .psui-ease-in-out .psui-duration-150;
+  @apply psui-transition-all psui-ease-in-out psui-duration-150;
 }

package/src/assets/scss/components/PsDropdownList.scss

@@ -2,35 +2,54 @@
   .psui-el-dropdown-menu-list {
     @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4;
 
-    &-item {
-      @apply psui-flex psui-items-end psui-justify-between psui-text-p psui-rounded-md psui-text-gray-60 psui-mx-4 psui-cursor-pointer psui-transition-all psui-show-childrens-on-hover;
-      padding: 11.5px 16px 11.5px 8px;
-
-      &:hover {
-        @apply psui-bg-gray-10;
-      }
+    .psui-el-dropdown-menu-list-item {
+      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all psui-show-childrens-on-hover;
+      padding: 7px 20px;
 
       &-left-label {
         @apply psui-font-bold psui-flex psui-items-center psui-flex-initial psui-w-auto;
       }
 
-      &-line {
-        @apply psui-flex psui-flex-1 psui-border-b psui-border-gray-40 psui-border-dashed psui-mx-2 psui-mb-1;
-      }
-
-      &-right-label {
-        @apply psui-flex psui-flex-initial psui-w-auto psui-font-normal;
+      &:hover {
+        @apply psui-bg-blue-10;
       }
 
       &.is-selected {
-        @apply psui-bg-blue-10 psui-text-blue-60;
+        @apply psui-text-blue-60 psui-bg-transparent;
 
-        .psui-el-dropdown-menu-list-item-line {
-          @apply psui-border-blue-60;
+        &:hover {
+          @apply psui-text-blue-60;
         }
+      }
+    }
+
+    &.layout-rich {
+      .psui-el-dropdown-menu-list-item {
+        @apply psui-text-p psui-rounded-md psui-mx-4;
+        padding: 11.5px 16px 11.5px 8px;
 
         &:hover {
-          @apply psui-bg-blue-10 psui-text-blue-60;
+          @apply psui-bg-gray-10;
+        }
+
+        &-line {
+          @apply psui-flex psui-flex-1 psui-border-b psui-border-gray-40 psui-border-dashed psui-mx-2 psui-mb-1;
+        }
+
+        &-right-label {
+          @apply psui-flex psui-flex-initial psui-w-auto psui-font-normal;
+        }
+
+        &.is-selected {
+          @apply psui-bg-blue-10;
+
+          .psui-el-dropdown-menu-list-item-line {
+            @apply psui-border-blue-60;
+          }
+
+          &:hover {
+            @apply psui-bg-blue-10 psui-text-blue-60;
+          }
         }
       }
     }

package/src/assets/scss/components/PsTableResults.scss

@@ -58,8 +58,8 @@
   
               > div {
                 @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
-                padding-top: 11px;
-                padding-bottom: 11px;
+                padding-top: 0.688rem;
+                padding-bottom: 0.688rem;
               }
             }
   
@@ -88,8 +88,8 @@
   
           td {
             @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-small;
-            padding-top: 11px;
-            padding-bottom: 11px;
+            padding-top: 0.688rem;
+            padding-bottom: 0.688rem;
             min-height: 41.5px;
   
             > div {
@@ -135,7 +135,7 @@
 
     &.layout-comparison {
       @apply psui-border-separate;
-      border-spacing: 2px 8px;
+      border-spacing: 0px 8px;
 
       tr {
         th, td {
@@ -144,7 +144,7 @@
       }
 
       thead {
-        @apply psui-bg-transparent psui-items-start;
+        @apply psui-bg-gray-20 psui-items-start;
 
         div {
           @apply psui-relative;
@@ -157,8 +157,8 @@
   
           th {
             @apply psui-px-6 psui-py-4 psui-text-gray-50 psui-text-center psui-align-top;
-            padding-top: 13px;
-            padding-bottom: 13px;
+            padding-top: 0.688rem;
+            padding-bottom: 0.188rem;
             min-width: 200px;
   
             .description {
@@ -169,39 +169,50 @@
 
           &:not(:first-of-type) {
             th {
-
               &:after {
-                @apply psui-absolute psui-top-0 psui-h-full psui-inline-block psui-bg-gray-30 psui-w-px;
+                @apply psui-absolute psui-top-0 psui-right-0 psui-inline-block psui-w-px;
                 content: '';
-                right: -1px;
+                height: calc(100% + 0.5rem);
+                background-color: #C3CAD1;
+              }
+
+              &:last-child:after { 
+                display: none; 
               }
             }
           }
   
           &:first-of-type {
             th {
-              @apply psui-text-left psui-text-gray-50 psui-text-p;
-              padding-top: 11px;
-              padding-bottom: 11px;
+              @apply psui-text-left psui-text-gray-50 psui-text-p psui-px-6;
+              padding-top: 7px;
+              padding-bottom: 7px;
+
+              &:after {
+                @apply psui-absolute psui-top-0 psui-right-0 psui-inline-block;
+                content: '';
+                width: 1px;
+                height: calc(100% + 0.5rem);
+                background-color: #C3CAD1;
+              }
 
               &:first-child {
-                @apply psui-pl-0 psui-pt-4;
+                @apply psui-align-middle;
+                padding-left: 22px;
                 min-width: 240px;
 
                 .title {
-                  @apply psui-text-gray-80 psui-font-bold;
+                  @apply psui-text-h6 psui-text-gray-80 psui-font-bold;
                 }
-              }
 
-              &:not(:first-child) {
-                &:before {
-                  @apply psui-inline-block psui-absolute psui-top-0 psui-left-0 psui-w-full;
-                  content: '';
-                  background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF2 100%);
-                  border-radius: 12px 12px 0px 0px;
-                  height: 5.5rem;
+                &:after {
+                  width: 2px;
                 }
               }
+
+              &:last-child:after { 
+                display: none; 
+              }
             }
   
             p {
@@ -218,8 +229,11 @@
 
       tbody {
         tr {
+          @apply psui-transition-all psui-ease-in-out psui-duration-150 psui-shadow-elevation-5;
+
           td {
-            @apply psui-bg-white psui-relative psui-shadow-elevation-5;
+            @apply psui-relative;
+            border-right: 1px solid #C8D0D9;
 
             .title {
               @apply psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
@@ -233,25 +247,20 @@
             }
 
             &:before {
-              @apply psui-inline-block psui-absolute psui-w-full psui-h-2 psui-bg-white psui-left-0;
+              @apply psui-inline-block psui-absolute psui-h-2 psui-left-0;
               content: '';
               top: -8px;
-            }
-
-            &:after {
-              @apply psui-top-0 psui-absolute psui-h-full psui-inline-block psui-bg-blue-20;
-              content: '';
-              width: 2px; 
-              right: -2px;
-              background: linear-gradient(90deg, rgba(214,221,229,1) 50%, rgba(255,255,255,1) 50%);
+              width: calc(100% + 2px);
+              border-right: 2px solid #C8D0D9;
+              background-color: #FFF;
             }
 
             &:first-child {
               @apply psui-px-3 psui-rounded-tl-md psui-rounded-bl-md;
-
-              &:after {
-                @apply psui-bg-gray-20 psui-bg-none;
-              }
+              border-right-width: 2px;
+            }
+            &:last-child {
+              @apply psui-px-3 psui-rounded-tr-md psui-rounded-br-md;
             }
           }
 
@@ -263,12 +272,18 @@
             }
 
             &.opened {
-              td:first-child {
-                @apply psui-rounded-bl-none;
+              td {
+                &:first-child {
+                  @apply psui-rounded-bl-none;
+                }
               }
             }
           }
 
+          &.opened {
+            @apply psui-shadow-elevation-20;
+          }
+
           &:not(.is-first) {
             td {
               &:first-child {

package/src/components/controls/PsCheckboxSimple.vue

@@ -42,6 +42,7 @@
     <label 
       :for="getInputId"
       class="psui-el-checkmark"
+      :title="label"
     >
       <slot name="content">
         <span>{{ label }}</span>

package/src/components/forms/PsDropdownList.vue

@@ -15,6 +15,7 @@
     >
       <div class="psui-el-dropdown-menu-list-item-left-label">
         {{ getLeftLabel(item) }}
+        
         <div
           v-if="item.description"
           class="psui-font-normal psui-text-gray-50 psui-ml-1"
@@ -31,26 +32,29 @@
           @click.native.stop="$eventBus.$emit('openDescriptionModal', { type: item.hasHelper.type, id: item.hasHelper.id, slug: item.hasHelper.slug })"
         />
       </div>
-      <div class="psui-el-dropdown-menu-list-item-line" />
-      <div 
-        v-if="rightLabelFormatter"
-        class="psui-el-dropdown-menu-list-item-rigth-label"
-      >
-        {{ rightLabelFormatter(item.key, getStudyDataLevel[item.key], getStudyDataLevel) }}
-      </div>
-      <div 
-        v-else
-        class="psui-el-dropdown-menu-list-item-rigth-label"
-      >
-        {{ getRightLabel(item) }}
-      </div>
+
+      <template v-if="layout == 'rich'">
+        <div class="psui-el-dropdown-menu-list-item-line" />
+        <div 
+          v-if="rightLabelFormatter"
+          class="psui-el-dropdown-menu-list-item-rigth-label"
+        >
+          {{ rightLabelFormatter(item.key, getStudyDataLevel[item.key], getStudyDataLevel) }}
+        </div>
+        <div 
+          v-else
+          class="psui-el-dropdown-menu-list-item-rigth-label"
+        >
+          {{ getRightLabel(item) }}
+        </div>
+      </template>
     </li>
   </ul>  
 </template>
 
 <script>
 import PsIcon from '../ui/PsIcon.vue'
-export const itemStyle = ['default', 'radio', 'icon', 'checkbox', 'switch', 'rich']
+export const itemStyle = ['onlytext', 'radio', 'icon', 'checkbox', 'switch', 'rich']
 
 export default {
   name: 'PsDropdownList',
@@ -61,7 +65,7 @@ export default {
      */
     layout: {
       type: String,
-      default: 'default',
+      default: 'onlytext',
       validator: (value) => {
         return itemStyle.indexOf(value) !== -1
       }
@@ -76,7 +80,7 @@ export default {
     * It sets the items which will be displayed on the dropdown menu.
      */
     items: {
-      type: Array,
+      type: [Array, Object],
       required: true
     },
     /**

package/src/components/table-results/PsTableResults.vue

@@ -28,6 +28,7 @@
             `${item.type}`
           ]"
           :id=" item.id"
+          :data-group="item.id"
           @mouseenter="onRowHover(index)"
           @mouseleave="onRowHover(false)"
         >
@@ -540,13 +541,13 @@ export default {
     onCloseSelectRow(item) {
       this.$eventBus.$emit('resetPolicyImpactItemSelected', item)
     },
-    isSelectedRow(column,item){
+    isSelectedRow(column,item) {
       if(!item.id){
         return this.selectedRow === item.id && this.columnSelectedKey == column.key
       }
       return column.hasProjections && !item.is_disabled && this.selectedRow == item.id && this.columnSelectedKey == column.key
     },
-    getBackgroundColor(value){
+    getBackgroundColor(value) {
       if(value && value.includes('psui-bg-')) {
         return tailwindConfig.theme.colors[value.replace('psui-bg-', '')]
       }

package/src/components/table-results/PsTableResultsHeadComparison.vue

@@ -5,8 +5,8 @@
         <div v-if="firstColumnTitle">
           <p class="title">{{ firstColumnTitle }}</p>
         </div>
-        <div>
-          <p v-if="firstColumnDescription" class="description">{{ firstColumnDescription }}</p>
+        <div v-if="firstColumnDescription">
+          <p class="description">{{ firstColumnDescription }}</p>
         </div>
       </th>
       
@@ -33,8 +33,7 @@
       <template v-for="columnGroup of header">
         <th 
           v-for="column of columnGroup.columns" 
-          :key="`${columnGroup.key}-${column.key}`" 
-          :style="`--dataCount: ${columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )};`"
+          :key="`${columnGroup.key}-${column.key}`"
         >
           <div class="psui-flex psui-flex-col psui-justify-center psui-items-center psui-text-center">
             <div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">

package/src/stories/DropdownList.stories.js

@@ -22,22 +22,75 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdownList },
   data: () => ({
-    selected: item
+    selected: item,
+    onlyTextItems: onlyTextItems,
+    richItems: richItems,
   }),
   template: `
-    <div style="width:100%;" class="psui-flex psui-space-x-10">
-      <PsDropdownList 
-        v-bind="$props" 
-        :selected.sync="selected" 
-        left-label="title"
-        key-value="key" 
-        :study-data="study_data" 
-      />
+    <div style="width:100%;" class="psui-flex psui-gap-8 psui-bg-gray-20 psui-rounded-xl psui-p-10">
+      <div class="psui-w-1/2">
+        <p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">OnlyText</p>
+
+        <div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
+          <PsDropdownList 
+            v-bind="$props" 
+            :items="onlyTextItems"
+            :selected.sync="selected" 
+            left-label="title"
+            key-value="key" 
+            layout="onlytext"
+            :study-data="study_data" 
+          />
+        </div>
+      </div>
+
+      <div class="psui-w-1/2">
+        <p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">Rich</p>
+
+        <div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
+          <PsDropdownList 
+            v-bind="$props" 
+            :items="richItems"
+            :selected.sync="selected" 
+            left-label="title"
+            key-value="key" 
+            layout="rich"
+            :study-data="study_data" 
+          />
+        </div>
+      </div>
     </div>
   `,
 })
 
-const items = [
+const onlyTextItems = [
+  {
+    'key': 'item_01',
+    'title': 'Dropdown Item',
+  },
+  {
+    'key': 'item_02',
+    'title': 'Dropdown Item',
+  },
+  {
+    'key': 'item_03',
+    'title': 'Dropdown Item',
+  },
+  {
+    'key': 'item_04',
+    'title': 'Dropdown Item',
+  },
+  {
+    'key': 'item_05',
+    'title': 'Dropdown Item',
+  },
+  {
+    'key': 'item_06',
+    'title': 'Dropdown Item',
+  },
+]
+
+const richItems = [
   {
     'isActive': true,
     'key': 'forecast_units_affected',
@@ -141,7 +194,7 @@ const items = [
     }
   }
 ]
-const item = items[0]
+const item = richItems[0]
 const studyData = {
   'forecast_units_affected': 7001.75,
   'forecast_emissions_savings': 17575.66588897,
@@ -153,6 +206,6 @@ const studyData = {
 
 export const DropdownList = Template.bind({})
 DropdownList.args = {
-  items: items,
+  items: onlyTextItems,
   study_data: studyData,
 }

package/src/stories/TableResults.stories.js

@@ -56,7 +56,7 @@ const TableResults = (args, { argTypes }) => ({
             <PsTableResultsHeadComparison
               v-bind="$props"
               first-column-title="Comparing 4 Policies"
-              first-column-description="add your description here"
+              first-column-description=""
               :header="comparisonColumnGroups"
             />
           </template>