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

package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.2.3",
+  "version": "3.2.4",
   "type": "module",
   "description": "Monorepo for JPL's design system, Explorer 1",
   "keywords": [

packages/vue/package.json

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

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'

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,

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: {

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"

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: {

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"

packages/vue/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.stories.js

@@ -19,6 +19,7 @@ export default {
     })
   ],
   parameters: {
+    layout: 'fullscreen',
     html: {
       root: '#storyDecorator'
     }
@@ -37,6 +38,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: [

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"