@explorer-1/vue 0.0.0

package/src/components/TheFooter/TheFooter.vue

@@ -0,0 +1,228 @@
+<template>
+  <footer class="TheFooter bg-dark-blue edu:bg-stars edu:bg-primary text-white relative z-20">
+    <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">
+        <!-- footerNavigation -->
+        <div
+          v-if="data && data.footerNavigation"
+          class="sm:grid grid-cols-9 gap-6"
+        >
+          <div
+            v-for="(item, index) in data.footerNavigation"
+            :key="index"
+            class="sm:mb-3 xl:col-span-2 md:col-span-3 col-span-4 mb-8"
+          >
+            <div class="text-subtitle text-blue edu:text-white mb-3">
+              {{ getLinkText(item.titleLink) }}
+            </div>
+            <BaseLink
+              v-for="(link, index_links) in item.links"
+              :key="index_links"
+              variant="none"
+              link-class="can-hover:hover:underline inline-block px-4 py-1 -ml-4"
+              :href="link.path && !getRouterLink(link) ? link.path : null"
+              :to="getRouterLink(link) ? getRouterLink(link) : null"
+            >
+              {{ getLinkText(link) }}
+            </BaseLink>
+          </div>
+        </div>
+      </div>
+      <!-- footer extras -->
+      <div class="footer-extras lg:col-span-3 col-span-12">
+        <!-- email sign up -->
+        <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">
+          Get the Latest from JPL
+        </div>
+        <TheFooterSignUp class="lg:mb-10 mb-8" />
+        <!-- social media -->
+        <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">Follow Us</div>
+        <NavSocial
+          class="lg:mb-14 mb-12"
+          dark
+        />
+        <!-- caltech aside -->
+        <BaseLink
+          variant="none"
+          href="https://caltech.edu"
+          aria-label="Caltech"
+          class="lg:mb-8 mb-5"
+          link-class="inline-block"
+        >
+          <LogoCaltech class="lg:text-base text-sm text-white" />
+        </BaseLink>
+        <p class="mb-12">
+          JPL is a federally funded research and development center managed for NASA by Caltech.
+        </p>
+      </div>
+    </div>
+    <!-- more from JPL buttons / links -->
+    <div
+      v-if="data && data.footerMoreFromJpl"
+      class="3xl:px-0 container px-4 mx-auto mt-5"
+    >
+      <div class="text-subtitle text-blue edu:text-white mb-5">More from JPL</div>
+      <div class="lg:block hidden">
+        <BaseButton
+          v-for="(item, index) in data.footerMoreFromJpl"
+          :key="index"
+          :href="item.path"
+          :to="item.linkPage ? item.linkPage.url : ''"
+          :target="item.path ? '_blank' : '_self'"
+          variant="dark"
+          class="mb-5 mr-8"
+        >
+          {{ getLinkText(item) }}
+        </BaseButton>
+      </div>
+      <!-- Repeated as BaseLink because the style is so drastically different between desktop and mobile -->
+      <!-- TODO: achieve this completely with CSS and not two different components (much refactor) -->
+      <div class="lg:hidden auto-col-2">
+        <BaseLink
+          v-for="(item, index) in data.footerMoreFromJpl"
+          :key="index"
+          variant="none"
+          link-class="can-hover:hover:underline inline-block px-4 py-1 -ml-4"
+          :href="item.path ? item.path : null"
+          :to="item.linkPage ? item.linkPage.url : null"
+        >
+          {{ getLinkText(item) }}
+        </BaseLink>
+      </div>
+    </div>
+    <!-- Dark section of footer -->
+    <div class="bg-opacity-15 lg:py-16 lg:mt-10 pt-10 pb-3 mt-8 bg-black">
+      <div class="3xl:px-0 container px-4 mx-auto">
+        <div v-if="data && data.relatedNasaSites">
+          <div class="text-subtitle text-blue edu:text-white mb-5">Related NASA Sites</div>
+          <div class="auto-col-4">
+            <BaseLink
+              v-for="(item, index) in data.relatedNasaSites"
+              :key="index"
+              variant="none"
+              link-class="can-hover:hover:underline inline-block px-4 py-1 -ml-4"
+              :href="item.path ? item.path : null"
+              :to="item.linkPage ? item.linkPage.url : null"
+            >
+              {{ getLinkText(item) }}
+            </BaseLink>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- footer meta. complex layout markup bc of differences between mobile / desktop -->
+    <div
+      class="bg-opacity-15 border-opacity-40 lg:border-t pt-5 pb-3 text-sm bg-black border-black"
+    >
+      <div class="3xl:px-0 lg:flex lg:flex-wrap lg:px-4 lg:container justify-between mx-auto">
+        <div
+          v-if="data && data.footerLinks"
+          class="divide-opacity-40 lg:justify-start lg:-ml-4 flex flex-wrap justify-center mb-2 divide-x divide-white"
+        >
+          <BaseLink
+            v-for="(item, index) in data.footerLinks"
+            :key="index"
+            variant="none"
+            class="lg:mb-2 mb-5"
+            link-class="can-hover:hover:underline inline-block px-4 py-1 font-bold leading-none"
+            :href="item.path ? item.path : null"
+            :to="item.linkPage ? item.linkPage.url : null"
+          >
+            {{ getLinkText(item) }}
+          </BaseLink>
+        </div>
+        <div
+          v-if="data && data.footerMeta"
+          class="lg:text-left lg:border-0 border-opacity-40 lg:pt-0 lg:px-0 px-4 pt-5 mb-4 text-center border-t border-black"
+        >
+          <div
+            v-if="commitSha"
+            class="lg:inline-block lg:mb-0 block px-3 mb-2"
+          >
+            <span class="text-gray-light font-bold">Version:</span>
+            <span>{{ commitSha }}</span>
+          </div>
+          <div
+            v-for="(item, index) in data.footerMeta"
+            :key="index"
+            class="lg:inline-block lg:mb-0 block mb-2"
+            :class="{ 'ml-5': index !== 0 }"
+          >
+            <span class="font-bold">{{ item.label }}:</span>
+            <span>{{ item.text }}</span>
+          </div>
+        </div>
+        <div v-else>
+          <div
+            v-if="commitSha != null"
+            class="lg:inline-block lg:mb-0 block px-3 mb-2"
+          >
+            <span class="text-gray-light font-bold">Version:</span>
+            <span>{{ commitSha }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import NavSocial from './../NavSocial/NavSocial.vue'
+import TheFooterSignUp from './../TheFooter/TheFooterSignUp.vue'
+import LogoCaltech from './../LogoCaltech/LogoCaltech.vue'
+
+export default defineComponent({
+  name: 'TheFooter',
+  components: {
+    BaseLink,
+    BaseButton,
+    NavSocial,
+    TheFooterSignUp,
+    LogoCaltech
+  },
+  props: {
+    data: {
+      type: Object || null,
+      required: false,
+      default: null
+    },
+    commitSha: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    getLinkText(link) {
+      return mixinGetLinkText(link)
+    },
+    getRouterLink(link) {
+      return mixinGetRouterLink(link)
+    }
+  }
+})
+</script>
+<style lang="scss">
+.TheFooter {
+  .auto-col-2 {
+    @screen sm {
+      column-count: 2;
+    }
+  }
+
+  .auto-col-4 {
+    @screen sm {
+      column-count: 2;
+    }
+    @screen lg {
+      column-count: 3;
+    }
+    @screen 2xl {
+      column-count: 4;
+    }
+  }
+}
+</style>

package/src/components/TheFooter/TheFooterSignUp.vue

@@ -0,0 +1,61 @@
+<template>
+  <form class="TheFooterSignup">
+    <div class="border-opacity-40 relative flex items-center border border-white">
+      <input
+        v-model="email"
+        class="EmailInput border-0 text-opacity-90 pl-14 relative z-10 w-full py-3 pr-3 text-sm text-white bg-transparent"
+        type="email"
+        name="email"
+        required
+        placeholder="Enter your email address"
+        aria-label="Email"
+      />
+      <div class="absolute inset-0 flex items-center">
+        <button
+          type="submit"
+          class="relative z-20 p-3 pl-5"
+          aria-label="Submit"
+          @click.prevent="submit"
+        >
+          <IconSocialEmail class="text-xl text-white" />
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import IconSocialEmail from './../Icons/IconSocialEmail.vue'
+
+export default defineComponent({
+  name: 'TheFooterSignUp',
+  components: {
+    IconSocialEmail
+  },
+  data() {
+    return {
+      email: null
+    }
+  },
+  methods: {
+    submit() {
+      // TODO: Make it work w/ Router Push and get callback from iContact API
+      // this.$router.push({
+      //   name: 'JPL Newsletter Signup',
+      //   path: '/newsletter-signup',
+      //   query: {
+      //     email: this.email,
+      //   },
+      // })
+      window.location.href = '/newsletter-signup?email=' + this.email
+    }
+  }
+})
+</script>
+<style lang="scss">
+.TheFooterSignup {
+  .EmailInput::placeholder {
+    @apply text-white text-opacity-40;
+  }
+}
+</style>

package/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js

@@ -0,0 +1,106 @@
+import ThumbnailCarousel from './ThumbnailCarousel.vue'
+
+export default {
+  title: 'Components/ThumbnailCarousel',
+  component: ThumbnailCarousel,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Ideal for use in a tabbed carousel. See `PodcastSeriesCarousel` and `PageImageDetail` for usage examples. Styled with three cards and a basic card style with a square image.'
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const ThumbnailCarouselData = {
+  slides: [
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-1',
+      title: 'Episode 1',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    },
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-2',
+      title: 'Episode 2',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    },
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-3',
+      title: 'Episode 3',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    },
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-4',
+      title: 'Episode 4',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    },
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-5',
+      title: 'Episode 5',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    },
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-6',
+      title: 'Episode 6',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    },
+    {
+      url: '/podcasts/on-a-mission/season-1/episode-7',
+      title: 'Episode 7',
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/430/430',
+          width: 430,
+          height: 430
+        },
+        alt: 'Alt text'
+      }
+    }
+  ]
+}
+
+export const Default = { args: ThumbnailCarouselData }

