@explorer-1/vue 0.2.14 → 0.2.16

package/src/interfaces.ts

@@ -15,6 +15,31 @@ export interface BlockData {
   level?: string
   items?: any[]
 }
+export interface StreamfieldBlockData extends BlockData {
+  blockId?: string
+  id?: string
+  fullBleed?: boolean
+  heading?: string
+  galleryTitle?: string
+  galleryDescription?: string
+  coverImage?: ImageObject
+  gallerySlides?: ImageObject[]
+  blocks?: object[]
+  value?: string
+  customLabel?: string
+  introduction?: string
+  teaserPage?: object | string[]
+  image?: ImageObject
+  buttonText?: string
+  fullWidthImage?: boolean
+  video?: any
+  embed?: any
+  displayCaption?: boolean
+  caption?: string
+  credit?: string
+  imageInline?: ImageObject
+}
+
 export interface ImageSrcObject {
   url: string
   width: number
@@ -125,17 +150,14 @@ export interface RelatedLinkObject extends LinkObject {
   document: { url: string } | null
   text: string | null
 }
-
-export interface PageResponseObject {
-  __typename: string
-  contentType: string
-  breadcrumb?: string
-  url?: string
+export interface BlockRelatedLinksObject extends BlockData {
+  heading: string
+  links: RelatedLinkObject[]
 }
 
 export interface PageResponse {
   __typename: string
-  page: PageResponseObject
+  page: PageObject
 }
 
 export interface HeaderResponse {
@@ -152,7 +174,7 @@ export interface FooterResponse {
 export type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu'
 
 export interface Attributes {
-  [name: string]: string
+  [key: string]: string
 }
 
 export interface AuthorObject {
@@ -177,3 +199,64 @@ export interface PillDictionaryInterface {
 export interface DictionaryInterface {
   [key: string]: string
 }
+export interface AccordionItemObject {
+  title?: string
+  body?: StreamfieldBlockData[]
+}
+
+export type MetaPanelTheme = 'primary' | 'secondary' | 'stars'
+
+export interface PageObject {
+  __typename: string
+  contentType: string
+  breadcrumb?: string
+  slug: string
+  url: string
+  title: string
+  getTopicsForDisplay?: Topic[]
+  label?: string
+  summary?: string
+  topper?: string
+  seoTitle?: string
+  searchDescription?: string
+  heroPosition?: 'full_bleed' | 'inline'
+  heroConstrain?: boolean
+  publicationDate?: string
+  body?: StreamfieldBlockData[]
+  thumbnailImage?: ThumbnailObject
+  relatedLinks?: BlockRelatedLinksObject[]
+  relatedContentHeading: string
+  relatedContent?: any
+}
+
+export interface EduResourcesSubject {
+  subject: string
+}
+export interface EduResourcesGradeLevel {
+  gradeLevel: string
+}
+
+export interface EduResourcesTime {
+  time: string
+}
+export interface EduResourceStandard {
+  type: string
+  code: string
+  domain: {
+    domain: string
+  }
+  definition: string
+}
+
+export interface EduResourceStandardItem {
+  standard: EduResourceStandard
+}
+
+export interface PageEduResourcesObject extends PageObject {
+  hero?: StreamfieldBlockData[]
+  primarySubject?: EduResourcesSubject
+  additionalSubjects?: EduResourcesSubject[]
+  gradeLevels?: EduResourcesGradeLevel[]
+  time?: EduResourcesTime
+  standards: EduResourceStandardItem[]
+}

package/src/main.ts

@@ -6,6 +6,7 @@ import filters from './utils/filters'
 // @ts-ignore
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
+import { BindOncePlugin } from 'vue-bind-once'
 import './assets/scss/styles-with-fonts.scss'
 import App from './App.vue'
 
@@ -23,6 +24,7 @@ app.use(pinia)
 app.use(router)
 app.use(vClickOutside)
 app.use(VueCompareImage)
+app.use(BindOncePlugin)
 
 // filters
 app.config.globalProperties.$filters = filters

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

@@ -47,6 +47,7 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
+      showJumpMenu: true,
       ...BlockStreamfieldTruncatedData,
       publicationDate: '2024-07-09',
       summary: 'Summary of resource article',

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -5,6 +5,7 @@ import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/Bas
 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'
@@ -12,6 +13,7 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
 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'
 
 export default defineComponent({
   name: 'PageEduExplainerArticle',
@@ -27,7 +29,9 @@ export default defineComponent({
     BlockImageCarousel,
     BlockImageComparison,
     BlockLinkCarousel,
-    BlockRelatedLinks
+    BlockRelatedLinks,
+    BlockVideo,
+    NavJumpMenu
   },
   props: {
     data: {
@@ -121,6 +125,11 @@ export default defineComponent({
       />
     </LayoutHelper>
 
+    <NavJumpMenu
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="data.showJumpMenu"
+    />
     <!-- inline hero content -->
     <LayoutHelper
       v-if="!heroEmpty && heroInline"

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

@@ -0,0 +1,303 @@
+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 PageEduLesson from './PageEduLesson.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduLesson',
+  component: PageEduLesson,
+  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: 'EDULessonPage',
+      title: 'Test Lesson',
+      url: 'http://localhost:3000/edu/resources/test-lesson',
+      pageType: 'EDUExplainerArticlePage',
+      contentType: 'edu_resources.EDUExplainerArticlePage',
+      searchDescription: '',
+      seoTitle: 'Test Lesson',
+      slug: 'test-lesson',
+      publicationDate: '2024-08-16',
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
+        alt: ''
+      },
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+      heroConstrain: true,
+      heroPosition: 'full_bleed',
+
+      studentProject: {
+        title: 'Student Project',
+        urlPath: '/path-to-student-project'
+      },
+
+      primarySubject: {
+        subject: 'Arts'
+      },
+      additionalSubjects: [
+        {
+          subject: 'Science'
+        }
+      ],
+      gradeLevels: [
+        {
+          gradeLevel: 'K'
+        },
+        {
+          gradeLevel: '1'
+        }
+      ],
+      time: {
+        time: 'Under 30 mins'
+      },
+      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.3.2',
+            definition:
+              'Recount stories, including fables, folktales, and myths from diverse cultures; determine the central message, lesson, or moral and explain how it is conveyed through key details in the text.',
+            domain: {
+              domain: 'Reading Standards for Literature'
+            },
+            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.CC.A',
+            definition: 'Know number names and the count sequence.',
+            domain: {
+              domain: 'Counting and Cardinality'
+            },
+            type: 'ccss_maths'
+          }
+        },
+        {
+          standard: {
+            code: 'K.CC.A.3',
+            definition:
+              'Write numbers from 0 to 20. Represent a number of objects with a written numeral 0-20 (with 0 representing a count of no objects).',
+            domain: {
+              domain: 'Counting and Cardinality'
+            },
+            type: 'ccss_maths'
+          }
+        },
+        {
+          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: 'Custom Overview heading',
+      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: 'Materials stuff',
+      materialsImage: BlockImageData.image,
+
+      management: BlockStreamfieldMinimalData.body,
+      managementHeading: 'Management stuff',
+
+      background: BlockStreamfieldMinimalData.body,
+      backgroundHeading: 'Background heading',
+
+      procedures: [
+        {
+          procedure: {
+            blocks: BlockStreamfieldMinimalData.body
+          }
+        },
+        {
+          procedure: {
+            blocks: BlockStreamfieldMinimalData.body
+          }
+        },
+        {
+          procedure: {
+            blocks: BlockStreamfieldMinimalData.body
+          }
+        }
+      ],
+      proceduresHeading: 'Procedures heading',
+      proceduresStepsNumbering: true,
+
+      discussion: BlockStreamfieldMinimalData.body,
+      discussionHeading: 'Discussion heading',
+
+      assessment: BlockStreamfieldMinimalData.body,
+      assessmentHeading: 'Assessment heading',
+
+      extensions: BlockStreamfieldMinimalData.body,
+      extensionsHeading: 'Extensions heading',
+
+      techAddons: BlockStreamfieldMinimalData.body,
+      techAddonsHeading: 'Tech addons heading',
+
+      customSections: [
+        {
+          blockType: 'EDULessonCustomSectionBlock',
+          content: BlockStreamfieldTruncatedData.body,
+          heading: BlockHeadingData,
+          position: 'after_procedures'
+        }
+      ],
+
+      body: BlockStreamfieldTruncatedData.body,
+
+      relatedLinks: BlockRelatedLinksData.data,
+      relatedContentHeading: 'Related Content',
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
+export const HeroCarousel = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
+    }
+  }
+}
+
+export const HeroImageComparison = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      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,
+      heroPosition: 'inline',
+      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,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockIframeEmbedData
+        }
+      ]
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: []
+    }
+  }
+}