@explorer-1/vue 0.2.18 → 0.2.20

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -28,6 +28,7 @@
       <div v-else></div>
       <CalendarChip
         v-if="
+          showCalendarChip &&
           themeStore.isEdu &&
           ((theItem as EventCardObject).startDate || (theItem as EventCardObject).ongoing)
         "
@@ -41,7 +42,7 @@
       class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform ThemeVariantLight"
       :class="contentClasses"
     >
-      <template v-if="metadataType && metadataAttrs">
+      <template v-if="metadataAttrs">
         <BasePill
           :class="{ 'mb-2': !large, 'mb-4': large }"
           size="sm"
@@ -50,6 +51,20 @@
           {{ (theItem as EventCardObject).eventType }}
         </BasePill>
       </template>
+      <template
+        v-else-if="themeStore.isEdu && theItem.parent?.title && theItem.parent?.title !== 'EDU'"
+      >
+        <div class="flex flex-wrap">
+          <p
+            class="text-subtitle"
+            :class="small ? 'mb-2' : 'mb-4'"
+          >
+            <span class="edu:text-primary ThemeVariantLight">
+              {{ (theItem as Card).parent?.title }}
+            </span>
+          </p>
+        </div>
+      </template>
       <template v-else>
         <div class="flex flex-wrap">
           <p
@@ -96,18 +111,20 @@
         {{ theItem.summary }}
       </p>
       <div
-        v-if="metadataType && metadataAttrs"
+        v-if="metadataAttrs"
         :class="{ 'mt-4': large, 'mt-2 mb-1': medium, 'mt-1 mb-0': small }"
       >
         <MetadataEvent
           v-if="metadataType === 'EDUEventPage'"
           :event="theItem"
+          :show-time="false"
+          :show-location="false"
           compact
         />
         <MetadataEduResource
-          v-else-if="metadataType === 'EDUExplainerArticlePage'"
+          v-else-if="metadataAttrs.type === 'resource'"
           :resource="theItem as EduResourceCardObject"
-          :variant="eduMetadataDictionaryComputed[metadataType].variant"
+          :variant="metadataAttrs.variant"
           compact
         />
       </div>
@@ -115,11 +132,7 @@
     <div
       v-if="!large"
       class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
-      :class="
-        metadataType && metadataAttrs
-          ? `text-${eduMetadataDictionaryComputed[metadataType].variant}`
-          : 'text-primary'
-      "
+      :class="metadataAttrs ? `text-${metadataAttrs.variant}` : 'text-primary'"
     >
       <IconArrow />
     </div>
