@explorer-1/vue 0.2.50 → 0.2.52

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

@@ -38,7 +38,7 @@ interface PageEduLessonObject extends PageEduResourcesObject {
   [key: string]: any
   studentProject: {
     title: string
-    urlPath: string
+    url: string
   }
   overview: StreamfieldBlockData[]
   overviewHeading: string
@@ -273,19 +273,18 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
         :title="data.title"
         :image="data.thumbnailImage?.original"
       />
-      <p
-        v-if="data.studentProject"
+      <div
+        v-if="data.studentProject?.url"
         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>
+      </div>
     </LayoutHelper>
     <MetaPanel
       button="View Standards"
@@ -293,7 +292,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       :class="{ 'mb-10 lg:mb-14': heroInline || data?.hero?.length === 0 }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
-      :time="data.time"
+      :time="data.customTime ? { time: data.customTime } : data.time"
       :grade-levels="data.gradeLevels"
       :standards="data.standards"
       :negative-bottom="heroInline || data?.hero?.length !== 0"
@@ -353,7 +352,10 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     </template>
 
     <!-- streamfield blocks -->
-    <BlockStreamfield :data="data.body" />
+    <BlockStreamfield
+      v-if="data.body?.length"
+      :data="data.body"
+    />
 
     <!-- related links -->
     <LayoutHelper

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: []
+    }
+  }
+}