@explorer-1/vue 1.0.6 → 1.1.1

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

@@ -0,0 +1,90 @@
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+
+import PageSiteExploreApp from './PageSiteExploreApp.vue'
+
+export default {
+  title: 'Templates/ExploreJPL/PageSiteExploreApp',
+  component: PageSiteExploreApp,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyRoot'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// data
+export const ExploreAppSitePageData = {
+  id: '156',
+  url: '/slug',
+  title: 'Sites',
+  displayLabel: 'Explore JPL',
+  showShareLinks: false,
+  thumbnailImage: {
+    url: 'https://picsum.photos/512/288',
+    width: 512,
+    height: 288,
+    id: 12345
+  },
+  location: 'Cafe 186',
+  waitTime: '60',
+  waitTimeLabel: '60 minute wait',
+  locationIcon: '',
+  body: [
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    },
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    }
+  ],
+  relatedPagesForMoreSection: [
+    {
+      title: 'Cafeteria 303',
+      url: 'https://www.nasa.gov',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/512/288?random=1',
+          width: 512,
+          height: 288
+        }
+      }
+    },
+    {
+      title: 'Highbay 1',
+      url: 'https://www.nasa.gov',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/512/288?random=2',
+          width: 512,
+          height: 288
+        }
+      }
+    },
+    {
+      title: 'Building 111',
+      url: 'https://www.nasa.gov',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/512/288?random=3',
+          width: 512,
+          height: 288
+        }
+      }
+    },
+    ...BlockLinkCardCarouselData
+  ]
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    data: ExploreAppSitePageData
+  }
+}

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import type { PageObject } from '../../../interfaces'
+import { useThemeStore } from '../../../store/theme'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BaseExploreApp from './../../explore-jpl/BaseExploreApp/BaseExploreApp.vue'
+import BaseButton from '../../../components/BaseButton/BaseButton.vue'
+import BaseLink from '../../../components/BaseLink/BaseLink.vue'
+import MetadataStacked from '../../../components/MetadataStacked/MetadataStacked.vue'
+import IconMap from '../../../components/Icons/IconMap.vue'
+
+const themeStore = useThemeStore()
+const route = useRoute()
+
+const props = defineProps({
+  data: {
+    type: Object as () => PageObject,
+    default: undefined
+  }
+})
+const { data } = reactive(props)
+
+// Convert thumbnailImage data for BlockImageStandard compatibility
+const detailImage = computed(() => {
+  return {
+    src: {
+      url: data?.thumbnailImage?.url!,
+      width: data?.thumbnailImage?.width!,
+      height: data?.thumbnailImage?.height!
+    },
+    srcCropped: {
+      url: data?.thumbnailImage?.url!,
+      width: data?.thumbnailImage?.width!,
+      height: data?.thumbnailImage?.height!
+    }
+  }
+})
+
+// Handle navigating back to Sites page
+const previousPath = computed(() => {
+  try {
+    const path = route.path
+
+    // Split URL segments and remove last item
+    const segements = path.split('/').filter(Boolean)
+    segements.pop()
+
+    // Return Sites path
+    return '/' + segements.join('/')
+  } catch (e) {
+    return '/'
+  }
+})
+
+// Handle opening map to focus on respective site
+const mapPath = computed(() => {
+  try {
+    const path = route.path
+
+    // Split URL segments and remove last 2 items
+    const segements = path.split('/').filter(Boolean)
+    segements.pop()
+    segements.pop()
+
+    // Return map path and id query parameter
+    return '/' + segements.join('/') + '/map/?id=' + data?.id
+  } catch (e) {
+    return ''
+  }
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+  >
+    <BaseExploreApp :nav-data="data.breadcrumb">
+      <template #default>
+        <!-- back nav -->
+        <LayoutHelper
+          indent="col-2"
+          class="mb-5"
+        >
+          <BaseLink
+            class="BackToSitesBtn"
+            variant="primary"
+            :caret-left="true"
+            caret-margin-right="mr-1"
+            :to="previousPath"
+            >Back to Sites</BaseLink
+          >
+        </LayoutHelper>
+
+        <!-- page title area -->
+        <LayoutHelper indent="col-2">
+          <DetailHeadline
+            :title="data.title"
+            class="mb-5"
+          />
+          <MetadataStacked
+            :location="data.location"
+            :location-icon="data?.mapIcon?.url"
+            :wait="data?.waitTimeLabel"
+          />
+        </LayoutHelper>
+
+        <!-- inline hero image -->
+        <LayoutHelper
+          indent="col-2"
+          class="lg:mb-22 mt-10 mb-10"
+        >
+          <BlockImageStandard :data="detailImage" />
+        </LayoutHelper>
+
+        <!-- share buttons -->
+        <LayoutHelper
+          v-if="themeStore.theme !== 'ThemeEdu'"
+          indent="col-2"
+          class="lg:mb-0 relative mb-8"
+        >
+          <ShareButtons
+            v-if="data.showShareLinks && data.title && data.url && !themeStore.isEdu"
+            :title="data.title"
+            :url="data.url"
+          />
+        </LayoutHelper>
+
+        <!-- Body Streamfield -->
+        <BlockStreamfield :data="data.body" />
+
+        <!-- See on Map Button -->
+        <LayoutHelper
+          indent="col-3"
+          class="lg:mb-24 mb-12"
+        >
+          <BaseButton :to="mapPath">
+            <template #iconLeft>
+              <IconMap class="mr-2 text-2xl" />
+            </template>
+            <template #default>See on Map</template>
+          </BaseButton>
+        </LayoutHelper>
+
+        <!-- related content -->
+        <BlockLinkCarousel
+          v-if="data?.relatedPagesForMoreSection"
+          item-type="cards"
+          class="lg:my-24 my-12"
+          heading="More Like This"
+          :items="data.relatedPagesForMoreSection"
+        />
+      </template>
+    </BaseExploreApp>
+  </div>
+</template>
+<style lang="scss" scoped>
+.BackToSitesBtn {
+  margin-left: -10px;
+}
+</style>

package/vite.config.ts

@@ -19,8 +19,6 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         silenceDeprecations: [
-          // Deprecation Warning: https://sass-lang.com/d/mixed-decls
-          'mixed-decls',
           // Deprecation Warning: https://sass-lang.com/d/import
           'import',
           // Deprecation Warning: https://sass-lang.com/d/legacy-js-api

package/dist/src/components/BlockCsrTable/CsrAttachment.vue.d.ts

@@ -1,19 +0,0 @@
-interface CsrAttachmentProps {
-    params: {
-        data: {
-            Attachment: string;
-        };
-        /** Example values: `https://test-api.jpl.nasa.gov/attachments?key=`, `https://test-api.jpl.nasa.gov/` */
-        attachmentPrefix: string;
-    };
-}
-declare const _default: import('vue').DefineComponent<CsrAttachmentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CsrAttachmentProps> & Readonly<{}>, {
-    params: {
-        data: {
-            Attachment: string;
-        };
-        /** Example values: `https://test-api.jpl.nasa.gov/attachments?key=`, `https://test-api.jpl.nasa.gov/` */
-        attachmentPrefix: string;
-    };
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;