@explorer-1/vue 1.1.0 → 1.1.2

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -17,6 +17,7 @@
         <SearchResultCard
           :is-events="isEvents"
           :is-profiles="isProfiles"
+          :is-attraction="isAttraction"
           :page-content-type="page.content_type"
           :url="page.url"
           :type="page.type"
@@ -34,6 +35,8 @@
           :ongoing="page.ongoing"
           :target-audience="page.targetAudience"
           :location="page.location"
+          :location-icon="page.locationIcon"
+          :wait="page.wait"
           :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
           :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
           :time="page.time as unknown as EduResourcesTime"
@@ -97,6 +100,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    isAttraction: {
+      type: Boolean,
+      default: false
+    },
     grid: {
       type: Boolean,
       default: false
@@ -207,7 +214,9 @@ export default defineComponent({
               page.topic = topic
               // properties for event's page
               page.location =
-                handle === 'events_eventpage' ? page._source[handle + '__location'] : location
+                handle === 'events_eventpage' || handle === 'explore_jpl_sites_explorejplsite'
+                  ? page._source[handle + '__location']
+                  : location
               page.startDate =
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
                   ? page._source[handle + '__start_date']
@@ -258,6 +267,14 @@ export default defineComponent({
                   ? page._source[handle + '__job_title']
                   : page._source[handle + '__summary']
               page.date = date
+              page.wait =
+                handle === 'explore_jpl_sites_explorejplsite'
+                  ? page._source[handle + '__wait_time_label_filter']
+                  : undefined
+              page.locationIcon =
+                handle === 'explore_jpl_sites_explorejplsite'
+                  ? page._source[handle + '__map_icon']?.thumbnail_image
+                  : undefined
               if (image) {
                 page.image = {
                   src: {

package/src/components/ShareButtons/ShareButtons.vue

@@ -11,7 +11,7 @@
       target="_blank"
       rel="noopener"
     >
-      <template #icon>
+      <template #iconRight>
         <IconSocialFacebook />
       </template>
     </BaseButton>
@@ -25,7 +25,7 @@
       target="_blank"
       rel="noopener"
     >
-      <template #icon>
+      <template #iconRight>
         <IconSocialTwitter />
       </template>
     </BaseButton>
@@ -39,7 +39,7 @@
       target="_blank"
       rel="noopener"
     >
-      <template #icon>
+      <template #iconRight>
         <IconSocialReddit />
       </template>
     </BaseButton>
@@ -53,7 +53,7 @@
       target="_blank"
       rel="noopener"
     >
-      <template #icon>
+      <template #iconRight>
         <IconSocialEmail />
       </template>
     </BaseButton>

package/src/components/TheFooter/TheFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="TheFooter bg-jpl-blue-darker edu:bg-stars edu:bg-primary-dark text-white relative z-20 print:px-4 print:border-t print:border-black"
+    class="TheFooter bg-gray-dark edu:bg-stars edu:bg-primary-dark text-white relative z-20 print:px-4 print:border-t print:border-black"
   >
     <div class="footer-main lg:BaseGrid 3xl:px-0 lg:pt-20 container px-4 pt-10 mx-auto">
       <div class="footer-navigation lg:block lg:col-span-9 hidden col-span-12">

package/src/components/TopicDetailMore/TopicDetailMore.vue

@@ -42,7 +42,7 @@
         :to="`/search?topics=${topic}`"
       >
         More
-        <template #icon><IconCaret class="ml-1 text-sm" /></template>
+        <template #iconRight><IconCaret class="ml-1 text-sm" /></template>
       </BaseButton>
     </div>
   </div>

package/src/interfaces.ts

@@ -58,6 +58,7 @@ export interface ThumbnailObject {
   original: string
   width: number
   height: number
+  url: string
 }
 export interface ImageObject {
   title?: string
@@ -102,8 +103,32 @@ export interface ImageBlock extends BlockData, ImageObject {
   constrain: boolean
 }
 
+export interface SearchBucket {
+  key: string
+  doc_count: number
+  label?: string
+}
+
+export interface SearchAggregation {
+  buckets: SearchBucket[]
+  doc_count_error_upper_bound: number
+  sum_other_doc_count: number
+}
+
+export type SearchAggregations = Record<string, SearchAggregation>
+
+export interface SearchData {
+  hits: {
+    total: {
+      value: number
+    }
+    hits: ElasticSearchPage[]
+  }
+  aggregations: SearchAggregations
+}
+
 export interface ElasticSearchPage {
-  _source: string
+  _source: Record<string, any>
   id: string | number
   content_type: string
   url: string
@@ -119,6 +144,8 @@ export interface ElasticSearchPage {
   startDatetime?: string
   endDatetime?: string
   location?: string
+  locationIcon?: string
+  wait?: string
   title: string
   summary?: string
   eventType?: string
@@ -304,14 +331,26 @@ export interface PageObject {
   topper?: string
   seoTitle?: string
   searchDescription?: string
+  heroImage?: ImageObject
   heroPosition?: 'full_bleed' | 'inline'
+  heroImageInline?: ImageObject
+  displayTitleInHero?: boolean
+  heroImageCaption?: string
+  heroSummary?: string
   heroConstrain?: boolean
+  showShareLinks?: boolean
   publicationDate?: string
   body?: StreamfieldBlockData[]
   thumbnailImage?: ThumbnailObject
   relatedLinks?: BlockRelatedLinksObject[]
   relatedContentHeading: string
   relatedContent?: any
+  location?: string
+  mapIcon?: Record<string, any>
+  waitTime?: string
+  waitTimeLabel?: string
+  relatedPagesForMoreSection?: any
+  id?: string
 }
 
 export interface EduResourcesSubject {

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -97,13 +97,14 @@
               :aria-expanded="collapseTranscript ? 'false' : 'true'"
               @click="toggleTranscript()"
             >
-              <template v-if="collapseTranscript">
-                <span>Read more</span>
-                <IconDropdown class="text-sm ml-2" />
+              <template #default>
+                <span>{{ collapseTranscript ? 'Read More' : 'Collapse' }}</span>
               </template>
-              <template v-else>
-                <span>Collapse</span>
-                <IconDropdown class="transform rotate-180 text-sm ml-2" />
+              <template #iconRight>
+                <IconDropdown
+                  class="text-sm ml-2 transform"
+                  :class="{ 'rotate-180': !collapseTranscript }"
+                />
               </template>
             </BaseButton>
           </template>
@@ -178,9 +179,9 @@
                   Download
                   {{ data.uploadedMedia.fileExtension || 'Audio' }}
                 </span>
-                <slot name="icon">
+                <template #iconRight>
                   <IconDownload />
-                </slot>
+                </template>
               </BaseButton>
             </div>
           </div>

package/src/templates/PageContent/PageContent.vue

@@ -51,12 +51,14 @@ export default defineComponent({
         ? this.data?.parent?.title
         : this.data?.displayLabel
     },
+    /** If the hero image is inline (treated as a regular block) */
     heroInline() {
       if (this.data?.heroPosition === 'inline') {
         return true
       }
       return false
     },
+    /** If the page title should overlay the hero image (does not apply to inline heroes) */
     heroTitle() {
       return this.data?.heroImage && !this.heroInline && this.data?.displayTitleInHero
     },

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

@@ -0,0 +1,22 @@
+import BaseExploreApp from './BaseExploreApp.vue'
+
+export default {
+  title: 'Templates/ExploreJPL/BaseExploreApp',
+  component: BaseExploreApp,
+  parameters: {
+    html: {
+      root: '#storyRoot'
+    },
+    layout: 'fullscreen',
+    slots: {
+      hero: 'Hero content (above the nav) `<template #hero>`',
+      default: 'Body content (below the nav) `<template #default>`'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'BaseExploreApp'
+}

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * Wrapper template for all Explore JPL App pages.
+ * Provides the sticky navigation.
+ */
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+
+defineProps({
+  /** If hero content appears above the navigation (provided by parent component) */
+  hasIntro: {
+    type: Boolean,
+    default: false
+  },
+  navData: {
+    type: String,
+    default: undefined
+  }
+})
+</script>
+<template>
+  <div class="BaseExploreApp">
+    <!-- @slot: hero content -->
+    <slot name="hero"></slot>
+    <!-- navigation -->
+    <NavSecondary
+      :breadcrumb="navData"
+      :has-intro="hasIntro"
+      show-on-mobile
+    />
+    <!-- @slot: page body -->
+    <slot>
+      <p class="text-center"></p>
+    </slot>
+  </div>
+</template>
+<style lang="scss">
+@use 'sass:math';
+// Conversion util for easier definition of font sizes by pixel size
+@function pxToRem($pxValue) {
+  // Assumes font-size for body element is a constant 16px
+  @return math.div($pxValue, 16) * 1rem;
+}
+
+.BaseExploreApp {
+  .text-h1 {
+    // mimic text-h2
+    @apply font-display font-bold;
+    font-size: pxToRem(36);
+    line-height: 1.25;
+
+    @screen sm {
+      font-size: pxToRem(38);
+    }
+    @screen md {
+      font-size: pxToRem(40);
+    }
+    @screen lg {
+      font-size: pxToRem(42);
+    }
+    @screen xl {
+      font-size: pxToRem(44);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,102 @@
+import { BlockHeadingData } from './../../../components/BlockHeading/BlockHeading.stories'
+import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { NavSecondaryData } from './../../../components/NavSecondary/NavSecondary.stories.js'
+
+import PageContentExploreApp from './PageContentExploreApp.vue'
+
+export default {
+  title: 'Templates/ExploreJPL/PageContentExploreApp',
+  component: PageContentExploreApp,
+  tags: ['!autodocs'],
+  parameters: {
+    html: {
+      root: '#storyRoot'
+    },
+    layout: 'fullscreen'
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// data
+export const ExploreAppContentPageData = {
+  url: '/slug',
+  title: 'Sites',
+  displayLabel: 'Explore JPL',
+  showShareLinks: false,
+  // heroImageInline: HeroMediaData.imageInline,
+  body: [
+    BlockKeyPointsData,
+    BlockHeadingData,
+    {
+      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'
+    },
+    BlockImageComparisonData,
+    BlockHeadingData,
+    {
+      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'
+    }
+  ],
+  relatedLinks: [BlockRelatedLinksData.data],
+  relatedContentHeading: 'Related Activities',
+  relatedContent: [
+    // external link card, no image
+    {
+      label: 'Explore NASA',
+      thumbnailImage: null,
+      title: 'NASA website',
+      externalLink: 'https://www.nasa.gov'
+    },
+
+    // via page chooser
+    {
+      page: {
+        __typename: 'EDUExplainerArticlePage',
+        label: 'Mission',
+        thumbnailImage: {
+          src: {
+            url: 'https://picsum.photos/512/288',
+            width: 512,
+            height: 288
+          }
+        },
+        title: 'GRACE-FO',
+        url: '/mission/placeholder'
+      }
+    },
+    ...BlockLinkCardCarouselData
+  ]
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    data: ExploreAppContentPageData
+  }
+}
+
+export const WithHero = {
+  args: {
+    data: {
+      ...ExploreAppContentPageData,
+      heroPosition: 'full_bleed',
+      heroImage: HeroMediaData.image
+    }
+  }
+}
+
+export const CustomNav = {
+  args: {
+    data: {
+      ...ExploreAppContentPageData,
+      breadcrumb: NavSecondaryData.breadcrumb
+    }
+  }
+}

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+/** Explore JPL App's equivalent to PageContent */
+import { computed, reactive } from 'vue'
+import type { PageObject } from '../../../interfaces'
+import { useThemeStore } from '../../../store/theme'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+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 BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BaseExploreApp from './../../explore-jpl/BaseExploreApp/BaseExploreApp.vue'
+
+const themeStore = useThemeStore()
+
+const props = defineProps({
+  data: {
+    type: Object as () => PageObject,
+    default: undefined
+  }
+})
+const { data } = reactive(props)
+
+/** If the hero image is inline (treated as a regular block) */
+const heroInline = computed(() => {
+  if (data?.heroPosition === 'inline') {
+    return true
+  }
+  return false
+})
+/** If the page title should overlay the hero image (does not apply to inline heroes) */
+const heroTitle = computed(() => {
+  return data?.heroImage && !heroInline.value && data?.displayTitleInHero
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="{ '-nav-offset': !heroInline && data.heroImage }"
+  >
+    <BaseExploreApp
+      :has-intro="data.heroImage && !heroInline"
+      :nav-data="data.breadcrumb"
+    >
+      <template #hero>
+        <!-- hero image -->
+        <HeroLarge
+          v-if="heroTitle"
+          :title="data.title"
+          :image="data.heroImage"
+          :summary="data.heroSummary"
+        />
+        <HeroMedia
+          v-else-if="!heroTitle && data.heroImage && !heroInline"
+          class="md:mb-0 mb-10"
+          :image="data.heroImage"
+          :caption="data.heroImageCaption"
+          :display-caption="!data.heroImageCaption ? false : true"
+          :constrain="data.heroConstrain"
+        />
+      </template>
+
+      <template #default>
+        <!-- page title area -->
+        <LayoutHelper
+          indent="col-2"
+          class="my-5 lg:mt-10 lg:mb-10"
+        >
+          <DetailHeadline
+            v-if="!heroTitle"
+            :title="data.title"
+          />
+        </LayoutHelper>
+
+        <!-- inline hero -->
+        <LayoutHelper
+          v-if="data.heroImageInline && heroInline"
+          indent="col-2"
+          class="mb-22 mt-10"
+        >
+          <BlockImageStandard
+            :data="data.heroImageInline"
+            :caption="data.heroImageCaption"
+            :display-caption="!data.heroImageCaption ? false : true"
+            :constrain="data.heroConstrain"
+          />
+        </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" />
+
+        <!-- related links -->
+        <LayoutHelper
+          v-if="data.relatedLinks && data.relatedLinks.length"
+          indent="col-3"
+          class="lg:my-18 my-10"
+        >
+          <BlockRelatedLinks :data="data.relatedLinks[0]" />
+        </LayoutHelper>
+
+        <!-- related content -->
+        <BlockLinkCarousel
+          item-type="cards"
+          class="lg:my-24 my-12"
+          :heading="data.relatedContentHeading"
+          :items="data.relatedContent"
+        />
+      </template>
+    </BaseExploreApp>
+  </div>
+</template>

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
+  }
+}