@explorer-1/vue 0.1.0 → 0.1.2

package/src/components/NavDesktopEdu/NavDesktopEdu.stories.js

@@ -0,0 +1,186 @@
+import { MenuHighlightColumnData } from './../NavHighlight/NavHighlight.stories'
+import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stories'
+import NavDesktop from './NavDesktopEdu.vue'
+import NavDesktopTopHat from './../NavDesktop/NavDesktopTopHat.vue'
+import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
+import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
+import NavDesktopDropdownMore from './../NavDesktop/NavDesktopDropdownMore.vue'
+
+export default {
+  title: 'Navigation/Headers/EDU/NavDesktopEdu',
+  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
+      }
+    }
+  ]
+}
+
+export const BaseStory = {
+  name: 'NavDesktop',
+  args: {
+    data: NavDesktopData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    invertOverride: false
+  },
+  render: (args) => ({
+    components: { NavDesktop },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktop v-bind="args" />`
+  })
+}

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,