@explorer-1/vue 0.2.39 → 0.2.41

package/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'
                 }
               }
-            ]
-          }
-        ]
-      }
+            }
+          ]
+        }
+      ]
     }
   }
 }

package/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
     }

package/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>

package/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

package/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

package/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>

package/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

package/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
@@ -300,7 +304,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%;

package/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
     }

package/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: {

package/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}`"

package/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: {

package/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: {