documents page design updates

bcgov · Dec 17, 2024 · deb67dd · deb67dd
1 parent 3718626
commit deb67dd
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 47 deletions.
diff --git a/web/site/app/app.config.ts b/web/site/app/app.config.ts
@@ -29,9 +29,9 @@ export default defineAppConfig({
         }
       },
       variant: {
-        accordian_trigger: 'text-bcGovColor-darkGray font-semibold dark:text-white dark:hover:bg-bcGovBlue-100/10 hover:bg-bcGovBlue-50 disabled:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-white transition-colors duration-300 ease-in-out',
+        accordian_trigger: 'text-bcGovColor-midGray font-normal text-md dark:text-white dark:hover:bg-bcGovBlue-100/10 hover:bg-bcGovBlue-50 disabled:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-white transition-colors duration-300 ease-in-out',
         link: 'text-{color}-500 tracking-wide text-base hover:text-{color}-600 disabled:text-{color}-500 dark:text-white dark:hover:text-bcGovBlue-300 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-white',
-        solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-[#E0E7ED] dark:hover:bg-bcGovGray-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-white',
+        solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-[#E0E7ED] dark:hover:bg-bcGovGray-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-white rounded',
         outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-[#E0E7ED] hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-[#E0E7ED]/25 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-white'
       }
     },

diff --git a/web/site/app/components/Sbc/Docs/AccordianNavigation.vue b/web/site/app/components/Sbc/Docs/AccordianNavigation.vue
@@ -31,18 +31,23 @@ defineProps<{
       <template #item="{ item }">
         <UVerticalNavigation
           :aria-label="item.label"
-          class="mx-2"
+          class="mx-6 min-h-9 items-center border-s-2 border-bcGovGray-300"
           :links="item.children"
           :ui="{
-            label: 'text-ellipsis relative',
-            wrapper: 'border-s border-gray-500 dark:border-[#94A3B8] space-y-2',
+            label: 'text-sm relative',
+            wrapper: 'dark:border-[#94A3B8]',
             base: 'group block border-s -ms-px leading-6 before:hidden focus-visible:rounded',
-            padding: 'p-0 ps-4',
+            padding: 'px-4 py-2',
             rounded: '',
-            font: '',
+            font: 'font-sans font-normal text-lg',
             ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-white',
-            active: 'text-primary-500 dark:text-[#7BB5EF] border-[#94A3B8] dark:border-[#7BB5EF] font-semibold',
-            inactive: 'border-transparent hover:border-gray-900 dark:hover:border-white text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'
+            active: 'text-primary-500 bg-bcGovColor-lightBlue dark:text-[#7BB5EF] border-[#94A3B8] dark:border-[#7BB5EF] font-semibold',
+            inactive: 'border-transparent hover:bg-bcGovColor-hairlinesOnWhite dark:hover:border-white  text-gray-700 hover:bg-bcGovBlue-50 hover:text-bcGovColor-activeBlue hover:font-semibold dark:text-gray-400 dark:hover:text-white',
+            width: 'w-[208px]',
+            height: 'h-[36px]',
+            gap: 'gap-2.5',
+            border: 'border-b-0 border-l-0 border-t-0 border-r',
+            opacity: 'opacity-0'
           }"
         />
       </template>

diff --git a/web/site/app/components/Sbc/Docs/NextPrevButton.vue b/web/site/app/components/Sbc/Docs/NextPrevButton.vue
@@ -11,15 +11,16 @@ const localePath = useLocalePath()
   <UButton
     :aria-label="`${handleContentDirectoryLabel(page?._path?.split('/')[2] ?? '')}, ${page?.title}`"
     :to="localePath(page?._path || '/')"
-    variant="outline"
-    color="gray"
-    class="w-full sm:w-auto"
+    :variant="direction === 'prev' ? 'outline' : 'solid'"
+    class="flex h-11 w-48 items-center text-wrap align-middle"
   >
-    <UIcon v-if="direction === 'prev'" name="i-mdi-arrow-left-circle" class="size-8" />
-    <div :class="[ direction === 'next' ? 'ml-auto' : '', 'flex flex-col']">
-      <span class="text-lg font-medium text-bcGovColor-darkGray dark:text-white">{{ handleContentDirectoryLabel(page?._path?.split('/')[2] ?? '') }}</span>
-      <span class="text-base text-bcGovColor-midGray dark:text-gray-300">{{ page?.title }}</span>
+    <UIcon v-if="direction === 'prev'" name="i-mdi-chevron-left" class="size-6" />
+    <div v-if="direction === 'prev'" class="flex flex-col">
+      <span class="text-lg font-medium text-bcGovColor-activeBlue dark:text-white"> {{ $t('btn.prevpage') }}</span>
     </div>
-    <UIcon v-if="direction === 'next'" name="i-mdi-arrow-right-circle" class="size-8" />
+    <div v-if="direction === 'next'" :class="[ 'ml-9', 'flex', 'flex-row' ]">
+      <span class="text-lg font-medium text-bcGovColor-white dark:text-white ">{{ $t('btn.nextpage') }}</span>
+    </div>
+    <UIcon v-if="direction === 'next'" name="i-mdi-chevron-right" class="size-6" />
   </UButton>
 </template>
diff --git a/web/site/app/components/Sbc/Docs/SideNavigation.vue b/web/site/app/components/Sbc/Docs/SideNavigation.vue
@@ -1,10 +1,36 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   navItems: AccordianNavItem[] | undefined
 }>()
+
+const getStartedNavItems = computed(() => {
+  return props.navItems?.filter(item => (item.children?.length ?? 0) > 1) || []
+})
+
+const exceptgetStartedNavItems = computed(() => {
+  return props.navItems?.filter(item => item.children?.length === 1) || []
+})
+
 </script>
 <template>
-  <aside class="mx-2 min-w-48 max-w-min py-4" data-testid="docs-side-navigation">
-    <SbcDocsAccordianNavigation :nav-items="navItems" />
+  <aside class="mx-2  min-w-56 max-w-min border-r-2  border-bcGovColor-hairlinesOnWhite " data-testid="docs-side-navigation">
+    <div class="flex items-center text-base font-semibold  uppercase ">
+      {{ $t('SbcNavigation.intro') }}
+    </div>
+    <SbcDocsAccordianNavigation :nav-items="getStartedNavItems" />
+    <div class="flex items-center text-base font-semibold  uppercase ">
+      {{ $t('SbcNavigation.devproducts') }}
+    </div>
+    <div v-for="item in exceptgetStartedNavItems" :key="item.label">
+      <ULink
+        :to="item.children?.[0]?.to"
+        active-class="text-primary-500 bg-bcGovColor-lightBlue font-semibold"
+        :class="[
+          'focus-visible:outline-{color}-500 mx-6 flex h-[40px] min-h-9 w-[215px] items-center gap-3 rounded-none px-1 font-sans text-sm font-normal text-bcGovColor-midGray transition-colors duration-300 ease-in-out hover:bg-bcGovBlue-50 hover:font-semibold hover:text-bcGovColor-activeBlue focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-white dark:hover:bg-bcGovBlue-100/10 dark:focus-visible:outline-white '
+        ]"
+      >
+        {{ item.label }}
+      </ULink>
+    </div>
   </aside>
 </template>
