@explorer-1/vue 0.0.0

package/src/components/NavLinkList/NavLinkList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="data">
+    <NavHeading :data="data" />
+    <div
+      v-if="data.links"
+      :class="{ 'auto-col': autoCol }"
+    >
+      <div
+        v-for="(item, index) in data.links"
+        :key="index"
+        class="mb-0"
+      >
+        <BaseLink
+          variant="none"
+          class="block text-lg font-medium leading-tight text-white"
+          :href="item.path && !getRouterLink(item) ? item.path : undefined"
+          :to="getRouterLink(item) ? getRouterLink(item) : undefined"
+          link-class="can-hover:hover:underline inline-block px-2 py-3 -ml-2"
+        >
+          {{ getLinkText(item) }}
+        </BaseLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import NavHeading from './../NavHeading/NavHeading.vue'
+import type { LinkObject } from './../../utils/mixins'
+export default defineComponent({
+  name: 'NavLinkList',
+  components: {
+    BaseLink,
+    NavHeading
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    },
+    autoCol: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    getRouterLink(link: LinkObject): string | undefined {
+      return mixinGetRouterLink(link)
+    },
+    getLinkText(link: LinkObject): string | undefined {
+      return mixinGetLinkText(link)
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.auto-col {
+  @screen lg {
+    column-count: 2;
+  }
+}
+</style>

package/src/components/NavLogoLinks/NavLogoLinks.stories.js

@@ -0,0 +1,22 @@
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
+import NavLogoLinks from './NavLogoLinks.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavLogoLinks',
+  component: NavLogoLinks,
+  excludeStories: /.*Data$/
+}
+
+// TODO: VUE3 -- fix logo image in story
+export const Default = {
+  args: {
+    src: LogoColor
+  },
+  render: (args) => ({
+    components: { NavLogoLinks },
+    setup() {
+      return { args }
+    },
+    template: `<div class="flex"><NavLogoLinks><img :src="src" alt="Logo Image" /></NavLogoLinks></div>`
+  })
+}

package/src/components/NavLogoLinks/NavLogoLinks.vue

@@ -0,0 +1,57 @@
+<template>
+  <!-- branding -->
+  <div class="NavLogoLinks relative">
+    <div class="absolute inset-0 flex items-start">
+      <BaseLink
+        variant="none"
+        href="https://www.nasa.gov"
+        title="NASA"
+        aria-label="NASA"
+        class="w-1/4 h-full"
+        link-class="block w-auto h-full"
+        external-target-blank
+      ></BaseLink>
+      <BaseLink
+        variant="none"
+        to="/"
+        title="JPL Home"
+        aria-label="JPL Home"
+        class="flex-grow h-full"
+        link-class="block w-full h-full"
+      ></BaseLink>
+    </div>
+    <!-- JPL tribrand logo placed via the default slot -->
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+/*
+ ** This component provides a wrapper for the JPL tribrand logo
+ ** that creates overlay links for both the NASA insignia and the JPL homepage
+ **
+ ** The logo is added via a slot to allow for complex display logic such as in NavDesktop
+ */
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+export default defineComponent({
+  name: 'NavLogoLinks',
+  components: {
+    BaseLink
+  }
+})
+</script>
+<style lang="scss">
+// In Windows high contrast mode, gives the logo a "link color" background to convey it’s clickable.
+@media (forced-colors: active) {
+  .NavLogoLinks img {
+    position: relative;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .NavLogoLinks a {
+    background-color: linktext;
+  }
+}
+</style>

package/src/components/NavMobile/NavMobile.stories.js

@@ -0,0 +1,231 @@
+import { TheFooterData, MenuFooterPanelData } from './../TheFooter/TheFooter.stories'
+import NavMobile from './NavMobile.vue'
+import NavMobileDropdown from './NavMobileDropdown.vue'
+import NavMobileLink from './NavMobileLink.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavMobile',
+  component: NavMobile,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas',
+    viewport: {
+      defaultViewport: 'mobile2'
+    }
+  }
+}
+
+// data
+export const NavMobileData = {
+  mobileBreadcrumb:
+    '{"/": [{"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"}]}',
+  footerNavigation: TheFooterData.footerNavigation,
+  footerMoreFromJpl: TheFooterData.footerMoreFromJpl
+}
+
+const NavMobileSecondaryNavData = [
+  { path: '/custom', title: 'Secondary Nav' },
+  {
+    path: '/custom/placeholder-1',
+    title: 'First subpage'
+  },
+  {
+    path: '/custom/placeholder-2',
+    title: 'Second subpage'
+  },
+  {
+    path: '/custom/placeholder-3',
+    title: 'Third subpage'
+  },
+  {
+    path: '/custom/placeholder-4',
+    title: 'Fourth subpage'
+  }
+]
+
+const NavMobileTertiaryNavData = [
+  { path: '/go/test-site', title: 'Test Go Site', children: [] },
+  {
+    path: '/go/test-site/has-children',
+    title: 'Has Children',
+    children: [
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      },
+      {
+        path: '/go/test-site/has-children/level-3-has-children',
+        title: 'Lvl 3 Has Children',
+        children: [
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-1',
+            title: 'Lvl 4 No Children 1',
+            children: []
+          },
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-2',
+            title: 'Lvl 4 No Children 2',
+            children: []
+          }
+        ]
+      },
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      }
+    ]
+  },
+  { path: '/go/test-site/no-children-1', title: 'No Children 1', children: [] },
+  { path: '/go/test-site/no-children-2', title: 'No Children 2', children: [] },
+  {
+    path: '/go/test-site/has-children',
+    title: 'Has Children',
+    children: [
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      },
+      {
+        path: '/go/test-site/has-children/level-3-has-children',
+        title: 'Lvl 3 Has Children',
+        children: [
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-1',
+            title: 'Lvl 4 No Children 1',
+            children: []
+          },
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-2',
+            title: 'Lvl 4 No Children 2',
+            children: []
+          }
+        ]
+      },
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      }
+    ]
+  }
+]
+
+export const Nav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const WithSecondaryNav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    staticSecondaryData: NavMobileSecondaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const WithTertiaryNav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    staticSecondaryData: NavMobileTertiaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const Dropdown = {
+  args: {
+    data: MenuFooterPanelData
+  },
+  render: (args) => ({
+    components: { NavMobileDropdown },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobileDropdown
+      v-bind="args"
+    />`
+  })
+}
+
+export const DropdownActive = {
+  args: {
+    data: MenuFooterPanelData
+  },
+  render: (args) => ({
+    components: { NavMobileDropdown },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobileDropdown
+      v-bind="args"
+      class="-active"
+    />`
+  })
+}
+
+export const DropdownSecondary = {
+  args: {
+    data: NavMobileSecondaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobileDropdown },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobileDropdown
+      v-bind="args"
+    />`
+  })
+}
+
+export const Link = {
+  args: {
+    data: MenuFooterPanelData.links[0]
+  },
+  render: (args) => ({
+    components: { NavMobileLink },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobileLink
+      v-bind="args"
+    />`
+  })
+}

