@explorer-1/vue 0.0.0

package/src/components/MixinFancybox/MixinFancyboxOpenButton.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import IconExpand from '@explorer-1/vue/src/components/Icons/IconExpand.vue'
+
+export default defineComponent({
+  name: 'MixinFancyboxOpenButton',
+  components: {
+    IconExpand
+  }
+})
+</script>
+<template>
+  <div
+    ref="FancyboxOpenButton"
+    class="MixinFancyboxOpenButton"
+    role="presentation"
+  >
+    <div class="BaseButton -primary -icon-only pointer-events-none">
+      <span class="icon">
+        <IconExpand />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.MixinFancyboxOpenButton {
+  // scoped styles for Fancybox Opener button
+  @apply relative pointer-events-none cursor-pointer z-10;
+
+  .BaseButton {
+    @apply -top-px -right-px absolute focus:outline-none xl:text-xl inline-block;
+  }
+}
+</style>

package/src/components/MixinVideoBg/MixinVideoBg.stories.js

@@ -0,0 +1,23 @@
+import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
+import MixinVideoBg from './MixinVideoBg.vue'
+
+export default {
+  title: 'Mixins/MixinVideoBg',
+  component: MixinVideoBg,
+  excludeStories: /.*Data$/,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  }
+}
+
+export const Base = {
+  name: 'MixinVideoBg',
+  args: { video: BaseVideoData }
+}

package/src/components/MixinVideoBg/MixinVideoBg.vue

