@explorer-1/vue 0.2.28 → 0.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "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.8"
+    "@explorer-1/common": "1.1.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/AboutTheAuthor/AboutTheAuthor.vue

@@ -28,7 +28,7 @@ const headingString = computed(() => {
 </script>
 <template>
   <div class="AboutTheAuthor">
-    <h3 class="text-h4 sm:ml-[130px] pl-10 mb-6">
+    <h3 class="text-h4 sm:ml-[130px] sm:pl-10 mb-6">
       {{ headingString }}
     </h3>
     <template

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -61,7 +61,7 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
         >
           <component
             :is="headingLevel"
-            class="!font-medium"
+            class="!font-normal !tracking-normal"
           >
             <button
               v-bind-once="{ id: headingId, 'aria-controls': panelId }"

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -18,7 +18,7 @@
       />
     </div>
     <MixinCarousel
-      class="md:hidden sm:-ml-10 py-14 lg:py-10 -mt-10 overflow-x-hidden"
+      class="md:hidden py-14 lg:py-10 -mt-10 overflow-x-hidden"
       indent="col-1"
       :slides-per-view="3"
       no-links

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -271,7 +271,7 @@ export default defineComponent({
       } else if (this.medium) {
         classes = 'can-hover:group-hover:-translate-y-3 edu:can-hover:group-hover:-translate-y-2'
       } else if (this.large) {
-        classes = 'sm:pl-8 sm:w-2/3'
+        classes = 'sm:pl-8 sm:w-2/3 lg:pt-2'
       }
       return classes
     },

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -202,9 +202,11 @@
       <div
         v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
         :key="`cardGridBlock${index}`"
-        class="lg:mb-18 mb-10"
+        class="LayoutHelper md:BaseGrid md:container md:mx-auto lg:mb-18 mb-10"
       >
-        <BlockCardGrid :cards="block.items" />
+        <div class="lg:col-start-2 lg:col-end-12 md:col-span-full md:px-4 px-0 relative">
+          <BlockCardGrid :cards="block.items" />
+        </div>
       </div>
 
       <div
@@ -218,7 +220,7 @@
       <LayoutHelper
         v-else-if="block.blockType === 'LinkCardListBlock' && block.blocks?.length"
         :key="`linkCardListBlock${index}`"
-        indent="col-3"
+        indent="col-2"
         class="lg:mb-18 mb-10"
       >
         <BlockLinkCardList :items="block.blocks" />

package/src/components/CalendarButton/CalendarButton.vue

@@ -80,11 +80,10 @@ export default defineComponent({
     init() {
       let recurrence = undefined
       if ((this.isAllDay && this.endDatetime) || (this.startDate && this.endDatetime)) {
-        console.log('initing')
         // Calculate how many full days
         const startDateDayjs = this.startDatetime
           ? dayjs(this.startDatetime)
-          : dayjs(this.startDate)
+          : dayjs(this.startDate).tz('America/Los_Angeles')
         const endDateDayjs = dayjs(this.endDatetime)
         const difference = endDateDayjs.diff(startDateDayjs, 'day') + 1
         recurrence = { frequency: 'DAILY', interval: 1, count: difference }
@@ -95,9 +94,11 @@ export default defineComponent({
         location: this.location ? this.location : undefined,
         description: this.icsDescription,
         start: this.startDatetime
-          ? new Date(this.startDatetime)
+          ? // @ts-ignore
+            new Date(dayjs(this.startDatetime))
           : this.startDate
-            ? new Date(this.startDate)
+            ? // @ts-ignore
+              new Date(dayjs(this.startDate).tz('America/Los_Angeles'))
             : new Date(),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence

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

@@ -30,7 +30,7 @@ export const BaseStory = {
     button: 'View Standards',
     primarySubject: { subject: 'Math' },
     additionalSubjects: [{ subject: 'Science' }],
-    time: '30mins - hr',
+    time: { time: '30mins - hr' },
     gradeLevels: [
       { gradeLevel: 'All Ages' },
       { gradeLevel: 'K' },

package/src/components/MetaPanel/MetaPanel.vue

@@ -102,7 +102,7 @@ const standardsEla = computed(() => {
   return sortedStandards.value ? sortedStandards.value['ccss_english_language_arts'] : undefined
 })
 const standardsMath = computed(() => {
-  return sortedStandards.value ? sortedStandards.value['ccss_math'] : undefined
+  return sortedStandards.value ? sortedStandards.value['ccss_maths'] : undefined
 })
 const standardsNgss = computed(() => {
   return sortedStandards.value ? sortedStandards.value['ngss'] : undefined
@@ -128,7 +128,7 @@ const standardsIste = computed(() => {
       >
         <div class="col-start-container lg:col-start-indent-col-2 col-end-container">
           <div class="MetaPanel-heading lg:grid grid-cols-12 col-end-container container">
-            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-2 py-6 lg:py-10">
+            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-6 py-6 lg:py-10">
               <MetaPanelItems
                 :theme="theme"
                 :primary-subject="primarySubject"
@@ -139,7 +139,7 @@ const standardsIste = computed(() => {
             </div>
             <div
               v-if="button"
-              class="ThemeVariantLight col-start-10 col-end-13 pl-4 pt-4 pb-6 lg:py-10 lg:text-right"
+              class="ThemeVariantLight col-start-10 col-end-13 pl-4 lg:pl-0 pt-4 pb-6 lg:pr-4 xl:pr-10 2xl:pr-0 lg:py-10 lg:text-right"
             >
               <BaseButton
                 variant="secondary"

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<MetaPanelProps>(), {
 const { theme, primarySubject, additionalSubjects, gradeLevels, time } = reactive(props)
 
 const audience = computed(() => {
-  return gradeLevels ? rangeifyGrades(gradeLevels) : undefined
+  return gradeLevels ? rangeifyGrades(gradeLevels, false) : undefined
 })
 
 const subjects = computed(() => {
@@ -85,11 +85,11 @@ const themeVariant = computed(() => {
 
 <template>
   <div
-    class="MetaPanelItems md:flex gap-10"
-    :class="{ 'justify-between': subjects && audience && time }"
+    class="MetaPanelItems md:flex gap-10 pr-5 sm:pr-10 lg:pr-20"
+    :class="{ 'justify-between': subjects && audience && time?.time }"
   >
     <div
-      v-if="subjects"
+      v-if="primarySubject?.subject"
       class="MetaPanelItem"
     >
       <div
@@ -103,14 +103,13 @@ const themeVariant = computed(() => {
           class="MetaPanelItem-heading"
           :class="`${themeVariant} ${headingColor}`"
         >
-          Subjects
-          <span class="sr-only">.</span>
+          Subject
         </div>
         <div
           class="MetaPanelItem-content"
           :class="textColor"
         >
-          {{ subjects }}
+          {{ primarySubject.subject }}
         </div>
       </div>
     </div>
@@ -130,7 +129,6 @@ const themeVariant = computed(() => {
           :class="`${themeVariant} ${headingColor}`"
         >
           Grade Levels
-          <span class="sr-only">.</span>
         </div>
         <div
           class="MetaPanelItem-content"
@@ -156,7 +154,6 @@ const themeVariant = computed(() => {
           :class="`${themeVariant} ${headingColor}`"
         >
           Time Required
-          <span class="sr-only">.</span>
         </div>
         <div
           class="MetaPanelItem-content"

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -61,7 +61,7 @@ const time = computed(() => {
       <span>{{ audience }}</span>
     </div>
     <div
-      v-if="time"
+      v-if="time && !compact"
       class="MetadataEduResourceItem"
     >
       <IconTime

package/src/components/MetadataEvent/MetadataEvent.stories.js

@@ -12,12 +12,14 @@ export const MetadataEventData = {
   event: {
     title: 'Event title',
     location: 'Location',
-    startDate: '2021-11-11',
-    startDatetime: '2021-11-11T00:00:00-08:00',
-    endDate: '2021-11-11',
+    startDate: '2024-08-08',
+    startDatetime: '2024-08-08T14:00:00-07:00',
+    startTime: '15:00:00',
+    endDate: '2024-08-08',
+    endDatetime: '2024-08-08T22:00:00-07:00',
+    endTime: '22:00:00',
     ongoing: false,
     isVirtualEvent: false,
-    endDatetime: '2021-11-11T23:59:59.999999-08:00',
     locationName: 'Webcast',
     locationLink: 'https://www.nasa.gov',
     customDate: undefined

package/src/components/NavDesktop/NavDesktop.vue

@@ -246,14 +246,17 @@ export default defineComponent({
     // to determine active class on menu links and 'more' menu links
     checkActive(item: LinkObject) {
       const urlKey = this.getUrlKey(item)
-      if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
+      if (urlKey && this.breadcrumb?.menu_links) {
         // key into the breadcrumbs for each section
-        const objArray = this.breadcrumb.menu_links[urlKey]
+        const sectionLinks = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active
-        const isActive = objArray.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        const isActive = sectionLinks.some((link: BreadcrumbPathObject) =>
+          mixinIsActivePath(link.path)
+        )
         if (isActive) {
-          mixinUpdateGlobalChildren(this.breadcrumb.menu_links[urlKey])
+          mixinUpdateGlobalChildren(sectionLinks)
         }
+        console.log(isActive)
         return isActive
       }
       return false

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -5,6 +5,7 @@
     ref="NavJumpMenuRef"
     class="NavJumpMenu -hide-until-threshold"
     :invert="invert"
+    jump-menu
   >
     <template v-for="(item, index) in theBreadcrumbs">
       <template v-if="item.children && item.children.length > 0">

package/src/components/NavSecondary/NavSecondary.vue

@@ -79,6 +79,10 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    jumpMenu: {
+      type: Boolean,
+      default: false
     }
   },
   data(): {
@@ -101,9 +105,12 @@ export default defineComponent({
       if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
         mixinUpdateSecondary(JSON.parse(this.breadcrumb))
+
         return JSON.parse(this.breadcrumb)
       } else if (this.headerStore) {
-        return this.headerStore.globalChildren
+        if (!this.jumpMenu) {
+          return this.headerStore.globalChildren
+        }
       }
       return undefined
     },
@@ -117,7 +124,9 @@ export default defineComponent({
   mounted() {
     if (this.enabled) {
       // if there is a secondary nav displayed, then don't highlight the primary active item
-      mixinHighlightPrimary(false)
+      if (!this.jumpMenu) {
+        mixinHighlightPrimary(false)
+      }
     }
 
     if (

package/src/interfaces.ts

@@ -223,6 +223,7 @@ export interface PageObject {
   slug: string
   url: string
   title: string
+  readTime?: string
   getTopicsForDisplay?: Topic[]
   showJumpMenu?: boolean
   label?: string

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

@@ -54,6 +54,7 @@ export const BaseStory = {
         },
         alt: 'The alt text'
       },
+      heroSummary: 'Lorem ipsum dolor sit amet consectatur adipscing.',
       heroImageCaption: '<p>Lorem ipsum dolor sit amet</p>',
       heroConstrain: true,
       heroPosition: 'full_bleed',

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -10,12 +10,13 @@ import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelate
 import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+import ShareButtonsEdu from '../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 
 interface PageEduCollectionsDetail extends PageEduResourcesObject {
   heroImage: ImageObject
   heroImageCaption: string
   showMetaPanel: boolean
-  heroSubtitle: string
+  heroSummary: string
 }
 interface PageEduCollectionsDetailProps {
   data?: PageEduCollectionsDetail
@@ -57,16 +58,16 @@ const computedClass = computed((): string => {
       v-if="!heroInline && data.heroImage"
       :title="data.title"
       :image="data.heroImage"
-      :summary="'Test test test lorem ipsum dolor sit amet yep.'"
+      :summary="data.heroSummary"
       :custom-pill-type="data.__typename"
-      :class="!data.showMetaPanel ? 'mb-10 lg:mb-22' : ''"
+      :class="!data.showMetaPanel ? 'mb-10' : ''"
     />
 
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       ref="PageEduCollectionsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this collection"
     />
 
@@ -81,11 +82,18 @@ const computedClass = computed((): string => {
         pill
         pill-color="primary-inverted"
       />
+
+      <ShareButtonsEdu
+        class="mt-4"
+        :title="data.title"
+        :url="data.url"
+      />
     </LayoutHelper>
+
     <MetaPanel
       v-if="data.showMetaPanel"
       theme="primary"
-      :class="{ 'mb-10 lg:mb-14': true }"
+      :class="{ 'mb-10 lg:mb-12': true }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :grade-levels="data.gradeLevels"
@@ -96,7 +104,7 @@ const computedClass = computed((): string => {
     <!-- TODO: put this in a component (exclude layout though) -->
     <LayoutHelper
       v-if="data.heroImage && heroInline"
-      class="lg:mb-22 mb-10"
+      class="mb-10 lg:mb-18"
     >
       <BlockImageStandard
         :data="data.heroImage"
@@ -106,6 +114,19 @@ const computedClass = computed((): string => {
       />
     </LayoutHelper>
 
+    <LayoutHelper
+      v-if="!heroInline"
+      indent="col-2"
+      class="mb-6 lg:mb-12"
+      :class="{ '-mt-4': data.showMetaPanel }"
+    >
+      <ShareButtonsEdu
+        class="mt-4"
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
     <!-- streamfield blocks -->
     <BlockStreamfield :data="data.body" />
 

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -120,9 +120,9 @@ export default defineComponent({
     </LayoutHelper>
 
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this article"
     />
     <!-- inline hero content -->

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

@@ -326,7 +326,6 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       ref="PageEduLessonJumpMenu"
       :title="data.title"
       :blocks="consolidatedBlocks"
-      :enabled="true"
       dropdown-text="In this lesson"
     />
 

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

@@ -69,10 +69,10 @@ defineExpose({
     itemtype="http://schema.org/Article"
   >
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       ref="PageEduNewsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this news article"
     />
 

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

@@ -42,6 +42,7 @@ export const BaseStory = {
       url: 'http://localhost:3000/edu/resources/teachable-moment',
       pageType: 'EDUTeachableMomentPage',
       contentType: 'edu_resources.EDUTeachableMomentPage',
+      readTime: '5 min read',
       showJumpMenu: true,
       thumbnailImage: {
         __typename: 'CustomImage',

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -67,10 +67,10 @@ const computedClass = computed((): string => {
     :class="computedClass"
   >
     <NavJumpMenu
+      v-if="data.showJumpMenu"
       ref="PageEduTeachableMomentJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="data.showJumpMenu"
       dropdown-text="In this Teachable Moment"
     />
 
@@ -97,6 +97,7 @@ const computedClass = computed((): string => {
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         label="Teachable Moment"
         pill
       />

package/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue

@@ -38,7 +38,7 @@
       <!-- facts -->
       <BlockCardGrid
         v-if="data.facts"
-        class="3xl:col-end-13 xl:col-end-11 md:px-4 lg:px-0 relative col-start-2 col-end-13 px-0 mt-12"
+        class="3xl:col-end-13 xl:col-end-11 md:px-4 lg:px-0 relative sm:col-start-2 sm:col-end-13 px-0 mt-12"
         :cards="data.facts"
       />
     </div>

package/src/utils/dayjs.js

@@ -2,6 +2,7 @@ import dayjs from 'dayjs'
 import updateLocale from 'dayjs/plugin/updateLocale.js'
 import localizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
+import utc from 'dayjs/plugin/utc.js'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
 import duration from 'dayjs/plugin/duration.js'
 import minMax from 'dayjs/plugin/minMax.js'
@@ -10,6 +11,7 @@ import minMax from 'dayjs/plugin/minMax.js'
 import 'dayjs/locale/en-gb.js'
 
 dayjs.extend(timezone)
+dayjs.extend(utc)
 dayjs.extend(advancedFormat)
 dayjs.extend(localizedFormat)
 dayjs.extend(updateLocale)

package/src/utils/mixins.ts

@@ -149,12 +149,16 @@ export const mixinHighlightPrimary = (value: boolean) => {
     */
 export const mixinIsActivePath = (itemPath: string): Boolean => {
   const route = useRoute()
-  const currentPath = route ? route.path : null
-  const path = itemPath
-  const ancestorPath = path ? (path.endsWith('/') ? path : path + '/') : null
+  const currentPath = route ? route.path : false
+  const path = itemPath.startsWith('http') ? itemPath.replace(/^.*\/\/[^/]+/, '') : itemPath
+  const ancestorPath = path ? (path.endsWith('/') ? path : path + '/') : false
+
   if (currentPath && path && ancestorPath) {
     if (currentPath === path) {
       return true
+    } else if (currentPath.startsWith('/edu/events')) {
+      // special treatment since EDU combines News & Events in the main nav
+      return path.startsWith('/edu/news')
     } else {
       return currentPath.startsWith(ancestorPath)
     }

package/src/utils/rangeifyGrades.ts

@@ -47,7 +47,7 @@ const rangeify = (a: number[]): string[] => {
   return res
 }
 
-export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
+export const rangeifyGrades = (gradeLevels: GradeLevelsObject[], showLabel: boolean = true) => {
   if (gradeLevels) {
     const allAgesArray = gradeLevels.map((item) => {
       if (item.gradeLevel === 'All Ages') return item.gradeLevel
@@ -65,7 +65,7 @@ export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
     if (filteredGrades?.length) {
       const gradeString = filteredGrades.length > 0 ? 'Grades ' : 'Grade '
       preparedGrades = filteredGrades
-        .map((grade, index) => (index === 0 ? gradeString + grade : grade))
+        .map((grade, index) => (index === 0 && showLabel ? gradeString + grade : grade))
         .join(', ')
     }