@explorer-1/vue 0.0.0

package/src/components/RoboticsDetailStats/RoboticsDetailStats.vue

@@ -0,0 +1,217 @@
+<template>
+  <div
+    v-if="hasContent"
+    class="RoboticsDetailStats MixedBleedGrid lg:pl-0 relative z-20 pl-4 -mt-12 overflow-hidden"
+  >
+    <h2 class="sr-only">Robot Statistics</h2>
+    <div class="lg:block bg-gray-light col-start-indent-col-2 col-end-indent-col-3 hidden"></div>
+    <div
+      class="bg-gray-light text-gray-dark col-start-indent-col-3 col-end-container lg:py-12 lg:px-0 text-body-lg lg:gap-x-6 gap-y-8 lg:gap-y-0 grid grid-cols-10 px-8 py-10 pr-0"
+    >
+      <div class="gap-y-10 lg:col-end-9 grid grid-cols-8 col-start-1 col-end-11 gap-6">
+        <!-- We want to fit 3 items per row if possible, so third items only span two columns. -->
+        <div
+          v-for="(stat, i) in allStats"
+          :key="i"
+          class="col-span-4"
+          :class="(i + 1) % 3 === 0 ? 'lg:col-span-2' : 'lg:col-span-3'"
+        >
+          <p class="label text-subtitle">{{ stat.metricLabel }}</p>
+          <p>
+            <span :class="{ 'text-stats-xl': !isNaN(stat.metricValue) }">
+              {{ stat.metricValue }}
+            </span>
+            <span class="text-body-xs text-gray-mid-dark uppercase">{{
+              unitLabel(stat.metricUnit)
+            }}</span>
+          </p>
+        </div>
+        <div
+          v-if="status !== ''"
+          class="lg:col-span-3 col-span-4"
+        >
+          <p class="label text-subtitle">Status</p>
+          {{ status }}
+        </div>
+        <div
+          v-if="robotDestinations.length > 0"
+          class="lg:col-span-4 col-span-8"
+        >
+          <p class="label text-subtitle">Potential Destinations</p>
+          {{ robotDestinations.map((d) => d.destination).join(', ') }}
+        </div>
+      </div>
+      <div
+        v-if="animalAnalogIcon && animalAnalogIcon.src"
+        class="lg:col-span-2 lg:row-span-2 lg:text-left gap-y-8 col-span-10 -ml-8 text-center"
+      >
+        <picture class="block">
+          <source
+            :srcset="animalAnalogIcon.webp.url"
+            type="image/webp"
+          />
+          <img
+            class="lg:mx-0 mx-auto bg-white rounded-full"
+            :src="animalAnalogIcon.src.url"
+            width="160"
+            height="160"
+            alt=""
+          />
+        </picture>
+        <p
+          v-if="animalAnalogName"
+          class="text-subtitle mt-4"
+        >
+          {{ `Animal Analog: ${animalAnalogName}` }}
+        </p>
+      </div>
+    </div>
+    <div class="bg-gray-light col-start-container-end col-end-bleed sm:block hidden"></div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+
+export const metricUnits = {
+  unitless: '',
+  gram: 'Gram',
+  grams: 'Grams',
+  kilogram: 'Kilogram',
+  kilograms: 'Kilograms',
+  meter: 'Meter',
+  meters: 'Meters',
+  kilometer: 'Kilometer',
+  kilometers: 'Kilometers',
+  'm/s': 'm/s'
+} as const
+export type MetricUnit = keyof typeof metricUnits
+export type MetricUnitLabel = (typeof metricUnits)[MetricUnit]
+
+export type AlternativeStat = {
+  metricLabel: string
+  metricValue: number
+  metricUnit: MetricUnit
+}
+
+/**
+ * Displays robot-related metrics or metadata. All fields optional.
+ */
+export default defineComponent({
+  name: 'RoboticsDetailStats',
+  components: {},
+  props: {
+    mass: Number,
+    height: Number,
+    speed: Number,
+    // status strings provided by https://github.com/nasa-jpl/www-backend/blob/0b2f934d0c1e3c09a52dbe42fe462f162c9f929b/cms/robotics/models.py#L262
+    status: {
+      type: String
+    },
+    animalAnalogIcon: {
+      type: Object as PropType<{ src: { url: string }; webp: { url: string } } | null>
+    },
+    animalAnalogName: String,
+    robotDestinations: {
+      type: Array as PropType<{ destination: string }[]>,
+      required: true
+    },
+    alternativeStats: {
+      type: Array as PropType<AlternativeStat[]>,
+      required: true
+    }
+  },
+  computed: {
+    hasContent(): boolean {
+      return Boolean(
+        this.allStats.length > 0 ||
+          this.status !== '' ||
+          this.robotDestinations.length > 0 ||
+          this.animalAnalogIcon
+      )
+    },
+    allStats(): AlternativeStat[] {
+      const baseStats: AlternativeStat[] = []
+
+      if (this.mass || this.mass === 0) {
+        if (this.mass === 1) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass,
+            metricUnit: 'gram'
+          })
+        } else if (this.mass === 1000) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass / 1000,
+            metricUnit: 'kilogram'
+          })
+        } else if (this.mass > 1000) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass / 1000,
+            metricUnit: 'kilograms'
+          })
+        } else {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass,
+            metricUnit: 'grams'
+          })
+        }
+      }
+
+      if (this.height || this.height === 0) {
+        if (this.height === 1) {
+          baseStats.push({
+            metricLabel: 'Height',
+            metricValue: this.height,
+            metricUnit: 'meter'
+          })
+        } else if (this.height === 1000) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.height / 1000,
+            metricUnit: 'kilometer'
+          })
+        } else if (this.height > 1000) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.height / 1000,
+            metricUnit: 'kilometers'
+          })
+        } else {
+          baseStats.push({
+            metricLabel: 'Height',
+            metricValue: this.height,
+            metricUnit: 'meters'
+          })
+        }
+      }
+
+      if (this.speed || this.speed === 0) {
+        baseStats.push({
+          metricLabel: 'Speed',
+          metricValue: this.speed,
+          metricUnit: 'm/s'
+        })
+      }
+
+      return baseStats.concat(this.alternativeStats)
+    }
+  },
+  methods: {
+    unitLabel(unit: MetricUnit): MetricUnitLabel | MetricUnit {
+      return metricUnits[unit] ?? unit
+    }
+  }
+})
+</script>
+<style lang="scss">
+.RoboticsDetailStats {
+  .label {
+    @apply font-semibold mb-4 text-jpl-red-dark;
+  }
+}
+</style>

