@explorer-1/vue 0.0.0

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue

@@ -0,0 +1,104 @@
+<template>
+  <nuxt-link
+    v-if="data"
+    :to="data.url"
+    class="TopicDetailMissionCarouselItem group block cursor-pointer"
+  >
+    <div
+      class="can-hover:group-hover:scale-105 relative transition-transform duration-200 ease-in transform scale-100"
+    >
+      <div class="min-h-66 bg-black">
+        <BaseImagePlaceholder
+          v-if="data.thumbnailImage && data.thumbnailImage.src"
+          aspect-ratio="7:8"
+          dark-mode
+          no-logo
+        >
+          <BaseImage
+            :src="data.thumbnailImage.src.url"
+            :width="data.thumbnailImage.src.width"
+            :height="data.thumbnailImage.src.height"
+            alt=""
+            object-fit-class="cover"
+            image-class="w-full h-full"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+        <div
+          class="gradient-overlay bg-gradient-to-b from-transparent to-black min-h-1/2 absolute inset-x-0 bottom-0"
+        ></div>
+      </div>
+      <div class="absolute inset-x-0 bottom-0">
+        <div class="text-contrast p-4 text-white">
+          <p
+            v-if="data.title"
+            class="mb-1 text-xl font-semibold leading-tight"
+          >
+            {{ data.title }}
+          </p>
+          <p
+            v-if="data.status || data.showClock"
+            class="text-subtitle text-jpl-aqua"
+          >
+            <span class="sr-only">.</span>
+            <template v-if="data.showClock">
+              {{ clockTypeLabel || data.status }}
+            </template>
+            <template v-else>
+              {{ data.status }}
+            </template>
+            <span class="sr-only">.</span>
+          </p>
+        </div>
+        <MissionDetailStatsMicro
+          v-if="data.showClock"
+          class="-mt-1"
+          :show-clock="data.showClock"
+          :clock-type="data.clockType"
+          :start-date-time="data.startDateTime"
+        />
+      </div>
+    </div>
+  </nuxt-link>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { clockTypes } from '../MissionDetailStats/MissionDetailStats.vue'
+import type { ClockType } from '../MissionDetailStats/MissionDetailStats.vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import MissionDetailStatsMicro from './../MissionDetailStats/MissionDetailStatsMicro.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+
+export interface Slide {
+  clockType: ClockType
+  showClock: boolean
+  startDateTime: string
+  status: string
+  thumbnailImage: Partial<ImageObject>
+  title: string
+  url: string
+}
+
+export default defineComponent({
+  name: 'TopicDetailMissionCarouselItem',
+  components: {
+    MissionDetailStatsMicro,
+    BaseImage,
+    BaseImagePlaceholder
+  },
+  props: {
+    data: {
+      type: Object as PropType<Slide>,
+      required: false
+    }
+  },
+  computed: {
+    clockTypeLabel(): string {
+      return clockTypes[this.data?.clockType as ClockType] || this.data?.clockType
+    }
+  }
+})
+</script>

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js

