@explorer-1/vue 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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.1"
   },
   "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,14 +1,33 @@
-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 = {
   title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight",
   publicationDate: '2020-08-13',
+  readTime: '3 min read',
   author: {
     name: 'Jane Platt',
     organization: 'JPL'
@@ -66,3 +85,10 @@ export const NoAuthor = {
     ]
   }
 }
+
+export const Pill = {
+  args: {
+    ...DetailHeadlineData,
+    pill: true
+  }
+}

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -1,43 +1,63 @@
 <template>
-  <div v-if="title || label || topics || publicationDate || author">
+  <div v-if="hasData">
     <div
-      v-if="label || (topics && topics.length)"
-      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>
+        </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="`${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>
-      <span class="sr-only">.</span>
     </div>
     <BaseHeading
       level="h1"
@@ -46,8 +66,8 @@
       >{{ title }}
     </BaseHeading>
     <div
-      v-if="authors?.length || publicationDate"
-      class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-normal"
+      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
         v-if="authors?.length"
@@ -102,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: {
@@ -130,6 +154,11 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    readTime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     topics: {
       type: Array as PropType<Topic[]>,
       required: false,
@@ -146,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
@@ -153,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)
@@ -171,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

@@ -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/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/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
+  }
+}

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -0,0 +1,141 @@
+<template>
+  <NavSecondary
+    v-if="enabled"
+    id="JumpMenuTop"
+    ref="NavJumpMenuRef"
+    class="NavJumpMenu -hide-until-threshold"
+    :invert="invert"
+  >
+    <template v-for="(item, index) in theBreadcrumbs">
+      <template v-if="item.children && item.children.length > 0">
+        <NavSecondaryDropdown
+          :key="index"
+          :item="item"
+          :index="index"
+          :is-last="theBreadcrumbs && index === theBreadcrumbs.length - 1"
+          :invert="invert"
+        >
+          <NavJumpMenuContent
+            :key="index"
+            :item="item"
+          />
+        </NavSecondaryDropdown>
+      </template>
+      <template v-else>
+        <NavSecondaryLink
+          :key="index"
+          :item="item"
+          :index="index"
+          :invert="invert"
+        />
+      </template>
+    </template>
+  </NavSecondary>
+</template>
+<script setup lang="ts">
+import { computed, defineExpose, ref, onMounted, watch } from 'vue'
+import { mixinUpdateSecondary } from './../../utils/mixins'
+import { useRoute } from 'vue-router'
+import NavSecondary from './../NavSecondary/NavSecondary.vue'
+import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
+import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
+import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
+import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
+import { getHeadingId } from '../../utils/getHeadingId'
+
+interface NavJumpMenuProps {
+  title?: string
+  jumpLinks?: BreadcrumbPathObject[]
+  blocks?: BlockData[]
+  headingLevel?: string
+  invert?: boolean
+  enabled?: boolean
+}
+
+const props = withDefaults(defineProps<NavJumpMenuProps>(), {
+  title: undefined,
+  jumpLinks: undefined,
+  blocks: undefined,
+  headingLevel: 'h2',
+  enabled: true,
+  invert: true,
+  hidden: false
+})
+
+const NavJumpMenuRef = ref()
+
+const theJumpLinks = computed(() => {
+  if (props.jumpLinks) {
+    return props.jumpLinks
+  } else if (props.blocks) {
+    const indexedBlocks = props.blocks.map((b, index) => {
+      return {
+        ...b,
+        index: index
+      }
+    })
+    const filteredBlocks = indexedBlocks.filter((b) => {
+      return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
+    })
+    // map to the correct data shape
+    const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+      return {
+        // @ts-expect-error using parameter that was added to BlockData
+        path: '#' + getHeadingId(l.heading, l.index),
+        title: l.heading
+      } as BreadcrumbPathObject
+    })
+    return links
+  }
+  return []
+})
+
+const theBreadcrumbs = computed(() => {
+  let breadcrumb = undefined
+  const rootItem = props.title
+    ? {
+        title: props.title,
+        path: '#JumpMenuTop'
+      }
+    : {
+        title: 'Back to top',
+        path: '#JumpMenuTop'
+      }
+  const jumpMenu: BreadcrumbPathObject = {
+    title: 'Jump to…',
+    path: '#',
+    children: theJumpLinks.value as BreadcrumbPathObject[]
+  }
+  if (theJumpLinks.value) {
+    breadcrumb = [rootItem, jumpMenu]
+  }
+  return breadcrumb as BreadcrumbPathObject[] | undefined
+})
+defineExpose({
+  NavJumpMenuRef
+})
+onMounted(() => {
+  mixinUpdateSecondary(theBreadcrumbs.value, true)
+})
+const route = useRoute()
+
+// repopulate the store with the jump links since the store is cleared on route changes
+watch(
+  route,
+  () => {
+    mixinUpdateSecondary(theBreadcrumbs.value, true)
+  }
+  // { flush: 'pre', immediate: true, deep: true }
+)
+</script>
+<style lang="scss">
+.NavJumpMenu {
+  &.-hide-until-threshold {
+    @apply opacity-0 h-0 transition-none overflow-visible;
+    &.-is-sticky,
+    &.-is-sticky-offset {
+      @apply opacity-100 transition-opacity;
+    }
+  }
+}
+</style>

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -0,0 +1,74 @@
+<template>
+  <ul class="NavJumpMenuContent bg-white">
+    <li
+      v-for="(child, index) in item.children"
+      :key="index"
+      class="text-base border-b border-gray-light"
+    >
+      <BaseLink
+        :href="child.path"
+        variant="none"
+        :link-class="linkClass(child)"
+      >
+        <span>
+          {{ child.title }}
+        </span>
+      </BaseLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+interface NavItemObject {
+  path: String
+  title: String
+  children: [Object]
+}
+export default defineComponent({
+  name: 'NavJumpMenuContent',
+  components: {
+    BaseLink
+  },
+  props: {
+    // the tertiary nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    linkClass(item?: NavItemObject) {
+      // 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'
+      }
+      return computedClass
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavJumpMenuContent {
+  a {
+    @apply block pl-18 pr-6 lg:pl-6 text-gray-dark;
+
+    > span {
+      @apply border-b border-transparent pb-2px;
+    }
+
+    &:hover {
+      > span {
+        @apply border-gray-dark text-gray-dark;
+      }
+    }
+  }
+}
+</style>