@explorer-1/vue 0.0.3 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.0.1"
+    "@explorer-1/common": "1.0.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseAudio/BaseAudio.stories.js

@@ -18,7 +18,7 @@ export default {
 
 // shared data
 export const BaseAudioData = {
-  file: 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3',
+  file: '/audio/file_example_MP3_700KB.mp3',
   autoPlay: false,
   loop: false
 }

package/src/components/BaseAudio/BaseAudio.vue

@@ -118,7 +118,6 @@
   </div>
 </template>
 <script lang="ts">
-// @ts-nocheck
 import { defineComponent } from 'vue'
 import IconPlay from './../Icons/IconPlay.vue'
 import IconPause from './../Icons/IconPause.vue'
@@ -136,7 +135,7 @@ export const generateUUID = () => {
   })
 }
 
-export const convertTimeHHMMSS = (val) => {
+export const convertTimeHHMMSS = (val: any) => {
   const hhmmss = new Date(val * 1000).toISOString().substr(11, 8)
   return hhmmss.indexOf('00:') === 0 ? hhmmss.substr(3) : hhmmss
 }
@@ -161,7 +160,20 @@ export default defineComponent({
       default: false
     }
   },
-  data() {
+  data(): {
+    firstPlay: boolean
+    isMuted: boolean
+    loaded: boolean
+    playing: boolean
+    paused: boolean
+    progressStyle: string
+    currentTime: string
+    uuid: string
+    audio?: HTMLAudioElement
+    totalDuration: number
+    hideVolumeSlider: boolean
+    volumeValue: number
+  } {
     return {
       firstPlay: true,
       isMuted: false,
@@ -191,89 +203,106 @@ export default defineComponent({
     this.init()
   },
   beforeUnmount() {
-    this.audio.removeEventListener('timeupdate', this._handlePlayingUI)
-    this.audio.removeEventListener('loadeddata', this._handleLoaded)
-    this.audio.removeEventListener('pause', this._handlePlayPause)
-    this.audio.removeEventListener('play', this._handlePlayPause)
+    if (this.audio) {
+      this.audio.removeEventListener('timeupdate', this._handlePlayingUI)
+      this.audio.removeEventListener('loadeddata', this._handleLoaded)
+      this.audio.removeEventListener('pause', this._handlePlayPause)
+      this.audio.removeEventListener('play', this._handlePlayPause)
+    }
   },
   methods: {
-    setPosition: function name(e) {
-      const tag = e.target
-      if (this.paused) return
+    setPosition: function name(e: any) {
+      if (this.audio) {
+        const tag = e.target
+        if (this.paused) return
 
-      if (e.target.tagName === 'SPAN') {
-        return
+        if (e.target.tagName === 'SPAN') {
+          return
+        }
+        const pos = tag.getBoundingClientRect()
+        const seekPos = (e.clientX - pos.left) / pos.width
+        this.audio.currentTime = this.audio.duration * seekPos
       }
-      const pos = tag.getBoundingClientRect()
-      const seekPos = (e.clientX - pos.left) / pos.width
-      this.audio.currentTime = parseInt(this.audio.duration * seekPos)
     },
     updateVolume() {
-      this.hideVolumeSlider = false
-      this.audio.volume = this.volumeValue / 100
-      if (this.volumeValue / 100 > 0) {
-        this.isMuted = this.audio.muted = false
-      }
+      if (this.audio) {
+        this.hideVolumeSlider = false
+        this.audio.volume = this.volumeValue / 100
+        if (this.volumeValue / 100 > 0) {
+          this.isMuted = this.audio.muted = false
+        }
 
-      if (this.volumeValue / 100 === 0) {
-        this.isMuted = this.audio.muted = true
+        if (this.volumeValue / 100 === 0) {
+          this.isMuted = this.audio.muted = true
+        }
       }
     },
     toggleVolume() {
       this.hideVolumeSlider = true
     },
     stop() {
-      this.playing = false
-      this.paused = true
-      this.audio.pause()
-      this.audio.currentTime = 0
+      if (this.audio) {
+        this.playing = false
+        this.paused = true
+        this.audio.pause()
+        this.audio.currentTime = 0
+      }
     },
     play() {
-      if (this.playing && !this.paused) return
-      this.paused = false
-      this.audio.play()
-      this.playing = true
-      this.$root.$emit('play', this.uuid)
+      if (this.playing && !this.paused) {
+        return
+      } else if (this.audio) {
+        this.paused = false
+        this.audio.play()
+        this.playing = true
+        this.$root?.$emit('play', this.uuid)
+      }
     },
-    forward(duration) {
-      return (this.audio.currentTime += duration)
+    forward(duration: number) {
+      return this.audio ? (this.audio.currentTime += duration) : undefined
     },
-    rewind(duration) {
-      return (this.audio.currentTime -= duration)
+    rewind(duration: number) {
+      return this.audio ? (this.audio.currentTime -= duration) : undefined
     },
     pause() {
-      this.paused = !this.paused
-      this.paused ? this.audio.pause() : this.audio.play()
+      if (this.audio) {
+        this.paused = !this.paused
+        this.paused ? this.audio.pause() : this.audio.play()
+      }
     },
-    pauseOthers(activeUuid) {
-      if (this.uuid !== activeUuid) {
+    pauseOthers(activeUuid: string) {
+      if (this.audio && this.uuid !== activeUuid) {
         this.paused = true
         this.audio.pause()
       }
     },
     toggleMute() {
-      this.isMuted = !this.isMuted
-      this.audio.muted = this.isMuted
-      this.volumeValue = this.isMuted ? 0 : 100
+      if (this.audio) {
+        this.isMuted = !this.isMuted
+        this.audio.muted = this.isMuted
+        this.volumeValue = this.isMuted ? 0 : 100
+      }
     },
     _handleLoaded() {
-      if (this.audio.readyState >= 2) {
+      if (this.audio && this.audio.readyState >= 2) {
         if (this.autoPlay) this.play()
 
         this.loaded = true
-        this.totalDuration = parseInt(this.audio.duration)
+        this.totalDuration = this.audio.duration
       } else {
         throw new Error('Failed to load audio file')
       }
     },
-    _handlePlayingUI(_e) {
-      const currTime = this.audio.currentTime
-      const percentage = (currTime / this.totalDuration) * 100
-      this.progressStyle = `width: ${percentage}%;`
-      this.currentTime = convertTimeHHMMSS(currTime)
+    _handlePlayingUI(_e: any) {
+      if (this.audio) {
+        const currTime = this.audio.currentTime
+        const percentage = (currTime / this.totalDuration) * 100
+        this.progressStyle = `width: ${percentage}%;`
+        this.currentTime = convertTimeHHMMSS(currTime)
+      }
     },
-    _handlePlayPause(e) {
-      if (e.type === 'play' && this.firstPlay) {
+    _handlePlayPause(e: any) {
+      if (this.audio && e.type === 'play' && this.firstPlay) {
         // in some situations, audio.currentTime is the end one on chrome
         this.audio.currentTime = 0
         if (this.firstPlay) {
@@ -290,17 +319,20 @@ export default defineComponent({
       this.paused = this.playing = false
     },
     init() {
-      this.audio.addEventListener('timeupdate', this._handlePlayingUI)
-      this.audio.addEventListener('loadeddata', this._handleLoaded)
-      this.audio.addEventListener('pause', this._handlePlayPause)
-      this.audio.addEventListener('play', this._handlePlayPause)
-      this.audio.addEventListener('ended', this._handleEnded)
+      if (this.audio) {
+        this.audio.addEventListener('timeupdate', this._handlePlayingUI)
+        this.audio.addEventListener('loadeddata', this._handleLoaded)
+        this.audio.addEventListener('pause', this._handlePlayPause)
+        this.audio.addEventListener('play', this._handlePlayPause)
+        this.audio.addEventListener('ended', this._handleEnded)
+      }
       // TODO: VUE3: find solution for emitting event from slot
       // TODO: find a cleaner way to do this w/o using mounted or root level events
       // scoped slots? https://github.com/vuejs/vue/issues/4332
-      this.$root?.$on('play', this.pauseOthers)
+      // this.$root?.$on('play', this.pauseOthers)
     },
     getAudio() {
+      console.log(this.$el.querySelectorAll('audio')[0])
       return this.$el.querySelectorAll('audio')[0]
     }
   }

package/src/components/BaseImage/BaseImage.vue

@@ -111,6 +111,7 @@ export default defineComponent({
       :width="width"
       :height="height"
       :loading="loading"
+      data-chromatic="ignore"
       @error="imageFailed"
     />
   </div>

package/src/components/BaseTimer/BaseTimer.vue

@@ -34,6 +34,7 @@
           <span
             class="text-stats-xl"
             :class="{ 'text-seconds': unit === 'seconds' }"
+            data-chromatic="ignore"
           >
             <template v-if="countdown && isPast">00</template>
             <template v-else>{{ unitValue(unit) }}</template>

package/src/components/BaseVideo/BaseVideo.stories.js

@@ -1,6 +1,4 @@
 import BaseVideo from './BaseVideo.vue'
-import videoMp4 from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4'
-import videoWebm from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
 
 export default {
   title: 'Components/Base/BaseVideo',
@@ -11,10 +9,10 @@ export default {
 // shared data
 export const BaseVideoData = {
   duration: '8',
-  file: videoMp4,
+  file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4',
   fileExtension: 'mp4',
   fileOgg: 'http://127.0.0.1:9000/media/media/NASA-Mars-Helicopter-IngenuityAnimations-7sec.ogv', // no webpack loader for ogg files
-  fileWebm: videoWebm,
+  fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm',
   height: null,
   id: '1',
   sources:

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -29,6 +29,7 @@
             :class="{ lazyload: !lazyNative }"
             :title="data.title"
             :data-src="data.url"
+            data-chromatic="ignore"
             width="90%"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -88,6 +88,10 @@ export default defineComponent({
       type: Array as PropType<Partial<ImageObject>[]>,
       required: false
     },
+    itemRole: {
+      type: String,
+      required: false
+    },
     loop: {
       type: Boolean,
       default: true
@@ -122,6 +126,9 @@ export default defineComponent({
         loop: this.loop,
         // this component has custom pagination
         pagination: false,
+        a11y: {
+          slideRole: this.itemRole as string | undefined
+        },
         on: {
           slideChange: (swiper: Swiper) => {
             // See https://github.com/vuejs/vue/issues/8721.

package/src/components/BlockImageGallery/BlockImageGallery.vue

@@ -3,6 +3,7 @@
     v-if="items"
     class="BlockImageGallery"
     :items="items"
+    item-role="link"
     :loop="false"
     :block-id="blockId"
   >

package/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js

@@ -160,19 +160,12 @@ export const EventsBlockLinkCarouselData = [
   }
 ]
 
-// template
-const BlockLinkCarouselTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BlockLinkCarousel },
-  template: `<BlockLinkCarousel :itemType="itemType" :heading="heading" :items="items"/>`
-})
-
 const BlockLinkCarouselMultipleTemplate = (args) => ({
   components: { BlockLinkCarousel },
   setup() {
     return { args }
   },
-  template: `<div><BlockLinkCarousel class="mb-20" v-bind="args" /><BlockLinkCarousel item-type="cards" v-bind="args" /></div>`
+  template: `<div><BlockLinkCarousel class="mb-20" v-bind="args[0]" /><BlockLinkCarousel v-bind="args[1]" /></div>`
 })
 
 // stories
@@ -209,9 +202,17 @@ export const TwoItems = {
 }
 
 export const MultipleCarousels = BlockLinkCarouselMultipleTemplate.bind({})
-MultipleCarousels.args = {
-  itemType: 'cards',
-  heading: 'Related Pages',
-  otherHeading: 'Explore More',
-  items: BlockLinkCardCarouselData
-}
+MultipleCarousels.args = [
+  {
+    itemType: 'cards',
+    heading: 'Related Pages',
+    otherHeading: 'Explore More',
+    items: BlockLinkCardCarouselData
+  },
+  {
+    itemType: 'cards',
+    heading: 'More Related Pages',
+    otherHeading: 'Explore Even More',
+    items: BlockLinkCardCarouselData
+  }
+]

package/src/components/BlockQuote/BlockQuote.vue

@@ -17,6 +17,7 @@
             class="attribution-image"
             :src="data.thumbnail.src"
             :alt="data.thumbnail.alt"
+            data-chromatic="ignore"
           />
 
           <BaseLink

package/src/components/BlockTable/BlockTable.vue

@@ -13,7 +13,7 @@
             v-for="(col, index_col) in row.cols"
             :key="index_col"
             :class="
-              row.header ? 'bg-dark-blue text-subtitle text-white' : 'bg-white text-gray-dark'
+              row.header ? 'bg-jpl-blue-darker text-subtitle text-white' : 'bg-white text-gray-dark'
             "
             class="border-gray-light-mid lg:p-5 p-3 border-b"
           >

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -6,18 +6,20 @@
     <div class="bg-gray-light">
       <div class="relative flex items-center mx-auto overflow-hidden vh-crop max-w-screen-3xl">
         <div class="hero">
-          <img
+          <BaseImage
             v-if="image.src"
-            class="object-cover object-center w-full h-full"
-            :srcset="getSrcSet"
             :src="image.src.url"
+            :srcset="getSrcSet"
+            :alt="image.alt"
             :width="image.src.width"
             :height="image.src.height"
-            :alt="image.alt"
+            image-class="object-center w-full h-full"
+            object-fit-class="cover"
+            loading="lazy"
           />
           <div
             v-if="startDateSplit"
-            class="absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+            class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
           >
             <div class="font-extrabold text-6xl leading-tight tracking-wider">
               {{ startDateSplit.day }}
@@ -33,18 +35,22 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import BaseImage from '../BaseImage/BaseImage.vue'
 import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
 
 export default defineComponent({
   name: 'EventDetailHero',
+  components: {
+    BaseImage
+  },
   props: {
     data: {
       type: Object,
       required: false
     },
     startDateSplit: {
-      type: Object as PropType<EventDateObject>,
+      type: Object as PropType<EventDateObject | undefined>,
       required: true
     },
     image: {

package/src/components/FormContact/FormContact.vue

@@ -121,7 +121,7 @@
     >
       <BaseHeading level="h2">Thank you!</BaseHeading>
       <div
-        class="text-jpl-aqua h-22 w-22 p-5 mx-auto my-8 text-6xl font-bold border-4 rounded-full"
+        class="text-jpl-blue-light h-22 w-22 p-5 mx-auto my-8 text-6xl font-bold border-4 rounded-full"
       >
         &#10003;
       </div>

package/src/components/FormNewsletterSignup/FormNewsletterSignup.vue

@@ -162,7 +162,7 @@
       >
         <BaseHeading level="h2">Thank you!</BaseHeading>
         <div
-          class="text-jpl-aqua h-22 w-22 p-5 mx-auto my-8 text-6xl font-bold border-4 rounded-full"
+          class="text-jpl-blue-light h-22 w-22 p-5 mx-auto my-8 text-6xl font-bold border-4 rounded-full"
         >
           &#10003;
         </div>

package/src/components/HeroListingIndex/HeroListingIndex.stories.js

@@ -1,5 +1,3 @@
-import videoMp4 from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4'
-import videoWebm from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
 import HeroListingIndex from './HeroListingIndex.vue'
 
 export default {
@@ -91,8 +89,8 @@ export const NewsVideoHero = {
           {
             blockType: 'VideoBlock',
             video: {
-              file: videoMp4,
-              fileWebm: videoWebm
+              file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4',
+              fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
             }
           }
         ]

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

@@ -4,11 +4,6 @@ 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'

package/src/components/HeroMedia/HeroMedia.vue

@@ -16,6 +16,7 @@
               :height="theImageData.src.height"
               :alt="theImageData.alt"
               itemprop="image"
+              data-chromatic="ignore"
             />
           </template>
           <template v-else-if="video">
@@ -43,7 +44,7 @@
       <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"
+        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray 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>

package/src/components/HomepageCarousel/HomepageCarousel.stories.js

@@ -94,6 +94,9 @@ export const Shuffled = {
   args: {
     items: HomepageCarouselShuffledData(),
     duration: 10000
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true }
   }
 }
 export const OneSlide = {

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -46,6 +46,7 @@
           :height="item.image.src.height"
           alt=""
           loading="lazy"
+          data-chromatic="ignore"
         />
       </picture>
     </div>

package/src/components/MissionDetailHero/MissionDetailHero.vue

@@ -20,6 +20,7 @@
           :width="theBackground.src.width"
           :height="theBackground.src.height"
           :alt="hasForeground ? '' : theBackground.alt"
+          data-chromatic="ignore"
         />
       </div>
     </div>

package/src/components/MissionDetailStats/MissionDetailStats.vue

@@ -165,7 +165,7 @@ export default defineComponent({
   }
 
   .ThemeVariantDark & .theme {
-    @apply bg-dark-blue bg-opacity-75 text-white;
+    @apply bg-jpl-blue-darker bg-opacity-75 text-white;
   }
 
   .label {
@@ -173,7 +173,7 @@ export default defineComponent({
   }
 
   .ThemeVariantDark & .label {
-    @apply text-jpl-aqua;
+    @apply text-jpl-blue-light;
   }
 
   .legend {

package/src/components/MissionDetailStats/MissionDetailStatsMicro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="MissionDetailStatsMicro bg-dark-blue sm:py-0 p-3 py-1 text-white">
+  <div class="MissionDetailStatsMicro bg-jpl-blue-darker sm:py-0 p-3 py-1 text-white">
     <div v-if="showClock && startDateTime">
       <BaseTimer
         :target-date-time="startDateTime"

package/src/components/MissionDetailStats/MissionDetailStatsMini.vue

@@ -7,7 +7,7 @@
           v-if="showClock && startDateTime"
           class="theme-inner lg:col-span-4 xl:col-span-4 2xl:col-span-3 sm:col-span-7 col-span-11"
         >
-          <p class="text-jpl-aqua text-subtitle mb-3">
+          <p class="text-jpl-blue-lighter text-subtitle mb-3">
             {{ clockTypeLabel }}
           </p>
           <BaseTimer
@@ -25,7 +25,7 @@
           :distance-api-urls="distanceApiUrls"
         >
           <template #label="slotProps">
-            <p class="text-jpl-aqua text-subtitle mb-3">
+            <p class="text-jpl-blue-lighter text-subtitle mb-3">
               {{ slotProps.label }}
             </p>
           </template>
@@ -82,7 +82,7 @@ export default defineComponent({
 .MissionDetailStatsMini {
   .theme,
   .theme-inner {
-    @apply bg-dark-blue bg-opacity-75 text-white;
+    @apply bg-jpl-blue-darker bg-opacity-75 text-white;
   }
   // different padding left for first child, which is dynamic
   .theme-inner {

package/src/components/MixinCarousel/MixinCarousel.stories.js

@@ -25,7 +25,7 @@ export const Default = {
     },
     template: `<MixinCarousel v-bind="args">
     <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide">
-      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide">
+      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide" data-chromatic="ignore">
     </div>
   </MixinCarousel>`
   })
@@ -46,7 +46,7 @@ export const BaseCarouselWLink = {
     },
     template: `<MixinCarousel v-bind="args">
     <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide">
-      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide">
+      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide" data-chromatic="ignore">
     </div>
   </MixinCarousel>`
   })

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -46,7 +46,9 @@
           <div class="swiper-wrapper">
             <slot />
           </div>
-          <div class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full">
+          <div
+            class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full ThemeVariantLight"
+          >
             <div class="xl:-ml-22 top-1/2 absolute left-0 z-30 -ml-20">
               <BaseButton
                 class="swiper-prev xl:text-xl"
@@ -196,7 +198,8 @@ export default defineComponent({
         initialSlide: this.initialSlide,
         a11y: {
           prevSlideMessage: this.heading ? this.heading + ' - Previous slide' : 'Previous slide',
-          nextSlideMessage: this.heading ? this.heading + ' - Next slide' : 'Next slide'
+          nextSlideMessage: this.heading ? this.heading + ' - Next slide' : 'Next slide',
+          slideRole: 'link'
         },
         breakpoints: {
           ...MixinCarouselOptions.breakpoints,

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -283,6 +283,7 @@ export default defineComponent({
 <template>
   <a
     class="MixinFancybox group cursor-pointer block"
+    role="link"
     aria-label="Open in Lightbox"
     :href="src"
     :data-fancybox="galleryName || ''"

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -199,7 +199,7 @@ export const NavInverted = {
       return { args }
     },
     template: `<div class="absolute inset-0">
-  <div style="height:2500px" class="nav-offset bg-dark-blue">
+  <div style="height:2500px" class="nav-offset bg-jpl-blue-darker">
     <NavDesktop v-bind="args" />
     <div v-if="invertOverride" class="-nav-offset max-w-screen-3xl mx-auto">
       <img class="w-full h-auto block" src="https://picsum.photos/1600/900" alt="Example Hero" />