@@ -0,0 +1,39 @@
+<template>
+  <video
+    v-if="video && video.file"
+    loop
+    muted
+    playsinline
+    autoplay
+    preload="auto"
+    class="object-cover w-full h-full"
+  >
+    <source
+      v-if="video.fileWebm"
+      :src="video.fileWebm"
+      type="video/webm"
+    />
+    <source
+      :src="video.file"
+      type="video/mp4"
+    />
+    <source
+      v-if="video.fileOgg"
+      :src="video.fileOgg"
+      type="video/ogg"
+    />
+  </video>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'MixinVideoBg',
+  props: {
+    video: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,254 @@
+import { MenuHighlightColumnData } from './../NavHighlight/NavHighlight.stories'
+import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stories'
+import NavDesktop from './NavDesktop.vue'
+import NavDesktopTopHat from './NavDesktopTopHat.vue'
+import NavDesktopDropdown from './NavDesktopDropdown.vue'
+import NavDesktopDropdownContent from './NavDesktopDropdownContent.vue'
+import NavDesktopDropdownMore from './NavDesktopDropdownMore.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavDesktop',
+  component: NavDesktop,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+export const NavDesktopTopHatData = {
+  topHat: [
+    {
+      linkPage: {
+        title: 'Home',
+        url: '/'
+      },
+      title: 'JPL',
+      path: null
+    },
+    {
+      linkPage: null,
+      title: 'Career',
+      path: 'https://jpl.jobs/'
+    },
+    {
+      linkPage: null,
+      title: 'Science and Technology',
+      path: 'https://scienceandtechnology.jpl.nasa.gov/'
+    }
+  ]
+}
+
+// combined dropdown data
+export const NavDesktopDropdownContentData = {
+  blockType: 'MenuPanel',
+  titleLink: {
+    linkPage: {
+      title: 'About',
+      url: '/about/'
+    },
+    title: null
+  },
+  menuColumns: [
+    MenuHighlightColumnData,
+    {
+      blockType: 'MenuDescriptionColumn',
+      description: 'Lorem ipsum dolor sit amet.',
+      title: 'About'
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: null,
+      headingPage: null
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: null,
+      headingPage: null
+    }
+  ]
+}
+// combined dropdown data for "more" menu
+export const NavDesktopDropdownMoreData = {
+  blockType: 'MenuMorePanel',
+  titleText: 'More',
+  strapline:
+    'JPL is a unique research facility that carries out robotic space and Earth science missions.',
+  menuColumns: [
+    {
+      blockType: 'MenuDescriptionColumn',
+      description: 'Lorem ipsum dolor sit amet.',
+      title: 'About'
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: 'More from JPL',
+      headingPage: null
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: 'Explore Topics',
+      headingPage: null
+    },
+    {
+      blockType: 'MenuMoreHighlightsColumn',
+      heading: 'Discover',
+      headingPage: null,
+      highlights: [MenuHighlightColumnData, MenuHighlightColumnData]
+    }
+  ]
+}
+
+// combined header data // desktop and mobile
+
+export const NavDesktopData = {
+  breadcrumb:
+    '{"/": [{"path": "http://www.jpl.nasa.gov/", "title": "Asteroid watch"}, {"path": "http://www.jpl.nasa.gov/", "title": "Asteroid fast facts"}, {"path": "http://www.jpl.nasa.gov/", "title": "Meteor shower viewing guide"}, {"path": "http://www.jpl.nasa.gov/", "title": "Yeoman\'s top 10"}, {"path": "http://www.jpl.nasa.gov/", "title": "Glossary of space rocks"}, {"path": "/robotics-at-jpl/", "title": "Robotics"}, {"path": "http://www.jpl.nasa.gov/", "title": "Apps"}, {"path": "/jpl-life/", "title": "JPL Life"}, {"path": "/stars-and-galaxies/", "title": "Stars and Galaxies"}, {"path": "/exoplanets/", "title": "Exoplanets"}, {"path": "/solar-system/", "title": "Solar System"}, {"path": "/asteroids/", "title": "Asteroids"}, {"path": "/comets/", "title": "Comets"}, {"path": "/technology/", "title": "Technology"}, {"path": "/mars/", "title": "Mars"}, {"path": "/earth/", "title": "Earth"}, {"path": "/climate-change/", "title": "Climate Change"}, {"path": "/earthquakes/", "title": "Earthquakes"}, {"path": "/weather/", "title": "Weather"}, {"path": "/robotics/", "title": "Robotics"}], "/missions/": [{"path": "/missions/", "title": "Current"}, {"path": "/missions/", "title": "Past"}, {"path": "/missions/", "title": "Future"}, {"path": "/missions/", "title": "Proposed"}, {"path": "/missions/", "title": "All"}], "/news/": [{"path": "/news/", "title": "All news"}, {"path": "/news/", "title": "Press kits"}, {"path": "/news/", "title": "Fact sheets"}, {"path": "/news/", "title": "Media Information"}, {"path": "/news/", "title": "JPL newsletter"}]}',
+  ...NavDesktopTopHatData,
+  primaryNavigation: [
+    NavDesktopDropdownContentData,
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Missions',
+          url: '/missions/'
+        },
+        title: null
+      },
+      menuColumns: [
+        MenuHighlightColumnData,
+        {
+          blockType: 'MenuDescriptionColumn',
+          description: 'Lorem ipsum dolor sit amet.',
+          title: 'Missions'
+        },
+        {
+          ...MenuLinkColumnWithHeaderData,
+          heading: null,
+          headingPage: null
+        },
+        {
+          ...MenuLinkColumnWithHeaderData,
+          heading: null,
+          headingPage: null
+        }
+      ]
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'News',
+          url: '/news/'
+        },
+        title: null
+      }
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Galleries',
+          url: '/galleries/'
+        },
+        title: null
+      }
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Engage',
+          url: '/engage/'
+        },
+        title: null
+      }
+    },
+    NavDesktopDropdownMoreData
+  ]
+}
+
+export const Nav = {
+  args: {
+    data: NavDesktopData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    invertOverride: false
+  },
+  render: (args) => ({
+    components: { NavDesktop },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktop v-bind="args" />`
+  })
+}
+
+export const NavInverted = {
+  args: {
+    data: NavDesktopData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    invertOverride: true
+  },
+  render: (args) => ({
+    components: { NavDesktop },
+    setup() {
+      return { args }
+    },
+    template: `<div class="absolute inset-0">
+  <div style="height:2500px" class="nav-offset bg-dark-blue">
+    <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" />
+    </div>
+  </div>
+</div>`
+  })
+}
+
+export const TopHat = {
+  args: { data: NavDesktopData.topHat },
+  render: (args) => ({
+    components: { NavDesktopTopHat },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktopTopHat v-bind="args" />`
+  })
+}
+
+export const Dropdown = {
+  args: { data: NavDesktopDropdownContentData },
+  render: (args) => ({
+    components: { NavDesktopDropdown, NavDesktopDropdownContent },
+    setup() {
+      return { args }
+    },
+    template: `<div class="relative"><NavDesktopDropdown><template #dropdownLabel>Label Text</template><NavDesktopDropdownContent v-bind="args" /></NavDesktopDropdown></div>`
+  })
+}
+
+export const DropdownContent = {
+  args: { data: NavDesktopDropdownContentData },
+  render: (args) => ({
+    components: { NavDesktopDropdownContent },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktopDropdownContent v-bind="args" />`
+  })
+}
+
+export const DropdownMore = {
+  args: { data: NavDesktopDropdownMoreData },
+  render: (args) => ({
+    components: { NavDesktopDropdownMore },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktopDropdownMore v-bind="args" />`
+  })
+}

package/src/components/NavDesktop/NavDesktop.vue