@@ -234,6 +247,10 @@ export default defineComponent({
       type: (String as PropType<HeadingLevel>) || null,
       required: false,
       default: undefined
+    },
+    showCalendarChip: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -258,9 +275,6 @@ export default defineComponent({
       }
       return classes
     },
-    eduMetadataDictionaryComputed() {
-      return eduMetadataDictionary
-    },
     // to allow for various data shapes and sources
     // use-case: content pages provide this.data.page with non-page siblings (i.e. external link cards)
     // use-case: search and listing pages pass individual props
@@ -304,12 +318,14 @@ export default defineComponent({
       return undefined
     },
     metadataType() {
+      // checks that this is a valid metadata type
       const validContentTypes = Object.keys(eduMetadataDictionary)
       return this.data?.page?.__typename && validContentTypes.includes(this.data?.page?.__typename)
         ? this.data?.page?.__typename
         : undefined
     },
     metadataAttrs() {
+      // retrieves attributes for that metadata type
       if (this.metadataType) {
         return eduMetadataDictionary[this.metadataType]
       }

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -166,6 +166,15 @@
         <BlockIframeEmbed :data="block" />
       </LayoutHelper>
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'GitHubGistBlock'"
+        :key="`GitHubGistBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockGist :data="block" />
+      </LayoutHelper>
+
       <LayoutHelper
         v-else-if="block.blockType == 'TableBlock'"
         :key="`tableBlock${index}`"
@@ -233,6 +242,7 @@ import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
 import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockGist from './../BlockGist/BlockGist.vue'
 import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
@@ -268,6 +278,7 @@ export default defineComponent({
     BlockText,
     BlockTwitterEmbed,
     BlockIframeEmbed,
+    BlockGist,
     BlockVideo,
     BlockVideoEmbed,
     BlockAnchor
@@ -279,6 +290,7 @@ export default defineComponent({
       default: 'default',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    // eslint-disable-next-line vue/require-default-prop
     data: {
       type: Array as PropType<StreamfieldBlockData[]>,
       required: false

package/src/components/CalendarButton/CalendarButton.vue

@@ -29,10 +29,13 @@ export default defineComponent({
       required: false,
       default: false
     },
-
+    startDate: {
+      type: String,
+      default: undefined
+    },
     startDatetime: {
       type: String,
-      required: true
+      default: undefined
     },
     endDatetime: {
       type: String,
@@ -76,9 +79,12 @@ export default defineComponent({
   methods: {
     init() {
       let recurrence = undefined
-      if (this.endDatetime && this.isAllDay) {
+      if ((this.isAllDay && this.endDatetime) || (this.startDate && this.endDatetime)) {
+        console.log('initing')
         // Calculate how many full days
-        const startDateDayjs = dayjs(this.startDatetime)
+        const startDateDayjs = this.startDatetime
+          ? dayjs(this.startDatetime)
+          : dayjs(this.startDate)
         const endDateDayjs = dayjs(this.endDatetime)
         const difference = endDateDayjs.diff(startDateDayjs, 'day') + 1
         recurrence = { frequency: 'DAILY', interval: 1, count: difference }
@@ -88,7 +94,11 @@ export default defineComponent({
         title: this.title ? this.title : undefined,
         location: this.location ? this.location : undefined,
         description: this.icsDescription,
-        start: new Date(this.startDatetime),
+        start: this.startDatetime
+          ? new Date(this.startDatetime)
+          : this.startDate
+            ? new Date(this.startDate)
+            : new Date(),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }

package/src/components/MetaPanel/MetaPanel.stories.js

@@ -28,8 +28,8 @@ export const BaseStory = {
     negativeTop: true,
     negativeBottom: true,
     button: 'View Standards',
-    primarySubject: 'Math',
-    additionalSubjects: ['Science'],
+    primarySubject: { subject: 'Math' },
+    additionalSubjects: [{ subject: 'Science' }],
     time: '30mins - hr',
     gradeLevels: [
       { gradeLevel: 'All Ages' },
@@ -46,7 +46,7 @@ export const BaseStory = {
         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.',
+            '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. Test<sub>render</sub> and test<sup>render</sup>. ',
           domain: {
             domain: 'College and Career Readiness Anchor Standards for Reading'
           },

package/src/components/MetaPanelAccordion/MetaPanelAccordion.vue

@@ -33,7 +33,7 @@ const { standards } = reactive(props)
       </template>
       <template #panelContents>
         <div class="pl-3 pb-3 pr-8 text-sm text-gray-dark">
-          <p>{{ item.standard.definition }}</p>
+          <p v-html="item.standard.definition"></p>
         </div>
       </template>
     </BaseAccordionItem>

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -13,13 +13,17 @@ interface MetadataEventProps {
   event: EventCardObject
   compact?: boolean
   allowBreak?: boolean
+  showLocation?: boolean
+  showTime?: boolean
 }
 
 // define props
 const props = withDefaults(defineProps<MetadataEventProps>(), {
   event: undefined,
   compact: false,
-  allowBreak: false
+  allowBreak: false,
+  showLocation: true,
+  showTime: true
 })
 
 const startDatetimeForFormatting = computed(() => {
@@ -35,7 +39,7 @@ const formattedEventDates = computed((): string | undefined => {
     : undefined
 })
 const displayTime = computed((): string => {
-  if (!props.event.customDate) {
+  if (!props.event.customDate && props.event.startTime && props.event.endTime) {
     const time =
       props.event && startDatetimeForFormatting.value
         ? mixinFormatEventTimeInHoursAndMinutes(
@@ -71,60 +75,62 @@ const locationName = computed(() => {
       }}</span>
     </div>
     <div
-      v-show="displayTime"
+      v-show="displayTime && showTime"
       class="MetadataEventItem"
     >
       <IconTime class="MetadataEventIcon text-[1.15em]" />
       <span>{{ displayTime }}</span>
     </div>
     <!--Virtual location -->
-    <div
-      v-if="props.event.isVirtualEvent && props.event.locationLink && !props.compact"
-      itemprop="location"
-      itemscope
-      itemtype="https://schema.org/VirtualLocation"
-      class="MetadataEventItem"
-    >
-      <link
-        itemprop="url"
-        :href="props.event.locationLink"
-      />
-      <meta
-        itemprop="name"
-        :content="locationName"
-      />
-      <IconLocation class="MetadataEventIcon text-[1.1em]" />
-      <BaseLink
-        variant="none"
-        class="text-action"
-        :href="props.event.locationLink"
-        external-target-blank
-      >
-        {{ locationName }}
-      </BaseLink>
-    </div>
-    <!-- Normal location -->
-    <div
-      v-else-if="locationName"
-      class="MetadataEventItem"
-    >
-      <meta
-        v-if="!props.compact"
+    <template v-if="showLocation">
+      <div
+        v-if="props.event.isVirtualEvent && props.event.locationLink && !props.compact"
         itemprop="location"
-        :content="locationName"
-      />
-      <IconLocation class="MetadataEventIcon text-[1.2em]" />
-      <BaseLink
-        v-if="props.event.locationLink && !props.compact"
-        variant="none"
-        class="text-action"
-        :href="props.event.locationLink"
-        external-target-blank
+        itemscope
+        itemtype="https://schema.org/VirtualLocation"
+        class="MetadataEventItem"
       >
-        {{ locationName }}
-      </BaseLink>
-      <span v-else>{{ locationName }}</span>
-    </div>
+        <link
+          itemprop="url"
+          :href="props.event.locationLink"
+        />
+        <meta
+          itemprop="name"
+          :content="locationName"
+        />
+        <IconLocation class="MetadataEventIcon text-[1.1em]" />
+        <BaseLink
+          variant="none"
+          class="text-action"
+          :href="props.event.locationLink"
+          external-target-blank
+        >
+          {{ locationName }}
+        </BaseLink>
+      </div>
+      <!-- Normal location -->
+      <div
+        v-else-if="locationName"
+        class="MetadataEventItem"
+      >
+        <meta
+          v-if="!props.compact"
+          itemprop="location"
+          :content="locationName"
+        />
+        <IconLocation class="MetadataEventIcon text-[1.2em]" />
+        <BaseLink
+          v-if="props.event.locationLink && !props.compact"
+          variant="none"
+          class="text-action"
+          :href="props.event.locationLink"
+          external-target-blank
+        >
+          {{ locationName }}
+        </BaseLink>
+        <span v-else>{{ locationName }}</span>
+      </div>
+    </template>
   </div>
 </template>
 <style lang="scss">

package/src/constants.ts

@@ -3,10 +3,17 @@ import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
 export const eduMetadataDictionary: PillDictionaryInterface = {
   EDUExplainerArticlePage: {
     label: 'Explainer Article',
-    variant: 'secondary'
+    variant: 'secondary',
+    type: 'resource'
+  },
+  EDULessonPage: {
+    label: 'Lesson',
+    variant: 'primary',
+    type: 'resource'
   },
   EDUEventPage: {
-    variant: 'primary'
+    variant: 'primary',
+    type: 'event'
   }
 }
 
@@ -16,5 +23,6 @@ export const searchContentTypeToPageType: DictionaryInterface = {
   events_eventpage: 'EventPage',
   missions_mission: 'Mission',
   eduevents_edueventpage: 'EDUEventPage',
-  eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage'
+  eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
+  eduresources_edulessonpage: 'EDULessonPage'
 }

package/src/interfaces.ts

@@ -103,6 +103,9 @@ export interface FormOption {
 export interface Card {
   __typename?: string
   type?: string
+  parent?: {
+    title: string
+  }
   url?: string
   externalLink?: string
   page?: Card | EventCardObject | EduResourceCardObject
@@ -192,6 +195,7 @@ export type MetadataType = 'event' | 'resource'
 export interface LabelObject {
   label?: string
   variant: string
+  type?: MetadataType
 }
 export interface PillDictionaryInterface {
   [EDUExplainerArticlePage: string]: LabelObject

package/src/templates/PageContent/PageContent.vue

@@ -43,6 +43,11 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useThemeStore),
+    displayLabel() {
+      return this.themeStore.isEdu && this.data?.parent?.title && this.data?.parent?.title !== 'EDU'
+        ? this.data?.parent?.title
+        : this.data?.displayLabel
+    },
     heroInline() {
       if (this.data?.heroPosition === 'inline') {
         return true
@@ -94,7 +99,7 @@ export default defineComponent({
     >
       <DetailHeadline
         :title="data.title"
-        :label="data.displayLabel"
+        :label="displayLabel"
         :class="{ 'sr-only': hideH1 }"
       />
       <ShareButtonsEdu

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

@@ -28,6 +28,6 @@ export default {
 export const BaseStory = {
   name: 'PageContent',
   args: {
-    data: ContentPageData
+    data: { ...ContentPageData, displayLabel: undefined, parent: { title: 'Parent Page' } }
   }
 }

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

@@ -62,7 +62,6 @@ const PageEduEventDetailData = {
     detailUrl: null
   },
   heroConstrain: false,
-  heroPosition: 'inline',
   thumbnailImage: {
     alt: '',
     original: 'https://picsum.photos/512/288'
@@ -134,6 +133,19 @@ export const BaseStory = {
   args: { data: PageEduEventDetailData }
 }
 
+export const NoTimes = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      endDate: '2024-08-10',
+      endDatetime: '2024-08-10T23:59:59.999999-07:00',
+      endTime: null,
+      startDate: '2024-08-08',
+      startDatetime: null,
+      startTime: null
+    }
+  }
+}
 export const CustomDate = {
   args: {
     data: {

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -1,10 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="PageEduEventDetail ThemeVariantLight"
-    :class="{
-      'pt-5 lg:pt-12': heroIsInline
-    }"
+    class="PageEduEventDetail ThemeVariantLight pt-5 lg:pt-12"
     itemscope
     itemtype="http://schema.org/Event"
   >
@@ -28,23 +25,6 @@
       itemprop="description"
       :content="data.summary || data.body"
     />
-    <div
-      v-if="!heroIsInline"
-      class="relative max-w-screen-3xl mx-auto -mt-1"
-    >
-      <!-- hero image -->
-      <HeroMedia
-        class="md:mb-12 lg:mb-18 mb-10"
-        :image="data.eventImage"
-        :constrain="data.heroConstrain"
-      />
-      <CalendarChip
-        v-if="startDatetimeForFormatting"
-        :start-date="startDatetimeForFormatting"
-        :end-date="data.endDatetime"
-        :ongoing="data.ongoing"
-      />
-    </div>
     <LayoutHelper
       indent="col-2"
       class="mb-6 lg:mb-12"
@@ -83,7 +63,7 @@
 
     <LayoutHelper indent="col-2">
       <EventDetailHero
-        v-if="heroIsInline"
+        v-if="data?.eventImage"
         :image="data.eventImage"
         :start-date="startDatetimeForFormatting"
         :end-date="data.endDate"
@@ -121,7 +101,8 @@
             <!-- Todo IF VIRTUAL EVENT passes url as string to location prop -->
             <!-- location= location name and link -->
             <CalendarButton
-              v-if="data.startDatetime"
+              v-if="(data.startDatetime || data.endDatetime) && !data.ongoing"
+              :start-date="data.startDate"
               :start-datetime="data.startDatetime"
               :end-datetime="data.endDatetime ? data.endDatetime : null"
               :title="data.title ? data.title : null"
@@ -281,7 +262,6 @@ import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BasePill from './../../../components/BasePill/BasePill.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import EventDetailHero from './../../../components/EventDetailHero/EventDetailHero.vue'
-import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import BaseButton from './../../../components/BaseButton/BaseButton.vue'
 import CalendarButton from './../../../components/CalendarButton/CalendarButton.vue'
@@ -291,7 +271,6 @@ import BaseImage from './../../../components/BaseImage/BaseImage.vue'
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
-import CalendarChip from './../../../components/CalendarChip/CalendarChip.vue'
 import MetadataEvent from './../../../components/MetadataEvent/MetadataEvent.vue'
 
 // @ts-ignore
@@ -305,7 +284,6 @@ export default defineComponent({
     BasePill,
     ShareButtonsEdu,
     EventDetailHero,
-    HeroMedia,
     BaseLink,
     BaseButton,
     CalendarButton,
@@ -315,7 +293,6 @@ export default defineComponent({
     BlockRelatedLinks,
     BlockLinkCarousel,
     BlockText,
-    CalendarChip,
     MetadataEvent
   },
   props: {
@@ -334,9 +311,6 @@ export default defineComponent({
     startDatetimeForFormatting(): string {
       return this.data?.startDatetime || this.data?.startDate
     },
-    heroIsInline(): boolean {
-      return this.data?.heroPosition === 'inline'
-    },
     relatedEvents(): EventCardObject[] {
       // mimic the data shape of a PageChooserBlock array
       const mapped = this.data?.relatedEvents

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

@@ -17,6 +17,7 @@ import PageEduLesson from './PageEduLesson.vue'
 export default {
   title: 'Templates/EDU/PageEduLesson',
   component: PageEduLesson,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
@@ -55,7 +56,6 @@ export const BaseStory = {
         }
       ],
       heroConstrain: true,
-      heroPosition: 'full_bleed',
 
       studentProject: {
         title: 'Student Project',
@@ -207,14 +207,6 @@ export const BaseStory = {
     }
   }
 }
-export const InlineHero = {
-  args: {
-    data: {
-      ...BaseStory.args.data,
-      heroPosition: 'inline'
-    }
-  }
-}
 
 export const HeroCarousel = {
   args: {
@@ -229,7 +221,6 @@ export const HeroImageComparison = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline',
       hero: [
         {
           ...BlockImageComparisonData
@@ -259,7 +250,6 @@ export const HeroVideoEmbed = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline',
       hero: [
         {
           ...BlockVideoEmbedData.data,
@@ -277,7 +267,6 @@ export const HeroIframeEmbed = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline',
       hero: [
         {
           ...BlockIframeEmbedData