package/src/components/ThumbnailCarousel/ThumbnailCarousel.vue

@@ -0,0 +1,76 @@
+<template>
+  <MixinCarousel
+    v-if="slides"
+    class="ThumbnailCarousel"
+    :initial-slide="initialSlide"
+    :slides-per-view="3"
+  >
+    <!-- Slides -->
+    <SearchResultGridItem
+      v-for="(item, index) in slides"
+      :key="index"
+      :url="item.url"
+      :title="item.title"
+      :image="item.thumbnailImage"
+      class="swiper-slide"
+    />
+  </MixinCarousel>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
+import SearchResultGridItem from './../SearchResultGridItem/SearchResultGridItem.vue'
+
+interface Slide {
+  url: string
+  title: string
+  thumbnailImage: Partial<ImageObject>
+}
+export default defineComponent({
+  name: 'ThumbnailCarousel',
+  components: {
+    MixinCarousel,
+    SearchResultGridItem
+  },
+  props: {
+    slides: {
+      type: Array as PropType<Partial<Slide>[]>,
+      required: false
+    },
+    initialSlide: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  }
+})
+</script>
+<style lang="scss">
+.ThumbnailCarousel {
+  &.-cards {
+    .swiper {
+      .swiper-navigation {
+        padding-top: 29.5%;
+
+        .swiper-prev,
+        .swiper-next {
+          @apply transform -translate-y-1/2;
+        }
+      }
+    }
+  }
+
+  .nuxt-link-exact-active {
+    > p {
+      @apply font-semibold;
+
+      span {
+        padding-bottom: 0.2rem;
+        @apply border-b-2 border-jpl-red;
+      }
+    }
+  }
+}
+</style>

