making hero configuration the same between all EDU resource (#613)

apps/vue-storybook/.storybook/preview.ts

@@ -190,7 +190,23 @@ const preview: Preview = {
           'Mixins',
           ['Overview'],
           'Templates',
-          ['WWW', 'EDU', 'PageContent']
+          [
+            'WWW',
+            'EDU',
+            [
+              'PageContent',
+              'PageEduNewsDetail',
+              'PageEduEventDetail',
+              'PageEduCollectionsDetail',
+              'PageEduExplainerArticle',
+              'PageEduLesson',
+              'PageEduStudentProject',
+              'PageEduTeachableMoment',
+              'PageEduMultimediaDetail',
+              '*'
+            ],
+            'PageContent'
+          ]
         ]
       }
     }

packages/vue/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

packages/vue/src/interfaces.ts

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

packages/vue/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: {

packages/vue/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"

packages/vue/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: {

packages/vue/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"
@@ -290,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"
     />