@explorer-1/vue 0.2.4 → 0.2.6

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -1,19 +1,15 @@
 <template>
   <BaseLink
-    :href="isExternal(item.path) ? item.path : null"
-    :to="!isExternal(item.path) ? item.path : null"
+    :href="isExternal(item.path) ? item.path : undefined"
+    :to="!isExternal(item.path) ? item.path : undefined"
     link-class="block px-3 py-2"
     variant="none"
     class="NavSecondaryLink border-t-2 border-transparent"
-    :class="index === 0 ? 'mr-auto text-primary font-semibold secondary-root' : 'text-gray-dark'"
+    :class="baseLinkClasses(index)"
   >
     <span
       class="inline-block 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="spanClasses(index)"
     >
       {{ item.title }}
     </span>
@@ -21,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { BasicLinkObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 export default defineComponent({
   name: 'NavSecondaryLink',
@@ -32,12 +29,17 @@ export default defineComponent({
     // the index from the v-for loop
     index: {
       type: Number,
-      required: false
+      required: false,
+      default: undefined
     },
     // the nav item object that includes path and title
     item: {
-      type: Object,
+      type: Object as PropType<BasicLinkObject>,
       required: true
+    },
+    invert: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -46,6 +48,23 @@ export default defineComponent({
         return true
       }
       return false
+    },
+    baseLinkClasses(index: number | undefined) {
+      let rootClasses = 'mr-auto font-semibold secondary-root'
+      rootClasses = this.invert
+        ? `${rootClasses} text-white -invert`
+        : `${rootClasses} text-primary`
+      const regularClasses = this.invert ? 'text-white -invert' : 'text-gray-dark'
+      return index === 0 ? rootClasses : regularClasses
+    },
+    spanClasses(index: number | undefined) {
+      const rootClasses = this.invert
+        ? 'can-hover:group-hover:border-white'
+        : 'can-hover:group-hover:border-primary'
+      const regularClasses = 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 ? rootClasses : regularClasses
     }
   }
 })
@@ -58,5 +77,13 @@ export default defineComponent({
       @apply border-primary #{!important};
     }
   }
+  &.-invert {
+    .nuxt-link-exact-active {
+      span {
+        @apply font-bold text-white;
+        @apply border-white #{!important};
+      }
+    }
+  }
 }
 </style>

package/src/components/TheFooter/TheFooter.vue

@@ -26,6 +26,18 @@
               {{ getLinkText(link) }}
             </BaseLink>
           </div>
+          <template v-if="themeStore.isEdu">
+            <BaseLink
+              variant="none"
+              href="https://www.nasa.gov/learning-resources/"
+              class="text-subtitle text-blue edu:text-white mb-3"
+              link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center"
+              external-target-blank
+            >
+              <span class="pr-2">NASA OSTEM</span>
+              <IconExternal class="shrink-0 text-sm -mt-0.5" />
+            </BaseLink>
+          </template>
         </div>
       </div>
       <!-- footer extras -->
@@ -180,6 +192,7 @@ import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from './../../store/theme'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import IconExternal from './../Icons/IconExternal.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import NavSocial from './../NavSocial/NavSocial.vue'
@@ -193,7 +206,8 @@ export default defineComponent({
     BaseButton,
     NavSocial,
     TheFooterSignUp,
-    LogoCaltech
+    LogoCaltech,
+    IconExternal
   },
   props: {
     data: {

package/src/interfaces.ts

@@ -1,12 +1,18 @@
 export interface BreadcrumbPathObject {
   path: string
   title: string
-  children: any[]
+  children: BreadcrumbPathObject[]
+}
+export interface BasicLinkObject {
+  title: string
+  path: string
 }
 
 export interface BlockData {
   blockType: string
   field?: string
+  heading?: string
+  level?: string
   items?: any[]
 }
 export interface ImageSrcObject {

package/src/store/header.ts

@@ -11,6 +11,7 @@ export interface State {
   highlightPrimary: boolean
   globalChildren?: any | null
   secondaryNav?: any | null
+  secondaryNavIsJumpMenu: boolean
 }
 
 export const useHeaderStore = defineStore('header', {
@@ -19,7 +20,8 @@ export const useHeaderStore = defineStore('header', {
       headerTransparent: false,
       highlightPrimary: true,
       globalChildren: null,
-      secondaryNav: null
+      secondaryNav: null,
+      secondaryNavIsJumpMenu: false
     }
   },
   actions: {
@@ -35,6 +37,9 @@ export const useHeaderStore = defineStore('header', {
     },
     updateSecondary(value: any) {
       this.secondaryNav = value
+    },
+    updateSecondaryNavIsJumpMenu(value: boolean) {
+      this.secondaryNavIsJumpMenu = value
     }
   }
 })

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -32,11 +32,11 @@
     >
       <div
         v-if="data.eventType"
-        class="flex flex-wrap items-start mb-3"
+        class="flex flex-wrap items-start mb-4"
       >
         <BaseTag
           variant="primary"
-          size="md"
+          size="lg"
         >
           {{ data.eventType }}
         </BaseTag>

package/src/templates/edu/{PageEduResourceArticle/PageEduResourceArticle.stories.js → PageEduExplainerArticle/PageEduExplainerArticle.stories.js}

@@ -8,11 +8,11 @@ import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/Block
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
-import PageEduResourceArticle from './PageEduResourceArticle.vue'
+import PageEduExplainerArticle from './PageEduExplainerArticle.vue'
 
 export default {
-  title: 'Templates/EDU/PageEduResourceArticle',
-  component: PageEduResourceArticle,
+  title: 'Templates/EDU/PageEduExplainerArticle',
+  component: PageEduExplainerArticle,
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
@@ -30,9 +30,9 @@ export default {
 export const BaseStory = {
   args: {
     data: {
-      __typename: 'EDUResourceArticlePage',
-      pageType: 'EDUResourceArticlePage',
-      contentType: 'edu_resources.EDUResourceArticlePage',
+      __typename: 'EDUExplainerArticlePage',
+      pageType: 'EDUExplainerArticlePage',
+      contentType: 'edu_resources.EDUExplainerArticlePage',
       seoTitle: 'Test Resource',
       searchDescription: '',
       slug: 'test-resource',

package/src/templates/edu/{PageEduResourceArticle/PageEduResourceArticle.vue → PageEduExplainerArticle/PageEduExplainerArticle.vue}

@@ -14,7 +14,7 @@ import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEm
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 
 export default defineComponent({
-  name: 'PageEduResourceArticle',
+  name: 'PageEduExplainerArticle',
   components: {
     HeroMedia,
     BaseImagePlaceholder,
@@ -107,8 +107,10 @@ export default defineComponent({
         :publication-date="data.publicationDate"
         :publication-time="data.publicationTime"
         :author="data.author"
-        :label="data.displayLabel"
+        label="Explainer Article"
+        pill-color="secondary"
         schema
+        pill
       />
       <ShareButtonsEdu
         v-if="data?.url"

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js

@@ -1,5 +1,5 @@
 import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
-import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { BlockStreamfieldData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
 import PageEduNewsDetail from './PageEduNewsDetail.vue'
 
 export default {
@@ -56,7 +56,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
-      ...BlockStreamfieldTruncatedData
+      ...BlockStreamfieldData
     }
   }
 }
@@ -65,7 +65,8 @@ export const InlineHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline'
+      heroPosition: 'inline',
+      showJumpMenu: true
     }
   }
 }
@@ -74,7 +75,8 @@ export const NoHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      hero: []
+      hero: [],
+      showJumpMenu: true
     }
   }
 }

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, defineExpose } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
@@ -17,6 +17,7 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
   readTime: string
@@ -35,6 +36,7 @@ interface PageEduNewsDetailObject extends PageResponseObject {
   topper: string
   relatedLinks: RelatedLinkObject[]
   body: StreamfieldBlockData[]
+  showJumpMenu: boolean
 }
 
 interface PageEduNewsDetailProps {
@@ -44,6 +46,8 @@ interface PageEduNewsDetailProps {
 // define props
 const props = defineProps<PageEduNewsDetailProps>()
 
+const PageEduNewsDetailJumpMenu = ref()
+
 const heroEmpty = computed(() => {
   return isEmpty(props.data?.heroImage)
 })
@@ -67,6 +71,10 @@ const computedClass = computed(() => {
 const dateTimeArray = computed(() => {
   return props.data.publicationDate.split(' ')
 })
+
+defineExpose({
+  PageEduNewsDetailJumpMenu
+})
 </script>
 <template>
   <div
@@ -76,6 +84,13 @@ const dateTimeArray = computed(() => {
     itemscope
     itemtype="http://schema.org/Article"
   >
+    <NavJumpMenu
+      ref="PageEduNewsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="true"
+    />
+
     <!-- schema.org -->
     <meta
       v-if="data.thumbnailImage && data.thumbnailImage.original"
@@ -147,7 +162,6 @@ const dateTimeArray = computed(() => {
         {{ data.summary }}
       </p>
     </LayoutHelper>
-
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"

package/src/utils/eventBus.ts

@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+
+export const eventBus = mitt()

package/src/utils/getHeadingId.ts

@@ -0,0 +1,5 @@
+import { camelCase } from 'lodash'
+
+export const getHeadingId = (heading: string, index?: number) => {
+  return camelCase(heading + (index ? index : ''))
+}

package/src/utils/mixins.ts

@@ -123,9 +123,13 @@ export const mixinUpdateGlobalChildren = (value: [BreadcrumbPathObject] | null)
 /* -- mixinUpdateSecondary --
       This mixin is used by the navigation to share secondary nav override items between components
     */
-export const mixinUpdateSecondary = (value: [BreadcrumbPathObject] | null) => {
+export const mixinUpdateSecondary = (
+  value: BreadcrumbPathObject[] | undefined,
+  isJumpMenu: boolean = false
+) => {
   const headerStore = useHeaderStore()
   headerStore.updateSecondary(value)
+  headerStore.updateSecondaryNavIsJumpMenu(isJumpMenu)
 }
 /* -- mixinHighlightPrimary --
       This mixin is used to specify if active primary navigation items should be highlighted/underlined