@explorer-1/vue 0.2.4 → 0.2.6

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -0,0 +1,141 @@
+<template>
+  <NavSecondary
+    v-if="enabled"
+    id="JumpMenuTop"
+    ref="NavJumpMenuRef"
+    class="NavJumpMenu -hide-until-threshold"
+    :invert="invert"
+  >
+    <template v-for="(item, index) in theBreadcrumbs">
+      <template v-if="item.children && item.children.length > 0">
+        <NavSecondaryDropdown
+          :key="index"
+          :item="item"
+          :index="index"
+          :is-last="theBreadcrumbs && index === theBreadcrumbs.length - 1"
+          :invert="invert"
+        >
+          <NavJumpMenuContent
+            :key="index"
+            :item="item"
+          />
+        </NavSecondaryDropdown>
+      </template>
+      <template v-else>
+        <NavSecondaryLink
+          :key="index"
+          :item="item"
+          :index="index"
+          :invert="invert"
+        />
+      </template>
+    </template>
+  </NavSecondary>
+</template>
+<script setup lang="ts">
+import { computed, defineExpose, ref, onMounted, watch } from 'vue'
+import { mixinUpdateSecondary } from './../../utils/mixins'
+import { useRoute } from 'vue-router'
+import NavSecondary from './../NavSecondary/NavSecondary.vue'
+import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
+import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
+import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
+import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
+import { getHeadingId } from '../../utils/getHeadingId'
+
+interface NavJumpMenuProps {
+  title?: string
+  jumpLinks?: BreadcrumbPathObject[]
+  blocks?: BlockData[]
+  headingLevel?: string
+  invert?: boolean
+  enabled?: boolean
+}
+
+const props = withDefaults(defineProps<NavJumpMenuProps>(), {
+  title: undefined,
+  jumpLinks: undefined,
+  blocks: undefined,
+  headingLevel: 'h2',
+  enabled: true,
+  invert: true,
+  hidden: false
+})
+
+const NavJumpMenuRef = ref()
+
+const theJumpLinks = computed(() => {
+  if (props.jumpLinks) {
+    return props.jumpLinks
+  } else if (props.blocks) {
+    const indexedBlocks = props.blocks.map((b, index) => {
+      return {
+        ...b,
+        index: index
+      }
+    })
+    const filteredBlocks = indexedBlocks.filter((b) => {
+      return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
+    })
+    // map to the correct data shape
+    const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+      return {
+        // @ts-expect-error using parameter that was added to BlockData
+        path: '#' + getHeadingId(l.heading, l.index),
+        title: l.heading
+      } as BreadcrumbPathObject
+    })
+    return links
+  }
+  return []
+})
+
+const theBreadcrumbs = computed(() => {
+  let breadcrumb = undefined
+  const rootItem = props.title
+    ? {
+        title: props.title,
+        path: '#JumpMenuTop'
+      }
+    : {
+        title: 'Back to top',
+        path: '#JumpMenuTop'
+      }
+  const jumpMenu: BreadcrumbPathObject = {
+    title: 'Jump to…',
+    path: '#',
+    children: theJumpLinks.value as BreadcrumbPathObject[]
+  }
+  if (theJumpLinks.value) {
+    breadcrumb = [rootItem, jumpMenu]
+  }
+  return breadcrumb as BreadcrumbPathObject[] | undefined
+})
+defineExpose({
+  NavJumpMenuRef
+})
+onMounted(() => {
+  mixinUpdateSecondary(theBreadcrumbs.value, true)
+})
+const route = useRoute()
+
+// repopulate the store with the jump links since the store is cleared on route changes
+watch(
+  route,
+  () => {
+    mixinUpdateSecondary(theBreadcrumbs.value, true)
+  }
+  // { flush: 'pre', immediate: true, deep: true }
+)
+</script>
+<style lang="scss">
+.NavJumpMenu {
+  &.-hide-until-threshold {
+    @apply opacity-0 h-0 transition-none overflow-visible;
+    &.-is-sticky,
+    &.-is-sticky-offset {
+      @apply opacity-100 transition-opacity;
+    }
+  }
+}
+</style>

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -0,0 +1,74 @@
+<template>
+  <ul class="NavJumpMenuContent bg-white">
+    <li
+      v-for="(child, index) in item.children"
+      :key="index"
+      class="text-base border-b border-gray-light"
+    >
+      <BaseLink
+        :href="child.path"
+        variant="none"
+        :link-class="linkClass(child)"
+      >
+        <span>
+          {{ child.title }}
+        </span>
+      </BaseLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+interface NavItemObject {
+  path: String
+  title: String
+  children: [Object]
+}
+export default defineComponent({
+  name: 'NavJumpMenuContent',
+  components: {
+    BaseLink
+  },
+  props: {
+    // the tertiary nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    linkClass(item?: NavItemObject) {
+      // default
+      let computedClass = 'py-2 lg:py-4'
+      if (!item) {
+        // if first (aka Overview)
+        computedClass = 'py-2 lg:pt-4 lg:pb-4'
+      } else if (item.children && item.children.length > 0) {
+        // if has children
+        computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
+      }
+      return computedClass
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavJumpMenuContent {
+  a {
+    @apply block pl-18 pr-6 lg:pl-6 text-gray-dark;
+
+    > span {
+      @apply border-b border-transparent pb-2px;
+    }
+
+    &:hover {
+      > span {
+        @apply border-gray-dark text-gray-dark;
+      }
+    }
+  }
+}
+</style>

package/src/components/NavLinkList/NavLinkList.vue

@@ -12,7 +12,7 @@
       >
         <BaseLink
           variant="none"
-          class="block text-lg font-medium leading-tight text-white"
+          class="block text-base xl:text-lg font-medium leading-tight text-white"
           :href="item.path && !getRouterLink(item) ? item.path : undefined"
           :to="getRouterLink(item) ? getRouterLink(item) : undefined"
           link-class="can-hover:hover:underline inline-block px-2 py-3 -ml-2"

package/src/components/NavMobile/NavMobile.vue

@@ -87,6 +87,18 @@
                 :start-open="checkActive(item.titleLink) && !hasSecondary"
               />
             </template>
+            <template v-if="themeStore.isEdu">
+              <BaseLink
+                variant="none"
+                href="https://www.nasa.gov/learning-resources/"
+                class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
+                link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center py-0 pl-6 -ml-4 border-l-4 border-transparent"
+                external-target-blank
+              >
+                <span class="pr-2">NASA OSTEM</span>
+                <IconExternal class="shrink-0 text-sm -mt-0.5" />
+              </BaseLink>
+            </template>
           </nav>
           <div class="pl-8">
             <nav
@@ -115,12 +127,15 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
+import { eventBus } from './../../utils/eventBus'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import { useHeaderStore } from './../../store/header'
 import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
 import IconClose from './../Icons/IconClose.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
 import NavMobileDropdown from './../NavMobile/NavMobileDropdown.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
@@ -139,7 +154,9 @@ export default defineComponent({
     NavMobileDropdown,
     NavMobileLink,
     NavSocial,
-    NavSearchForm
+    NavSearchForm,
+    BaseLink,
+    IconExternal
   },
   props: {
     data: {
@@ -216,10 +233,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    // // TODO: VUE3: find solution for emitting event from slot
-    // // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeMenu)
+    eventBus.on('linkClicked', () => this.closeMenu())
   },
   methods: {
     toggleMenu() {

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -42,6 +42,7 @@
             </template>
             <template v-else>
               <NavMobileLink
+                v-if="!headerStore.secondaryNavIsJumpMenu && index !== 0"
                 :key="index"
                 :title="index === 0 ? 'Home' : undefined"
                 :data="item"
@@ -59,7 +60,10 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from '../../store/header'
 import type { LinkObject } from '../../utils/mixins'
+import { eventBus } from './../../utils/eventBus'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
 import NavMobileSecondaryDropdown from './../NavMobile/NavMobileSecondaryDropdown.vue'
@@ -98,16 +102,16 @@ export default defineComponent({
       theDropdown: null
     }
   },
+  computed: {
+    ...mapStores(useHeaderStore)
+  },
   mounted() {
     if (this.startOpen) {
       this.dropdownVisible = true
     }
     this.theDropdown = this.$refs.NavDropdownMobile as HTMLElement
     if (!this.expandMultiple) {
-      // TODO: VUE3: find solution for emitting event from slot
-      // TODO: find a cleaner way to do this w/o using mounted or root level events
-      // scoped slots? https://github.com/vuejs/vue/issues/4332
-      // this.$root?.$on('openMobileDropdown', this.closeIfOtherOpened)
+      eventBus.on('openMobileDropdown', () => this.closeIfOtherOpened())
     }
   },
   methods: {

package/src/components/NavMobile/NavMobileSecondaryDropdown.vue

@@ -18,6 +18,7 @@
         <NavSecondaryDropdownContent
           class="relative w-full text-lg"
           :item="item"
+          :include-overview="!headerStore.secondaryNavIsJumpMenu"
         />
       </slot>
     </template>
@@ -27,6 +28,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { mixinIsActivePath } from '../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from '../../store/header'
 import IconCaret from './../Icons/IconCaret.vue'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
@@ -58,6 +61,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useHeaderStore),
     startOpen(): Boolean {
       if (this.item) {
         return mixinIsActivePath(this.item.path)
@@ -79,7 +83,6 @@ export default defineComponent({
   },
   methods: {
     toggleDropdown() {
-      console.log('dropdown toggled')
       if (this.dropdownVisible) {
         this.closeDropdown()
       } else {

package/src/components/NavSecondary/NavSecondary.stories.js

@@ -1,7 +1,7 @@
 import NavSecondary from './NavSecondary.vue'
 
 export default {
-  title: 'Navigation/Secondary Navigation/NavSecondary',
+  title: 'Navigation/Secondary Navigation',
   component: NavSecondary,
   excludeStories: /.*Data$/,
   parameters: {
@@ -19,6 +19,11 @@ export const NavSecondaryData = {
 }
 
 export const BaseStory = {
-  name: 'NavSecondary',
-  args: { breadcrumb: NavSecondaryData.breadcrumb }
+  name: 'Secondary Navigation',
+  args: {
+    breadcrumb: NavSecondaryData.breadcrumb
+  }
+}
+export const Inverted = {
+  args: { breadcrumb: NavSecondaryData.breadcrumb, invert: true }
 }

package/src/components/NavSecondary/NavSecondary.vue

@@ -4,11 +4,17 @@
     ref="NavSecondary"
     aria-label="Secondary"
     class="NavSecondary"
-    :class="{ 'has-intro': hasIntro }"
+    :class="{
+      'has-intro': hasIntro,
+      '!bg-transparent': invert
+    }"
   >
-    <div class="max-w-screen-3xl mx-auto">
+    <div
+      class="max-w-screen-3xl mx-auto"
+      :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
+    >
       <div
-        class="nav-secondary-container lg:container lg:px-0 lg:whitespace-normal border-gray-mid text-gray-mid-dark lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap border-t border-opacity-50 edu:border-0"
+        :class="`nav-secondary-container lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark  border-opacity-50'}`"
       >
         <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
           <template v-for="(item, index) in theBreadcrumb">
@@ -18,6 +24,7 @@
                 :item="item"
                 :index="index"
                 :is-last="theBreadcrumb && index === theBreadcrumb.length - 1"
+                :invert="invert"
               />
             </template>
             <template v-else>
@@ -25,6 +32,7 @@
                 :key="index"
                 :item="item"
                 :index="index"
+                :invert="invert"
               />
             </template>
           </template>
@@ -38,6 +46,7 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
+import { useThemeStore } from './../../store/theme'
 import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
 import NavSecondaryLink from './NavSecondaryLink.vue'
 import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixins'
@@ -49,19 +58,27 @@ export default defineComponent({
    ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
    ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
    */
+  name: 'NavSecondary',
   components: {
     NavSecondaryDropdown,
     NavSecondaryLink
   },
   props: {
+    // breadcrumbs create a secondary navigation
     breadcrumb: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     hasIntro: {
       type: Boolean,
       required: false,
       default: false
+    },
+    invert: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -71,7 +88,8 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useHeaderStore),
-    theBreadcrumb(): [BreadcrumbPathObject] | undefined {
+    ...mapStores(useThemeStore),
+    theBreadcrumb(): BreadcrumbPathObject[] | undefined {
       if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
         mixinUpdateSecondary(JSON.parse(this.breadcrumb))
@@ -118,7 +136,9 @@ export default defineComponent({
         ([e]) => {
           e.target.classList.toggle('-is-sticky', e.intersectionRatio < 1)
         },
-        { threshold: [1] }
+        {
+          threshold: [1]
+        }
       )
       const observerOffset = new IntersectionObserver(
         ([e]) => {

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -10,21 +10,14 @@
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="font-medium border-t-2 border-transparent block px-3 py-2"
-      :class="{
-        'mr-auto text-primary font-semibold secondary-root': index === 0,
-        'text-gray-dark': index !== 0,
-        '-open': dropdownVisible
-      }"
+      :class="dropdownToggleClasses(index)"
+      :invert="invert"
       @toggle-clicked="toggleDropdown()"
       @close-dropdown="closeDropdown()"
     >
       <span
         class="flex content-center pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
-        :class="
-          index === 0
-            ? 'can-hover:group-hover:border-primary'
-            : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
-        "
+        :class="dropdownButtonClasses(index)"
       >
         <span>{{ item.title }}</span>
         <IconCaret class="transform rotate-90 text-sm ml-2 pl-2 -mt-px" />
@@ -47,6 +40,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import IconCaret from './../Icons/IconCaret.vue'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
@@ -62,7 +56,8 @@ export default defineComponent({
     // the index from the parent v-for loop
     index: {
       type: Number,
-      required: false
+      required: false,
+      default: 0
     },
     isLast: {
       type: Boolean,
@@ -73,8 +68,15 @@ export default defineComponent({
     item: {
       type: Object,
       required: true
+    },
+
+    invert: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
+  emits: ['closeDropdown', 'openDropdown'],
   data() {
     return {
       dropdownVisible: false
@@ -88,15 +90,10 @@ export default defineComponent({
     }
   },
   mounted() {
-    // TODO: VUE3: find solution for emitting event from slot
-    // https://stackoverflow.com/questions/50181858/this-root-emit-not-working-in-vue
-    // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeDropdown)
+    eventBus.on('linkClicked', () => this.closeDropdown())
   },
   methods: {
     toggleDropdown() {
-      console.log('dropdown toggled')
       if (this.dropdownVisible) {
         this.closeDropdown()
       } else {
@@ -120,6 +117,28 @@ export default defineComponent({
         return true
       }
       return false
+    },
+    dropdownToggleClasses(index: number) {
+      return this.invert
+        ? {
+            'mr-auto text-white font-semibold secondary-root': index === 0,
+            'text-white': index !== 0,
+            '-open': this.dropdownVisible
+          }
+        : {
+            'mr-auto text-primary font-semibold secondary-root': index === 0,
+            'text-gray-dark': index !== 0,
+            '-open': this.dropdownVisible
+          }
+    },
+    dropdownButtonClasses(index: number) {
+      const titleButton = this.invert
+        ? 'can-hover:group-hover:border-white'
+        : 'can-hover:group-hover:border-primary'
+      const regularButton = this.invert
+        ? 'can-hover:group-hover:border-white can-hover:group-hover:text-white'
+        : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark'
+      return index === 0 ? titleButton : regularButton
     }
   }
 })
@@ -131,6 +150,11 @@ export default defineComponent({
       > span {
         @apply border-black text-gray-dark #{!important};
       }
+      &.-invert {
+        > span {
+          @apply border-white text-white #{!important};
+        }
+      }
     }
 
     &.-active {
@@ -138,12 +162,23 @@ export default defineComponent({
         @apply font-bold text-gray-dark;
         @apply border-primary #{!important};
       }
+      &.-invert {
+        > span {
+          @apply text-white;
+          @apply border-white #{!important};
+        }
+      }
     }
     &:hover {
       &.-active {
         > span {
           @apply text-gray-mid-dark;
         }
+        &.-invert {
+          > span {
+            @apply text-white;
+          }
+        }
       }
     }
   }

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="NavSecondaryDropdownContent">
-    <li>
+    <li v-if="includeOverview">
       <BaseLink
         :to="item.path"
         variant="none"
@@ -80,6 +80,10 @@ export default defineComponent({
     item: {
       type: Object,
       required: true
+    },
+    includeOverview: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {