@explorer-1/vue 0.2.27 → 0.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.7"
+    "@explorer-1/common": "1.1.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/AboutTheAuthor/AboutTheAuthor.stories.js

@@ -0,0 +1,50 @@
+import AboutTheAuthor from './AboutTheAuthor.vue'
+
+export default {
+  title: 'Components/Utilities/AboutTheAuthor',
+  component: AboutTheAuthor,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+export const AboutTheAuthorData = [
+  {
+    author: {
+      biography:
+        '<p data-block-key="8meb7">I&#x27;m someone that has a bio!  Test <a href="http://localhost:3000/edu/news">link</a>.</p>',
+      image: {
+        src: {
+          url: 'https://picsum.photos/512/512',
+          width: 512,
+          height: 512
+        },
+        alt: ''
+      },
+      jobTitle: 'Job title',
+      name: 'Author name',
+      organization: 'Organization'
+    }
+  },
+  {
+    author: {
+      biography:
+        '<p data-block-key="8meb7">I&#x27;m someone that has a bio!  Test <a href="http://localhost:3000/edu/news">link</a>. Lorem ipsum dolor sit amet long author bio here.</p><p>Lorem ipsum dolor site amet consectatur.</p>',
+      image: {
+        src: {
+          url: 'https://picsum.photos/512/512',
+          width: 512,
+          height: 512
+        },
+        alt: ''
+      },
+      jobTitle: 'Job title',
+      name: 'Another author',
+      organization: 'Organization'
+    }
+  }
+]
+// stories
+export const BaseStory = {
+  name: 'AboutTheAuthor',
+  args: { authors: AboutTheAuthorData }
+}

package/src/components/AboutTheAuthor/AboutTheAuthor.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import type { AuthorObject } from '../../interfaces'
+import BlockText from './../BlockText/BlockText.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+
+interface AboutTheAuthorProps {
+  authors: {
+    author?: AuthorObject
+  }[]
+}
+
+// define props
+const props = withDefaults(defineProps<AboutTheAuthorProps>(), {
+  authors: undefined
+})
+
+const { authors } = reactive(props)
+
+const headingString = computed(() => {
+  let noun = 'Author'
+  if (authors?.length > 1) {
+    noun = 'Authors'
+  }
+  return `About the ${noun}`
+})
+</script>
+<template>
+  <div class="AboutTheAuthor">
+    <h3 class="text-h4 sm:ml-[130px] sm:pl-10 mb-6">
+      {{ headingString }}
+    </h3>
+    <template
+      v-for="(author, index) in authors"
+      :key="index"
+    >
+      <div
+        v-if="author.author"
+        class="sm:flex flex-row"
+        :class="{ ' mb-10 sm:mb-12': index + 1 !== authors.length }"
+      >
+        <div class="sm:mr-10">
+          <BaseImagePlaceholder
+            aspect-ratio="1:1"
+            class="relative mb-6 sm:mb-0 overflow-hidden rounded-full w-[130px]"
+            transparent-mode
+            no-logo
+          >
+            <BaseImage
+              v-if="author.author.image?.src"
+              :src="author.author.image.src.url"
+              :width="author.author.image.src.width"
+              :height="author.author.image.src.height"
+              :alt="author.author.name"
+              object-fit-class="cover"
+              image-class="can-hover:group-hover:delay-200 can-hover:group-hover:scale-100 absolute top-0 left-0 w-full transition-all duration-200 ease-in transform scale-105"
+              loading="lazy"
+            />
+          </BaseImagePlaceholder>
+        </div>
+        <div>
+          <div class="mb-4">
+            <h3
+              v-if="author.author.name"
+              class="!font-medium !tracking-normal !text-lg mb-1"
+            >
+              {{ author.author.name }}
+            </h3>
+            <p
+              v-if="author.author.jobTitle || author.author.organization"
+              class="text-lg"
+            >
+              {{
+                (author.author.jobTitle ? author.author.jobTitle : '') +
+                (author.author.jobTitle && author.author.organization ? ', ' : '')
+              }}
+              {{ author.author.organization }}
+            </p>
+          </div>
+          <BlockText
+            v-if="author.author.biography"
+            :text="author.author.biography"
+            variant="small"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -61,7 +61,7 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
         >
           <component
             :is="headingLevel"
-            class="!font-medium"
+            class="!font-normal !tracking-normal"
           >
             <button
               v-bind-once="{ id: headingId, 'aria-controls': panelId }"

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -18,7 +18,7 @@
       />
     </div>
     <MixinCarousel
-      class="md:hidden sm:-ml-10 py-14 lg:py-10 -mt-10 overflow-x-hidden"
+      class="md:hidden py-14 lg:py-10 -mt-10 overflow-x-hidden"
       indent="col-1"
       :slides-per-view="3"
       no-links

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -271,7 +271,7 @@ export default defineComponent({
       } else if (this.medium) {
         classes = 'can-hover:group-hover:-translate-y-3 edu:can-hover:group-hover:-translate-y-2'
       } else if (this.large) {
-        classes = 'sm:pl-8 sm:w-2/3'
+        classes = 'sm:pl-8 sm:w-2/3 lg:pt-2'
       }
       return classes
     },

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -202,9 +202,11 @@
       <div
         v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
         :key="`cardGridBlock${index}`"
-        class="lg:mb-18 mb-10"
+        class="LayoutHelper md:BaseGrid md:container md:mx-auto lg:mb-18 mb-10"
       >
-        <BlockCardGrid :cards="block.items" />
+        <div class="lg:col-start-2 lg:col-end-12 md:col-span-full md:px-4 px-0 relative">
+          <BlockCardGrid :cards="block.items" />
+        </div>
       </div>
 
       <div
@@ -218,7 +220,7 @@
       <LayoutHelper
         v-else-if="block.blockType === 'LinkCardListBlock' && block.blocks?.length"
         :key="`linkCardListBlock${index}`"
-        indent="col-3"
+        indent="col-2"
         class="lg:mb-18 mb-10"
       >
         <BlockLinkCardList :items="block.blocks" />

package/src/components/BlockText/BlockText.vue

@@ -13,9 +13,9 @@ interface Variants {
 }
 
 export const variants: Variants = {
-  small: 'text-body-sm',
-  medium: 'text-body-md',
-  large: 'text-body-lg'
+  small: 'text-body-sm -small',
+  medium: 'text-body-md -medium',
+  large: 'text-body-lg -large'
 }
 
 export default defineComponent({

package/src/components/CalendarButton/CalendarButton.vue

@@ -80,11 +80,10 @@ export default defineComponent({
     init() {
       let recurrence = undefined
       if ((this.isAllDay && this.endDatetime) || (this.startDate && this.endDatetime)) {
-        console.log('initing')
         // Calculate how many full days
         const startDateDayjs = this.startDatetime
           ? dayjs(this.startDatetime)
-          : dayjs(this.startDate)
+          : dayjs(this.startDate).tz('America/Los_Angeles')
         const endDateDayjs = dayjs(this.endDatetime)
         const difference = endDateDayjs.diff(startDateDayjs, 'day') + 1
         recurrence = { frequency: 'DAILY', interval: 1, count: difference }
@@ -95,9 +94,11 @@ export default defineComponent({
         location: this.location ? this.location : undefined,
         description: this.icsDescription,
         start: this.startDatetime
-          ? new Date(this.startDatetime)
+          ? // @ts-ignore
+            new Date(dayjs(this.startDatetime))
           : this.startDate
-            ? new Date(this.startDate)
+            ? // @ts-ignore
+              new Date(dayjs(this.startDate).tz('America/Los_Angeles'))
             : new Date(),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -140,7 +140,7 @@ export default defineComponent({
       default: undefined
     },
     author: {
-      type: Object as PropType<AuthorObject | AuthorObject[]>,
+      type: Object as PropType<AuthorObject | { author: AuthorObject }[]>,
       required: false,
       default: undefined
     },
@@ -208,11 +208,10 @@ export default defineComponent({
       const returnDate = new Date(this.publicationDate + ' ' + currentTime)
       return returnDate.toISOString()
     },
-    authors(): { name: string; organization: string }[] | undefined {
+    authors(): AuthorObject[] | undefined {
       let authors: AuthorObject[] | undefined = undefined
       if (this.author && this.author.constructor === Array) {
         authors = []
-        // @ts-expect-error we know it's an array at this point
         this.author.forEach((author: { author: AuthorObject }) => {
           // @ts-expect-error authors array is defined above
           authors.push(author.author)

package/src/components/MetaPanel/MetaPanel.stories.js

@@ -30,7 +30,7 @@ export const BaseStory = {
     button: 'View Standards',
     primarySubject: { subject: 'Math' },
     additionalSubjects: [{ subject: 'Science' }],
-    time: '30mins - hr',
+    time: { time: '30mins - hr' },
     gradeLevels: [
       { gradeLevel: 'All Ages' },
       { gradeLevel: 'K' },

package/src/components/MetaPanel/MetaPanel.vue

@@ -102,7 +102,7 @@ const standardsEla = computed(() => {
   return sortedStandards.value ? sortedStandards.value['ccss_english_language_arts'] : undefined
 })
 const standardsMath = computed(() => {
-  return sortedStandards.value ? sortedStandards.value['ccss_math'] : undefined
+  return sortedStandards.value ? sortedStandards.value['ccss_maths'] : undefined
 })
 const standardsNgss = computed(() => {
   return sortedStandards.value ? sortedStandards.value['ngss'] : undefined
@@ -128,7 +128,7 @@ const standardsIste = computed(() => {
       >
         <div class="col-start-container lg:col-start-indent-col-2 col-end-container">
           <div class="MetaPanel-heading lg:grid grid-cols-12 col-end-container container">
-            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-2 py-6 lg:py-10">
+            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-6 py-6 lg:py-10">
               <MetaPanelItems
                 :theme="theme"
                 :primary-subject="primarySubject"
@@ -139,7 +139,7 @@ const standardsIste = computed(() => {
             </div>
             <div
               v-if="button"
-              class="ThemeVariantLight col-start-10 col-end-13 pl-4 pt-4 pb-6 lg:py-10 lg:text-right"
+              class="ThemeVariantLight col-start-10 col-end-13 pl-4 lg:pl-0 pt-4 pb-6 lg:pr-4 xl:pr-10 2xl:pr-0 lg:py-10 lg:text-right"
             >
               <BaseButton
                 variant="secondary"

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<MetaPanelProps>(), {
 const { theme, primarySubject, additionalSubjects, gradeLevels, time } = reactive(props)
 
 const audience = computed(() => {
-  return gradeLevels ? rangeifyGrades(gradeLevels) : undefined
+  return gradeLevels ? rangeifyGrades(gradeLevels, false) : undefined
 })
 
 const subjects = computed(() => {
@@ -85,11 +85,11 @@ const themeVariant = computed(() => {
 
 <template>
   <div
-    class="MetaPanelItems md:flex gap-10"
-    :class="{ 'justify-between': subjects && audience && time }"
+    class="MetaPanelItems md:flex gap-10 pr-5 sm:pr-10 lg:pr-20"
+    :class="{ 'justify-between': subjects && audience && time?.time }"
   >
     <div
-      v-if="subjects"
+      v-if="primarySubject?.subject"
       class="MetaPanelItem"
     >
       <div
@@ -103,14 +103,13 @@ const themeVariant = computed(() => {
           class="MetaPanelItem-heading"
           :class="`${themeVariant} ${headingColor}`"
         >
-          Subjects
-          <span class="sr-only">.</span>
+          Subject
         </div>
         <div
           class="MetaPanelItem-content"
           :class="textColor"
         >
-          {{ subjects }}
+          {{ primarySubject.subject }}
         </div>
       </div>
     </div>
@@ -130,7 +129,6 @@ const themeVariant = computed(() => {
           :class="`${themeVariant} ${headingColor}`"
         >
           Grade Levels
-          <span class="sr-only">.</span>
         </div>
         <div
           class="MetaPanelItem-content"
@@ -156,7 +154,6 @@ const themeVariant = computed(() => {
           :class="`${themeVariant} ${headingColor}`"
         >
           Time Required
-          <span class="sr-only">.</span>
         </div>
         <div
           class="MetaPanelItem-content"

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -61,7 +61,7 @@ const time = computed(() => {
       <span>{{ audience }}</span>
     </div>
     <div
-      v-if="time"
+      v-if="time && !compact"
       class="MetadataEduResourceItem"
     >
       <IconTime

package/src/components/MetadataEvent/MetadataEvent.stories.js

@@ -12,12 +12,14 @@ export const MetadataEventData = {
   event: {
     title: 'Event title',
     location: 'Location',
-    startDate: '2021-11-11',
-    startDatetime: '2021-11-11T00:00:00-08:00',
-    endDate: '2021-11-11',
+    startDate: '2024-08-08',
+    startDatetime: '2024-08-08T14:00:00-07:00',
+    startTime: '15:00:00',
+    endDate: '2024-08-08',
+    endDatetime: '2024-08-08T22:00:00-07:00',
+    endTime: '22:00:00',
     ongoing: false,
     isVirtualEvent: false,
-    endDatetime: '2021-11-11T23:59:59.999999-08:00',
     locationName: 'Webcast',
     locationLink: 'https://www.nasa.gov',
     customDate: undefined

package/src/interfaces.ts

@@ -183,7 +183,10 @@ export interface Attributes {
 
 export interface AuthorObject {
   name: string
-  organization: string
+  organization?: string
+  image?: ImageObject
+  jobTitle?: string
+  biography?: string
 }
 
 export interface Topic {
@@ -220,6 +223,7 @@ export interface PageObject {
   slug: string
   url: string
   title: string
+  readTime?: string
   getTopicsForDisplay?: Topic[]
   showJumpMenu?: boolean
   label?: string
@@ -262,6 +266,7 @@ export interface EduResourceStandardItem {
 
 export interface PageEduResourcesObject extends PageObject {
   hero?: StreamfieldBlockData[]
+  authors?: { author: AuthorObject }[]
   primarySubject?: EduResourcesSubject
   additionalSubjects?: EduResourcesSubject[]
   gradeLevels?: EduResourcesGradeLevel[]

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

@@ -63,10 +63,10 @@ const computedClass = computed((): string => {
     />
 
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       ref="PageEduCollectionsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this collection"
     />
 

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

@@ -10,10 +10,12 @@ import BlockStreamfield from './../../../components/BlockStreamfield/BlockStream
 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,
     HeroInlineMedia,
     LayoutHelper,
@@ -118,9 +120,9 @@ export default defineComponent({
     </LayoutHelper>
 
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this article"
     />
     <!-- inline hero content -->
@@ -170,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

@@ -19,6 +19,7 @@ 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'
 
@@ -325,7 +326,6 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       ref="PageEduLessonJumpMenu"
       :title="data.title"
       :blocks="consolidatedBlocks"
-      :enabled="true"
       dropdown-text="In this lesson"
     />
 
@@ -364,10 +364,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
 }
 
@@ -68,10 +69,10 @@ defineExpose({
     itemtype="http://schema.org/Article"
   >
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       ref="PageEduNewsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this news article"
     />
 
@@ -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',
@@ -41,12 +42,14 @@ export const BaseStory = {
       url: 'http://localhost:3000/edu/resources/teachable-moment',
       pageType: 'EDUTeachableMomentPage',
       contentType: 'edu_resources.EDUTeachableMomentPage',
+      readTime: '5 min read',
       showJumpMenu: true,
       thumbnailImage: {
         __typename: 'CustomImage',
         original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
         alt: ''
       },
+      authors: AboutTheAuthorData,
       hero: [
         {
           ...HeroMediaData,