@explorer-1/vue 0.0.0

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="NavDesktopDropdown">
+    <MixinDropdownToggle
+      v-click-outside="closeDropdown"
+      :aria-expanded="dropdownVisible ? true : false"
+      class="group relative z-20 px-4 font-medium border-t-2 border-transparent"
+      :class="{
+        '-open': dropdownVisible
+      }"
+      @toggle-clicked="toggleDropdown()"
+      @close-dropdown="closeDropdown()"
+    >
+      <span
+        class="inline-block py-2 transition-colors duration-100 ease-in border-b-2"
+        :class="{ hasSecondary: hasSecondary }"
+      >
+        <slot name="dropdownLabel">Dropdown</slot>
+      </span>
+    </MixinDropdownToggle>
+
+    <transition name="navfade">
+      <div
+        v-if="dropdownVisible"
+        class="absolute inset-0 w-full"
+      >
+        <!-- @click.stop so the v-click-outside directive will ignore clicks inside the dropdown -->
+        <div
+          class="max-w-screen-3xl mx-auto"
+          @click.stop
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from './../../store/header'
+import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+
+export default defineComponent({
+  name: 'NavDesktopDropdown',
+  components: {
+    MixinDropdownToggle
+  },
+  props: {
+    parentScrolled: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      dropdownVisible: false
+    }
+  },
+  computed: {
+    ...mapStores(useHeaderStore),
+    hasSecondary(): boolean {
+      if (this.headerStore) {
+        return !this.headerStore.highlightPrimary
+      }
+      return false
+    }
+  },
+  watch: {
+    $route() {
+      if (this.dropdownVisible) {
+        this.closeDropdown()
+      }
+    },
+    parentScrolled() {
+      if (this.dropdownVisible) {
+        this.closeDropdown()
+      }
+    }
+  },
+  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.closeDropdown)
+  },
+  methods: {
+    toggleDropdown() {
+      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">
+.NavDesktopDropdown {
+  // 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-jpl-red;
+
+        .-transparent & {
+          @apply border-white;
+        }
+
+        .-transparent.-scrolled & {
+          @apply border-jpl-red;
+        }
+      }
+    }
+    @include hover {
+      > span {
+        @apply border-jpl-red;
+
+        .-transparent & {
+          @apply border-white;
+        }
+
+        .-transparent.-scrolled & {
+          @apply border-jpl-red;
+        }
+      }
+    }
+  }
+  // parent div is active
+  &.-active {
+    > button {
+      > span {
+        @apply border-jpl-red font-bold;
+
+        .-transparent & {
+          @apply border-white;
+        }
+
+        .-transparent.-scrolled & {
+          @apply border-jpl-red;
+        }
+
+        &.hasSecondary {
+          @apply border-transparent #{!important};
+        }
+      }
+    }
+  }
+
+  // transitions
+  .navfade-enter-to,
+  .navfade-enter-active {
+    @apply transition-all ease-out transform duration-500;
+  }
+
+  .navfade-leave-active,
+  .navfade-leave-to {
+    @apply transition-all ease-out transform duration-100;
+  }
+
+  .navfade-enter-active {
+    @apply opacity-0 translate-y-2;
+  }
+
+  .navfade-enter-to {
+    @apply opacity-100 translate-y-0;
+  }
+
+  .navfade-leave-to {
+    @apply opacity-100; // translate-y-0
+  }
+
+  .navfade-leave-active {
+    @apply opacity-0; // -translate-y-2
+  }
+}
+</style>

package/src/components/NavDesktop/NavDesktopDropdownContent.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    v-if="data"
+    class="NavDesktopDropdownContent bg-dark-blue bg-opacity-98 3xl:px-0 px-4 py-10 text-white"
+  >
+    <div
+      v-if="data.menuColumns"
+      class="BaseGrid container mx-auto"
+    >
+      <template v-for="(item, index) in data.menuColumns">
+        <!-- featured story -->
+        <div
+          v-if="item.blockType === 'MenuHighlightColumn'"
+          :key="`MenuHighlightColumn${index}`"
+          class="order-1 col-span-4 col-start-1"
+        >
+          <div class="grid grid-cols-4">
+            <NavHighlight
+              :highlight="item.highlight"
+              :custom-label="item.label"
+              class="col-span-3"
+            />
+          </div>
+        </div>
+
+        <!-- heading and summary -->
+        <div
+          v-else-if="item.blockType === 'MenuDescriptionColumn'"
+          :key="`MenuDescriptionColumn${index}`"
+          class="order-2 col-span-3"
+        >
+          <p class="text-medium text-6xl">{{ item.title }}</p>
+          <p class="text-sm leading-relaxed">
+            {{ item.description }}
+          </p>
+        </div>
+      </template>
+
+      <!-- container for link cols -->
+      <div
+        v-if="linkColumns"
+        class="grid order-3 grid-cols-4 col-span-4 col-start-9 gap-6"
+      >
+        <NavLinkList
+          v-for="(col, index) in linkColumns"
+          :key="index"
+          :data="col"
+          class="col-span-2"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import _map from 'lodash/map'
+import _without from 'lodash/without'
+import NavLinkList from './../NavLinkList/NavLinkList.vue'
+import NavHighlight from './../NavHighlight/NavHighlight.vue'
+
+export default defineComponent({
+  name: 'NavDesktopDropdownContent',
+  components: {
+    NavLinkList,
+    NavHighlight
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    linkColumns() {
+      let columns = undefined
+      columns = this.data
+        ? _map(this.data.menuColumns, function (o) {
+            if (o.blockType.includes('MenuLinkColumnWithHeader')) return o
+          })
+        : undefined
+      columns = _without(columns, undefined) // remove null
+      return columns
+    }
+  }
+})
+</script>

