@explorer-1/vue 0.2.26 → 0.2.28

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type { ImageObject, PageEduResourcesObject } from './../../../interfaces'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+
+interface PageEduCollectionsDetail extends PageEduResourcesObject {
+  heroImage: ImageObject
+  heroImageCaption: string
+  showMetaPanel: boolean
+  heroSubtitle: string
+}
+interface PageEduCollectionsDetailProps {
+  data?: PageEduCollectionsDetail
+}
+
+const props = withDefaults(defineProps<PageEduCollectionsDetailProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const PageEduCollectionsDetailJumpMenu = ref()
+
+defineExpose({
+  PageEduCollectionsDetailJumpMenu
+})
+
+const heroInline = computed((): boolean => {
+  return data?.heroPosition === 'inline'
+})
+
+const computedClass = computed((): string => {
+  if (heroInline.value || !data?.heroImage) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeEdu ThemeVariantLight"
+    :class="computedClass"
+  >
+    <!-- hero large -->
+    <HeroLarge
+      v-if="!heroInline && data.heroImage"
+      :title="data.title"
+      :image="data.heroImage"
+      :summary="'Test test test lorem ipsum dolor sit amet yep.'"
+      :custom-pill-type="data.__typename"
+      :class="!data.showMetaPanel ? 'mb-10 lg:mb-22' : ''"
+    />
+
+    <NavJumpMenu
+      ref="PageEduCollectionsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="data.showJumpMenu"
+      dropdown-text="In this collection"
+    />
+
+    <LayoutHelper
+      v-if="heroInline || !data.heroImage"
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        label="Collection"
+        pill
+        pill-color="primary-inverted"
+      />
+    </LayoutHelper>
+    <MetaPanel
+      v-if="data.showMetaPanel"
+      theme="primary"
+      :class="{ 'mb-10 lg:mb-14': true }"
+      :primary-subject="data.primarySubject"
+      :additional-subjects="data.additionalSubjects"
+      :grade-levels="data.gradeLevels"
+      :negative-top="!heroInline"
+      :negative-bottom="heroInline"
+    />
+
+    <!-- TODO: put this in a component (exclude layout though) -->
+    <LayoutHelper
+      v-if="data.heroImage && heroInline"
+      class="lg:mb-22 mb-10"
+    >
+      <BlockImageStandard
+        :data="data.heroImage"
+        :display-caption="data.heroImageCaption ? true : false"
+        :caption="data.heroImageCaption"
+        :constrain="data.heroConstrain"
+      />
+    </LayoutHelper>
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield :data="data.body" />
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="data.lastPublishedAt"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <p class="border-t border-gray-light-mid pt-8">
+        <strong>Collection Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
+    <!-- explore more -->
+    <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-primary-darker pt-14 pb-20 ThemeVariantDark text-white"
+    >
+      <BlockLinkCarousel
+        item-type="cards"
+        heading="Explore more"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>

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

@@ -4,10 +4,10 @@ import { BlockImageCarouselData } from './../../../components/BlockImageCarousel
 import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
 import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories'
 import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
-
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
 import PageEduExplainerArticle from './PageEduExplainerArticle.vue'
 
 export default {
@@ -41,6 +41,8 @@ export const BaseStory = {
       url: 'http://localhost:3000/edu/resources/test-resource',
       title: 'Test Resource',
       readTime: '6 min read',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+      authors: AboutTheAuthorData,
       heroConstrain: true,
       heroPosition: 'full_bleed',
       hero: [

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -1,38 +1,30 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
-import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
-import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
-import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
-import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
-import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
 
 export default defineComponent({
   name: 'PageEduExplainerArticle',
   components: {
+    AboutTheAuthor,
     HeroMedia,
-    BaseImagePlaceholder,
+    HeroInlineMedia,
     LayoutHelper,
     DetailHeadline,
-    BlockImageStandard,
-    BlockIframeEmbed,
     ShareButtonsEdu,
     BlockStreamfield,
-    BlockImageCarousel,
-    BlockImageComparison,
     BlockLinkCarousel,
     BlockRelatedLinks,
     BlockText,
-    BlockVideo,
     NavJumpMenu
   },
   props: {
@@ -134,43 +126,16 @@ export default defineComponent({
       dropdown-text="In this article"
     />
     <!-- inline hero content -->
+
     <LayoutHelper
       v-if="!heroEmpty && heroInline"
       indent="col-2"
       class="lg:mb-22 mt-10 mb-10"
     >
-      <BlockImageStandard
-        v-if="data.hero[0].blockType === 'HeroImageBlock'"
-        :data="data.hero[0].imageInline"
-        :display-caption="data.hero[0].displayCaption"
-        :caption="data.hero[0].caption"
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
         :constrain="data.heroConstrain"
       />
-      <BlockImageCarousel
-        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
-        :items="data.hero[0].blocks"
-        :block-id="data.hero[0].id"
-      />
-      <BlockIframeEmbed
-        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
-        :data="data.hero[0]"
-      />
-      <BlockVideo
-        v-else-if="data.hero[0].blockType === 'VideoBlock'"
-        :data="data.hero[0]"
-        autoplay
-      />
-      <BaseImagePlaceholder
-        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
-        aspect-ratio="16:9"
-        dark-mode
-      >
-        <div v-html="data.hero[0].embed.embed"></div>
-      </BaseImagePlaceholder>
-      <BlockImageComparison
-        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
-        :data="data.hero[0]"
-      />
     </LayoutHelper>
 
     <LayoutHelper
@@ -207,5 +172,26 @@ export default defineComponent({
       :heading="data.relatedContentHeading"
       :items="data.relatedContent"
     />
+
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="data.lastPublishedAt"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <p class="border-t border-gray-light-mid pt-8">
+        <strong>Explainer Article Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
   </div>
 </template>

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

@@ -13,6 +13,7 @@ import {
   BlockStreamfieldMinimalData
 } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
 import PageEduLesson from './PageEduLesson.vue'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
 
 export default {
   title: 'Templates/EDU/PageEduLesson',
@@ -50,6 +51,7 @@ export const BaseStory = {
         original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
         alt: ''
       },
+      authors: AboutTheAuthorData,
       hero: [
         {
           ...HeroMediaData,

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -8,22 +8,19 @@ import type {
 } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
-import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
-import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
-import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
-import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
-import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
 import PageEduLessonSection, { type PageEduLessonSectionProps } from './PageEduLessonSection.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+
 import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
 
 interface EduLessonSectionObject extends PageEduLessonSectionProps {
@@ -319,38 +316,10 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       v-if="!heroEmpty && heroInline && data.hero?.length"
       class="lg:mb-22 mb-10"
     >
-      <BlockImageStandard
-        v-if="data.hero[0].blockType === 'HeroImageBlock'"
-        :data="data.hero[0].imageInline"
-        :display-caption="data.hero[0].displayCaption"
-        :caption="data.hero[0].caption"
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
         :constrain="data.heroConstrain"
       />
-      <BlockImageCarousel
-        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
-        :items="data.hero[0].blocks"
-        :block-id="data.hero[0].id"
-      />
-      <BlockIframeEmbed
-        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
-        :data="data.hero[0]"
-      />
-      <BlockVideo
-        v-else-if="data.hero[0].blockType === 'VideoBlock'"
-        :data="data.hero[0]"
-        autoplay
-      />
-      <BaseImagePlaceholder
-        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
-        aspect-ratio="16:9"
-        dark-mode
-      >
-        <div v-html="data.hero[0].embed?.embed"></div>
-      </BaseImagePlaceholder>
-      <BlockImageComparison
-        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
-        :data="data.hero[0]"
-      />
     </LayoutHelper>
 
     <NavJumpMenu
@@ -396,10 +365,17 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     <BlockLinkCarousel
       item-type="cards"
       class="lg:my-24 my-12 print:px-4"
-      :heading="data.relatedContentHeading"
+      :heading="data.relatedContentHeading || 'Related Lessons & Projects'"
       :items="data.relatedContent"
     />
 
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
+
     <LayoutHelper
       v-if="data.lastPublishedAt"
       indent="col-3"

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

@@ -1,5 +1,7 @@
 import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
 import { BlockStreamfieldData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
+
 import PageEduNewsDetail from './PageEduNewsDetail.vue'
 
 export default {
@@ -33,14 +35,7 @@ export const BaseStory = {
       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: {
-            name: 'Author Name',
-            organization: 'Organization Name'
-          }
-        }
-      ],
+      authors: AboutTheAuthorData,
       getTopicsForDisplay: [
         {
           title: 'Mars',

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

@@ -10,6 +10,7 @@ import BlockImageStandard from './../../../components/BlockImage/BlockImageStand
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
 
 interface PageEduNewsDetailObject extends PageObject {
   readTime: string
@@ -18,7 +19,7 @@ interface PageEduNewsDetailObject extends PageObject {
   heroImageInline: ImageObject
   heroConstrain: boolean
   heroImageCaption: string
-  authors: AuthorObject[]
+  authors: { author: AuthorObject }[]
   showJumpMenu: boolean
 }
 
@@ -152,6 +153,14 @@ defineExpose({
       :data="data.body"
     />
 
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+      class="mb-10 lg:mb-22"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
+
     <div class="bg-stars bg-primary-darker">
       <div class="py-10 text-center text-white">
         <strong>Related News goes here</strong>

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

@@ -13,6 +13,7 @@ import {
   BlockStreamfieldMinimalData
 } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
 import PageEduTeachableMoment from './PageEduTeachableMoment.vue'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
 
 export default {
   title: 'Templates/EDU/PageEduTeachableMoment',
@@ -47,6 +48,7 @@ export const BaseStory = {
         original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
         alt: ''
       },
+      authors: AboutTheAuthorData,
       hero: [
         {
           ...HeroMediaData,

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -2,19 +2,16 @@
 import { computed, reactive, ref } from 'vue'
 import type { PageEduResourcesObject } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
-import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
-import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
-import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
-import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
-import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
 
 interface PageEduTeachableMomentProps {
   data?: PageEduResourcesObject
@@ -112,43 +109,14 @@ const computedClass = computed((): string => {
       />
     </LayoutHelper>
 
-    <!-- TODO: put this in a component (exclude layout though) -->
     <LayoutHelper
       v-if="!heroEmpty && heroInline && data.hero?.length"
       class="lg:mb-22 mb-10"
     >
-      <BlockImageStandard
-        v-if="data.hero[0].blockType === 'HeroImageBlock'"
-        :data="data.hero[0].imageInline"
-        :display-caption="data.hero[0].displayCaption"
-        :caption="data.hero[0].caption"
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
         :constrain="data.heroConstrain"
       />
-      <BlockImageCarousel
-        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
-        :items="data.hero[0].blocks"
-        :block-id="data.hero[0].id"
-      />
-      <BlockIframeEmbed
-        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
-        :data="data.hero[0]"
-      />
-      <BlockVideo
-        v-else-if="data.hero[0].blockType === 'VideoBlock'"
-        :data="data.hero[0]"
-        autoplay
-      />
-      <BaseImagePlaceholder
-        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
-        aspect-ratio="16:9"
-        dark-mode
-      >
-        <div v-html="data.hero[0].embed?.embed"></div>
-      </BaseImagePlaceholder>
-      <BlockImageComparison
-        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
-        :data="data.hero[0]"
-      />
     </LayoutHelper>
 
     <!-- summary and topper -->
@@ -162,11 +130,6 @@ const computedClass = computed((): string => {
         :text="data.topper"
       />
     </LayoutHelper>
-    <!-- streamfield blocks -->
-    <BlockStreamfield
-      itemprop="articleBody"
-      :data="data.body"
-    />
 
     <!-- streamfield blocks -->
     <BlockStreamfield :data="data.body" />
@@ -180,14 +143,12 @@ const computedClass = computed((): string => {
       <BlockRelatedLinks :data="data.relatedLinks[0]" />
     </LayoutHelper>
 
-    <!-- related content -->
-    <BlockLinkCarousel
-      v-if="data.relatedContent?.length"
-      item-type="cards"
-      class="lg:my-24 my-12 print:px-4"
-      :heading="data.relatedContentHeading"
-      :items="data.relatedContent"
-    />
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
 
     <LayoutHelper
       v-if="data.lastPublishedAt"

package/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue

@@ -4,7 +4,7 @@
     class="-nav-offset"
   >
     <HeroLarge
-      eyebrow="Robotics at JPL"
+      label="Robotics at JPL"
       :title="data.title"
       :summary="data.description"
       :image="data.listingPageHeroImage"

package/src/templates/www/PageTopicDetail/PageTopicDetail.vue

@@ -6,7 +6,7 @@
     <div class="lg:mb-24 mb-12">
       <HeroLarge
         class="relative z-10"
-        :eyebrow="data.parentDisplayTitle"
+        :label="data.parentDisplayTitle"
         :title="data.displayTitle"
         :summary="data.strapline"
         :image="data.listingPageHeroImage"