Adding readTime to EDU News, EDU explainer articles, and WWW news

nasa-jpl · Aug 2, 2024 · e053db8 · e053db8
1 parent d03d5ab
commit e053db8
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 2 deletions.
diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js b/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
@@ -9,6 +9,7 @@ export default {
 export const DetailHeadlineData = {
   title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
   publicationDate: '2020-08-13',
+  readTime: '3 min read',
   author: {
     name: 'Jane Platt',
     organization: 'JPL'

diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="title || label || topics || publicationDate || author">
     <div
-      v-if="label || (topics && topics.length)"
+      v-if="label || (topics && topics.length) || readTime"
       class="flex flex-wrap items-start mb-3"
     >
       <div
@@ -38,6 +38,11 @@
         </template>
       </span>
       <span class="sr-only">.</span>
+      <span
+        :class="`${(topics && topics.length) || label ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} my-4  text-gray-mid-dark uppercase text-sm lg:text-base leading-none`"
+      >
+        {{ readTime }}
+      </span>
     </div>
     <BaseHeading
       level="h1"
@@ -47,7 +52,7 @@
     </BaseHeading>
     <div
       v-if="authors?.length || publicationDate"
-      class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-normal"
+      class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-none"
     >
       <span
         v-if="authors?.length"
@@ -130,6 +135,11 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    readTime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     topics: {
       type: Array as PropType<Topic[]>,
       required: false,

diff --git a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.stories.js b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.stories.js
@@ -42,6 +42,7 @@ export const BaseStory = {
         }
       ],
       topper: '',
+      readTime: '2 min read',
       summary:
         'Headed to the Red Planet with the Perseverance rover, the pioneering helicopter is powered up for the first time in interplanetary space as part of a systems check.',
       thumbnailImage: {

diff --git a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue
@@ -35,6 +35,7 @@
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         :publication-date="data.publicationDate"
         :publication-time="data.publicationTime"
         :author="data.author"

diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -32,6 +32,7 @@ export const BaseStory = {
       url: '/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
       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: {

diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -19,6 +19,7 @@ import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
+  readTime: string
   url: string
   heroImage: ImageObject
   heroImageInline: ImageObject
@@ -99,6 +100,7 @@ const dateTimeArray = computed(() => {
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         :author="data.authors"
         :publication-date="dateTimeArray?.length ? dateTimeArray[0] : undefined"
         :publication-time="dateTimeArray?.length ? dateTimeArray[1] : undefined"

diff --git a/packages/vue/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.stories.js b/packages/vue/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.stories.js
@@ -37,6 +37,7 @@ export const BaseStory = {
       slug: 'test-resource',
       url: 'http://localhost:3000/edu/resources/test-resource',
       title: 'Test Resource',
+      readTime: '6 min read',
       heroConstrain: true,
       heroPosition: 'full_bleed',
       hero: [

diff --git a/packages/vue/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.vue b/packages/vue/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.vue
@@ -103,6 +103,7 @@ export default defineComponent({
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         :publication-date="data.publicationDate"
         :publication-time="data.publicationTime"
         :author="data.author"