package/src/components/NavDesktop/NavDesktopDropdownMore.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="data"
+    class="NavDesktopDropdownMore bg-dark-blue bg-opacity-98 3xl:px-0 w-full px-4 py-10 text-white"
+  >
+    <div class="BaseGrid container mx-auto">
+      <div
+        v-if="linkColumns"
+        class="grid order-1 grid-cols-2 col-span-9 grid-rows-2 gap-10"
+      >
+        <!-- link columns -->
+        <template v-for="(col, index) in linkColumns">
+          <div
+            v-if="index === 0"
+            :key="`rowSpan1${index}`"
+            class="row-span-1"
+          >
+            <NavLinkList
+              :data="col"
+              auto-col
+            />
+          </div>
+          <div
+            v-else-if="index === 1"
+            :key="`rowSpan2${index}`"
+            class="row-span-2"
+          >
+            <NavLinkList
+              :data="col"
+              auto-col
+            />
+          </div>
+        </template>
+
+        <!-- summary text and social media links -->
+        <div class="row-span-1 row-start-2">
+          <p
+            v-if="data.strapline"
+            class="text-medium pr-5 mb-8 text-6xl leading-tight"
+          >
+            {{ data.strapline }}
+          </p>
+          <NavSocial dark />
+        </div>
+      </div>
+
+      <!-- highlights -->
+      <div
+        v-if="highlightsColumn"
+        class="order-2 col-span-3 col-start-10"
+      >
+        <NavHeading :data="highlightsColumn" />
+        <div
+          v-for="(highlight, index) in highlightsColumn.highlights"
+          :key="index"
+          :class="{ 'mb-10': index + 1 !== highlightsColumn.highlights.length }"
+        >
+          <NavHighlight :highlight="highlight.highlight" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import _map from 'lodash/map'
+import _without from 'lodash/without'
+
+import NavLinkList from './../NavLinkList/NavLinkList.vue'
+import NavSocial from './../NavSocial/NavSocial.vue'
+import NavHighlight from './../NavHighlight/NavHighlight.vue'
+import NavHeading from './../NavHeading/NavHeading.vue'
+
+export default defineComponent({
+  name: 'NavDesktopDropdownMore',
+  components: {
+    NavLinkList,
+    NavSocial,
+    NavHighlight,
+    NavHeading
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    linkColumns() {
+      let columns = undefined
+      columns = this.data
+        ? _map(this.data.menuColumns, function (o) {
+            if (o.blockType.includes('MenuLinkColumnWithHeader')) return o
+          })
+        : undefined
+      columns = _without(columns, undefined) // remove null
+      return columns
+    },
+    highlightsColumn() {
+      let columns = undefined
+      columns = this.data
+        ? _map(this.data.menuColumns, function (o) {
+            if (o.blockType.includes('MenuMoreHighlightsColumn')) return o
+          })
+        : undefined
+      columns = _without(columns, undefined) // remove null
+      return columns?.length ? columns[0] : undefined
+    }
+  }
+})
+</script>