@@ -0,0 +1,84 @@
+import TopicDetailMissionSpotlight from './TopicDetailMissionSpotlight.vue'
+export default {
+  title: 'WWW/TopicDetail/TopicDetailMissionSpotlight',
+  component: TopicDetailMissionSpotlight,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*Data$/
+}
+
+export const TopicDetailMissionSpotlightData = {
+  url: '/missions/slug',
+  title: 'GRACE-FO',
+  summary: "The GRACE missions measure variations in gravity over Earth's surface. ",
+  heroImage: {
+    // beach
+    src: {
+      url: 'https://picsum.photos/id/973/1800/1200',
+      width: 1800,
+      height: 1200
+    },
+    // lake
+    srcSet:
+      'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+    // jungle
+    screenMd: {
+      url: 'https://picsum.photos/id/921/800/640'
+    },
+    // desert
+    screenSm: {
+      url: 'https://picsum.photos/id/247/640/900'
+    },
+    alt: 'Topic detail mission spotlight'
+  },
+  showClock: true,
+  showDistance: true,
+  clockType: 'time_in_orbit',
+  startDateTime: '2020-10-14 10:04:21+01:00',
+  distanceType: 'earth',
+  distanceValue: 4986444,
+  distanceApiUrls: ''
+}
+
+// stories
+export const MissionSpotlight = {
+  args: {
+    data: TopicDetailMissionSpotlightData
+  }
+}
+export const NoClock = {
+  args: {
+    data: {
+      ...TopicDetailMissionSpotlightData,
+      showClock: false
+    }
+  }
+}
+
+export const NoDistance = {
+  args: {
+    data: {
+      ...TopicDetailMissionSpotlightData,
+      showDistance: false
+    }
+  }
+}
+
+export const NoStats = {
+  args: {
+    data: {
+      ...TopicDetailMissionSpotlightData,
+      showClock: false,
+      showDistance: false
+    }
+  }
+}

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="data"
+    class="TopicDetailMissionSpotlight max-w-screen-3xl relative mx-auto"
+  >
+    <div class="absolute inset-0 z-10 bg-black">
+      <picture v-if="data.heroImage && data.heroImage.src">
+        <source
+          media="(min-width: 768px)"
+          :srcset="data.heroImage.srcSet"
+        />
+        <source
+          media="(min-width: 420px)"
+          :srcset="data.heroImage.screenMd.url"
+        />
+        <source :srcset="data.heroImage.screenSm.url" />
+        <img
+          class="object-cover w-full h-full"
+          :src="data.heroImage.src.url"
+          :width="data.heroImage.src.width"
+          :height="data.heroImage.src.height"
+          :alt="data.heroImage.alt"
+        />
+      </picture>
+    </div>
+    <div class="content-wrapper lg:flex lg:items-center relative z-20 w-full h-full">
+      <div
+        class="bg-gradient-to-t lg:bg-gradient-to-l from-transparent-w25 lg:from-transparent xl:from-transparent-w25 to-transparent-black-75 lg:to-transparent-black-75 absolute inset-0"
+      ></div>
+      <div class="pb-80 lg:pb-14 relative w-full pt-8">
+        <div class="lg:BaseGrid lg:pt-0 container mx-auto">
+          <div
+            class="lg:px-10 2xl:px-0 lg:pt-10 lg:pb-14 xl:col-end-6 col-start-1 col-end-10 px-4 pb-10"
+          >
+            <h2>
+              <span class="text-gray-light-mid text-contrast text-subtitle block mb-3">
+                {{ eyebrow }}
+              </span>
+              <div
+                class="lg:text-9xl md:text-8xl text-7xl lg:tracking-tight lg:leading-tighter text-contrast mb-4 font-medium leading-tight text-white"
+              >
+                {{ data.title }}
+              </div>
+            </h2>
+            <p
+              class="text-body-lg lg:mb-10 text-contrast mb-5 font-normal leading-normal text-white"
+            >
+              {{ data.summary }}
+            </p>
+            <BaseButton
+              variant="primary"
+              :to="data.url"
+              >Explore</BaseButton
+            >
+          </div>
+        </div>
+        <MissionDetailStatsMini
+          v-if="data.showClock || data.showDistance"
+          :show-clock="data.showClock"
+          :show-distance="data.showDistance"
+          :clock-type="data.clockType"
+          :start-date-time="data.startDateTime"
+          :distance-type="data.distanceType"
+          :distance-value="data.distanceValue"
+          :distance-api-urls="data.distanceApiUrls"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import MissionDetailStatsMini from './../MissionDetailStats/MissionDetailStatsMini.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+
+export default defineComponent({
+  name: 'TopicDetailMissionSpotlight',
+  components: {
+    MissionDetailStatsMini,
+    BaseButton
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      eyebrow: 'Mission Spotlight'
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.TopicDetailMissionSpotlight {
+  .content-wrapper {
+    @screen lg {
+      min-height: 548px; // maintains 1440x770 aspect ratio
+    }
+    @screen xl {
+      min-height: 684px; // maintains 1440x770 aspect ratio
+    }
+    @screen 2xl {
+      min-height: 770px; // 1440x770
+    }
+    @screen 3xl {
+      min-height: 963px; // maintains 1440x770 aspect ratio
+    }
+  }
+}
+</style>

package/src/components/TopicDetailMore/TopicDetailMore.stories.js

@@ -0,0 +1,221 @@
+import TopicDetailMore from './TopicDetailMore.vue'
+export default {
+  title: 'WWW/TopicDetail/TopicDetailMore',
+  component: TopicDetailMore,
+  excludeStories: /.*Data$/
+}
+
+export const TopicDetailMoreData = {
+  moreAboutTopic: [
+    {
+      __typename: 'ImageDetailPage',
+      date: '2020-11-12T23:56:46.346940+00:00',
+      label: 'Image',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'My Image Detail',
+      url: '/images/my-image-detail/'
+    },
+    {
+      __typename: 'News',
+      date: '2004-01-03T08:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Mars Exploration Rover Spirit Mission Status',
+      url: '/news/tiny-measurement-gives-big-boost-to-planet-hunt/'
+    },
+    {
+      __typename: 'News',
+      date: '2003-05-27T07:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Theatre in the Rectangle',
+      url: '/news/theatre-in-the-rectangle/'
+    },
+    {
+      __typename: 'News',
+      date: '2003-05-21T07:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Frozen Light: Cool NASA Research Holds Promise',
+      url: '/news/frozen-light-cool-nasa-research-holds-promise/'
+    },
+    {
+      __typename: 'News',
+      date: '2003-05-20T07:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Newly Discovered Star May Be Third-Closest',
+      url: '/news/newly-discovered-star-may-be-third-closest/'
+    },
+    {
+      __typename: 'News',
+      date: '2003-05-06T07:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Galaxy Evolution Explorer Mission Status',
+      url: '/news/galaxy-evolution-explorer-mission-status/'
+    },
+    {
+      __typename: 'News',
+      date: '2003-04-28T07:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Galaxy Evolution Explorer On Its Way',
+      url: '/news/galaxy-evolution-explorer-on-its-way/'
+    },
+    {
+      __typename: 'News',
+      date: '2003-04-22T07:00:00+00:00',
+      label: 'News',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Galaxy Evolution Explorer Looks Back in Time',
+      url: '/news/galaxy-evolution-explorer-looks-back-in-time/'
+    }
+  ],
+  moreAboutTopicCurated: [
+    {
+      __typename: 'PageChooserBlock',
+      page: {
+        label: 'Mission',
+        thumbnailImage: {
+          src: {
+            width: '600',
+            height: '400',
+            url: 'https://picsum.photos/600/400'
+          },
+          srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+        },
+        title: 'Autonomous Sciencecraft Experiment',
+        url: '/missions/autonomous-sciencecraft-experiment-ase/'
+      }
+    },
+    {
+      __typename: 'PageChooserBlock',
+      page: {
+        date: '2004-01-04T08:00:00+00:00',
+        label: 'News',
+        thumbnailImage: {
+          src: {
+            width: '600',
+            height: '400',
+            url: 'https://picsum.photos/600/400'
+          },
+          srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+        },
+        title: 'Mars Exploration Rover Spirit Mission Status',
+        url: '/news/archaeologists-dig-space/'
+      }
+    },
+    {
+      __typename: 'ExternalLinkCard',
+      date: '2020-11-03',
+      label: 'Link Label',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Title for Link Card',
+      url: 'https://nasa.gov'
+    }
+  ]
+}
+
+// stories
+export const Default = {
+  args: {
+    topic: 'Mars',
+    more: TopicDetailMoreData.moreAboutTopic,
+    moreCurated: TopicDetailMoreData.moreAboutTopicCurated
+  },
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    components: { TopicDetailMore },
+    template: `<TopicDetailMore v-bind="args"><div class="w-full p-10 bg-black text-white">Slot for Mission Spotlight</div></TopicDetailMore>`
+  })
+}
+
+export const NoSpotlight = {
+  args: {
+    topic: 'Mars',
+    more: TopicDetailMoreData.moreAboutTopic,
+    moreCurated: TopicDetailMoreData.moreAboutTopicCurated
+  }
+}
+
+export const ShortList = {
+  args: {
+    topic: 'Mars',
+    more: [],
+    moreCurated: TopicDetailMoreData.moreAboutTopicCurated
+  }
+}
+
+export const NoList = {
+  args: {
+    topic: 'Mars',
+    more: [],
+    moreCurated: []
+  }
+}

package/src/components/TopicDetailMore/TopicDetailMore.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="TopicDetailMore max-w-screen-3xl relative mx-auto">
+    <template v-if="theData && theData.length">
+      <div class="lg:BaseGrid mt-18 lg:px-0 container px-4 mx-auto mb-12">
+        <h2
+          class="font-primary text-gray-dark lg:text-6xl col-span-11 col-start-2 text-3xl font-semibold leading-normal tracking-normal uppercase"
+        >
+          More About {{ topic }}
+        </h2>
+      </div>
+      <template
+        v-for="(item, index) in theData"
+        :key="index"
+      >
+        <TopicDetailMoreVisibility>
+          <div class="md:BaseGrid lg:px-0 container px-4 mx-auto">
+            <TopicDetailMoreItem
+              class="md:max-w-none md:mx-0 lg:mb-0 max-w-lg row-span-1 mx-auto mb-10"
+              :class="gridPlacement(index)"
+              :data="item"
+            />
+          </div>
+          <!-- show slot contents after fourth item -->
+          <template v-if="index === 3 && $slots.default">
+            <TopicDetailMoreVisibility class="lg:my-28 my-16">
+              <slot />
+            </TopicDetailMoreVisibility>
+          </template>
+        </TopicDetailMoreVisibility>
+      </template>
+    </template>
+    <!-- if no moreAbout data or if the data is less then 4 cards, show the slot at the end -->
+    <template v-if="$slots.default && (!theData || theData.length < 4)">
+      <div :class="{ 'mt-16 lg:mt-28': theData.length }">
+        <slot />
+      </div>
+    </template>
+
+    <!-- TODO: modify search to filter all by topic. Right now this only uses topic title as the search terms -->
+    <!-- TODO: modify "to" to use a route object. Had to change to string to work with BaseButton which needs refactoring to accommodate a route object -->
+    <div class="flex justify-center">
+      <BaseButton
+        class="lg:mt-18 mt-10"
+        :aria-label="'More ' + topic"
+        variant="secondary"
+        :to="`/search?topics=${topic}`"
+      >
+        More
+        <template #icon><IconCaret class="ml-1 text-sm" /></template>
+      </BaseButton>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { Card } from '../../interfaces'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconCaret from './../Icons/IconCaret.vue'
+import TopicDetailMoreVisibility from './../TopicDetailMore/TopicDetailMoreVisibility.vue'
+import TopicDetailMoreItem from './../TopicDetailMoreItem/TopicDetailMoreItem.vue'
+
+export default defineComponent({
+  name: 'TopicDetailMore',
+  components: {
+    BaseButton,
+    IconCaret,
+    TopicDetailMoreVisibility,
+    TopicDetailMoreItem
+  },
+  props: {
+    topic: {
+      type: String,
+      required: false,
+      default: 'Topic'
+    },
+    more: {
+      type: Array as PropType<Card[]>,
+      required: false
+    },
+    moreCurated: {
+      type: Array as PropType<Card[]>,
+      required: false
+    }
+  },
+  computed: {
+    theData(): Card[] {
+      // combining the two and returning the first 8
+      let arr: Card[] = []
+      if (this.moreCurated && this.more) {
+        arr = this.moreCurated.concat(this.more)
+      } else if (this.more) {
+        arr = this.more
+      }
+      return arr.slice(0, 8)
+    }
+  },
+  methods: {
+    gridPlacement(index: number) {
+      if (index === 0) {
+        return 'col-start-2 col-span-6'
+      } else if (index === 1) {
+        return 'lg:col-start-9 lg:col-span-4 md:col-start-6 md:col-span-6 lg:-mt-28'
+      } else if (index === 2) {
+        return 'lg:col-start-4 lg:col-span-4 md:col-start-2 md:col-span-6 lg:-mt-28'
+      } else if (index === 3) {
+        return 'lg:col-start-9 lg:col-span-4 md:col-start-6 md:col-span-6  lg:-mt-28'
+      } else if (index === 4) {
+        if (!this.$slots.default) {
+          return 'col-start-2 col-span-6 lg:-mt-28'
+        }
+        return 'col-start-2 col-span-6'
+      } else if (index === 5) {
+        return 'lg:col-start-6 lg:col-span-6 md:col-start-6 md:col-span-6 lg:mt-28'
+      } else if (index === 6) {
+        return 'lg:col-start-1 lg:col-span-4 md:col-start-2 md:col-span-6 lg:-mt-28'
+      } else if (index === 7) {
+        return 'lg:col-start-6 lg:col-span-4 md:col-start-6 md:col-span-6 lg:-mt-28'
+      }
+      return ''
+    }
+  }
+})
+</script>

package/src/components/TopicDetailMore/TopicDetailMoreVisibility.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-observe-visibility="{
+      callback: visibilityChanged,
+      throttle: 0,
+      once: true
+    }"
+    class="transition-all duration-1000 ease-out transform"
+    :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-32'"
+  >
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ObserveVisibility } from 'vue-observe-visibility'
+
+export default defineComponent({
+  name: 'TopicDetailMoreVisibility',
+  directives: {
+    ObserveVisibility
+  },
+  data() {
+    return {
+      isVisible: false,
+      hasIntersectionObserver: true
+    }
+  },
+  mounted() {
+    this.featureDetection()
+  },
+  methods: {
+    visibilityChanged(visibility: boolean) {
+      if (this.hasIntersectionObserver) {
+        this.isVisible = visibility
+      }
+    },
+    featureDetection() {
+      if (
+        !('IntersectionObserver' in window) ||
+        !('IntersectionObserverEntry' in window) ||
+        !('intersectionRatio' in window.IntersectionObserverEntry.prototype)
+      ) {
+        // intersection observer not supported
+        this.hasIntersectionObserver = false
+        this.isVisible = true
+      }
+    }
+  }
+})
+</script>