@explorer-1/vue 0.2.24 → 0.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "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.6"
+    "@explorer-1/common": "1.1.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/constants.ts

@@ -11,6 +11,11 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
     variant: 'primary',
     type: 'resource'
   },
+  EDUTeachableMomentPage: {
+    label: 'Teachable Moment',
+    variant: 'primary',
+    type: 'resource'
+  },
   EDUEventPage: {
     variant: 'primary',
     type: 'event'
@@ -24,5 +29,6 @@ export const searchContentTypeToPageType: DictionaryInterface = {
   missions_mission: 'Mission',
   eduevents_edueventpage: 'EDUEventPage',
   eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
-  eduresources_edulessonpage: 'EDULessonPage'
+  eduresources_edulessonpage: 'EDULessonPage',
+  eduresources_eduteachablemomentpage: 'EDUTeachableMomentPage'
 }

package/src/interfaces.ts

@@ -214,11 +214,13 @@ export type MetaPanelTheme = 'primary' | 'secondary' | 'stars'
 export interface PageObject {
   __typename: string
   contentType: string
+  lastPublishedAt?: string
   breadcrumb?: string
   slug: string
   url: string
   title: string
   getTopicsForDisplay?: Topic[]
+  showJumpMenu?: boolean
   label?: string
   summary?: string
   topper?: string

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

@@ -44,6 +44,7 @@ export const BaseStory = {
       seoTitle: 'Test Lesson',
       slug: 'test-lesson',
       publicationDate: '2024-08-16',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
       thumbnailImage: {
         __typename: 'CustomImage',
         original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',

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

@@ -114,15 +114,6 @@ const heroInline = computed((): boolean => {
   return false
 })
 
-const computedClass = computed((): string => {
-  if (heroInline.value || heroEmpty) {
-    return 'pt-5 lg:pt-12'
-  } else if (!heroInline.value) {
-    return '-nav-offset'
-  }
-  return ''
-})
-
 const sectionOrder = [
   'top',
   'overview',
@@ -262,8 +253,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
-    :class="computedClass"
+    class="ThemeVariantLight pt-5 lg:pt-12"
   >
     <LayoutHelper
       indent="col-2"
@@ -409,5 +399,19 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       :heading="data.relatedContentHeading"
       :items="data.relatedContent"
     />
+
+    <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>Lesson Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
   </div>
 </template>

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

@@ -40,6 +40,7 @@ const anchorId = computed(() => {
 <template>
   <section
     :id="anchorId"
+    class="PageEduLessonSection"
     :aria-label="heading.heading"
   >
     <LayoutHelper
@@ -79,10 +80,12 @@ const anchorId = computed(() => {
             {{ 'Section ' + (Number(index) + 1) }}
           </BaseHeading>
         </LayoutHelper>
-        <BlockStreamfield
-          v-if="item?.blocks"
-          :data="item.blocks"
-        />
+        <div class="PageEduProcedureSection">
+          <BlockStreamfield
+            v-if="item?.blocks"
+            :data="item.blocks"
+          />
+        </div>
       </template>
     </template>
     <LayoutHelper
@@ -94,3 +97,27 @@ const anchorId = computed(() => {
     </LayoutHelper>
   </section>
 </template>
+<style lang="scss">
+.PageEduProcedureSection {
+  counter-reset: listitem;
+  .BlockText ol {
+    list-style-type: none;
+    counter-reset: nestedlistitem;
+    > li {
+      counter-increment: listitem;
+      &::marker {
+        content: counter(listitem) '. ';
+      }
+    }
+    ol {
+      list-style-type: none;
+      > li {
+        counter-increment: nestedlistitem;
+        &::marker {
+          content: counter(nestedlistitem) '. ';
+        }
+      }
+    }
+  }
+}
+</style>

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -151,6 +151,7 @@ defineExpose({
       itemprop="articleBody"
       :data="data.body"
     />
+
     <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

@@ -0,0 +1,142 @@
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { BlockIframeEmbedData } from './../../../components/BlockIframeEmbed/BlockIframeEmbed.stories.js'
+import { BlockImageCarouselData } from './../../../components/BlockImageCarousel/BlockImageCarousel.stories'
+import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockHeadingData } from './../../../components/BlockHeading/BlockHeading.stories'
+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,
+  BlockStreamfieldMinimalData
+} from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageEduTeachableMoment from './PageEduTeachableMoment.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduTeachableMoment',
+  component: PageEduTeachableMoment,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BaseStory = {
+  args: {
+    data: {
+      __typename: 'EDUTeachableMomentPage',
+      title: 'A Teachable Moment',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+      url: 'http://localhost:3000/edu/resources/teachable-moment',
+      pageType: 'EDUTeachableMomentPage',
+      contentType: 'edu_resources.EDUTeachableMomentPage',
+      showJumpMenu: true,
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
+        alt: ''
+      },
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+      heroConstrain: true,
+
+      body: BlockStreamfieldTruncatedData.body,
+
+      relatedLinks: BlockRelatedLinksData.data,
+      relatedContentHeading: 'Related Content',
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}
+
+export const HeroCarousel = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
+    }
+  }
+}
+
+export const HeroImageComparison = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...BlockImageComparisonData
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideo = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          blockType: 'VideoBlock',
+          video: BaseVideoData,
+          caption: 'Lorem ipsum dolor sit amet',
+          credit: 'NASA/JPL'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideoEmbed = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...BlockVideoEmbedData.data,
+          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'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroIframeEmbed = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...BlockIframeEmbedData
+        }
+      ]
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: []
+    }
+  }
+}

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

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type { PageEduResourcesObject } from './../../../interfaces'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+
+interface PageEduTeachableMomentProps {
+  data?: PageEduResourcesObject
+}
+
+const props = withDefaults(defineProps<PageEduTeachableMomentProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const PageEduTeachableMomentJumpMenu = ref()
+
+defineExpose({
+  PageEduTeachableMomentJumpMenu
+})
+
+const heroEmpty = computed((): boolean => {
+  return data?.hero?.length === 0
+})
+
+const heroInline = computed((): boolean => {
+  // heroes with interactive elements have special handling
+  if (!heroEmpty.value && data?.hero) {
+    // excludes VideoBlock as this will autoplay
+    if (data?.hero[0].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'
+    ) {
+      return true
+    }
+  }
+  return false
+})
+
+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="ThemeEdu ThemeVariantLight"
+    :class="computedClass"
+  >
+    <NavJumpMenu
+      ref="PageEduTeachableMomentJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="data.showJumpMenu"
+      dropdown-text="In this Teachable Moment"
+    />
+
+    <!-- hero media -->
+    <HeroMedia
+      v-if="
+        !heroEmpty &&
+        !heroInline &&
+        data?.hero?.length &&
+        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].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"
+      :constrain="data.heroConstrain"
+    />
+
+    <LayoutHelper
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        label="Teachable Moment"
+        pill
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+    </LayoutHelper>
+
+    <!-- TODO: put this in a component (exclude layout though) -->
+    <LayoutHelper
+      v-if="!heroEmpty && heroInline && data.hero?.length"
+      class="lg:mb-22 mb-10"
+    >
+      <BlockImageStandard
+        v-if="data.hero[0].blockType === 'HeroImageBlock'"
+        :data="data.hero[0].imageInline"
+        :display-caption="data.hero[0].displayCaption"
+        :caption="data.hero[0].caption"
+        :constrain="data.heroConstrain"
+      />
+      <BlockImageCarousel
+        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
+        :items="data.hero[0].blocks"
+        :block-id="data.hero[0].id"
+      />
+      <BlockIframeEmbed
+        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
+        :data="data.hero[0]"
+      />
+      <BlockVideo
+        v-else-if="data.hero[0].blockType === 'VideoBlock'"
+        :data="data.hero[0]"
+        autoplay
+      />
+      <BaseImagePlaceholder
+        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <div v-html="data.hero[0].embed?.embed"></div>
+      </BaseImagePlaceholder>
+      <BlockImageComparison
+        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
+        :data="data.hero[0]"
+      />
+    </LayoutHelper>
+
+    <!-- summary and topper -->
+    <LayoutHelper
+      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"
+      />
+    </LayoutHelper>
+    <!-- streamfield blocks -->
+    <BlockStreamfield
+      itemprop="articleBody"
+      :data="data.body"
+    />
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield :data="data.body" />
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- related content -->
+    <BlockLinkCarousel
+      v-if="data.relatedContent?.length"
+      item-type="cards"
+      class="lg:my-24 my-12 print:px-4"
+      :heading="data.relatedContentHeading"
+      :items="data.relatedContent"
+    />
+
+    <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>Teachable Moment Last Updated:</strong>
+        {{
+          // @ts-ignore
+          $filters.displayDate(data.lastPublishedAt)
+        }}
+      </p>
+    </LayoutHelper>
+    <!-- explore more -->
+    <div
+      v-if="data.relatedContent?.length"
+      class="bg-stars bg-primary-darker pt-14 pb-20 ThemeVariantDark text-white"
+    >
+      <BlockLinkCarousel
+        item-type="cards"
+        heading="Explore more"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>