package/src/components/RoboticsDetailStats/RoboticsDetailStatsMini.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    v-if="hasContent"
+    class="RoboticsDetailStatsMini text-gray-dark text-body-lg sm:flex sm:text-left text-center"
+    :class="allStats.length > 2 ? 'justify-between' : 'justify-start'"
+  >
+    <div
+      v-for="(stat, i) in allStats"
+      :key="i"
+      class="stat sm:mb-0 mb-6"
+      :class="allStats.length > 2 ? 'mr-0' : 'mr-16'"
+    >
+      <p class="text-subtitle text-gray-mid-dark mb-4">
+        {{ stat.metricLabel }}
+      </p>
+      <template
+        v-if="
+          (stat.metricUnit === 'gram' ||
+            stat.metricUnit === 'grams' ||
+            stat.metricUnit === 'kilogram' ||
+            stat.metricUnit === 'kilograms' ||
+            stat.metricUnit === 'meter' ||
+            stat.metricUnit === 'meters' ||
+            stat.metricUnit === 'kilometer' ||
+            stat.metricUnit === 'kilometers' ||
+            stat.metricUnit === 'm/s') &&
+          unitPair(stat.metricUnit)
+        "
+      >
+        <BaseUnitToggle
+          v-slot="slotProps"
+          :unit-pair="unitPair(stat.metricUnit)"
+          :value="parseFloat(stat.metricValue)"
+          :value-system="'metric'"
+        >
+          <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+        </BaseUnitToggle>
+      </template>
+      <template v-else>
+        <div>
+          <p :class="{ 'text-stats-xl': !isNaN(stat.metricValue) }">
+            {{ stat.metricValue }}
+          </p>
+          <p class="text-body-xs text-gray-mid-dark pt-3 uppercase">
+            {{ unitLabel(stat.metricUnit) }}
+          </p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import {
+  metricUnits,
+  MetricUnit,
+  MetricUnitLabel,
+  AlternativeStat
+} from './RoboticsDetailStats.vue'
+import BaseUnitToggle from './../BaseUnitToggle/BaseUnitToggle.vue'
+
+/**
+ * Displays the first three robotics stats.
+ */
+export default defineComponent({
+  name: 'RoboticsDetailStatsMini',
+  components: {
+    BaseUnitToggle
+  },
+  props: {
+    mass: Number,
+    height: Number,
+    speed: Number,
+    alternativeStats: {
+      type: Array as PropType<AlternativeStat[]>,
+      required: true
+    }
+  },
+  computed: {
+    hasContent(): boolean {
+      return Boolean(this.allStats.length > 0)
+    },
+    allStats(): AlternativeStat[] {
+      const baseStats: AlternativeStat[] = []
+
+      if (this.mass || this.mass === 0) {
+        if (this.mass === 1) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass,
+            metricUnit: 'gram'
+          })
+        } else if (this.mass === 1000) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass / 1000,
+            metricUnit: 'kilogram'
+          })
+        } else if (this.mass >= 1000) {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass / 1000,
+            metricUnit: 'kilograms'
+          })
+        } else {
+          baseStats.push({
+            metricLabel: 'Mass',
+            metricValue: this.mass,
+            metricUnit: 'grams'
+          })
+        }
+      }
+
+      if (this.height || this.height === 0) {
+        if (this.height === 1) {
+          baseStats.push({
+            metricLabel: 'Height',
+            metricValue: this.height,
+            metricUnit: 'meter'
+          })
+        } else if (this.height === 1000) {
+          baseStats.push({
+            metricLabel: 'Height',
+            metricValue: this.height / 1000,
+            metricUnit: 'kilometer'
+          })
+        } else if (this.height > 1000) {
+          baseStats.push({
+            metricLabel: 'Height',
+            metricValue: this.height / 1000,
+            metricUnit: 'kilometers'
+          })
+        } else {
+          baseStats.push({
+            metricLabel: 'Height',
+            metricValue: this.height,
+            metricUnit: 'meters'
+          })
+        }
+      }
+
+      if (this.speed || this.speed === 0) {
+        baseStats.push({
+          metricLabel: 'Speed',
+          metricValue: this.speed,
+          metricUnit: 'm/s'
+        })
+      }
+      // only return the first three stats
+      return baseStats.concat(this.alternativeStats).splice(0, 3)
+    }
+  },
+  methods: {
+    unitLabel(unit: MetricUnit): MetricUnitLabel | MetricUnit {
+      return metricUnits[unit] ?? unit
+    },
+    unitPair(unit: string): string | null {
+      if (unit === 'gram' || unit === 'grams') {
+        return 'G_OZ'
+      } else if (unit === 'kilogram' || unit === 'kilograms') {
+        return 'LB_KG'
+      } else if (unit === 'meter' || unit === 'meters') {
+        return 'M_FT'
+      } else if (unit === 'kilometer' || unit === 'kilometers') {
+        return 'MI_KM'
+      } else if (unit === 'm/s') {
+        return 'MS_FS'
+      }
+      return null
+    }
+  }
+})
+</script>
+<style lang="scss">
+.RoboticsDetailStatsMini {
+  > .stat {
+    min-width: 5ch;
+  }
+}
+</style>

