@explorer-1/vue 0.2.23 → 0.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.5"
+    "@explorer-1/common": "1.1.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockLinkCardList/BlockLinkCardList.stories.js

@@ -0,0 +1,110 @@
+import BlockLinkCardList from './BlockLinkCardList.vue'
+
+export default {
+  title: 'Components/Blocks/BlockLinkCardList',
+  component: BlockLinkCardList,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+export const BlockLinkCardData = {
+  data: {
+    url: '/news/placeholder-slug-1',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-1',
+    label: 'Solar System',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  },
+  headingLevel: 'h2',
+  startDate: undefined,
+  endDate: undefined
+}
+
+export const BlockLinkCardCarouselData = [
+  {
+    page: {
+      ...BlockLinkCardData.data,
+      __typename: 'EDUEventPage',
+      startDate: '2021-11-11',
+      startDatetime: '2021-11-11T00:00:00-08:00',
+      endDatetime: '2021-11-11T23:59:59.999999-08:00',
+      endDate: '2021-11-11',
+      ongoing: false,
+      eventType: 'Workshop'
+    }
+  },
+  {
+    page: {
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tortor placerat, varius ante in, imperdiet dolor. Morbi vel arcu eu purus efficitur consequat sit amet vel nisi. Duis convallis volutpat scelerisque.',
+
+      ...BlockLinkCardData.data,
+      __typename: 'EDULessonPage',
+      primarySubject: {
+        subject: 'Math'
+      },
+      gradeLevels: [
+        { gradeLevel: 'K' },
+        { gradeLevel: '1' },
+        { gradeLevel: '2' },
+        { gradeLevel: '8' }
+      ],
+      time: {
+        time: '1-2 hrs'
+      }
+    }
+  },
+  {
+    page: {
+      ...BlockLinkCardData.data,
+      __typename: 'EDUExplainerArticlePage',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tortor placerat, varius ante in, imperdiet dolor. Morbi vel arcu eu purus efficitur consequat sit amet vel nisi. Duis convallis volutpat scelerisque.',
+      primarySubject: {
+        subject: 'Engineering'
+      },
+      gradeLevels: [
+        { gradeLevel: 'All Ages' },
+        { gradeLevel: 'K' },
+        { gradeLevel: '1' },
+        { gradeLevel: '2' },
+        { gradeLevel: '5' },
+        { gradeLevel: '6' },
+        { gradeLevel: '7' },
+        { gradeLevel: '8' }
+      ]
+    }
+  },
+  {
+    url: '/news/placeholder-slug-4',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-4',
+    summary:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tortor placerat, varius ante in, imperdiet dolor. Morbi vel arcu eu purus efficitur consequat sit amet vel nisi. Duis convallis volutpat scelerisque.',
+    label: 'Technology',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  }
+]
+
+// stories
+export const BaseStory = {
+  name: 'BlockLinkCardList',
+  args: {
+    itemType: 'cards',
+    heading: 'Related Pages',
+    items: BlockLinkCardCarouselData
+  }
+}

package/src/components/BlockLinkCardList/BlockLinkCardList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Card } from './../../interfaces'
+import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+
+export interface BlockLinkCardListProps {
+  items: Card[]
+}
+
+const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
+  items: undefined
+})
+</script>
+<template>
+  <div class="BlockLinkCardList">
+    <!-- Slides -->
+    <BlockLinkCard
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="border-b border-gray-light-mid mb-5"
+      :class="{ 'pt-3': index !== 0 }"
+      :data="item"
+      size="lg"
+    />
+  </div>
+</template>
+<style lang="scss">
+.BlockLinkCardList {
+  .BlockLinkCard {
+    div.bg-gray-dark.relative.mb-6 {
+      @apply mb-3 #{!important};
+    }
+  }
+}
+</style>

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -207,6 +207,23 @@
         <BlockCardGrid :cards="block.items" />
       </div>
 
