From fcee7d330da2b5288cace31b30a2f504ae99b1e8 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 3 Sep 2024 20:26:21 -0700
Subject: [PATCH 1/3] creating BaseCarousel component, tweaks to search
 results, and listing hero carousel

---
 packages/common/src/scss/_grid.scss           |   4 +-
 .../components/BaseCarousel/BaseCarousel.vue  | 152 ++++++++++++++
 .../BlockLinkCard/BlockLinkCard.vue           |   1 +
 .../HeroListingIndex.stories.js               | 192 +++++++++---------
 .../HeroListingIndex/HeroListingIndex.vue     |  28 ++-
 .../src/components/HeroMedium/HeroMedium.vue  |   2 +-
 .../MetadataEduResource.vue                   |  10 +-
 .../NavDesktopEdu/NavDesktopEdu.vue           |   2 +-
 .../SearchFilterGroup/SearchFilterGroup.vue   |  50 ++---
 .../SearchResultCard/SearchResultCard.vue     |  18 +-
 .../SearchResultGridItem.vue                  |  18 +-
 .../SearchResultsList/SearchResultsList.vue   |  26 ++-
 packages/vue/src/interfaces.ts                |   3 +
 13 files changed, 358 insertions(+), 148 deletions(-)
 create mode 100644 packages/vue/src/components/BaseCarousel/BaseCarousel.vue

diff --git a/packages/common/src/scss/_grid.scss b/packages/common/src/scss/_grid.scss
index 23318452..161f831e 100644
--- a/packages/common/src/scss/_grid.scss
+++ b/packages/common/src/scss/_grid.scss
@@ -92,10 +92,10 @@
       }
     }
 
-    // for use on pages with flush-top hero sections
+    // for use on pages with flush-top hero sections // doesn't apply to EDU
     .-nav-offset {
       @screen lg {
-        @apply -mt-1; // get rid of the barely visible white line
+        @apply mt-0; // get rid of the barely visible white line
       }
     }
   }
