@usssa/component-library 1.0.0-alpha.113 → 1.0.0-alpha.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.113",
+  "version": "1.0.0-alpha.115",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UAvatar.vue

@@ -3,21 +3,22 @@ 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',
   },
-  bgColor: {
+  dataTestId: {
     type: String,
+    default: 'avatar',
   },
   icon: {
     type: String,
   },
-  size: {
-    type: String,
-    default: 'xl',
-  },
   image: {
     type: String,
   },
@@ -29,28 +30,38 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  showIndicator: {
-    type: Boolean,
-    default: false,
-  },
-  icon: {
-    type: String,
-  },
   round: {
     type: Boolean,
     default: true,
   },
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
   showTooltip: {
     type: Boolean,
     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') {
@@ -69,27 +80,19 @@ const labelSize = computed(() => {
   return props.size
 })
 
-const initials = computed(() => {
-  if (props.name) {
-    const name = props.name.replace(/\s+/g, ' ')
-    const parts = name.split(' ')
-
-    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
-})
+// custom functions
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-avatar
     v-bind="$attrs"
-    class="u-avatar"
-    :class="`size-${size}`"
+    :class="`u-avatar size-${size}`"
+    :aria-label="name"
     :color="bgColor"
+    :dataTestId="dataTestId"
     :icon="icon"
     :round="round"
     :rounded="!round"
@@ -103,12 +106,8 @@ const initials = computed(() => {
       self="top middle"
     >
     </UTooltip>
-    <img v-if="image" :alt="`avatar ${name}`" :aria-label="name" :src="image"/>
-    <span
-      v-if="!image"
-      class="name"
-      :class="`text-${color} text-caption-${labelSize}`"
-    >
+    <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

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,74 +30,76 @@ const props = defineProps({
     type: String,
     default: 'neutral-4',
   },
-  showIndicator: {
+  round: {
     type: Boolean,
     default: false,
   },
-  round: {
+  showEachTooltip: {
     type: Boolean,
     default: true,
   },
-  avatarLimit: {
-    type: Number,
-    default: 4,
-  },
-  showEachTooltip: {
+  showIndicator: {
     type: Boolean,
-    default: true
-  }
+    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"
-    :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"
-  >
-    <UTooltip
-      anchor="bottom middle"
-      description=""
-      :offset="[4, 4]"
-      self="top middle"
+  <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

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

@@ -5,6 +5,10 @@ import UBtnStd from './UBtnStd.vue'
 const emit = defineEmits(['primaryAction', 'secondaryAction'])
 
 const props = defineProps({
+  dataTestId:{
+    type: String,
+    default: 'banner-std',
+  },
   icon: {
     type: String,
     default: 'fa-kit-duotone fa-circle-info',
@@ -57,6 +61,7 @@ const handleSecondaryActionClick = () => {
     :class="`u-banner u-banner-${type} ${
       !icon ? 'no-padding-label' : ''
     } ${bordered}`"
+    :dataTestId="dataTestId"
     inline-actions
     tabindex="0"
   >

package/src/components/core/UBtnStd.vue

@@ -1,11 +1,17 @@
 <script setup>
 import { computed } from 'vue'
 
+const emit = defineEmits(['onClick'])
+
 const props = defineProps({
   color: {
     type: String,
     default: 'neutral-7',
   },
+  dataTestId: {
+    type: String,
+    default: 'button-std'
+  },
   disable: {
     type: Boolean,
     default: false,
@@ -14,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
   label: {
     type: String,
     default: 'Button',
@@ -21,26 +31,20 @@ const props = defineProps({
   leftIcon: {
     type: String,
   },
-  rightIcon: {
-    type: String,
-  },
   outline: {
     type: Boolean,
     default: false,
   },
+  rightIcon: {
+    type: String,
+  },
   size: {
     type: String,
     default: 'md',
     validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  },
 })
 
-const emit = defineEmits(['onClick'])
-
 const handleClick = () => {
   return emit('onClick')
 }
@@ -65,11 +69,12 @@ const isFullWidth = computed(() => {
     class="u-btn q-py-none"
     :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
     :color="color"
+    :dataTestId="dataTestId"
     :disable="disable"
+    :flat="flat"
+    no-caps
     :unelevated="!outline"
     :outline="outline"
-    no-caps
-    :flat="flat"
     @click="handleClick"
   >
     <template #default>
@@ -77,9 +82,9 @@ const isFullWidth = computed(() => {
         <div class="row items-center no-wrap">
           <q-icon
             v-if="leftIcon"
-            left
             :class="leftIcon"
             class="q-mr-xs"
+            left
             size="1rem"
           />
 
@@ -88,9 +93,9 @@ const isFullWidth = computed(() => {
           </div>
           <q-icon
             v-if="rightIcon"
-            right
             :class="rightIcon"
             class="q-ml-xs"
+            right
             size="1rem"
           />
         </div>

package/src/components/core/UBtnToggle.vue

@@ -1,5 +1,9 @@
 <script setup>
 const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'toggle-btn',
+  },
   options: {
     type: Array,
     require: true,
@@ -10,16 +14,17 @@ const model = defineModel()
 
 <template>
   <q-btn-toggle
-    class="u-btn-toggle"
     v-model="model"
-    size="md"
-    text-color="dark"
-    unelevated
+    class="u-btn-toggle"
     color="white"
+    :dataTestId="dataTestId"
     no-caps
+    :options="options"
+    size="md"
     spread
+    text-color="dark"
     toggle-color="primary"
-    :options="options"
+    unelevated
   >
     <template
       v-for="(option, index) in options"
@@ -28,8 +33,8 @@ const model = defineModel()
     >
       <div class="row items-center no-wrap slot">
         <q-icon
-          :class="options[index].iconClass"
           v-if="options[index].iconClass"
+          :class="options[index].iconClass"
         />
         <div class="text-center text-caption-md">
           {{ options[index].name }}

package/src/components/core/UChip.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: String,
     default: 'Chip',
   },
+  dataTestId: {
+    type: String,
+    default: 'u-chip'
+  },
   dense: {
     type: Boolean,
     default: false,
@@ -51,12 +55,6 @@ const props = defineProps({
   },
 })
 
-const size = computed(() => {
-  if (props.dense) {
-    return 'xs'
-  }
-  return 'sm'
-})
 const avatarLabel = computed(() => {
   if (props.avatarLabel && props.avatarLabel.length > 2) {
     return props.avatarLabel.substring(0, 2)
@@ -64,6 +62,13 @@ const avatarLabel = computed(() => {
   return props.avatarLabel
 })
 
+const size = computed(() => {
+  if (props.dense) {
+    return 'xs'
+  }
+  return 'sm'
+})
+
 const handleClick = () => {
   return emit('onClick')
 }
@@ -76,6 +81,7 @@ const handleClick = () => {
     class="u-chip q-px-xs"
     :class="type"
     :aria-label="chipLabel"
+    :dataTestId="dataTestId"
     :dense="dense"
     :modelValue="modelValue"
     :removable="removable"