@explorer-1/vue 0.0.0

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -0,0 +1,181 @@
+<template>
+  <div
+    v-click-outside="closeDropdown"
+    class="NavSecondaryDropdown relative"
+    :class="{
+      'mr-auto': index === 0
+    }"
+  >
+    <MixinDropdownToggle
+      :aria-expanded="dropdownVisible ? true : false"
+      :path="item.path"
+      class="font-medium border-t-2 border-transparent block px-3 py-2"
+      :class="{
+        'mr-auto text-primary font-semibold secondary-root': index === 0,
+        'text-gray-dark': index !== 0,
+        '-open': dropdownVisible
+      }"
+      @toggle-clicked="toggleDropdown()"
+      @close-dropdown="closeDropdown()"
+    >
+      <span
+        class="flex content-center pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
+        :class="
+          index === 0
+            ? 'can-hover:group-hover:border-primary'
+            : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
+        "
+      >
+        <span>{{ item.title }}</span>
+        <IconCaret class="transform rotate-90 text-sm ml-2 pl-2 -mt-px" />
+      </span>
+    </MixinDropdownToggle>
+    <transition name="navfade">
+      <div
+        v-if="dropdownVisible"
+        class="absolute z-60 bg-gray-light shadow-jpl w-64 text-lg"
+        :class="isLast ? 'right-0' : 'left-0'"
+        @click.stop
+      >
+        <slot>
+          <NavSecondaryDropdownContent :item="item" />
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import IconCaret from './../Icons/IconCaret.vue'
+import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
+
+export default defineComponent({
+  name: 'NavSecondaryDropdown',
+  components: {
+    IconCaret,
+    MixinDropdownToggle,
+    NavSecondaryDropdownContent
+  },
+  props: {
+    // the index from the parent v-for loop
+    index: {
+      type: Number,
+      required: false
+    },
+    isLast: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // the nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      dropdownVisible: false
+    }
+  },
+  watch: {
+    $route() {
+      if (this.dropdownVisible) {
+        this.closeDropdown()
+      }
+    }
+  },
+  mounted() {
+    // TODO: VUE3: find solution for emitting event from slot
+    // https://stackoverflow.com/questions/50181858/this-root-emit-not-working-in-vue
+    // 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() {
+      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')
+      }
+    },
+    isExternal(path: string): boolean {
+      if (path && path.startsWith('http')) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavSecondaryDropdown {
+  .MixinDropdownToggle {
+    &.-open {
+      > span {
+        @apply border-black text-gray-dark #{!important};
+      }
+    }
+
+    &.-active {
+      > span {
+        @apply font-bold text-gray-dark;
+        @apply border-primary #{!important};
+      }
+    }
+    @include hover {
+      &.-active {
+        > span {
+          @apply text-gray-mid-dark;
+        }
+      }
+    }
+  }
+  // transitions
+  .navfade-enter-to,
+  .navfade-enter-active {
+    @apply transition-all ease-out transform duration-200;
+  }
+
+  .navfade-leave-active,
+  .navfade-leave-to {
+    @apply transition-all ease-out transform duration-200;
+  }
+
+  .navfade-enter-active {
+    @apply opacity-0;
+    @apply -translate-y-2;
+  }
+
+  .navfade-enter-to {
+    @apply opacity-100;
+    @apply translate-y-0;
+  }
+
+  .navfade-leave-to {
+    @apply opacity-100;
+    @apply translate-y-0;
+  }
+
+  .navfade-leave-active {
+    @apply opacity-0;
+    @apply -translate-y-2;
+  }
+}
+</style>

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -0,0 +1,140 @@
+<template>
+  <ul class="NavSecondaryDropdownContent">
+    <li>
+      <BaseLink
+        :to="item.path"
+        variant="none"
+        :link-class="linkClass()"
+        :aria-label="`Overview of ${item.title}`"
+        exact
+      >
+        <span> Overview </span>
+      </BaseLink>
+    </li>
+    <li
+      v-for="(child, child_index) in item.children"
+      :key="child_index"
+    >
+      <BaseLink
+        :to="child.path"
+        variant="none"
+        :link-class="linkClass(child, child_index === item.children.length - 1)"
+        exact
+      >
+        <span>
+          {{ child.title }}
+        </span>
+      </BaseLink>
+      <ul
+        v-if="child.children && child.children.length > 0"
+        class="pl-6"
+      >
+        <li
+          v-for="(grandchild, grandchild_index) in child.children"
+          :key="grandchild_index"
+          class=""
+        >
+          <BaseLink
+            :to="grandchild.path"
+            variant="none"
+            :link-class="
+              nestedLinkClass(
+                grandchild_index === child.children.length - 1,
+                child_index === item.children.length - 1
+              )
+            "
+            exact
+          >
+            <span>
+              {{ grandchild.title }}
+            </span>
+          </BaseLink>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+/*  NavSecondaryDropdownContent
+ *  Used to display children of tertiary nav elements in:
+ *  - NavSecondaryDropdown
+ *  - NavMobileSecondaryDropdown
+ */
+
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+interface NavItemObject {
+  path: String
+  title: String
+  children: [Object]
+}
+export default defineComponent({
+  name: 'NavSecondaryDropdownContent',
+  components: {
+    BaseLink
+  },
+  props: {
+    // the tertiary nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    linkClass(item?: NavItemObject, isLast?: Boolean) {
+      // default
+      let computedClass = 'py-2 lg:py-4'
+      if (!item) {
+        // if first (aka Overview)
+        computedClass = 'py-2 lg:pt-4 lg:pb-4'
+      } else if (item.children && item.children.length > 0) {
+        // if has children
+        computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
+      } else if (isLast) {
+        // if the very last
+        computedClass = 'py-2 lg:pt-4 lg:pb-6'
+      }
+      return computedClass
+    },
+    nestedLinkClass(isLast: Boolean, parentIsLast: Boolean) {
+      // default
+      let computedClass = 'pt-2 pb-1 lg:py-2'
+      if (isLast) {
+        // if the last
+        if (!parentIsLast) {
+          computedClass = 'py-2 lg:pt-2 lg:pb-4'
+        } else {
+          // the last of the last parent
+          computedClass = 'pt-2 pb-3 lg:pt-2 lg:pb-6'
+        }
+      }
+      return computedClass
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavSecondaryDropdownContent {
+  a {
+    @apply block pl-18 pr-6 lg:pl-6 text-black;
+
+    > span {
+      @apply border-b border-transparent pb-2px;
+    }
+
+    @include hover {
+      > span {
+        @apply border-black text-black;
+      }
+    }
+
+    &.nuxt-link-active {
+      > span {
+        @apply border-primary font-medium;
+      }
+    }
+  }
+}
+</style>

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -0,0 +1,62 @@
+<template>
+  <BaseLink
+    :href="isExternal(item.path) ? item.path : null"
+    :to="!isExternal(item.path) ? item.path : null"
+    link-class="block px-3 py-2"
+    variant="none"
+    class="NavSecondaryLink border-t-2 border-transparent"
+    :class="index === 0 ? 'mr-auto text-primary font-semibold secondary-root' : 'text-gray-dark'"
+  >
+    <span
+      class="inline-block pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
+      :class="
+        index === 0
+          ? 'can-hover:group-hover:border-primary'
+          : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
+      "
+    >
+      {{ item.title }}
+    </span>
+  </BaseLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+export default defineComponent({
+  name: 'NavSecondaryLink',
+  components: {
+    BaseLink
+  },
+  props: {
+    // the index from the v-for loop
+    index: {
+      type: Number,
+      required: false
+    },
+    // the nav item object that includes path and title
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    isExternal(path: string): boolean {
+      if (path && path.startsWith('http')) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavSecondaryLink {
+  .nuxt-link-exact-active {
+    span {
+      @apply font-bold text-gray-dark;
+      @apply border-primary #{!important};
+    }
+  }
+}
+</style>

package/src/components/NavSocial/NavSocial.stories.js

@@ -0,0 +1,20 @@
+import NavSocial from './NavSocial.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/NavSocial',
+  component: NavSocial,
+  excludeStories: /.*Data$/
+}
+
+export const Social = { args: { dark: false } }
+
+export const SocialDark = {
+  args: { dark: true },
+  render: (args) => ({
+    components: { NavSocial },
+    setup() {
+      return { args }
+    },
+    template: `<div class="p-8" class="bg-dark-blue"><NavSocial v-bind="args" /></div>`
+  })
+}

package/src/components/NavSocial/NavSocial.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="NavSocial relative flex flex-row items-start border-collapse">
+    <BaseButton
+      :variant="dark ? 'dark' : 'social'"
+      class="-facebook w-12 h-12 text-2xl"
+      href="http://www.facebook.com/NASAJPL"
+      aria-label="Follow JPL on Facebook"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialFacebook />
+      </template>
+    </BaseButton>
+    <BaseButton
+      :variant="dark ? 'dark' : 'social'"
+      class="-twitter w-12 h-12 text-2xl"
+      :class="{ '-ml-px': !dark }"
+      href="https://x.com/NASAJPL"
+      aria-label="Follow JPL on X"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialTwitter />
+      </template>
+    </BaseButton>
+    <BaseButton
+      :variant="dark ? 'dark' : 'social'"
+      class="-instagram w-12 h-12 text-2xl"
+      :class="{ '-ml-px': !dark }"
+      href="http://instagram.com/nasajpl"
+      aria-label="Follow JPL on Instagram"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialInstagram />
+      </template>
+    </BaseButton>
+    <BaseButton
+      :variant="dark ? 'dark' : 'social'"
+      class="-youtube w-12 h-12 text-3xl"
+      :class="{ '-ml-px': !dark }"
+      href="http://www.youtube.com/user/JPLnews?sub_confirmation=1"
+      aria-label="Follow JPL on YouTube"
+      target="_blank"
+      rel="noopener"
+    >
+      <template #icon>
+        <IconSocialYoutube />
+      </template>
+    </BaseButton>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconSocialFacebook from './../Icons/IconSocialFacebook.vue'
+import IconSocialTwitter from './../Icons/IconSocialTwitter.vue'
+import IconSocialInstagram from './../Icons/IconSocialInstagram.vue'
+import IconSocialYoutube from './../Icons/IconSocialYoutube.vue'
+
+export default defineComponent({
+  name: 'NavSocial',
+  components: {
+    BaseButton,
+    IconSocialFacebook,
+    IconSocialTwitter,
+    IconSocialInstagram,
+    IconSocialYoutube
+  },
+  props: {
+    dark: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+.BaseButton {
+  @apply relative;
+  @include hover {
+    @apply z-10;
+  }
+  // we have to define these here to override the extracted border styles native to BaseButton
+  &.-dark {
+    @apply border-l-0 #{!important};
+
+    &:first-child {
+      @apply border-l #{!important};
+    }
+  }
+}
+</style>

package/src/components/NewsDetailMediaContact/NewsDetailMediaContact.stories.js

@@ -0,0 +1,60 @@
+import NewsDetailMediaContact from './NewsDetailMediaContact.vue'
+
+export default {
+  title: 'WWW/NewsDetail/NewsDetailMediaContact',
+  component: NewsDetailMediaContact
+}
+
+const contacts = [
+  {
+    contact: {
+      name: 'Test Person',
+      address: 'Jet Propulsion Laboratory, Pasadena, Calif.',
+      email: 'test.person@jpl.nasa.gov',
+      phone: '818-354-1234'
+    }
+  }
+]
+
+export const Single = { args: { contacts, releaseNumber: '2020-140' } }
+
+export const Multiple = {
+  args: {
+    contacts: [
+      ...contacts,
+      {
+        contact: {
+          name: 'Person A / Person B',
+          address: '',
+          email: 'person_a@jpl.nasa.gov / person_b@jpl.nasa.gov',
+          phone: ''
+        }
+      },
+      {
+        contact: {
+          name: 'Person A and Person B',
+          address: '',
+          email: 'person_a@jpl.nasa.gov, person_b@jpl.nasa.gov',
+          phone: ''
+        }
+      },
+      {
+        contact: {
+          name: 'Other Person',
+          address: '',
+          email: 'other.person@jpl.nasa.gov',
+          phone: ''
+        }
+      },
+      {
+        contact: {
+          name: '',
+          address: '',
+          email: '',
+          phone: '818-354-5678'
+        }
+      }
+    ],
+    releaseNumber: '2020-140'
+  }
+}

package/src/components/NewsDetailMediaContact/NewsDetailMediaContact.test.js

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils'
+
+import NewsDetailMediaContact from './NewsDetailMediaContact.vue'
+
+describe('NewsDetailMediaContact', () => {
+  test('does not display anything if there are no contacts', () => {
+    const wrapper = mount(NewsDetailMediaContact, {
+      propsData: { contacts: [] }
+    })
+    expect(wrapper.find('*').exists()).toBe(false)
+  })
+
+  test('does not display for empty contacts', () => {
+    const wrapper = mount(NewsDetailMediaContact, {
+      propsData: {
+        contacts: [
+          {
+            contact: {
+              name: '',
+              address: '',
+              email: '',
+              phone: ''
+            }
+          }
+        ]
+      }
+    })
+    expect(wrapper.find('*').exists()).toBe(false)
+  })
+})

package/src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="hasContent">
+    <h2 class="text-h6 pt-5 md:pt-8 border-t border-gray-mid md:mb-8 mb-5">News Media Contact</h2>
+    <address
+      v-for="(contact, index) in contacts"
+      :key="index"
+      class="text-body-md mb-5 not-italic"
+    >
+      <p v-if="contact.contact.name">{{ contact.contact.name }}</p>
+      <p v-if="contact.contact.address">{{ contact.contact.address }}</p>
+      <p v-if="contact.contact.phone">{{ contact.contact.phone }}</p>
+      <p
+        v-if="contact.contact.email"
+        class="BlockText"
+        v-html="formatEmail(contact.contact.email)"
+      ></p>
+    </address>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+interface Contact {
+  contact: {
+    id: string
+    name: string
+    address: string
+    phone: string
+    email: string
+  }
+}
+
+export default defineComponent({
+  name: 'NewsDetailMediaContact',
+  props: {
+    contacts: {
+      type: Array as PropType<Contact[]>,
+      required: true,
+      default: () => []
+    }
+  },
+  computed: {
+    hasContent() {
+      return this.contacts.some(
+        (c) => c.contact.name || c.contact.address || c.contact.phone || c.contact.email
+      )
+    }
+  },
+  methods: {
+    formatEmail(email: string) {
+      const emailAddresses = email.split(/[,/]+/)
+      let iterations = emailAddresses.length
+      if (iterations === 1) {
+        return '<a href="mailto:' + email + '" target="_blank">' + email + '</a>'
+      } else {
+        let formattedEmailAddresses = ''
+        emailAddresses.forEach(function (item) {
+          const emailAddress = item.trim()
+          if (!--iterations) {
+            formattedEmailAddresses +=
+              '<a href="mailto:' + emailAddress + '" target="_blank">' + emailAddress + '</a>'
+          } else {
+            formattedEmailAddresses +=
+              '<a href="mailto:' + emailAddress + '" target="_blank">' + emailAddress + '</a> / '
+          }
+        })
+        return formattedEmailAddresses
+      }
+    }
+  }
+})
+</script>