@explorer-1/vue 0.2.52 → 0.2.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.52",
+  "version": "0.2.54",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -10,9 +10,9 @@ export default {
   argTypes: {
     size: {
       control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg']
-      }
+        type: 'select'
+      },
+      options: ['sm', 'md', 'lg']
     },
     headingLevel: {
       description:
@@ -152,6 +152,29 @@ export const EventItemWithChip = {
     }
   }
 }
+export const EventWithDateNoTime = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    showCalendarChip: true,
+    data: {
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUEventPage',
+        startDate: '2021-11-11',
+        startDatetime: null,
+        endDatetime: null,
+        endDate: '2021-11-12',
+        ongoing: false,
+        eventType: 'Workshop'
+      }
+    }
+  }
+}
 export const EduLesson = {
   decorators: [
     () => ({
@@ -160,6 +183,7 @@ export const EduLesson = {
   ],
   args: {
     ...BlockLinkCardData,
+    size: 'sm',
     data: {
       page: {
         __typename: 'EDULessonPage',
@@ -172,7 +196,10 @@ export const EduLesson = {
           { gradeLevel: '1' },
           { gradeLevel: '2' },
           { gradeLevel: '8' }
-        ]
+        ],
+        time: {
+          time: '1-2 hrs'
+        }
       }
     }
   }

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -98,7 +98,7 @@
       </component>
       <p
         v-if="(theItem as EventCardObject).targetAudience"
-        :class="{ 'mt-2': !large, 'mt-4': large }"
+        :class="{ 'mt-1': !large, 'mt-4': large }"
       >
         <strong>Target Audience:</strong> {{ (theItem as EventCardObject).targetAudience }}
       </p>

package/src/components/HeroMedia/HeroMedia.vue

@@ -109,7 +109,7 @@ export default defineComponent({
   computed: {
     ...mapStores(useThemeStore),
     theImageCaption(): string | undefined {
-      if (this.image && this.caption && this.caption.length > 2 && this.displayCaption) {
+      if (this.displayCaption && this.image && this.caption && this.caption.length > 2) {
         return this.caption
       } else if (
         this.image &&
@@ -135,10 +135,12 @@ export default defineComponent({
     },
     // to handle captions for videos
     customCaption(): Partial<ImageObject> | undefined {
-      if ((this.caption && this.caption.length > 2) || this.credit) {
-        return {
-          caption: this.caption,
-          credit: this.credit
+      if (this.displayCaption) {
+        if ((this.caption && this.caption.length > 2) || this.credit) {
+          return {
+            caption: this.caption,
+            credit: this.credit
+          }
         }
       }
       return undefined

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -42,7 +42,7 @@ const time = computed(() => {
 <template>
   <div
     class="MetadataEduResource"
-    :class="{ '-compact text-body-sm': props.compact, 'text-body-lg': !props.compact }"
+    :class="{ '-compact text-sm xl:text-base': props.compact, 'text-body-lg': !props.compact }"
   >
     <div
       v-if="primarySubject"
@@ -69,6 +69,7 @@ const time = computed(() => {
     <div
       v-if="time && showTime"
       class="MetadataEduResourceItem"
+      :class="primarySubject && audience && time ? '-xlScreensOnly' : ''"
     >
       <IconTime
         class="MetadataEduResourceIcon text-[1.15em]"
@@ -102,10 +103,14 @@ const time = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEduResourceItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
+      &.-xlScreensOnly {
+        @apply hidden xl:flex;
+      }
     }
   }
 }

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -76,7 +76,7 @@ const location = computed(() => {
   <div
     class="MetadataEvent"
     :class="{
-      '-compact text-body-sm': props.compact,
+      '-compact text-sm xl:text-base': props.compact,
       'text-body-lg': !props.compact,
       '-allow-break': props.allowBreak
     }"
@@ -173,8 +173,9 @@ const location = computed(() => {
   }
 
   &.-compact {
-    @apply flex flex-grow;
+    @apply flex flex-grow flex-wrap;
     .MetadataEventItem {
+      @apply whitespace-nowrap;
       @apply max-w-none min-w-[4em];
       @apply mr-6 mb-0;
     }

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -139,6 +139,7 @@ export default {
           if (newVal.length > 0) {
             query = {
               ...this.$route.query,
+              page: 1,
               [this.groupKey]: newVal.toString()
             }
           } else {

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -66,9 +66,20 @@ export const PodcastEpisodeCard = {
 export const EduEventCard = {
   args: {
     ...SearchResultCardData,
-    pageContentType: 'eduevents_edueventpage',
+    __typename: 'EDUEventPage',
+    pageType: 'EDUEventPage',
+    contentType: 'EDUEventPage',
+    topic: null,
+    date: null,
+    isEvents: true,
+    type: 'Event',
     startDate: '2021-11-11',
     endDate: '2021-11-11',
-    eventType: 'Internship'
+    eventType: 'Internship',
+    startTime: '00:00:00-08:00',
+    endTime: '23:59:59.999999-08:00',
+    location: 'Hybrid',
+    targetAudience: 'All ages',
+    pageContentType: 'edu_events_edueventpage'
   }
 }

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -150,20 +150,25 @@ export default defineComponent({
                     : null
               const pageType = page._source[handle + '__label']
               if (handle === 'events_eventpage') {
+                // WWW Events
                 date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
               } else if (handle === 'edu_events_edueventpage') {
+                // EDU Events
                 date = null
                 location = page._source[handle + '__location_filter']
               } else if (handle === 'missions_mission') {
+                // WWW Missions
                 date = page._source.display_date_filter
                   ? 'Launch date: ' + page._source.display_date_filter
                   : typeof page._source.publication_date_filter !== 'undefined'
                     ? 'Published: ' + parseDate(page._source.publication_date_filter)
                     : 'Published: ' + parseDate(page._source.first_published_at_filter)
               } else if (handle === 'profiles_profilepage') {
+                // WWW Profiles
                 topic = page._source[handle + '__go_site_name']
                 date = null
               } else if (handle.startsWith('edu_resources')) {
+                // EDU Resources
                 date = null
                 primarySubject = page._source[handle + '__primary_subject'] as PrimarySubjectObject
                 if (
@@ -178,6 +183,7 @@ export default defineComponent({
                 }
                 time = { time: page._source.activity_time_label_filter } as EduResourcesTime
               } else {
+                // Fallback publication date
                 date =
                   typeof page._source.publication_date_filter !== 'undefined'
                     ? parseDate(page._source.publication_date_filter)
@@ -195,11 +201,11 @@ export default defineComponent({
                 handle === 'events_eventpage' ? page._source[handle + '__location'] : location
               page.startDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__start_datetime']
+                  ? page._source[handle + '__start_date']
                   : null
               page.endDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
-                  ? page._source[handle + '__end_datetime']
+                  ? page._source[handle + '__end_date']
                   : null
               page.startTime =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'

package/src/interfaces.ts

@@ -38,6 +38,7 @@ export interface StreamfieldBlockData extends BlockData {
   caption?: string
   credit?: string
   imageInline?: ImageObject
+  heroSummary?: string
 }
 
 export interface ImageSrcObject {

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

@@ -109,6 +109,22 @@ export const BaseStory = {
     }
   }
 }
+
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
 export const InlineHero = {
   args: {
     data: {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
@@ -25,7 +26,8 @@ export default defineComponent({
     BlockLinkCarousel,
     BlockRelatedLinks,
     BlockText,
-    NavJumpMenu
+    NavJumpMenu,
+    HeroLarge
   },
   props: {
     data: {
@@ -36,16 +38,35 @@ export default defineComponent({
   },
   computed: {
     heroEmpty(): boolean {
-      return (this.data?.hero || []).length === 0
+      return this.data?.hero?.length === 0
+    },
+    theHero() {
+      if (this.data?.hero?.length) {
+        return this.data.hero[0]
+      }
+      return undefined
+    },
+    heroTitle(): boolean {
+      if (this.theHero) {
+        // excludes VideoBlock as this will autoplay
+        if (this.theHero.blockType === 'HeroTitleBlock') {
+          return true
+        }
+      }
+      return false
     },
     heroInline(): boolean {
-      if (!this.heroEmpty) {
-        if (this.data?.hero[0].blockType === 'VideoBlock') {
+      // heroes with interactive elements have special handling
+      if (this.theHero && !this.heroTitle) {
+        // excludes VideoBlock as this will autoplay
+        if (this.theHero.blockType === 'VideoBlock') {
           return false
         } else if (
           this.data?.heroPosition === 'inline' ||
-          this.data?.hero[0].blockType === 'CarouselBlock' ||
-          this.data?.hero[0].blockType === 'VideoEmbedBlock'
+          this.theHero.blockType === 'CarouselBlock' ||
+          this.theHero.blockType === 'IframeEmbedBlock' ||
+          this.theHero.blockType === 'VideoEmbedBlock' ||
+          this.theHero.blockType === 'ImageComparisonBlock'
         ) {
           return true
         }
@@ -77,20 +98,29 @@ export default defineComponent({
       itemprop="image"
       :content="data.thumbnailImage.original"
     />
-
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
     <!-- hero image -->
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
       class="md:mb-12 lg:mb-18 mb-10"
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="data.hero[0].displayCaption"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
 
@@ -100,6 +130,7 @@ export default defineComponent({
       class="mb-10"
     >
       <DetailHeadline
+        v-if="!heroTitle"
         :title="data.title"
         :read-time="data.readTime"
         :publication-date="data.publicationDate"
@@ -112,7 +143,7 @@ export default defineComponent({
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"

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

@@ -58,7 +58,8 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
-      heroConstrain: true,
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       studentProject: {
         title: 'Student Project',
@@ -275,6 +276,30 @@ export const BaseStory = {
   }
 }
 
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
 export const HeroCarousel = {
   args: {
     data: {

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

@@ -6,6 +6,7 @@ import type {
   StreamfieldBlockData
 } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
@@ -94,17 +95,35 @@ const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
 
+const theHero = computed(() => {
+  if (data?.hero?.length) {
+    return data.hero[0]
+  }
+  return undefined
+})
+
+const heroTitle = computed((): boolean => {
+  if (theHero.value) {
+    // excludes VideoBlock as this will autoplay
+    if (theHero.value.blockType === 'HeroTitleBlock') {
+      return true
+    }
+  }
+  return false
+})
+
 const heroInline = computed((): boolean => {
   // heroes with interactive elements have special handling
-  if (!heroEmpty.value && data?.hero) {
+  if (theHero.value && !heroTitle.value) {
     // excludes VideoBlock as this will autoplay
-    if (data?.hero[0].blockType === 'VideoBlock') {
+    if (theHero.value.blockType === 'VideoBlock') {
       return false
     } else if (
-      data?.hero[0].blockType === 'CarouselBlock' ||
-      data?.hero[0].blockType === 'IframeEmbedBlock' ||
-      data?.hero[0].blockType === 'VideoEmbedBlock' ||
-      data?.hero[0].blockType === 'ImageComparisonBlock'
+      data?.heroPosition === 'inline' ||
+      theHero.value.blockType === 'CarouselBlock' ||
+      theHero.value.blockType === 'IframeEmbedBlock' ||
+      theHero.value.blockType === 'VideoEmbedBlock' ||
+      theHero.value.blockType === 'ImageComparisonBlock'
     ) {
       return true
     }
@@ -251,24 +270,43 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
 
   return filteredSections
 })
+const computedClass = computed((): string => {
+  if (heroInline.value || heroEmpty.value) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
 </script>
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight pt-5 lg:pt-12"
+    class="ThemeVariantLight"
+    :class="computedClass"
   >
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
+
     <LayoutHelper
       indent="col-2"
       class="mb-10"
     >
       <DetailHeadline
+        v-if="data.title && !heroTitle"
         :title="data.title"
         label="Lesson"
         pill
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -281,6 +319,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
         <BaseLink
           class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
           variant="none"
+          :to="data.studentProject?.url"
         >
           View the Project Steps
         </BaseLink>
@@ -289,29 +328,30 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     <MetaPanel
       button="View Standards"
       theme="primary"
-      :class="{ 'mb-10 lg:mb-14': heroInline || data?.hero?.length === 0 }"
+      :class="{ 'mb-10 lg:mb-14': heroTitle || heroInline || data?.hero?.length === 0 }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :time="data.customTime ? { time: data.customTime } : data.time"
       :grade-levels="data.gradeLevels"
       :standards="data.standards"
-      :negative-bottom="heroInline || data?.hero?.length !== 0"
+      :negative-bottom="(heroInline || data?.hero?.length !== 0) && !heroTitle"
     />
 
     <!-- hero media -->
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
       class="md:mb-12 lg:mb-18 mb-10"
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="data.hero[0].displayCaption"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
 

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

@@ -56,9 +56,12 @@ export const BaseStory = {
       hero: [
         {
           ...HeroMediaData,
-          blockType: 'HeroImageBlock'
+          blockType: 'HeroImageBlock',
+          displayCaption: false
         }
       ],
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       lesson: {
         title: 'Lesson',
@@ -130,7 +133,7 @@ export const BaseStory = {
       materialsHeading: 'Custom Materials Heading',
       materialsImage: BlockImageData.image,
 
-      stepsNumbering: false,
+      stepsNumbering: true,
 
       steps: [
         {
@@ -175,6 +178,29 @@ export const BaseStory = {
   }
 }
 
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
 export const HeroCarousel = {
   args: {
     data: {
@@ -223,7 +249,8 @@ export const HeroVideoEmbed = {
           embed: {
             embed: `<iframe title="Meet NASA's Diana Trujillo - Embedded Hero" width="480" height="270" src="https://www.youtube.com/embed/vUuUyYqI83Q?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
           },
-          blockType: 'VideoEmbedBlock'
+          blockType: 'VideoEmbedBlock',
+          displayCaption: false
         }
       ]
     }

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -6,6 +6,7 @@ import type {
   StreamfieldBlockData
 } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
@@ -83,17 +84,35 @@ const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
 
+const theHero = computed(() => {
+  if (data?.hero?.length) {
+    return data.hero[0]
+  }
+  return undefined
+})
+
+const heroTitle = computed((): boolean => {
+  if (theHero.value) {
+    // excludes VideoBlock as this will autoplay
+    if (theHero.value.blockType === 'HeroTitleBlock') {
+      return true
+    }
+  }
+  return false
+})
+
 const heroInline = computed((): boolean => {
   // heroes with interactive elements have special handling
-  if (!heroEmpty.value && data?.hero) {
+  if (theHero.value && !heroTitle.value) {
     // excludes VideoBlock as this will autoplay
-    if (data?.hero[0].blockType === 'VideoBlock') {
+    if (theHero.value.blockType === 'VideoBlock') {
       return false
     } else if (
-      data?.hero[0].blockType === 'CarouselBlock' ||
-      data?.hero[0].blockType === 'IframeEmbedBlock' ||
-      data?.hero[0].blockType === 'VideoEmbedBlock' ||
-      data?.hero[0].blockType === 'ImageComparisonBlock'
+      data?.heroPosition === 'inline' ||
+      theHero.value.blockType === 'CarouselBlock' ||
+      theHero.value.blockType === 'IframeEmbedBlock' ||
+      theHero.value.blockType === 'VideoEmbedBlock' ||
+      theHero.value.blockType === 'ImageComparisonBlock'
     ) {
       return true
     }
@@ -230,13 +249,34 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
 const studentBadge = computed(() => {
   return StudentProjectBadge
 })
+
+const computedClass = computed((): string => {
+  if (heroInline.value || heroEmpty.value) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
 </script>
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight pt-5 lg:pt-12"
+    class="ThemeVariantLight"
+    :class="computedClass"
   >
-    <div class="BaseGrid hidden lg:block container relative mx-auto z-20 pointer-events-none">
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
+    <div
+      v-if="!heroTitle"
+      class="BaseGrid hidden lg:block container relative mx-auto z-20 pointer-events-none"
+    >
       <div class="absolute top-0 left-0 col-start-1 col-end-3 text-right lg:-ml-2 xl:ml-4">
         <img
           :src="studentBadge"
@@ -252,7 +292,7 @@ const studentBadge = computed(() => {
       class="mb-10"
     >
       <DetailHeadline
-        v-if="data.title"
+        v-if="data.title && !heroTitle"
         :title="data.title"
         label="Student Project"
         pill
@@ -260,7 +300,7 @@ const studentBadge = computed(() => {
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -280,7 +320,10 @@ const studentBadge = computed(() => {
       </div>
     </LayoutHelper>
 
-    <div class="container relative mx-auto z-20 pointer-events-none">
+    <div
+      v-if="!heroTitle"
+      class="container relative mx-auto z-20 pointer-events-none"
+    >
       <img
         :src="studentBadge"
         alt=""
@@ -293,15 +336,16 @@ const studentBadge = computed(() => {
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="false"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
     <LayoutHelper
@@ -322,7 +366,7 @@ const studentBadge = computed(() => {
       :additional-subjects="data.additionalSubjects"
       :time="data.customTime ? { time: data.customTime } : data.time"
       :standards="data.standards"
-      :negative-top="!heroInline && !heroEmpty"
+      :negative-top="!heroInline && !heroEmpty && !heroTitle"
     >
       <template #metaInfo>
         <div :class="data?.standards ? 'border-b border-gray-light-mid' : ''">

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

@@ -56,7 +56,8 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
-      heroConstrain: true,
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       body: BlockStreamfieldTruncatedData.body,
 
@@ -67,6 +68,30 @@ export const BaseStory = {
   }
 }
 
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
 export const HeroCarousel = {
   args: {
     data: {

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

@@ -2,6 +2,7 @@
 import { computed, reactive, ref } from 'vue'
 import type { PageEduResourcesObject } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
@@ -33,17 +34,35 @@ const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
 
+const theHero = computed(() => {
+  if (data?.hero?.length) {
+    return data.hero[0]
+  }
+  return undefined
+})
+
+const heroTitle = computed((): boolean => {
+  if (theHero.value) {
+    // excludes VideoBlock as this will autoplay
+    if (theHero.value.blockType === 'HeroTitleBlock') {
+      return true
+    }
+  }
+  return false
+})
+
 const heroInline = computed((): boolean => {
   // heroes with interactive elements have special handling
-  if (!heroEmpty.value && data?.hero) {
+  if (theHero.value && !heroTitle.value) {
     // excludes VideoBlock as this will autoplay
-    if (data?.hero[0].blockType === 'VideoBlock') {
+    if (theHero.value.blockType === 'VideoBlock') {
       return false
     } else if (
-      data?.hero[0].blockType === 'CarouselBlock' ||
-      data?.hero[0].blockType === 'IframeEmbedBlock' ||
-      data?.hero[0].blockType === 'VideoEmbedBlock' ||
-      data?.hero[0].blockType === 'ImageComparisonBlock'
+      data?.heroPosition === 'inline' ||
+      theHero.value.blockType === 'CarouselBlock' ||
+      theHero.value.blockType === 'IframeEmbedBlock' ||
+      theHero.value.blockType === 'VideoEmbedBlock' ||
+      theHero.value.blockType === 'ImageComparisonBlock'
     ) {
       return true
     }
@@ -73,21 +92,29 @@ const computedClass = computed((): string => {
       :blocks="data.body"
       dropdown-text="In this Teachable Moment"
     />
-
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
     <!-- hero media -->
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
       class="md:mb-12 lg:mb-18 mb-10"
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="data.hero[0].displayCaption"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
 
@@ -96,6 +123,7 @@ const computedClass = computed((): string => {
       class="mb-10"
     >
       <DetailHeadline
+        v-if="!heroTitle"
         :title="data.title"
         :read-time="data.readTime"
         label="Teachable Moment"
@@ -103,7 +131,7 @@ const computedClass = computed((): string => {
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -122,11 +150,11 @@ const computedClass = computed((): string => {
 
     <!-- summary and topper -->
     <LayoutHelper
+      v-if="data.topper && data.topper.length > 2"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >
       <BlockText
-        v-if="data.topper && data.topper.length > 2"
         class="lg:mb-8 mb-5"
         :text="data.topper"
       />