@usssa/component-library 1.0.0-alpha.13 → 1.0.0-alpha.130

package/README.md

@@ -1,13 +1,16 @@
-# Component Library v1.0.0-alpha.13
+# Component Library v1.0.0-alpha.130
 
-This library provides custom UI components for USSSA applications.
+**This library provides custom UI components for USSSA applications.**
 
 ## Installation
 
 1. Install the packge using command 'yarn'
 2. Go to specific page where you want to use a component from that library.
-   a. Import the library in your Quasar project: `import { UBtnStd } from 'component-library'`
+   a. Import the component in your project: `import { UBtnStd } from '@usssa/component-library'`
    b. Use the BtnStd component in your Nuxt app: `<UBtnStd label="Test" size="lg" />`
+3. We need to import below file to support component library styling in our project
+   a. @import '@usssa/component-library/src/css/app.sass'
+   b. @import '@usssa/component-library/src/css/quasar.variables.sass'
 
 ## Development
 

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.130",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",
   "main": "src/components/index.js",
   "files": [
-    "src/components",
+    "src/assets",
     "src/composables",
-    "README.md"
+    "src/components",
+    "src/css",
+    "src/utils",
+    "README.md",
+    "package.json"
   ],
   "publishConfig": {
     "access": "public"
@@ -21,10 +25,19 @@
     "deploy": "firebase deploy",
     "dev": "quasar dev",
     "build": "quasar build",
-    "start": "node --experimental-detect-module index.js"
+    "start": "node --experimental-detect-module index.js",
+    "test:component:ci": "cypress run --component",
+    "test:component": "cypress open --component"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/usssa-org/component-library.git"
   },
   "dependencies": {
+    "@fawmi/vue-google-maps": "^0.9.79",
     "@quasar/extras": "^1.16.4",
+    "@usssa/core-client": "^0.0.18",
+    "algoliasearch": "4",
     "flag-icons": "^7.2.3",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
@@ -32,7 +45,10 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.0",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.1.0",
     "autoprefixer": "^10.4.2",
+    "cypress": "^13.17.0",
+    "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
@@ -40,6 +56,7 @@
     "postcss": "^8.4.14",
     "prettier": "^2.5.1",
     "semantic-release": "^24.1.0",
+    "vite-plugin-alias": "^0.1.1",
     "vite-plugin-checker": "^0.6.4"
   },
   "engines": {
@@ -51,5 +68,6 @@
   "bugs": {
     "url": "https://github.com/usssa-org/component-library/issues"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/assets/logo.svg

@@ -0,0 +1,19 @@
+<svg width="95" height="24" viewBox="0 0 95 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Lettering">
+<path d="M3.80408 2.66675H8.95923L4.80595 13.2946L11.6168 13.2333L15.8059 2.66675H20.8L16.7704 12.978C15.8482 15.3379 13.5896 16.889 11.0754 16.889H3.24023L3.23972 16.8853C0.95221 16.7796 -0.597379 14.4417 0.221722 12.2504L3.80408 2.66675Z" fill="#234BA9"/>
+<path d="M25.3431 2.66675C24.1871 2.66675 23.1592 3.40891 22.7861 4.5129L22.2017 6.24262L21.3962 8.1931L20.9479 9.20419C20.5153 10.1799 21.2229 11.2814 22.2822 11.2814H30.0955L29.3215 13.3117H19.4306L17.9807 16.8876H30.4658C31.6432 16.8876 32.7118 16.1933 33.199 15.1119L34.01 13.3117H33.9934L34.7674 11.2814H34.7746L35.0296 10.6669C35.5176 9.49105 34.6615 8.1931 33.398 8.1931H26.3902L27.1957 6.24262H36.3783L37.8282 2.66675H25.3431Z" fill="#234BA9"/>
+<path d="M65.9075 2.66675C64.7515 2.66675 63.7235 3.40891 63.3505 4.5129L62.7661 6.24262L61.9606 8.1931L61.5123 9.20419C61.0797 10.1799 61.7873 11.2814 62.8466 11.2814H70.6599L69.8859 13.3117H59.995L58.5451 16.8876H71.0302C72.2076 16.8876 73.2762 16.1933 73.7634 15.1119L74.5744 13.3117H74.5578L75.3318 11.2814H75.339L75.594 10.6669C76.0819 9.49105 75.2259 8.1931 73.9624 8.1931H66.9546L67.7601 6.24262H76.9427L78.3926 2.66675H65.9075Z" fill="#234BA9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.0723 2.66675H80.9702L79.6009 6.24262H89.5386L88.7205 8.27437H81.103C79.3981 8.27437 77.8944 9.40113 77.4017 11.0479L76.8451 12.908C76.2519 14.8906 77.7229 16.8889 79.7755 16.8888L90.3945 16.8883L93.6818 8.51818H93.697L94.5025 6.24262C95.162 4.52034 93.9023 2.66675 92.0723 2.66675ZM81.373 13.3131L82.259 11.2001H87.6558L86.7698 13.3131H81.373Z" fill="#234BA9"/>
+</g>
+<path id="top" d="M47.7783 0.00113767H62.8782C61.1471 3.8405 58.0313 4.88033 55.3948 4.88033H49.6691V1.41424L47.2456 4.88033H43.464L45.8076 6.95998L43.464 10.3994L47.3255 8.34642L49.6957 10.4794L49.6691 6.95998H54.5426C58.271 6.93332 58.8036 10.4794 58.1378 11.8125H42.7184C41.3069 11.8125 37.1258 10.7724 39.0166 5.76018C40.7743 1.78735 44.982 -0.0524702 47.7783 0.00113767Z" fill="#234BA9"/>
+<g id="bottom">
+<path d="M32.3588 20.1976C32.705 18.5712 34.7556 15.5317 38.484 15.2917H46.1804C46.3668 15.2917 46.8835 15.2704 47.2456 14.5452L47.7516 13.1987H57.6318C57.2324 14.2741 55.7943 16.5448 52.6518 16.7315H46.5532C46.5 16.7315 45.6899 16.8463 45.3282 17.6913C44.9287 18.6245 44.2097 18.7845 43.8368 18.8111H35.9007C35.2616 18.8378 33.7702 19.0511 32.3588 20.1976Z" fill="#CB2A3D"/>
+<path d="M56.1937 16.7181C55.7943 18.3445 53.8875 21.4054 50.0952 21.5973H44.1032C43.5439 21.6507 42.9484 21.7679 42.6118 22.6105C42.2603 23.4904 41.4933 23.7037 40.9873 23.7037H30.8674C31.258 22.6372 32.7902 20.4455 35.7942 20.2109H43.5173C43.7658 20.202 44.2363 20.1842 44.6092 19.3044C44.982 18.4245 45.2217 18.1312 46.0639 18.1046H52.6252C53.1844 18.1135 54.8089 17.838 56.1937 16.7181Z" fill="#CB2A3D"/>
+</g>
+<g id="shadow">
+<path d="M49.7491 13.1987L48.3643 16.7315H46.7132C46.367 16.7493 45.6394 16.9261 45.2985 17.758L46.2871 15.2864C46.4735 15.2784 46.8996 15.1611 47.2192 14.5852L47.7518 13.1987H49.7491Z" fill="#951F23"/>
+<path d="M42.6119 22.6114L42.6274 22.5736C42.959 21.7945 43.8175 21.5982 44.2631 21.5982H45.6745L47.0594 18.1055H46.0474C45.1419 18.0788 44.8377 18.6727 44.5747 19.3844C44.4761 19.651 44.1299 20.1538 43.5973 20.2072L42.6274 22.5736C42.6221 22.586 42.617 22.5986 42.6119 22.6114Z" fill="#951F23"/>
+</g>
+</g>
+</svg>

package/src/assets/quasar-logo-vertical.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>

package/src/components/core/UAvatar.vue

@@ -1,17 +1,23 @@
 <script setup>
 import { computed } from 'vue'
 import UBadgeStd from './UBadgeStd.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
+  bgColor: {
+    type: String,
+  },
   color: {
     type: String,
     default: 'primary',
   },
-  icon: {
+  dataTestId: {
     type: String,
+    default: 'avatar',
   },
-  size: {
+  icon: {
     type: String,
-    default: 'xl',
   },
   image: {
     type: String,
@@ -24,24 +30,38 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  round: {
+    type: Boolean,
+    default: true,
+  },
   showIndicator: {
     type: Boolean,
     default: false,
   },
-  icon: {
-    type: String,
-  },
-  round: {
+  showTooltip: {
     type: Boolean,
-    default: true,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'xl',
   },
 })
 
-const emit = defineEmits(['onClick'])
+// computed
+const initials = computed(() => {
+  if (props.name) {
+    const name = props.name.replace(/\s+/g, ' ')
+    const parts = name.split(' ')
 
-const handleClick = () => {
-  return emit('onClick')
-}
+    if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase()
+
+    return `${parts[0].substring(0, 1).toUpperCase()}${parts[parts.length - 1]
+      .substring(0, 1)
+      .toUpperCase()}`
+  }
+  return props?.name
+})
 
 const labelSize = computed(() => {
   if (props.size === 'sm') {
@@ -59,31 +79,43 @@ const labelSize = computed(() => {
 
   return props.size
 })
+
+// custom functions
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-avatar
-    class="u-avatar"
-    :class="`size-${size}`"
-    @click="handleClick"
+    v-bind="$attrs"
+    :class="`u-avatar size-${size}`"
+    :aria-label="name"
+    :color="bgColor"
+    :dataTestId="dataTestId"
+    :icon="icon"
     :round="round"
     :rounded="!round"
-    :icon="icon"
-    v-bind="$attrs"
+    @click="handleClick"
   >
-    <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
-    <span
-      v-if="!image"
-      class="name"
-      :class="`text-${color} text-caption-${labelSize}`"
+    <UTooltip
+      v-if="showTooltip"
+      anchor="bottom middle"
+      :description="name"
+      :offset="[4, 4]"
+      self="top middle"
     >
-      {{ name }}
+    </UTooltip>
+    <img v-if="image" :alt="`avatar ${name}`" :aria-label="name" :src="image" />
+    <span v-if="!image" :class="`name text-${color} text-caption-${labelSize}`">
+      {{ initials }}
     </span>
     <UBadgeStd
       v-if="showIndicator"
-      :color="indicatorColor"
       :class="`indicator`"
+      :color="indicatorColor"
       size="xs"
+      tabindex="-1"
       type="indicator"
     />
     <slot name="item" />

package/src/components/core/UAvatarGroup.vue

@@ -1,16 +1,23 @@
 <script setup>
 import { computed } from 'vue'
-import UTooltip from './UTooltip.vue'
 import UAvatar from './UAvatar.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
+  avatarLimit: {
+    type: Number,
+    default: 4,
+  },
   color: {
     type: String,
     default: 'primary',
   },
-  icon: {
+  dataTestId: {
     type: String,
+    default: 'avatar-group',
   },
-  size: {
+  icon: {
     type: String,
   },
   image: {
@@ -23,73 +30,76 @@ const props = defineProps({
     type: String,
     default: 'neutral-4',
   },
-  name: {
-    type: String,
-    required: true,
-  },
-  showIndicator: {
+  round: {
     type: Boolean,
     default: false,
   },
-  round: {
+  showEachTooltip: {
     type: Boolean,
     default: true,
   },
-  avatarLimit: {
-    type: Number,
-    default: 4,
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
   },
 })
 
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
-
+// computed properties
 const displayedAvatars = computed(() => {
   return props.images.slice(0, props.avatarLimit)
 })
 const remainingAvatars = computed(() => {
   return props.images.slice(props.avatarLimit)
 })
+
+//custom functions
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
-  <UAvatar
-    v-for="(avatar, index) in displayedAvatars"
-    class="avatarGroup"
-    :name="avatar.name"
-    :size="size"
-    :showIndicator="showIndicator"
-    :indicatorColor="indicatorColor"
-    :round="round"
-    :image="avatar.image"
-    :key="index"
-    @click="handleClick"
-  />
-
-  <q-icon
-    :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
-    color="primary"
-    aria-label="See more Avatar"
-    v-if="remainingAvatars.length"
-  >
-    <UTooltip
-      anchor="bottom middle"
-      description=""
-      self="top middle"
-      :offset="[4, 4]"
+  <div :dataTestId="dataTestId">
+    <UAvatar
+      v-for="(avatar, index) in displayedAvatars"
+      class="avatarGroup"
+      :aria-label="avatar.name"
+      :image="avatar.image"
+      :indicatorColor="indicatorColor"
+      :key="index"
+      :name="avatar.name"
+      :round="round"
+      :showIndicator="showIndicator"
+      :showTooltip="showEachTooltip"
+      :size="size"
+      tabindex="0"
+      @click="handleClick"
+    />
+    <q-icon
+      v-if="remainingAvatars.length"
+      :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
+      aria-label="See more Avatar"
+      color="primary"
     >
-      <template v-slot:item>
-        <div class="text-body-xs tooltip-text">
-          <span v-for="(avatar, index) in remainingAvatars" :key="index">
-            {{ avatar.name }}<br />
-          </span>
-        </div>
-      </template>
-    </UTooltip>
-  </q-icon>
+      <UTooltip
+        anchor="bottom middle"
+        description=""
+        :offset="[4, 4]"
+        self="top middle"
+      >
+        <template v-slot:item>
+          <div class="text-body-xs tooltip-text">
+            <span v-for="(avatar, index) in remainingAvatars" :key="index">
+              {{ avatar.name }}<br />
+            </span>
+          </div>
+        </template>
+      </UTooltip>
+    </q-icon>
+  </div>
 </template>
 <style lang="sass">
 .additonalUsersAvatar:after
@@ -97,7 +107,6 @@ const remainingAvatars = computed(() => {
   border-radius:50%
 
 .additonalUsersAvatar
-  cursor: pointer
 
   &.size-sm
     font-size: $ba !important
@@ -113,6 +122,7 @@ const remainingAvatars = computed(() => {
 
 .avatarGroup
   margin: -0.125rem
+
 .avatarGroup:not(:nth-child(1)) .q-avatar__content
     border: 1.5px solid $neutral-1
     background : lightgray 0px -0.033px / 100% 150.273% no-repeat

package/src/components/core/UBadgeStd.vue

@@ -6,6 +6,10 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
+  dataTestId: {
+    type: String,
+    default: 'badge-std'
+  },
   label: {
     type: String,
     default: '',
@@ -42,10 +46,11 @@ const currentColor = computed(() => {
           : `text-overline-sm`
         : '',
     ]"
+    :aria-label="label"
     :color="currentColor"
+    :dataTestId="dataTestId"
     rounded
     tabindex="0"
-    :aria-label="label"
   >
     <div v-if="type === 'basic'">
       {{ label }}

package/src/components/core/UBannerStd.vue

@@ -1,36 +1,57 @@
 <script setup>
+import { computed } from 'vue'
 import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['primaryAction', 'secondaryAction'])
 
 const props = defineProps({
-  type: {
+  dataTestId: {
     type: String,
-    default: 'info',
+    default: 'banner-std',
   },
   icon: {
     type: String,
     default: 'fa-kit-duotone fa-circle-info',
   },
+  label: {
+    type: String,
+    default: '',
+  },
   message: {
     type: String,
     default: '',
     required: true,
   },
+  primaryActionLabel: {
+    type: String,
+  },
+  secondaryActionLabel: {
+    type: String,
+  },
   show: {
     type: Boolean,
     default: false,
     required: true,
   },
-  primaryActionLabel: {
-    type: String,
-    default: 'Action 1',
+  showBorder: {
+    type: Boolean,
+    default: true,
   },
-  secondaryActionLabel: {
+  type: {
     type: String,
-    default: 'Action 2',
+    default: 'info',
   },
 })
 
-const emit = defineEmits(['primaryAction', 'secondaryAction'])
+const $screen = useScreenType()
+
+const bordered = computed(() => {
+  if (props.showBorder) {
+    return 'bordered'
+  }
+  return ''
+})
 
 const handlePrimaryActionClick = () => {
   emit('primaryAction')
@@ -43,75 +64,121 @@ const handleSecondaryActionClick = () => {
 
 <template>
   <q-banner
-    v-if="show && message"
+    v-if="show && (message.trim() || label.trim())"
+    :class="[
+      `u-banner u-banner-${type}`,
+      !icon ? 'no-padding-label' : '',
+      bordered,
+      $screen.isMobile ? 'u-banner-sm' : 'u-banner-md',
+    ]"
+    :dataTestId="dataTestId"
     inline-actions
-    :class="`u-banner u-banner-${type} ${!icon ? 'no-padding-label' : ''}`"
     tabindex="0"
   >
     <template v-slot:avatar>
       <q-icon
         v-if="icon"
-        aria-label="Banner Icon"
         :class="icon"
-        size="1.5rem"
-        :color="type"
         alt="Banner Info Icon"
+        aria-label="Banner Icon"
+        :color="type"
+        size="sm"
       />
     </template>
-    <span class="text-caption-lg">{{ message }}</span>
+
+    <div>
+      <span v-if="!label" class="text-caption-lg">{{ message }}</span>
+      <div v-else class="column">
+        <span class="text-caption-lg">{{ label }}</span>
+        <span class="text-body-sm">{{ message }}</span>
+      </div>
+    </div>
+
     <template v-slot:action>
-      <u-btn-std
-        v-if="primaryActionLabel"
-        :flat="false"
-        :label="primaryActionLabel"
-        @onClick="handlePrimaryActionClick"
-        :color="type"
-        size="md"
-      />
-      <u-btn-std
-        class="q-ml-sm"
-        :outline="true"
-        v-if="secondaryActionLabel"
-        :label="secondaryActionLabel"
-        @onClick="handleSecondaryActionClick"
-        :color="type"
-        size="md"
-      />
+      <div :class="['row', $screen.isMobile ? 'full-width q-mt-ba' : '']">
+        <u-btn-std
+          v-if="primaryActionLabel"
+          :color="type"
+          :label="primaryActionLabel"
+          :outline="true"
+          size="md"
+          @onClick="handlePrimaryActionClick"
+        />
+        <u-btn-std
+          v-if="secondaryActionLabel"
+          :color="type"
+          :label="secondaryActionLabel"
+          size="md"
+          @onClick="handleSecondaryActionClick"
+        />
+      </div>
     </template>
   </q-banner>
 </template>
 
 <style lang="sass">
 .u-banner
-  min-width: 24.563rem
-  padding: $sm
   .q-banner__avatar
     align-self: center
 
   .q-banner__content
     padding-left: $xs !important
+    word-break: break-word
+    overflow-wrap: break-word
+
+.u-banner-sm
+  flex-wrap: wrap
+  padding: $ba
+  .q-banner__actions
+    width: 100%
+    padding-left: 0px !important
+    >div
+      gap: $sm
+    .q-btn
+      flex: 1
+      min-width: 0
+
+.u-banner-md
+  padding: $sm
+  .q-banner__actions
+    padding-left: $xs
+    >div
+      gap: $xs !important
 
 .u-banner-positive
   background: $green-1 !important
   color: $green-7 !important
+  &.bordered
+    border: 1.5px solid $green-7
 
 .u-banner-info
   background: $purple-1 !important
   color: $info !important
+  &.bordered
+    border: 1.5px solid $purple-7
 
 .u-banner-warning
   background: $orange-1 !important
   color: $orange-7 !important
+  &.bordered
+    border: 1.5px solid $orange-7
 
 .u-banner-accent
   background: $red-1 !important
   color: $red-7 !important
+  &.bordered
+    border: 1.5px solid $red-7
 
 .u-banner-primary
   background: $blue-1 !important
   color: $primary !important
+  &.bordered
+    border: 1.5px solid $primary
 
 .no-padding-label
   .q-banner__content
     padding-left: 0px !important
+
+.bordered
+  border-radius: $xs
 </style>