Merge pull request #26 from deetz99/ux-updates

Nuxt Core Layer - Ux updates
bcgov · Sep 24, 2024 · 6c3317a · 6c3317a
2 parents 9904676 + 3fb5a41
commit 6c3317a
Show file tree

Hide file tree

Showing 41 changed files with 1,006 additions and 201 deletions.
diff --git a/nuxt/layers/core/.playground/app/pages/index.vue b/nuxt/layers/core/.playground/app/pages/index.vue
@@ -2,14 +2,22 @@
 const { isAuthenticated, login, logout } = useKeycloak()
 const ldStore = useConnectLaunchdarklyStore()
 
+// setBreadcrumbs([
+//   { label: 'test', to: useRuntimeConfig().public.registryHomeURL },
+//   { label: 'test 2', to: useRuntimeConfig().public.registryHomeURL },
+//   { label: 'test 3' }
+// ])
+
 onMounted(() => {
   const test = ldStore.getStoredFlag('allowable-business-passcode-types')
   console.log('test: ', test)
+  const route = useRoute()
+  console.log(route)
 })
 </script>
 <template>
   <div class="flex flex-col gap-8 border border-black px-2 py-8">
-    <h1 class="text-3xl font-semibold text-bcGovColor-darkGray">
+    <h1>
       Testing
     </h1>
     <ClientOnly>

