@explorer-1/vue 0.2.14 → 0.2.16

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

@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type {
+  BlockData,
+  ImageObject,
+  PageEduResourcesObject,
+  StreamfieldBlockData
+} from './../../../interfaces'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.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 MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+import PageEduLessonSection, { type PageEduLessonSectionProps } from './PageEduLessonSection.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
+
+interface EduLessonSectionObject extends PageEduLessonSectionProps {
+  type?: 'streamfield'
+}
+interface EduLessonProcedureBlocks {
+  blocks: StreamfieldBlockData[]
+}
+interface EduLessonProcedure {
+  procedure: EduLessonProcedureBlocks
+}
+
+interface PageEduLessonObject extends PageEduResourcesObject {
+  [key: string]: any
+  studentProject: {
+    title: string
+    urlPath: string
+  }
+  overview: StreamfieldBlockData[]
+  overviewHeading: string
+  overviewImage: ImageObject
+  materials: string
+  materialsHeading: string
+  materialsImage: ImageObject
+  management: StreamfieldBlockData[]
+  managementHeading: string
+  background: StreamfieldBlockData[]
+  backgroundHeading: string
+  procedures: EduLessonProcedure[]
+  proceduresHeading: string
+  proceduresStepsNumbering: boolean
+  discussion: StreamfieldBlockData[]
+  discussionHeading: string
+  assessment: StreamfieldBlockData[]
+  assessmentHeading: string
+  extensions: StreamfieldBlockData[]
+  extensionsHeading: string
+  techAddons: StreamfieldBlockData[]
+  techAddonsHeading: string
+  customSections: any
+}
+interface PageEduLessonProps {
+  data?: PageEduLessonObject
+}
+
+const props = withDefaults(defineProps<PageEduLessonProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const PageEduLessonJumpMenu = ref()
+
+defineExpose({
+  PageEduLessonJumpMenu
+})
+
+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
+})
+
+const heroInline = computed((): boolean => {
+  if (!heroEmpty.value && data?.hero) {
+    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) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
+
+const sectionOrder = [
+  'top',
+  'overview',
+  'materials',
+  'management',
+  'background',
+  'procedures',
+  'discussion',
+  'assessment',
+  'extensions',
+  'techAddons',
+  '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) => {
+      const headingText =
+        section === 'techAddons'
+          ? 'Tech Add-ons'
+          : 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 !== 'procedures') {
+        blocks.push(...data[section])
+      } else if (section === 'procedures' && data.procedures?.length) {
+        // get blocks in nested procedures
+        data.procedures.forEach((item) => {
+          if (item.procedure?.blocks?.length) {
+            blocks.push(...item.procedure.blocks)
+          }
+        })
+      }
+    }
+    // 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 PageEduLessonSection component
+const consolidatedSections = computed((): EduLessonSectionObject[] => {
+  const sections = []
+  // 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] as BlockData)
+          : undefined,
+        blocks: section !== 'materials' && section !== 'procedures' ? data[section] : undefined,
+        text: section === 'materials' ? data[section] : undefined,
+        procedures: section === 'procedures' ? data[section] : undefined,
+        procedureSteps: section === 'procedures' ? data.proceduresStepsNumbering : false
+      })
+    }
+    // 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'] })
+  }
+  return sections as EduLessonSectionObject[]
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="computedClass"
+  >
+    <LayoutHelper
+      indent="col-3"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        label="Lesson"
+        pill
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+      <p
+        v-if="data.studentProject"
+        class="mt-8 font-bold text-body-lg"
+      >
+        Find out what’s involved for students:
+        <BaseLink
+          class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
+          variant="none"
+          :to="data.studentProject.urlPath"
+        >
+          View the Project Steps
+        </BaseLink>
+      </p>
+    </LayoutHelper>
+    <MetaPanel
+      button="View Standards"
+      theme="stars"
+      :primary-subject="data.primarySubject"
+      :additional-subjects="data.additionalSubjects"
+      :time="data.time"
+      :grade-levels="data.gradeLevels"
+      :standards="data.standards"
+      negative-bottom
+    />
+
+    <!-- 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"
+    />
+
+    <!-- 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>
+
+    <NavJumpMenu
+      ref="PageEduLessonJumpMenu"
+      :title="data.title"
+      :blocks="consolidatedBlocks"
+      :enabled="true"
+    />
+    <div id="NavJumpMenuFrame">
+      <template
+        v-for="(value, _key) in consolidatedSections"
+        :key="_key"
+      >
+        <BlockStreamfield
+          v-if="value.type === 'streamfield'"
+          :data="value.blocks"
+        />
+        <PageEduLessonSection
+          v-else
+          :heading="value.heading"
+          :blocks="value.blocks"
+          :procedures="value.procedures"
+          :procedure-steps="value.procedureSteps"
+          :text="value.text"
+          :image="value.image"
+        />
+      </template>
+
+      <!-- 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
+        item-type="cards"
+        class="lg:my-24 my-12 print:px-4"
+        :heading="data.relatedContentHeading"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { camelCase } from 'lodash'
+import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
+import BlockHeading, {
+  type BlockHeadingObject
+} from './../../../components/BlockHeading/BlockHeading.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+
+export interface PageEduLessonSectionProps {
+  heading: BlockHeadingObject
+  blocks?: StreamfieldBlockData[]
+  procedures?: {
+    procedure: {
+      blocks: StreamfieldBlockData[]
+    }
+  }[]
+  procedureSteps?: boolean
+  text?: string
+  image?: ImageObject
+}
+
+const props = withDefaults(defineProps<PageEduLessonSectionProps>(), {
+  heading: undefined,
+  blocks: undefined,
+  procedures: undefined,
+  procedureSteps: false,
+  text: undefined,
+  image: undefined
+})
+
+const { heading, blocks, image } = reactive(props)
+
+const anchorId = computed(() => {
+  return 'lesson_' + camelCase(heading.heading)
+})
+</script>
+<template>
+  <section
+    :id="anchorId"
+    :aria-label="heading.heading"
+  >
+    <LayoutHelper
+      indent="col-3"
+      class="lg:mb-8 mb-5"
+    >
+      <BlockHeading
+        :data="heading"
+        generate-id
+      />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="image"
+      indent="col-2"
+      class="lg:mb-8 mb-5"
+    >
+      <!-- image goes here -->
+      <BlockImageStandard :data="image" />
+    </LayoutHelper>
+
+    <BlockStreamfield
+      v-if="blocks"
+      :data="blocks"
+    />
+    <template v-else-if="procedures?.length">
+      <template
+        v-for="(item, index) in procedures"
+        :key="index"
+      >
+        <LayoutHelper
+          v-if="procedureSteps"
+          indent="col-3"
+          class="lg:mb-8 mb-5"
+        >
+          <BaseHeading level="h3">
+            {{ 'Section ' + (Number(index) + 1) }}
+          </BaseHeading>
+        </LayoutHelper>
+        <BlockStreamfield
+          v-if="item?.procedure?.blocks"
+          :data="item.procedure.blocks"
+        />
+      </template>
+    </template>
+    <LayoutHelper
+      v-else-if="text"
+      indent="col-3"
+      class="lg:mb-18 mb-10"
+    >
+      <BlockText :text="text" />
+    </LayoutHelper>
+  </section>
+</template>

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

