Merge pull request #183 from deetz99/scalar-draft

Add Scalar Module for OAS

web/site/CONTRIBUTING.md

@@ -124,6 +124,43 @@ Enhancement suggestions are tracked as [GitHub issues](https://github.com/bcgov/
 - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
 - **Explain why this enhancement would be useful** to most SBC Developer Site users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
 
+### Code Style and Standards
+
+- All code should be written in Vue 3 using the [composition API](https://vuejs.org/guide/extras/composition-api-faq.html), adhering to best practices and naming conventions.
+- Ensure all components, composables, utilities, and other code are written in TypeScript.
+- Follow the recommended [file structure](https://nuxt.com/docs/guide/directory-structure/nuxt) for Nuxt 3 projects.
+- Use ESLint to enforce code style and formatting.
+- Write unit tests for all components, composables, stores, utilities, etc using [Vitest](https://vitest.dev/) and [Nuxt Test Utils](https://nuxt.com/docs/getting-started/testing?utm_source=nuxt.com&utm_medium=aside-module&utm_campaign=nuxt.com), supplemented with [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) and aim for high test coverage.
+- Document all composables, and utilities with JSDoc comments.
+- Use [Tailwind CSS](https://tailwindcss.com/) for styling, and follow the project's established design system and utility classes.
+- Prefer using [Nuxt Modules](https://nuxt.com/modules) for adding functionality and integrations, and avoid custom implementations unless necessary.
+- Use environment variables for configuration settings, and never hard-code sensitive information or credentials in the codebase.
+- Regularly update dependencies to their latest versions to ensure security and stability.
+
+### Internationalization
+
+- Ensure all text content is translated using the i18n framework to manage translations.
+- Use the `$t` function for translation strings within your components.
+- Add new translation keys to the appropriate language files in the locales directory.
+- Follow the established patterns for structuring and naming translation keys.
+
+### Accessibility
+
+- Follow accessibility best practices to ensure that the application is usable by people with disabilities.
+- Use semantic HTML elements and attributes correctly.
+- Ensure that all interactive elements are keyboard accessible.
+- Provide appropriate ARIA roles, states, and properties where necessary.
+- Use color contrast checkers to ensure that text meets WCAG AA guidelines for contrast.
+- Test your changes with screen readers and other assistive technologies.
+
+### Responsive Design
+
+- Design and implement components with a mobile-first approach.
+- Use CSS media queries to adapt layouts for different screen sizes.
+- Ensure that components are flexible and can resize appropriately based on their container size.
+- Test your changes on various devices and screen sizes to ensure a consistent and functional user experience.
+- Use relative units (e.g., %, em, rem) rather than fixed units (e.g., px) to allow for better scalability and responsiveness.
+
 <!-- TODO
 ### Your First Code Contribution
 include Setup of env, IDE and typical getting started instructions?

web/site/app/app.config.ts

@@ -129,6 +129,10 @@ export default defineAppConfig({
         base: 'pointer-events-none relative inline-block rounded-full bg-white dark:bg-white shadow transform ring-0 transition ease-in-out duration-200'
       }
     },
+    tooltip: {
+      rounded: 'rounded',
+      base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative'
+    },
     verticalNavigation: {
       active: 'text-bcGovColor-activeBlue dark:text-white font-semibold',
       inactive: 'text-bcGovColor-midGray dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',

web/site/app/app.vue

@@ -20,8 +20,10 @@ useHead({
 // template ref for header component
 const headerRef = ref<InstanceType<typeof SbcHeaderMain> | null>(null)
 const footerRef = ref<InstanceType<typeof SbcFooter> | null>(null)
+const breadcrumbRef = ref<InstanceType<typeof SbcBreadcrumb> | null>(null)
 const { height: mainHeaderHeight } = useElementSize(headerRef)
 const { height: footerHeight } = useElementSize(footerRef)
+const { height: breadcrumbHeight } = useElementSize(breadcrumbRef)
 
 // fetch content files using composable from nuxt-content https://content.nuxt.com/composables/fetch-content-navigation
 const { data: docNavItems } = await useAsyncData(
@@ -59,6 +61,7 @@ provide('dashNavItems', dashboardNavItems)
 // provide element heights to offset headers/asides
 provide('mainHeaderHeight', mainHeaderHeight)
 provide('footerHeight', footerHeight)
+provide('breadcrumbHeight', breadcrumbHeight)
 
 // watch(user, async (currentUser, previousUser) => {
 //   // redirect user home if they sign in from the login page without a redirect
@@ -83,10 +86,38 @@ provide('footerHeight', footerHeight)
         $route.path.includes('dashboard') ? dashboardNavItems : undefined
       "
     />
-    <SbcBreadcrumb class="sticky inset-x-0 top-16 z-40 hidden md:block" />
+    <SbcBreadcrumb
+      v-if="!$route.path.includes('oas')"
+      ref="breadcrumbRef"
+      class="sticky inset-x-0 top-16 z-40 hidden md:block"
+    />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
     <SbcFooter ref="footerRef" class="z-50 mt-auto" />
   </div>
 </template>
+<style>
+  .light-mode {
+    --scalar-color-1: #212529 !important;
+    --scalar-color-2: #212529 !important;
+    --scalar-color-3: #212529 !important;
+    --scalar-color-accent: #1669bb !important;
+    --scalar-background-1: #f1f3f5 !important;
+    --scalar-background-2: #e9ecef !important;
+    --scalar-background-3: #dee2e6 !important;
+    --scalar-background-accent: #5369d20f !important;
+    --scalar-border-color: rgba(0, 0, 0, 0.08) !important;
+  }
+  .dark-mode {
+    --scalar-color-1: rgba(255, 255, 255, 0.81) !important;
+    --scalar-color-2: rgba(255, 255, 255, 0.443) !important;
+    --scalar-color-3: rgba(255, 255, 255, 0.282) !important;
+    --scalar-color-accent: #e0e7ed !important;
+    --scalar-background-1: #202020 !important;
+    --scalar-background-2: #272727 !important;
+    --scalar-background-3: #333333 !important;
+    --scalar-background-accent: #8ab4f81f !important;
+    --scalar-border-color: rgb(209 213 219 / 0.5) !important;
+  }
+</style>

web/site/app/components/Card/Navigation.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  icon: string
+  description: string
+  link: string
+}>()
+
+function goToItem () {
+  return navigateTo(props.link)
+}
+</script>
+<template>
+  <UCard
+    :ui="{
+      rounded: 'rounded',
+      base: 'cursor-pointer focus-within:ring-2 focus-within:ring-gray-500 hover:ring-2 hover:ring-gray-500 transition-colors',
+      body: {
+        base: 'w-[325px] h-full',
+        padding: 'sm:px-0 sm:py-0 p-0'
+      },
+    }"
+  >
+    <div
+      class="flex flex-col items-center justify-center gap-6 sm:px-10 sm:py-8 p-4"
+      @click="goToItem"
+    >
+      <h2 class="text-lg font-semibold uppercase text-bcGovColor-darkGray dark:text-white">
+        <a
+          :href="link"
+          class="focus:outline-none"
+        >
+          {{ title }}
+        </a>
+      </h2>
+      <div class="flex size-16 items-center justify-center rounded-full bg-bcGovColor-nonClickable">
+        <UIcon :name="icon" class="size-8 shrink-0 self-center text-white " />
+      </div>
+      <p class="text-sm text-bcGovColor-midGray dark:text-gray-400">
+        {{ description }}
+      </p>
+      <span class="font-semibold tracking-wide text-bcGovBlue-500 underline dark:text-white">
+        {{ $t('SbcMainCard.learnMore') }}
+      </span>
+    </div>
+  </UCard>
+</template>

web/site/app/components/Sbc/Breadcrumb.vue

@@ -17,7 +17,7 @@ const isBackButtonDisabled = computed(() => breadcrumbs.value.length <= 2)
 </script>
 <template>
   <div class="2xl: left-1 bg-bcGovColor-nonClickable sm:px-4">
-    <div class="m-auto flex w-full max-w-[1312px] items-center justify-between">
+    <div class="m-auto flex w-full max-w-[1360px] items-center justify-between">
       <div class="flex h-10 min-h-10 items-center">
         <UButton
           class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"

web/site/app/components/Sbc/Docs/SideNavigation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   navItems: AccordianNavItem[] | undefined,
-  isMobile: boolean | undefined,
+  isMobile?: boolean | undefined,
 }>()
 
 const getStartedNavItems = computed(() => {
@@ -15,8 +15,8 @@ const exceptgetStartedNavItems = computed(() => {
 </script>
 <template>
   <aside
-    class="mx-2 min-w-56 max-w-min border-bcGovColor-hairlinesOnWhite"
-    :class="{ 'border-r-2': !isMobile }"
+    class="mx-2 min-w-56 max-w-min overflow-y-auto border-bcGovColor-hairlinesOnWhite"
+    :class="{ 'border-r-2 pt-2': !isMobile }"
     data-testid="docs-side-navigation"
   >
     <div class="flex items-center text-base font-semibold  uppercase text-bcGovColor-midGray">

web/site/app/components/Sbc/Footer.vue

@@ -42,30 +42,28 @@ const links = [
     id="sbc-main-footer"
     class="inset-x-0 bottom-0 border-t-4 border-bcGovColor-navDivider bg-bcGovColor-footer p-2 dark:border-t dark:bg-bcGovColor-darkGray"
   >
-    <div class="mx-auto max-w-[1360px] items-center">
+    <div class="mx-auto max-w-[1360px] flex-wrap items-center justify-between gap-1 md:flex">
       <nav
         :aria-label="$t('SbcFooter.navLabel')"
-        class="flex flex-wrap gap-1 sm:flex-row sm:items-center sm:gap-4"
+        class="flex flex-wrap divide-x divide-bcGovBlue-100 sm:flex-row sm:items-center"
       >
         <NuxtLink
           v-for="link in links"
           :key="link.to"
           :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
           :target="link.target"
-          class="rounded-none border-r-[0.25px] border-bcGovBlue-100 p-1 pr-2 text-sm text-white hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
+          class="rounded-none px-2 text-sm text-white hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
         >
           {{ $t(link.label) }}
         </NuxtLink>
-        <span
-          class="ml-auto flex justify-center whitespace-nowrap italic text-bcGovColor-navDivider lg:pl-12"
-        >
-          {{ $t("SbcFooter.bcApp") }}
-          <span class="flex h-6 justify-center"><UButton
-            icon="i-heroicons-information-circle"
-            variant="link"
-          /></span>
-        </span>
+        <div />
       </nav>
+      <div class="flex items-center gap-1">
+        <span class="whitespace-nowrap text-sm italic text-bcGovColor-navDivider">{{ $t("SbcFooter.bcApp") }}</span>
+        <UTooltip :text="useRuntimeConfig().public.version">
+          <UIcon name="i-mdi-info-outline" class="size-5 shrink-0 text-white" />
+        </UTooltip>
+      </div>
     </div>
   </footer>
 </template>

web/site/app/components/Sbc/Header/Main.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-const {
-  mainLinks,
-  openMobileNav
-  // loggedInUserOptions, leaving out auth options for now
-  // loggedOutUserOptions
-} = useSbcNav()
-// const { t } = useI18n()
-// const localePath = useLocalePath()
+const localePath = useLocalePath()
+const { openMobileNav } = useSbcNav()
 const headerRef = ref<HTMLElement | null>(null)
 // const user = useCurrentUser()
 // expose template ref to access properties in parent
@@ -18,34 +12,19 @@ defineExpose({
   <header
     id="sbc-main-header"
     ref="headerRef"
-    class="2xl: left-1 h-16 border-b-4 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
+    class="h-16 border-b-4 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
   >
     <nav
-      class="m-auto flex w-full max-w-[1312px] items-center justify-between"
+      class="m-auto flex w-full max-w-[1360px] items-center justify-between"
       :aria-label="$t('SbcHeader.navLabel')"
     >
-      <div
-        class="flex h-12 min-h-12 items-center gap-3 py-2.5 sm:gap-5 md:gap-5 lg:gap-7"
-      >
-        <div class="h-12">
-          <NuxtLinkLocale to="/" tabindex="-1" aria-hidden="true" class="mr-2">
-            <SbcLogo />
-          </NuxtLinkLocale>
-        </div>
-        <div
-          v-for="link in mainLinks"
-          :key="link.to"
-          class="flex h-11 w-24 cursor-pointer text-left font-sans text-sm font-semibold leading-5 lg:h-7 lg:w-60 lg:text-lg lg:font-bold lg:leading-7"
-        >
-          <NuxtLinkLocale :to="link.to">
-            <span v-if="link.label === 'Service BC Connect'">
-              <span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
-            </span>
-            <!-- <span v-else class="text-white">
-              {{ link.label }}
-            </span> -->
-          </NuxtLinkLocale>
-        </div>
+      <div class="flex h-full items-center gap-2 sm:gap-5">
+        <NuxtLink :to="localePath('/')" tabindex="-1" aria-hidden="true">
+          <SbcLogo />
+        </NuxtLink>
+        <NuxtLink :to="localePath('/')" class="text-sm font-bold leading-5 lg:text-lg lg:leading-7">
+          <span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
+        </NuxtLink>
       </div>
       <div class="flex gap-1">
         <!-- <ColorModeSelect /> -->

web/site/app/components/Sbc/MobileNav.vue

@@ -3,14 +3,14 @@ defineProps<{
   accordianNavItems?: AccordianNavItem[] | undefined;
 }>()
 // const user = useCurrentUser()
-const { currentDir, tocLinks } = useDocPageData()
 const {
   mainLinks,
   mobileNavRef,
   // loggedInUserOptions, leave out auth options for now
   // loggedOutUserOptions,
   closeMobileNav
 } = useSbcNav()
+const localePath = useLocalePath()
 </script>
 <template>
   <UModal
@@ -41,33 +41,13 @@ const {
     >
       <template #header>
         <div class="m-auto flex w-full items-center justify-between">
-          <div
-            class="flex h-12 min-h-12 items-center gap-3 py-2.5 sm:gap-5 md:gap-5 lg:gap-7"
-          >
-            <div class="flex">
-              <NuxtLinkLocale
-                to="/"
-                tabindex="-1"
-                aria-hidden="true"
-                class="mr-2"
-              >
-                <SbcLogo />
-              </NuxtLinkLocale>
-            </div>
-            <div
-              v-for="link in mainLinks"
-              :key="link.to"
-              class="flex h-11 w-24 cursor-pointer text-left font-sans text-sm font-semibold leading-5 lg:h-7 lg:w-60 lg:text-lg lg:font-bold lg:leading-7"
-            >
-              <NuxtLinkLocale :to="link.to">
-                <span v-if="link.label === 'Service BC Connect'">
-                  <span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
-                </span>
-                <!-- <span v-else class="text-white">
-                    {{ link.label }}
-                  </span> -->
-              </NuxtLinkLocale>
-            </div>
+          <div class="flex h-full items-center gap-2 sm:gap-5">
+            <NuxtLink :to="localePath('/')" tabindex="-1" aria-hidden="true">
+              <SbcLogo />
+            </NuxtLink>
+            <NuxtLink :to="localePath('/')" class="text-sm font-bold leading-5 lg:text-lg lg:leading-7">
+              <span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
+            </NuxtLink>
           </div>
           <div class="flex gap-1">
             <!-- <ColorModeSelect />
@@ -127,41 +107,8 @@ const {
         </div>
       </template>
       <UVerticalNavigation :links="mainLinks" />
-      <UDivider
-        v-show="tocLinks.length && $route.path.includes('products')"
-        class="my-4"
-      />
-      <UAccordion
-        v-show="tocLinks.length && $route.path.includes('products')"
-        :items="[{ label: 'Table of Contents', defaultOpen: true }]"
-      >
-        <!-- default slot is the accordian button itself, so we use a custom button variant here to match theme -->
-        <template #default="{ open }">
-          <UButton variant="accordian_trigger">
-            <span class="truncate">Table of Contents</span>
-
-            <template #trailing>
-              <UIcon
-                name="i-mdi-menu-up"
-                class="ms-auto size-7 transition-transform duration-200"
-                :class="[!open && 'rotate-180']"
-              />
-            </template>
-          </UButton>
-        </template>
-        <!-- item slot is the content inside each accordian, pass toc component into item slot of accordian -->
-        <template #item>
-          <SbcDocsTableOfContents
-            class="-mt-2 ml-4"
-            :hide-label="true"
-            :toc-links="tocLinks"
-            :current-dir="currentDir"
-            @click="closeMobileNav"
-          />
-        </template>
-      </UAccordion>
-      <UDivider class="my-4" />
-      <SbcDocsSideNavigation :nav-items="accordianNavItems" :is-mobile="true" />
+      <UDivider v-if="$route.path.includes('products')" class="my-4" />
+      <SbcDocsSideNavigation v-if="$route.path.includes('products')" :nav-items="accordianNavItems" :is-mobile="true" />
     </UCard>
   </UModal>
 </template>