@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/core/UBadgeStd.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  dataTestId: {
+    type: String,
+    default: 'badge-std'
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['xxs', 'xs', 'sm', 'md', 'lg'].includes(val),
+  },
+  type: {
+    type: String,
+    default: 'basic',
+    validator: (val) => ['basic', 'indicator'].includes(val),
+  },
+})
+
+const currentColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-6'
+  }
+  return props.color
+})
+</script>
+
+<template>
+  <q-badge
+    class="u-badge"
+    :class="[
+      type === 'basic' ? 'type-basic' : 'type-indicator justify-center',
+      `size-${size}`,
+      type === 'basic'
+        ? size === 'md'
+          ? `text-overline-xs`
+          : `text-overline-sm`
+        : '',
+    ]"
+    :aria-label="label"
+    :color="currentColor"
+    :dataTestId="dataTestId"
+    rounded
+    tabindex="0"
+  >
+    <div v-if="type === 'basic'">
+      {{ label }}
+    </div>
+    <slot name="default" />
+  </q-badge>
+</template>
+
+<style lang="sass">
+.u-badge
+  min-height:0px
+
+  &.size-xxs
+    width: $xs
+    height: $xs
+    padding: 0px
+
+  &.size-xs
+    width: $sm
+    height: $sm
+    padding: 0px
+
+  &.size-sm
+    width: $ba
+    height: $ba
+    padding: 0px
+
+  &.size-md
+    letter-spacing: 0.24px
+    line-height: 1.013rem
+
+  &.size-lg
+    width: $md
+    height: $ms
+    justify-content: center
+    line-height: 0
+
+  &.type-basic
+    border: 1.5px solid $neutral-1
+
+  &.type-indicator
+    border: 1px solid $neutral-1
+</style>

package/src/components/core/UBannerStd.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { computed } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['primaryAction', 'secondaryAction'])
+
+const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'banner-std',
+  },
+  icon: {
+    type: String,
+    default: 'fa-kit-duotone fa-circle-info',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  primaryActionLabel: {
+    type: String,
+  },
+  secondaryActionLabel: {
+    type: String,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  showBorder: {
+    type: Boolean,
+    default: true,
+  },
+  type: {
+    type: String,
+    default: 'info',
+  },
+})
+
+const $screen = useScreenType()
+
+const bordered = computed(() => {
+  if (props.showBorder) {
+    return 'bordered'
+  }
+  return ''
+})
+
+const handlePrimaryActionClick = () => {
+  emit('primaryAction')
+}
+
+const handleSecondaryActionClick = () => {
+  emit('secondaryAction')
+}
+</script>
+
+<template>
+  <q-banner
+    v-if="show && (message.trim() || label.trim())"
+    :class="[
+      `u-banner u-banner-${type}`,
+      !icon ? 'no-padding-label' : '',
+      bordered,
+      $screen.isMobile ? 'u-banner-sm' : 'u-banner-md',
+    ]"
+    :dataTestId="dataTestId"
+    inline-actions
+    tabindex="0"
+  >
+    <template v-slot:avatar>
+      <q-icon
+        v-if="icon"
+        :class="icon"
+        alt="Banner Info Icon"
+        aria-label="Banner Icon"
+        :color="type"
+        size="sm"
+      />
+    </template>
+
+    <div>
+      <span v-if="!label" class="text-caption-lg">{{ message }}</span>
+      <div v-else class="column">
+        <span class="text-caption-lg">{{ label }}</span>
+        <span class="text-body-sm">{{ message }}</span>
+      </div>
+    </div>
+
+    <template v-slot:action>
+      <div :class="['row', $screen.isMobile ? 'full-width q-mt-ba' : '']">
+        <u-btn-std
+          v-if="secondaryActionLabel"
+          :color="type"
+          :label="secondaryActionLabel"
+          :outline="true"
+          size="md"
+          @onClick="handleSecondaryActionClick"
+        />
+        <u-btn-std
+          v-if="primaryActionLabel"
+          :color="type"
+          :label="primaryActionLabel"
+          size="md"
+          @onClick="handlePrimaryActionClick"
+        />
+      </div>
+    </template>
+  </q-banner>
+</template>
+
+<style lang="sass">
+.u-banner
+  .q-banner__avatar
+    align-self: center
+
+  .q-banner__content
+    padding-left: $xs !important
+    word-break: break-word
+    overflow-wrap: break-word
+
+.u-banner-sm
+  flex-wrap: wrap
+  padding: $ba
+  .q-banner__actions
+    width: 100%
+    padding-left: 0px !important
+    >div
+      gap: $sm
+    .q-btn
+      flex: 1
+      min-width: 0
+
+.u-banner-md
+  padding: $sm
+  .q-banner__actions
+    padding-left: $xs
+    >div
+      gap: $xs !important
+
+.u-banner-positive
+  background: $green-1 !important
+  color: $green-7 !important
+  &.bordered
+    border: 0.094rem solid $green-7
+
+.u-banner-info
+  background: $purple-1 !important
+  color: $info !important
+  &.bordered
+    border: 0.094rem solid $purple-7
+
+.u-banner-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+  &.bordered
+    border: 0.094rem solid $orange-7
+
+.u-banner-accent
+  background: $red-1 !important
+  color: $red-7 !important
+  &.bordered
+    border: 0.094rem solid $red-7
+
+.u-banner-primary
+  background: $blue-1 !important
+  color: $primary !important
+  &.bordered
+    border: 0.094rem solid $primary
+
+.no-padding-label
+  .q-banner__content
+    padding-left: 0px !important
+
+.bordered
+  border-radius: $xs
+</style>

