@usssa/component-library 1.0.0-alpha.212 → 1.0.0-alpha.214

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.212
+# Component Library v1.0.0-alpha.214
 
 **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.212",
+  "version": "1.0.0-alpha.214",
   "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

@@ -99,6 +99,7 @@ const viewClick = () => {
 
 <template>
   <!-- Event Card for Desktop and Tab devices -->
+
   <q-card
     v-if="!isMobile"
     class="flex event-card no-wrap"
@@ -107,19 +108,17 @@ const viewClick = () => {
     tabindex="0"
   >
     <!-- Column 1: Rotated Text -->
-    <div class="flex items-center justify-center q-py-sm q-px-xs">
-      <div
-        class="rotated-text text-dark text-italic text-center cornero-font-family ellipsis"
-        data-testid="eventCategory"
-        ref="textECategory"
-        @mouseenter="checkOverflow"
-      >
-        {{ props.eventCategory }}
-        <UTooltip
-          v-if="isCategoryOverflowing"
-          :description="props.eventCategory"
-        />
-      </div>
+    <div
+      class="flex items-center justify-center q-py-sm q-px-xs rotated-text text-dark text-italic text-display-xxxs text-center cornero-font-family ellipsis"
+      data-testid="eventCategory"
+      ref="textECategory"
+      @mouseenter="checkOverflow"
+    >
+      {{ props.eventCategory }}
+      <UTooltip
+        v-if="isCategoryOverflowing"
+        :description="props.eventCategory"
+      />
     </div>
     <!-- Right Column: Nested 3-column layout -->
     <div
@@ -139,7 +138,7 @@ const viewClick = () => {
       </div>
 
       <!-- Column 3: Grid Text -->
-      <div class="flex column justify-center q-mr-auto">
+      <div class="flex column justify-center event-text-col-wrapper">
         <div class="event-item text-caption-lg text-description">
           <span v-if="props.eventDate" class="q-mr-xxs">
             {{ eventDate.text }}
@@ -159,7 +158,8 @@ const viewClick = () => {
           |
           <UChip
             v-model="eventChip"
-            iconClass="fa-kit-duotone fa-users"
+            class="event-team-users-count"
+            iconClass="fa-kit-duotone fa-users icon-secondary-opacity"
             :chipLabel="eventPlayersMax.text"
             dense
             :removable="false"
@@ -169,7 +169,7 @@ const viewClick = () => {
 
         <div
           v-if="props.eventName"
-          class="text-dark text-heading-lg event-name text-no-wrap ellipsis q-pt-xs q-pb-ba"
+          class="text-dark text-heading-lg event-name ellipsis q-pt-xs q-pb-ba"
           data-testid="eventName"
           ref="textEName"
           @mouseenter="checkOverflow"
@@ -205,7 +205,9 @@ const viewClick = () => {
       </div>
 
       <!-- Column 4: Buttons -->
-      <div class="flex column justify-center items-end event-action no-wrap">
+      <div
+        class="flex column justify-center items-end event-action no-wrap shrink"
+      >
         <u-btn-std
           class="border-radius-sm full-width text-no-wrap ellipsis"
           :aria-label="props.eventRegisterText || 'Register Event'"
@@ -249,7 +251,7 @@ const viewClick = () => {
     <!-- Left Ribbon -->
     <div class="event-item-mobile">
       <div
-        class="text-dark text-italic cornero-font-family text-no-wrap ellipsis event-category-mobile"
+        class="text-dark text-display-xxxs text-italic cornero-font-family text-no-wrap ellipsis"
         data-testid="eventCategory"
         ref="textECategory"
         @mouseenter="checkOverflow"
@@ -298,7 +300,8 @@ const viewClick = () => {
       |
       <UChip
         v-model="eventChip"
-        iconClass="fa-kit-duotone fa-users"
+        class="event-team-users-count"
+        iconClass="fa-kit-duotone fa-users icon-secondary-opacity"
         :chipLabel="eventPlayersMax.text"
         dense
         :removable="false"
@@ -364,48 +367,28 @@ const viewClick = () => {
   border-radius: $xs
   box-shadow: none !important
   overflow: hidden
+  justify-content: space-between
+  box-sizing: border-box
 
 .rotated-text
-  height: 10rem
   writing-mode: vertical-rl
   transform: rotate(180deg)
-  font-weight: 700
-  font-size: 0.6875rem
-  line-height: 1.0625rem
-  letter-spacing: 0.0625rem
+  text-orientation: mixed
+  max-width: 100%
 
 .event-details
   flex-direction: row !important
   align-items: stretch !important
   flex: 1 !important
   gap: $ms
-
-.event-name
-  max-width: 36rem
-
-@media (min-width: 600px) and (max-width: 990px)
-  .event-details
-    flex-direction: column
-    align-items: stretch
-  .event-action
-    align-items: flex-start
-  .event-name
-    max-width: 14rem
-@media (min-width: 771px) and (max-width: 1024px)
-  .event-details
-    flex-direction: column
-    align-items: stretch
-  .event-action
-    align-items: flex-start
-  .event-name
-    max-width: 20rem
+  min-width: 0
 
 .event-logo
   border-radius: 0
 
 .event-action
-  max-width: 12rem
   gap: $ba
+  flex-shrink: 0
 
 .full-width-actions
   width: 100%
@@ -414,12 +397,6 @@ const viewClick = () => {
 .event-row-mobile
   gap: $ba
 
-.event-category-mobile
-  font-size: 0.875rem
-  line-height: 1.0625rem
-  letter-spacing: 0
-  font-weight: 700
-
 .event-action, .event-action-mobile
   .action-buttons
     padding: 0
@@ -438,4 +415,16 @@ const viewClick = () => {
  .q-chip__content
    gap: $xxs
    padding: $xxs
+
+.event-text-col-wrapper
+  flex: 1
+  min-width: 0
+  overflow: hidden
+
+.event-name
+  max-width: 100%
+
+.event-team-users-count
+  .iconLeft
+    padding: 0 $xxs 0 0 !important
 </style>

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

package/src/css/quasar.variables.sass

@@ -98,8 +98,9 @@ $display-md: (size: 1.5rem, line-height: 1.5rem, letter-spacing: .00714rem, weig
 $display-sm: (size: 1.25rem, line-height: 1.5rem, letter-spacing: 0rem, weight: 500) !default
 $display-xs: (size: 1.125rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 500) !default
 $display-xxs: (size: 1.0rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 500) !default
+$display-xxxs: (size: 0.75rem, line-height: 1.313rem, letter-spacing: .0125rem, weight: 500) !default
 
-$headings: ('h1': $h1, 'h1-md': $h1-md, 'h1-sm': $h1-sm, 'h2': $h2, 'h2-md': $h2-md, 'h2-sm': $h2-sm, 'h3': $h3, 'h3-md': $h3-md, 'h3-sm': $h3-sm, 'h4': $h4, 'h4-md': $h4-md, 'h4-sm': $h4-sm, 'h5': $h5, 'h6': $h6, 'body-xl': $body-xl, 'body-lg': $body-lg, 'body-md': $body-md, 'body-sm': $body-sm, 'body-xs': $body-xs, 'body-xxs': $body-xxs, 'overline-lg': $overline-lg, 'overline-md': $overline-md, 'overline-sm': $overline-sm,'overline-xs': $overline-xs, 'caption-lg': $caption-lg, 'caption-md': $caption-md, 'caption-sm': $caption-sm, 'caption-xs': $caption-xs, 'heading-xxxl': $heading-xxxl, 'heading-xxl':$heading-xxl,'heading-xl':$heading-xl,'heading-lg':$heading-lg,'heading-md':$heading-md,'heading-sm':$heading-sm,'heading-xs':$heading-xs,'heading-xxs': $heading-xxs, 'display-xxxl': $display-xxxl, 'display-xxl':$display-xxl,'display-xl':$display-xl,'display-lg':$display-lg,'display-md':$display-md,'display-sm':$display-sm,'display-xs':$display-xs,'display-xxs': $display-xxs) !default
+$headings: ('h1': $h1, 'h1-md': $h1-md, 'h1-sm': $h1-sm, 'h2': $h2, 'h2-md': $h2-md, 'h2-sm': $h2-sm, 'h3': $h3, 'h3-md': $h3-md, 'h3-sm': $h3-sm, 'h4': $h4, 'h4-md': $h4-md, 'h4-sm': $h4-sm, 'h5': $h5, 'h6': $h6, 'body-xl': $body-xl, 'body-lg': $body-lg, 'body-md': $body-md, 'body-sm': $body-sm, 'body-xs': $body-xs, 'body-xxs': $body-xxs, 'overline-lg': $overline-lg, 'overline-md': $overline-md, 'overline-sm': $overline-sm,'overline-xs': $overline-xs, 'caption-lg': $caption-lg, 'caption-md': $caption-md, 'caption-sm': $caption-sm, 'caption-xs': $caption-xs, 'heading-xxxl': $heading-xxxl, 'heading-xxl':$heading-xxl,'heading-xl':$heading-xl,'heading-lg':$heading-lg,'heading-md':$heading-md,'heading-sm':$heading-sm,'heading-xs':$heading-xs,'heading-xxs': $heading-xxs, 'display-xxxl': $display-xxxl, 'display-xxl':$display-xxl,'display-xl':$display-xl,'display-lg':$display-lg,'display-md':$display-md,'display-sm':$display-sm,'display-xs':$display-xs,'display-xxs': $display-xxs,'display-xxxs': $display-xxxs) !default
 
 // SPACING BASE
 $space-base: 1rem !default