@usssa/component-library 1.0.0-alpha.166 → 1.0.0-alpha.167

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.166
+# Component Library v1.0.0-alpha.167
 
 **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.166",
+  "version": "1.0.0-alpha.167",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UDrawer/UDrawer.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  collapseMenuLabel: {
+    default: 'Collapse Menu',
+    type: String,
+  },
   dataTestId: {
     default: 'drawer-std',
     type: String,
@@ -51,10 +55,18 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  sidebarShrinkIcon: {
+    type: String,
+    default: 'Sidebar shrink icon',
+  },
+  usssaLogo: {
+    type: String,
+    default: 'usssa logo',
+  },
 })
 
-const $screen = useScreenType()
 const $router = useRouter()
+const $screen = useScreenType()
 
 const currentPath = computed(() => getCurrentPath())
 const currentRoute = computed(() => $router.currentRoute.value.fullPath)
@@ -198,15 +210,15 @@ watch(
           <q-img
             v-if="!miniState"
             class="full-logo"
-            alt="usssa-logo"
-            aria-label="usssa logo"
+            :alt="props.usssaLogo"
+            :aria-label="props.usssaLogo"
             :src="`${brandLogo}`"
           />
           <q-img
             v-else
             class="mini-state-logo"
-            alt="usssa-logo"
-            aria-label="usssa logo"
+            :alt="props.usssaLogo"
+            :aria-label="props.usssaLogo"
             :src="brandMiniLogo"
           />
         </UBtnStd>
@@ -217,7 +229,7 @@ watch(
           <UBtnIcon
             v-if="$screen.isDesktop"
             iconClass="fa-kit-duotone fa-sidebar-shrink"
-            ariaLabel="Sidebar shrink icon"
+            :ariaLabel="props.sidebarShrinkIcon"
             color="primary"
             dense
             ref="btn-icon"
@@ -226,7 +238,7 @@ watch(
           />
           <UTooltip
             anchor="center right"
-            description="Collapse Menu"
+            :description="props.collapseMenuLabel"
             :offset="[4, 14]"
             self="center start"
           />
@@ -285,7 +297,8 @@ watch(
           <slot
             v-if="m.slot && m.slot.hasSlot && showSlots"
             :name="m.slot.slotName"
-          />
+          >
+          </slot>
         </template>
       </q-list>
       <div
@@ -296,7 +309,7 @@ watch(
         }"
         id="drawer-footer"
       >
-        <slot name="footer" />
+        <slot name="footer"></slot>
       </div>
     </q-scroll-area>
   </q-drawer>

package/src/components/core/UToolbar/UToolbar.vue

@@ -19,16 +19,33 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  navigateBack: {
+    type: String,
+    default: 'Back to',
+  },
+  sidebarExpandIcon: {
+    type: String,
+    default: 'Sidebar expand icon',
+  },
   title: {
     type: String,
     required: true,
   },
+  toggleMenuIcon: {
+    type: String,
+    default: 'Toggle menu icon',
+  },
+  usssaLogo: {
+    type: String,
+    default: 'usssa logo',
+  },
 })
+
 const $screen = useScreenType()
 
 // Computed property for the title text
 const pageTitle = computed(() => {
-  return props.isSubPage ? `Back to ${props.title} ` : props.title
+  return props.isSubPage ? `${props.navigateBack} ${props.title} ` : props.title
 })
 
 // Function to handle the back navigation
@@ -52,7 +69,7 @@ const toggleDrawer = () => {
     :dataTestId="dataTestId"
   >
     <UCustomMenuIcon
-      aria-label="Menu icon"
+      :aria-label="props.toggleMenuIcon"
       :menuOpen="isMiniState"
       tabindex="0"
       @toggleDrawer="toggleDrawer"
@@ -61,22 +78,22 @@ const toggleDrawer = () => {
     <section class="fit row justify-between items-center q-ml-xxs q-mr-ba">
       <UBtnStd
         class="q-pa-none"
-        aria-label="usssa logo"
+        :aria-label="props.usssaLogo"
         flat
         :ripple="false"
         @click="onLogoClick"
       >
         <img
           class="mini-state-logo full-logo"
-          alt="usssa-logo"
-          aria-label="usssa logo"
+          :alt="props.usssaLogo"
+          :aria-label="props.usssaLogo"
           src="/images/logo.svg"
         />
       </UBtnStd>
 
       <!-- Action element container -->
       <div class="u-header-toolbar-action-container">
-        <slot name="right_section" />
+        <slot name="right_section"></slot>
       </div>
     </section>
   </q-toolbar>
@@ -88,7 +105,7 @@ const toggleDrawer = () => {
   >
     <section class="fit row items-center q-mr-ba">
       <UCustomMenuIcon
-        aria-label="Menu icon"
+        :aria-label="props.toggleMenuIcon"
         :menuOpen="isMiniState"
         tabindex="0"
         @toggleDrawer="toggleDrawer"
@@ -98,7 +115,7 @@ const toggleDrawer = () => {
         <!-- Add logo click emitter -->
         <UBtnStd
           class="q-pa-none"
-          aria-label="usssa logo"
+          :aria-label="props.usssaLogo"
           flat
           :ripple="false"
           size="sm"
@@ -106,8 +123,8 @@ const toggleDrawer = () => {
         >
           <img
             class="mini-state-logo full-logo"
-            alt="usssa-logo"
-            aria-label="usssa logo"
+            :alt="props.usssaLogo"
+            :aria-label="props.usssaLogo"
             src="/images/logo.svg"
           />
         </UBtnStd>
@@ -115,7 +132,7 @@ const toggleDrawer = () => {
 
       <!-- Action element container -->
       <div class="u-header-toolbar-action-container">
-        <slot name="right_section" />
+        <slot name="right_section"></slot>
       </div>
     </section>
   </q-toolbar>
@@ -129,7 +146,7 @@ const toggleDrawer = () => {
     <UBtnIcon
       v-if="isMiniState"
       class="q-ml-xxs"
-      ariaLabel="Sidebar expand icon"
+      :ariaLabel="props.sidebarExpandIcon"
       color="primary"
       dataTestId="expand-button"
       iconClass="fa-kit-duotone fa-sidebar-expand"
@@ -163,7 +180,7 @@ const toggleDrawer = () => {
 
       <!-- Action element container -->
       <div class="u-header-toolbar-action-container">
-        <slot name="right_section" />
+        <slot name="right_section"></slot>
       </div>
     </section>
   </q-toolbar>
@@ -206,5 +223,4 @@ const toggleDrawer = () => {
     color: $dark !important
 .q-header:has(.u-header-toolbar-container)
   z-index: 5000
-
 </style>