diff --git a/nuxt/layers/core/app/app.config.ts b/nuxt/layers/core/app/app.config.ts
@@ -5,6 +5,11 @@ export default defineAppConfig({
   ui: {
     primary: 'blue',
     gray: 'bcGovGray',
+    alert: {
+      variant: {
+        system_banner: 'bg-bcGovColor-navDivider text-bcGovColor-darkGray max-w-bcGovLg mx-auto'
+      }
+    },
     button: {
       size: {
         bcGov: 'text-sm'
@@ -40,6 +45,25 @@ export default defineAppConfig({
     },
     chip: {
       base: 'absolute rounded-full ring-0 dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
+    },
+    dropdown: {
+      container: 'overflow-clip rounded-md shadow-md',
+      rounded: 'rounded-md',
+      padding: 'py-0 px-0',
+      width: 'min-w-[250px]',
+      height: 'max-h-[75dvh]',
+      item: {
+        rounded: 'rounded-none',
+        base: 'flex items-center gap-2 w-full hover:text-bcGovColor-activeBlue hover:bg-bcGovColor-gray1',
+        padding: 'px-4 py-3',
+        disabled: 'cursor-default font-semibold opacity-100 hover:bg-white pt-0',
+        active: 'bg-bcGovColor-gray1 text-bcGovColor-activeBlue',
+        icon: {
+          base: 'flex-shrink-0 size-4 text-bcGovColor-activeBlue',
+          active: 'text-bcGovColor-activeBlue',
+          inactive: 'text-bcGovColor-midGray'
+        }
+      }
     }
   }
 })

diff --git a/nuxt/layers/core/app/assets/css/main.css b/nuxt/layers/core/app/assets/css/main.css
@@ -7,28 +7,23 @@
   font-style: normal;
   font-weight: 400;
   src: url("BCGovFonts/BCSans-Regular.woff2") format("woff2"),
-    /* Optimized for very modern browsers */
-      url("BCGovFonts/BCSans-Regular.woff") format("woff"),
-    local("BCSans"); /* Modern Browsers */
+       url("BCGovFonts/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
 @font-face {
   font-family: "BCSans";
   font-style: italic;
+  font-weight: 400;
   src: url("BCGovFonts/BCSans-Italic.woff2") format("woff2"),
-    /* Optimized for very modern browsers */
-      url("BCGovFonts/BCSans-Italic.woff") format("woff"),
-    local("BCSans"); /* Modern Browsers */
+       url("BCGovFonts/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 @font-face {
   font-family: "BCSans";
   font-weight: 700;
   src: url("BCGovFonts/BCSans-Bold.woff2") format("woff2"),
-    /* Optimized for very modern browsers */ url("BCGovFonts/BCSans-Bold.woff")
-      format("woff"),
-    local("BCSans"); /* Modern Browsers */
+       url("BCGovFonts/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -37,8 +32,64 @@
   font-style: italic;
   font-weight: 700;
   src: url("BCGovFonts/BCSans-BoldItalic.woff2") format("woff2"),
-    /* Optimized for very modern browsers */
-      url("BCGovFonts/BCSans-BoldItalic.woff") format("woff"),
-    local("BCSans"); /* Modern Browsers */
+       url("BCGovFonts/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
+
+html,
+body {
+  min-height: 100dvh; /* Modern browsers */
+  min-height: 100vh;
+  font-family: 'BCSans', Verdana, Arial, sans-serif;
+  font-size: 0.875rem;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media (min-width: 960px) {
+  html,
+  body {
+    font-size: 1rem;
+  }
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply text-bcGovGray-900;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply font-bold;
+  }
+
+  h1,
+  h2 {
+    @apply leading-9;
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-lg;
+  }
+
+  h3 {
+    @apply text-base;
+  }
+
+  p {
+    @apply font-normal text-bcGovColor-midGray;
+  }
+
+  td,
+  th {
+    @apply text-gray-900 text-sm;
+  }
+}
diff --git a/nuxt/layers/core/app/components/Connect/Breadcrumb.vue b/nuxt/layers/core/app/components/Connect/Breadcrumb.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { BreadcrumbLink } from '#ui/types'
+const { t } = useI18n()
+
+const breadcrumbs = computed<BreadcrumbLink[]>(() => {
+  const route = useRoute()
+
+  if (route.meta.breadcrumbs) {
+    return route.meta.breadcrumbs
+  } else {
+    return [{ label: t('ConnectBreadcrumb.default') }]
+  }
+})
+
+function resolveBackHref () {
+  const bcLength = breadcrumbs.value.length
+
+  if (bcLength > 1) {
+    // return the second to last breadcrumb link
+    return breadcrumbs.value[bcLength - 2]?.to ?? breadcrumbs.value[bcLength - 2]?.href
+  } else {
+    return ''
+  }
+}
+</script>
+<template>
+  <div class="bg-blue-350">
+    <div class="mx-auto flex max-w-bcGovLg items-center divide-x divide-gray-300 px-4 py-2">
+      <UButton
+        class="mr-3 mt-px size-[28px] rounded-full px-1"
+        color="white"
+        :disabled="breadcrumbs.length < 2"
+        icon="i-mdi-arrow-left"
+        :aria-label="$t('ConnectBreadcrumb.backBtn')"
+        data-cy="crumb-back"
+        :to="resolveBackHref()"
+      />
+      <UBreadcrumb
+        :links="breadcrumbs"
+        :aria-label="$t('ConnectBreadcrumb.arialabel')"
+        class="pl-3"
+        :ui="{
+          li: 'flex items-center gap-x-1.5 text-xs text-white leading-6 min-w-0',
+          base: 'flex items-center gap-x-1.5 group font-normal min-w-0',
+          label: 'block truncate tracking-wide',
+          active: 'text-white',
+          inactive: 'text-white underline hover:text-white',
+          icon: {
+            base: 'flex-shrink-0 w-3 h-3 text-white',
+            active: '',
+            inactive: '',
+          },
+        }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Footer.vue b/nuxt/layers/core/app/components/Connect/Footer.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+const version = useRuntimeConfig().public.version
 const localePath = useLocalePath()
 const links = [
   {
     label: 'ConnectFooter.home',
     to: localePath('/')
   },
+  {
+    label: 'ConnectFooter.releaseNotes',
+    to: 'https://www.release-notes.bcregistry.gov.bc.ca',
+    target: '_blank'
+  },
   {
     label: 'ConnectFooter.disclaimer',
     to: 'https://www2.gov.bc.ca/gov/content/home/disclaimer',
@@ -32,21 +38,34 @@ const links = [
   <footer
     id="connect-main-footer"
     data-testid="connect-main-footer"
-    class="border-t-2 border-bcGovColor-navDivider bg-bcGovColor-footer p-2 dark:border-t dark:bg-bcGovColor-darkGray"
+    class="border-t-2 border-bcGovColor-navDivider bg-bcGovColor-footer dark:border-t dark:bg-bcGovColor-darkGray"
   >
-    <div class="mx-auto flex max-w-bcGovLg items-center justify-between">
-      <nav :aria-label="$t('ConnectFooter.navLabel')" class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4">
-        <NuxtLink
-          v-for="link in links"
-          :key="link.to"
-          :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
-          :target="link.target"
-          class="rounded p-1 text-sm text-white hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
-        >
-          {{ $t(link.label) }}
-        </NuxtLink>
+    <div class="mx-auto flex max-w-bcGovLg items-center justify-between px-2 py-4">
+      <nav :aria-label="$t('ConnectFooter.navLabel')" class="flex grow">
+        <ul class="list-none flex-col gap-1 p-0 sm:-ml-2 sm:flex-row sm:flex-wrap">
+          <li
+            v-for="link in links"
+            :key="link.to"
+            class="flex-col gap-2 border-r-0 pr-2 last:mr-0 last:border-r-0 sm:mr-2 sm:inline-block sm:flex-none sm:border-r sm:first:ml-2"
+          >
+            <NuxtLink
+              :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
+              :target="link.target"
+              class="rounded p-1 text-sm text-white hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
+            >
+              {{ $t(link.label) }}
+            </NuxtLink>
+          </li>
+        </ul>
       </nav>
-      <span class="whitespace-nowrap italic text-bcGovColor-navDivider">{{ $t('ConnectFooter.bcApp') }}</span>
+      <div class="-mb-1">
+        <span class="italic text-bcGovColor-navDivider">{{ $t('ConnectFooter.bcApp') }}</span>
+        <ConnectToggletip
+          id="app-version-info"
+          :text="version"
+          class="ml-1 inline-flex items-baseline"
+        />
+      </div>
     </div>
   </footer>
 </template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue
@@ -14,21 +14,21 @@ defineProps({
         background: 'bg-blue-300 dark:bg-[#E0E7ED]',
         text: 'font-semibold leading-none text-white dark:text-bcGovColor-darkGray truncate',
         placeholder: 'font-semibold leading-none text-white truncate dark:text-bcGovColor-darkGray text-xl',
-        rounded: 'rounded-sm'
+        rounded: 'rounded-none'
       }"
     />
     <div class="mx-2 flex flex-col text-left font-normal tracking-wide">
       <span
-        class="line-clamp-1 max-w-72 overflow-hidden text-ellipsis text-sm"
+        class="line-clamp-1 overflow-hidden text-ellipsis text-sm"
         :class="{'text-white': theme === 'header', 'text-bcGovColor-darkGray': theme === 'dropdown'}"
       >
-        {{ username.toLocaleUpperCase($i18n.locale) }}
+        {{ username }}
       </span>
       <span
-        class="line-clamp-1 max-w-72 overflow-hidden text-ellipsis text-xs"
+        class="line-clamp-1 overflow-hidden text-ellipsis text-xs opacity-75"
         :class="{'text-gray-300': theme === 'header', 'text-bcGovColor-midGray': theme === 'dropdown'}"
       >
-        {{ accountName.toLocaleUpperCase($i18n.locale) }}
+        {{ accountName }}
       </span>
     </div>
   </div>

diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue
@@ -15,18 +15,7 @@ const accountStore = useConnectAccountStore()
       id="account-options-dropdown"
       :items="loggedInUserOptions"
       :ui="{
-        container: 'z-20 group rounded-md overflow-clip',
-        width: 'min-w-fit',
-        height: 'max-h-[75vh]',
-        item: {
-          base: 'group flex items-center gap-4 w-full',
-          disabled: 'cursor-default opacity-100 font-semibold',
-          icon: {
-            base: 'flex-shrink-0 size-6',
-            active: 'text-gray-500 dark:text-gray-400',
-            inactive: 'text-bcGovColor-midGray'
-          },
-        }
+        padding: 'py-3 px-0'
       }"
     >
       <!-- display full name/account/avatar on large screens -->
@@ -73,12 +62,12 @@ const accountStore = useConnectAccountStore()
 
       <!-- account setting slot -->
       <template #settings>
-        <span class="text-bcGovColor-darkGray">{{ $t('label.accountSettings').toLocaleUpperCase($i18n.locale) }}</span>
+        <span class="text-bcGovColor-darkGray">{{ $t('label.accountSettings') }}</span>
       </template>
 
       <!-- switch accounts slot -->
       <template #accounts>
-        <span class="text-bcGovColor-darkGray">{{ $t('label.switchAccount').toLocaleUpperCase($i18n.locale) }}</span>
+        <span class="text-bcGovColor-darkGray">{{ $t('label.switchAccount') }}</span>
       </template>
     </UDropdown>
   </div>

diff --git a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue b/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue
@@ -16,12 +16,16 @@ const isLargeScreen = useMediaQuery('(min-width: 1024px)')
       id="logged-out-options-dropdown"
       :items="isLargeScreen ? loggedOutUserOptions : loggedOutUserOptionsMobile"
       :ui="{
+        container: 'min-w-[300px]',
+        padding: 'py-3 px-0',
         item: {
-          base: 'group flex items-center gap-4 w-full',
-          disabled: 'cursor-default opacity-100',
+          rounded: 'rounded-none',
+          base: 'flex items-center gap-4 w-full hover:text-bcGovColor-activeBlue hover:bg-bcGovColor-gray1',
+          padding: 'px-4 py-3',
+          disabled: 'cursor-default opacity-100 hover:bg-white py-0',
           icon: {
-            base: 'flex-shrink-0 size-6',
-            active: 'text-gray-500 dark:text-gray-400',
+            base: 'flex-shrink-0 size-5 text-bcGovColor-activeBlue',
+            active: 'text-bcGovColor-activeBlue',
             inactive: 'text-bcGovColor-midGray',
           },
         }
@@ -48,7 +52,7 @@ const isLargeScreen = useMediaQuery('(min-width: 1024px)')
       />
 
       <template #method>
-        <span class="font-semibold text-bcGovColor-darkGray"> {{ $t('label.selectLoginMethod') }} </span>
+        <span class="pointer-events-none text-sm font-semibold text-bcGovColor-darkGray"> {{ $t('label.selectLoginMethod') }} </span>
       </template>
 
       <!-- whats new slot, only shows on small screens -->