package/src/components/NavDesktop/NavDesktopTopHat.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="NavDesktopTopHat z-50 px-4 bg-black">
+    <div class="container mx-auto">
+      <nav
+        aria-label="JPL Sites"
+        class="flex items-center text-sm font-medium text-white bg-black"
+      >
+        <BaseLink
+          v-for="(item, index) in data"
+          :key="index"
+          variant="none"
+          external-target-blank
+          :href="item.path ? item.path : undefined"
+          :to="item.linkPage ? item.linkPage.url : undefined"
+          class="group flex px-3 border-t-2 border-transparent"
+          :class="{ '-ml-3': index === 0 }"
+        >
+          <span
+            class="can-hover:group-hover:border-jpl-red-light inline-block py-2 border-b-2"
+            :class="index === 0 ? 'border-jpl-red-light' : 'border-transparent'"
+          >
+            {{ getLinkText(item) }}
+          </span>
+        </BaseLink>
+      </nav>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import type { LinkObject } from './../../utils/mixins'
+import type { PropType } from 'vue'
+
+export default defineComponent({
+  name: 'NavDesktopTopHat',
+  components: {
+    BaseLink
+  },
+  props: {
+    data: {
+      type: Array as PropType<LinkObject[]>,
+      required: false
+    }
+  },
+  methods: {
+    getRouterLink(link: LinkObject): string | undefined {
+      return mixinGetRouterLink(link)
+    },
+    getLinkText(link: LinkObject): string | undefined {
+      return mixinGetLinkText(link)
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,23 @@
+import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stories'
+import NavHeading from './NavHeading.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavHeading',
+  component: NavHeading,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="p-8 bg-dark-blue"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'docs'
+  },
+  excludeStories: /.*Data$/
+}
+
+export const Default = {
+  args: { data: MenuLinkColumnWithHeaderData }
+}

package/src/components/NavHeading/NavHeading.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-if="data"
+    class="-mt-2 -ml-2"
+  >
+    <template v-if="data.headingPage && data.heading">
+      <BaseLink
+        variant="none"
+        class="text-subtitle text-blue inline-block mb-4"
+        link-class="p-2"
+        :to="data.headingPage.url"
+      >
+        {{ data.heading }}
+      </BaseLink>
+    </template>
+    <template v-else-if="data.heading">
+      <div class="text-subtitle text-blue inline-block mb-4">
+        <span class="p-2">{{ data.heading }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+export default defineComponent({
+  name: 'NavHeading',
+  components: {
+    BaseLink
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,42 @@
+import NavHighlight from './NavHighlight.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavHighlight',
+  component: NavHighlight,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="lg:BaseGrid container"><div class="col-span-5"><story/></div></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'docs'
+  },
+  excludeStories: /.*Data$/
+}
+
+export const MenuHighlightColumnData = {
+  blockType: 'MenuHighlightColumn',
+  label: 'Custom Label Override',
+  highlight: {
+    label: 'Solar System',
+    title: 'Gravity Recovery and Climate Experiment Follow-On',
+    url: '/missions/gravity-recovery-and-climate-experiment-follow-on-grace-fo/',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/400/225',
+        width: 400,
+        height: 225
+      }
+    }
+  }
+}
+
+export const Default = {
+  args: {
+    customLabel: MenuHighlightColumnData.label,
+    highlight: MenuHighlightColumnData.highlight
+  }
+}

package/src/components/NavHighlight/NavHighlight.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="highlight">
+    <BaseLink
+      variant="none"
+      external-target-blank
+      link-class="block"
+      :to="highlight.url"
+    >
+      <div
+        v-if="highlight.thumbnailImage"
+        class="mb-4"
+      >
+        <BaseImagePlaceholder
+          aspect-ratio="16:9"
+          dark-mode
+          no-logo
+        >
+          <BaseImage
+            v-if="highlight.thumbnailImage.src"
+            :src="highlight.thumbnailImage.src.url"
+            :width="highlight.thumbnailImage.src.width"
+            :height="highlight.thumbnailImage.src.height"
+            alt=""
+            object-fit-class="cover"
+            image-class="can-hover:group-hover:scale-100 transition duration-300 ease-in-out transform scale-105"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+      </div>
+
+      <p
+        v-if="customLabel || highlight.label"
+        class="text-subtitle-sm mb-2"
+      >
+        {{ customLabel || highlight.label }}
+      </p>
+      <span class="sr-only">.</span>
+      <p v-if="highlight.title">{{ highlight.title }}</p>
+    </BaseLink>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+
+export default defineComponent({
+  name: 'NavHighlight',
+  components: {
+    BaseLink,
+    BaseImage,
+    BaseImagePlaceholder
+  },
+  props: {
+    highlight: {
+      type: Object,
+      required: false
+    },
+    customLabel: {
+      type: String,
+      required: false
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,46 @@
+import NavLinkList from './NavLinkList.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavLinkList',
+  component: NavLinkList,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="bg-dark-blue p-8"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const MenuLinkColumnWithHeaderData = {
+  blockType: 'MenuLinkColumnWithHeader',
+  heading: 'The Heading',
+  headingPage: {
+    url: '/solar-system/'
+  },
+  links: [
+    {
+      linkPage: {
+        title: 'Missions',
+        url: '/missions/aquarius/'
+      },
+      title: 'Recent Missions',
+      path: null
+    },
+    {
+      linkPage: null,
+      title: 'External Link Test',
+      path: 'https://nasa.gov'
+    }
+  ]
+}
+
+export const Default = {
+  args: {
+    data: MenuLinkColumnWithHeaderData
+  }
+}