@explorer-1/vue 0.0.0

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -0,0 +1,282 @@
+<template>
+  <section
+    v-if="data"
+    class="HomepageMissionsCarousel ThemeVariantDark bg-stars max-w-screen-3xl mx-auto overflow-hidden text-white bg-black"
+  >
+    <div class="lg:BaseGrid lg:py-24 pt-14 container flex flex-col pb-5 mx-auto">
+      <div class="xl:px-0 lg:col-end-8 xl:col-end-7 order-1 col-start-2 px-4">
+        <p
+          v-if="data.label"
+          class="text-subtitle text-primary edu:text-white mb-3"
+        >
+          {{ data.label }}
+        </p>
+        <BaseHeading
+          v-if="data.heading"
+          level="h2"
+          class="mb-3"
+        >
+          {{ data.heading }}
+        </BaseHeading>
+        <p
+          v-if="data.summary"
+          class="text-body-md"
+        >
+          {{ data.summary }}
+        </p>
+      </div>
+      <div class="lg:order-2 xl:px-0 flex justify-end order-3 col-start-10 col-end-13 px-4">
+        <BaseLink
+          :to="{ name: 'missions' }"
+          variant="primary"
+        >
+          All Missions
+        </BaseLink>
+      </div>
+      <!-- Slider main container -->
+      <div class="lg:order-3 order-2 col-start-2 col-end-12">
+        <div
+          ref="HomepageMissionsCarousel"
+          class="swiper lg:mt-0 lg:mb-0 mb-14 mt-3"
+        >
+          <!-- Additional required wrapper -->
+          <nav
+            :aria-label="data.heading || 'Missions'"
+            class="swiper-wrapper"
+          >
+            <!-- slide -->
+            <HomepageMissionsCarouselItem
+              v-for="(item, index) in data.targets"
+              :key="index"
+              :data="item"
+              class="swiper-slide"
+            />
+          </nav>
+          <!-- swiper navigation -->
+          <div class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full">
+            <div class="top-1/2 absolute left-0 z-30">
+              <BaseButton
+                class="swiper-prev xl:text-base -ml-16"
+                :aria-label="data.heading + ' - Previous slide'"
+              >
+                <template #icon>
+                  <span
+                    class="arrow-wrapper"
+                    aria-hidden="true"
+                  >
+                    <span class="arrow">
+                      <IconPrev />
+                    </span>
+                    <span class="arrow-fixed">
+                      <IconPrev />
+                    </span>
+                  </span>
+                </template>
+              </BaseButton>
+            </div>
+            <div class="top-1/2 absolute right-0 z-30">
+              <BaseButton
+                class="swiper-next xl:text-base -mr-16"
+                :aria-label="data.heading + ' - Next slide'"
+              >
+                <template #icon>
+                  <span
+                    class="arrow-wrapper"
+                    aria-hidden="true"
+                  >
+                    <span class="arrow">
+                      <IconNext />
+                    </span>
+                    <span class="arrow-fixed">
+                      <IconNext />
+                    </span>
+                  </span>
+                </template>
+              </BaseButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import Swiper from 'swiper'
+import { A11y, Navigation } from 'swiper/modules'
+import type { SwiperOptions } from 'swiper/types'
+import IconPrev from './../Icons/IconPrev.vue'
+import IconNext from './../Icons/IconNext.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import HomepageMissionsCarouselItem from './../HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue'
+
+Swiper.use([Navigation, A11y])
+
+export default defineComponent({
+  name: 'HomepageMissionsCarousel',
+  components: {
+    BaseLink,
+    BaseHeading,
+    BaseButton,
+    IconPrev,
+    IconNext,
+    HomepageMissionsCarouselItem
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data(): {
+    slider: Swiper | null
+    sliderOptions: SwiperOptions
+  } {
+    return {
+      slider: null,
+      sliderOptions: {
+        slidesPerView: 1.5,
+        speed: 500,
+        threshold: 20, // swipe threshold in px
+        spaceBetween: 0,
+        centeredSlides: true,
+        loop: true,
+        preloadImages: false,
+        // check swiper.js docs to learn how to use lazy loading on slide elements
+        // https://swiperjs.com/api/#lazy
+        lazy: {
+          loadPrevNext: true,
+          loadOnTransitionStart: true,
+          loadPrevNextAmount: 2
+        },
+        navigation: {
+          nextEl: '.swiper-next',
+          prevEl: '.swiper-prev'
+        },
+        a11y: {
+          prevSlideMessage: this.data.heading
+            ? this.data.heading + ' - Previous slide'
+            : 'Previous slide',
+          nextSlideMessage: this.data.heading ? this.data.heading + ' - Next slide' : 'Next slide'
+        },
+        breakpoints: {
+          640: {
+            slidesPerView: 1.5
+          },
+          768: {
+            slidesPerView: 2
+          },
+          1280: {
+            slidesPerView: 3,
+            spaceBetween: 56
+          }
+        },
+        on: {
+          init(swiper) {
+            const classList = swiper.el.classList
+            classList.replace('opacity-0', 'opacity-100')
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.slider = new Swiper(
+        this.$refs.HomepageMissionsCarousel as HTMLElement,
+        this.sliderOptions
+      )
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import 'swiper/swiper-bundle.css';
+
+.HomepageMissionsCarousel {
+  // container styles
+  .swiper {
+    @apply overflow-visible #{!important};
+
+    .swiper-navigation {
+      top: 20%;
+    }
+
+    .swiper-prev,
+    .swiper-next {
+      @apply -mt-1 w-auto h-auto transform -translate-y-1/2;
+
+      &.swiper-button-disabled {
+        @apply invisible;
+      }
+      // shared styles for the arrow animation
+      &.BaseButton {
+        @apply transition-none #{!important};
+      }
+
+      &.BaseButton > .label {
+        @apply flex overflow-hidden;
+
+        > .arrow-wrapper {
+          @apply block relative w-full h-full overflow-hidden;
+
+          > .arrow {
+            @apply block;
+          }
+
+          > .arrow-fixed {
+            @apply absolute top-0 left-0 block;
+          }
+        }
+        @include hover {
+          > .arrow-wrapper > .arrow,
+          > .arrow-wrapper > .arrow-fixed {
+            animation-delay: 50ms !important; // hover intent
+          }
+        }
+      }
+    }
+    @screen lg {
+      // specific directional animation
+      .swiper-next.BaseButton > .label {
+        @include hover {
+          > .arrow-wrapper > .arrow {
+            animation: arrow-carousel-next-anim 0.1s linear normal;
+          }
+
+          > .arrow-wrapper > .arrow-fixed {
+            animation: arrow-carousel-next-fixed-anim 0.1s linear normal;
+          }
+        }
+      }
+
+      .swiper-prev.BaseButton > .label {
+        @include hover {
+          > .arrow-wrapper > .arrow {
+            animation: arrow-carousel-prev-anim 0.1s linear normal;
+          }
+
+          > .arrow-wrapper > .arrow-fixed {
+            animation: arrow-carousel-prev-fixed-anim 0.1s linear normal;
+          }
+        }
+      }
+    }
+  }
+
+  // fade in lazy loaded slides
+  .swiper-lazy {
+    @apply opacity-0;
+
+    &.swiper-lazy-loaded {
+      @apply opacity-100;
+    }
+  }
+}
+</style>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue

@@ -0,0 +1,143 @@
+<template>
+  <BaseLink
+    v-if="data"
+    variant="none"
+    :aria-label="hasTopic ? 'More about ' + data.topic.title : 'View ' + data.name + ' missions'"
+    :to="hasTopic ? data.topic.url : { name: 'missions', query: { mission_target: data.name } }"
+    class="HomepageMissionsCarouselItem group flex h-full pb-1 text-white"
+    link-class="flex flex-col w-full"
+  >
+    <div class="slide-image h-80 mb-3">
+      <picture
+        v-if="data.image && data.image.src"
+        class="flex w-full h-full"
+      >
+        <source
+          class="swiper-lazy"
+          :srcset="data.image.webp.url"
+          type="image/webp"
+        />
+        <img
+          class="swiper-lazy object-contain w-auto mx-auto"
+          :src="data.image.src.url"
+          :srcset="data.image.srcSet"
+          :width="data.image.src.width"
+          :height="data.image.src.height"
+          loading="lazy"
+          alt=""
+        />
+      </picture>
+    </div>
+    <div class="text-wrapper -mt-18 pt-22 w-3/5 h-auto pl-6 mx-auto border-l">
+      <div
+        class="shifted-text can-hover:group-hover:-mt-3 lg:mt-0 -mt-3 transition-all duration-500 ease-in-out"
+      >
+        <p class="mb-1 text-3xl font-semibold">{{ data.name }}</p>
+        <p class="text-gray-light-mid mb-1 text-lg whitespace-nowrap">
+          Current missions: {{ data.currentMissions }}
+        </p>
+        <p class="text-gray-light-mid mb-2 text-lg whitespace-nowrap">
+          Past missions: {{ data.pastMissions }}
+        </p>
+        <div
+          class="explore-text can-hover:group-hover:opacity-100 can-hover:group-hover:ml-0 lg:-ml-3 lg:opacity-0 ml-0 transition-all duration-300 ease-in"
+        >
+          <span class="text-subtitle text-primary-light flex items-center">
+            Explore
+            <IconCaret class="ml-1 text-base" />
+          </span>
+        </div>
+      </div>
+    </div>
+  </BaseLink>
+</template>
+<script lang="ts">
+/* Slide for the homepage missions carousel.
+   Links to the topic page if provided,
+   otherwise links to mission target as fallback.
+*/
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import IconCaret from './../Icons/IconCaret.vue'
+
+export default defineComponent({
+  name: 'HomepageMissionsCarouselItem',
+  components: {
+    BaseLink,
+    IconCaret
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    hasTopic(): boolean {
+      if (this.data && this.data.topic && this.data.topic.url) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.HomepageMissionsCarouselItem {
+  .text-wrapper {
+    border-width: 1px;
+    border-style: solid;
+    border-image: linear-gradient(to top, #6f6f6f, rgba(0, 0, 0, 0)) 1 20%; // border-gray-mid-dark
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+  // styling based on slide visibility
+  &.swiper-slide,
+  &.swiper-slide-duplicate {
+    @apply opacity-50 transition-all duration-500 ease-in-out h-auto;
+
+    .slide-image {
+      @apply transition-transform duration-500 ease-in-out transform scale-90;
+    }
+
+    .text-wrapper {
+      @apply opacity-0 transition-opacity duration-500 ease-in-out;
+    }
+    // on mobile, only the active slide should be fully visible
+    &.swiper-slide-active,
+    &:focus,
+    &:focus-within {
+      @apply opacity-100;
+
+      .text-wrapper {
+        @apply opacity-100;
+
+        .shifted-text {
+          @apply -mt-3 #{!important};
+        }
+
+        .explore-text {
+          @apply opacity-100 ml-0 #{!important};
+        }
+      }
+
+      .slide-image {
+        @apply scale-105;
+      }
+    }
+    @screen lg {
+      // &.swiper-slide-visible, &.swiper-slide-duplicate-visible
+      &.swiper-slide-prev,
+      &.swiper-slide-active,
+      &.swiper-slide-next {
+        @apply opacity-100;
+
+        .text-wrapper {
+          @apply opacity-100;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/HomepageStats/HomepageStats.stories.js

@@ -0,0 +1,155 @@
+import HomepageStats from './HomepageStats.vue'
+
+export default {
+  title: 'WWW/Homepage/HomepageStats',
+  component: HomepageStats,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+export const HomepageStatsData = {
+  asteroidWatchWidget: {
+    asteroidApproach: {
+      date: '2020-12-21',
+      distanceKilometers: 4150000,
+      distanceMiles: 2580000,
+      externalLink: 'https://ssd.jpl.nasa.gov/sbdb.cgi?sstr=2017%20XQ60;orb=1'
+    },
+    heading: 'ASTEROID WATCH',
+    title: 'Next close approach'
+  },
+  dsnWidget: {
+    heading: 'DEEP SPACE NETWORK',
+    location: 'Goldstone',
+    spacecraftName: 'MMS 1',
+    transmitStatus: 'both',
+    transmitTitle: 'Currently transmitting'
+  },
+  statistics: [
+    {
+      blockType: 'StatisticsMissionBlock',
+      heading: 'MISSIONS',
+      title: 'Currently active'
+    },
+    {
+      blockType: 'StatisticsGenericBlock',
+      date: '2021-02-03T12:55:00-08:00',
+      dateDisplay: 'countdown',
+      heading: 'NEXT LANDING',
+      title: 'Custom title'
+    }
+  ],
+  statisticsMissionCount: 43,
+  featuredEmbed: []
+}
+
+const HomepageStatsTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { HomepageStats },
+  template: `<HomepageStats
+    :statistics="statistics"
+    :mission-count="statisticsMissionCount"
+    :dsn="dsnWidget"
+    :asteroid-watch="asteroidWatchWidget"
+    :featured-embed="featuredEmbed"
+  />`
+})
+
+export const Base = HomepageStatsTemplate.bind({})
+Base.args = HomepageStatsData
+
+export const StaticDate = HomepageStatsTemplate.bind({})
+StaticDate.args = {
+  ...HomepageStatsData,
+  statistics: [
+    {
+      blockType: 'StatisticsMissionBlock',
+      heading: 'MISSIONS',
+      title: 'Currently active'
+    },
+    {
+      blockType: 'StatisticsGenericBlock',
+      date: '2021-02-18T12:55:00-08:00',
+      dateDisplay: 'static',
+      heading: 'NEXT LANDING',
+      title: 'Mars Perseverance'
+    }
+  ]
+}
+
+export const TimeElapsed = HomepageStatsTemplate.bind({})
+TimeElapsed.args = {
+  ...HomepageStatsData,
+  statistics: [
+    {
+      blockType: 'StatisticsMissionBlock',
+      heading: 'MISSIONS',
+      title: 'Currently active'
+    },
+    {
+      blockType: 'StatisticsGenericBlock',
+      date: '2021-02-18T12:55:00-08:00',
+      dateDisplay: 'time_elapsed',
+      heading: 'TIME ON MARS',
+      title: 'Mars Perseverance'
+    }
+  ]
+}
+
+export const WatchLive = HomepageStatsTemplate.bind({})
+WatchLive.args = {
+  ...HomepageStatsData,
+  statistics: [
+    {
+      blockType: 'StatisticsMissionBlock',
+      heading: 'MISSIONS',
+      title: 'Currently active'
+    },
+    {
+      blockType: 'StatisticsGenericBlock',
+      date: '2021-02-18T12:55:00-08:00',
+      dateDisplay: 'live',
+      heading: 'NEXT LANDING',
+      title: 'Mars Perseverance'
+    }
+  ],
+  featuredEmbed: [
+    {
+      heading: 'Watch Live',
+      display: true
+    }
+  ]
+}
+
+export const WatchLiveNoVideo = HomepageStatsTemplate.bind({})
+WatchLiveNoVideo.args = {
+  ...HomepageStatsData,
+  statistics: [
+    {
+      blockType: 'StatisticsMissionBlock',
+      heading: 'MISSIONS',
+      title: 'Currently active'
+    },
+    {
+      blockType: 'StatisticsGenericBlock',
+      date: '2021-02-18T12:55:00-08:00',
+      dateDisplay: 'live',
+      heading: 'NEXT LANDING',
+      title: 'Mars Perseverance'
+    }
+  ]
+}
+
+export const NoDsn = HomepageStatsTemplate.bind({})
+NoDsn.args = {
+  ...HomepageStatsData,
+  dsnWidget: {
+    heading: 'DEEP SPACE NETWORK',
+    location: '',
+    spacecraftName: null,
+    transmitStatus: '',
+    transmitTitle: ''
+  }
+}