@explorer-1/vue 0.2.51 → 0.2.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.51",
+  "version": "0.2.52",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.12"
+    "@explorer-1/common": "1.1.13"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -41,7 +41,7 @@
     </template>
     <div
       v-if="data.caption && data.caption.length > 2"
-      class="lg:px-0 p-4 pb-0 print:pl-0"
+      class="caption-area lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/BlockImage/BlockImage.vue

@@ -25,7 +25,10 @@ export default defineComponent({
 })
 </script>
 <template>
-  <div v-if="data">
+  <div
+    v-if="data"
+    class="BlockImage"
+  >
     <template v-if="fullBleed && data.imageFullBleed">
       <BlockImageFullBleed
         :data="data.imageFullBleed"

package/src/components/BlockImage/BlockImageFullBleed.vue

@@ -105,7 +105,10 @@ export default defineComponent({
 })
 </script>
 <template>
-  <div v-if="theData">
+  <div
+    v-if="theData"
+    class="BlockImageFullBleed"
+  >
     <div class="bg-gray-light">
       <div class="max-w-screen-3xl mx-auto">
         <MixinFancybox
@@ -137,7 +140,7 @@ export default defineComponent({
     </div>
     <div
       v-if="data && hasCaptionArea"
-      class="max-w-screen-3xl p-4 pb-0 mx-auto"
+      class="caption-area max-w-screen-3xl p-4 pb-0 mx-auto"
     >
       <BaseImageCaption
         :data="theData"

package/src/components/BlockImage/BlockImageStandard.vue

@@ -95,7 +95,10 @@ export default defineComponent({
 })
 </script>
 <template>
-  <div v-if="theData">
+  <div
+    v-if="theData"
+    class="BlockImageStandard"
+  >
     <MixinFancybox
       v-if="theData.src"
       :src="theData.original || theData.src?.url"
@@ -122,7 +125,7 @@ export default defineComponent({
     </MixinFancybox>
     <div
       v-if="theData && hasCaptionArea"
-      class="lg:px-0 p-4 pb-0 print:pl-0"
+      class="caption-area pt-4 pb-0 print:pl-0"
     >
       <BaseImageCaption
         :data="theData"

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="theImageData">
+  <div
+    v-if="theImageData"
+    class="BlockImageCarouselItem"
+  >
     <MixinFancybox
       :src="theImageData.original || theImageData.src?.url"
       :caption="theImageData.caption"
@@ -28,7 +31,7 @@
     </MixinFancybox>
     <div
       v-if="theImageData && hasCaptionArea"
-      class="lg:px-0 lg:pt-3 px-4 pt-10"
+      class="caption-area lg:px-0 lg:pt-3 px-4 pt-10"
     >
       <BaseImageCaption
         class="slide-caption"

package/src/components/BlockImageComparison/BlockImageComparison.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="data">
+  <div
+    v-if="data"
+    class="BlockImageComparison"
+  >
     <ClientOnly>
       <VueCompareImage
         v-if="theBeforeImageSrc && theAfterImageSrc"
@@ -12,7 +15,7 @@
     </ClientOnly>
     <div
       v-if="data.caption || customDetailUrl"
-      class="lg:px-0 p-4 pb-0 print:pl-0"
+      class="caption-area lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption
         :data="{ caption: data.caption }"

package/src/components/BlockInlineImage/BlockInlineImage.vue

@@ -44,14 +44,17 @@
         class="flex col-span-5"
         :class="data.alignTo === 'right' ? 'col-start-3 lg:order-1' : 'col-start-6 lg:order-2'"
       >
-        <BlockText :text="data.text" />
+        <BlockText
+          :variant="variant"
+          :text="data.text"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import { mixinGetSrcSet } from './../../utils/mixins'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
@@ -73,6 +76,10 @@ export default defineComponent({
     data: {
       type: Object,
       required: false
+    },
+    variant: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+      default: 'large'
     }
   },
   computed: {

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -23,24 +23,28 @@
         v-else-if="block.blockType == 'RichTextBlock'"
         :key="`richText${index}`"
         indent="col-3"
-        :class="seamlessText(index) ? 'lg:mb-8 mb-5' : 'lg:mb-18 mb-10'"
+        :class="seamlessText(index) ? 'lg:mb-8 mb-5' : marginBottom"
       >
-        <BlockText :text="block.value" />
+        <BlockText
+          :text="block.value"
+          :variant="size"
+        />
       </LayoutHelper>
 
       <!-- custom margin bottom that matches BlockText styles if followed by RichTextBlock -->
       <BlockInlineImage
         v-else-if="block.blockType == 'InlineImageBlock'"
         :key="`inlineImageBlock${index}`"
-        :class="seamlessText(index) ? 'lg:mb-8 mb-5' : 'lg:mb-18 mb-10'"
+        :class="seamlessText(index) ? 'lg:mb-8 mb-5' : marginBottom"
         :data="block"
+        :variant="size"
       />
 
       <LayoutHelper
         v-else-if="block.blockType == 'ListBlock' && block.field === 'content_card_list'"
         :key="`listBlock${index}`"
         indent="col-3"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockListCards :data="block" />
       </LayoutHelper>
@@ -49,7 +53,7 @@
         v-else-if="block.blockType == 'KeyPointBlock'"
         :key="`keyPointBlock${index}`"
         indent="col-3"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockKeyPoints :data="block" />
       </LayoutHelper>
@@ -58,7 +62,7 @@
         v-else-if="block.blockType == 'QuoteBlock'"
         :key="`quoteBlock${index}`"
         indent="col-4"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockQuote :data="block as unknown as BlockQuoteAttributes" />
       </LayoutHelper>
@@ -67,7 +71,7 @@
         v-else-if="block.blockType == 'CTABlock'"
         :key="`ctaBlock${index}`"
         indent="col-4"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockCta :data="block" />
       </LayoutHelper>
@@ -76,7 +80,7 @@
         v-else-if="block.blockType == 'TeaserBlock'"
         :key="`teaserBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockTeaser
           :custom-label="block.customLabel"
@@ -93,7 +97,7 @@
         v-else-if="block.blockType == 'CarouselBlock'"
         :key="`carouselBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockImageCarousel
           :items="block.blocks"
@@ -104,7 +108,8 @@
       <div
         v-else-if="block.blockType == 'ImageGalleryBlock'"
         :key="`imageGalleryBlock${index}`"
-        class="max-w-screen-3xl lg:mb-18 mx-auto mb-10"
+        class="max-w-screen-3xl mx-auto"
+        :class="marginBottom"
       >
         <BlockImageGallery
           :title="block.galleryTitle"
@@ -119,7 +124,7 @@
         v-else-if="block.blockType == 'VideoBlock'"
         :key="`videoBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockVideo :data="block" />
       </LayoutHelper>
@@ -128,7 +133,7 @@
         v-else-if="block.blockType == 'VideoEmbedBlock'"
         :key="`videoEmbedBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockVideoEmbed :data="block as unknown as VideoBlockEmbedData" />
       </LayoutHelper>
@@ -136,7 +141,7 @@
       <BlockImage
         v-else-if="block.blockType == 'FullBleedImageBlock'"
         :key="`fullBleedImageBlock${index}`"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
         :data="block"
         :full-bleed="block.fullBleed"
       />
@@ -145,7 +150,7 @@
         v-else-if="block.blockType == 'ImageComparisonBlock'"
         :key="`imageComparisonBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockImageComparison :data="block" />
       </LayoutHelper>
@@ -154,7 +159,7 @@
         v-else-if="block.blockType == 'IframeEmbedBlock'"
         :key="`iframeEmbedBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockIframeEmbed :data="block" />
       </LayoutHelper>
@@ -163,7 +168,7 @@
         v-else-if="block.blockType == 'GitHubGistBlock'"
         :key="`GitHubGistBlock${index}`"
         indent="col-3"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockGist :data="block" />
       </LayoutHelper>
@@ -172,7 +177,7 @@
         v-else-if="block.blockType == 'TableBlock'"
         :key="`tableBlock${index}`"
         indent="col-3"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockTable :data="block" />
       </LayoutHelper>
@@ -181,7 +186,7 @@
         v-else-if="block.blockType == 'RelatedLinksBlock'"
         :key="`relatedLinksBlock${index}`"
         indent="col-3"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockRelatedLinks :data="block as any as BlockRelatedLinksObject" />
       </LayoutHelper>
@@ -195,7 +200,8 @@
       <div
         v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
         :key="`cardGridBlock${index}`"
-        class="LayoutHelper md:BaseGrid md:container md:mx-auto lg:mb-18 mb-10"
+        class="LayoutHelper md:BaseGrid md:container md:mx-auto"
+        :class="marginBottom"
       >
         <div class="lg:col-start-2 lg:col-end-12 md:col-span-full md:px-4 px-0 relative">
           <BlockCardGrid :cards="block.items" />
@@ -205,7 +211,7 @@
       <div
         v-else-if="block.blockType === 'LinkCarouselBlock' && block.blocks?.length"
         :key="`linkCarouselBlock${index}`"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockLinkCarousel :items="block.blocks" />
       </div>
@@ -214,7 +220,7 @@
         v-else-if="block.blockType === 'LinkCardListBlock' && block.blocks?.length"
         :key="`linkCardListBlock${index}`"
         indent="col-2"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockLinkCardList :items="block.blocks" />
       </LayoutHelper>
@@ -223,7 +229,7 @@
         v-else-if="block.blockType == 'AccordionBlock'"
         :key="`accordionBlock${index}`"
         indent="col-3"
-        class="lg:mb-18 mb-10"
+        :class="marginBottom"
       >
         <BlockAccordion :data="block as unknown as AccordionBlockObject" />
       </LayoutHelper>
@@ -231,7 +237,8 @@
       <div
         v-else
         :key="index"
-        class="lg:mb-18 p-3 mb-10 overflow-hidden border"
+        class="p-3 overflow-hidden border"
+        :class="marginBottom"
       >
         <pre>{{ block }}</pre>
       </div>
@@ -315,6 +322,11 @@ export default defineComponent({
       default: 'default',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    size: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+      required: false,
+      default: 'large'
+    },
     // eslint-disable-next-line vue/require-default-prop
     data: {
       type: Array as PropType<StreamfieldBlockData[]>,
@@ -324,6 +336,13 @@ export default defineComponent({
   computed: {
     layoutClass(): string {
       return variants[this.variant]
+    },
+    marginBottom() {
+      let margin = 'lg:mb-10 mb-6'
+      if (this.size === 'large') {
+        margin = 'lg:mb-18 mb-10'
+      }
+      return margin
     }
   },
   methods: {
@@ -366,6 +385,10 @@ export default defineComponent({
         @apply col-span-7;
       }
     }
+
+    .p-4.caption-area {
+      @apply px-0;
+    }
   }
 }
 </style>

package/src/components/BlockVideo/BlockVideo.vue

@@ -10,7 +10,7 @@
 
     <div
       v-if="hasCaption"
-      class="lg:px-0 p-4 pb-0 print:pl-0"
+      class="caption-area lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption
         :data="data"

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -11,7 +11,7 @@
     </BaseImagePlaceholder>
     <div
       v-if="data.caption || customDetailUrl"
-      class="lg:px-0 p-4 print:pl-0"
+      class="caption-area lg:px-0 p-4 print:pl-0"
     >
       <BaseImageCaption
         :data="data"

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
+import { reactive } from 'vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
@@ -19,28 +19,9 @@ const props = withDefaults(defineProps<HeroInlineMediaProps>(), {
 })
 
 const { heroBlocks, constrain } = reactive(props)
-
-const heroInline = computed(() => {
-  // heroes with interactive elements have special handling
-  if (heroBlocks?.length) {
-    // excludes VideoBlock as this will autoplay
-    if (heroBlocks[0].blockType === 'VideoBlock') {
-      return false
-    } else if (
-      heroBlocks[0].blockType === 'HeroImageBlock' ||
-      heroBlocks[0].blockType === 'CarouselBlock' ||
-      heroBlocks[0].blockType === 'IframeEmbedBlock' ||
-      heroBlocks[0].blockType === 'VideoEmbedBlock' ||
-      heroBlocks[0].blockType === 'ImageComparisonBlock'
-    ) {
-      return true
-    }
-  }
-  return false
-})
 </script>
 <template>
-  <div v-if="heroBlocks?.length && heroInline">
+  <div v-if="heroBlocks?.length">
     <BlockImageStandard
       v-if="heroBlocks[0].blockType === 'HeroImageBlock'"
       :data="heroBlocks[0].imageInline"

package/src/components/HeroMedia/HeroMedia.vue

@@ -44,7 +44,7 @@
       <div
         v-if="hasCaptionArea"
         :class="captionVisibilityClass"
-        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
+        class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
       >
         <BaseImageCaption :data="theImageData || customCaption" />
       </div>

package/src/components/MetaPanel/MetaPanel.vue

@@ -84,7 +84,7 @@ interface SortedStandards {
 const sortedStandards = computed((): SortedStandards | undefined => {
   if (standards) {
     const sorted = standards.reduce<SortedStandards>((acc, item) => {
-      const type = item.standard.type
+      const type = item.standard?.type
       // Initialize array for type if it doesn't exist
       if (!acc[type]) {
         acc[type] = []
@@ -164,61 +164,66 @@ const standardsIste = computed(() => {
           </div>
         </div>
         <div
-          v-if="standards"
+          v-if="standards || $slots.metaInfo"
           v-show="metaPanelOpen"
           class="MetaPanel-panel col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid bg-gray-light pb-3 lg:pb-6"
         >
           <div
             class="container col-start-container lg:col-start-indent-col-2 col-end-container px-8 lg:px-[3rem] xl:px-[5.8rem]"
           >
-            <div
-              class="pt-6 lg:pt-7"
-              :class="borderClass"
-            >
+            <div :class="borderClass">
+              <div v-if="$slots.metaInfo">
+                <slot name="metaInfo" />
+              </div>
               <div
-                class="text-subtitle mb-5"
-                :class="headingClass"
+                v-if="standards"
+                class="pt-6 lg:pt-7"
               >
-                Standards
-                <span class="sr-only">.</span>
-              </div>
-              <div class="w-full lg:grid grid-cols-2 lg:gap-6 xl:gap-10">
-                <div v-if="standardsEla">
-                  <div class="text-base font-semibold text-gray-dark mb-4">
-                    English Language Arts Standards (CCSS - ELA)
-                  </div>
+                <div
+                  class="text-subtitle mb-5"
+                  :class="headingClass"
+                >
+                  Standards
                   <span class="sr-only">.</span>
-                  <MetaPanelAccordion
-                    :standards="standardsEla"
-                    class="mb-6"
-                  />
                 </div>
-                <div v-if="standardsMath">
-                  <div class="text-base font-semibold text-gray-dark mb-4">
-                    Math Standards (CCSS - Math)
+                <div class="w-full lg:grid grid-cols-2 lg:gap-6 xl:gap-10">
+                  <div v-if="standardsEla">
+                    <div class="text-base font-semibold text-gray-dark mb-4">
+                      English Language Arts Standards (CCSS - ELA)
+                    </div>
+                    <span class="sr-only">.</span>
+                    <MetaPanelAccordion
+                      :standards="standardsEla"
+                      class="mb-6"
+                    />
                   </div>
-                  <span class="sr-only">.</span>
-                  <MetaPanelAccordion
-                    :standards="standardsMath"
-                    class="mb-6"
-                  />
-                </div>
-                <div v-if="standardsNgss">
-                  <div class="text-base font-semibold text-gray-dark mb-4">
-                    Science Standards (NGSS)
+                  <div v-if="standardsMath">
+                    <div class="text-base font-semibold text-gray-dark mb-4">
+                      Math Standards (CCSS - Math)
+                    </div>
+                    <span class="sr-only">.</span>
+                    <MetaPanelAccordion
+                      :standards="standardsMath"
+                      class="mb-6"
+                    />
                   </div>
-                  <span class="sr-only">.</span>
-                  <MetaPanelAccordion
-                    :standards="standardsNgss"
-                    class="mb-6"
-                  />
-                </div>
-                <div v-if="standardsIste">
-                  <div class="text-base font-semibold text-gray-dark mb-4">
-                    Technology Standards (ISTE)
+                  <div v-if="standardsNgss">
+                    <div class="text-base font-semibold text-gray-dark mb-4">
+                      Science Standards (NGSS)
+                    </div>
+                    <span class="sr-only">.</span>
+                    <MetaPanelAccordion
+                      :standards="standardsNgss"
+                      class="mb-6"
+                    />
+                  </div>
+                  <div v-if="standardsIste">
+                    <div class="text-base font-semibold text-gray-dark mb-4">
+                      Technology Standards (ISTE)
+                    </div>
+                    <span class="sr-only">.</span>
+                    <MetaPanelAccordion :standards="standardsIste" />
                   </div>
-                  <span class="sr-only">.</span>
-                  <MetaPanelAccordion :standards="standardsIste" />
                 </div>
               </div>
             </div>

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -166,7 +166,10 @@ export default defineComponent({
               } else if (handle.startsWith('edu_resources')) {
                 date = null
                 primarySubject = page._source[handle + '__primary_subject'] as PrimarySubjectObject
-                if (page._source[handle + '__grade_levels']) {
+                if (
+                  page._source[handle + '__grade_levels'] &&
+                  handle !== 'edu_resources_edustudentprojectpage'
+                ) {
                   gradeLevels = [] as GradeLevelsObject[]
                   // @ts-expect-error
                   page._source[handle + '__grade_levels'].forEach((level) => {

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

@@ -62,7 +62,7 @@ export const BaseStory = {
 
       studentProject: {
         title: 'Student Project',
-        urlPath: '/path-to-student-project'
+        url: '/path-to-student-project'
       },
 
       primarySubject: {

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