+      <div
+        v-else-if="block.blockType === 'LinkCarouselBlock' && block.blocks?.length"
+        :key="`linkCarouselBlock${index}`"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockLinkCarousel :items="block.blocks" />
+      </div>
+
+      <LayoutHelper
+        v-else-if="block.blockType === 'LinkCardListBlock' && block.blocks?.length"
+        :key="`linkCardListBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockLinkCardList :items="block.blocks" />
+      </LayoutHelper>
+
       <LayoutHelper
         v-else-if="block.blockType == 'AccordionBlock'"
         :key="`accordionBlock${index}`"
@@ -231,6 +248,8 @@ import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { StreamfieldBlockData } from '../../interfaces'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
+import BlockAccordion, { type AccordionBlockObject } from './../BlockAccordion/BlockAccordion.vue'
 import BlockCardGrid from './../BlockCardGrid/BlockCardGrid.vue'
 import BlockCta from './../BlockCta/BlockCta.vue'
 import BlockHeading, { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
@@ -240,6 +259,8 @@ import BlockImageComparison from './../BlockImageComparison/BlockImageComparison
 import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
 import BlockInlineImage from './../BlockInlineImage/BlockInlineImage.vue'
 import BlockKeyPoints from './../BlockKeyPoints/BlockKeyPoints.vue'
+import BlockLinkCardList from './../BlockLinkCardList/BlockLinkCardList.vue'
+import BlockLinkCarousel from './../BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockListCards from './../BlockListCards/BlockListCards.vue'
 import BlockQuote, { type BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
 import BlockRelatedLinks, {
@@ -255,9 +276,6 @@ import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
-import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
-import BlockAccordion from './../BlockAccordion/BlockAccordion.vue'
-import { type AccordionBlockObject } from './../BlockAccordion/BlockAccordion.vue'
 
 interface Variants {
   [key: string]: string
@@ -272,6 +290,8 @@ export default defineComponent({
   name: 'BlockStreamfield',
   components: {
     LayoutHelper,
+    BlockAnchor,
+    BlockAccordion,
     BlockCardGrid,
     BlockCta,
     BlockHeading,
@@ -281,6 +301,8 @@ export default defineComponent({
     BlockImageGallery,
     BlockInlineImage,
     BlockKeyPoints,
+    BlockLinkCardList,
+    BlockLinkCarousel,
     BlockListCards,
     BlockQuote,
     BlockRelatedLinks,
@@ -291,9 +313,7 @@ export default defineComponent({
     BlockIframeEmbed,
     BlockGist,
     BlockVideo,
-    BlockVideoEmbed,
-    BlockAnchor,
-    BlockAccordion
+    BlockVideoEmbed
   },
   props: {
     variant: {

package/src/components/MetadataEduResource/MetadataEduResource.stories.js

@@ -50,7 +50,10 @@ export const MultipleGradeLevels = {
         { gradeLevel: '6' },
         { gradeLevel: '7' },
         { gradeLevel: '8' }
-      ]
+      ],
+      time: {
+        time: 'Under 30 mins'
+      }
     },
     variant: 'secondary'
   }

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { EduResourceCardObject } from './../../interfaces.ts'
 import IconSubject from './../Icons/IconSubject.vue'
 import IconProfile from './../Icons/IconProfile.vue'
-// import IconTime from './../Icons/IconTime.vue'
+import IconTime from './../Icons/IconTime.vue'
 import {} from './../../utils/mixins'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 
@@ -29,6 +29,9 @@ const primarySubject = computed(() => {
 const audience = computed(() => {
   return rangeifyGrades(props.resource?.gradeLevels)
 })
+const time = computed(() => {
+  return props.resource?.time?.time
+})
 </script>
 <template>
   <div
@@ -57,6 +60,16 @@ const audience = computed(() => {
       />
       <span>{{ audience }}</span>
     </div>
+    <div
+      v-if="time"
+      class="MetadataEduResourceItem"
+    >
+      <IconTime
+        class="MetadataEduResourceIcon text-[1.15em]"
+        :class="iconClass"
+      />
+      <span>{{ time }}</span>
+    </div>
   </div>
 </template>
 <style lang="scss">

package/src/components/SearchSelectMenu/SearchSelectMenu.vue

@@ -8,7 +8,7 @@
     <select
       :id="generateId()"
       v-model="selectValueHandler"
-      class="border-0 text-primary can-hover:hover:text-primary-dark font-secondary font-semibold tracking-wider uppercase align-middle"
+      class="border-0 text-action can-hover:hover:text-action-dark font-secondary font-semibold tracking-wider uppercase align-middle"
     >
       <option
         disabled

package/src/constants.ts

@@ -11,6 +11,11 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
     variant: 'primary',
     type: 'resource'
   },
+  EDUTeachableMomentPage: {
+    label: 'Teachable Moment',
+    variant: 'primary',
+    type: 'resource'
+  },
   EDUEventPage: {
     variant: 'primary',
     type: 'event'
@@ -24,5 +29,6 @@ export const searchContentTypeToPageType: DictionaryInterface = {
   missions_mission: 'Mission',
   eduevents_edueventpage: 'EDUEventPage',
   eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
-  eduresources_edulessonpage: 'EDULessonPage'
+  eduresources_edulessonpage: 'EDULessonPage',
+  eduresources_eduteachablemomentpage: 'EDUTeachableMomentPage'
 }

package/src/docs/foundation/typography.stories.js

@@ -78,6 +78,8 @@ export const TextStyles = {
   <code>.text-body-xs</code>
   <p class="mt-8"><mark>Highlighted text</mark></p>
   <code>mark</code>
+  <p class="mt-8"><span class="math-text">This is math text. a<sup>2</sup> + a<sub>b</sub> = c</span></p>
+  <code>.math-text</code>
 </div>`
   })
 }

package/src/interfaces.ts

@@ -140,6 +140,7 @@ export interface GradeLevelsObject {
 export interface EduResourceCardObject extends Card {
   primarySubject: PrimarySubjectObject
   gradeLevels: GradeLevelsObject[]
+  time: EduResourcesTime
 }
 
 export interface LinkObject {
@@ -213,11 +214,13 @@ export type MetaPanelTheme = 'primary' | 'secondary' | 'stars'
 export interface PageObject {
   __typename: string
   contentType: string
+  lastPublishedAt?: string
   breadcrumb?: string
   slug: string
   url: string
   title: string
   getTopicsForDisplay?: Topic[]
+  showJumpMenu?: boolean
   label?: string
   summary?: string
   topper?: string

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

@@ -44,6 +44,7 @@ export const BaseStory = {
       seoTitle: 'Test Lesson',
       slug: 'test-lesson',
       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',

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

@@ -114,15 +114,6 @@ const heroInline = computed((): boolean => {
   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',
@@ -262,8 +253,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
-    :class="computedClass"
+    class="ThemeVariantLight pt-5 lg:pt-12"
   >
     <LayoutHelper
       indent="col-2"
@@ -409,5 +399,19 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       :heading="data.relatedContentHeading"
       :items="data.relatedContent"
     />
+
+    <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>

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

@@ -151,6 +151,7 @@ defineExpose({
       itemprop="articleBody"
       :data="data.body"
     />
+
     <div class="bg-stars bg-primary-darker">
       <div class="py-10 text-center text-white">
         <strong>Related News goes here</strong>

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

@@ -0,0 +1,142 @@
+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 PageEduTeachableMoment from './PageEduTeachableMoment.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduTeachableMoment',
+  component: PageEduTeachableMoment,
+  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: 'EDUTeachableMomentPage',
+      title: 'A Teachable Moment',
+      lastPublishedAt: '2024-08-22T02:33:13.507206+00:00',
+      url: 'http://localhost:3000/edu/resources/teachable-moment',
+      pageType: 'EDUTeachableMomentPage',
+      contentType: 'edu_resources.EDUTeachableMomentPage',
+      showJumpMenu: true,
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
+        alt: ''
+      },
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+      heroConstrain: true,
+
+      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: []
+    }
+  }
+}