@explorer-1/vue 0.3.4 → 0.3.7

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue

@@ -46,6 +46,7 @@
 
 <script lang="ts">
 // @ts-nocheck
+import type { StreamfieldBlockData } from './../../interfaces.ts'
 import MissionDetailInlineImage from './../MissionDetailInlineImage/MissionDetailInlineImage.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BlockQuote from './../BlockQuote/BlockQuote.vue'
@@ -63,8 +64,9 @@ export default {
   },
   props: {
     data: {
-      type: Array,
-      required: false
+      type: Array as () => StreamfieldBlockData[],
+      required: false,
+      default: undefined
     }
   }
 }

package/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts

@@ -3,6 +3,13 @@ import MixinAnimationCaret from './MixinAnimationCaret.vue'
 export default {
   title: 'Mixins/MixinAnimationCaret',
   component: MixinAnimationCaret,
+  argTypes: {
+    color: {
+      control: {
+        type: 'text'
+      }
+    }
+  },
   parameters: {
     slots: {
       default: 'BaseStory slot content'

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,14 +4,15 @@ import NavHeading from './NavHeading.vue'
 export default {
   title: 'Navigation/Elements/NavHeading',
   component: NavHeading,
+  tags: ['navigation'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
+      template: `<div id="storyRoot" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     viewMode: 'docs'
   },

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

@@ -3,14 +3,15 @@ import NavHighlight from './NavHighlight.vue'
 export default {
   title: 'Navigation/Elements/NavHighlight',
   component: NavHighlight,
+  tags: ['navigation'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="lg:BaseGrid container"><div class="col-span-5"><story/></div></div>`
+      template: `<div id="storyRoot" class="lg:BaseGrid container"><div class="col-span-5"><story/></div></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     viewMode: 'docs'
   },

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,14 +3,15 @@ import NavLinkList from './NavLinkList.vue'
 export default {
   title: 'Navigation/Elements/NavLinkList',
   component: NavLinkList,
+  tags: ['navigation'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="bg-jpl-blue-darker p-8"><story/></div>`
+      template: `<div id="storyRoot" class="bg-jpl-blue-darker p-8"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

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,12 +6,23 @@ import NavMobileLink from './NavMobileLink.vue'
 export default {
   title: 'Navigation/Headers/WWW/NavMobile',
   component: NavMobile,
+  tags: ['navigation'],
   excludeStories: /.*Data$/,
+
   parameters: {
     viewMode: 'canvas',
-    viewport: {
-      defaultViewport: 'mobile2'
+    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,18 +4,25 @@ import NavMobile from './NavMobile.vue'
 export default {
   title: 'Navigation/Headers/EDU/NavMobile',
   component: NavMobile,
-  tags: ['!autodocs'],
+  tags: ['navigation'],
   excludeStories: /.*Data$/,
+
   parameters: {
     layout: 'fullscreen',
-    viewport: {
-      defaultViewport: 'mobile2'
-    },
+
     docs: {
       description: {
         component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
       }
     }
+  },
+
+  globals: {
+    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: {