@policystudio/policy-studio-ui-vue 1.2.0-access.2 → 1.2.0-access.21

package/src/components/buttons/PsButton.vue

@@ -1,5 +1,11 @@
 <template>
-  <button
+  <component
+    :is="href ? 'a' : 'button'"
+    v-bind="$attrs"
+    :href="href || undefined"
+    :target="target || undefined"
+    :rel="target === '_blank' ? 'noopener noreferrer' : undefined"
+    :aria-label="ariaLabel || undefined"
     @click="onClick($event)"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
@@ -7,9 +13,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-text-black"
+      :class="[loadingSizeClass, iconLeft ? 'icon-left-side' : 'psui-mr-2']"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -28,13 +34,44 @@
         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>
-  </button>
+
+    <svg
+      v-if="loading && showLoadingRight"
+      class="psui-animate-spin psui-text-black"
+      :class="[loadingSizeClass, 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>
+  </component>
 </template>
 
 <script setup>
@@ -52,21 +89,46 @@ const props = defineProps({
   layout: {
     type: String,
     default: 'solid',
-    validator: (value) => ['solid', 'outline', 'ghost', 'onlytext', 'caution'].includes(value),
+    validator: (value) => [
+      'solid', 
+      'outline', 
+      // 'ghost',
+      'onlytext', 
+      'caution'
+    ].includes(value),
   },
-  icon: {
+  href: {
     type: String,
     default: '',
   },
-  iconPosition: {
+  target: {
     type: String,
-    default: 'left',
-    validator: (value) => ['left', 'right'].includes(value),
+    default: '',
+  },
+  ariaLabel: {
+    type: String,
+    default: '',
+  },
+  iconLeft: {
+    type: String,
+    default: '',
+  },
+  iconLeftClass: {
+    type: String,
+    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 +138,47 @@ 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 loadingSizeClass = computed(() => {
+  const sizeMap = {
+    compact: 'psui-h-3.5 psui-w-3.5',
+    small: 'psui-h-4 psui-w-4',
+    medium: 'psui-h-[18px] psui-w-[18px]',
+    big: 'psui-h-5 psui-w-5',
+  }
+  return sizeMap[props.size] || sizeMap.big
+})
+
 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/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/src/components/ui/PsIcon.vue

@@ -83,10 +83,11 @@ const props = defineProps({
     type: String,
     default: null,
     validator: (value) => {
-      return (
-        (value?.includes('psui-text-') && typeof tailwindConfig.theme.colors[value.replace('psui-text-', '')] != 'undefined') ||
-        typeof tailwindConfig.theme.colors[value] != 'undefined'
-      )
+      if (value === null || value === undefined || value === '') return true
+      const colors = tailwindConfig?.theme?.colors
+      if (!colors) return true
+      const colorKey = value?.replace(/^(psui-)?text-/, '')
+      return typeof colors[colorKey] !== 'undefined'
     },
   },
   /**
@@ -143,8 +144,12 @@ const getIconClasses = computed(() => {
 })
 
 const getColor = computed(() => {
+  if (!props.color) return null
   if (getIconType.value === 'material-icons') return props.color
-  return tailwindConfig.theme.colors[props.color.replace('psui-text-', '')] || tailwindConfig.theme.colors[props.color]
+  const colors = tailwindConfig?.theme?.colors
+  if (!colors) return null
+  const colorKey = props.color.replace(/^(psui-)?text-/, '')
+  return colors[colorKey] || null
 })
 
 watch(

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', { lineHeight: '20px' }],
+  16: ['16px', { lineHeight: '24px' }],
+  18: ['18px', { lineHeight: '24px' }],
+  20: ['20px', { lineHeight: '28px' }],
+  28: ['28px', { lineHeight: '36px' }]
+}
+
 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,33 @@ 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-60': '#584C25',
       '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',
@@ -55,120 +61,97 @@ export default {
       pink: '#FF77B8',
       purple: '#9278C9',
       transparent: 'transparent',
+      'focus-ring': '#2563EB'
+    },
+    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: []
 }