@explorer-1/vue 0.0.0

package/src/components/SearchResultGridItem/SearchResultGridItem.stories.js

@@ -0,0 +1,70 @@
+import SearchResultGridItem from './SearchResultGridItem.vue'
+
+export default {
+  title: 'Components/Search/SearchResultGridItem',
+  component: SearchResultGridItem,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
+    })
+  ],
+  argTypes: {
+    headingLevel: {
+      description:
+        'Change the heading level for semantic markup. This does not affect the style of the heading.',
+      control: {
+        type: 'select',
+        options: [null, 'h1', 'h2', 'h3', 'h4', 'h5']
+      }
+    }
+  },
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const SearchResultGridCardData = {
+  page: {
+    content_type: '',
+    url: '/topics/placeholder-slug-1',
+    type: 'news',
+    topic: 'Moon',
+    date: 'May 22, 2018',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    image: {
+      src: {
+        url: 'https://picsum.photos/490/490',
+        width: 490,
+        height: 490
+      },
+      alt: 'Alt text'
+    }
+  },
+  headingLevel: 'h2'
+}
+
+export const StandardResult = {
+  args: {
+    ...SearchResultGridCardData.page,
+    pageContentType: SearchResultGridCardData.page.content_type
+  }
+}
+
+export const NewsResult = {
+  args: {
+    ...SearchResultGridCardData.page,
+    pageContentType: 'news_news',
+    headingLevel: 'h2'
+  }
+}
+
+export const MissionResult = {
+  args: {
+    ...SearchResultGridCardData.page,
+    pageContentType: 'missions_mission',
+    headingLevel: 'h2'
+  }
+}

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <BlockLinkCard
+      v-if="pageContentType === 'news_news'"
+      :url="url"
+      :title="title"
+      :label="topic"
+      :thumbnail-image="image"
+      :date="date"
+      :heading-level="headingLevel"
+      compact
+    />
+
+    <BlockLinkTile
+      v-else-if="pageContentType === 'missions_mission'"
+      :url="url"
+      :title="title"
+      :thumbnail-image="image"
+      :heading-level="headingLevel"
+      compact
+    />
+
+    <BaseLink
+      v-else
+      variant="none"
+      :to="url"
+      class="relative mb-6"
+      link-class="group block"
+    >
+      <div
+        v-if="image"
+        class="w-full"
+      >
+        <BaseImagePlaceholder aspect-ratio="1:1">
+          <BaseImage
+            v-if="image.src"
+            :src="image.src.url"
+            :width="image.src.width"
+            :height="image.src.height"
+            alt=""
+            class="sm:object-cover object-cover"
+            loading="lazy"
+          />
+          <div
+            v-if="splitDate"
+            class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white lg:py-6 bg-primary"
+          >
+            <div class="font-extrabold text-8xl leading-tight tracking-wider">
+              {{ splitDate.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ splitDate.monthAndYear }}
+            </div>
+          </div>
+        </BaseImagePlaceholder>
+      </div>
+      <component
+        :is="headingLevel || 'p'"
+        class="text-lg leading-normal mt-2 lg:mt-3 font-normal tracking-normal text-gray-dark can-hover:group-hover:text-gray-mid-dark"
+      >
+        <span>
+          {{ title }}
+        </span>
+      </component>
+    </BaseLink>
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { mixinFormatSplitEventDates } from '../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'SearchResultGridItem',
+  components: {
+    BaseLink,
+    BaseImage,
+    BaseImagePlaceholder,
+    BlockLinkCard,
+    BlockLinkTile
+  },
+  props: {
+    url: {
+      type: String,
+      required: false
+    },
+    type: {
+      type: String,
+      required: false
+    },
+    topic: {
+      type: String,
+      required: false
+    },
+    date: {
+      type: String,
+      required: false
+    },
+    startDate: {
+      type: String,
+      required: false
+    },
+    endDate: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    headingLevel: {
+      type: (String as PropType<HeadingLevel>) || null,
+      required: false
+    },
+    pageContentType: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    splitDate(): { day: string; monthAndYear: string } | null {
+      if (this.startDate) {
+        return mixinFormatSplitEventDates(this.startDate, this.endDate)
+      }
+      return null
+    }
+  }
+})
+</script>

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -0,0 +1,183 @@
+<template>
+  <!-- results container-->
+  <ol
+    id="search_results"
+    aria-label="Search results"
+    :class="{ 'grid grid-cols-12 gap-5': grid }"
+  >
+    <li
+      v-for="(page, index) of results"
+      :key="page.id"
+      :class="{
+        'md:col-span-6 lg:col-span-4 xl:col-span-3 col-span-12 gap-5': grid && !condenseGrid,
+        'md:col-span-6 lg:col-span-4 col-span-12 gap-5': grid && condenseGrid
+      }"
+    >
+      <template v-if="!grid">
+        <SearchResultCard
+          :is-events="isEvents"
+          :is-profiles="isProfiles"
+          :url="page.url"
+          :type="page.type"
+          :topic="page.topic"
+          :image="page.image"
+          :date="page.date"
+          :start-date="page.startDate"
+          :end-date="page.endDate"
+          :start-time="page.startTime"
+          :end-time="page.endTime"
+          :location="page.location"
+          :title="page.title"
+          :summary="page.summary"
+          :featured="featureFirstResult ? index === 0 && currentPage === 1 : false"
+          heading-level="h2"
+        />
+      </template>
+      <template v-else>
+        <SearchResultGridItem
+          :page-content-type="page.content_type"
+          :url="page.url"
+          :type="page.type"
+          :topic="page.topic"
+          :image="page.image"
+          :date="page.date"
+          :start-date="page.startDate"
+          :end-date="page.endDate"
+          :start-time="page.startTime"
+          :end-time="page.endTime"
+          :title="page.title"
+          heading-level="h2"
+        />
+      </template>
+    </li>
+  </ol>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ElasticSearchPage } from '../../interfaces'
+// @ts-ignore
+import dayjs from './../../utils/dayjs'
+import SearchResultCard from './../SearchResultCard/SearchResultCard.vue'
+import SearchResultGridItem from './../SearchResultGridItem/SearchResultGridItem.vue'
+
+export default defineComponent({
+  name: 'SearchResultsList',
+  components: {
+    SearchResultCard,
+    SearchResultGridItem
+  },
+  props: {
+    isEvents: {
+      type: Boolean,
+      default: false
+    },
+    isProfiles: {
+      type: Boolean,
+      default: false
+    },
+    grid: {
+      type: Boolean,
+      default: false
+    },
+    // condense the grid if the sidebar is showing
+    condenseGrid: {
+      type: Boolean,
+      default: false
+    },
+    pages: [Array, Object],
+    searchQueryResult: [Array, Object],
+    featureFirstResult: [Boolean],
+    currentPage: {
+      type: Number,
+      default: 1,
+      required: false
+    }
+  },
+  computed: {
+    results(): ElasticSearchPage[] {
+      function parseType(type: string): string {
+        return type.toLowerCase().replace('.', '_')
+      }
+      function parseDate(date: string): string {
+        return dayjs(date).format('ll')
+      }
+      interface Page {
+        [key: string]: any
+      }
+      return this.pages
+        ? this.pages
+            .filter((page: Page) => {
+              return 'url' in page._source
+            })
+            .map((page: Page) => {
+              // helpers
+              const handle = parseType(page._source.content_type[0])
+              // image field is different for image detail page
+              const image =
+                typeof page._source[handle + '__thumbnail_image'] !== 'undefined' &&
+                page._source[handle + '__thumbnail_image'] !== null
+                  ? page._source[handle + '__thumbnail_image']
+                  : page._source[handle + '__image']
+              // date field is different for mission and event detail pages
+              let date
+              let topic =
+                handle === 'missions_mission'
+                  ? page._source[handle + '__status_filter']
+                  : page._source.topic_labels_filter?.length
+                    ? page._source.topic_labels_filter[0]
+                    : null
+              const pageType = page._source[handle + '__label']
+              if (handle === 'events_eventpage') {
+                date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
+              } else if (handle === 'missions_mission') {
+                date = page._source.display_date_filter
+                  ? 'Launch date: ' + page._source.display_date_filter
+                  : typeof page._source.publication_date_filter !== 'undefined'
+                    ? 'Published: ' + parseDate(page._source.publication_date_filter)
+                    : 'Published: ' + parseDate(page._source.first_published_at_filter)
+              } else if (handle === 'profiles_profilepage') {
+                topic = page._source[handle + '__go_site_name']
+                date = null
+              } else {
+                date =
+                  typeof page._source.publication_date_filter !== 'undefined'
+                    ? parseDate(page._source.publication_date_filter)
+                    : parseDate(page._source.first_published_at_filter)
+              }
+              page.content_type = handle
+              page.id = page._id
+              page.score = page._score
+              page.url = page._source.url
+              page.title = page._source.title
+              page.type = pageType
+              page.topic = topic
+              // properties for event's page
+              page.location =
+                handle === 'events_eventpage' ? page._source[handle + '__location'] : null
+              page.startDate =
+                handle === 'events_eventpage' ? page._source[handle + '__start_datetime'] : null
+              page.endDate =
+                handle === 'events_eventpage' ? page._source[handle + '__end_datetime'] : null
+              page.startTime =
+                handle === 'events_eventpage' ? page._source[handle + '__start_time_string'] : null
+              // properties that are different for profiles page
+              page.summary =
+                handle === 'profiles_profilepage'
+                  ? page._source[handle + '__job_title']
+                  : page._source[handle + '__summary']
+              page.date = date
+              if (image) {
+                page.image = {
+                  src: {
+                    url: image.thumbnail_image
+                  }
+                }
+              }
+              return page
+            })
+        : undefined
+    }
+  }
+})
+</script>

