@explorer-1/vue 0.0.0

package/src/components/HeroListingIndex/HeroListingIndex.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    v-if="pageData"
+    class="max-w-screen-3xl mx-auto"
+    :class="{ '-nav-offset': pageData.featured }"
+  >
+    <HeroMedium
+      v-if="pageData.featured"
+      class="md:mb-12 lg:mb-18 mb-10"
+      :custom-tag="themeStore.theme === 'ThemeEdu' && customLabel ? customLabel : undefined"
+      :custom-label="themeStore.theme === 'ThemeEdu' ? pageData.featured.topicLabel : customLabel"
+      :feature="pageData.featured"
+      :custom-video="customVideo"
+      :custom-image="customImage"
+      :cta="cta"
+    />
+  </div>
+</template>
+<script lang="ts">
+// HeroListingIndex
+// Creating a wrapper for HeroMedium as HeroListingIndex needs to parse several different data shapes.
+// Parsing occurs in the computed data and returns the appropriate data object for the media if it exists.
+import { defineComponent } from 'vue'
+import { useThemeStore } from '../../store/theme'
+import { mapStores } from 'pinia'
+import HeroMedium from '../HeroMedium/HeroMedium.vue'
+
+export default defineComponent({
+  name: 'HeroListingIndex',
+  components: {
+    HeroMedium
+  },
+  props: {
+    // pass these directly to HeroMedium
+    pageData: {
+      type: Object,
+      required: false
+    },
+    customLabel: {
+      type: String,
+      required: false
+    },
+    cta: {
+      type: String,
+      default: 'Read Article'
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    // parses a hero streamfield block for a video (newsDetailPage model)
+    customVideo(): object | undefined {
+      if (this.pageData && this.pageData.featured?.heroBlocks?.length > 0) {
+        if (this.pageData.featured.heroBlocks[0].blockType === 'VideoBlock') {
+          return this.pageData.featured.heroBlocks[0].video
+        }
+      }
+      return undefined
+    },
+    customImage(): object | undefined {
+      // parse hero streamfield block for the first usable image (newsDetailPage model)
+      if (this.pageData && this.pageData.featured?.heroBlocks?.length > 0) {
+        const block = this.pageData.featured.heroBlocks[0]
+        if (block.blockType === 'ImageChooserBlock' || block.blockType === 'HeroImageBlock') {
+          return block.listingPageHeroImage
+        } else if (block.blockType === 'CarouselBlock') {
+          // use the first image in the carousel
+          if (block.blocks && block.blocks.length > 0) {
+            return block.blocks[0].listingPageHeroImage
+          }
+        }
+      }
+      // else use heroImage
+      else if (this.pageData?.featured?.listingPageHeroImage) {
+        return this.pageData.featured.listingPageHeroImage
+      }
+      return undefined
+    }
+  }
+})
+</script>

package/src/components/HeroMedia/HeroMedia.stories.js

@@ -0,0 +1,135 @@
+import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
+import HeroMedia from './HeroMedia.vue'
+
+export default {
+  title: 'Components/Heroes/HeroMedia',
+  component: HeroMedia,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*Data$/
+}
+
+export const HeroMediaData = {
+  blockType: 'ImageChooserBlock',
+  imageInline: {
+    alt: 'A inline hero image',
+    caption:
+      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>',
+    credit: 'NASA/JPL',
+    detailUrl: '/image/placeholder/',
+    original: 'https://picsum.photos/869/700',
+    src: {
+      height: 700,
+      url: 'https://picsum.photos/869/700',
+      width: 869
+    },
+    srcSet: 'https://picsum.photos/320/258 320w, https://picsum.photos/869/700 1024w'
+  },
+  image: {
+    src: {
+      url: 'https://picsum.photos/1440/620',
+      width: 1440,
+      height: 620
+    },
+    screenXs: {
+      url: 'https://picsum.photos/320/139',
+      width: 320
+    },
+    screenSm: {
+      url: 'https://picsum.photos/640/276',
+      width: 640
+    },
+    screenMd: {
+      url: 'https://picsum.photos/768/331',
+      width: 768
+    },
+    screenLg: {
+      url: 'https://picsum.photos/1024/442',
+      width: 1024
+    },
+    screenXl: {
+      url: 'https://picsum.photos/1280/552',
+      width: 1280
+    },
+    screenTwoxl: {
+      url: 'https://picsum.photos/1440/620',
+      width: 1440
+    },
+    screenThreexl: {
+      url: 'https://picsum.photos/1800/775',
+      width: 1800
+    },
+    alt: 'News detail page hero image',
+    caption:
+      '<p>NASA InSight&#x27;s robotic arm will use its scoop to pin the spacecraft&#x27;s heat probe against the wall of its hole.</p>',
+    credit: 'NASA/JPL',
+    detailUrl: '/images/image-123/'
+  },
+  caption: '',
+  displayCaption: true
+}
+
+// stories
+export const Hero = {
+  args: HeroMediaData
+}
+export const CustomImageCaption = {
+  args: {
+    ...HeroMediaData,
+    caption: '<p>My custom caption.</p>'
+  }
+}
+
+export const NoCaptionText = {
+  args: {
+    ...HeroMediaData,
+    caption: '<p>My custom caption.</p>',
+    displayCaption: false
+  }
+}
+
+export const NoCaptionArea = {
+  args: {
+    image: {
+      src: HeroMediaData.image.src,
+      alt: 'The hero image',
+      caption: '\n', // a lot of prod data has this for caption
+      credit: '',
+      detailUrl: ''
+    },
+    caption: '<p>My custom caption.</p>',
+    displayCaption: false
+  }
+}
+export const NoLink = {
+  args: {
+    image: {
+      src: HeroMediaData.image.src,
+      alt: HeroMediaData.image.src,
+      caption: HeroMediaData.image.caption,
+      credit: HeroMediaData.image.credit,
+      detailUrl: ''
+    },
+    caption: '',
+    displayCaption: true
+  }
+}
+
+export const Video = {
+  args: {
+    blockType: 'VideoBlock',
+    video: BaseVideoData,
+    caption:
+      '<p>Lorem ipsum dolor sit amet. <a href="#">A link in the caption</a> testing render.</p>',
+    credit: 'NASA/JPL'
+  }
+}

package/src/components/HeroMedia/HeroMedia.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    v-if="image || video"
+    class="HeroMedia"
+  >
+    <div class="bg-gray-light">
+      <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
+        <div class="hero">
+          <template v-if="theImageData">
+            <img
+              v-if="theImageData.src"
+              class="object-cover object-center w-full h-full"
+              :srcset="theSrcSet"
+              :src="theImageData.src.url"
+              :width="theImageData.src.width"
+              :height="theImageData.src.height"
+              :alt="theImageData.alt"
+              itemprop="image"
+            />
+          </template>
+          <template v-else-if="video">
+            <MixinVideoBg :video="video" />
+          </template>
+        </div>
+        <div
+          v-if="hasCaptionArea"
+          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto"
+        >
+          <button
+            class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
+            aria-label="Toggle caption"
+            @click="toggleCaption"
+          >
+            <IconInfo
+              v-show="!captionVisible"
+              class="text-xl"
+            />
+            <IconClose v-show="captionVisible" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-if="hasCaptionArea"
+        :class="captionVisibilityClass"
+        class="max-w-screen-3xl bg-gray-light bg-opacity-90 lg:bg-opacity-100 lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto"
+      >
+        <BaseImageCaption :data="theImageData || customCaption" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+import IconInfo from './../Icons/IconInfo.vue'
+import IconClose from './../Icons/IconClose.vue'
+import type { ImageObject } from '../../interfaces'
+import { mixinGetSrcSet, mixinTransparentHeader } from './../../utils/mixins'
+
+export default defineComponent({
+  /*
+  This component displays a full-width hero item at the top of the page
+  - accommodates images or videos
+  - uses vh to dynamically crop the media based on viewport height
+  - manages display state for navigation
+  */
+  name: 'HeroMedia',
+  components: {
+    MixinVideoBg,
+    BaseImageCaption,
+    IconInfo,
+    IconClose
+  },
+  props: {
+    // image object includes the image caption and credit
+    image: {
+      type: Object,
+      required: false
+    },
+    video: {
+      type: Object,
+      required: false
+    },
+    // if a caption should even be visible
+    displayCaption: {
+      type: Boolean,
+      default: true
+    },
+    // for video heroes that pass separate caption and credit data
+    caption: {
+      type: String,
+      required: false
+    },
+    credit: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      captionVisible: false
+    }
+  },
+  computed: {
+    theImageCaption(): string | undefined {
+      if (this.image && this.caption && this.caption.length > 2 && this.displayCaption) {
+        return this.caption
+      } else if (
+        this.image &&
+        this.image.caption &&
+        this.image.caption.length > 2 &&
+        this.displayCaption
+      ) {
+        return this.image.caption
+      }
+      return undefined
+    },
+    theImageData(): Partial<ImageObject> | undefined {
+      if (this.image) {
+        return {
+          ...this.image,
+          caption: this.theImageCaption
+        }
+      }
+      return undefined
+    },
+    theSrcSet(): string | undefined {
+      return this.theImageData ? mixinGetSrcSet(this.theImageData) : undefined
+    },
+    // to handle captions for videos
+    customCaption(): Partial<ImageObject> | undefined {
+      if ((this.caption && this.caption.length > 2) || this.credit) {
+        return {
+          caption: this.caption,
+          credit: this.credit
+        }
+      }
+      return undefined
+    },
+    captionVisibilityClass() {
+      if (!this.captionVisible) {
+        return 'hidden'
+      } else {
+        return 'flex'
+      }
+    },
+    hasCaptionArea(): string | boolean {
+      if (this.theImageData) {
+        return this.theImageCaption || this.image?.credit || this.image?.detailUrl
+      } else if (this.customCaption) {
+        return true
+      }
+      return false
+    }
+  },
+  mounted() {
+    mixinTransparentHeader()
+  },
+  methods: {
+    toggleCaption() {
+      if (this.captionVisible) {
+        this.captionVisible = false
+      } else {
+        this.captionVisible = true
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/HeroMedia';
+</style>

package/src/components/HeroMedium/HeroMedium.stories.js

@@ -0,0 +1,73 @@
+import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
+import HeroMedium from './HeroMedium.vue'
+
+export default {
+  title: 'Components/Heroes/HeroMedium',
+  component: HeroMedium,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    themes: {
+      clearable: false,
+      list: [
+        {
+          name: 'FullWidthDocs',
+          class: 'sbdocs-preview-full-width',
+          default: true,
+          visible: false
+        }
+      ]
+    },
+    viewMode: 'docs'
+  },
+  excludeStories: /.*Data$/
+}
+
+// data
+export const HeroMediumData = {
+  label: 'Featured',
+  cta: 'View',
+  feature: {
+    url: '/news/new-maps-open-roads-to-research/',
+    title: 'Creating Robots to go Where Humans Can’t',
+    image: {
+      src: {
+        url: 'https://picsum.photos/id/973/1800/1200',
+        width: 1800,
+        height: 1200
+      },
+      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',
+      screenMd: {
+        url: 'https://picsum.photos/id/921/800/640'
+      },
+      screenSm: {
+        url: 'https://picsum.photos/id/247/640/900'
+      }
+    }
+  }
+}
+
+export const Default = {
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: undefined
+  }
+}
+export const Video = {
+  args: {
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: BaseVideoData
+  }
+}

package/src/components/HeroMedium/HeroMedium.vue

@@ -0,0 +1,166 @@
+<template>
+  <section
+    aria-label="Feature"
+    class="HeroMedium ThemeVariantDark relative flex items-center overflow-hidden"
+  >
+    <div class="absolute inset-0 z-10 overflow-hidden bg-black">
+      <!-- video always overrides the image -->
+      <MixinVideoBg
+        v-if="theVideo"
+        :video="theVideo"
+      />
+      <!-- change to v-if if image should load as fallback until video loads -->
+      <picture v-else-if="theImage && theImage.src">
+        <source
+          media="(min-width: 768px)"
+          :srcset="theImage.srcSet"
+        />
+        <source
+          media="(min-width: 420px)"
+          :srcset="theImage.screenMd?.url"
+        />
+        <source :data-srcset="theImage.screenSm?.url" />
+        <img
+          class="object-cover w-full h-full"
+          :src="theImage.src.url"
+          :width="theImage.src.width"
+          :height="theImage.src.height"
+          alt=""
+        />
+      </picture>
+    </div>
+    <div class="lg:flex lg:items-end lg:relative lg:h-full absolute bottom-0 z-20 w-full">
+      <div
+        class="bg-gradient-to-b lg:bg-gradient-to-bl from-transparent lg:from-transparent-w50 to-black lg:to-transparent-black-75 absolute inset-0"
+      ></div>
+      <div
+        v-if="feature"
+        class="lg:px-10 2xl:px-0 lg:pb-0 lg:py-0 text-contrast container relative px-4 pt-40 pb-2 mx-auto mb-10 text-white"
+      >
+        <nuxt-link
+          :to="feature.url"
+          class="lg:w-1/2 xl:w-5/12 block"
+        >
+          <div
+            v-if="customTag || customLabel || feature.label"
+            class="flex items-center lg:mb-3 mb-2"
+          >
+            <BaseTag
+              v-if="customTag"
+              variant="primary"
+              size="sm"
+              class="mr-3"
+              >{{ customTag }}</BaseTag
+            >
+            <p
+              v-if="customLabel || feature.label"
+              class="text-subtitle"
+            >
+              {{ customLabel || feature.label }}
+              <span class="sr-only">.</span>
+            </p>
+          </div>
+          <p class="text-h3 font-semibold mb-0">
+            <span class="mr-2">{{ feature.title }}</span>
+            <span
+              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>
+        </nuxt-link>
+        <BaseLink
+          :to="feature.url"
+          class="lg:block hidden"
+          link-class="inline-block"
+          caret-wrapper-class="py-3"
+          variant="primary"
+        >
+          {{ cta }}
+        </BaseLink>
+      </div>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+// HeroMedium
+// A hero image with article link overlay
+// For use when the hero includes a featured content item with link
+// note: This component is very similar to a HomepageCarousel slide
+import { defineComponent } from 'vue'
+import { mixinTransparentHeader } from '../../utils/mixins'
+import type { ImageObject } from '../../interfaces'
+import IconArrow from './../Icons/IconArrow.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseTag from './../BaseTag/BaseTag.vue'
+import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
+
+export default defineComponent({
+  name: 'HeroMedium',
+  components: {
+    IconArrow,
+    BaseLink,
+    MixinVideoBg
+  },
+  props: {
+    feature: {
+      type: Object,
+      required: false
+    },
+    customTag: {
+      type: String,
+      required: false
+    },
+    customLabel: {
+      type: String,
+      required: false
+    },
+    cta: {
+      type: String,
+      default: 'View'
+    },
+    // to override media
+    // use-case: news detail pages use this b/c their feature hero is structured differently
+    customVideo: {
+      type: Object,
+      required: false
+    },
+    customImage: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theVideo(): object | null {
+      if (this.customVideo) {
+        return this.customVideo
+      } else if (this.feature?.video?.file) {
+        return this.feature.video
+      }
+      return null
+    },
+    theImage(): Partial<ImageObject> | null {
+      if (this.customImage) {
+        return this.customImage
+      } else if (this.feature?.image?.src) {
+        return this.feature.image
+      }
+      return null
+    }
+  },
+  watch: {
+    // watch queries to reset the header in case user navigation only changes params
+    '$route.query': {
+      handler() {
+        mixinTransparentHeader()
+      }
+    }
+  },
+  mounted() {
+    mixinTransparentHeader()
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/HeroMedium';
+</style>