diff --git a/packages/vue/src/components/BaseCarousel/BaseCarousel.vue b/packages/vue/src/components/BaseCarousel/BaseCarousel.vue
new file mode 100644
index 00000000..f446f3b4
--- /dev/null
+++ b/packages/vue/src/components/BaseCarousel/BaseCarousel.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="BaseCarousel w-full overflow-hidden relative">
+    <div
+      ref="BaseCarousel"
+      class="swiper relative"
+    >
+      <div class="swiper-wrapper">
+        <slot />
+      </div>
+      <div class="swiper-nav lg:block absolute bottom-0 right-0 z-100">
+        <div class="relative z-10 flex">
+          <BaseButton
+            class="swiper-prev xl:text-xl border-collapse"
+            aria-label="Previous slide"
+          >
+            <template #icon>
+              <IconPrev />
+            </template>
+          </BaseButton>
+          <BaseButton
+            class="swiper-next xl:text-xl border-collapse"
+            aria-label="Next slide"
+          >
+            <template #icon>
+              <IconNext />
+            </template>
+          </BaseButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Swiper from 'swiper'
+import { A11y, Navigation } from 'swiper/modules'
+import type { SwiperOptions } from 'swiper/types'
+import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import IconPrev from './../Icons/IconPrev.vue'
+import IconNext from './../Icons/IconNext.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+const BaseCarouselOptions = swiperOptions.BlockImageCarousel
+
+Swiper.use([Navigation, A11y])
+
+export default defineComponent({
+  name: 'BaseCarousel',
+  components: {
+    BaseButton,
+    IconPrev,
+    IconNext
+  },
+  props: {
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    itemRole: {
+      type: String,
+      default: undefined
+    }
+  },
+  data(): {
+    currentIndex: number
+    slider: Swiper | null
+    currentCaption: string
+    sliderOptions: SwiperOptions
+  } {
+    return {
+      currentIndex: 0,
+      currentCaption: '',
+      slider: null,
+      sliderOptions: {
+        ...BaseCarouselOptions,
+        loop: this.loop,
+        // this component has custom pagination
+        pagination: false,
+        a11y: {
+          slideRole: this.itemRole as string | undefined
+        }
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    slide(value) {
+      this.slideTo(value)
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.slider = new Swiper(this.$refs.BaseCarousel as HTMLElement, this.sliderOptions)
+      this.currentIndex = this.slider.realIndex
+    },
+    updateIndex(val: number) {
+      this.currentIndex = val
+    },
+    slideTo(val: number) {
+      if (this.slider) {
+        this.slider.slideTo(val)
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import 'swiper/swiper-bundle.css';
+.BaseCarousel {
+  .swiper {
+    .swiper-prev {
+      @apply mr-px;
+    }
+
+    .swiper-prev,
+    .swiper-next {
+      &.swiper-button-disabled {
+        @apply opacity-75 cursor-default bg-none;
+      }
+    }
+  }
+
+  .swiper-nav {
+    padding-top: 56.25%;
+  }
+
+  // .swiper-dots {
+  //   padding-top: 56.25%;
+  //   @apply pointer-events-none;
+
+  //   .swiper-dot {
+  //     @apply inline-block px-1 py-3 cursor-pointer pointer-events-auto;
+
+  //     &:focus {
+  //       @apply outline-none ring-1;
+  //     }
+
+  //     > span {
+  //       @apply inline-block w-3 h-3 rounded-full bg-gray-light-mid;
+  //     }
+
+  //     &.swiper-dot-active {
+  //       > span {
+  //         @apply bg-primary;
+  //       }
+  //     }
+  //   }
+  // }
+}
+</style>
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
index 7ac4d8a8..24a62404 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
+++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -133,6 +133,7 @@
           v-else-if="metadataAttrs.type === 'resource'"
           :resource="theItem as EduResourceCardObject"
           :variant="metadataAttrs.icons"
+          :show-time="true"
           compact
         />
       </div>
diff --git a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js
index 1abcb3b8..ea2c1c89 100644
--- a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js
+++ b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js
@@ -11,26 +11,24 @@ export default {
 
 // data
 export const HeroListingIndexData = {
-  listingPage: {
-    featured: {
-      __typename: 'EDUExplainerArticlePage',
-      topicLabel: 'Mars',
-      url: '/news/new-maps-open-roads-to-research/',
-      title: 'Creating Robots to go Where Humans Can’t',
-      image: {
-        src: {
-          url: 'https://picsum.photos/id/973/1800/1200',
-          width: 1800,
-          height: 1200
-        },
-        srcSet:
-          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
-        screenMd: {
-          url: 'https://picsum.photos/id/921/800/640'
-        },
-        screenSm: {
-          url: 'https://picsum.photos/id/247/640/900'
-        }
+  featuredPage: {
+    __typename: 'EDUExplainerArticlePage',
+    topicLabel: 'Mars',
+    url: '/news/new-maps-open-roads-to-research/',
+    title: 'Creating Robots to go Where Humans Can’t',
+    image: {
+      src: {
+        url: 'https://picsum.photos/id/973/1800/1200',
+        width: 1800,
+        height: 1200
+      },
+      srcSet:
+        'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+      screenMd: {
+        url: 'https://picsum.photos/id/921/800/640'
+      },
+      screenSm: {
+        url: 'https://picsum.photos/id/247/640/900'
       }
     }
   }
@@ -42,7 +40,7 @@ export const BaseStory = {
   name: 'HeroListingIndex',
   args: {
     customLabel: 'Featured',
-    pageData: HeroListingIndexData.listingPage
+    pageData: HeroListingIndexData.featuredPage
   }
 }
 
@@ -50,31 +48,29 @@ export const NewsImageHero = {
   args: {
     customLabel: 'Featured',
     pageData: {
-      featured: {
-        topicLabel: 'Mars',
-        url: '/news/new-maps-open-roads-to-research/',
-        title: 'Creating Robots to go Where Humans Can’t',
-        heroBlocks: [
-          {
-            blockType: 'ImageChooserBlock',
-            listingPageHeroImage: {
-              src: {
-                url: 'https://picsum.photos/id/973/1800/1200',
-                width: 1800,
-                height: 1200
-              },
-              srcSet:
-                'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
-              screenMd: {
-                url: 'https://picsum.photos/id/921/800/640'
-              },
-              screenSm: {
-                url: 'https://picsum.photos/id/247/640/900'
-              }
+      topicLabel: 'Mars',
+      url: '/news/new-maps-open-roads-to-research/',
+      title: 'Creating Robots to go Where Humans Can’t',
+      heroBlocks: [
+        {
+          blockType: 'ImageChooserBlock',
+          listingPageHeroImage: {
+            src: {
+              url: 'https://picsum.photos/id/973/1800/1200',
+              width: 1800,
+              height: 1200
+            },
+            srcSet:
+              'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+            screenMd: {
+              url: 'https://picsum.photos/id/921/800/640'
+            },
+            screenSm: {
+              url: 'https://picsum.photos/id/247/640/900'
             }
           }
-        ]
-      }
+        }
+      ]
     }
   }
 }
@@ -83,20 +79,18 @@ export const NewsVideoHero = {
   args: {
     customLabel: 'Featured',
     pageData: {
-      featured: {
-        topicLabel: 'Mars',
-        url: '/news/new-maps-open-roads-to-research/',
-        title: 'Creating Robots to go Where Humans Can’t',
-        heroBlocks: [
-          {
-            blockType: 'VideoBlock',
-            video: {
-              file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4',
-              fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
-            }
+      topicLabel: 'Mars',
+      url: '/news/new-maps-open-roads-to-research/',
+      title: 'Creating Robots to go Where Humans Can’t',
+      heroBlocks: [
+        {
+          blockType: 'VideoBlock',
+          video: {
+            file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4',
+            fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
           }
-        ]
-      }
+        }
+      ]
     }
   }
 }
@@ -105,52 +99,50 @@ export const NewsCarouselHero = {
   args: {
     customLabel: 'Featured',
     pageData: {
-      featured: {
-        topicLabel: 'Mars',
-        url: '/news/new-maps-open-roads-to-research/',
-        title: 'Creating Robots to go Where Humans Can’t',
-        heroBlocks: [
-          {
-            blockType: 'CarouselBlock',
-            blocks: [
-              {
-                listingPageHeroImage: {
-                  src: {
-                    url: 'https://picsum.photos/id/973/1800/1200',
-                    width: 1800,
-                    height: 1200
-                  },
-                  srcSet:
-                    'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
-                  screenMd: {
-                    url: 'https://picsum.photos/id/921/800/640'
-                  },
-                  screenSm: {
-                    url: 'https://picsum.photos/id/247/640/900'
-                  }
+      topicLabel: 'Mars',
+      url: '/news/new-maps-open-roads-to-research/',
+      title: 'Creating Robots to go Where Humans Can’t',
+      heroBlocks: [
+        {
+          blockType: 'CarouselBlock',
+          blocks: [
+            {
+              listingPageHeroImage: {
+                src: {
+                  url: 'https://picsum.photos/id/973/1800/1200',
+                  width: 1800,
+                  height: 1200
+                },
+                srcSet:
+                  'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+                screenMd: {
+                  url: 'https://picsum.photos/id/921/800/640'
+                },
+                screenSm: {
+                  url: 'https://picsum.photos/id/247/640/900'
                 }
-              },
-              {
-                listingPageHeroImage: {
-                  src: {
-                    url: 'https://picsum.photos/id/973/1800/1200',
-                    width: 1800,
-                    height: 1200
-                  },
-                  srcSet:
-                    'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
-                  screenMd: {
-                    url: 'https://picsum.photos/id/921/800/640'
-                  },
-                  screenSm: {
-                    url: 'https://picsum.photos/id/247/640/900'
-                  }
+              }
+            },
+            {
+              listingPageHeroImage: {
+                src: {
+                  url: 'https://picsum.photos/id/973/1800/1200',
+                  width: 1800,
+                  height: 1200
+                },
+                srcSet:
+                  'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+                screenMd: {
+                  url: 'https://picsum.photos/id/921/800/640'
+                },
+                screenSm: {
+                  url: 'https://picsum.photos/id/247/640/900'
                 }
               }
-            ]
-          }
-        ]
-      }
+            }
+          ]
+        }
+      ]
     }
   }
 }
diff --git a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue
index 41828a88..92f9153e 100644
--- a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue
+++ b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.vue
@@ -1,20 +1,18 @@
 <template>
   <div
     v-if="pageData"
-    class="max-w-screen-3xl mx-auto"
-    :class="{ '-nav-offset': pageData.featured }"
+    class="HeroListingIndex max-w-screen-3xl mx-auto"
+    :class="{ '-nav-offset': pageData }"
   >
     <HeroMedium
-      v-if="pageData.featured"
+      v-if="pageData"
       class="md:mb-12 lg:mb-18 mb-10"
       :custom-pill="themeStore.theme === 'ThemeEdu' && customLabel ? customLabel : undefined"
       :custom-pill-type="
-        themeStore.theme === 'ThemeEdu' && pageData.featured?.__typename
-          ? pageData.featured.__typename
-          : undefined
+        themeStore.theme === 'ThemeEdu' && pageData.__typename ? pageData.__typename : undefined
       "
-      :custom-label="themeStore.theme === 'ThemeEdu' ? pageData.featured.topicLabel : customLabel"
-      :feature="pageData.featured"
+      :custom-label="themeStore.theme === 'ThemeEdu' ? pageData.topicLabel : customLabel"
+      :feature="pageData"
       :custom-video="customVideo"
       :custom-image="customImage"
       :cta="cta"
@@ -54,17 +52,17 @@ export default defineComponent({
     ...mapStores(useThemeStore),
     // parses a hero streamfield block for a video (newsDetailPage model)
     customVideo(): object | undefined {
-      if (this.pageData && this.pageData.featured?.heroBlocks?.length > 0) {
-        if (this.pageData.featured.heroBlocks[0].blockType === 'VideoBlock') {
-          return this.pageData.featured.heroBlocks[0].video
+      if (this.pageData && this.pageData?.heroBlocks?.length > 0) {
+        if (this.pageData.heroBlocks[0].blockType === 'VideoBlock') {
+          return this.pageData.heroBlocks[0].video
         }
       }
       return undefined
     },
     customImage(): object | undefined {
       // parse hero streamfield block for the first usable image (newsDetailPage model)
-      if (this.pageData && this.pageData.featured?.heroBlocks?.length > 0) {
-        const block = this.pageData.featured.heroBlocks[0]
+      if (this.pageData?.heroBlocks?.length > 0) {
+        const block = this.pageData?.heroBlocks[0]
         if (block.blockType === 'ImageChooserBlock' || block.blockType === 'HeroImageBlock') {
           return block.listingPageHeroImage
         } else if (block.blockType === 'CarouselBlock') {
@@ -75,8 +73,8 @@ export default defineComponent({
         }
       }
       // else use heroImage
-      else if (this.pageData?.featured?.listingPageHeroImage) {
-        return this.pageData.featured.listingPageHeroImage
+      else if (this.pageData?.listingPageHeroImage) {
+        return this.pageData.listingPageHeroImage
       }
       return undefined
     }
diff --git a/packages/vue/src/components/HeroMedium/HeroMedium.vue b/packages/vue/src/components/HeroMedium/HeroMedium.vue
index 1d58a852..f06277c6 100644
--- a/packages/vue/src/components/HeroMedium/HeroMedium.vue
+++ b/packages/vue/src/components/HeroMedium/HeroMedium.vue
@@ -74,7 +74,7 @@
           <p class="text-h3 font-semibold mb-0">
             <span class="mr-2">{{ feature.title }}</span>
             <span
-              class="text-jpl-red-light lg:hidden can-hover:group-hover:ml-2 ml-0 text-4xl transition-all duration-200 ease-in"
+              class="text-action-light lg:hidden can-hover:group-hover:ml-2 ml-0 text-4xl transition-all duration-200 ease-in"
             >
               <IconArrow class="inline" />
             </span>
diff --git a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue
index 70e2e940..6f8408f5 100644
--- a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue
+++ b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.vue
@@ -11,12 +11,14 @@ interface MetadataEduResourceProps {
   resource: EduResourceCardObject
   compact?: boolean
   variant?: string
+  showTime: boolean
 }
 
 // define props
 const props = withDefaults(defineProps<MetadataEduResourceProps>(), {
   resource: undefined,
   compact: false,
+  showTime: false,
   variant: 'primary'
 })
 
@@ -30,7 +32,11 @@ const audience = computed(() => {
   return rangeifyGrades(props.resource?.gradeLevels)
 })
 const time = computed(() => {
-  return props.resource?.time?.time
+  let time = props.resource?.time?.time
+  if (time && props.compact) {
+    time = time.replace('Under ', '<')
+  }
+  return time
 })
 </script>
 <template>
@@ -61,7 +67,7 @@ const time = computed(() => {
       <span>{{ audience }}</span>
     </div>
     <div
-      v-if="time && !compact"
+      v-if="time && showTime"
       class="MetadataEduResourceItem"
     >
       <IconTime
diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
index efeaa36a..a40d873b 100644
--- a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
+++ b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
@@ -300,7 +300,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .NavDesktopEdu {
-  @apply border-b border-transparent;
+  @apply border-none;
 
   > .header-bg {
     @apply bg-gradient-to-r from-black to-primary bg-transparent to-90%;
diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
index bee11c3d..157a3888 100644
--- a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
+++ b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
@@ -13,32 +13,34 @@
     <legend class="md:mb-3 text-body-md mb-2 font-bold leading-normal tracking-wide">
       {{ groupTitle }}
     </legend>
-    <div
-      v-for="(bucket, index) in buckets"
-      :key="bucket.key"
-      ref="buckets"
-      class="form-group form-check"
-    >
-      <!-- correct for zero based index -->
+    <div class="buckets">
       <div
-        v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
-        class="flex my-2"
+        v-for="(bucket, index) in buckets"
+        :key="bucket.key"
+        ref="buckets"
+        class="form-group form-check"
       >
-        <input
-          :id="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
-          v-model="filterByHandler"
-          type="checkbox"
-          :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
-          class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
-        />
-        <!-- 'key_as_string' exists for dates to have a human readable version -->
-        <label
-          :for="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
-          class="form-check-label pl-2 tracking-normal align-middle"
+        <!-- correct for zero based index -->
+        <div
+          v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
+          class="flex my-2"
         >
-          {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-          <span class="text-gray-mid-dark"> ({{ bucket.doc_count.toLocaleString() }}) </span>
-        </label>
+          <input
+            :id="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
+            v-model="filterByHandler"
+            type="checkbox"
+            :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
+            class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+          />
+          <!-- 'key_as_string' exists for dates to have a human readable version -->
+          <label
+            :for="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
+            class="form-check-label pl-2 tracking-normal align-middle"
+          >
+            {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
+            <span class="text-gray-mid-dark"> ({{ bucket.doc_count.toLocaleString() }}) </span>
+          </label>
+        </div>
       </div>
     </div>
     <!--
@@ -49,7 +51,7 @@
 
     <div v-show="truncateFilters && bucketsLength > checkbox.initialLimit">
       <button
-        class="can-hover:hover:underline text-primary mt-2"
+        class="can-hover:hover:underline text-action mt-2"
         :aria-expanded="!checkbox.showMore ? 'true' : 'false'"
         aria-haspopup="true"
         :aria-controls="`filterGroup_${groupKey}`"
diff --git a/packages/vue/src/components/SearchResultCard/SearchResultCard.vue b/packages/vue/src/components/SearchResultCard/SearchResultCard.vue
index 4420a0b5..6cc52df8 100644
--- a/packages/vue/src/components/SearchResultCard/SearchResultCard.vue
+++ b/packages/vue/src/components/SearchResultCard/SearchResultCard.vue
@@ -21,7 +21,10 @@
           customDate,
           location,
           eventType,
-          ongoing
+          ongoing,
+          primarySubject,
+          gradeLevels,
+          time
         }
       }"
       show-calendar-chip
@@ -211,6 +214,7 @@
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
+import type { PrimarySubjectObject, GradeLevelsObject, EduResourcesTime } from './../../interfaces'
 import { useThemeStore } from '../../store/theme'
 import PodcastEpisodeCard from './../PodcastEpisodeCard/PodcastEpisodeCard.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
@@ -338,6 +342,18 @@ export default defineComponent({
     ongoing: {
       type: Boolean,
       default: false
+    },
+    primarySubject: {
+      type: Object as PropType<PrimarySubjectObject>,
+      default: undefined
+    },
+    gradeLevels: {
+      type: Array as PropType<GradeLevelsObject[]>,
+      default: undefined
+    },
+    time: {
+      type: Object as PropType<EduResourcesTime>,
+      default: undefined
     }
   },
   computed: {
diff --git a/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue b/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue
index 67deb7fc..6a8a81df 100644
--- a/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue
+++ b/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.vue
@@ -18,7 +18,10 @@
           customDate,
           location,
           eventType,
-          ongoing
+          ongoing,
+          primarySubject,
+          gradeLevels,
+          time
         }
       }"
       :heading-level="headingLevel"
@@ -94,6 +97,7 @@
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
+import type { PrimarySubjectObject, GradeLevelsObject, EduResourcesTime } from './../../interfaces'
 import { useThemeStore } from '../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -181,6 +185,18 @@ export default defineComponent({
     pageContentType: {
       type: String,
       required: false
+    },
+    primarySubject: {
+      type: Object as PropType<PrimarySubjectObject>,
+      default: undefined
+    },
+    gradeLevels: {
+      type: Array as PropType<GradeLevelsObject[]>,
+      default: undefined
+    },
+    time: {
+      type: Object as PropType<EduResourcesTime>,
+      default: undefined
     }
   },
   computed: {
diff --git a/packages/vue/src/components/SearchResultsList/SearchResultsList.vue b/packages/vue/src/components/SearchResultsList/SearchResultsList.vue
index bd4022a8..cc5a6485 100644
--- a/packages/vue/src/components/SearchResultsList/SearchResultsList.vue
+++ b/packages/vue/src/components/SearchResultsList/SearchResultsList.vue
@@ -31,6 +31,9 @@
           :event-type="page.eventType"
           :ongoing="page.ongoing"
           :location="page.location"
+          :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
+          :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
+          :time="page.time as unknown as EduResourcesTime"
           :title="page.title"
           :summary="page.summary"
           :featured="featureFirstResult ? index === 0 && currentPage === 1 : false"
@@ -53,6 +56,9 @@
           :event-type="page.eventType"
           :ongoing="page.ongoing"
           :location="page.location"
+          :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
+          :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
+          :time="page.time as unknown as EduResourcesTime"
           :title="page.title"
           heading-level="h2"
         />
@@ -64,7 +70,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
-
+import type { PrimarySubjectObject, GradeLevelsObject, EduResourcesTime } from './../../interfaces'
 // @ts-ignore
 import dayjs from 'dayjs'
 import SearchResultCard from './../SearchResultCard/SearchResultCard.vue'
@@ -131,6 +137,9 @@ export default defineComponent({
               // date field is different for mission and event detail pages
               let date
               let location
+              let primarySubject
+              let gradeLevels
+              let time
               let topic =
                 handle === 'missions_mission'
                   ? page._source[handle + '__status_filter']
@@ -152,6 +161,17 @@ export default defineComponent({
               } else if (handle === 'profiles_profilepage') {
                 topic = page._source[handle + '__go_site_name']
                 date = null
+              } else if (handle.startsWith('edu_resources')) {
+                date = null
+                primarySubject = page._source[handle + '__primary_subject'] as PrimarySubjectObject
+                if (page._source[handle + '__grade_levels']) {
+                  gradeLevels = [] as GradeLevelsObject[]
+                  // @ts-expect-error
+                  page._source[handle + '__grade_levels'].forEach((level) => {
+                    gradeLevels.push({ gradeLevel: level.grade_level })
+                  })
+                }
+                time = { time: page._source.activity_time_label_filter } as EduResourcesTime
               } else {
                 date =
                   typeof page._source.publication_date_filter !== 'undefined'
@@ -196,6 +216,10 @@ export default defineComponent({
                 handle === 'edu_events_edueventpage'
                   ? page._source.edu_events_edueventpage__ongoing
                   : undefined
+              // edu resources
+              page.gradeLevels = gradeLevels
+              page.time = time
+              page.primarySubject = primarySubject
               // properties that are different for profiles page
               page.summary =
                 handle === 'profiles_profilepage'
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index 921699c7..20f0f2dd 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -92,6 +92,9 @@ export interface ElasticSearchPage {
   summary?: string
   eventType?: string
   ongoing?: boolean
+  primarySubject?: string
+  gradeLevels: string
+  time: string
 }
 
 export interface FormOption {

From de20ae3852a42f2d58cfb186e43fb9a3cca1f7f6 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 3 Sep 2024 20:54:20 -0700
Subject: [PATCH 2/3] Adding gaurds for .some() method

---
 .../vue/src/components/NavDesktop/NavDesktop.vue   | 10 ++++++----
 .../src/components/NavDesktopEdu/NavDesktopEdu.vue |  8 ++++++--
 .../vue/src/components/NavMobile/NavMobile.vue     |  8 +++++---
 .../NewsDetailMediaContact.vue                     |  8 +++++---
 .../templates/www/PageTimeline/PageTimeline.vue    |  6 +++++-
 packages/vue/src/utils/mixins.ts                   | 14 ++++++++------
 6 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/packages/vue/src/components/NavDesktop/NavDesktop.vue b/packages/vue/src/components/NavDesktop/NavDesktop.vue
index 2be0afb7..22e998c7 100644
--- a/packages/vue/src/components/NavDesktop/NavDesktop.vue
+++ b/packages/vue/src/components/NavDesktop/NavDesktop.vue
@@ -250,9 +250,9 @@ export default defineComponent({
         // key into the breadcrumbs for each section
         const sectionLinks = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active
-        const isActive = sectionLinks.some((link: BreadcrumbPathObject) =>
-          mixinIsActivePath(link.path)
-        )
+        const isActive = sectionLinks?.length
+          ? sectionLinks.some((link: BreadcrumbPathObject) => mixinIsActivePath(link.path))
+          : undefined
         if (isActive) {
           mixinUpdateGlobalChildren(sectionLinks)
         }
@@ -265,7 +265,9 @@ export default defineComponent({
         // get the more menu array
         const arr = this.breadcrumb.more
         // check if array contains current path
-        const isActive = arr.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        const isActive = arr?.length
+          ? arr.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+          : undefined
         if (isActive) {
           // clear the secondary nav store when visiting a breadcrumb page
           // ensures blank secondary nav unless explicitly set via content page "Promote" settings
diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
index a40d873b..c805104e 100644
--- a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
+++ b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
@@ -254,7 +254,9 @@ export default defineComponent({
         // key into the breadcrumbs for each section
         const objArray = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active
-        const isActive = objArray.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        const isActive = objArray?.length
+          ? objArray.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+          : undefined
         if (isActive) {
           mixinUpdateGlobalChildren(this.breadcrumb.menu_links[urlKey])
         }
@@ -267,7 +269,9 @@ export default defineComponent({
         // get the more menu array
         const arr = this.breadcrumb.more
         // check if array contains current path
-        const isActive = arr.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        const isActive = arr?.length
+          ? arr.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+          : undefined
         if (isActive) {
           // clear the secondary nav store when visiting a breadcrumb page
           // ensures blank secondary nav unless explicitly set via content page "Promote" settings
diff --git a/packages/vue/src/components/NavMobile/NavMobile.vue b/packages/vue/src/components/NavMobile/NavMobile.vue
index c16fa630..6a83c1ae 100644
--- a/packages/vue/src/components/NavMobile/NavMobile.vue
+++ b/packages/vue/src/components/NavMobile/NavMobile.vue
@@ -280,9 +280,11 @@ export default defineComponent({
         // key into the breadcrumbs for each section
         const objArray = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active
-        return objArray.some((el: BreadcrumbPathObject) => {
-          return mixinIsActivePath(el.path)
-        })
+        return objArray?.length
+          ? objArray.some((el: BreadcrumbPathObject) => {
+              return mixinIsActivePath(el.path)
+            })
+          : undefined
       }
       return false
     }
diff --git a/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue b/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue
index fb71d037..3234181a 100644
--- a/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue
+++ b/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue
@@ -42,9 +42,11 @@ export default defineComponent({
   },
   computed: {
     hasContent() {
-      return this.contacts.some(
-        (c) => c.contact.name || c.contact.address || c.contact.phone || c.contact.email
-      )
+      return this.contacts?.length
+        ? this.contacts.some(
+            (c) => c.contact.name || c.contact.address || c.contact.phone || c.contact.email
+          )
+        : undefined
     }
   },
   methods: {
diff --git a/packages/vue/src/templates/www/PageTimeline/PageTimeline.vue b/packages/vue/src/templates/www/PageTimeline/PageTimeline.vue
index 42906689..57490024 100644
--- a/packages/vue/src/templates/www/PageTimeline/PageTimeline.vue
+++ b/packages/vue/src/templates/www/PageTimeline/PageTimeline.vue
@@ -209,7 +209,11 @@ export default defineComponent({
   },
   created() {
     const sortByParam = this.$route?.query.sortBy
-    if (sortByParam && sortByOptions.some((option) => option.value === sortByParam)) {
+    if (
+      sortByParam &&
+      sortByOptions &&
+      sortByOptions.some((option) => option.value === sortByParam)
+    ) {
       this.sortBy = sortByParam as SortBy
     }
 
diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
index cc5fcbe2..4cee4247 100644
--- a/packages/vue/src/utils/mixins.ts
+++ b/packages/vue/src/utils/mixins.ts
@@ -194,12 +194,14 @@ export const mixinIsActivePath = (itemPath: string): Boolean => {
     */
 export const mixinGetSrcSet = (srcSetObject: Partial<ImageObject>): string => {
   let srcSet = ''
-  const valid = Object.keys(srcSetObject).some(function (key) {
-    if (key.startsWith('screen')) {
-      return true
-    }
-    return false
-  })
+  const valid = Object.keys(srcSetObject)?.length
+    ? Object.keys(srcSetObject).some(function (key) {
+        if (key.startsWith('screen')) {
+          return true
+        }
+        return false
+      })
+    : false
   if (valid) {
     const srcSetArray: string[] = []
     for (const [key, value] of Object.entries(srcSetObject)) {

From b178f8cf73a678c32fde580b3fb386c79d5f5bb2 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 3 Sep 2024 21:26:37 -0700
Subject: [PATCH 3/3] event metadata compact location now differentiates
 between online and in-person events

---
 .../MetadataEvent/MetadataEvent.stories.js    |  1 +
 .../MetadataEvent/MetadataEvent.vue           | 32 ++++++++++++++-----
 packages/vue/src/interfaces.ts                |  1 +
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/vue/src/components/MetadataEvent/MetadataEvent.stories.js b/packages/vue/src/components/MetadataEvent/MetadataEvent.stories.js
index 429f1269..366d5018 100644
--- a/packages/vue/src/components/MetadataEvent/MetadataEvent.stories.js
+++ b/packages/vue/src/components/MetadataEvent/MetadataEvent.stories.js
@@ -20,6 +20,7 @@ export const MetadataEventData = {
     endTime: '22:00:00',
     ongoing: false,
     isVirtualEvent: false,
+    isInPersonEvent: true,
     locationName: 'Webcast',
     locationLink: 'https://www.nasa.gov',
     customDate: undefined
diff --git a/packages/vue/src/components/MetadataEvent/MetadataEvent.vue b/packages/vue/src/components/MetadataEvent/MetadataEvent.vue
index c244a2e2..2c83284b 100644
--- a/packages/vue/src/components/MetadataEvent/MetadataEvent.vue
+++ b/packages/vue/src/components/MetadataEvent/MetadataEvent.vue
@@ -52,8 +52,24 @@ const displayTime = computed((): string => {
   }
   return ''
 })
-const locationName = computed(() => {
-  return props.event?.locationName || props.event?.location
+const location = computed(() => {
+  if (props.event?.location) {
+    return props.event?.location
+  } else if (props.compact) {
+    let text = 'Hybrid'
+    let virtual = props.event.isVirtualEvent
+    let inPerson = props.event.isInPersonEvent
+    if (props.event?.isVirtualEvent && props) {
+      if (virtual && !inPerson) {
+        text = 'Online'
+      } else if (!virtual && inPerson) {
+        text = 'In-person'
+      }
+    }
+    return text
+  } else {
+    return props.event?.locationName
+  }
 })
 </script>
 <template>
@@ -96,7 +112,7 @@ const locationName = computed(() => {
         />
         <meta
           itemprop="name"
-          :content="locationName"
+          :content="location"
         />
         <IconLocation class="MetadataEventIcon text-[1.1em]" />
         <BaseLink
@@ -105,18 +121,18 @@ const locationName = computed(() => {
           :href="props.event.locationLink"
           external-target-blank
         >
-          {{ locationName }}
+          {{ location }}
         </BaseLink>
       </div>
       <!-- Normal location -->
       <div
-        v-else-if="locationName"
+        v-else-if="location"
         class="MetadataEventItem"
       >
         <meta
           v-if="!props.compact"
           itemprop="location"
-          :content="locationName"
+          :content="location"
         />
         <IconLocation class="MetadataEventIcon text-[1.2em]" />
         <BaseLink
@@ -126,9 +142,9 @@ const locationName = computed(() => {
           :href="props.event.locationLink"
           external-target-blank
         >
-          {{ locationName }}
+          {{ location }}
         </BaseLink>
-        <span v-else>{{ locationName }}</span>
+        <span v-else>{{ location }}</span>
       </div>
     </template>
   </div>
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index 20f0f2dd..b3ab059c 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -132,6 +132,7 @@ export interface EventCardObject extends Card {
   eventType?: string
   ongoing?: boolean
   isVirtualEvent?: boolean
+  isInPersonEvent?: boolean
   locationName?: string
   location?: string
   locationLink?: string