@explorer-1/vue 0.2.19 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseTimer/BaseTimer.vue

@@ -52,11 +52,7 @@
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import dayjs, { type Dayjs } from 'dayjs'
-import duration, { type Duration } from 'dayjs/plugin/duration.js'
-import minMax from 'dayjs/plugin/minMax.js'
-
-dayjs.extend(duration)
-dayjs.extend(minMax)
+import { type Duration } from 'dayjs/plugin/duration.js'
 
 const calculateDuration = (start: Dayjs): Duration | undefined => {
   // Use round seconds so the datetime string stays valid and can be read by screen readers.

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -129,6 +129,54 @@ export const EventItem = {
     }
   }
 }
+export const EventItemWithChip = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    showCalendarChip: true,
+    data: {
+      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'
+      }
+    }
+  }
+}
+export const EduLesson = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    data: {
+      page: {
+        __typename: 'EDULessonPage',
+        ...BlockLinkCardData.data,
+        primarySubject: {
+          subject: 'Math'
+        },
+        gradeLevels: [
+          { gradeLevel: 'K' },
+          { gradeLevel: '1' },
+          { gradeLevel: '2' },
+          { gradeLevel: '8' }
+        ]
+      }
+    }
+  }
+}
 export const EduExplainerArticle = {
   decorators: [
     () => ({

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/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/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/utils/dayjs.js

@@ -3,11 +3,14 @@ import updateLocale from 'dayjs/plugin/updateLocale.js'
 import localizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-
+import duration from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
 // Locales must be imported manually
 // see https://github.com/iamkun/dayjs/tree/dev/src/locale
 import 'dayjs/locale/en-gb.js'
 
+dayjs.extend(timezone)
+dayjs.extend(advancedFormat)
 dayjs.extend(localizedFormat)
 dayjs.extend(updateLocale)
 dayjs.updateLocale('en', {
@@ -26,7 +29,8 @@ dayjs.updateLocale('en', {
     'Dec.'
   ]
 })
-dayjs.extend(timezone)
-dayjs.extend(advancedFormat)
+
+dayjs.extend(duration)
+dayjs.extend(minMax)
 
 export default dayjs

package/src/utils/rangeifyGrades.ts

@@ -63,7 +63,7 @@ export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
     const filteredGrades = rangeify(gradesArray.filter(Number.isFinite))
     let preparedGrades: string = ''
     if (filteredGrades?.length) {
-      const gradeString = filteredGrades.length > 1 ? 'Grades: ' : 'Grade: '
+      const gradeString = filteredGrades.length > 0 ? 'Grades: ' : 'Grade: '
       preparedGrades = filteredGrades
         .map((grade, index) => (index === 0 ? gradeString + grade : grade))
         .join(', ')