package/src/components/SearchFilterGroup/SearchFilterGroup.stories.js

@@ -0,0 +1,59 @@
+import SearchFilterGroup from './SearchFilterGroup.vue'
+
+export default {
+  title: 'Components/Search/SearchFilterGroup',
+  component: SearchFilterGroup,
+  excludeStories: /.*Data$/
+}
+
+// template
+const SearchFilterGroupTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { SearchFilterGroup },
+  template: `<SearchFilterGroup
+    :filter-by="filterBy"
+    :buckets="buckets"
+    :group-key="groupKey"
+    :group-title="groupTitle"
+    :truncate-filters="truncateFilters"
+/>`
+})
+
+export const TopicFilter = {
+  args: {
+    filterBy: [],
+    buckets: [
+      { key: 'Solar System', doc_count: 3308 },
+      { key: 'Earth', doc_count: 1179 },
+      { key: 'Stars and Galaxies', doc_count: 979 },
+      { key: 'Technology', doc_count: 480 }
+    ],
+    groupKey: 'topics',
+    groupTitle: 'Topic',
+    truncateFilters: false
+  }
+}
+export const DateFilter = {
+  args: {
+    filterBy: [],
+    buckets: [
+      { key_as_string: '2021', key: 1609459200000, doc_count: 5 },
+      { key_as_string: '2020', key: 1577836800000, doc_count: 231 },
+      { key_as_string: '2019', key: 1546300800000, doc_count: 245 },
+      { key_as_string: '2018', key: 1514764800000, doc_count: 276 },
+      { key_as_string: '2017', key: 1483228800000, doc_count: 314 },
+      { key_as_string: '2016', key: 1451606400000, doc_count: 311 },
+      { key_as_string: '2015', key: 1420070400000, doc_count: 377 },
+      { key_as_string: '2014', key: 1388534400000, doc_count: 418 },
+      { key_as_string: '2013', key: 1356998400000, doc_count: 358 },
+      { key_as_string: '2012', key: 1325376000000, doc_count: 389 },
+      { key_as_string: '2011', key: 1293840000000, doc_count: 367 },
+      { key_as_string: '2010', key: 1262304000000, doc_count: 389 },
+      { key_as_string: '2009', key: 1230768000000, doc_count: 172 },
+      { key_as_string: '2008', key: 1199145600000, doc_count: 227 }
+    ],
+    groupKey: 'results_by_year',
+    groupTitle: 'Date',
+    truncateFilters: true
+  }
+}

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -0,0 +1,221 @@
+<template>
+  <div
+    v-if="
+      typeof groupKey !== 'undefined' &&
+      typeof buckets !== 'undefined' &&
+      bucketsLength >= 1 &&
+      !hideFilterGroups.includes(groupKey)
+    "
+    :id="`filterGroup_${groupKey}`"
+    class="border-gray-light-mid col-span-3 pb-4 mb-4 border-b"
+  >
+    <!-- bucket key param -->
+    <legend class="md:mb-3 text-body-md mb-2 font-bold leading-normal tracking-wide">
+      {{ groupTitle }}
+    </legend>
+    <div
+      v-for="(bucket, index) in buckets"
+      :key="bucket.key"
+      ref="buckets"
+      class="form-group form-check"
+    >
+      <!-- correct for zero based index -->
+      <div
+        v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
+        class="flex my-2"
+      >
+        <input
+          :id="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
+          v-model="filterByHandler"
+          type="checkbox"
+          :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
+          class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+        />
+        <!-- 'key_as_string' exists for dates to have a human readable version -->
+        <label
+          :for="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
+          class="form-check-label pl-2 tracking-normal align-middle"
+        >
+          {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
+          <span class="text-gray-mid"> ({{ bucket.doc_count.toLocaleString() }}) </span>
+        </label>
+      </div>
+    </div>
+    <!--
+      TODO: this logic could probably cleaner. It flows in the opposite way of the loop
+      for making checkboxes above.
+      only show button if we want to truncate the list and/or we're highter than limit
+    -->
+
+    <div v-show="truncateFilters && bucketsLength > checkbox.initialLimit">
+      <button
+        class="can-hover:hover:underline text-primary mt-2"
+        :aria-expanded="!checkbox.showMore ? 'true' : 'false'"
+        aria-haspopup="true"
+        :aria-controls="`filterGroup_${groupKey}`"
+        @click="toggleShowMoreFilters()"
+      >
+        {{ checkbox.showMore == false ? 'Less' : 'More' }}
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import isEqual from 'lodash/isEqual'
+export default {
+  name: 'SearchFilterGroup',
+  props: {
+    filterBy: Array,
+    buckets: null,
+    hideFilterGroups: {
+      type: Array,
+      default: () => []
+    },
+    groupKey: {
+      type: String,
+      required: true
+    },
+    groupTitle: {
+      type: String,
+      required: false
+    },
+    truncateFilters: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['update:filterBy'],
+  data() {
+    return {
+      checkbox: {
+        checkboxLimit: 4,
+        showMore: true,
+        initialLimit: 4
+      }
+    }
+  },
+  computed: {
+    // to sync both ways parent <--> child
+    // ensures accurate filter visual state when using URL query strings
+    filterByHandler: {
+      get() {
+        return this.filterBy
+      },
+      set(newValue) {
+        this.$emit('update:filterBy', newValue)
+      }
+    },
+    bucketsLength() {
+      return this.buckets.length
+    }
+  },
+  watch: {
+    filterBy: {
+      // update URL with filter parameters
+      handler(newVal, oldVal) {
+        // using lodash to avoid discrepancies between comparing nested objects and arrays
+        if (!isEqual(newVal, oldVal)) {
+          let query = Object.assign({}, this.$route.query)
+          if (newVal.length > 0) {
+            query = {
+              ...this.$route.query,
+              [this.groupKey]: newVal.toString()
+            }
+          } else {
+            // clear the param from the URL if no value is passed
+            delete query[this.groupKey]
+          }
+          // using $router.push() ensures history is saved with each change to filters
+          this.$router.push({ query })
+        }
+      }
+    }
+  },
+  methods: {
+    generateId(value) {
+      let valueString = String(value)
+      valueString = valueString.split(' ').join('')
+      return `filter_${this.groupKey}_${valueString}`
+    },
+    toggleShowMoreFilters() {
+      if (this.checkbox.checkboxLimit === this.checkbox.initialLimit) {
+        this.checkbox.checkboxLimit = Infinity
+        this.checkbox.showMore = false
+
+        this.$nextTick(() => {
+          // Focus on first new rendered checkbox in list
+          this.$refs.buckets[this.checkbox.initialLimit].getElementsByTagName('input')[0].focus()
+        })
+      } else {
+        this.checkbox.checkboxLimit = this.checkbox.initialLimit
+        this.checkbox.showMore = true
+      }
+    },
+    prettyFilterNames(key) {
+      if (key === 'news.News') {
+        return 'News & Features'
+      }
+      if (key === 'home.HomePage') {
+        return 'Homepage'
+      }
+      if (key === 'missions.Mission') {
+        return 'Missions'
+      }
+      if (key === 'events.EventPage') {
+        return 'Events'
+      }
+      if (key === 'image_detail.ImageDetailPage') {
+        return 'Images'
+      }
+      if (key === 'audio_detail.AudioIndexPage') {
+        return 'Audio Index'
+      }
+      if (key === 'audio_detail.AudioDetailPage') {
+        return 'Audio'
+      }
+      if (key === 'infographics.InfographicsDetailPage') {
+        return 'Infographics'
+      }
+      if (key === 'image_detail.CuratedGalleryPage') {
+        return 'Curated Gallery'
+      }
+      if (key === 'topics.TopicPage') {
+        return 'Topics'
+      }
+      if (key === 'asteroid_watch.AsteroidWatchIndexPage') {
+        return 'Asteroid Watch Index'
+      }
+      if (key === 'asteroid_watch.AsteroidWatchContentPage') {
+        return 'Asteroid Watch'
+      }
+      if (key === 'missions.MissionsIndexPage') {
+        return 'Missions Index'
+      }
+      if (key === 'information_pages.ContentPage') {
+        return 'Information pages'
+      }
+      if (key === 'robotics.RobotPage') {
+        return 'Robots'
+      }
+      if (key === 'video_detail.VideoDetailPage') {
+        return 'Video'
+      }
+      if (key === 'podcasts.PodcastPage') {
+        return 'Podcasts'
+      }
+      if (key === 'go_pages.GoHomePage') {
+        return 'Go Sites'
+      }
+      if (key === 'press_kits.PressKitHomePage') {
+        return 'Press Kits'
+      }
+      if (key === 'profiles.ProfilePage') {
+        return 'People'
+      }
+      return key
+    }
+  }
+}
+</script>