@@ -56,6 +56,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
+      showJumpMenu: true,
       ...BlockStreamfieldData
     }
   }

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

@@ -1,15 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, defineExpose } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
-import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import type {
-  AuthorObject,
-  ImageObject,
-  PageResponseObject,
-  RelatedLinkObject,
-  Topic,
-  ThumbnailObject
-} from './../../../interfaces'
+import type { AuthorObject, ImageObject, PageObject } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
@@ -19,23 +11,14 @@ import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
-interface PageEduNewsDetailObject extends PageResponseObject {
+interface PageEduNewsDetailObject extends PageObject {
   readTime: string
   url: string
   heroImage: ImageObject
   heroImageInline: ImageObject
-  thumbnailImage: ThumbnailObject
-  heroPosition: string
   heroConstrain: boolean
   heroImageCaption: string
   authors: AuthorObject[]
-  publicationDate: string
-  title: string
-  getTopicsForDisplay: Topic[]
-  summary: string
-  topper: string
-  relatedLinks: RelatedLinkObject[]
-  body: StreamfieldBlockData[]
   showJumpMenu: boolean
 }
 
@@ -69,7 +52,7 @@ const computedClass = computed(() => {
 })
 
 const dateTimeArray = computed(() => {
-  return props.data.publicationDate.split(' ')
+  return props.data.publicationDate ? props.data.publicationDate.split(' ') : undefined
 })
 
 defineExpose({
@@ -88,7 +71,7 @@ defineExpose({
       ref="PageEduNewsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="true"
+      :enabled="data.showJumpMenu"
     />
 
     <!-- schema.org -->

package/src/utils/dayjs.js

@@ -3,9 +3,6 @@ import updateLocale from 'dayjs/plugin/updateLocale.js'
 import localizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-// for BaseTimer
-import duration from 'dayjs/plugin/duration.js'
-import minMax from 'dayjs/plugin/minMax.js'
 
 // Locales must be imported manually
 // see https://github.com/iamkun/dayjs/tree/dev/src/locale
@@ -31,8 +28,5 @@ dayjs.updateLocale('en', {
 })
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
-// for BaseTimer
-dayjs.extend(duration)
-dayjs.extend(minMax)
 
 export default dayjs

package/src/utils/getHeadingId.ts

@@ -1,5 +1,5 @@
 import { camelCase } from 'lodash'
-
-export const getHeadingId = (heading: string, index?: number) => {
-  return camelCase(heading + (index ? index : ''))
+import { type HeadingLevel } from '../components/BaseHeading/BaseHeading.vue'
+export const getHeadingId = (heading: HeadingLevel, blockId?: string) => {
+  return 'anchor_' + camelCase(heading) + (blockId ? '_' + camelCase(blockId) : '')
 }