package/src/components/NavMobile/NavMobile.vue

@@ -0,0 +1,280 @@
+<template>
+  <transition name="headerMobileReveal">
+    <div
+      v-show="headerVisible"
+      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b"
+      :class="headerClasses"
+    >
+      <!-- navbar -->
+      <div class="relative w-full">
+        <div class="h-18 flex items-center justify-between px-5">
+          <!-- branding -->
+          <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3">
+            <img
+              :src="LogoColor"
+              alt="JPL Logo"
+              width="324"
+              height="72"
+            />
+          </NavLogoLinks>
+
+          <button
+            v-if="data"
+            class="text-gray-dark p-4 -mr-4 cursor-pointer"
+            :aria-label="menuVisible ? 'Close menu' : 'Open menu'"
+            @click="toggleMenu"
+          >
+            <IconMenu
+              v-if="!menuVisible"
+              class="text-6xl"
+            />
+            <IconClose
+              v-else
+              class="text-3xl"
+            />
+          </button>
+        </div>
+        <div
+          v-if="menuVisible"
+          class="pb-8"
+        >
+          <!-- search input goes here -->
+          <NavSearchForm
+            mobile
+            class="px-4 my-5"
+            @submit-form="closeMenu()"
+          />
+
+          <!-- secondary nav dropdown -->
+          <nav
+            v-if="hasSecondary"
+            aria-label="Secondary"
+          >
+            <NavMobileDropdown
+              :data="staticSecondaryData || headerStore.secondaryNav"
+              start-open
+            />
+            <hr class="border-gray-light-mid pb-4 mb-4 border-0 border-b" />
+          </nav>
+
+          <!-- main nav dropdowns, derived from footer data -->
+          <nav aria-label="Main">
+            <template v-for="(item, index) in data.footerNavigation">
+              <NavMobileDropdown
+                v-if="item.titleLink"
+                :key="index"
+                :class="{
+                  '-active': checkActive(item.titleLink) && !hasSecondary
+                }"
+                :data="item"
+                :start-open="checkActive(item.titleLink) && !hasSecondary"
+              />
+            </template>
+          </nav>
+          <div class="pl-8">
+            <nav
+              v-if="data.footerMoreFromJpl && data.footerMoreFromJpl.length > 0"
+              aria-label="Other JPL Sites"
+              class="mt-6"
+            >
+              <div class="text-subtitle text-primary mb-3">Other JPL Sites</div>
+              <NavMobileLink
+                v-for="(item, index) in data.footerMoreFromJpl"
+                :key="index"
+                :data="item"
+              />
+            </nav>
+            <NavSocial class="mt-8" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
+import { useHeaderStore } from './../../store/header'
+import IconMenu from './../Icons/IconMenu.vue'
+import IconClose from './../Icons/IconClose.vue'
+import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
+import NavMobileDropdown from './../NavMobile/NavMobileDropdown.vue'
+import NavMobileLink from './../NavMobile/NavMobileLink.vue'
+import NavSocial from './../NavSocial/NavSocial.vue'
+import NavSearchForm from './../NavSearchForm/NavSearchForm.vue'
+import type { LinkObject, BreadcrumbObject } from '../../utils/mixins'
+import { mixinIsActivePath } from '../../utils/mixins'
+import type { BreadcrumbPathObject } from '../../interfaces'
+
+export default defineComponent({
+  name: 'NavMobile',
+  components: {
+    IconMenu,
+    IconClose,
+    NavLogoLinks,
+    NavMobileDropdown,
+    NavMobileLink,
+    NavSocial,
+    NavSearchForm
+  },
+  props: {
+    data: {
+      type: Object || null,
+      required: false,
+      default: null
+    },
+    headerVisible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrolledUp: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollTop: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    staticSecondaryData: {
+      type: Array,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      menuVisible: false,
+      searchQuery: null,
+      LogoColor: LogoColor
+    }
+  },
+  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.mobileBreadcrumb)
+      }
+      return null
+    },
+    // dynamic classes for header transparency and onScroll effects
+    headerClasses() {
+      let classes = ''
+      // visibility when scrolled
+      if (this.scrolledUp && this.headerVisible && this.scrollTop > 0) {
+        classes = classes + ' -scrolled'
+      }
+      if (this.menuVisible) {
+        classes = classes + ' inset-0 overflow-auto'
+      }
+      return classes
+    },
+    // if current page has a secondary nav that should override behavior of the main nav
+    hasSecondary(): boolean {
+      if (this.staticSecondaryData || this.headerStore?.secondaryNav) {
+        return true
+      }
+      return false
+    }
+  },
+  watch: {
+    $route() {
+      // close the menu on route change
+      if (this.menuVisible) {
+        this.closeMenu()
+      }
+    }
+  },
+  mounted() {
+    // // 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('linkClicked', this.closeMenu)
+  },
+  methods: {
+    toggleMenu() {
+      if (this.menuVisible) {
+        this.closeMenu()
+      } else {
+        this.openMenu()
+      }
+    },
+    closeMenu() {
+      if (this.menuVisible) {
+        this.menuVisible = false
+        this.$emit('closeMobileMenu')
+        document.body.classList.remove('overflow-hidden')
+      }
+    },
+    openMenu() {
+      if (!this.menuVisible) {
+        this.menuVisible = true
+        this.$emit('openMobileMenu')
+        document.body.classList.add('overflow-hidden')
+      }
+    },
+    // 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
+        return objArray.some((el: BreadcrumbPathObject) => {
+          return mixinIsActivePath(el.path)
+        })
+      }
+      return false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavMobile {
+  @apply absolute top-0 z-50 inset-x-0;
+  // styles for default vs transparent header
+  // underline color and logo inversion styles handled within their respective components
+  &.-scrolled {
+    @apply fixed;
+  }
+}
+// vue-transition classes
+// may scope this wider if mobile uses the same transition
+.headerMobileReveal-enter-to,
+.headerMobileReveal-enter-active {
+  @apply transition-transform transform ease-in-out duration-200;
+}
+
+.headerMobileReveal-leave-active,
+.headerMobileReveal-leave-to {
+  @apply transition-transform transform ease-out duration-200;
+}
+
+.headerMobileReveal-enter-active {
+  @apply -translate-y-full;
+}
+
+.headerMobileReveal-enter-to {
+  @apply translate-y-0;
+}
+
+.headerMobileReveal-leave-to {
+  @apply translate-y-0;
+}
+
+.headerMobileReveal-leave-active {
+  @apply -translate-y-full;
+}
+</style>