@explorer-1/vue 0.2.3 → 0.2.5

package/src/components/NavMobile/NavMobile.vue

@@ -115,6 +115,7 @@
 // @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'
@@ -216,10 +217,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: {

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/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/PageNewsDetail/PageNewsDetail.stories.js

@@ -42,6 +42,7 @@ export const BaseStory = {
         }
       ],
       topper: '',
+      readTime: '2 min read',
       summary:
         'Headed to the Red Planet with the Perseverance rover, the pioneering helicopter is powered up for the first time in interplanetary space as part of a systems check.',
       thumbnailImage: {

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -35,6 +35,7 @@
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         :publication-date="data.publicationDate"
         :publication-time="data.publicationTime"
         :author="data.author"

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,17 +8,18 @@ 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>`
     })
   ],
   parameters: {
+    layout: 'fullscreen',
     html: {
       root: '#storyDecorator'
     }
@@ -29,14 +30,15 @@ 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',
       url: 'http://localhost:3000/edu/resources/test-resource',
       title: 'Test Resource',
+      readTime: '6 min read',
       heroConstrain: true,
       heroPosition: 'full_bleed',
       hero: [

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,
@@ -103,11 +103,14 @@ export default defineComponent({
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         :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 {
@@ -32,6 +32,7 @@ export const BaseStory = {
       url: '/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
       title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
       publicationDate: '2024-06-20 20:36:49.657301+00:00',
+      readTime: '5 min read',
       authors: [
         {
           author: {
@@ -55,7 +56,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
-      ...BlockStreamfieldTruncatedData
+      ...BlockStreamfieldData
     }
   }
 }
@@ -64,7 +65,8 @@ export const InlineHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline'
+      heroPosition: 'inline',
+      showJumpMenu: true
     }
   }
 }
@@ -73,7 +75,8 @@ export const NoHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      hero: []
+      hero: [],
+      showJumpMenu: true
     }
   }
 }