@explorer-1/vue 0.0.0

package/src/components/SearchInput/SearchInput.stories.js

@@ -0,0 +1,35 @@
+import SearchInput from './SearchInput.vue'
+
+export default {
+  title: 'Components/Search/SearchInput',
+  component: SearchInput,
+  excludeStories: /.*Data$/
+}
+
+export const Default = {
+  args: {
+    searchQuery: '',
+    placeholder: '',
+    autoFocus: false,
+    defaultColors: true
+  }
+}
+
+export const WithProps = {
+  args: {
+    searchQuery: '',
+    placeholder: 'Placeholder text',
+    autoFocus: true,
+    defaultColors: false
+  }
+}
+
+export const UnderlinedInput = {
+  args: {
+    searchQuery: '',
+    placeholder: 'Placeholder text',
+    autoFocus: true,
+    defaultColors: false,
+    underlinedInput: true
+  }
+}

package/src/components/SearchInput/SearchInput.vue

@@ -0,0 +1,93 @@
+<template>
+  <!--
+    A somewhat generic component that can be used for handiling search input
+    We do this in at least two places:
+      * on pages (such as the search page and listing pages)
+      * for site-wide search -->
+  <div
+    class="relative flex items-center"
+    :class="{
+      'border border-gray-mid': defaultColors && !underlinedInput,
+      'custom-focus': underlinedInput
+    }"
+  >
+    <div class="absolute inset-0 flex items-center">
+      <IconSearch
+        class="relative z-10 ml-6 text-xl"
+        :class="{ 'text-gray-mid': defaultColors }"
+      />
+    </div>
+    <div
+      v-if="underlinedInput"
+      class="underlinedInput ml-14 h-2px absolute inset-x-0 bottom-0 overflow-hidden text-lg text-transparent"
+    >
+      <span class="border-jpl-red-light absolute z-10 h-0 border-b-2 select-none">
+        {{ underlinedInputValue }}
+      </span>
+      <span
+        class="border-gray-light-mid absolute inset-x-0 z-10 h-0 border-b-2 select-none"
+        :class="isFocused ? 'border-opacity-100' : 'border-opacity-50'"
+      ></span>
+    </div>
+    <input
+      ref="searchQueryRef"
+      v-model="model"
+      class="pl-14 focus:ring-2 relative z-10 w-full pr-5 text-lg bg-transparent border-0"
+      :class="{
+        'text-gray-dark': defaultColors,
+        'py-1': underlinedInput,
+        'py-4': !underlinedInput
+      }"
+      type="search"
+      aria-label="Query"
+      :placeholder="placeholder"
+      @keydown.esc="emit('esc')"
+      @input="emit('input', $event.target)"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import IconSearch from './../Icons/IconSearch.vue'
+
+interface SearchInputProps {
+  underlinedInput?: boolean
+  underlinedInputValue?: string
+  placeholder?: string
+  autoFocus?: boolean
+  defaultColors?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<SearchInputProps>(), {
+  underlinedInput: false,
+  underlinedInputValue: undefined,
+  placeholder: '',
+  autoFocus: false,
+  defaultColors: true
+})
+
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel()
+const isFocused = ref(false)
+const searchQueryRef = ref(undefined)
+
+onMounted(() => {
+  if (props.autoFocus && searchQueryRef.value) {
+    const inputField = searchQueryRef.value as HTMLElement
+    inputField.focus()
+    isFocused.value = true
+  }
+})
+</script>
+<style lang="scss" scoped>
+.custom-focus {
+  input {
+    outline: none;
+    box-shadow: none;
+  }
+}
+</style>

package/src/components/SearchPagination/SearchPagination.stories.js

@@ -0,0 +1,55 @@
+import SearchPagination from './SearchPagination.vue'
+
+export default {
+  title: 'Components/Search/SearchPagination',
+  component: SearchPagination,
+  excludeStories: /.*Data$/
+}
+
+export const TwoPages = {
+  args: {
+    totalPages: 2,
+    currentPage: 1
+  }
+}
+export const ThreePages = {
+  args: {
+    totalPages: 3,
+    currentPage: 2
+  }
+}
+
+export const FourPages = {
+  args: {
+    totalPages: 4,
+    currentPage: 2
+  }
+}
+
+export const FivePages = {
+  args: {
+    totalPages: 5,
+    currentPage: 4
+  }
+}
+
+export const FirstOfMany = {
+  args: {
+    totalPages: 10,
+    currentPage: 1
+  }
+}
+
+export const MiddleOfMany = {
+  args: {
+    totalPages: 10,
+    currentPage: 5
+  }
+}
+
+export const LastOfMany = {
+  args: {
+    totalPages: 10,
+    currentPage: 10
+  }
+}

