@explorer-1/vue 0.1.1 → 0.1.2

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -0,0 +1,315 @@
+<template>
+  <div
+    class="NavDesktopEdu ThemeEdu 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 z-10 max-w-screen-3xl absolute inset-0 mx-auto"></div>
+    <div class="bg-primary z-0 absolute right-0 w-1/2 top-0 bottom-0"></div>
+    <div class="px-4">
+      <div class="h-18 container flex items-center justify-between mx-auto">
+        <!-- branding -->
+        <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
+          <img
+            :src="LogoWhite"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+        </NavLogoLinks>
+        <!-- site title -->
+        <div class="ml-3 pl-5 border-l border-white border-opacity-30 z-20">
+          <span class="text-white font-bold text-3xl">Education</span>
+        </div>
+        <!-- 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>
+            </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 -transparent"
+            >
+              <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 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 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,
+    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,
+      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">
+.NavDesktopEdu {
+  @apply border-b border-transparent;
+
+  > .header-bg {
+    @apply bg-gradient-to-r from-black to-primary bg-transparent to-90%;
+  }
+
+  .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>

package/src/components/{MixinDropdownToggle/MixinDropdownToggle.vue → NavDropdownToggle/NavDropdownToggle.vue}

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="MixinDropdownToggle group cursor-pointer"
+    class="NavDropdownToggle group cursor-pointer"
     :class="{ '-active': isActivePath }"
     :aria-expanded="ariaExpanded"
     @click="clickEvent()"
@@ -22,7 +22,7 @@ export default defineComponent({
    * - NavMobileDropdown
    */
 
-  name: 'MixinDropdownToggle',
+  name: 'NavDropdownToggle',
   props: {
     path: {
       type: String,

package/src/components/NavHeading/NavHeading.stories.js

@@ -2,7 +2,7 @@ import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stori
 import NavHeading from './NavHeading.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavHeading',
+  title: 'Navigation/Elements/NavHeading',
   component: NavHeading,
   decorators: [
     () => ({
@@ -18,6 +18,6 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const Default = {
+export const BaseStory = {
   args: { data: MenuLinkColumnWithHeaderData }
 }

package/src/components/NavHeading/NavHeading.vue

@@ -6,7 +6,7 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-jpl-blue-lighter inline-block mb-4"
+        class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4"
         link-class="p-2"
         :to="data.headingPage.url"
       >
@@ -14,7 +14,7 @@
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-jpl-blue-lighter inline-block mb-4">
+      <div class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4">
         <span class="p-2">{{ data.heading }}</span>
       </div>
     </template>

package/src/components/NavHighlight/NavHighlight.stories.js

@@ -1,7 +1,7 @@
 import NavHighlight from './NavHighlight.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavHighlight',
+  title: 'Navigation/Elements/NavHighlight',
   component: NavHighlight,
   decorators: [
     () => ({
@@ -34,7 +34,7 @@ export const MenuHighlightColumnData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     customLabel: MenuHighlightColumnData.label,
     highlight: MenuHighlightColumnData.highlight

package/src/components/NavLinkList/NavLinkList.stories.js

@@ -1,7 +1,7 @@
 import NavLinkList from './NavLinkList.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavLinkList',
+  title: 'Navigation/Elements/NavLinkList',
   component: NavLinkList,
   decorators: [
     () => ({
@@ -39,7 +39,7 @@ export const MenuLinkColumnWithHeaderData = {
   ]
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: MenuLinkColumnWithHeaderData
   }

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

@@ -2,21 +2,18 @@ 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',
+  title: 'Navigation/Elements/NavLogoLinks',
   component: NavLogoLinks,
   excludeStories: /.*Data$/
 }
 
 // TODO: VUE3 -- fix logo image in story
-export const Default = {
-  args: {
-    src: LogoColor
-  },
+export const BaseStory = {
   render: (args) => ({
     components: { NavLogoLinks },
     setup() {
       return { args }
     },
-    template: `<div class="flex"><NavLogoLinks><img :src="src" alt="Logo Image" /></NavLogoLinks></div>`
+    template: `<div class="flex"><NavLogoLinks><img src="/images/svg/logo-tribrand-color.svg" alt="Logo Image" /></NavLogoLinks></div>`
   })
 }

package/src/components/NavLogoLinks/NavLogoLinks.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- branding -->
   <div class="NavLogoLinks relative">
     <div class="absolute inset-0 flex items-start">
       <BaseLink

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

@@ -4,7 +4,7 @@ import NavMobileDropdown from './NavMobileDropdown.vue'
 import NavMobileLink from './NavMobileLink.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavMobile',
+  title: 'Navigation/Headers/WWW/NavMobile',
   component: NavMobile,
   excludeStories: /.*Data$/,
   parameters: {
@@ -113,7 +113,8 @@ const NavMobileTertiaryNavData = [
   }
 ]
 
-export const Nav = {
+export const BaseStory = {
+  name: 'NavMobile',
   args: {
     data: NavMobileData,
     headerVisible: true,

package/src/components/NavMobile/NavMobile.vue

@@ -2,22 +2,39 @@
   <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="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b edu:bg-gray-light edu:border-none"
       :class="headerClasses"
     >
       <!-- navbar -->
       <div class="relative w-full">
-        <div class="h-18 flex items-center justify-between px-5">
+        <div
+          class="h-18 flex w-full justify-between items-center px-5 edu:bg-gradient-to-r edu:from-black edu:to-primary edu:to-90% edu:bg-black"
+        >
           <!-- 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>
-
+          <div class="flex items-center">
+            <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3 edu:w-[12rem]">
+              <img
+                v-if="themeStore.theme === 'ThemeEdu'"
+                :src="LogoWhite"
+                alt="JPL Logo"
+                width="324"
+                height="72"
+              />
+              <img
+                v-else
+                :src="LogoColor"
+                alt="JPL Logo"
+                width="324"
+                height="72"
+              />
+            </NavLogoLinks>
+            <div
+              v-if="themeStore.theme === 'ThemeEdu'"
+              class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20"
+            >
+              <span class="text-white font-bold text-xl pl-px">Education</span>
+            </div>
+          </div>
           <button
             v-if="data"
             class="text-gray-dark p-4 -mr-4 cursor-pointer"
@@ -26,11 +43,11 @@
           >
             <IconMenu
               v-if="!menuVisible"
-              class="text-6xl"
+              class="text-6xl edu:text-white"
             />
             <IconClose
               v-else
-              class="text-3xl"
+              class="text-3xl edu:text-white"
             />
           </button>
         </div>
@@ -84,7 +101,10 @@
                 :data="item"
               />
             </nav>
-            <NavSocial class="mt-8" />
+            <NavSocial
+              v-if="themeStore.theme === 'defaultTheme'"
+              class="mt-8"
+            />
           </div>
         </div>
       </div>
@@ -96,7 +116,9 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 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 { useHeaderStore } from './../../store/header'
+import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
 import IconClose from './../Icons/IconClose.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
@@ -146,15 +168,18 @@ export default defineComponent({
       default: null
     }
   },
+  emits: ['closeMobileMenu', 'openMobileMenu'],
   data() {
     return {
       menuVisible: false,
       searchQuery: null,
-      LogoColor: LogoColor
+      LogoColor,
+      LogoWhite
     }
   },
   computed: {
     ...mapStores(useHeaderStore),
+    ...mapStores(useThemeStore),
     // get the breadcrumb JSON string and convert to object. used to determine active class.
     breadcrumb(): BreadcrumbObject | null {
       if (this.data) {

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -3,7 +3,7 @@
     ref="NavDropdownMobile"
     class="NavDropdownMobile"
   >
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
       :class="{
@@ -18,7 +18,7 @@
       >
         {{ (data.length && data[0].title) || getLinkText(data.titleLink) }}
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
 
     <div v-if="dropdownVisible">
       <div class="mt-1 mb-3">
@@ -60,14 +60,14 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import type { LinkObject } from '../../utils/mixins'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.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,
+    NavDropdownToggle,
     NavMobileLink,
     NavMobileSecondaryDropdown
   },