@explorer-1/vue 0.3.6 → 0.3.7

package/src/components/MixinAnimationCaret/MixinAnimationCaret.vue

@@ -1,4 +1,9 @@
 <script lang="ts">
+/**
+ * This mixin appends an animated caret to a line of text or to more complex HTML markup.
+ * When implemented, it must be wrapped by a link element with CSS class `group` to ensure that the animation is triggered by hovering over the link.
+ * See the `BaseLink` primary variant for an implementation example. */
+
 import { defineComponent } from 'vue'
 import IconCaret from './../Icons/IconCaret.vue'
 
@@ -8,32 +13,33 @@ export default defineComponent({
     IconCaret
   },
   props: {
-    // when wrapped in a parent component i.e. BaseLink and grandparent component needs to pass a class
-    // appended to classes applied to .MixinAnimationCaret
+    /** Use when wrapped in a parent component. Appends to classes applied to .`MixinAnimationCaret`.
+     * Use-case example: BaseLink and grandparent component needs to pass a class
+     */
     passedWrapperClass: {
       type: String || null,
       required: false,
       default: ''
     },
-    // to modify spacing around the caret itself
+    /** Modify spacing around the caret itself with TailwindCSS classes */
     arrowClass: {
       type: String,
       required: false,
       default: ''
     },
-    // default color class
+    /** Default color class. Use TailwindCSS classes */
     color: {
       type: String,
       required: false,
       default: 'text-primary'
     },
-    // default margin left class
+    /** Default margin left class. Use TailwindCSS classes */
     marginLeft: {
       type: String,
       default: 'ml-1',
       required: false
     },
-    // appends .caret-inline .MixinAnimationCaret
+    /** Appends .caret-inline to .MixinAnimationCaret */
     inline: {
       type: Boolean,
       default: false,

package/src/components/MixinCarousel/MixinCarousel.stories.js

@@ -1,15 +1,9 @@
-import MixinCarousel, { variants } from './MixinCarousel.vue'
+import MixinCarousel from './MixinCarousel.vue'
 
 export default {
   title: 'Mixins/MixinCarousel',
   component: MixinCarousel,
-  tags: ['!autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: Object.keys(variants)
-    }
-  }
+  tags: ['autodocs', 'carousels']
 }
 
 export const BaseStory = {

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -97,7 +97,7 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import Swiper from 'swiper'
 import { A11y, Navigation } from 'swiper/modules'
 import type { SwiperOptions } from 'swiper/types'
@@ -112,24 +112,18 @@ const MixinCarouselOptions = swiperOptions.MixinCarousel
 
 Swiper.use([Navigation, A11y])
 
-interface Variants {
-  [key: string]: string
-}
-
-export const variants: Variants = {
+const variants = {
   cards: '-cards',
   tiles: '-tiles'
 }
+type VariantsKeys = keyof typeof variants
 
-interface Indents {
-  [key: string]: string
-}
-
-export const indents: Indents = {
+const indents = {
   'col-1': '',
   'col-2': 'lg:col-start-2',
   'col-3': 'lg:col-start-3'
 }
+type IndentsKeys = keyof typeof indents
 
 export default defineComponent({
   name: 'MixinCarousel',
@@ -148,18 +142,21 @@ export default defineComponent({
     },
     heading: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     link: {
       type: [String, Object],
-      required: false
+      required: false,
+      default: undefined
     },
     linkTitle: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     variant: {
-      type: String,
+      type: String as PropType<VariantsKeys>,
       required: false,
       default: 'cards',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
@@ -170,7 +167,7 @@ export default defineComponent({
       default: 2
     },
     indent: {
-      type: String,
+      type: String as PropType<IndentsKeys>,
       required: false,
       default: 'col-2',
       validator: (prop: string): boolean => Object.keys(indents).includes(prop)

package/src/components/MixinVideoBg/MixinVideoBg.stories.js

@@ -8,7 +8,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'This mix-in will always autoplay and loop a video.'
+        component: 'This mix-in loops a muted video.'
       }
     }
   }

package/src/components/MixinVideoBg/MixinVideoBg.vue

@@ -27,18 +27,15 @@
   </video>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
-
+/** This mix-in loops a muted video. */
+import { defineComponent, type PropType } from 'vue'
+import type { VideoObject } from './../../interfaces.ts'
 export default defineComponent({
   name: 'MixinVideoBg',
   props: {
     video: {
-      type: Object,
+      type: Object as PropType<VideoObject>,
       default: undefined
-    },
-    autoplay: {
-      type: Boolean,
-      default: false
     }
   }
 })

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -9,6 +9,7 @@ import NavDesktopDropdownMore from './NavDesktopDropdownMore.vue'
 export default {
   title: 'Navigation/Headers/WWW/NavDesktop',
   component: NavDesktop,
+  tags: ['navigation'],
   excludeStories: /.*Data$/
 }
 

package/src/components/NavDesktop/NavDesktop.vue

@@ -123,7 +123,7 @@ 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 type { NavLinkObject, BreadcrumbObject } from './../../utils/mixins'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
@@ -237,14 +237,14 @@ export default defineComponent({
   },
   methods: {
     // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
-    getUrlKey(item: LinkObject): string | null {
+    getUrlKey(item: NavLinkObject): 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) {
+    checkActive(item: NavLinkObject) {
       const urlKey = this.getUrlKey(item)
       if (urlKey && this.breadcrumb?.menu_links) {
         // key into the breadcrumbs for each section
@@ -292,7 +292,7 @@ export default defineComponent({
         this.$emit('openSearch')
       }
     },
-    getLinkText(item: LinkObject) {
+    getLinkText(item: NavLinkObject) {
       return mixinGetLinkText(item)
     }
   }

package/src/components/NavDesktop/NavDesktopTopHat.vue

@@ -37,7 +37,7 @@ import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
 import { mapStores } from 'pinia'
 import { useThemeStore } from './../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
-import type { LinkObject } from './../../utils/mixins'
+import type { NavLinkObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
 
 export default defineComponent({
@@ -47,15 +47,15 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Array as PropType<LinkObject[]>,
+      type: Array as PropType<NavLinkObject[]>,
       required: false
     }
   },
   methods: {
-    getRouterLink(link: LinkObject): string | undefined {
+    getRouterLink(link: NavLinkObject): string | undefined {
       return mixinGetRouterLink(link)
     },
-    getLinkText(link: LinkObject): string | undefined {
+    getLinkText(link: NavLinkObject): string | undefined {
       return mixinGetLinkText(link)
     }
   },

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

@@ -1,15 +1,11 @@
 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,
-  tags: ['!autodocs'],
+  tags: ['navigation'],
   excludeStories: /.*Data$/,
   parameters: {
     layout: 'fullscreen'

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -127,7 +127,7 @@ 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'
+import type { NavLinkObject, BreadcrumbObject } from './../../utils/mixins'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
@@ -242,14 +242,14 @@ export default defineComponent({
   },
   methods: {
     // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
-    getUrlKey(item: LinkObject): string | null {
+    getUrlKey(item: NavLinkObject): 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) {
+    checkActive(item: NavLinkObject) {
       const urlKey = this.getUrlKey(item)
       if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
         // key into the breadcrumbs for each section
@@ -297,7 +297,7 @@ export default defineComponent({
         this.$emit('openSearch')
       }
     },
-    getLinkText(item: LinkObject) {
+    getLinkText(item: NavLinkObject) {
       return mixinGetLinkText(item)
     }
   }

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

@@ -4,6 +4,7 @@ import NavHeading from './NavHeading.vue'
 export default {
   title: 'Navigation/Elements/NavHeading',
   component: NavHeading,
+  tags: ['navigation'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`

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

@@ -3,6 +3,7 @@ import NavHighlight from './NavHighlight.vue'
 export default {
   title: 'Navigation/Elements/NavHighlight',
   component: NavHighlight,
+  tags: ['navigation'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="lg:BaseGrid container"><div class="col-span-5"><story/></div></div>`

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

@@ -3,8 +3,11 @@ import NavJumpMenu from './NavJumpMenu.vue'
 export default {
   title: 'Navigation/Jump Menu',
   component: NavJumpMenu,
-  tags: ['!autodocs'],
-  excludeStories: /.*Data$/
+  tags: ['navigation'],
+  excludeStories: /.*Data$/,
+  decorators: () => ({
+    template: `<story style="visibility: visible!important;" />`
+  })
 }
 
 const JumpLinksData = [

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

@@ -3,6 +3,7 @@ import NavLinkList from './NavLinkList.vue'
 export default {
   title: 'Navigation/Elements/NavLinkList',
   component: NavLinkList,
+  tags: ['navigation'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="bg-jpl-blue-darker p-8"><story/></div>`

package/src/components/NavLinkList/NavLinkList.vue

@@ -32,7 +32,7 @@ import { defineComponent } from 'vue'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import NavHeading from './../NavHeading/NavHeading.vue'
-import type { LinkObject } from './../../utils/mixins'
+import type { NavLinkObject } from './../../utils/mixins'
 export default defineComponent({
   name: 'NavLinkList',
   components: {
@@ -51,10 +51,10 @@ export default defineComponent({
     }
   },
   methods: {
-    getRouterLink(link: LinkObject): string | undefined {
+    getRouterLink(link: NavLinkObject): string | undefined {
       return mixinGetRouterLink(link)
     },
-    getLinkText(link: LinkObject): string | undefined {
+    getLinkText(link: NavLinkObject): string | undefined {
       return mixinGetLinkText(link)
     }
   }

package/src/components/NavLogoLinks/NavLogoLinks.stories.js

@@ -4,6 +4,7 @@ import NavLogoLinks from './NavLogoLinks.vue'
 export default {
   title: 'Navigation/Elements/NavLogoLinks',
   component: NavLogoLinks,
+  tags: ['navigation'],
   excludeStories: /.*Data$/
 }
 

package/src/components/NavMobile/NavMobile.stories.js

@@ -6,17 +6,23 @@ import NavMobileLink from './NavMobileLink.vue'
 export default {
   title: 'Navigation/Headers/WWW/NavMobile',
   component: NavMobile,
+  tags: ['navigation'],
   excludeStories: /.*Data$/,
 
   parameters: {
-    viewMode: 'canvas'
+    viewMode: 'canvas',
+    docs: {
+      description: {
+        component: 'View story directly for correct rendering.'
+      }
+    }
   },
-
   globals: {
     viewport: {
       value: 'mobile2',
       isRotated: false
-    }
+    },
+    theme: 'defaultTheme'
   }
 }
 

package/src/components/NavMobile/NavMobile.vue

@@ -140,7 +140,8 @@
   </transition>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+/** Designed to be controlled by a wrapper component that passes state via props */
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { eventBus } from './../../utils/eventBus'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
@@ -156,9 +157,16 @@ import NavMobileDropdown from './../NavMobile/NavMobileDropdown.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
 import NavSocial from './../NavSocial/NavSocial.vue'
 import NavSearchForm from './../NavSearchForm/NavSearchForm.vue'
-import type { LinkObject, BreadcrumbObject } from '../../utils/mixins'
+import type { NavLinkObject, BreadcrumbObject } from '../../utils/mixins'
 import { mixinIsActivePath } from '../../utils/mixins'
 import type { BreadcrumbPathObject } from '../../interfaces'
+import type { FooterNavItem } from './../TheFooter/TheFooter.vue'
+
+type NavMobileData = {
+  mobileBreadcrumb: string
+  footerMoreFromJpl: NavLinkObject[]
+  footerNavigation: FooterNavItem[]
+}
 
 export default defineComponent({
   name: 'NavMobile',
@@ -174,26 +182,31 @@ export default defineComponent({
     IconExternal
   },
   props: {
+    /** Data object containing navigation data */
     data: {
-      type: Object || null,
+      type: Object as PropType<NavMobileData>,
       required: false,
       default: null
     },
+    /** State: if the top bar should be visible. */
     headerVisible: {
       type: Boolean,
       required: false,
       default: false
     },
+    /** State: if the user has scrolled up */
     scrolledUp: {
       type: Boolean,
       required: false,
       default: false
     },
+    /** State: scrollTop value */
     scrollTop: {
       type: Number,
       required: false,
       default: 0
     },
+    /** Secondary nav data */
     staticSecondaryData: {
       type: Array,
       required: false,
@@ -273,14 +286,14 @@ export default defineComponent({
       }
     },
     // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
-    getUrlKey(item: LinkObject): string | null {
+    getUrlKey(item: NavLinkObject): 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) {
+    checkActive(item: NavLinkObject) {
       const urlKey = this.getUrlKey(item)
       if (urlKey && this.breadcrumb?.menu_links) {
         // key into the breadcrumbs for each section

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -62,7 +62,7 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from '../../store/header'
-import type { LinkObject } from '../../utils/mixins'
+import type { NavLinkObject } from '../../utils/mixins'
 import { eventBus } from './../../utils/eventBus'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
@@ -140,7 +140,7 @@ export default defineComponent({
         this.closeDropdown()
       }
     },
-    getLinkText(link: LinkObject) {
+    getLinkText(link: NavLinkObject) {
       return mixinGetLinkText(link)
     }
   }

package/src/components/NavMobile/NavMobileEdu.stories.js

@@ -4,7 +4,7 @@ import NavMobile from './NavMobile.vue'
 export default {
   title: 'Navigation/Headers/EDU/NavMobile',
   component: NavMobile,
-  tags: ['!autodocs'],
+  tags: ['navigation'],
   excludeStories: /.*Data$/,
 
   parameters: {
@@ -21,7 +21,8 @@ export default {
     viewport: {
       value: 'mobile2',
       isRotated: false
-    }
+    },
+    theme: 'ThemeEdu'
   }
 }
 

package/src/components/NavMobile/NavMobileLink.vue

@@ -16,7 +16,7 @@
 import { defineComponent } from 'vue'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
 import type { PropType } from 'vue'
-import type { LinkObject } from './../../utils/mixins'
+import type { NavLinkObject } from './../../utils/mixins'
 import BaseLink from './../BaseLink/BaseLink.vue'
 
 export default defineComponent({
@@ -26,7 +26,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object as PropType<LinkObject>,
+      type: Object as PropType<NavLinkObject>,
       required: false
     },
     // pass a custom title
@@ -45,10 +45,10 @@ export default defineComponent({
     }
   },
   methods: {
-    getRouterLink(link: LinkObject): string | undefined {
+    getRouterLink(link: NavLinkObject): string | undefined {
       return mixinGetRouterLink(link)
     },
-    getLinkText(link: LinkObject): string | undefined {
+    getLinkText(link: NavLinkObject): string | undefined {
       return mixinGetLinkText(link)
     }
   }

package/src/components/NavSearchForm/NavSearchForm.stories.js

@@ -3,6 +3,7 @@ import NavSearchForm from './NavSearchForm.vue'
 export default {
   title: 'Navigation/Elements/NavSearchForm',
   component: NavSearchForm,
+  tags: ['forms', 'navigation'],
   excludeStories: /.*Data$/
 }
 

package/src/components/NavSecondary/NavSecondary.stories.js

@@ -3,6 +3,7 @@ import NavSecondary from './NavSecondary.vue'
 export default {
   title: 'Navigation/Secondary Navigation',
   component: NavSecondary,
+  tags: ['navigation'],
   excludeStories: /.*Data$/,
   parameters: {
     docs: {

package/src/components/NavSecondary/NavSecondary.vue

@@ -55,10 +55,13 @@ import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixin
 import type { BreadcrumbPathObject } from './../../interfaces'
 
 export default defineComponent({
-  /** The complexity of this component is due to the need for it to be populated from multiple data sources
-   ** SecondaryNav will first check to see if there is a navigation override from the data fetched for this specific page (data.breadcrumb and store.header.secondaryNav)
-   ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
-   ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
+  /**
+   * This component is only visible on large viewports. Mobile secondary nav is handled in the \`NavMobile\` component.
+   *
+   * The complexity of this component is due to the need for it to be populated from multiple data sources
+   * SecondaryNav will first check to see if there is a navigation override from the data fetched for this specific page (data.breadcrumb and store.header.secondaryNav)
+   * If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
+   * store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
    */
   name: 'NavSecondary',
   components: {

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -67,7 +67,7 @@
 import { defineComponent } from 'vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 
-interface NavItemObject {
+export interface NavItemObject {
   path: String
   title: String
   children: [Object]

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

@@ -3,6 +3,7 @@ import NavSocial from './NavSocial.vue'
 export default {
   title: 'Navigation/Elements/NavSocial',
   component: NavSocial,
+  tags: ['navigation'],
   excludeStories: /.*Data$/
 }
 

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

@@ -2,7 +2,8 @@ import NewsDetailMediaContact from './NewsDetailMediaContact.vue'
 
 export default {
   title: 'Components/WWW/NewsDetail/NewsDetailMediaContact',
-  component: NewsDetailMediaContact
+  component: NewsDetailMediaContact,
+  tags: ['listings']
 }
 
 const contacts = [

package/src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue

@@ -21,7 +21,7 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 
-interface Contact {
+export interface Contact {
   contact: {
     id: string
     name: string

package/src/components/ParallaxContainer/ParallaxContainer.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts">
+/** Use `ParallaxContainer` with a nested `ParallaxElement` to create a parallax scrolling effect. */
 // @ts-nocheck
 export default {
   name: `ParallaxContainer`,