package/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js

@@ -0,0 +1,93 @@
+import TopicDetailMissionCarousel from './TopicDetailMissionCarousel.vue'
+export default {
+  title: 'WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarousel',
+  component: TopicDetailMissionCarousel,
+  excludeStories: /.*Data$/
+}
+
+export const TopicDetailMissionCarouselData = [
+  {
+    clockType: 'time_in_orbit',
+    showClock: true,
+    startDateTime: '2018-10-22T19:00:00+00:00',
+    status: 'current',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/560/620',
+        width: 560,
+        height: 620
+      }
+    },
+    title: 'Gravity Recovery and Climate Experiment Follow-On',
+    url: '/missions/gravity-recovery-and-climate-experiment-follow-on-grace-fo/'
+  },
+  {
+    clockType: 'time_on_mars',
+    showClock: true,
+    startDateTime: '2018-05-05T15:00:00+00:00',
+    status: 'current',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/560/620',
+        width: 560,
+        height: 620
+      }
+    },
+    title: 'InSight',
+    url: '/missions/insight/'
+  },
+  {
+    clockType: 'countdown',
+    showClock: false,
+    startDateTime: null,
+    status: 'current',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/560/620',
+        width: 560,
+        height: 620
+      }
+    },
+    title: 'Atmospheric Infrared Sounder',
+    url: '/missions/atmospheric-infrared-sounder-airs/'
+  },
+  {
+    clockType: 'countdown',
+    showClock: false,
+    startDateTime: null,
+    status: 'past',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/560/620',
+        width: 560,
+        height: 620
+      }
+    },
+    title: 'Dawn',
+    url: '/missions/dawn/'
+  },
+  {
+    clockType: 'countdown',
+    showClock: false,
+    startDateTime: null,
+    status: 'current',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/560/620',
+        width: 560,
+        height: 620
+      }
+    },
+    title: 'Deep Space Atomic Clock',
+    url: '/missions/deep-space-atomic-clock-dsac/'
+  }
+]
+// stories
+export const Default = {
+  args: {
+    title: 'Mars',
+    relatedMissionsLinkUrl: 'http://localhost:3000/missions?mission_target=Mars',
+    relatedMissionsLinkText: 'All Mars missions',
+    items: TopicDetailMissionCarouselData
+  }
+}

