@explorer-1/vue 1.1.15 → 1.1.17

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @explorer-1/vue
 
+## 1.1.17
+
+### Patch Changes
+
+- 873cf1d: Fixing bug in AttractionCard with nested BaseLink components
+
+## 1.1.16
+
+### Patch Changes
+
+- b50fa5b: Fixing attraction theme labels'
+
 ## 1.1.15
 
 ### Patch Changes

package/package.json

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

package/src/components/AttractionCard/AttractionCard.vue

@@ -94,7 +94,7 @@ const props = defineProps({
     >
       <div class="col-span-9">
         <div
-          v-if="theme"
+          v-if="props.theme"
           class="text-subtitle-sm md:text-subtitle mb-3 md:mb-5 text-gray-mid-dark"
         >
           {{ props.theme }}
@@ -121,6 +121,7 @@ const props = defineProps({
           </div>
           <BaseLink
             v-if="props.url"
+            custom-element-type="div"
             class="mt-5"
             variant="primary"
             :href="props.url"
@@ -135,7 +136,7 @@ const props = defineProps({
       >
         <BaseImagePlaceholder aspect-ratio="square">
           <BaseImage
-            v-if="props.image.src"
+            v-if="props.image?.src"
             :src="props.image.src.url"
             :width="props.image.src.width"
             :height="props.image.src.height"
@@ -154,6 +155,7 @@ const props = defineProps({
         </div>
         <BaseLink
           v-if="props.url"
+          custom-element-type="div"
           class="mt-5"
           variant="primary"
           :href="props.url"

package/src/components/BaseLink/BaseLink.vue

@@ -30,6 +30,13 @@ export default defineComponent({
     MixinAnimationCaret
   },
   props: {
+    /** Override html element (useful for things that should look like a link but aren't links) */
+    customElementType: {
+      type: String,
+      default: undefined,
+      validator: (prop: string): boolean => ['span', 'button', 'div'].includes(prop)
+    },
+    /** Style of link: primary, secondary, default, none */
     variant: {
       type: String as PropType<VariantsKey>,
       required: false,
@@ -263,7 +270,8 @@ export default defineComponent({
 <template>
   <div>
     <!-- annoyingly repetive due to complexities around `to` and @click.native -->
-    <nuxt-link
+    <component
+      :is="customElementType || 'nuxt-link'"
       v-if="computedTo"
       class="group"
       :class="computedClass"
@@ -302,8 +310,9 @@ export default defineComponent({
       <template v-else>
         <slot></slot>
       </template>
-    </nuxt-link>
-    <a
+    </component>
+    <component
+      :is="customElementType || 'a'"
       v-else-if="computedHref"
       :href="computedHref"
       class="group"
@@ -341,6 +350,6 @@ export default defineComponent({
       <template v-else>
         <slot></slot>
       </template>
-    </a>
+    </component>
   </div>
 </template>

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -283,7 +283,7 @@ export default defineComponent({
                   : undefined
               page.theme =
                 handle === 'explore_jpl_sites_explorejplsite'
-                  ? page._source[handle + '__theme_type_filter']
+                  ? page._source[handle + '__theme_type_label']
                   : undefined
               if (image) {
                 page.image = {

package/src/interfaces.ts

@@ -358,6 +358,7 @@ export interface PageObject {
   waitTimeLabel?: string
   relatedPagesForMoreSection?: any
   id?: string
+  themeTypeLabel?: string
 }
 
 export interface EduResourcesSubject {

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

@@ -22,6 +22,7 @@ export const ExploreAppSitePageData = {
   title: 'Sites',
   displayLabel: 'Explore JPL',
   showShareLinks: false,
+  themeTypeLabel: 'Missions That Changed the World',
   thumbnailImage: {
     original: 'https://picsum.photos/512/288',
     src: {

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

@@ -54,6 +54,7 @@ const mapPath = computed(() => {
         <LayoutHelper indent="col-2">
           <DetailHeadline
             :title="data.title"
+            :label="data.themeTypeLabel"
             class="my-5 lg:mt-10"
           />
           <MetadataStacked