@usssa/component-library 1.0.0-alpha.211 → 1.0.0-alpha.213

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.211
+# Component Library v1.0.0-alpha.213
 
 **This library provides custom UI components for USSSA applications**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.211",
+  "version": "1.0.0-alpha.213",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/assets/VS.svg

@@ -0,0 +1,5 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8001 0H45.4001L34.2001 32H0.600098L11.8001 0Z" fill="#CB2A3D"/>
+<path d="M15.1951 16.8368L16.1599 10.3384H12.1279L10.3999 22.1538H15.2671L23.9647 10.3384H19.9327L15.1951 16.8368Z" fill="white"/>
+<path d="M27.432 15.0645L28.1088 13.2922H35.7552L36.9072 10.3384H27.2304C26.6256 10.3384 26.064 10.5255 25.5456 10.8996C25.0272 11.2639 24.6528 11.7365 24.4224 12.3175L23.2272 15.4338C23.1504 15.6208 23.112 15.8178 23.112 16.0245C23.112 16.4184 23.2512 16.7531 23.5296 17.0288C23.808 17.2947 24.1152 17.4276 24.4512 17.4276H30.6864L29.9952 19.1999H21.7584L20.6064 22.1538H30.6C31.2048 22.1538 31.7664 21.9716 32.2848 21.6073C32.8032 21.243 33.1776 20.7704 33.408 20.1895L34.6032 17.0731C34.6704 16.8959 34.704 16.7138 34.704 16.5267C34.704 16.1328 34.5648 15.7931 34.2864 15.5076C34.0176 15.2122 33.7104 15.0645 33.3648 15.0645H27.432Z" fill="white"/>
+</svg>

package/src/components/core/UEventCard.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref } from 'vue'
 
+import defaultImage from '../../assets/no-result.svg'
 import { useScreenType } from '../../composables/useScreenType'
 import { trimmedLabel } from '../../utils/data'
 import UBtnStd from './UBtnStd.vue'
 import UChip from './UChip.vue'
-import defaultImage from '../../assets/no-result.svg'
 import UTooltip from './UTooltip.vue'
 
 const emit = defineEmits(['onRegister', 'onView'])
