@explorer-1/vue 0.2.29 → 0.2.30

package/package.json

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

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/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,9 +58,9 @@ 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
@@ -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/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)
     }