@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UTabsStd.vue

@@ -1,77 +1,93 @@
 <script setup>
+import { computed } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const selectedTab = defineModel({
+  required: true,
+  type: [Boolean, String, Number],
+})
+
 const props = defineProps({
+  align: { type: String, default: 'justify' },
+  dataTestId: {
+    type: String,
+    default: 'tabs-std',
+  },
   tabs: {
     type: Array,
     required: true,
   },
-  align: { type: String, default: 'justify' },
 })
 
-const selectedTab = defineModel({
-  required: true,
-  type: [Boolean, String, Number],
-})
+const $screen = useScreenType()
+
+const isMobileOrTablet = computed(
+  () => $screen.value.isMobile || $screen.value.isTablet
+)
 </script>
 
 <template>
   <q-tabs
     v-model="selectedTab"
-    :dense="true"
+    :class="`u-tabs-std text-caption-md${
+      isMobileOrTablet ? ' mobile-tabs remove-actions' : ''
+    }`"
     active-color="primary"
+    :align="align"
+    :dataTestId="dataTestId"
+    :dense="true"
     indicator-color="primary"
-    outside-arrows
     inline-label
     mobile-arrows
-    :align="align"
     no-caps
-    class="u-tabs-std text-caption-md"
+    outside-arrows
   >
     <template v-for="tab in tabs" :key="tab.name">
       <q-tab
-        :aria-label="tab.label"
         v-if="!tab.route"
+        :aria-label="tab.label"
+        :disable="tab.disable"
         :name="tab.name"
         :ripple="false"
-        :disable="tab.disable"
       >
         <template v-slot:default>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.leftIcon"
             :class="`left-icon ${tab.leftIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
           <p class="q-ma-none">{{ tab.label }}</p>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.rightIcon"
             :class="`right-icon ${tab.rightIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
         </template>
       </q-tab>
       <q-route-tab
         v-else
+        :aria-label="tab.label"
+        :disable="tab.disable"
+        exact
         :name="tab.name"
         :ripple="false"
         :to="`${tab.route}`"
-        exact
-        :aria-label="tab.label"
-        :disable="tab.disable"
       >
         <template v-slot:default>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.leftIcon"
             :class="`left-icon ${tab.leftIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
           <p class="q-ma-none">{{ tab.label }}</p>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.rightIcon"
             :class="`right-icon ${tab.rightIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
         </template>
       </q-route-tab>
@@ -83,6 +99,9 @@ const selectedTab = defineModel({
 .u-tabs-std
   color: $dark
   font-weight: 500
+  .q-tabs__content
+    overflow-x: auto
+    overflow-y: hidden
 
   & .q-tab__content
     & .q-icon
@@ -101,11 +120,22 @@ const selectedTab = defineModel({
 
   .q-tab--inactive, .q-tab--active
     min-width: 5.5rem
+    height: $lg
 
   .q-tab--inactive
     border-bottom: 2px solid $neutral-3
     opacity: 1
 
   .q-tab--inactive:hover
-    color: $primary
+    color: inherit
+
+.mobile-tabs
+  .q-tab--inactive, .q-tab--active
+    min-width: auto !important
+
+.remove-actions
+  .q-tabs__arrow
+    display: none
+  padding-left: 0px !important
+  padding-right: 0px !important
 </style>

package/src/components/core/UToggleStd.vue

@@ -2,27 +2,31 @@
 import { onMounted, watch } from 'vue'
 
 const props = defineProps({
-  name: {
+  checkedIcon: {
     type: String,
-    default: 'toggle',
+    default: '',
+  },
+  dataTestId: {
+    type: String,
+    default: 'toggle-std',
   },
   disabled: {
     type: Boolean,
     default: false,
   },
-  label: {
-    type: String,
-    default: '',
-  },
   id: {
     type: [String, Number],
     default: 'u-toggle',
     required: true, // it is required for to match accessibility crieteria
   },
-  checkedIcon: {
+  label: {
     type: String,
     default: '',
   },
+  name: {
+    type: String,
+    default: 'toggle',
+  },
   unCheckedIcon: {
     type: String,
     default: '',
@@ -82,27 +86,28 @@ watch(toggle, () => {
 <template>
   <label class="hidden" :for="`u-toggle-${id}`">{{ label }}</label>
   <q-toggle
-    :id="`u-toggle-${id}`"
+    v-bind="$attrs"
     v-model="toggle"
-    :name="name"
-    color="primary"
     class="u-toggle"
+    color="primary"
+    :dataTestId="dataTestId"
     :disable="disabled"
-    v-bind="$attrs"
+    :id="`u-toggle-${id}`"
+    :name="name"
   >
     <template v-slot:default>
       <q-icon
         v-if="checkedIcon && toggle"
-        :id="`u-toggle-right-icon-${name}`"
         :class="`${checkedIcon} u-checked-icon`"
         :aria-label="`${name ? name : ''} checked toggle icon`"
+        :id="`u-toggle-right-icon-${name}`"
       >
       </q-icon>
       <q-icon
         v-if="unCheckedIcon && !toggle"
-        :id="`u-toggle-left-icon-${name}`"
         :class="`${unCheckedIcon} u-unchecked-icon`"
         :aria-label="`${name ? name : ''} unchecked toggle icon`"
+        :id="`u-toggle-left-icon-${name}`"
       >
       </q-icon>
     </template>

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

@@ -0,0 +1,58 @@
+<script setup>
+const emit = defineEmits(['toggleDrawer'])
+const props = defineProps({
+  menuOpen: {
+    type: Boolean,
+    default: true,
+  },
+})
+const toggleDrawer = () => {
+  emit('toggleDrawer')
+}
+</script>
+
+<template>
+  <div class="menu-container q-ml-ba" @click="toggleDrawer">
+    <div class="bar top" :class="{ open: !menuOpen }" />
+    <div class="bar bottom" :class="{ open: !menuOpen }" />
+  </div>
+</template>
+
+<style lang="sass">
+$bar-width: 1.25rem
+$bar-height: 0.125rem
+$tap-area: $md
+$transition-speed: 0.2s
+
+.menu-container
+  width: $tap-area
+  height: $tap-area
+  display: flex
+  justify-content: center
+  align-items: center
+  position: relative
+  cursor: pointer
+
+.bar
+  width: $bar-width
+  height: $bar-height
+  background-color: black
+  position: absolute
+  transition: transform $transition-speed ease-in-out
+
+  &.top
+    top: 50%
+    transform: translateY(-4px)
+
+  &.bottom
+    top: 50%
+    transform: translateY(4px)
+
+  /* Morphing into X */
+  &.open
+    &.top
+      transform: translateY(0) rotate(-45deg)
+
+    &.bottom
+      transform: translateY(0) rotate(45deg)
+</style>

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

@@ -0,0 +1,226 @@
+<script setup>
+import { computed } from 'vue'
+import UBtnIcon from '../UBtnIcon.vue'
+import UBtnStd from '../UBtnStd.vue'
+import UCustomMenuIcon from './UCustomMenuIcon.vue'
+import { useScreenType } from '../../../composables/useScreenType'
+
+const emit = defineEmits(['navigateBack', 'toggleDrawer', 'onLogoClick'])
+const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'toolbar',
+  },
+  isMiniState: {
+    type: Boolean,
+    required: true,
+  },
+  isSubPage: {
+    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 ? `${props.navigateBack} ${props.title} ` : props.title
+})
+
+// Function to handle the back navigation
+const handleClick = () => {
+  emit('navigateBack')
+}
+
+const onLogoClick = () => {
+  emit('onLogoClick')
+}
+
+const toggleDrawer = () => {
+  emit('toggleDrawer')
+}
+</script>
+
+<template>
+  <q-toolbar
+    v-if="$screen.isTablet"
+    class="u-header-toolbar-container"
+    :dataTestId="dataTestId"
+  >
+    <UCustomMenuIcon
+      :aria-label="props.toggleMenuIcon"
+      :menuOpen="isMiniState"
+      tabindex="0"
+      @toggleDrawer="toggleDrawer"
+    />
+
+    <section class="fit row justify-between items-center q-ml-xxs q-mr-ba">
+      <UBtnStd
+        class="q-pa-none"
+        :aria-label="props.usssaLogo"
+        flat
+        :ripple="false"
+        @click="onLogoClick"
+      >
+        <img
+          class="mini-state-logo full-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>
+      </div>
+    </section>
+  </q-toolbar>
+
+  <q-toolbar
+    v-if="$screen.isMobile"
+    class="u-header-toolbar-container"
+    :dataTestId="dataTestId"
+  >
+    <section class="fit row items-center q-mr-ba">
+      <UCustomMenuIcon
+        :aria-label="props.toggleMenuIcon"
+        :menuOpen="isMiniState"
+        tabindex="0"
+        @toggleDrawer="toggleDrawer"
+      />
+
+      <div class="logo-container-mb items-center justify-center">
+        <!-- Add logo click emitter -->
+        <UBtnStd
+          class="q-pa-none"
+          :aria-label="props.usssaLogo"
+          flat
+          :ripple="false"
+          size="sm"
+          @click="onLogoClick"
+        >
+          <img
+            class="mini-state-logo full-logo"
+            :alt="props.usssaLogo"
+            :aria-label="props.usssaLogo"
+            src="/images/logo.svg"
+          />
+        </UBtnStd>
+      </div>
+
+      <!-- Action element container -->
+      <div class="u-header-toolbar-action-container">
+        <slot name="right_section"></slot>
+      </div>
+    </section>
+  </q-toolbar>
+
+  <q-toolbar
+    v-if="$screen.isDesktop"
+    class="u-header-toolbar-container"
+    :dataTestId="dataTestId"
+  >
+    <!-- Expand icon to open sidebar or drawer-->
+    <UBtnIcon
+      v-if="isMiniState"
+      class="q-ml-xxs"
+      :ariaLabel="props.sidebarExpandIcon"
+      color="primary"
+      dataTestId="expand-button"
+      iconClass="fa-kit-duotone fa-sidebar-expand"
+      size="sm"
+      @click="toggleDrawer"
+    />
+
+    <section class="fit row justify-between items-center q-ml-xs q-mr-ba">
+      <!-- Title container with dynamic title and optional back button -->
+      <UBtnStd
+        v-if="isSubPage"
+        class="back_to_button icon-secondary-opacity"
+        :aria-label="pageTitle"
+        color="primary"
+        dataTestId="back-button"
+        :flat="true"
+        :label="pageTitle"
+        leftIconSize="ms"
+        left-icon="fa-kit-duotone fa-circle-arrow-left"
+        tabindex="0"
+        @click="handleClick"
+      />
+      <span
+        v-else
+        class="q-my-none text-heading-xxs q-ml-xxs text-dark"
+        dataTestId="toolbar-title"
+        tabindex="0"
+      >
+        {{ pageTitle }}
+      </span>
+
+      <!-- Action element container -->
+      <div class="u-header-toolbar-action-container">
+        <slot name="right_section"></slot>
+      </div>
+    </section>
+  </q-toolbar>
+</template>
+
+<style lang="sass">
+.u-header-toolbar-container
+  background-color: white
+  width: 100%
+  padding: 0px
+  display: flex
+  align-items: center
+  align-self: stretch
+  padding: $xs 0
+
+  .full-logo
+    width: 5.918rem
+    height: $md
+    margin-top: $xxs
+
+  .logo-container-mb
+    flex: 1
+    display: flex
+
+.u-header-toolbar-inner-container
+  width: 100%
+
+.u-header-toolbar-title-container
+  display: flex
+  align-items: center
+  gap: $xs
+
+.u-header-toolbar-action-container
+  display: flex
+  align-items: center
+  gap: $sm
+
+.back_to_button
+  .button-label
+    color: $dark !important
+.q-header:has(.u-header-toolbar-container)
+  z-index: 5000
+</style>

package/src/components/core/UTooltip.vue

@@ -1,42 +1,63 @@
 <script setup>
+import { computed, useSlots } from 'vue'
+
 const props = defineProps({
-  icon: {
+  anchor: {
     type: String,
   },
-  description: {
+  dataTestId: {
     type: String,
-    required: true,
+    default: 'tooltip-std',
   },
-  anchor: {
+  description: {
     type: String,
+    required: true,
   },
-  self: {
+  icon: {
     type: String,
   },
   offset: {
     type: Array,
   },
+  self: {
+    type: String,
+  },
   target: {
     type: String,
     default: '',
   },
 })
+
+const slots = useSlots()
+
+/**
+ * checking if string contains only white spaces
+ */
+const getTooltipText = computed(() => {
+  if (!props.description.replace(/\s/g, '')) {
+    return null
+  } else {
+    return props.description
+  }
+})
 </script>
 
 <template>
   <q-tooltip
-    class="u-tooltip shadow-2 bg-dark row"
     v-bind="$attrs"
+    v-if="getTooltipText || slots.item"
+    class="u-tooltip shadow-2 bg-dark row"
     :anchor="anchor"
-    :self="self"
+    :dataTestId="dataTestId"
     :offset="offset"
+    :self="self"
     :target="target"
   >
     <div class="row no-wrap tooltip-content">
-      <div class="flex items-center" v-if="icon">
-        <q-icon :class="icon" size="1rem"></q-icon>
+      <div v-if="icon" class="flex items-center">
+        <q-icon :class="icon" size="1rem" />
       </div>
-      <div class="text-body-xs tooltip-text">{{ description }}</div>
+      <div class="text-body-xs tooltip-text">{{ getTooltipText }}</div>
       <slot name="item" />
     </div>
   </q-tooltip>
@@ -47,6 +68,7 @@ const props = defineProps({
   border-radius: $xs
   padding: $xs $sm
   max-width: 22.5rem !important
+  word-break: break-word
 
 .tooltip-text
   color: $neutral-1