@explorer-1/vue 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -21,6 +21,7 @@
     "dayjs": "^1.11.11",
     "fast-qs": "^2.0.3",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.1",
     "sass": "^1.77.4",
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
@@ -28,7 +29,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.0"
+    "@explorer-1/common": "1.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseAudio/BaseAudio.vue

@@ -119,6 +119,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+// import { eventBus } from './../../utils/eventBus'
 import IconPlay from './../Icons/IconPlay.vue'
 import IconPause from './../Icons/IconPause.vue'
 import IconVolume from './../Icons/IconVolume.vue'
@@ -326,10 +327,8 @@ export default defineComponent({
         this.audio.addEventListener('play', this._handlePlayPause)
         this.audio.addEventListener('ended', this._handleEnded)
       }
-      // 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('play', this.pauseOthers)
+      // TODO: VUE3: pass uuID to pauseOthers() method
+      // eventBus.on('play', () => this.pauseOthers())
     },
     getAudio() {
       return this.$el.querySelectorAll('audio')[0]

package/src/components/BaseLink/BaseLink.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
 
 interface Variants {
@@ -145,6 +146,7 @@ export default defineComponent({
     clickEvent() {
       this.$root?.$emit('linkClicked')
       this.$emit('specificLinkClicked')
+      eventBus.emit('linkClicked')
     }
   }
 })

package/src/components/BaseTag/BaseTag.vue

@@ -9,9 +9,9 @@ const variantMap: Attributes = {
 }
 
 const sizeMap: Attributes = {
-  sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-base capitalize border-t py-1 px-3',
-  lg: 'text-lg capitalize border-t py-1 px-3'
+  sm: 'text-xs border-t-2 py-1 px-2.5',
+  md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
+  lg: 'text-base lg:text-lg border-t py-1.5 px-5'
 }
 
 interface BaseTagProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<BaseTagProps>(), {
 <template>
   <p
     :class="`${variantMap[props.variant]} ${sizeMap[props.size]}`"
-    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase"
   >
     <slot />
     <span class="sr-only">.</span>

package/src/components/BlockHeading/BlockHeading.vue

@@ -1,7 +1,10 @@
 <template>
   <BaseHeading
     v-if="data"
+    :id="getId"
     :level="data.level"
+    class="BlockHeading"
+    :class="{ 'has-anchor': generateId }"
   >
     {{ data.heading }}
   </BaseHeading>
@@ -9,6 +12,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { getHeadingId } from '../../utils/getHeadingId'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -20,7 +24,31 @@ export default defineComponent({
     data: {
       type: Object,
       required: false
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    generateId: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getId() {
+      return this.generateId ? getHeadingId(this.data?.heading, this.index) : undefined
     }
   }
 })
 </script>
+<style lang="scss">
+.BlockHeading {
+  &:target {
+    @apply scroll-mt-14;
+    @screen lg {
+      @apply scroll-mt-20;
+    }
+  }
+}
+</style>

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -11,7 +11,11 @@
         indent="col-3"
         class="mb-5"
       >
-        <BlockHeading :data="block" />
+        <BlockHeading
+          :data="block"
+          :index="index"
+          generate-id
+        />
       </LayoutHelper>
 
       <!-- custom margin bottom that matches BlockText styles if followed by InlineImageBlock -->

package/src/components/DetailHeadline/DetailHeadline.stories.js

@@ -1,9 +1,27 @@
-import DetailHeadline from './DetailHeadline.vue'
+import DetailHeadline, { pillColorVariants } from './DetailHeadline.vue'
 
 export default {
   title: 'Components/Utilities/DetailHeadline',
   component: DetailHeadline,
-  excludeStories: /.*Data$/
+  excludeStories: /.*Data$/,
+  argTypes: {
+    ariaLabel: {
+      type: 'string',
+      description:
+        "ARIA label. Recommended if your button label isn't descriptive, or if it only contains an icon."
+    },
+    pillColor: {
+      type: 'string',
+      description: 'Color of pill',
+      control: {
+        type: 'select'
+      },
+      options: pillColorVariants,
+      table: {
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  }
 }
 
 export const DetailHeadlineData = {
@@ -67,3 +85,10 @@ export const NoAuthor = {
     ]
   }
 }
+
+export const Pill = {
+  args: {
+    ...DetailHeadlineData,
+    pill: true
+  }
+}

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -1,45 +1,60 @@
 <template>
-  <div v-if="title || label || topics || publicationDate || author">
+  <div v-if="hasData">
     <div
-      v-if="label || (topics && topics.length) || readTime"
-      class="flex flex-wrap items-start mb-3"
+      v-if="hasEyebrow"
+      class="flex flex-wrap items-center mb-3"
     >
-      <div
-        v-if="topics && topics.length"
-        class="inline"
-      >
-        <BaseLink
-          variant="secondary"
-          :to="topics[0].url"
-          class="py-3"
-          :use-primary-color="themeStore.theme === 'ThemeEdu'"
+      <template v-if="pill && pillLabel">
+        <BaseTag
+          :variant="pillColor"
+          size="lg"
+          class="mr-3"
+        >
+          {{ pillLabel }}
+        </BaseTag>
+      </template>
+      <template v-else>
+        <div
+          v-if="topics && topics.length"
+          class="inline"
         >
-          <span :itemprop="schema ? 'articleSection' : undefined">
-            {{ topics[0].title }}
-          </span>
-        </BaseLink>
-      </div>
-      <span
-        v-else-if="label"
-        class="text-subtitle py-3 edu:text-primary"
-      >
-        <template v-if="!labelLink">
-          {{ label }}
-        </template>
-        <template v-else>
           <BaseLink
             variant="secondary"
-            :to="labelLink"
+            :to="topics[0].url"
             class="py-3"
             :use-primary-color="themeStore.theme === 'ThemeEdu'"
           >
-            {{ label }}
+            <span :itemprop="schema ? 'articleSection' : undefined">
+              {{ topics[0].title }}
+            </span>
           </BaseLink>
-        </template>
-      </span>
-      <span class="sr-only">.</span>
+        </div>
+        <span
+          v-else-if="label"
+          class="text-subtitle py-3 edu:text-primary"
+        >
+          <template v-if="!labelLink">
+            {{ label }}
+          </template>
+          <template v-else>
+            <BaseLink
+              variant="secondary"
+              :to="labelLink"
+              class="py-3"
+              :use-primary-color="themeStore.theme === 'ThemeEdu'"
+            >
+              {{ label }}
+            </BaseLink>
+          </template>
+        </span>
+      </template>
+      <span
+        v-if="hasTag"
+        class="sr-only"
+        >.</span
+      >
       <span
-        :class="`${(topics && topics.length) || label ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} my-4  text-gray-mid-dark uppercase text-sm lg:text-base leading-none`"
+        :class="`${hasTag && !pill ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} my-4  text-gray-mid-dark uppercase text-sm lg:text-base leading-none`"
       >
         {{ readTime }}
       </span>
@@ -51,7 +66,7 @@
       >{{ title }}
     </BaseHeading>
     <div
-      v-if="authors?.length || publicationDate"
+      v-if="hasByline"
       class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-none"
     >
       <span
@@ -107,12 +122,16 @@ import { useThemeStore } from '../../store/theme'
 import type { Topic, AuthorObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseTag from '../BaseTag/BaseTag.vue'
+
+export const pillColorVariants = ['primary', 'secondary', 'action']
 
 export default defineComponent({
   name: 'DetailHeadline',
   components: {
     BaseLink,
-    BaseHeading
+    BaseHeading,
+    BaseTag
   },
   props: {
     title: {
@@ -156,6 +175,15 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    pillColor: {
+      type: String,
+      default: 'primary',
+      validator: (prop: string): boolean => pillColorVariants.includes(prop)
+    },
     schema: {
       type: Boolean,
       default: false
@@ -163,6 +191,18 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useThemeStore),
+    hasTag(): boolean {
+      return this.topics?.length || this.label ? true : false
+    },
+    hasEyebrow(): boolean {
+      return this.hasTag || this.readTime ? true : false
+    },
+    hasByline(): boolean {
+      return this.authors?.length || this.publicationDate ? true : false
+    },
+    hasData(): boolean {
+      return this.title || this.hasEyebrow || this.hasByline ? true : false
+    },
     pubDatetime(): string | undefined {
       const currentTime = this.publicationTime || '00:00:00'
       const returnDate = new Date(this.publicationDate + ' ' + currentTime)
@@ -181,6 +221,9 @@ export default defineComponent({
         authors = [this.author] as AuthorObject[]
       }
       return authors
+    },
+    pillLabel(): string | undefined {
+      return this.label ? this.label : this.topics?.length ? this.topics[0].title : undefined
     }
   }
 })

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -3,7 +3,7 @@
     <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative z-20 px-4 font-medium border-t-2 border-transparent"
+      class="group relative z-20 px-4 font-medium border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
       :class="{
         '-open': dropdownVisible
       }"
@@ -37,6 +37,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
@@ -80,10 +81,7 @@ export default defineComponent({
     }
   },
   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)
+    eventBus.on('linkClicked', () => this.closeDropdown())
   },
   methods: {
     toggleDropdown() {

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

@@ -56,16 +56,8 @@ export const NavDesktopDropdownContentData = {
       description: 'Lorem ipsum dolor sit amet.',
       title: 'About'
     },
-    {
-      ...MenuLinkColumnWithHeaderData,
-      heading: null,
-      headingPage: null
-    },
-    {
-      ...MenuLinkColumnWithHeaderData,
-      heading: null,
-      headingPage: null
-    }
+    MenuLinkColumnWithHeaderData,
+    MenuLinkColumnWithHeaderData
   ]
 }
 // combined dropdown data for "more" menu
@@ -106,12 +98,11 @@ export const NavDesktopData = {
     '{"/": [{"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',
+          title: 'K-12 Resources',
           url: '/missions/'
         },
         title: null
@@ -139,7 +130,7 @@ export const NavDesktopData = {
       ...NavDesktopDropdownContentData,
       titleLink: {
         linkPage: {
-          title: 'News',
+          title: 'Internships',
           url: '/news/'
         },
         title: null
@@ -149,7 +140,7 @@ export const NavDesktopData = {
       ...NavDesktopDropdownContentData,
       titleLink: {
         linkPage: {
-          title: 'Galleries',
+          title: 'News & Events',
           url: '/galleries/'
         },
         title: null
@@ -159,7 +150,7 @@ export const NavDesktopData = {
       ...NavDesktopDropdownContentData,
       titleLink: {
         linkPage: {
-          title: 'Engage',
+          title: 'About',
           url: '/engage/'
         },
         title: null

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -25,8 +25,15 @@
           />
         </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 class="ml-2 pl-3 xl:ml-3 xl:pl-5 border-l border-white border-opacity-30 z-20">
+          <BaseLink
+            class="text-white font-bold text-2xl xl:text-3xl"
+            to="/edu/"
+            link-class="py-2"
+            variant="none"
+          >
+            Education
+          </BaseLink>
         </div>
         <!-- main nav with dropdowns -->
         <nav
@@ -51,6 +58,16 @@
                 <NavDesktopDropdownContent :data="item" />
               </NavDesktopDropdown>
             </template>
+            <BaseLink
+              href="https://www.nasa.gov/learning-resources/"
+              variant="none"
+              class="NavDesktopLink group relative z-20 font-medium border-t-2 border-transparent text-sm xl:text-base px-2 xl:px-4"
+              link-class="inline-block py-2 transition-colors duration-100 ease-in border-b-2 border-transparent group-hover:border-white flex flex-wrap-none items-center"
+              external-target-blank
+            >
+              NASA OSTEM
+              <IconExternal class="text-sm -mt-0.5 ml-2" />
+            </BaseLink>
           </div>
           <!-- search -->
           <div
@@ -93,10 +110,12 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
+import BaseLink from './../BaseLink/BaseLink.vue'
 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 IconExternal from './../Icons/IconExternal.vue'
 import IconSearch from './../Icons/IconSearch.vue'
 import IconClose from './../Icons/IconClose.vue'
 import type { LinkObject, BreadcrumbObject } from './../../utils/mixins'
@@ -112,12 +131,14 @@ import {
 export default defineComponent({
   name: 'NavDesktop',
   components: {
+    BaseLink,
     NavDesktopDropdown,
     NavDesktopDropdownContent,
     NavLogoLinks,
     NavSearchForm,
     IconSearch,
-    IconClose
+    IconClose,
+    IconExternal
   },
   props: {
     data: {
@@ -278,11 +299,6 @@ export default defineComponent({
   .main-navigation {
     > * {
       @apply text-white;
-
-      .NavDesktopDropdown > button {
-        // mimics .text-contrast class
-        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-      }
     }
   }
 }

package/src/components/NavDropdownToggle/NavDropdownToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     class="NavDropdownToggle group cursor-pointer"
-    :class="{ '-active': isActivePath }"
+    :class="{ '-active': isActivePath, '-invert': invert }"
     :aria-expanded="ariaExpanded"
     @click="clickEvent()"
     @keydown.esc="escEvent()"
@@ -26,13 +26,18 @@ export default defineComponent({
   props: {
     path: {
       type: String,
-      required: false
+      default: undefined
     },
     ariaExpanded: {
       type: Boolean,
-      required: false
+      default: false
+    },
+    invert: {
+      type: Boolean,
+      default: false
     }
   },
+  emits: ['closeDropdown', 'toggleClicked'],
   computed: {
     isActivePath() {
       if (this.path) {

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

@@ -6,7 +6,7 @@ export default {
   component: NavHeading,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker"><story/></div>`
+      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
     })
   ],
   parameters: {

package/src/components/NavHeading/NavHeading.vue

@@ -7,7 +7,7 @@
       <BaseLink
         variant="none"
         class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4"
-        link-class="p-2"
+        link-class="px-2 block"
         :to="data.headingPage.url"
       >
         {{ data.heading }}

package/src/components/NavJumpMenu/NavJumpMenu.stories.js

@@ -0,0 +1,47 @@
+import NavJumpMenu from './NavJumpMenu.vue'
+
+export default {
+  title: 'Navigation/Jump Menu',
+  component: NavJumpMenu,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+const JumpLinksData = [
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  }
+]
+export const BaseStory = {
+  name: 'Jump Menu',
+  args: {
+    title: 'Page Title',
+    jumpLinks: JumpLinksData,
+    invert: true
+  }
+}
+
+export const Light = {
+  args: {
+    title: 'Page Title',
+    jumpLinks: JumpLinksData,
+    invert: false
+  }
+}