package/src/components/SearchPagination/SearchPagination.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-if="totalPages > 0"
+    class="SearchPagination flex items-center justify-center"
+  >
+    <BaseButton
+      aria-label="Previous"
+      rel="prev"
+      :disabled="currentPage === 1"
+      @click="previousPage()"
+    >
+      <template #icon> <IconPrev /> </template
+    ></BaseButton>
+
+    <div class="sm:hidden px-4 pt-1">Page {{ currentPage }} of {{ totalPages }}</div>
+    <div class="sm:flex items-center justify-center hidden px-5 pt-1">
+      <div
+        v-for="(pageNumber, index) in generatePageList"
+        :key="index"
+      >
+        <button
+          v-if="pageNumber !== ellipsis"
+          class="group min-w-12 can-hover:hover:font-medium block py-3 text-lg leading-normal text-center"
+          :class="{ '-current': pageNumber === currentPage }"
+          @click="toPage(pageNumber)"
+        >
+          <span
+            class="inline-block px-1 pb-1"
+            :class="{
+              'can-hover:group-hover:border-b-2 can-hover:group-hover:border-primary':
+                pageNumber !== ellipsis
+            }"
+          >
+            {{ pageNumber }}
+          </span>
+        </button>
+        <span
+          v-else
+          class="min-w-12 block py-3 text-lg leading-normal text-center cursor-default"
+        >
+          <span class="inline-block px-1 pb-1">
+            {{ pageNumber }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <BaseButton
+      :disabled="currentPage === totalPages"
+      rel="next"
+      aria-label="Next"
+      @click="nextPage()"
+    >
+      <template #icon> <IconNext /> </template
+    ></BaseButton>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconPrev from './../Icons/IconPrev.vue'
+import IconNext from './../Icons/IconNext.vue'
+
+export default {
+  name: 'SearchPagination',
+  components: {
+    BaseButton,
+    IconPrev,
+    IconNext
+  },
+  props: {
+    totalPages: Number,
+    currentPage: Number
+  },
+  data() {
+    return {
+      ellipsis: '…'
+    }
+  },
+  computed: {
+    generatePageList() {
+      const maxLeft = 4
+      const maxRight = this.totalPages - maxLeft + 1
+      if (this.totalPages > 4) {
+        // we're at the begining
+        if (this.currentPage <= maxLeft) {
+          return [...this.generatePageRange(1, maxLeft), this.ellipsis, this.totalPages]
+        }
+        // we're at the begining but past the threshold to truncate
+        else if (this.currentPage === maxLeft) {
+          const end = this.currentPage + maxLeft - 1
+          return [...this.generatePageRange(1, end), this.ellipsis, this.totalPages]
+        }
+        // we're in the 'middle' of the number range
+        else if (this.currentPage > maxLeft && this.currentPage < maxRight) {
+          const start = this.currentPage - 1
+          const end = this.currentPage + 1
+          return [
+            1,
+            this.ellipsis,
+            ...this.generatePageRange(start, end),
+            this.ellipsis,
+            this.totalPages
+          ]
+        }
+        // we're at the end
+        else if (this.currentPage >= maxRight) {
+          const start = this.currentPage - 2
+          return [1, this.ellipsis, ...this.generatePageRange(start, this.totalPages)]
+        }
+        // a fallback (this would generate a list of all pages)
+        else {
+          return [...this.generatePageRange(1, this.totalPages)]
+        }
+      } else {
+        // should be hitting this intentionally if < 4 total pages
+        return [...this.generatePageRange(1, this.totalPages)]
+      }
+    }
+  },
+  watch: {
+    currentPage: {
+      handler() {
+        const query = {
+          ...this.$route.query,
+          page: this.currentPage
+        }
+        // ensures history is saved with each change to filters
+        this.$router.push({ query })
+      }
+    }
+  },
+  methods: {
+    toPage(newPageNumber) {
+      this.$emit('update:currentPage', newPageNumber)
+    },
+    nextPage() {
+      const newPageNumber = this.currentPage + 1
+      this.$emit('update:currentPage', newPageNumber)
+    },
+    previousPage() {
+      const newPageNumber = this.currentPage - 1
+      this.$emit('update:currentPage', newPageNumber)
+    },
+    generatePageRange(from, to) {
+      // utility that generates an array of numbers
+      const pageRange = []
+
+      from = from > 0 ? from : 1
+
+      // TODO: replace with lodash once that is merged
+      // _.range([(start = from)], to)
+
+      for (let i = from; i <= to; i++) {
+        pageRange.push(i)
+      }
+
+      return pageRange
+    }
+  }
+}
+</script>
+<style lang="scss">
+.SearchPagination {
+  .-current {
+    @apply font-medium;
+
+    span {
+      @apply border-primary border-b-2;
+    }
+  }
+}
+</style>

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -0,0 +1,57 @@
+import SearchResultCard from './SearchResultCard.vue'
+
+export default {
+  title: 'Components/Search/SearchResultCard',
+  component: SearchResultCard,
+  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']
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const SearchResultCardData = {
+  url: '/topics/placeholder-slug-1',
+  type: 'news',
+  topic: 'Moon',
+  date: 'May 22, 2018',
+  title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+  summary:
+    "On April 30, the Food and Drug Administration approved VITAL for a ventilator Emergency Use Authorization. Developed in just 37 days by NASA's Jet Propulsion Laboratory in response to the coronavirus pandemic, VITAL (short for Ventilator Intervention Technology Accessible Locally) wouldn't replace current hospital ventilators, which can treat a broader range of medical issues.",
+  image: {
+    src: {
+      url: 'https://picsum.photos/490/490',
+      width: 490,
+      height: 490
+    },
+    alt: 'Alt text'
+  },
+  headingLevel: 'h3',
+  featured: false
+}
+
+export const StandardResult = { args: SearchResultCardData }
+
+export const FeaturedResult = {
+  args: { ...SearchResultCardData, featured: true }
+}
+
+export const EventResult = {
+  args: {
+    ...SearchResultCardData,
+    isEvents: true,
+    type: 'Event',
+    startTime: '00:00:00-08:00',
+    endTime: '23:59:59.999999-08:00',
+    startDate: '2021-11-11',
+    endDate: '2021-11-11',
+    location: 'On lab',
+    compact: false
+  }
+}

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <EventCard
+      v-if="isEvents"
+      :url="url"
+      :title="title"
+      :summary="summary"
+      :image="image"
+      :location="location"
+      :start-time="startTime"
+      :start-date="startDate"
+      :end-time="endTime"
+      :end-date="endDate"
+      :heading-level="headingLevel"
+      compact
+    />
+    <PodcastEpisodeCard
+      v-else-if="isPodcastSeason"
+      :url="url"
+      :summary="summary"
+      :image="image"
+      :heading-level="headingLevel"
+      :media="media"
+      :type="type"
+      :topic="topic"
+      :title="title"
+    />
+    <BaseLink
+      v-else
+      variant="none"
+      :to="url"
+      class="SearchResultCard"
+      link-class="block"
+    >
+      <div
+        v-if="!featured"
+        class="border-gray-light-mid lg:pb-10 lg:mb-10 relative grid grid-cols-9 gap-5 pb-6 mb-6 border-b"
+      >
+        <div
+          v-if="type || topic"
+          class="lg:hidden col-span-full text-subtitle"
+        >
+          <span v-if="type">
+            <span aria-hidden="true">{{ type }}</span>
+            <span class="sr-only">Category: {{ type }}.</span>
+          </span>
+          <span
+            v-if="type && topic"
+            aria-hidden="true"
+            class="mx-1"
+            >|</span
+          >
+          <span
+            v-if="topic"
+            class="text-gray-mid-dark"
+          >
+            <span aria-hidden="true">{{ topic }}</span>
+            <span class="sr-only">Category: {{ topic }}.</span>
+          </span>
+        </div>
+        <div class="sm:col-span-6 md:col-span-6 lg:col-span-7 xl:col-span-7 col-span-6">
+          <div
+            v-if="type || topic"
+            class="text-subtitle lg:block hidden mb-3"
+          >
+            <span v-if="type">
+              <span aria-hidden="true">{{ type }}</span>
+              <span class="sr-only">Category: {{ type }}.</span>
+            </span>
+            <span
+              v-if="type && topic"
+              aria-hidden="true"
+              class="mx-1"
+              >|</span
+            >
+            <span
+              v-if="topic"
+              class="text-gray-mid-dark"
+            >
+              <span aria-hidden="true">{{ topic }}</span>
+              <span class="sr-only">Category: {{ topic }}.</span>
+            </span>
+          </div>
+
+          <BaseHeading
+            v-if="title"
+            size="h5"
+            :level="headingLevel"
+            class="mb-3"
+            >{{ title }}</BaseHeading
+          >
+          <p
+            v-if="summary"
+            class="hidden sm:block text-gray-mid-dark text-body-sm mb-3"
+          >
+            {{ summary }}
+            <span class="sr-only">.</span>
+          </p>
+          <p
+            v-if="date"
+            class="text-gray-mid-dark"
+          >
+            {{ date }}
+          </p>
+        </div>
+        <div
+          v-if="image"
+          class="SearchResultCard-image xl:pl-14 sm:col-span-3 md:col-span-3 lg:col-span-2 xl:col-span-2 col-span-3"
+        >
+          <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"
+            />
+          </BaseImagePlaceholder>
+        </div>
+      </div>
+      <div
+        v-else
+        class="bg-dark-blue edu:bg-stars edu:bg-primary xl:grid-cols-9 relative grid grid-cols-5 mb-10 text-white"
+      >
+        <div class="xl:col-span-7 flex items-center col-span-3 p-10">
+          <div class="">
+            <div
+              v-if="type || topic"
+              class="text-subtitle mb-3"
+            >
+              <span v-if="type">
+                <span aria-hidden="true">{{ type }}</span>
+                <span class="sr-only">Category: {{ type }}.</span>
+              </span>
+              <span
+                v-if="type && topic"
+                aria-hidden="true"
+                class="mx-1"
+                >|</span
+              >
+              <span v-if="topic">
+                <span aria-hidden="true">{{ topic }}</span>
+                <span class="sr-only">Category: {{ topic }}.</span>
+              </span>
+            </div>
+            <BaseHeading
+              v-if="title"
+              size="h5"
+              :level="headingLevel"
+              class="mb-4"
+            >
+              {{ title }}
+            </BaseHeading>
+            <p
+              v-if="summary"
+              class="hidden lg:block text-body-sm mb-3"
+            >
+              {{ summary }}
+            </p>
+            <p v-if="date">{{ date }}</p>
+          </div>
+        </div>
+        <div
+          v-if="image && image.src"
+          class="SearchResultCard-image xl:col-span-2 col-span-2"
+        >
+          <img
+            :src="image.src.url"
+            :width="image.src.width"
+            :height="image.src.height"
+            :alt="image.alt"
+            class="object-cover w-full h-full"
+            loading="lazy"
+          />
+        </div>
+      </div>
+    </BaseLink>
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import PodcastEpisodeCard from './../PodcastEpisodeCard/PodcastEpisodeCard.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import EventCard from './../EventCard/EventCard.vue'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'SearchResultCard',
+  components: {
+    BaseLink,
+    BaseHeading,
+    BaseImage,
+    BaseImagePlaceholder,
+    EventCard,
+    PodcastEpisodeCard
+  },
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: '#'
+    },
+    type: {
+      type: String,
+      required: false
+    },
+    topic: {
+      type: String,
+      required: false
+    },
+    date: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    summary: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    featured: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    headingLevel: {
+      type: (String as PropType<HeadingLevel>) || null,
+      required: false,
+      default: 'h5'
+    },
+    isEvents: {
+      type: Boolean,
+      required: false
+    },
+    isPodcastSeason: {
+      type: Boolean,
+      required: false
+    },
+    isProfiles: {
+      type: Boolean,
+      default: false
+    },
+    media: {
+      type: String,
+      required: false
+    },
+    startTime: {
+      type: String,
+      required: false
+    },
+    startDate: {
+      type: String,
+      required: false
+    },
+    endTime: {
+      type: String,
+      required: false
+    },
+    endDate: {
+      type: String,
+      required: false
+    },
+    location: {
+      type: String,
+      required: false
+    }
+  }
+})
+</script>