@explorer-1/vue 0.0.0

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    v-if="item"
+    class="HomepageCarouselItem relative flex items-center overflow-hidden"
+  >
+    <div class="absolute inset-0 z-10 overflow-hidden bg-black">
+      <!-- video always overrides the image -->
+      <video
+        v-if="item.video && item.video.file"
+        loop
+        muted
+        playsinline
+        preload="none"
+        class="left-1/2 top-1/2 absolute z-10 object-cover w-auto h-auto min-w-full min-h-full transform -translate-x-1/2 -translate-y-1/2"
+      >
+        <source
+          v-if="item.video.fileWebm"
+          :src="item.video.fileWebm"
+          type="video/webm"
+        />
+        <source
+          :src="item.video.file"
+          type="video/mp4"
+        />
+        <source
+          v-if="item.video.fileOgg"
+          :src="item.video.fileOgg"
+          type="video/ogg"
+        />
+      </video>
+      <!-- change to v-if if image should load as fallback until video loads -->
+      <picture v-else-if="item.image && item.image.src">
+        <source
+          media="(min-width: 768px)"
+          :srcset="item.image.srcSet"
+        />
+        <source
+          media="(min-width: 420px)"
+          :srcset="item.image.screenMd?.url"
+        />
+        <source :srcset="item.image.screenSm?.url" />
+        <img
+          class="md:object-right object-cover object-bottom w-full h-full"
+          :src="item.image.src.url"
+          :width="item.image.src.width"
+          :height="item.image.src.height"
+          alt=""
+          loading="lazy"
+        />
+      </picture>
+    </div>
+    <div class="lg:flex lg:items-center lg:relative lg:h-full absolute bottom-0 z-20 w-full">
+      <div
+        class="bg-gradient-to-b lg:bg-gradient-to-l from-transparent lg:from-transparent xl:from-transparent-w25 to-black lg:to-transparent-black-75 absolute inset-0"
+      ></div>
+      <div
+        class="lg:px-10 2xl:px-0 lg:pb-10 lg:pt-0 text-contrast container relative px-4 pt-40 pb-24 mx-auto text-white"
+      >
+        <div class="lg:w-3/4 xl:w-1/2 block">
+          <p
+            v-if="item.heading"
+            class="font-primary text-jpl-red-light lg:text-3xl lg:mb-0 mb-2 text-xl font-semibold tracking-normal uppercase"
+          >
+            {{ item.heading }}
+            <span class="sr-only">.</span>
+          </p>
+          <component
+            :is="item.externalLink || (item.page && item.page.url) ? 'BaseLink' : 'div'"
+            variant="none"
+            link-class="block"
+            :href="item.externalLink ? item.externalLink : null"
+            :to="item.page && item.page.url && !item.externalLink ? item.page.url : null"
+            external-target-blank
+          >
+            <p
+              v-if="item.slideTitle"
+              class="lg:text-9xl leading-tighter text-5xl font-extrabold tracking-tighter"
+            >
+              <span class="mr-2">{{ item.slideTitle }}</span>
+              <span
+                v-if="item.externalLink || (item.page && item.page.url)"
+                class="text-jpl-red-light lg:hidden can-hover:group-hover:ml-2 ml-0 text-4xl transition-all duration-200 ease-in"
+              >
+                <IconArrow class="inline" />
+              </span>
+            </p>
+            <div
+              v-if="item.externalLink || (item.page && item.page.url)"
+              class="can-hover:group-hover:ml-5 text-jpl-red-light text-7xl lg:block hidden ml-0 transition-all duration-200 ease-in"
+            >
+              <IconArrow />
+            </div>
+          </component>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import IconArrow from './../Icons/IconArrow.vue'
+
+export interface Slide {
+  slideTitle: string
+  externalLink?: string
+  page?: {
+    url: string
+  }
+  heading: string
+  video: {
+    file: string
+    fileOgg: string
+    fileWebm: string
+  }
+  image: Partial<ImageObject>
+}
+
+export default defineComponent({
+  name: 'HomepageCarouselItem',
+  components: {
+    BaseLink,
+    IconArrow
+  },
+  props: {
+    item: {
+      type: Object as PropType<Slide>,
+      required: false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.HomepageCarouselItem,
+.HomepageCarouselItem.swiper-slide {
+  // somewhat arbitrary heights
+  // portrait on small screens
+  //height: 500px;
+  min-height: 500px;
+  // landscape on larger screens
+  @screen lg {
+    height: 800px;
+    min-height: 800px;
+  }
+}
+
+.HomepageCarouselItem {
+  img {
+    @apply transition-transform duration-1000 ease-out transform scale-100;
+  }
+
+  .IconArrow {
+    @apply -ml-5 transition-all duration-500 ease-in opacity-0;
+  }
+
+  &.swiper-slide-active {
+    img {
+      @apply scale-105;
+    }
+
+    .IconArrow {
+      @apply ml-0 opacity-100;
+    }
+  }
+}
+</style>

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js

@@ -0,0 +1,35 @@
+import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
+import HomepageEmbedBlock from './HomepageEmbedBlock.vue'
+
+export default {
+  title: 'WWW/Homepage/HomepageEmbedBlock',
+  component: HomepageEmbedBlock,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*(Data)$/
+}
+
+export const HomepageEmbedBlockData = [
+  {
+    display: true,
+    heading: 'Watch Live',
+    ...BlockVideoEmbedData.data
+  }
+]
+
+// stories
+export const Default = {
+  name: 'HomepageEmbedBlock',
+  args: {
+    data: HomepageEmbedBlockData
+  }
+}

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    v-if="data && data.length && data[0].display"
+    id="featuredEmbed"
+    class="2xl:px-0 container px-4 mx-auto"
+  >
+    <h2
+      v-if="data[0].heading"
+      class="font-primary text-gray-dark lg:text-6xl mb-5 text-3xl font-semibold leading-normal tracking-normal uppercase"
+    >
+      {{ data[0].heading }}
+    </h2>
+    <div class="xl:BaseGrid">
+      <BlockVideoEmbed
+        class="col-span-11"
+        :data="data[0]"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { BlockData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+
+export default defineComponent({
+  name: 'HomepageEmbedBlock',
+  components: {
+    BlockVideoEmbed
+  },
+  props: {
+    data: {
+      type: Array as PropType<BlockData[]>,
+      required: false
+    }
+  }
+})
+</script>

package/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.stories.js

@@ -0,0 +1,93 @@
+import HomepageFeaturedRobot from './HomepageFeaturedRobot.vue'
+export default {
+  title: 'WWW/Homepage/HomepageFeaturedRobot',
+  component: HomepageFeaturedRobot,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+export const HomepageFeaturedRobotData = {
+  url: '/robotics-at-jpl/placeholder',
+  parent: {
+    url: '/robotics-at-jpl'
+  },
+  title: 'Freeclimber: LEMUR 3',
+  nickname: 'LEMUR 3',
+  homePageBlurb:
+    'Custom crawl, walk and even climb rock walls, this robot was designed to operate in extreme terrains.',
+  description:
+    'Crawl, walk and even climb rock walls, this robot was designed to operate in extreme terrains. ',
+  heroImage: {
+    // beach
+    src: {
+      url: 'https://picsum.photos/id/973/800/640',
+      width: 800,
+      height: 800
+    },
+    // jungle
+    screenMd: {
+      url: 'https://picsum.photos/id/921/640/512'
+    },
+    // desert
+    screenSm: {
+      url: 'https://picsum.photos/id/247/320/256'
+    }
+  },
+  homePageImage: {
+    // beach
+    src: {
+      url: 'https://picsum.photos/id/973/800/640',
+      width: 800,
+      height: 640
+    },
+    // lake
+    srcSet: 'https://picsum.photos/id/865/320/256 320w, https://picsum.photos/id/865/640/512 640w'
+  },
+  mass: 123, // grams
+  height: 0.24, // meters
+  speed: 0.5, // m/s
+  alternativeStats: [
+    {
+      metricLabel: 'Legs',
+      metricUnit: 'unitless',
+      metricValue: '6'
+    },
+    {
+      metricLabel: 'Wingspan',
+      metricUnit: 'meters',
+      metricValue: '8'
+    }
+  ]
+}
+
+// stories
+export const FeaturedRobot = {
+  args: {
+    data: HomepageFeaturedRobotData
+  }
+}
+
+export const NoCustomContent = {
+  args: {
+    data: {
+      ...HomepageFeaturedRobotData,
+      nickname: '',
+      homePageBlurb: '',
+      homePageImage: null
+    }
+  }
+}
+
+export const NoStats = {
+  args: {
+    data: {
+      ...HomepageFeaturedRobotData,
+      mass: null,
+      height: null,
+      speed: null,
+      alternativeStats: []
+    }
+  }
+}

package/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-if="data"
+    class="HomepageFeaturedRobot lg:BaseGrid lg:px-0 container px-4 mx-auto"
+  >
+    <!-- all the text -->
+    <div class="lg:flex items-center col-span-5 col-start-2">
+      <div>
+        <div class="lg:pr-5 xl:pr-18">
+          <p class="text-subtitle text-jpl-red mb-3">Robotics</p>
+          <BaseHeading
+            v-if="data.nickname || data.title"
+            level="h2"
+            class="mb-5"
+          >
+            {{ data.nickname || data.title }}
+          </BaseHeading>
+          <div
+            v-if="data.homePageBlurb || data.description"
+            class="text-body-lg mb-10"
+          >
+            {{ data.homePageBlurb || data.description }}
+          </div>
+
+          <!-- the image on mobile -->
+          <div class="lg:hidden sm:w-xl w-full mx-auto my-10">
+            <BaseImage
+              v-if="theImage && theImage.src"
+              :src="theImage.src.url"
+              :srcset="theSrcSet"
+              :width="theImage.src.width"
+              :height="theImage.src.height"
+              image-class="w-full h-auto"
+              alt=""
+              :object-fit-class="data.homePageImage ? 'contain' : 'cover'"
+              loading="lazy"
+            />
+          </div>
+
+          <RoboticsDetailStatsMini
+            class="my-10"
+            :mass="data.mass"
+            :height="data.height"
+            :speed="data.speed"
+            :alternative-stats="data.alternativeStats"
+          />
+        </div>
+        <!-- buttons -->
+        <BaseButton
+          v-if="data.url"
+          class="lg:mr-3 mb-3"
+          block-classes="lg:inline-block block"
+          variant="primary"
+          :aria-label="data.nickname ? `Meet ${data.nickname}` : `Meet ${data.title}`"
+          :to="data.url"
+        >
+          Meet {{ data.nickname || data.title }}
+        </BaseButton>
+        <BaseButton
+          v-if="data.parent && data.parent.url"
+          class="lg:mr-3 mb-3"
+          block-classes="lg:inline-block block"
+          variant="secondary"
+          :to="data.parent.url"
+          aria-label="See All Robots"
+          compact
+        >
+          See All Robots
+        </BaseButton>
+      </div>
+    </div>
+    <!-- the image on desktop -->
+    <div class="lg:flex items-center hidden col-span-6">
+      <BaseImage
+        v-if="theImage && theImage.src"
+        image-class="w-full h-auto"
+        :src="theImage.src.url"
+        :srcset="theSrcSet"
+        :width="theImage.src.width"
+        :height="theImage.src.height"
+        alt=""
+        :object-fit-class="data.homePageImage ? 'contain' : 'cover'"
+        loading="lazy"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import { mixinGetSrcSet } from '../../utils/mixins'
+import RoboticsDetailStatsMini from './../RoboticsDetailStats/RoboticsDetailStatsMini.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+
+export default defineComponent({
+  name: 'HomepageFeaturedRobot',
+  components: {
+    RoboticsDetailStatsMini,
+    BaseButton,
+    BaseHeading,
+    BaseImage
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theImage(): Partial<ImageObject> | null {
+      if (this.data?.homePageImage) {
+        return this.data?.homePageImage
+      } else if (this.data?.heroImage) {
+        return this.data?.heroImage
+      }
+      return null
+    },
+    theSrcSet() {
+      return this.theImage
+        ? mixinGetSrcSet(this.theImage)
+          ? mixinGetSrcSet(this.theImage)
+          : this.theImage.srcSet
+        : undefined
+    }
+  }
+})
+</script>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.stories.js

@@ -0,0 +1,153 @@
+import imagePlanetJupiter from '@explorer-1/common-storybook/src/images/mission-highlights-800h-at-jupiter.png'
+import imagePlanetEarth from '@explorer-1/common-storybook/src/images/mission-highlights-800h-earth-orbiting-on-earth.png'
+import imageMoon from '@explorer-1/common-storybook/src/images/mission-highlights-800h-earths-moon.png'
+import imageInterstellar from '@explorer-1/common-storybook/src/images/mission-highlights-800h-interstellar.jpg'
+import imagePlanetMarsA from '@explorer-1/common-storybook/src/images/mission-highlights-800h-mars-orbiting.png'
+import HomepageMissionsCarousel from './HomepageMissionsCarousel.vue'
+import HomepageMissionsCarouselItem from './HomepageMissionsCarouselItem.vue'
+
+export default {
+  title: 'WWW/Homepage/HomepageMissionsCarousel',
+  component: HomepageMissionsCarousel,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+export const HomepageMissionsCarouselData = {
+  missionsCarousel: [
+    {
+      heading: 'Exploring the Universe',
+      label: 'Missions',
+      summary:
+        'Spacecraft developed at JPL have flown to every planet in our solar system and the Sun.',
+      targets: [
+        {
+          name: 'Earth',
+          pastMissions: 26,
+          currentMissions: 20,
+          topic: {
+            title: 'Earth',
+            url: '/topics/earth/'
+          },
+          image: {
+            src: {
+              url: imagePlanetEarth,
+              width: 787,
+              height: 800
+            },
+            webp: {
+              url: imagePlanetEarth
+            }
+          }
+        },
+        {
+          name: 'Mars',
+          pastMissions: 26,
+          currentMissions: 0,
+          image: {
+            src: {
+              url: imagePlanetMarsA,
+              width: 787,
+              height: 800
+            },
+            webp: {
+              url: imagePlanetMarsA
+            }
+          }
+        },
+        {
+          name: 'Interstellar',
+          pastMissions: 26,
+          currentMissions: 0,
+          image: {
+            src: {
+              url: imageInterstellar,
+              width: 787,
+              height: 800
+            },
+            webp: {
+              url: imageInterstellar
+            }
+          }
+        },
+        {
+          name: 'Jupiter',
+          pastMissions: 26,
+          currentMissions: 0,
+          image: {
+            src: {
+              url: imagePlanetJupiter,
+              width: 787,
+              height: 800
+            },
+            webp: {
+              url: imagePlanetJupiter
+            }
+          }
+        },
+        {
+          name: 'Moon',
+          pastMissions: 26,
+          currentMissions: 0,
+          image: {
+            src: {
+              url: imageMoon,
+              width: 787,
+              height: 800
+            },
+            webp: {
+              url: imageMoon
+            }
+          }
+        },
+        {
+          name: 'Moon',
+          pastMissions: 26,
+          currentMissions: 0,
+          image: {
+            src: {
+              url: imageMoon,
+              width: 787,
+              height: 800
+            },
+            webp: {
+              url: imageMoon
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
+// template
+const HomepageMissionsCarouselTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { HomepageMissionsCarousel },
+  template: `<HomepageMissionsCarousel :data="missionsCarousel[0]" />`
+})
+
+const HomepageMissionsCarouselItemTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { HomepageMissionsCarouselItem },
+  template: `<div class="absolute inset-0 bg-stars edu:bg-primary"><div class="w-80 mx-auto"><HomepageMissionsCarouselItem :data="item" /></div></div>`
+})
+
+// stories
+export const Default = {
+  args: {
+    data: HomepageMissionsCarouselData.missionsCarousel
+  }
+}
+export const Item = {
+  args: {
+    data: HomepageMissionsCarouselData.missionsCarousel[0].targets[0]
+  },
+  render: (args) => ({
+    components: { HomepageMissionsCarouselItem },
+    setup() {
+      return { args }
+    },
+    template: `<div class="absolute inset-0 bg-stars bg-black"><div class="w-80 mx-auto"><HomepageMissionsCarouselItem v-bind="args" /></div></div>`
+  })
+}