@explorer-1/vue 0.2.53 → 0.2.55

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.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'
@@ -68,32 +69,39 @@ defineExpose({
   PageEduStudentProjectJumpMenu
 })
 
-const stringAsHeadingBlockData = (
-  heading: HeadingLevel,
-  overrideText?: string
-): BlockHeadingObject => {
-  return {
-    blockType: 'HeadingBlock',
-    heading: (overrideText || heading) as HeadingLevel,
-    level: 'h2'
-  }
-}
-
 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
     }
@@ -103,14 +111,32 @@ const heroInline = computed((): boolean => {
 
 const sectionOrder = ['top', 'overview', 'materials', 'steps', 'bottom']
 
-// mimic HeadingBlock data shape for defined section headings
+const stringAsHeadingBlockData = (
+  heading: string,
+  level: HeadingLevel = 'h2'
+): BlockHeadingObject => {
+  return {
+    blockType: 'HeadingBlock',
+    heading: heading,
+    level: level
+  }
+}
+
+// mimic HeadingBlock data shape for predefined section headings
 const staticSectionHeadings = computed((): { [key: string]: BlockHeadingObject } | undefined => {
   if (data) {
     const result = sectionOrder.reduce<Record<string, BlockHeadingObject>>((acc, section) => {
       // only include the heading if the section has content
       if (data[section]?.length) {
+        // generate heading text
         const headingText =
-          section === 'steps' ? 'Project Steps' : section.charAt(0).toUpperCase() + section.slice(1)
+          section === 'steps'
+            ? 'Project Steps'
+            : section === 'overview'
+              ? // we don't want an overview heading unless it's custom
+                undefined
+              : section.charAt(0).toUpperCase() + section.slice(1)
+        // set the headings for each section
         acc[section] = stringAsHeadingBlockData(
           (data[`${section}Heading`] as HeadingLevel) || headingText
         )
@@ -154,45 +180,16 @@ const keyedCustomSections = computed(
   }
 )
 
-const consolidatedBlocks = computed(() => {
-  // NavJumpMenu handles filtering for HeadingBlock, so we don't need to do that here
-  const blocks = []
-  // include custom top blocks
-  if (keyedCustomSections.value && keyedCustomSections.value['top']) {
-    blocks.push(...keyedCustomSections.value['top'])
-  }
-  // include predefined section blocks
-  sectionOrder.forEach((section) => {
-    if (data && data[section]) {
-      if (staticSectionHeadings.value && staticSectionHeadings.value[section]) {
-        blocks.push(staticSectionHeadings.value[section])
-      }
-      if (section !== 'materials' && section !== 'steps') {
-        blocks.push(...data[section])
-      } else if (section === 'steps' && data.steps?.length) {
-        // get blocks in nested steps
-        data.steps.forEach((item) => {
-          if (item.content?.length) {
-            blocks.push(...item.content)
-          }
-        })
-      }
-    }
-    // include custom "after_" blocks
-    if (keyedCustomSections.value && keyedCustomSections.value[`after_${section}`]) {
-      blocks.push(...keyedCustomSections.value[`after_${section}`])
-    }
-  })
-  // include custom bottom blocks
-  if (keyedCustomSections.value && keyedCustomSections.value['bottom']) {
-    blocks.push(...keyedCustomSections.value['bottom'])
-  }
-  // include body blocks
-  if (data?.body?.length) {
-    blocks.push(...data.body)
+// used to get headings for the JumpMenu
+const stepHeadings = computed(() => {
+  const steps = data?.steps
+  const headings: BlockHeadingObject[] = []
+  if (steps?.length) {
+    steps.forEach((step) => {
+      if (step.heading) headings.push(stringAsHeadingBlockData(step.heading, 'h3'))
+    })
   }
-
-  return blocks
+  return headings
 })
 
 // organize data to render with PageEduStudentProjectSection component
@@ -208,7 +205,8 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
         heading: staticSectionHeadings.value ? staticSectionHeadings.value[section] : undefined,
         blocks: section !== 'materials' && section !== 'steps' ? data[section] : undefined,
         text: section === 'materials' ? data[section] : undefined,
-        steps: section === 'steps' ? data[section] : undefined
+        steps: section === 'steps' ? data[section] : undefined,
+        image: data[`${section}Image`]
       })
     }
     // include custom "after_" sections
@@ -230,13 +228,33 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
 const studentBadge = computed(() => {
   return StudentProjectBadge
 })
+
+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"
   >
-    <div class="BaseGrid hidden lg:block container relative mx-auto z-20 pointer-events-none">
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
+    <div
+      v-if="!heroTitle"
+      class="BaseGrid hidden lg:block container relative mx-auto z-20 pointer-events-none"
+    >
       <div class="absolute top-0 left-0 col-start-1 col-end-3 text-right lg:-ml-2 xl:ml-4">
         <img
           :src="studentBadge"
@@ -252,7 +270,7 @@ const studentBadge = computed(() => {
       class="mb-10"
     >
       <DetailHeadline
-        v-if="data.title"
+        v-if="data.title && !heroTitle"
         :title="data.title"
         label="Student Project"
         pill
@@ -260,7 +278,7 @@ const studentBadge = computed(() => {
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -279,55 +297,35 @@ const studentBadge = computed(() => {
         </BaseLink>
       </div>
     </LayoutHelper>
-
-    <div class="container relative mx-auto z-20 pointer-events-none">
+    <div
+      v-if="!heroTitle"
+      class="lg:hidden container relative mx-auto z-30 pointer-events-none"
+    >
       <img
         :src="studentBadge"
         alt=""
         width="150"
         height="150"
-        class="absolute -mt-16 sm:-mt-24 right-0 lg:hidden md:w-[185px] md:h-[185px]"
+        class="absolute -mt-10 sm:-mt-24 right-0 lg:hidden md:w-[185px] md:h-[185px]"
       />
     </div>
-    <!-- hero media -->
-    <HeroMedia
-      v-if="
-        !heroEmpty &&
-        !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
-      "
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="false"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
-      :constrain="data.heroConstrain"
-    />
-    <LayoutHelper
-      v-else-if="!heroEmpty && heroInline && data.hero?.length"
-      class="lg:mb-14 mb-10"
-    >
-      <HeroInlineMedia
-        :hero-blocks="data.hero"
-        :constrain="data.heroConstrain"
-      />
-    </LayoutHelper>
-
     <MetaPanel
       button="Info for Teachers"
-      theme="stars"
-      :class="{ 'mb-10 lg:mb-14': true }"
+      theme="secondary"
+      :class="{ 'mb-10 lg:mb-14': heroTitle || heroInline || heroEmpty }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :time="data.customTime ? { time: data.customTime } : data.time"
       :standards="data.standards"
-      :negative-top="!heroInline && !heroEmpty"
+      :negative-bottom="!heroInline && !heroTitle && !heroEmpty"
     >
       <template #metaInfo>
-        <div :class="data?.standards ? 'border-b border-gray-light-mid' : ''">
+        <div :class="data?.standards?.length ? 'border-b border-gray-light-mid' : ''">
           <div class="py-6 lg:py-8">
-            <MetaPanelItems :grade-levels="data?.gradeLevels" />
+            <MetaPanelItems
+              theme="secondary"
+              :grade-levels="data?.gradeLevels"
+            />
             <div
               v-if="data.lesson"
               class="mt-8 font-bold text-body-s"
@@ -346,11 +344,42 @@ const studentBadge = computed(() => {
       </template>
     </MetaPanel>
 
+    <!-- hero media -->
+    <HeroMedia
+      v-if="
+        !heroEmpty &&
+        !heroTitle &&
+        !heroInline &&
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
+      "
+      class="md:mb-12 lg:mb-18 mb-10"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
+      :constrain="data.heroConstrain"
+    />
+    <LayoutHelper
+      v-else-if="!heroEmpty && heroInline && data.hero?.length"
+      class="lg:mb-22 mb-10"
+    >
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
+        :constrain="data.heroConstrain"
+      />
+    </LayoutHelper>
+
     <NavJumpMenu
+      v-if="stepHeadings?.length"
       ref="PageEduStudentProjectJumpMenu"
       :title="data.title"
-      :blocks="consolidatedBlocks"
-      dropdown-text="In this project"
+      :blocks="stepHeadings"
+      dropdown-text="Project Steps"
+      heading-level="h3"
+      :steps-numbering="true"
+      steps-classes="text-secondary"
     />
 
     <template

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -38,7 +38,7 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     :aria-label="heading?.heading"
   >
     <LayoutHelper
-      v-if="heading"
+      v-if="heading?.heading"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >
@@ -71,22 +71,19 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       <li
         v-for="(step, index) in steps"
         :key="index"
-        class="PageEduStudentProjectStep lg:mb-10 mb-8 px-4 lg:px-0"
+        class="PageEduStudentProjectStep lg:mb-12 mb-10 px-4 lg:px-0"
       >
         <LayoutHelper
-          class="ThemeVariantGray bg-gray-light py-6 lg:py-14 px-4 lg:px-0"
-          indent="col-2"
+          class="px-0 lg:px-4"
+          indent="col-1"
         >
-          <template v-if="step.media?.length">
-            <!-- split 50/50 -->
-            <div class="lg:grid grid-cols-2 gap-6 lg:gap-10">
-              <div
-                :class="index % 2 === 0 ? 'order-1' : 'order-2'"
-                class="mb-6 lg:mb-0"
-              >
+          <div class="ThemeVariantGray bg-gray-light px-8 py-6 md:px-10 md:py-8 lg:px-18 lg:py-16">
+            <template v-if="step.media?.length">
+              <!-- split 50/50 -->
+              <div class="lg:grid grid-cols-2 gap-6 lg:gap-10">
                 <BaseHeading
                   level="h3"
-                  class="mb-5"
+                  class="lg:hidden mb-5"
                 >
                   <span
                     v-if="stepsNumbering"
@@ -96,41 +93,59 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
                   >
                   {{ step.heading }}
                 </BaseHeading>
-                <BlockStreamfield
-                  v-if="step.content"
-                  :data="step.content"
-                  size="medium"
-                  variant="fluid"
+                <HeroInlineMedia
+                  :hero-blocks="step.media"
+                  class="order-1 mb-6 lg:mb-0"
+                  :class="index % 2 === 1 ? 'lg:order-1' : 'lg:order-2'"
+                  constrain
                 />
+                <div
+                  :class="index % 2 === 0 ? 'lg:order-1' : 'lg:order-2'"
+                  class="order-2"
+                >
+                  <BaseHeading
+                    level="h3"
+                    class="hidden lg:block mb-5"
+                  >
+                    <span
+                      v-if="stepsNumbering"
+                      class="steps-numbering"
+                      aria-hidden
+                      >{{ `Step ${index + 1}:` }}</span
+                    >
+                    {{ step.heading }}
+                  </BaseHeading>
+                  <BlockStreamfield
+                    v-if="step.content"
+                    :data="step.content"
+                    size="medium"
+                    variant="fluid"
+                  />
+                </div>
               </div>
-              <HeroInlineMedia
-                :hero-blocks="step.media"
-                :class="index % 2 === 1 ? 'order-1' : 'order-2'"
-                constrain
-              />
-            </div>
-          </template>
-          <template v-else>
-            <BaseHeading
-              level="h3"
-              class="mb-5"
-            >
-              <span
-                v-if="stepsNumbering"
-                aria-hidden
-                class="steps-numbering"
-                >{{ `Step ${index + 1}:` }}</span
+            </template>
+            <template v-else>
+              <BaseHeading
+                level="h3"
+                class="mb-5"
               >
-              {{ step.heading }}
-            </BaseHeading>
-            <BlockStreamfield
-              v-if="step.content"
-              class="PageEduStudentProjectStep__fullWidth"
-              :data="step.content"
-              size="medium"
-              variant="fluid"
-            />
-          </template>
+                <span
+                  v-if="stepsNumbering"
+                  aria-hidden
+                  class="steps-numbering"
+                  >{{ `Step ${index + 1}:` }}</span
+                >
+                {{ step.heading }}
+              </BaseHeading>
+              <BlockStreamfield
+                v-if="step.content"
+                class="PageEduStudentProjectStep__fullWidth"
+                :data="step.content"
+                size="medium"
+                variant="fluid"
+              />
+            </template>
+          </div>
         </LayoutHelper>
       </li>
     </component>

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

@@ -56,7 +56,8 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
-      heroConstrain: true,
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       body: BlockStreamfieldTruncatedData.body,
 
@@ -67,6 +68,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/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -2,6 +2,7 @@
 import { computed, reactive, ref } from 'vue'
 import type { PageEduResourcesObject } from './../../../interfaces'
 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'
@@ -33,17 +34,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
     }
@@ -73,21 +92,29 @@ const computedClass = computed((): string => {
       :blocks="data.body"
       dropdown-text="In this Teachable Moment"
     />
-
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
     <!-- 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"
     />
 
@@ -96,6 +123,7 @@ const computedClass = computed((): string => {
       class="mb-10"
     >
       <DetailHeadline
+        v-if="!heroTitle"
         :title="data.title"
         :read-time="data.readTime"
         label="Teachable Moment"
@@ -103,7 +131,7 @@ const computedClass = computed((): string => {
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -122,11 +150,11 @@ const computedClass = computed((): string => {
 
     <!-- summary and topper -->
     <LayoutHelper
+      v-if="data.topper && data.topper.length > 2"
       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"
       />

package/dist/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue.d.ts

@@ -1,36 +0,0 @@
-import { PropType } from 'vue';
-
-interface NextCloseApproach {
-    date: string;
-    distanceMiles: string;
-    distanceKilometers: string;
-    comparisonImage: {
-        image: {
-            src: {
-                url: string;
-            };
-            webp: {
-                url: string;
-            };
-        };
-        text: string;
-    };
-    sizeFeet: string;
-    name: string;
-    externalLink: string;
-}
-/**
- * Displays asteroid widget data. API is parsed by the backend. Frontend retrieves via a graphQL query.
- */
-declare const _default: import('vue').DefineComponent<{
-    nextCloseApproaches: {
-        type: PropType<NextCloseApproach[]>;
-        required: false;
-    };
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    nextCloseApproaches: {
-        type: PropType<NextCloseApproach[]>;
-        required: false;
-    };
-}>>, {}, {}>;
-export default _default;