@explorer-1/vue 1.1.17 → 1.1.19

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @explorer-1/vue
 
+## 1.1.19
+
+### Patch Changes
+
+- 9a56758: Adds a custom wait time label prop to PageSiteExploreApp. This allows fetching an updated value.
+- ae5fb75: Fixing bottom margin of media hero on Explore JPL content template"
+
+## 1.1.18
+
+### Patch Changes
+
+- 008fc92: Fixing NuxtLink resolution error in BaseLink
+
 ## 1.1.17
 
 ### Patch Changes

package/package.json

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

package/src/components/BaseLink/BaseLink.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue'
+import { defineComponent, resolveComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import { eventBus } from './../../utils/eventBus'
@@ -148,6 +148,10 @@ export default defineComponent({
   ],
   computed: {
     ...mapStores(useThemeStore),
+    dynamicLinkComponent() {
+      // Resolves the NuxtLink component for Vue 3's dynamic <component> binding
+      return this.customElementType || resolveComponent('NuxtLink')
+    },
     computedVariants() {
       if (this.usePrimaryColor) {
         return primaryColorVariants
@@ -271,7 +275,7 @@ export default defineComponent({
   <div>
     <!-- annoyingly repetive due to complexities around `to` and @click.native -->
     <component
-      :is="customElementType || 'nuxt-link'"
+      :is="dynamicLinkComponent"
       v-if="computedTo"
       class="group"
       :class="computedClass"

package/src/templates/explore-jpl/PageContentExploreApp/PageContentExploreApp.stories.js

@@ -100,3 +100,14 @@ export const CustomNav = {
     }
   }
 }
+
+export const CustomNavWithHero = {
+  args: {
+    data: {
+      ...ExploreAppContentPageData,
+      breadcrumb: NavSecondaryData.breadcrumb,
+      heroPosition: 'full_bleed',
+      heroImage: HeroMediaData.image
+    }
+  }
+}

package/src/templates/explore-jpl/PageContentExploreApp/PageContentExploreApp.vue

@@ -56,7 +56,7 @@ const heroTitle = computed(() => {
         />
         <HeroMedia
           v-else-if="!heroTitle && data.heroImage && !heroInline"
-          class="md:mb-0 mb-10"
+          :class="data.breadcrumb ? 'mb-0' : 'md:mb-0 mb-10'"
           :image="data.heroImage"
           :caption="data.heroImageCaption"
           :display-caption="!data.heroImageCaption ? false : true"

package/src/templates/explore-jpl/PageSiteExploreApp/PageSiteExploreApp.stories.js

@@ -99,3 +99,10 @@ export const BaseStory = {
     data: ExploreAppSitePageData
   }
 }
+// stories
+export const CustomWaitTime = {
+  args: {
+    data: ExploreAppSitePageData,
+    customWaitTimeLabel: 'Custom wait time'
+  }
+}

package/src/templates/explore-jpl/PageSiteExploreApp/PageSiteExploreApp.vue

@@ -22,6 +22,11 @@ const props = defineProps({
   data: {
     type: Object as () => PageObject,
     default: undefined
+  },
+  /** used to override wait time in MetaDataStacked */
+  customWaitTimeLabel: {
+    type: String,
+    default: undefined
   }
 })
 const { data } = reactive(props)
@@ -60,7 +65,7 @@ const mapPath = computed(() => {
           <MetadataStacked
             :location="data.location"
             :location-icon="data?.mapIcon?.url"
-            :wait="data?.waitTimeLabel"
+            :wait="customWaitTimeLabel || data?.waitTimeLabel"
           />
         </LayoutHelper>