@explorer-1/vue 0.0.0

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -0,0 +1,175 @@
+<template>
+  <div
+    ref="NavDropdownMobile"
+    class="NavDropdownMobile"
+  >
+    <MixinDropdownToggle
+      :aria-expanded="dropdownVisible ? true : false"
+      class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
+      :class="{
+        '-open': dropdownVisible
+      }"
+      @toggle-clicked="toggleDropdown()"
+      @close-dropdown="closeDropdown()"
+    >
+      <span
+        v-if="data"
+        class="block py-0 pl-6 -ml-4 border-l-4"
+      >
+        {{ (data.length && data[0].title) || getLinkText(data.titleLink) }}
+      </span>
+    </MixinDropdownToggle>
+
+    <div v-if="dropdownVisible">
+      <div class="mt-1 mb-3">
+        <template v-if="data?.links">
+          <NavMobileLink
+            v-for="(item, index) in data.links"
+            :key="index"
+            :data="item"
+            link-class="pl-12"
+            :exact="true"
+          />
+        </template>
+        <div v-else-if="data?.length > 0">
+          <template v-for="(item, index) in data">
+            <template v-if="item.children && item.children.length > 0">
+              <NavMobileSecondaryDropdown
+                :key="index"
+                :item="item"
+                :index="index"
+              />
+            </template>
+            <template v-else>
+              <NavMobileLink
+                :key="index"
+                :title="index === 0 ? 'Home' : undefined"
+                :data="item"
+                link-class="pl-12"
+                :exact="index === 0"
+              />
+            </template>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import type { LinkObject } from '../../utils/mixins'
+import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavMobileLink from './../NavMobile/NavMobileLink.vue'
+import NavMobileSecondaryDropdown from './../NavMobile/NavMobileSecondaryDropdown.vue'
+import { mixinGetLinkText } from '../../utils/mixins'
+export default defineComponent({
+  name: 'NavMobileDropdown',
+  components: {
+    MixinDropdownToggle,
+    NavMobileLink,
+    NavMobileSecondaryDropdown
+  },
+  props: {
+    // expects an object if populated from footer navigation data (default)
+    // expects an array when populated by secondary nav overrides
+    data: {
+      type: [Object, Array],
+      required: false
+    },
+    startOpen: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    expandMultiple: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data(): {
+    dropdownVisible: boolean
+    theDropdown: HTMLElement | null
+  } {
+    return {
+      dropdownVisible: false,
+      theDropdown: null
+    }
+  },
+  mounted() {
+    if (this.startOpen) {
+      this.dropdownVisible = true
+    }
+    this.theDropdown = this.$refs.NavDropdownMobile as HTMLElement
+    if (!this.expandMultiple) {
+      // 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('openMobileDropdown', this.closeIfOtherOpened)
+    }
+  },
+  methods: {
+    toggleDropdown() {
+      if (this.dropdownVisible) {
+        this.closeDropdown()
+      } else {
+        this.openDropdown()
+      }
+    },
+    closeDropdown() {
+      if (this.dropdownVisible) {
+        this.dropdownVisible = false
+        this.$root?.$emit('closeMobileDropdown', this.theDropdown)
+      }
+    },
+    openDropdown() {
+      if (!this.dropdownVisible) {
+        this.dropdownVisible = true
+        this.$root?.$emit('openMobileDropdown', this.theDropdown)
+      }
+    },
+    // allows all to remain open by default. Can override this with expandMultiple prop
+    closeIfOtherOpened(opened: HTMLElement) {
+      if (opened !== this.theDropdown) {
+        this.closeDropdown()
+      }
+    },
+    getLinkText(link: LinkObject) {
+      return mixinGetLinkText(link)
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavDropdownMobile {
+  // pushes the dropdown below the closest parent div that has position:relative (e.g. the header)
+  > div {
+    &::before {
+      content: '';
+      @apply relative z-0 w-full h-full block;
+    }
+  }
+
+  > button {
+    > span {
+      @apply border-transparent;
+    }
+
+    &.-open {
+      > span {
+        @apply border-primary font-bold;
+      }
+    }
+  }
+  // parent div is active
+  &.-active {
+    > button {
+      > span {
+        @apply border-primary font-bold;
+      }
+    }
+  }
+}
+</style>

package/src/components/NavMobile/NavMobileLink.vue

@@ -0,0 +1,69 @@
+<template>
+  <BaseLink
+    v-if="data"
+    variant="none"
+    class="NavMobileLink"
+    :link-class="`flex items-center py-2 text-lg leading-tight ${linkClass}`"
+    :href="data.path && !getRouterLink(data) ? data.path : undefined"
+    :to="getRouterLink(data) ? getRouterLink(data) : undefined"
+    :exact="exact"
+  >
+    <span>{{ title || getLinkText(data) }}</span>
+  </BaseLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import type { PropType } from 'vue'
+import type { LinkObject } from './../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+export default defineComponent({
+  name: 'NavMobileLink',
+  components: {
+    BaseLink
+  },
+  props: {
+    data: {
+      type: Object as PropType<LinkObject>,
+      required: false
+    },
+    // pass a custom title
+    title: {
+      type: String,
+      required: false
+    },
+    linkClass: {
+      type: String,
+      required: false
+    },
+    exact: {
+      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">
+.NavMobileLink {
+  span {
+    @apply border-b border-transparent;
+  }
+
+  .nuxt-link-active {
+    span {
+      @apply font-medium border-primary #{!important};
+    }
+  }
+}
+</style>

package/src/components/NavMobile/NavMobileSecondaryDropdown.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="NavMobileSecondaryDropdown relative">
+    <MixinDropdownToggle
+      :aria-expanded="dropdownVisible ? true : false"
+      :path="item.path"
+      class="w-full group cursor-pointer pl-12 flex items-center py-2 text-lg leading-tight"
+      :class="{
+        '-open': dropdownVisible
+      }"
+      @toggle-clicked="toggleDropdown()"
+      @close-dropdown="closeDropdown()"
+    >
+      <span>{{ index === 0 ? 'Home' : item.title }}</span>
+      <IconCaret class="transform rotate-90 text-sm ml-2" />
+    </MixinDropdownToggle>
+    <template v-if="dropdownVisible">
+      <slot>
+        <NavSecondaryDropdownContent
+          class="relative w-full text-lg"
+          :item="item"
+        />
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinIsActivePath } from '../../utils/mixins'
+import IconCaret from './../Icons/IconCaret.vue'
+import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
+
+export default defineComponent({
+  name: 'NavMobileSecondaryDropdown',
+
+  components: {
+    IconCaret,
+    MixinDropdownToggle,
+    NavSecondaryDropdownContent
+  },
+  props: {
+    // the index from the parent v-for loop
+    index: {
+      type: Number,
+      required: false
+    },
+
+    // the nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      dropdownVisible: false
+    }
+  },
+  computed: {
+    startOpen(): Boolean {
+      if (this.item) {
+        return mixinIsActivePath(this.item.path)
+      }
+      return false
+    }
+  },
+  watch: {
+    $route() {
+      if (this.dropdownVisible) {
+        this.closeDropdown()
+      }
+    }
+  },
+  mounted() {
+    if (this.startOpen) {
+      this.dropdownVisible = true
+    }
+  },
+  methods: {
+    toggleDropdown() {
+      console.log('dropdown toggled')
+      if (this.dropdownVisible) {
+        this.closeDropdown()
+      } else {
+        this.openDropdown()
+      }
+    },
+    closeDropdown() {
+      if (this.dropdownVisible) {
+        this.dropdownVisible = false
+        this.$emit('closeDropdown')
+      }
+    },
+    openDropdown() {
+      if (!this.dropdownVisible) {
+        this.dropdownVisible = true
+        this.$emit('openDropdown')
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavMobileSecondaryDropdown {
+  .MixinDropdownToggle {
+    span {
+      @apply border-b border-transparent;
+    }
+
+    &.-open {
+      span {
+        @apply border-gray-dark font-normal;
+      }
+    }
+
+    &.-active {
+      span {
+        @apply font-medium border-primary #{!important};
+      }
+    }
+  }
+}
+</style>

package/src/components/NavSearchForm/NavSearchForm.stories.js

@@ -0,0 +1,13 @@
+import NavSearchForm from './NavSearchForm.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavSearchForm',
+  component: NavSearchForm,
+  excludeStories: /.*Data$/
+}
+
+export const Form = {
+  args: {
+    mobile: false
+  }
+}

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -0,0 +1,102 @@
+<template>
+  <form
+    class="NavSearchForm"
+    @submit.prevent="submitSearch()"
+  >
+    <SearchInput
+      v-model="searchQuery"
+      placeholder="Search JPL"
+      :underlined-input="!mobile"
+      :underlined-input-value="searchQuery"
+      :auto-focus="!mobile"
+      :inline="!mobile"
+      :default-colors="mobile"
+      @esc="clearSearch()"
+    />
+    <button
+      type="submit"
+      class="sr-only"
+      aria-label="Submit"
+    >
+      Search
+    </button>
+  </form>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import SearchInput from './../SearchInput/SearchInput.vue'
+
+export default defineComponent({
+  name: 'NavSearchForm',
+  components: {
+    SearchInput
+  },
+  props: {
+    mobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      searchQuery: undefined
+    }
+  },
+  methods: {
+    clearSearch() {
+      this.searchQuery = undefined
+      this.$emit('clearSearch')
+    },
+    submitSearch() {
+      this.$emit('submitForm')
+      if (this.$router) {
+        this.$router.push({
+          name: 'search',
+          query: { query: this.searchQuery }
+        })
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavSearchForm {
+  ::placeholder {
+    @apply text-gray-dark;
+  }
+
+  .-transparent & {
+    ::placeholder {
+      @apply text-white;
+    }
+  }
+
+  .-transparent.-scrolled & {
+    ::placeholder {
+      @apply text-gray-dark;
+    }
+  }
+  @screen lg {
+    // remove the default styling of search field
+    input[type='search']::-ms-clear {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    input[type='search']::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    /* clears the 'X' from Chrome */
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button,
+    input[type='search']::-webkit-search-results-button,
+    input[type='search']::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/NavSecondary/NavSecondary.stories.js

@@ -0,0 +1,24 @@
+import NavSecondary from './NavSecondary.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavSecondary',
+  component: NavSecondary,
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component: `This component is only visible on large viewports. Mobile secondary nav is handled in the \`NavMobile\` component.`
+      }
+    }
+  }
+}
+
+export const NavSecondaryData = {
+  breadcrumb:
+    '[{"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-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"}, {"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-2", "title": "Lvl 4 No Children 2"}]}, {"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-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"}, {"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-2", "title": "Lvl 4 No Children 2"}]}, {"path": "/go/test-site/has-children/level-3-no-children", "title": "Lvl 3 No Children", "children": []}]}]'
+}
+
+export const SecondaryNav = {
+  name: 'NavSecondary',
+  args: { breadcrumb: NavSecondaryData.breadcrumb }
+}

package/src/components/NavSecondary/NavSecondary.vue

@@ -0,0 +1,191 @@
+<template>
+  <nav
+    v-if="enabled"
+    ref="NavSecondary"
+    aria-label="Secondary"
+    class="NavSecondary"
+    :class="{ 'has-intro': hasIntro }"
+  >
+    <div class="max-w-screen-3xl mx-auto">
+      <div
+        class="nav-secondary-container lg:container lg:px-0 lg:whitespace-normal border-gray-mid text-gray-mid-dark lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap border-t border-opacity-50"
+      >
+        <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
+          <template v-for="(item, index) in theBreadcrumb">
+            <template v-if="item.children && item.children.length > 0">
+              <NavSecondaryDropdown
+                :key="index"
+                :item="item"
+                :index="index"
+                :is-last="theBreadcrumb && index === theBreadcrumb.length - 1"
+              />
+            </template>
+            <template v-else>
+              <NavSecondaryLink
+                :key="index"
+                :item="item"
+                :index="index"
+              />
+            </template>
+          </template>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from './../../store/header'
+import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
+import NavSecondaryLink from './NavSecondaryLink.vue'
+import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixins'
+import type { BreadcrumbPathObject } from './../../interfaces'
+
+export default defineComponent({
+  /** The complexity of this component is due to the need for it to be populated from multiple data sources
+   ** SecondaryNav will first check to see if there is a navigation override from the data fetched for this specific page (data.breadcrumb and store.header.secondaryNav)
+   ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
+   ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
+   */
+  components: {
+    NavSecondaryDropdown,
+    NavSecondaryLink
+  },
+  props: {
+    breadcrumb: {
+      type: String,
+      required: false
+    },
+    hasIntro: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isSticky: false
+    }
+  },
+  computed: {
+    ...mapStores(useHeaderStore),
+    theBreadcrumb(): [BreadcrumbPathObject] | undefined {
+      if (this.breadcrumb) {
+        // we also want to update the store to override secondary nav
+        mixinUpdateSecondary(JSON.parse(this.breadcrumb))
+        return JSON.parse(this.breadcrumb)
+      } else if (this.headerStore) {
+        return this.headerStore.globalChildren
+      }
+      return undefined
+    },
+    enabled(): Boolean {
+      if ((this.theBreadcrumb && this.theBreadcrumb.length > 1) || this.$slots.default) {
+        return true
+      }
+      return false
+    }
+  },
+  mounted() {
+    if (this.enabled) {
+      // if there is a secondary nav displayed, then don't highlight the primary active item
+      mixinHighlightPrimary(false)
+    }
+
+    if (
+      !('IntersectionObserver' in window) ||
+      !('IntersectionObserverEntry' in window) ||
+      !('intersectionRatio' in window.IntersectionObserverEntry.prototype)
+    ) {
+      // intersection observer not supported
+    } else if (this.enabled) {
+      this.checkSticky()
+    }
+  },
+  methods: {
+    isExternal(path: string): boolean {
+      if (path && path.startsWith('http')) {
+        return true
+      }
+      return false
+    },
+    checkSticky() {
+      const stickyElement = this.$refs.NavSecondary as HTMLElement
+      // we need both observers for when the global nav is/isn't showing
+      const observer = new IntersectionObserver(
+        ([e]) => {
+          e.target.classList.toggle('-is-sticky', e.intersectionRatio < 1)
+        },
+        { threshold: [1] }
+      )
+      const observerOffset = new IntersectionObserver(
+        ([e]) => {
+          e.target.classList.toggle('-is-sticky-offset', e.intersectionRatio < 1)
+        },
+        {
+          threshold: [1],
+          // would prefer to use rems but intersection observer only works with % or px
+          rootMargin: '-113px 0px 0px 0px'
+        }
+      )
+      observer.observe(stickyElement)
+      observerOffset.observe(stickyElement)
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavSecondary {
+  top: -1px; // for intersection observer to work
+  @apply sticky z-50 w-full bg-white border-b border-gray-mid border-opacity-0 transition-border-opacity duration-150 ease-in;
+  @apply hidden;
+  @screen lg {
+    @apply block;
+  }
+
+  &.has-intro {
+    .nav-secondary-container {
+      @apply border-gray-mid border-opacity-0;
+    }
+  }
+
+  &.-is-sticky {
+    @apply border-gray-mid border-opacity-50;
+  }
+
+  .secondary-root {
+    .nuxt-link-exact-active {
+      span {
+        @apply text-primary font-semibold #{!important};
+      }
+    }
+  }
+
+  // for that nice horizontal scroll on mobile
+  .overflow-x-auto {
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  // change sticky point if global nav is showing
+  .header-sticky-showing & {
+    @apply top-18;
+
+    &.-is-sticky-offset {
+      @apply border-gray-mid border-opacity-50 transition-all;
+
+      .nav-secondary-container {
+        @apply border-gray-mid border-opacity-50;
+      }
+    }
+    @screen lg {
+      @apply top-28;
+    }
+  }
+}
+</style>