@policystudio/policy-studio-ui-vue 1.2.0-access.1 → 1.2.0-access.10

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

@@ -8,7 +8,7 @@
   }
 
   .psui-el-table-results {
-    @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-p;
+    @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-16;
 
     .is-warning-column {
       padding-right: 12px;
@@ -45,7 +45,7 @@
   
         tr {
           .title {
-            @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
+            @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
           }
   
           th {
@@ -83,7 +83,7 @@
             }
   
             p {
-              @apply psui-text-p;
+              @apply psui-text-16;
               line-height: 18px;
             }
           }
@@ -106,7 +106,7 @@
           }
   
           td {
-            @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-small;
+            @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14;
             padding-top: 0.688rem;
             padding-bottom: 0.688rem;
             min-height: 41.5px;
@@ -177,7 +177,7 @@
   
         tr {
           .title {
-            @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
+            @apply psui-text-14 psui-font-bold psui-leading-4 psui-text-gray-80;
           }
   
           th {
@@ -210,7 +210,7 @@
   
           &:first-of-type {
             th {
-              @apply psui-text-left psui-text-gray-50 psui-text-p psui-px-6;
+              @apply psui-text-left psui-text-gray-50 psui-text-16 psui-px-6;
               padding-top: 7px;
               padding-bottom: 7px;
 
@@ -242,7 +242,7 @@
             }
   
             p {
-              @apply psui-text-small;
+              @apply psui-text-14;
               line-height: 18px;
 
               &.title {
@@ -267,7 +267,7 @@
             }
 
             .title {
-              @apply psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
+              @apply psui-text-14 psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
               width: 144px;
             }
 
@@ -373,7 +373,7 @@
   
         tr {
           .title {
-            @apply psui-text-small psui-leading-4;
+            @apply psui-text-14 psui-leading-4;
           }
 
           th {
@@ -431,7 +431,7 @@
             }
   
             p {
-              @apply psui-text-p;
+              @apply psui-text-16;
               line-height: 18px;
             }
           }
@@ -516,7 +516,7 @@
 
   
           td {
-            @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-small;            
+            @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-14;            
 
             &.hover-color {
               background-color: #ECF7FB !important;
@@ -736,7 +736,7 @@
               padding-bottom: 9px;
               
               .title {
-                @apply psui-text-small psui-text-gray-50;
+                @apply psui-text-14 psui-text-gray-50;
               }
             }
 

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

@@ -10,7 +10,7 @@
     }
 
     &-description {
-      @apply psui-text-p psui-text-blue-80 psui-italic;
+      @apply psui-text-16 psui-text-blue-80 psui-italic psui-leading-6;
       margin-bottom: 33px;
     }
 
@@ -18,12 +18,12 @@
       @apply psui-flex psui-flex-col psui-mt-auto;
 
       &-user {
-        @apply psui-mb-1 psui-text-blue-80 psui-text-small psui-font-bold;
+        @apply psui-mb-1 psui-text-blue-80 psui-text-14 psui-font-bold;
       }
 
       &-position,
       &-jurisdiction {
-        @apply psui-text-gray-50 psui-text-small;    
+        @apply psui-text-gray-50 psui-text-14 psui-leading-[130%];    
       }
     }
   }

package/src/assets/scss/components/PsToast.scss

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-toast {
-        @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
+        @apply psui-flex psui-items-center psui-text-16 psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
 
         &:focus {
         outline: none;

package/src/assets/scss/components/PsToggle.scss

@@ -7,7 +7,7 @@
     border-radius: 4px;
 
     button {
-      @apply transition-default psui-inline-flex psui-text-small psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
+      @apply transition-default psui-inline-flex psui-text-14 psui-bg-gray-10 psui-text-blue-60 psui-outline-none psui-align-middle;
       border-radius: 4px;
       padding:1px 8px;
 

package/src/assets/scss/components/_PsTableResults.scss

@@ -1,7 +1,7 @@
 @layer components{
 
   .psui-el-table-results {
-    @apply .psui-w-full psui-overflow-auto .psui-text-small;
+    @apply .psui-w-full psui-overflow-auto psui-text-14;
 
     &-header,
     &-row {
@@ -13,7 +13,7 @@
       
 
       .title {
-        @apply .psui-text-p .psui-font-bold .psui-text-gray-80 .psui-border-b .psui-border-gray-30;
+        @apply psui-text-16 .psui-font-bold .psui-text-gray-80 .psui-border-b .psui-border-gray-30;
         padding-top: 0.688rem;
         padding-bottom: 0.688rem;
       }
@@ -29,7 +29,7 @@
         }
 
         h6 {
-          @apply .psui-text-small .psui-font-bold .psui-text-gray-80 .psui-leading-4;
+          @apply psui-text-14 .psui-font-bold .psui-text-gray-80 .psui-leading-4;
         }
 
         p {

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/buttons/PsButton.vue

@@ -7,9 +7,9 @@
     :class="[getComponentClass, { hover: isHover && !disabled}, { disabled: disabled || loading }]"
   >
     <svg
-      v-if="loading"
-      class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
-      :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
+      v-if="loading && showLoadingLeft"
+      class="psui-animate-spin psui-h-5 psui-w-5 psui-text-black"
+      :class="iconLeft ? 'icon-left-side' : 'psui-mr-2'"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -28,12 +28,43 @@
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
+
     <i
-      v-else-if="icon"
-      :class="iconClass"
+      v-else-if="iconLeft"
+      :class="[iconLeftClass, 'icon-left-side']"
       class="material-icons-round"
-    >{{ icon }}</i>
+    >{{ iconLeft }}</i>
+    
     <span v-if="label">{{ label }}</span>
+
+    <svg
+      v-if="loading && showLoadingRight"
+      class="psui-animate-spin psui-h-5 psui-w-5 psui-text-black"
+      :class="iconRight ? 'icon-right-side' : 'psui-ml-2'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="psui-opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="psui-opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+
+    <i
+      v-else-if="iconRight"
+      :class="[iconRightClass, 'icon-right-side']"
+      class="material-icons-round"
+    >{{ iconRight }}</i>
   </button>
 </template>
 
@@ -54,19 +85,26 @@ const props = defineProps({
     default: 'solid',
     validator: (value) => ['solid', 'outline', 'ghost', 'onlytext', 'caution'].includes(value),
   },
-  icon: {
+  iconLeft: {
     type: String,
     default: '',
   },
-  iconPosition: {
+  iconLeftClass: {
     type: String,
-    default: 'left',
-    validator: (value) => ['left', 'right'].includes(value),
+    default: '',
+  },
+  iconRight: {
+    type: String,
+    default: '',
+  },
+  iconRightClass: {
+    type: String,
+    default: '',
   },
   size: {
     type: String,
     default: 'big',
-    validator: (value) => ['small', 'medium', 'big'].includes(value),
+    validator: (value) => ['compact', 'small', 'medium', 'big'].includes(value),
   },
   disabled: {
     type: Boolean,
@@ -76,18 +114,37 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  iconClass: {
+  loadingPosition: {
     type: String,
-    default: '',
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value),
   },
 })
 
+const showLoadingLeft = computed(() => {
+  if (props.iconLeft) return true
+  if (!props.iconLeft && !props.iconRight && props.loadingPosition === 'left') return true
+  return false
+})
+
+const showLoadingRight = computed(() => {
+  if (props.iconRight) return true
+  if (!props.iconLeft && !props.iconRight && props.loadingPosition === 'right') return true
+  return false
+})
+
 const getComponentClass = computed(() => {
-  if (props.icon) {
-    return `layout-${props.layout} size-${props.size} icon-${props.iconPosition}`
-  } else {
-    return `layout-${props.layout} size-${props.size}`
+  const classes = [`layout-${props.layout}`, `size-${props.size}`]
+  
+  if (props.iconLeft && props.iconRight) {
+    classes.push('icon-both')
+  } else if (props.iconLeft) {
+    classes.push('icon-left')
+  } else if (props.iconRight) {
+    classes.push('icon-right')
   }
+  
+  return classes.join(' ')
 })
 
 const onClick = (event) => {

package/src/components/chips/PsChips.vue

@@ -11,8 +11,8 @@
     @mouseover="isHovering = true"
     @mouseleave="isHovering = false"
     @click="emit('click')"
-    tabindex="0"
-    :role="type === 'button' ? 'button' : undefined"
+    :tabindex="isNested ? -1 : 0"
+    :role="type === 'button' && !isNested ? 'button' : undefined"
   >
     <input
       @change="onChange"
@@ -133,6 +133,14 @@ const props = defineProps({
   disabledText: {
     type: String,
     default: '',
+  },
+  /**
+   * When true, removes tabindex and role attributes to avoid nested interactive controls.
+   * Use this when the chip is placed inside another interactive element like a button.
+   */
+  isNested: {
+    type: Boolean,
+    default: false,
   }
 })
 

package/src/components/navigations/PsBreadcrumb.vue

@@ -58,7 +58,7 @@ defineProps({
    */
   liClass: {
     type: String,
-    default: 'psui-text-small psui-text-gray-60',
+    default: 'psui-text-14 psui-text-gray-60',
   },
 })
 

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

@@ -74,7 +74,7 @@
                 />
 
                 <div v-if="item.is_appended">
-                  <span class="psui-text-small psui-font-bold psui-text-blue-60 psui-ml-2">
+                  <span class="psui-text-14 psui-font-bold psui-text-blue-60 psui-ml-2">
                     {{ item.title }}
                   </span>
                 </div>
@@ -189,7 +189,7 @@
                         class="psui-text-gray-60 hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3 psui-px-5 psui-py-1 transition-all"
                         @click="executeCallback(item, action)"
                       >
-                        <span class="psui-w-auto psui-text-small">{{ action.title }}</span>
+                        <span class="psui-w-auto psui-text-14">{{ action.title }}</span>
                       </li>
                     </ul>
                   </template>

package/tailwind.config.js

@@ -1,19 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 
+//This sizemap is to use until we switch everthing to new design system format
+const sizeMap = {
+  14: ['14px'],
+  16: ['16px'],
+  18: ['18px'],
+  20: ['20px'],
+  28: ['28px']
+}
+
 export default {
   prefix: 'psui-',
-  content: [
-    './index.html',
-    './src/**/*.vue',
-    './src/**/*.js',
-    './src/**/*.ts',
-    './src/**/*.jsx',
-    './src/**/*.tsx',
-  ],
+  content: ['./index.html', './src/**/*.vue', './src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
   darkMode: 'media', // or 'media' or 'class'
   theme: {
     colors: {
-      'white': '#ffffff ',
+      white: '#ffffff',
       'gray-10': '#F3F6F9',
       'gray-20': '#E6ECF2',
       'gray-30': '#D6DDE5',
@@ -23,29 +25,32 @@ export default {
       'gray-70': '#34404A',
       'gray-80': '#28323B',
 
-      'blue': '#5094D3',
+      blue: '#5094D3',
       'blue-10': '#ECF7FB',
       'blue-20': '#E0EFF6',
-      'blue-50': '#64B5CE',
-      'blue-60': '#318FAC',
+      'blue-30': '#BEDCEB',
+      'blue-40': '#86C0DB',
+      'blue-50': '#2DA5CC',
+      'blue-60': '#127999',
+      'blue-65': '#0A6480',
       'blue-70': '#00465F',
       'blue-80': '#002A3A',
 
       'green-10': '#DEF8E8',
-      'green-20': '#5DB883',
+      'green-20': '#9BDEB5',
       'green-70': '#44A06A',
-      'green-80': '#286943',
+      'green-80': '#0E7C45',
 
       'yellow-10': '#FDF3E3',
-      'yellow-20': '#EDAB3E',
+      'yellow-20': '#D7A556',
       'yellow-70': '#B87305',
-      'yellow-80': '#834C0D',
+      'yellow-80': '#B85614',
 
       'red-10': '#FCEBEB',
       'red-15': '#EAC5C5',
-      'red-20': '#D65C5A',
+      'red-20': '#CD9B9B',
       'red-70': '#AA3937',
-      'red-80': '#832F2E',
+      'red-80': '#A23634',
 
       sky: '#518BE2',
       teal: '#57C0BA',
@@ -54,121 +59,96 @@ export default {
       orange: '#FF906D',
       pink: '#FF77B8',
       purple: '#9278C9',
-      transparent: 'transparent',
+      transparent: 'transparent'
+    },
+    backgroundImage: {
+      'gradient-emerald': 'linear-gradient(270deg, #5DB883 0%, #28B08E 100%)'
     },
     fontFamily: {
-      sans: ['Lato', 'sans-serif'],
+      sans: ['Lato', 'sans-serif']
     },
     fontSize: {
-      big: ['16px', '130%'],
-      small: ['14px', '130%'],
+      ...sizeMap,
+
+      big: sizeMap['16'],
+      small: sizeMap['14'],
       xsmall: ['12px', '130%'],
-      accent: ['14px', { lineHeight: '130%', letterSpacing: '0.6px' }],
+      accent: sizeMap['14'],
       accentSmall: ['12px', { lineHeight: '130%', letterSpacing: '0.6px' }],
-      p: ['16px', '130%'],
-      h1: ['28px', '130%'],
+      p: sizeMap['16'],
+      h1: sizeMap['28'],
       h2: ['24px', '130%'],
       h3: ['22px', '120%'],
-      h4: ['20px', '120%'],
-      h5: ['18px', '120%'],
-      h6: ['17px', '120%'],
+      h4: sizeMap['20'],
+      h5: sizeMap['18'],
+      h6: ['17px', '120%']
     },
     boxShadow: {
-      'elevation--5':
-        '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      'elevation-5':
-        '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      'elevation-10':
-        '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
-      'elevation-20':
-        '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
-      'elevation-30':
-        '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
-      'elevation-40':
-        '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
+      'elevation--5': '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      'elevation-5': '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      'elevation-10': '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      'elevation-20': '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
+      'elevation-30': '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
+      'elevation-40': '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
       sm: '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      default:
-        '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      default: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
       md: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
       lg: '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
       xl: '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
       inner: '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      none: 'none',
+      none: 'none'
     },
     borderColor: (theme) => ({
       ...theme('colors'),
-      DEFAULT: theme('colors.blue-70', 'currentColor'),
+      DEFAULT: theme('colors.blue-70', 'currentColor')
     }),
     divideColor: (theme) => ({
-      ...theme('colors'),
+      ...theme('colors')
     }),
     extend: {
       divideOpacity: {
         10: '0.1',
         20: '0.2',
-        95: '0.95',
+        95: '0.95'
       },
       cursor: {
-        'grab': 'grab',
-        'grabbing': 'grabbing'
+        grab: 'grab',
+        grabbing: 'grabbing'
       },
       zIndex: {
-        '15': '15',
+        15: '15'
       },
       space: {
-        '0.5': '0.125rem',
+        0.5: '0.125rem'
       },
       margin: {
-        '0.5': '0.125rem',
+        0.5: '0.125rem'
       },
       padding: {
-        '0.5': '0.125rem',
+        0.5: '0.125rem'
       },
-      inset:{
+      inset: {
         '-1': '-1rem',
         '-2': '-0.5rem'
       }
     },
     screens: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px'
     }
   },
   variants: {
     boxShadow: ['active'],
     borderRadius: ['last', 'first'],
-    backgroundColor: [
-      'responsive',
-      'hover',
-      'active',
-      'focus',
-      'group-hover',
-      'even',
-      'first',
-      'disabled',
-      'checked',
-    ],
-    textColor: [
-      'responsive',
-      'hover',
-      'active',
-      'focus',
-      'group-hover',
-      'first',
-      'disabled',
-      'checked',
-    ],
-    borderColor: [
-      'disabled',
-      'hover',
-      'checked'
-    ],
+    backgroundColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'even', 'first', 'disabled', 'checked'],
+    textColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'first', 'disabled', 'checked'],
+    borderColor: ['disabled', 'hover', 'checked'],
     space: ['responsive', 'hover', 'focus', 'first'],
     padding: ['responsive', 'hover', 'focus', 'first'],
-    extend: {},
+    extend: {}
   },
-  plugins: [],
+  plugins: []
 }