diff --git a/web/site/app/components/content/ButtonDownloadSpec.vue b/web/site/app/components/content/ButtonDownloadSpec.vue
@@ -7,7 +7,8 @@ defineProps<{
   <UButton
     :label="$t('btn.downloadSpec')"
     :to="href"
-    size="xl"
-    class="tracking-wide no-underline"
+    size="lg"
+    class="h-11 w-64 tracking-wide no-underline"
+    icon="i-mdi-download"
   />
 </template>
diff --git a/web/site/app/layouts/docs.vue b/web/site/app/layouts/docs.vue
@@ -20,33 +20,34 @@ const stickyStyles = computed(() => ({
 }))
 </script>
 <template>
-  <main class="relative mx-auto flex w-full max-w-[1360px] grow gap-4 px-2 xl:gap-8 xl:px-0">
+  <main class="relative mx-auto flex w-full grow gap-4 bg-white px-2 xl:gap-8 xl:px-8 ">
     <!-- side navigation -->
-    <div
-      class="sticky hidden overflow-y-auto overflow-x-hidden py-4 lg:block"
-      :style="stickyStyles"
-    >
-      <SbcDocsSideNavigation :nav-items="createContentNav(navItems)" />
-    </div>
-    <!-- main content -->
-    <div class="flex grow flex-col gap-8 py-8">
-      <div ref="contentWrapper">
-        <slot />
+    <div class="m-auto flex w-full max-w-[1312px] gap-4 py-12">
+      <div
+        class="sticky hidden overflow-y-auto overflow-x-hidden lg:block "
+        :style="stickyStyles"
+      >
+        <SbcDocsSideNavigation :nav-items="createContentNav(navItems)" />
       </div>
-      <UDivider />
-      <div class="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
-        <SbcDocsNextPrevButton
-          :page="prevPage"
-          direction="prev"
-        />
-        <SbcDocsNextPrevButton
-          :page="nextPage"
-          direction="next"
-        />
+      <!-- main content -->
+      <div class="flex grow flex-col gap-8">
+        <div ref="contentWrapper">
+          <slot />
+        </div>
+        <UDivider />
+        <div class="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
+          <SbcDocsNextPrevButton
+            :page="prevPage"
+            direction="prev"
+          />
+          <SbcDocsNextPrevButton
+            :page="nextPage"
+            direction="next"
+          />
+        </div>
       </div>
-    </div>
     <!-- table of contents -->
-    <div
+    <!-- <div
       class="sticky hidden overflow-y-auto py-8 lg:block"
       :style="stickyStyles"
     >
@@ -58,6 +59,7 @@ const stickyStyles = computed(() => ({
         :current-dir="currentDir"
         :active-toc-id="activeTocId"
       />
+    </div> -->
     </div>
   </main>
 </template>
diff --git a/web/site/app/locales/en-CA.ts b/web/site/app/locales/en-CA.ts
@@ -3,7 +3,7 @@ export default {
     getStarted: 'Get Started',
     goHome: 'Go Home',
     goBack: 'Go Back',
-    downloadSpec: 'Download the specification',
+    downloadSpec: 'Download the Specification',
     allProducts: 'View Products',
     products: 'Products',
     dashboard: 'Dashboard',
@@ -18,7 +18,9 @@ export default {
     next: 'Next',
     previous: 'Previous',
     openMainNav: 'Open Main Navigation Menu',
-    closeMainNav: 'Close Main Navigation Menu'
+    closeMainNav: 'Close Main Navigation Menu',
+    prevpage: 'Previous Topic',
+    nextpage: 'Next Topic'
   },
   sbcBreadcrumb: {
     default: 'BC Registries and Online Services',