@explorer-1/vue 0.2.51 → 0.2.52

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
-import { camelCase } from 'lodash'
+import { reactive } from 'vue'
 import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
 import BlockHeading, {
   type BlockHeadingObject
@@ -28,19 +27,15 @@ const props = withDefaults(defineProps<PageEduLessonSectionProps>(), {
   image: undefined
 })
 
-const { heading, blocks, image } = reactive(props)
-
-const anchorId = computed(() => {
-  return 'lesson_' + camelCase(heading?.heading)
-})
+const { heading, blocks, image, procedures, text } = reactive(props)
 </script>
 <template>
   <section
-    :id="anchorId"
     class="PageEduLessonSection"
     :aria-label="heading?.heading"
   >
     <LayoutHelper
+      v-if="heading"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >

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

@@ -0,0 +1,253 @@
+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 { BlockInlineImageData } from './../../../components/BlockInlineImage/BlockInlineImage.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 PageEduStudentProject from './PageEduStudentProject.vue'
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
+
+export default {
+  title: 'Templates/EDU/PageEduStudentProject',
+  component: PageEduStudentProject,
+  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: 'EDUStudentProjectPage',
+      title: 'Test Student Project',
+      url: '/edu/resources/test-student-project',
+      pageType: 'EDUStudentProjectPage',
+      contentType: 'edu_resources.EDUStudentProjectPage',
+      searchDescription: '',
+      seoTitle: 'Test Student Project',
+      slug: 'test-student-project',
+      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',
+        alt: ''
+      },
+      authors: AboutTheAuthorData,
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+
+      lesson: {
+        title: 'Lesson',
+        url: '/path-to-student-project'
+      },
+
+      primarySubject: {
+        subject: 'Arts'
+      },
+      additionalSubjects: [
+        {
+          subject: 'Science'
+        }
+      ],
+      gradeLevels: [
+        {
+          gradeLevel: 'K'
+        },
+        {
+          gradeLevel: '1'
+        }
+      ],
+      time: {
+        time: 'Under 30 mins'
+      },
+      customTime: undefined,
+      standards: [
+        {
+          standard: {
+            code: 'CCRA.R.1',
+            definition:
+              'Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text.',
+            domain: {
+              domain: 'College and Career Readiness Anchor Standards for Reading'
+            },
+            type: 'ccss_english_language_arts'
+          }
+        },
+        {
+          standard: {
+            code: 'RL.1.5',
+            definition:
+              'Explain major differences between books that tell stories and books that give information, drawing on a wide reading of a range of text types.',
+            domain: {
+              domain: 'Reading Standards for Literature'
+            },
+            type: 'ccss_english_language_arts'
+          }
+        },
+        {
+          standard: {
+            code: 'K-PS2-1',
+            definition:
+              'Plan and conduct an investigation to compare the effects of different strengths or different directions of pushes and pulls on the motion of an object.',
+            domain: {
+              domain: 'Physical Sciences'
+            },
+            type: 'ngss'
+          }
+        }
+      ],
+
+      overview: BlockStreamfieldMinimalData.body,
+      overviewHeading: undefined,
+      overviewImage: BlockImageData.image,
+
+      materials:
+        '<ul><li data-block-key="nvq4l">list item one</li><li data-block-key="efmt7">list item two</li><li data-block-key="d0f66">list item three this one is really long and the text just keeps on going lorem ipsum dolor sit amet consectatur</li></ul><p data-block-key="bksrq">Paragraph to appear below.</p>',
+      materialsHeading: 'Custom Materials Heading',
+      materialsImage: BlockImageData.image,
+
+      stepsNumbering: false,
+
+      steps: [
+        {
+          heading: 'Lorem ipsum dolor no media',
+          media: [],
+          content: [BlockImageData, ...BlockStreamfieldMinimalData.body, BlockInlineImageData.block]
+        },
+        {
+          heading: 'Sit amet',
+          media: [
+            {
+              blockType: 'VideoBlock',
+              video: BaseVideoData,
+              caption: 'Lorem ipsum dolor sit amet',
+              credit: 'NASA/JPL'
+            }
+          ],
+          content: BlockStreamfieldMinimalData.body
+        },
+        {
+          heading: 'Consectatur adipscing',
+          media: [BlockImageComparisonData],
+          content: BlockStreamfieldMinimalData.body
+        }
+      ],
+
+      customSections: [
+        {
+          blockType: 'EDUStudentProjectCustomSectionBlock',
+          content: BlockStreamfieldTruncatedData.body,
+          heading: BlockHeadingData,
+          position: 'after_overview'
+        }
+      ],
+
+      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/PageEduStudentProject/PageEduStudentProject.vue

@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type {
+  ImageObject,
+  PageEduResourcesObject,
+  StreamfieldBlockData
+} from './../../../interfaces'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+import MetaPanelItems from '../../../components/MetaPanelItems/MetaPanelItems.vue'
+import PageEduStudentProjectSection, {
+  type PageEduStudentProjectSectionProps
+} from './PageEduStudentProjectSection.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
+import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
+
+import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
+import StudentProjectBadge from '@explorer-1/common/src/images/svg/student-project-badge.svg'
+
+interface EduStudentProjectSectionObject extends PageEduStudentProjectSectionProps {
+  type?: string
+}
+export interface EduStudentProjectStep {
+  heading?: string
+  media?: StreamfieldBlockData[]
+  content?: StreamfieldBlockData[]
+}
+
+interface PageEduStudentProjectObject extends PageEduResourcesObject {
+  [key: string]: any
+  studentProject: {
+    title: string
+    urlPath: string
+  }
+  overview: StreamfieldBlockData[]
+  overviewHeading: string
+  overviewImage: ImageObject
+  materials: string
+  materialsHeading: string
+  materialsImage: ImageObject
+  steps: EduStudentProjectStep[]
+  stepsHeading: string
+  stepsStepsNumbering?: boolean
+  customSections: any
+}
+interface PageEduStudentProjectProps {
+  data?: PageEduStudentProjectObject
+}
+
+const props = withDefaults(defineProps<PageEduStudentProjectProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const PageEduStudentProjectJumpMenu = ref()
+
+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 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 sectionOrder = ['top', 'overview', 'materials', 'steps', 'bottom']
+
+// mimic HeadingBlock data shape for defined 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) {
+        const headingText =
+          section === 'steps' ? 'Project Steps' : section.charAt(0).toUpperCase() + section.slice(1)
+        acc[section] = stringAsHeadingBlockData(
+          (data[`${section}Heading`] as HeadingLevel) || headingText
+        )
+      }
+      return acc
+    }, {})
+    return result
+  }
+  return undefined
+})
+
+const keyedCustomSections = computed(
+  ():
+    | {
+        [key: string]: StreamfieldBlockData[]
+      }
+    | undefined => {
+    if (data) {
+      const result = data.customSections.reduce(
+        (
+          acc: { [key: string]: StreamfieldBlockData[] },
+          section: {
+            heading: StreamfieldBlockData
+            content: StreamfieldBlockData[]
+            position: string
+          }
+        ) => {
+          const position = section.position
+          if (!acc[position]) {
+            acc[position] = []
+          }
+          acc[position].push(section.heading)
+          acc[position].push(...section.content)
+          return acc
+        },
+        {}
+      )
+      return result
+    }
+    return undefined
+  }
+)
+
+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)
+  }
+
+  return blocks
+})
+
+// organize data to render with PageEduStudentProjectSection component
+const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
+  const sections: EduStudentProjectSectionObject[] = []
+  // include custom top section
+  if (keyedCustomSections.value && keyedCustomSections.value['top']) {
+    sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['top'] })
+  }
+  sectionOrder.forEach((section) => {
+    if (data && data[section]) {
+      sections.push({
+        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
+      })
+    }
+    // include custom "after_" sections
+    if (keyedCustomSections.value && keyedCustomSections.value[`after_${section}`]) {
+      sections.push({ type: 'streamfield', blocks: keyedCustomSections.value[`after_${section}`] })
+    }
+  })
+  // include custom bottom section
+  if (keyedCustomSections.value && keyedCustomSections.value['bottom']) {
+    sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['bottom'] })
+  }
+  const filteredSections = sections.filter(
+    (item) => item.text || item.blocks?.length || item.steps?.length
+  )
+
+  return filteredSections
+})
+
+const studentBadge = computed(() => {
+  return StudentProjectBadge
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight pt-5 lg:pt-12"
+  >
+    <div 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"
+          alt=""
+          width="200"
+          height="200"
+          class="block w-full h-auto"
+        />
+      </div>
+    </div>
+    <LayoutHelper
+      indent="col-3"
+      class="mb-10"
+    >
+      <DetailHeadline
+        v-if="data.title"
+        :title="data.title"
+        label="Student Project"
+        pill
+        pill-color="secondary"
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+      <div
+        v-if="data?.lesson?.url"
+        class="mt-8 font-bold text-body-lg"
+      >
+        Want to teach this?
+        <BaseLink
+          class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
+          variant="none"
+          :to="data.lesson.url"
+        >
+          View the Lesson Plan
+        </BaseLink>
+      </div>
+    </LayoutHelper>
+
+    <div class="container relative mx-auto z-20 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]"
+      />
+    </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 }"
+      :primary-subject="data.primarySubject"
+      :additional-subjects="data.additionalSubjects"
+      :time="data.customTime ? { time: data.customTime } : data.time"
+      :standards="data.standards"
+      :negative-top="!heroInline && !heroEmpty"
+    >
+      <template #metaInfo>
+        <div :class="data?.standards ? 'border-b border-gray-light-mid' : ''">
+          <div class="py-6 lg:py-8">
+            <MetaPanelItems :grade-levels="data?.gradeLevels" />
+            <div
+              v-if="data.lesson"
+              class="mt-8 font-bold text-body-s"
+            >
+              Want to teach this?
+              <BaseLink
+                class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
+                variant="none"
+                :to="data.lesson.url"
+              >
+                View the Lesson Plan
+              </BaseLink>
+            </div>
+          </div>
+        </div>
+      </template>
+    </MetaPanel>
+
+    <NavJumpMenu
+      ref="PageEduStudentProjectJumpMenu"
+      :title="data.title"
+      :blocks="consolidatedBlocks"
+      dropdown-text="In this project"
+    />
+
+    <template
+      v-for="(value, _key) in consolidatedSections"
+      :key="_key"
+    >
+      <BlockStreamfield
+        v-if="value.type === 'streamfield'"
+        :data="value.blocks"
+      />
+      <PageEduStudentProjectSection
+        v-else
+        :heading="value.heading"
+        :blocks="value.blocks"
+        :steps="value.steps"
+        :steps-numbering="data.stepsNumbering"
+        :text="value.text"
+        :image="value.image"
+      />
+    </template>
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield
+      v-if="data.body?.length"
+      :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
+      item-type="cards"
+      class="lg:my-24 my-12 print:px-4"
+      :heading="data.relatedContentHeading || 'Related Projects'"
+      :items="data.relatedContent"
+    />
+
+    <LayoutHelper
+      v-if="data.authors?.length"
+      indent="col-3"
+    >
+      <AboutTheAuthor :authors="data.authors" />
+    </LayoutHelper>
+
+    <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>