From b475e747eb7b9cc59d2b3507ed957aae877582b2 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Wed, 21 Aug 2024 12:46:55 -0700
Subject: [PATCH] fix: adjustments to NavJumpMenu (#556)

* adjustments to NavJumpMenu

* disabling percy, over quota
---
 .github/workflows/storybook.yml               | 62 +++++++++----------
 .../components/NavJumpMenu/NavJumpMenu.vue    | 16 ++++-
 .../NavSecondary/NavSecondaryDropdown.vue     |  9 ++-
 .../NavSecondary/NavSecondaryLink.vue         | 10 +--
 .../PageEduExplainerArticle.vue               |  1 +
 .../edu/PageEduLesson/PageEduLesson.vue       |  1 +
 .../PageEduNewsDetail/PageEduNewsDetail.vue   |  1 +
 7 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index 54f4db74..ffc557ee 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -80,37 +80,37 @@ jobs:
              "pnpm --filter @explorer-1/vue-storybook start" \
              "pnpm --filter @explorer-1/vue-storybook test:ci"
 
-  visual-tests:
-    needs: [build, a11y-tests]
-    timeout-minutes: 30
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Set up Node ⬢
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies 🧱
-        run: pnpm i
-
-      - name: Download storybook build
-        uses: actions/download-artifact@v3
-        with:
-          name: storybook
-          path: apps/vue-storybook/storybook_compiled
-
-      - name: Run Percy
-        id: run-percy
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
-        run: pnpm --filter @explorer-1/vue-storybook percy
+  # visual-tests:
+  #   needs: [build, a11y-tests]
+  #   timeout-minutes: 30
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout 🛎️
+  #       uses: actions/checkout@v4
+
+  #     - name: Setup pnpm
+  #       uses: pnpm/action-setup@v4
+
+  #     - name: Set up Node ⬢
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version-file: '.nvmrc'
+  #         cache: 'pnpm'
+
+  #     - name: Install dependencies 🧱
+  #       run: pnpm i
+
+  #     - name: Download storybook build
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: storybook
+  #         path: apps/vue-storybook/storybook_compiled
+
+  #     - name: Run Percy
+  #       id: run-percy
+  #       env:
+  #         PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+  #       run: pnpm --filter @explorer-1/vue-storybook percy
 
   publish:
     needs: [build, a11y-tests]
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
index 20c490a9..fdf35337 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -50,6 +50,7 @@ interface NavJumpMenuProps {
   headingLevel?: string
   invert?: boolean
   enabled?: boolean
+  dropdownText?: string
 }
 
 const props = withDefaults(defineProps<NavJumpMenuProps>(), {
@@ -59,7 +60,8 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   headingLevel: 'h2',
   enabled: true,
   invert: true,
-  hidden: false
+  hidden: false,
+  dropdownText: 'Jump to…'
 })
 
 const NavJumpMenuRef = ref()
@@ -102,7 +104,7 @@ const theBreadcrumbs = computed(() => {
         path: '#siteTop'
       }
   const jumpMenu: BreadcrumbPathObject = {
-    title: 'Jump to…',
+    title: props.dropdownText,
     path: '#',
     children: theJumpLinks.value as BreadcrumbPathObject[]
   }
@@ -139,5 +141,15 @@ watch(
       @apply opacity-100 transition-all pointer-events-auto;
     }
   }
+  .NavSecondaryLink.secondary-root {
+    span {
+      @apply border-primary #{!important};
+    }
+    &.-invert {
+      span {
+        @apply border-white #{!important};
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
index 6e73e390..38eb7236 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -9,7 +9,7 @@
     <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
-      class="font-medium border-t-2 border-transparent block px-3 py-2"
+      class="-t-2 border-transparent block px-3 py-2"
       :class="dropdownToggleClasses(index)"
       :invert="invert"
       @toggle-clicked="toggleDropdown()"
@@ -69,7 +69,6 @@ export default defineComponent({
       type: Object,
       required: true
     },
-
     invert: {
       type: Boolean,
       required: false,
@@ -121,13 +120,13 @@ export default defineComponent({
     dropdownToggleClasses(index: number) {
       return this.invert
         ? {
-            'mr-auto text-white font-semibold secondary-root': index === 0,
-            'text-white': index !== 0,
+            'mr-auto text-white font-bold secondary-root': index === 0,
+            'text-white font-semibold !pt-[.6rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
             'mr-auto text-primary font-semibold secondary-root': index === 0,
-            'text-gray-dark': index !== 0,
+            'text-gray-dark font-medium !pt-[.6rem]': index !== 0,
             '-open': this.dropdownVisible
           }
     },
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
index c57641f2..e6baac98 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
@@ -50,11 +50,13 @@ export default defineComponent({
       return false
     },
     baseLinkClasses(index: number | undefined) {
-      let rootClasses = 'mr-auto font-semibold secondary-root'
+      let rootClasses = 'mr-auto secondary-root'
       rootClasses = this.invert
-        ? `${rootClasses} text-white -invert`
-        : `${rootClasses} text-primary`
-      const regularClasses = this.invert ? 'text-white -invert' : 'text-gray-dark'
+        ? `${rootClasses} text-white font-bold -invert`
+        : `${rootClasses} text-primary font-semibold`
+      const regularClasses = this.invert
+        ? 'text-white -invert font-semibold'
+        : 'text-gray-dark font-medium'
       return index === 0 ? rootClasses : regularClasses
     },
     spanClasses(index: number | undefined) {
diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
index 9a73b53d..bad690d0 100644
--- a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
+++ b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
@@ -131,6 +131,7 @@ export default defineComponent({
       :title="data.title"
       :blocks="data.body"
       :enabled="data.showJumpMenu"
+      dropdown-text="In this article"
     />
     <!-- inline hero content -->
     <LayoutHelper
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
index 5980dfd0..648aa27d 100644
--- a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
+++ b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
@@ -368,6 +368,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       :title="data.title"
       :blocks="consolidatedBlocks"
       :enabled="true"
+      dropdown-text="In this lesson"
     />
 
     <template
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index 3d36015a..8e67cd0e 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -72,6 +72,7 @@ defineExpose({
       :title="data.title"
       :blocks="data.body"
       :enabled="data.showJumpMenu"
+      dropdown-text="In this news article"
     />
 
     <!-- schema.org -->