@explorer-1/vue 0.2.53 → 0.2.55

package/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"

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

@@ -0,0 +1,99 @@
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
+import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockVideoData } from './../../../components/BlockVideo/BlockVideo.stories'
+import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import PageEduHome from './PageEduHome.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduHome',
+  component: PageEduHome,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*Data$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageEduHome',
+  args: {
+    data: {
+      __typename: 'EDUHomePage',
+      title: 'EDU Homepage',
+      slug: 'edu-home',
+      url: '/',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+      thumbnailImage: {
+        alt: '',
+        original: 'https://picsum.photos/512/288'
+      },
+      heroImage: {
+        // beach
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        // lake
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        // jungle
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        // desert
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        },
+        alt: 'Robotics detail page hero image'
+      },
+      heroText: 'Discover a universe of activities & resources',
+      hotTopics: [
+        {
+          page: {
+            title: 'Psyche Asteroid',
+            url: '/topic/'
+          }
+        },
+        {
+          page: {
+            title: 'Mars Rovers',
+            url: '/topic/'
+          }
+        },
+        {
+          page: {
+            title: 'Webb Space Telescope',
+            url: '/topic/'
+          }
+        },
+        {
+          page: {
+            title: 'NASA Pi Day',
+            url: '/topic/'
+          }
+        }
+      ],
+      body: [
+        {
+          blockType: 'HeadingBlock',
+          heading: 'EDU Home',
+          level: 'h2',
+          size: 'h2'
+        },
+        {
+          blockType: 'RichTextBlock',
+          value:
+            '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+        }
+      ]
+    }
+  }
+}

package/src/templates/edu/PageEduHome/PageEduHome.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { ImageObject, PageObject } from '../../../interfaces'
+import SearchInput from './../../../components/SearchInput/SearchInput.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+
+const router = useRouter()
+
+interface PageEduHomeObject extends PageObject {
+  heroImage: ImageObject
+  heroText: string
+  hotTopics: {
+    page: PageObject
+  }[]
+}
+
+interface PageEduHomeProps {
+  data: PageEduHomeObject
+}
+
+// define props
+const props = withDefaults(defineProps<PageEduHomeProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const searchQuery = ref(undefined)
+const image = computed(() => {
+  return data?.heroImage
+})
+
+const submitSearch = () => {
+  router.push({ path: '/edu/resources/', query: { query: searchQuery.value } })
+}
+</script>
+<template>
+  <div
+    v-if="data"
+    class="PageEduHome ThemeVariantLight -nav-offset"
+  >
+    <div class="EduHero max-w-screen-3xl relative mx-auto">
+      <div class="absolute inset-0 z-10 bg-black">
+        <picture v-if="image?.src">
+          <source
+            media="(min-width: 768px)"
+            :srcset="image.srcSet"
+          />
+          <source
+            media="(min-width: 420px)"
+            :srcset="image.screenMd?.url"
+          />
+          <source :srcset="image.screenSm?.url" />
+          <img
+            class="md:object-right object-cover object-bottom w-full h-full"
+            :src="image.src.url"
+            :width="image.src.width"
+            :height="image.src.height"
+            :alt="image.alt"
+          />
+        </picture>
+      </div>
+      <div class="content-wrapper lg:flex lg:items-center relative z-20 w-full h-full">
+        <div
+          class="bg-gradient-to-b lg:bg-gradient-to-l from-transparent-w25 lg:from-transparent-w50 to-transparent-black-50 lg:to-transparent-black-50 absolute inset-0"
+        ></div>
+        <div class="text-contrast relative w-full text-white">
+          <div class="lg:py-0 pb-10 container pt-8 mx-auto">
+            <div class="lg:px-10 2xl:px-0 pt-30 lg:pt-16 lg:pb-18 px-4">
+              <h1
+                v-if="data.heroText"
+                class="lg:w-3/4 xl:w-3/4 xl:text-10xl lg:text-9xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight"
+              >
+                {{ data.heroText }}
+              </h1>
+              <div class="md:w-4/5 lg:w-2/3 xl:w-1/2 w-full">
+                <SearchInput
+                  v-model="searchQuery"
+                  class="bg-white border-none"
+                  placeholder="Search the K-12 resource library"
+                  with-button
+                  @submit="submitSearch()"
+                />
+              </div>
+              <div
+                v-if="data.hotTopics?.length"
+                class="md:flex flex-row mt-10"
+              >
+                <h2
+                  class="text-subtitle mt-1 text-white font-semibold whitespace-nowrap mr-5 mb-3 md:mb-0 lg:mr-8"
+                >
+                  Hot Topics
+                </h2>
+                <ul class="flex flex-row flex-wrap">
+                  <li
+                    v-for="(topic, index) in data.hotTopics"
+                    :key="index"
+                    class="mr-2 mb-2"
+                  >
+                    <BaseLink
+                      variant="none"
+                      :to="`/edu/resources?query=${topic.page?.title}`"
+                      link-class="text-gray-dark whitespace-nowrap text-sm bg-[#99D1DF] font-extrabold rounded-full inline-block px-3 py-1 text-contrast-none hover:bg-action hover:text-white"
+                    >
+                      {{ topic.page?.title }}
+                    </BaseLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="data.body?.length"
+      class="my-10 lg:my-18"
+    >
+      <BlockStreamfield
+        v-if="data.body?.length"
+        :data="data.body"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.PageEduHome {
+  .EduHero {
+    .content-wrapper {
+      @screen lg {
+        min-height: 548px; // maintains 1440x770 aspect ratio
+      }
+
+      @screen xl {
+        min-height: 684px; // maintains 1440x770 aspect ratio
+      }
+
+      @screen 2xl {
+        min-height: 770px; // 1440x770
+      }
+
+      @screen 3xl {
+        min-height: 963px; // maintains 1440x770 aspect ratio
+      }
+      input::placeholder {
+        @apply font-medium text-gray-dark opacity-80;
+      }
+    }
+  }
+}
+</style>

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

package/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
     }