@@ -102,8 +102,9 @@ const viewClick = () => {
   <q-card
     v-if="!isMobile"
     class="flex event-card no-wrap"
-    :aria-label="props.eventName + props.eventDate || 'Event Card'"
+    :aria-label="`${props.eventName} ${props.eventDate}`"
     :data-testid="dataTestId"
+    tabindex="0"
   >
     <!-- Column 1: Rotated Text -->
     <div class="flex items-center justify-center q-py-sm q-px-xs">
@@ -145,11 +146,18 @@ const viewClick = () => {
             <UTooltip
               v-if="eventDate.isTrimmed"
               :description="props.eventDate"
-            /> </span>|<span v-if="props.eventPrice" class="q-px-xxs">
+            />
+          </span>
+          |
+          <span v-if="props.eventPrice" class="q-px-xxs">
             {{ eventPrice.text }}
             <UTooltip
               v-if="eventPrice.isTrimmed"
-              :description="props.eventPrice" /></span>|<UChip
+              :description="props.eventPrice"
+            />
+          </span>
+          |
+          <UChip
             v-model="eventChip"
             iconClass="fa-kit-duotone fa-users"
             :chipLabel="eventPlayersMax.text"
@@ -175,11 +183,18 @@ const viewClick = () => {
             <UTooltip
               v-if="eventAgeGroup.isTrimmed"
               :description="props.eventAgeGroup"
-            /> </span>|<span v-if="props.eventLocation" class="q-px-xxs"
-            >{{ eventLocation.text }}
+            />
+          </span>
+          |
+          <span v-if="props.eventLocation" class="q-px-xxs">
+            {{ eventLocation.text }}
             <UTooltip
               v-if="eventLocation.isTrimmed"
-              :description="props.eventLocation" /></span>|<span v-if="props.eventHost" class="q-ml-xxs">
+              :description="props.eventLocation"
+            />
+          </span>
+          |
+          <span v-if="props.eventHost" class="q-ml-xxs">
             {{ eventHost.text }}
             <UTooltip
               v-if="eventHost.isTrimmed"
@@ -273,15 +288,15 @@ const viewClick = () => {
     <div class="event-item-mobile text-caption-md text-description q-mt-xs">
       <span v-if="props.eventDate" class="q-px-xxs">
         {{ eventDate.text }}
-        <UTooltip
-          v-if="eventDate.isTrimmed"
-          :description="props.eventDate"
-        /> </span>|<span v-if="props.eventPrice" class="q-px-xxs">
+        <UTooltip v-if="eventDate.isTrimmed" :description="props.eventDate" />
+      </span>
+      |
+      <span v-if="props.eventPrice" class="q-px-xxs">
         {{ eventPrice.text }}
-        <UTooltip
-          v-if="eventPrice.isTrimmed"
-          :description="props.eventPrice"
-        /> </span>|<UChip
+        <UTooltip v-if="eventPrice.isTrimmed" :description="props.eventPrice" />
+      </span>
+      |
+      <UChip
         v-model="eventChip"
         iconClass="fa-kit-duotone fa-users"
         :chipLabel="eventPlayersMax.text"
@@ -297,12 +312,18 @@ const viewClick = () => {
         <UTooltip
           v-if="eventAgeGroup.isTrimmed"
           :description="props.eventAgeGroup"
-        /> </span>|<span v-if="props.eventLocation" class="q-px-xxs">
+        />
+      </span>
+      |
+      <span v-if="props.eventLocation" class="q-px-xxs">
         {{ eventLocation.text }}
         <UTooltip
           v-if="eventLocation.isTrimmed"
           :description="props.eventLocation"
-        /> </span>|<span v-if="props.eventHost" class="q-ml-xxs">
+        />
+      </span>
+      |
+      <span v-if="props.eventHost" class="q-ml-xxs">
         {{ eventHost.text }}
         <UTooltip v-if="eventHost.isTrimmed" :description="props.eventHost" />
       </span>
@@ -397,6 +418,7 @@ const viewClick = () => {
   font-size: 0.875rem
   line-height: 1.0625rem
   letter-spacing: 0
+  font-weight: 700
 
 .event-action, .event-action-mobile
   .action-buttons

package/src/components/core/UFilter.vue

@@ -6,6 +6,14 @@ const filterOptions = defineModel('filterOptions', {
   type: Array,
 })
 const props = defineProps({
+  collapsedAriaLabel: {
+    type: String,
+    default: '',
+  },
+  expandAriaLabel: {
+    type: String,
+    default: '',
+  },
   dataTestId: {
     type: String,
     default: 'u-expansion-filter',
@@ -42,7 +50,9 @@ const props = defineProps({
         <UExpansionStd
           v-model="filter.isExpanded"
           class="expansion-filter-item-wrapper"
+          :collapsed-aria-label="filter.collapsedAriaLabel"
           :disabled="filter.disabled"
+          :expand-aria-label="filter.expandAriaLabel"
           expansion-icon="fa-kit fa-chevron-right rotate-0"
           :id="`filter-expansion-item-${filter.type}`"
           :label="filter.label"

package/src/components/core/UGameObject.vue

@@ -3,6 +3,7 @@ import { ref } from "vue";
 import UAvatar from "./UAvatar.vue";
 import UBtnStd from "./UBtnStd.vue";
 import { useScreenType } from "../../composables/useScreenType";
+import VsImg from "../../assets/VS.svg"
 
 const body = defineModel("body", {
   type: Object,
@@ -109,6 +110,7 @@ function isEmpty(obj) {
 
 <template>
   <q-card
+    v-bind="$attrs"
     :class="[
       'u-game-object-std ',
       $screen.isMobile || direction === 'vertical' ? 'vertical-view' : 'full-width',
@@ -241,8 +243,9 @@ function isEmpty(obj) {
                   class="fa-kit-duotone fa-share cursor-pointer icon-secondary-opacity"
                   :aria-label="body.team1.link.ariaLabel"
                   :color="body.team1.link.color"
+                  role="button"
                   size="1rem"
-                  tabindex="1"
+                  tabindex="0"
                   @click="body.team1.link.onClick"
                 />
               </div>
@@ -259,7 +262,7 @@ function isEmpty(obj) {
         <!-- Team 1 -->
 
         <div class="logo-section">
-          <q-img class="vs-logo" alt="vs logo" :src="`${vsLogo}`" />
+          <q-img class="vs-logo" alt="vs logo" :src="VsImg" />
         </div>
 
         <!-- Team 2 -->
@@ -311,8 +314,9 @@ function isEmpty(obj) {
                   class="fa-kit-duotone fa-share cursor-pointer icon-secondary-opacity"
                   :aria-label="body.team2.link.ariaLabel"
                   :color="body.team2.link.color"
+                  role="button"
                   size="1rem"
-                  tabindex="1"
+                  tabindex="0"
                   @click="body.team2.link.onClick"
                 />
               </div>
@@ -354,7 +358,6 @@ function isEmpty(obj) {
     <!-- Body -->
   </q-card>
 </template>
-
 <style lang="sass">
 .u-game-object-std
   border-radius: $xs
@@ -424,7 +427,7 @@ function isEmpty(obj) {
        height: $md
 
 .u-game-object-std.vertical-view
-  max-width: 20.125rem
+  max-width: 100%
 
   .u-game-object-std-header
     gap: $xs