@@ -0,0 +1,355 @@
+<template>
+  <div
+    class="NavDesktop z-50 w-full duration-150 ease-in"
+    :class="{
+      'sticky top-0': scrolledUp,
+      relative: !scrolledUp,
+      'transition-colors': scrollTop === 0, // smooth bg transition if going from opaque to transparent at top of page
+      'transition-transform': scrollTop > 0 && scrolledCurrentPage, // If not at the top of the page, just transition the transform to prevents content from peeking through on header reveal.
+      'transform -translate-y-full': !scrolledUp && !headerVisible,
+      '-scrolled transform translate-y-0': scrolledUp && headerVisible && scrollTop > 0,
+      '-transparent': invert,
+      '-hasSecondary': !headerStore?.highlightPrimary
+    }"
+  >
+    <!-- navbar -->
+    <div class="header-bg max-w-screen-3xl absolute inset-0 mx-auto"></div>
+    <div class="px-4">
+      <div class="h-28 container flex items-center justify-between mx-auto">
+        <!-- branding -->
+        <NavLogoLinks class="z-20 flex flex-shrink-0 my-2 -ml-1">
+          <img
+            v-if="scrolledUp && headerVisible && scrollTop > 0"
+            :src="LogoColor"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+          <img
+            v-else-if="invert"
+            :src="LogoWhite"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+          <img
+            v-else
+            :src="LogoColor"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+        </NavLogoLinks>
+        <!-- main nav with dropdowns -->
+        <nav
+          v-if="data"
+          aria-label="Main"
+          class="main-navigation flex items-center justify-end w-full"
+        >
+          <div
+            v-show="!searchVisible"
+            class="flex flex-wrap items-center justify-end"
+          >
+            <template v-for="(item, index) in data.primaryNavigation">
+              <NavDesktopDropdown
+                v-if="item.blockType === 'MenuPanel' && item.titleLink"
+                :key="index"
+                :class="{ '-active': checkActive(item.titleLink) }"
+                :parent-scrolled="scrollTop"
+              >
+                <template #dropdownLabel>
+                  {{ getLinkText(item.titleLink) }}
+                </template>
+                <NavDesktopDropdownContent :data="item" />
+              </NavDesktopDropdown>
+              <NavDesktopDropdown
+                v-else-if="item.blockType === 'MenuMorePanel'"
+                :key="`MenuMorePanel${index}`"
+                :class="{ '-active': checkActiveMore() }"
+                :parent-scrolled="scrollTop"
+              >
+                <template #dropdownLabel>
+                  {{ item.titleText }}
+                </template>
+                <NavDesktopDropdownMore :data="item" />
+              </NavDesktopDropdown>
+            </template>
+          </div>
+          <!-- search -->
+          <div
+            class="relative z-20 flex items-center w-auto"
+            :class="{ 'w-2/3': searchVisible }"
+          >
+            <button
+              v-if="!searchVisible"
+              aria-label="Open Search"
+              class="p-4 -mr-4 text-lg cursor-pointer"
+              @click="toggleSearch()"
+            >
+              <IconSearch />
+            </button>
+            <div
+              v-else
+              class="flex items-center w-full"
+            >
+              <NavSearchForm
+                class="w-full"
+                @clear-search="closeSearch()"
+                @submit-form="closeSearch()"
+              />
+              <button
+                aria-label="Close Search"
+                class="p-4 -mr-4 cursor-pointer"
+                @click="closeSearch()"
+              >
+                <IconClose class="text-sm" />
+              </button>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from './../../store/header'
+import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
+import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
+import NavDesktopDropdownMore from './../NavDesktop/NavDesktopDropdownMore.vue'
+import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
+import NavSearchForm from './../NavSearchForm/NavSearchForm.vue'
+import IconSearch from './../Icons/IconSearch.vue'
+import IconClose from './../Icons/IconClose.vue'
+import type { LinkObject, BreadcrumbObject } from './../../utils/mixins'
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
+import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
+import type { BreadcrumbPathObject } from '../../interfaces'
+import {
+  mixinIsActivePath,
+  mixinGetLinkText,
+  mixinUpdateGlobalChildren,
+  mixinUpdateSecondary
+} from './../../utils/mixins'
+
+export default defineComponent({
+  name: 'NavDesktop',
+  components: {
+    NavDesktopDropdown,
+    NavDesktopDropdownContent,
+    NavDesktopDropdownMore,
+    NavLogoLinks,
+    NavSearchForm,
+    IconSearch,
+    IconClose
+  },
+  props: {
+    data: {
+      type: Object || null,
+      required: false,
+      default: null
+    },
+    // this will override the initial display state (used in storybook)
+    invertOverride: {
+      type: Boolean,
+      required: false
+    },
+    headerVisible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrolled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrolledUp: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollTop: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      searchVisible: false,
+      // scrolledCurrentPage is used to track if a user has scrolled on the current page.
+      // This is used in transition logic to avoid distracting animations on route changes
+      // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
+      scrolledCurrentPage: false,
+      LogoColor: LogoColor,
+      LogoWhite: LogoWhite
+    }
+  },
+  computed: {
+    ...mapStores(useHeaderStore),
+    // get the breadcrumb JSON string and convert to object. used to determine active class.
+    breadcrumb(): BreadcrumbObject | null {
+      if (this.data) {
+        return JSON.parse(this.data.breadcrumb)
+      }
+      return null
+    },
+    // dynamic classes for header transparency and onScroll effects
+    invert(): boolean {
+      const highContrast =
+        typeof window !== 'undefined' // client-side only
+          ? window.matchMedia('(forced-colors: active)').matches
+          : false
+      // storybook-safe
+      const headerTransparent = this.headerStore ? this.headerStore?.headerTransparent : false
+      return !highContrast && (headerTransparent || this.invertOverride)
+    }
+  },
+
+  watch: {
+    scrollTop(newVal) {
+      if (newVal > 0) {
+        this.scrolledCurrentPage = true
+      } else {
+        this.scrolledCurrentPage = false
+      }
+    },
+    $route() {
+      // close the search on route change
+      if (this.searchVisible) {
+        this.closeSearch()
+      }
+      // update header transparency
+      if (this.headerStore) {
+        this.headerStore.makeTransparent(false)
+        // to reset if active primary nav item should be highlighted
+        // content pages can override this a la carte
+        this.headerStore.updateHighlightPrimary(true)
+        // clear secondary nav each time
+        mixinUpdateSecondary(null)
+      }
+      // reset scrolledCurrentPage on route change
+      this.scrolledCurrentPage = false
+    }
+  },
+  methods: {
+    // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
+    getUrlKey(item: LinkObject): string | null {
+      if (item.linkPage) {
+        return item.linkPage.url
+      }
+      return null
+    },
+    // to determine active class on menu links and 'more' menu links
+    checkActive(item: LinkObject) {
+      const urlKey = this.getUrlKey(item)
+      if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
+        // key into the breadcrumbs for each section
+        const objArray = this.breadcrumb.menu_links[urlKey]
+        // check if any of the paths contained in the array are active
+        const isActive = objArray.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        if (isActive) {
+          mixinUpdateGlobalChildren(this.breadcrumb.menu_links[urlKey])
+        }
+        return isActive
+      }
+      return false
+    },
+    checkActiveMore() {
+      if (this.breadcrumb && this.breadcrumb.more) {
+        // get the more menu array
+        const arr = this.breadcrumb.more
+        // check if array contains current path
+        const isActive = arr.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        if (isActive) {
+          // clear the secondary nav store when visiting a breadcrumb page
+          // ensures blank secondary nav unless explicitly set via content page "Promote" settings
+          mixinUpdateGlobalChildren(null)
+        }
+        return isActive
+      }
+      return false
+    },
+    toggleSearch() {
+      this.searchVisible ? this.closeSearch() : this.openSearch()
+    },
+    closeSearch() {
+      if (this.searchVisible) {
+        this.searchVisible = false
+        this.$emit('closeSearch')
+      }
+    },
+    openSearch() {
+      if (!this.searchVisible) {
+        this.searchVisible = true
+        this.$emit('openSearch')
+      }
+    },
+    getLinkText(item: LinkObject) {
+      return mixinGetLinkText(item)
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavDesktop {
+  @apply border-b border-transparent;
+  // styles for default vs transparent header
+  // underline color and logo inversion styles handled within their respective components
+  > .header-bg {
+    @apply bg-white;
+
+    .main-navigation {
+      > * {
+        @apply text-gray-dark;
+      }
+    }
+  }
+
+  &.-transparent {
+    @apply bg-transparent;
+
+    > .header-bg {
+      @apply bg-gradient-to-b from-transparent-black-75 to-transparent bg-transparent;
+    }
+
+    .main-navigation {
+      > * {
+        @apply text-white;
+
+        .NavDesktopDropdown > button {
+          // mimics .text-contrast class
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+        }
+      }
+    }
+  }
+
+  &.-scrolled {
+    @apply border-b border-gray-mid border-opacity-50 bg-white;
+
+    &.-transparent {
+      > .header-bg {
+        @apply opacity-0 bg-white;
+      }
+
+      .main-navigation {
+        > * {
+          @apply text-gray-dark;
+
+          .NavDesktopDropdown > button {
+            text-shadow: none;
+          }
+        }
+      }
+    }
+
+    &.-hasSecondary {
+      @apply border-0 border-transparent;
+    }
+  }
+}
+</style>