package/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    v-if="hasContent"
+    class="TopicDetailMissionCarousel overflow-hidden"
+  >
+    <div class="MixedBleedGrid 2xl:pl-0 pl-5 mb-10">
+      <div
+        class="col-start-indent-col-2 2xl:col-start-indent-col-3 col-end-bleed bg-gray-light lg:pl-0 lg:py-10 py-8 pl-5"
+      >
+        <!-- TODO: on mission listings page, use query params to filter search -->
+        <MixinCarousel
+          heading="Missions"
+          variant="tiles"
+          class="pb-5"
+          :center="false"
+          :slides-per-view="3"
+          :link="relatedMissionsLinkUrl ? relatedMissionsLinkUrl : undefined"
+          :link-title="relatedMissionsLinkText"
+        >
+          <!-- Slides -->
+          <TopicDetailMissionCarouselItem
+            v-for="(item, index) in items"
+            :key="index"
+            :data="item"
+            class="swiper-slide"
+          />
+        </MixinCarousel>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { Slide } from './../TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue'
+import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
+import TopicDetailMissionCarouselItem from './../TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue'
+
+export default defineComponent({
+  name: 'TopicDetailMissionCarousel',
+  components: {
+    MixinCarousel,
+    TopicDetailMissionCarouselItem
+  },
+  props: {
+    relatedMissionsLinkUrl: {
+      type: String,
+      required: false
+    },
+    relatedMissionsLinkText: {
+      type: String,
+      required: false
+    },
+    items: {
+      type: Array as PropType<Slide[]>,
+      required: false
+    }
+  },
+  computed: {
+    hasContent() {
+      if (this.items && this.items.length) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js

@@ -0,0 +1,38 @@
+// the base component should really be a single vue component with a "type" prop where the user can select between card and list, but this works well enough for a demo atm.
+
+import TopicDetailMissionCarouselItem from './TopicDetailMissionCarouselItem.vue'
+
+export default {
+  title: 'WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarouselItem',
+  component: TopicDetailMissionCarouselItem,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative lg:w-1/3"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const TopicDetailMissionCarouselItemData = {
+  clockType: 'time_in_orbit',
+  showClock: true,
+  startDateTime: '2018-10-22T19:00:00+00:00',
+  status: 'current',
+  thumbnailImage: {
+    src: {
+      url: 'https://picsum.photos/560/620',
+      width: 560,
+      height: 620
+    }
+  },
+  title: 'Gravity Recovery and Climate Experiment Follow-On',
+  url: '/missions/gravity-recovery-and-climate-experiment-follow-on-grace-fo/'
+}
+
+export const SingleItem = { args: { data: TopicDetailMissionCarouselItemData } }