@@ -233,7 +252,8 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
         heading: staticSectionHeadings.value ? staticSectionHeadings.value[section] : undefined,
         blocks: section !== 'materials' && section !== 'procedures' ? data[section] : undefined,
         text: section === 'materials' ? data[section] : undefined,
-        procedures: section === 'procedures' ? data[section] : undefined
+        procedures: section === 'procedures' ? data[section] : undefined,
+        image: data[`${section}Image`]
       })
     }
     // include custom "after_" sections
@@ -251,24 +271,42 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
 
   return filteredSections
 })
+const computedClass = computed((): string => {
+  if (heroTitle.value) {
+    return '-nav-offset'
+  } else {
+    return 'pt-5 lg:pt-12'
+  }
+})
 </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,33 +328,33 @@ 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"
     />
 
-    <!-- TODO: put this in a component (exclude layout though) -->
     <LayoutHelper
       v-if="!heroEmpty && heroInline && data.hero?.length"
       class="lg:mb-22 mb-10"

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

@@ -56,9 +56,12 @@ export const BaseStory = {
       hero: [
         {
           ...HeroMediaData,
-          blockType: 'HeroImageBlock'
+          blockType: 'HeroImageBlock',
+          displayCaption: false
         }
       ],
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       lesson: {
         title: 'Lesson',
@@ -130,7 +133,7 @@ export const BaseStory = {
       materialsHeading: 'Custom Materials Heading',
       materialsImage: BlockImageData.image,
 
-      stepsNumbering: false,
+      stepsNumbering: true,
 
       steps: [
         {
@@ -175,6 +178,29 @@ 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: {
@@ -223,7 +249,8 @@ export const HeroVideoEmbed = {
           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'
+          blockType: 'VideoEmbedBlock',
+          displayCaption: false
         }
       ]
     }