package/src/components/core/UBreadCrumbs.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useScreenType } from '../../composables/useScreenType'
+import UTooltip from './UTooltip.vue'
+
+const props = defineProps({
+  activeColor: {
+    type: String,
+    default: 'primary',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+  dataTestId: {
+    type: String,
+    default: 'breadcrumbs-std',
+  },
+  fontTypo: {
+    type: String,
+    default: 'text-caption-sm',
+  },
+  links: {
+    type: Array,
+    default: () => [],
+  },
+  showActiveRoute: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const router = useRouter()
+const $screen = useScreenType()
+
+const isOverflowing = ref(false)
+const textEl = ref(null)
+
+const currentLink = computed(() => {
+  return props.links[props.links.length - 1]
+})
+
+const lastTwoLinks = computed(() => {
+  return props.links.slice(-2)
+})
+
+const previousLinks = computed(() => {
+  if (props.links.length < 2) return []
+  return props.links.slice(0, -1).reverse()
+})
+
+const previousLinksForDesktop = computed(() => {
+  if (props.links.length <= 2) return []
+  return props.links.slice(0, -2).reverse()
+})
+
+const showMenuDropdown = computed(() => {
+  if ($screen.value.isMobile) {
+    if (previousLinks.value.length) {
+      return true
+    }
+  } else {
+    if (previousLinksForDesktop.value.length) {
+      return true
+    }
+  }
+  return false
+})
+
+const checkOverflow = () => {
+  if (textEl.value) {
+    isOverflowing.value = textEl.value.scrollWidth > textEl.value.clientWidth
+  }
+}
+
+const onClick = (link) => {
+  if (link.to) router.push(link.to)
+}
+</script>
+
+<template>
+  <q-breadcrumbs
+    v-bind="$attrs"
+    class="u-breadcrumb"
+    :active-color="showActiveRoute ? activeColor : 'text-dark'"
+    :align="align"
+    :dataTestId="dataTestId"
+    gutter="none"
+    separator-color="text-dark"
+  >
+    <template v-slot:separator>
+      <span :class="fontTypo">/</span>
+    </template>
+
+    <!-- Dropdown for previous links -->
+    <q-breadcrumbs-el v-if="showMenuDropdown">
+      <span :class="`${fontTypo} cursor-pointer`">...</span>
+      <q-menu class="breadcrumb-menu">
+        <q-list class="u-menu-dropdown">
+          <q-item
+            v-for="(link, i) in $screen.isMobile
+              ? previousLinks
+              : previousLinksForDesktop"
+            class="u-menu-link"
+            clickable
+            :key="i"
+            @click="onClick(link)"
+          >
+            <q-item-section
+              :class="`text-body-sm text-${
+                showActiveRoute ? activeColor : 'dark'
+              }`"
+            >
+              {{ link.label }}
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-breadcrumbs-el>
+
+    <!-- For mobile -->
+
+    <q-breadcrumbs-el
+      v-if="currentLink && $screen.isMobile"
+      :class="fontTypo"
+      :aria-label="currentLink.label"
+      @click="onClick"
+    >
+      <div class="ellipsis-label" ref="textEl" @mouseenter="checkOverflow">
+        {{ currentLink?.label }}
+      </div>
+      <UTooltip v-if="isOverflowing" :description="currentLink?.label" />
+    </q-breadcrumbs-el>
+
+    <!-- For Desktop and Tablet -->
+
+    <template v-if="lastTwoLinks && !$screen.isMobile">
+      <q-breadcrumbs-el
+        v-for="(link, index) in lastTwoLinks"
+        :class="`${fontTypo}`"
+        :aria-label="link.label"
+        :key="index"
+        :to="link.to"
+        @click="onClick"
+      >
+        <div class="ellipsis-label" ref="textEl" @mouseenter="checkOverflow">
+          {{ link.label }}
+        </div>
+        <UTooltip v-if="isOverflowing" :description="link.label" />
+      </q-breadcrumbs-el>
+    </template>
+  </q-breadcrumbs>
+</template>
+
+<style lang="sass">
+.u-breadcrumb
+  .q-breadcrumbs__separator
+    margin-left: $xs
+    margin-right: $xs
+  .ellipsis-label
+    max-width: 80vw
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+.breadcrumb-menu
+  .u-menu-dropdown
+    .u-menu-link.q-item
+      padding: $xxs $xs
+      gap: 0px
+</style>

package/src/components/core/UBtnIcon.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
+const props = defineProps({
+  anchor: {
+    type: String,
+    default: 'center left',
+  },
+  ariaLabel: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  dataTestId: {
+    type: String,
+    default: 'button-icon',
+  },
+  iconClass: {
+    type: String,
+    required: true,
+    default: 'fa-kit-duotone fa-circle-bolt',
+  },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  self: {
+    type: String,
+    default: 'center end',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  tooltip: {
+    type: String,
+    default: '',
+  },
+  tooltipPosition: {
+    type: String,
+    default: 'top',
+  },
+})
+
+const btnClass = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-4'
+  }
+  return props.color
+})
+const iconColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-9'
+  }
+  return props.color
+})
+const iconSize = computed(() => {
+  if (props.size === 'sm') {
+    return 'xs'
+  }
+  if (props.size === 'md') {
+    return 'sm'
+  }
+  if (props.size === 'lg') {
+    return 'md'
+  }
+  return props.size
+})
+
+const handleClick = () => {
+  return emit('onClick')
+}
+</script>
+
+<template>
+  <q-btn
+    :class="`u-btn-icon size-${size} ${btnClass}`"
+    :aria-label="ariaLabel"
+    :dataTestId="dataTestId"
+    flat="flat"
+    :round="round"
+    @click="handleClick"
+  >
+    <template #default>
+      <q-icon
+        :class="`${iconClass} size-${size}`"
+        :aria-hidden="true"
+        :color="iconColor"
+        :size="iconSize"
+      />
+
+      <UTooltip
+        v-if="tooltip"
+        :anchor="anchor"
+        :description="tooltip"
+        :offset="offset"
+        :self="self"
+      />
+      <slot name="menu" />
+    </template>
+  </q-btn>
+</template>
+
+<style lang="sass">
+.u-btn-icon
+  &.neutral-4
+    color: $neutral-4
+
+  &.transparent
+    color: $neutral-1
+
+  &.size-sm
+    height: $md
+    width: $md
+
+  &.size-md
+    height: $lg
+    width: $lg
+
+  &.size-lg
+    height: $xl
+    width: $xl
+
+  .q-icon
+    &.text-transparent
+      color: $neutral-1 !important
+
+    &.size-sm
+      height: $ba
+      width: $ba
+
+    &.size-md
+      height: $ms
+      width: $ms
+
+    &.size-lg
+      height: $md
+      width: $md
+    &.neutral-9
+      color: $neutral-9
+
+  &.accent:hover
+    background: $accent-bg-hover
+
+.icon-tooltip
+  background: $dark
+  border-radius: $xxs
+  padding: $xs $sm
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+</style>