package/src/components/SearchSelectMenu/SearchSelectMenu.stories.js

@@ -0,0 +1,25 @@
+import SearchSelectMenu from './SearchSelectMenu.vue'
+
+export default {
+  title: 'Components/Search/SearchSelectMenu',
+  component: SearchSelectMenu
+}
+
+export const SortBy = {
+  args: {
+    title: 'Sort by',
+    options: [
+      { text: 'Relevance', value: 'score' },
+      {
+        text: 'Latest',
+        value: 'latestDate'
+      },
+      {
+        text: 'Oldest',
+        value: 'oldestDate'
+      }
+    ],
+    groupKey: 'sortBy',
+    selectValue: ''
+  }
+}

package/src/components/SearchSelectMenu/SearchSelectMenu.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <label
+      class="sr-only"
+      :for="generateId()"
+      >{{ title }}</label
+    >
+    <select
+      :id="generateId()"
+      v-model="selectValueHandler"
+      class="border-0 text-primary can-hover:hover:text-primary-dark font-secondary font-semibold tracking-wider uppercase align-middle"
+    >
+      <option
+        disabled
+        value=""
+      >
+        {{ title }}
+      </option>
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.text }}
+      </option>
+    </select>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+export default {
+  name: 'SearchSelectMenu',
+  props: {
+    selectValue: String,
+    title: {
+      type: String,
+      required: false
+    },
+    groupKey: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['update:selectValue'],
+  computed: {
+    // to sync both ways parent <--> child
+    // ensures accurate filter visual state when using URL query strings
+    selectValueHandler: {
+      get() {
+        return this.selectValue
+      },
+      set(newValue) {
+        this.$emit('update:selectValue', newValue)
+      }
+    }
+  },
+  watch: {
+    selectValue: {
+      // update URL with filter parameters
+      handler(e) {
+        let query = Object.assign({}, this.$route.query)
+        if (e.length > 0) {
+          query = {
+            ...this.$route.query,
+            [this.groupKey]: e.toString()
+          }
+        } else {
+          // clear the param from the URL if no value is passed
+          delete query[this.groupKey]
+        }
+        // ensures history is saved with each change to filters
+        this.$router.push({ query })
+      }
+    }
+  },
+  methods: {
+    generateId() {
+      return `select_${this.groupKey}`
+    }
+  }
+}
+</script>

package/src/components/ShareButtons/ShareButtons.stories.js

@@ -0,0 +1,16 @@
+import ShareButtons from './ShareButtons.vue'
+
+export default {
+  title: 'Components/ShareButtons',
+  component: ShareButtons,
+  excludeStories: /.*Data$/
+}
+
+// data
+export const BlockShareButtonsData = {
+  title: 'Title of the story',
+  url: '/news/slug',
+  inline: false
+}
+
+export const Default = { args: BlockShareButtonsData }

package/src/components/ShareButtons/ShareButtons.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="ShareButtons relative flex flex-row items-start border-collapse"
+    :class="{ 'lg:absolute lg:top-0 lg:left-0 lg:flex-col': !inline }"
+  >
+    <BaseButton
+      variant="social"
+      class="-facebook w-12 h-12 text-2xl"
+      :href="facebookLink"
+      aria-label="Share to Facebook"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialFacebook />
+      </template>
+    </BaseButton>
+
+    <BaseButton
+      variant="social"
+      class="-twitter w-12 h-12 -ml-px text-2xl"
+      :class="{ 'lg:ml-0 lg:-mt-px': !inline }"
+      :href="twitterLink"
+      aria-label="Share to X"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialTwitter />
+      </template>
+    </BaseButton>
+
+    <BaseButton
+      variant="social"
+      class="-reddit w-12 h-12 -ml-px text-2xl"
+      :class="{ 'lg:ml-0 lg:-mt-px': !inline }"
+      :href="redditLink"
+      aria-label="Share to Reddit"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialReddit />
+      </template>
+    </BaseButton>
+
+    <BaseButton
+      variant="social"
+      class="w-12 h-12 -ml-px text-2xl"
+      :class="{ 'lg:ml-0 lg:-mt-px': !inline }"
+      :href="mailLink"
+      aria-label="Share via Email"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialEmail />
+      </template>
+    </BaseButton>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinCanonicalUrl } from './../../utils/mixins'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconSocialFacebook from './../Icons/IconSocialFacebook.vue'
+import IconSocialTwitter from './../Icons/IconSocialTwitter.vue'
+import IconSocialReddit from './../Icons/IconSocialReddit.vue'
+import IconSocialEmail from './../Icons/IconSocialEmail.vue'
+
+export default defineComponent({
+  name: 'ShareButtons',
+  components: {
+    BaseButton,
+    IconSocialFacebook,
+    IconSocialTwitter,
+    IconSocialReddit,
+    IconSocialEmail
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    encodedTitle(): string {
+      return encodeURIComponent(this.title)
+    },
+    encodedURL(): string {
+      return encodeURIComponent(mixinCanonicalUrl(this.url))
+    },
+    facebookLink(): string {
+      // See: https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5
+      // https://www.facebook.com/dialog/feed?app_id=${appID}&link=${this.encodedURL}
+      // If we don't want an app id, this article describes an alternate way:
+      // https://css-tricks.com/simple-social-sharing-links/
+      // e.g. https://www.facebook.com/sharer.php?u=${this.encodedURL}
+      return `https://www.facebook.com/dialog/feed?app_id=361412888534196&link=${this.encodedURL}`
+    },
+    twitterLink(): string {
+      const handle = encodeURIComponent('NASAJPL')
+      return `https://twitter.com/share?url=${this.encodedURL}&text=${this.encodedTitle}&via=${handle}`
+    },
+    redditLink(): string {
+      return `https://reddit.com/submit?url=${this.encodedURL}&title=${this.encodedTitle}`
+    },
+    mailLink(): string {
+      return `mailto:?body=${this.encodedTitle}:%20${this.encodedURL}&subject=${this.encodedTitle}`
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.ShareButtons {
+  .BaseButton {
+    @apply relative;
+    @include hover {
+      @apply z-10;
+    }
+  }
+}
+</style>

package/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js

@@ -0,0 +1,14 @@
+import ShareButtonsEdu from './ShareButtonsEdu.vue'
+
+export default {
+  title: 'Components/EDU/ShareButtonsEdu',
+  component: ShareButtonsEdu
+}
+
+export const Default = {
+  name: 'Share Buttons',
+  args: {
+    url: 'https://jpl.nasa.gov/edu/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
+    title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight"
+  }
+}