@explorer-1/vue 0.3.4 → 0.3.7

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.stories.js

@@ -6,12 +6,12 @@ export default {
   component: ParallaxContainer,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" style="height:3000px"><story/></div>`
+      template: `<div id="storyRoot" style="height:3000px"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     docs: {
       description: {

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`,

package/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue

@@ -52,6 +52,7 @@
   </div>
 </template>
 <script lang="ts">
+/** A tabbed carousel of podcast seasons based on series. If a season `id` is provided, the carousel will default to showing that season. If the user is currently on an episode page within the displayed season, that episode will be the active slide in the carousel. */
 import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import type { PropType } from 'vue'
@@ -61,25 +62,25 @@ import ThumbnailCarousel from './../ThumbnailCarousel/ThumbnailCarousel.vue'
 
 const route = useRoute()
 
-interface Slide {
+export interface Slide {
   url: string
   title: string
   thumbnailImage: Partial<ImageObject>
 }
 
-interface Episode {
+export interface Episode {
   url: string
   title: string
   publicationDate: any
   thumbnailImage: Partial<ImageObject>
 }
 
-interface ActiveTab {
+export interface ActiveTab {
   title?: string
   episodes?: Episode[] | Season
 }
 
-interface Season {
+export interface Season {
   id: string
   url?: string
   title?: string
@@ -87,7 +88,7 @@ interface Season {
   episodes?: Episode[]
 }
 
-interface Series {
+export interface Series {
   id: string
   title?: string
   url?: string

package/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js

@@ -7,20 +7,15 @@ export default {
   subcomponents: { RoboticsDetailStatsMini },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+      template: `<div id="storyRoot" class="mt-20"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
-  excludeStories: /.*Data$/,
-  argTypes: {
-    status: {
-      control: { type: 'text' }
-    }
-  }
+  excludeStories: /.*Data$/
 }
 
 export const RoboticsDetailStatsData = {

package/src/components/SearchFilterGroup/SearchFilterGroup.stories.js

@@ -3,6 +3,7 @@ import SearchFilterGroup from './SearchFilterGroup.vue'
 export default {
   title: 'Components/Search/SearchFilterGroup',
   component: SearchFilterGroup,
+  tags: ['search'],
   excludeStories: /.*Data$/
 }
 

package/src/components/SearchInput/SearchInput.stories.js

@@ -3,6 +3,7 @@ import SearchInput from './SearchInput.vue'
 export default {
   title: 'Components/Search/SearchInput',
   component: SearchInput,
+  tags: ['forms', 'search'],
   excludeStories: /.*Data$/
 }
 

package/src/components/SearchPagination/SearchPagination.stories.js

@@ -3,6 +3,7 @@ import SearchPagination from './SearchPagination.vue'
 export default {
   title: 'Components/Search/SearchPagination',
   component: SearchPagination,
+  tags: ['search'],
   excludeStories: /.*Data$/
 }
 

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -3,16 +3,7 @@ import SearchResultCard from './SearchResultCard.vue'
 export default {
   title: 'Components/Cards/SearchResultCards',
   component: SearchResultCard,
-  argTypes: {
-    headingLevel: {
-      description:
-        'Change the heading level for semantic markup. This does not affect the style of the heading.',
-      control: {
-        type: 'select'
-      },
-      options: [null, 'h1', 'h2', 'h3', 'h4', 'h5']
-    }
-  },
+  tags: ['cards', 'search'],
   excludeStories: /.*Data$/
 }
 

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -289,6 +289,7 @@ export default defineComponent({
       required: false,
       default: false
     },
+    /** Change the heading level for semantic markup. This does not affect the style of the heading. */
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
       required: false,

package/src/components/SearchResultGridItem/SearchResultGridItem.stories.js

@@ -3,24 +3,15 @@ import SearchResultGridItem from './SearchResultGridItem.vue'
 export default {
   title: 'Components/Cards/SearchResultGridItem',
   component: SearchResultGridItem,
+  tags: ['search', 'cards'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
     })
   ],
-  argTypes: {
-    headingLevel: {
-      description:
-        'Change the heading level for semantic markup. This does not affect the style of the heading.',
-      control: {
-        type: 'select',
-        options: [null, 'h1', 'h2', 'h3', 'h4', 'h5']
-      }
-    }
-  },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -196,13 +196,16 @@ export default defineComponent({
       type: String,
       default: undefined
     },
+    /** Change the heading level for semantic markup. This does not affect the style of the heading. */
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
-      required: false
+      required: false,
+      default: undefined
     },
     pageContentType: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     primarySubject: {
       type: Object as PropType<PrimarySubjectObject>,

package/src/components/SearchResultsList/SearchResultsList.stories.js

@@ -3,15 +3,15 @@ import SearchResultsList from './SearchResultsList.vue'
 export default {
   title: 'Components/Search/SearchResultsList',
   component: SearchResultsList,
+  tags: ['search', 'listings'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-xl"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-xl"><story/></div>`
     })
   ],
-  tags: ['!autodocs'],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/SearchSelectMenu/SearchSelectMenu.stories.js

@@ -2,7 +2,8 @@ import SearchSelectMenu from './SearchSelectMenu.vue'
 
 export default {
   title: 'Components/Search/SearchSelectMenu',
-  component: SearchSelectMenu
+  component: SearchSelectMenu,
+  tags: ['search']
 }
 
 export const BaseStory = {

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -122,6 +122,7 @@
 </template>
 
 <script lang="ts">
+/** The SwimlaneCTA component combines BaseSwimlane with other elements (JPL logo, links, etc.) to create the component that is used on the WWW homepage. */
 import { defineComponent } from 'vue'
 import jplLogoSFFF from '@explorer-1/common/src/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png'
 import jplLogoFFF from '@explorer-1/common/src/images/png/brand-jpl-logo-FFFFFF-94h28w@2x.png'

package/src/components/TextArea/TextArea.stories.js

@@ -2,7 +2,8 @@ import TextArea from './TextArea.vue'
 
 export default {
   title: 'Components/Forms/TextArea',
-  component: TextArea
+  component: TextArea,
+  tags: ['forms']
 }
 
 // stories

package/src/components/TextInput/TextInput.stories.js

@@ -2,7 +2,8 @@ import TextInput from './TextInput.vue'
 
 export default {
   title: 'Components/Forms/TextInput',
-  component: TextInput
+  component: TextInput,
+  tags: ['forms']
 }
 
 // stories

package/src/components/TheFooter/TheFooter.stories.js

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

package/src/components/TheFooter/TheFooter.vue

@@ -190,10 +190,10 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from './../../store/theme'
-import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import { mixinGetRouterLink, mixinGetLinkText, type NavLinkObject } from './../../utils/mixins'
 import IconExternal from './../Icons/IconExternal.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
@@ -201,6 +201,31 @@ import NavSocial from './../NavSocial/NavSocial.vue'
 import TheFooterSignUp from './../TheFooter/TheFooterSignUp.vue'
 import LogoCaltech from './../LogoCaltech/LogoCaltech.vue'
 
+export type FooterNavItem = {
+  titleLink: {
+    linkPage: {
+      title: string
+      url: string
+    }
+    title: string
+  }
+  links: NavLinkObject[]
+}
+
+export type FooterData = {
+  footerMoreFromJpl: NavLinkObject[]
+  footerNavigation: FooterNavItem[]
+  footerLinks: NavLinkObject[]
+  relatedNasaSites: {
+    title: string
+    path: string
+  }[]
+  footerMeta: {
+    label: string
+    text: string
+  }[]
+}
+
 export default defineComponent({
   name: 'TheFooter',
   components: {
@@ -213,13 +238,14 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object || null,
+      type: Object as PropType<FooterData>,
       required: false,
       default: null
     },
     commitSha: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   methods: {

package/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js

@@ -3,7 +3,7 @@ import ThumbnailCarousel from './ThumbnailCarousel.vue'
 export default {
   title: 'Components/Utilities/ThumbnailCarousel',
   component: ThumbnailCarousel,
-  tags: ['skip-test'],
+  tags: ['carousels', 'listings'],
   parameters: {
     docs: {
       description: {

package/src/components/ThumbnailCarousel/ThumbnailCarousel.vue

@@ -17,13 +17,14 @@
   </MixinCarousel>
 </template>
 <script lang="ts">
+/** Ideal for use in a tabbed carousel. See `PodcastSeriesCarousel` and `PageImageDetail` for usage examples. Styled with three cards and a basic card style with a square image. */
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
 import SearchResultGridItem from './../SearchResultGridItem/SearchResultGridItem.vue'
 
-interface Slide {
+export interface Slide {
   url: string
   title: string
   thumbnailImage: Partial<ImageObject>

package/src/components/TimelineDialog/TimelineDialog.vue

@@ -52,7 +52,7 @@
           />
         </BaseImagePlaceholder>
         <!-- @ts-ignore -->
-        <BlockVideoEmbed :data="data" />
+        <BlockVideoEmbed :data="data as unknown as BlockVideoEmbedData" />
         <BlockText
           variant="medium"
           :text="data.description"
@@ -80,7 +80,7 @@ import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BlockText from './../BlockText/BlockText.vue'
-import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockVideoEmbed, { type BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 
 export default defineComponent({
   name: 'TimelineDialog',

package/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js

@@ -2,6 +2,7 @@ import TopicDetailMissionCarousel from './TopicDetailMissionCarousel.vue'
 export default {
   title: 'Components/WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarousel',
   component: TopicDetailMissionCarousel,
+  tags: ['carousel', 'listings'],
   excludeStories: /.*Data$/
 }
 

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js

@@ -7,12 +7,12 @@ export default {
   component: TopicDetailMissionCarouselItem,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative lg:w-1/3"><story/></div>`
+      template: `<div id="storyRoot" class="relative lg:w-1/3"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/TopicDetailMore/TopicDetailMore.stories.js

@@ -2,6 +2,7 @@ import TopicDetailMore from './TopicDetailMore.vue'
 export default {
   title: 'Components/WWW/TopicDetail/TopicDetailMore',
   component: TopicDetailMore,
+  tags: ['listings'],
   excludeStories: /.*Data$/
 }
 

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js

@@ -2,14 +2,15 @@ import TopicDetailMoreItem from './TopicDetailMoreItem.vue'
 export default {
   title: 'Components/WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
   component: TopicDetailMoreItem,
+  tags: ['cards'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="lg:w-1/3"><story/></div>`
+      template: `<div id="storyRoot" class="lg:w-1/3"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/TopicDetailStreamfield/TopicDetailStreamfield.vue

@@ -67,7 +67,7 @@ import BlockRelatedLinks, {
 } from './../BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
 
-interface BlockData {
+export interface TopicDetailStreamfieldBlockData {
   blockType: string
   heading: string
   galleryTitle: string
@@ -86,7 +86,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Array as PropType<BlockData[]>,
+      type: Array as PropType<TopicDetailStreamfieldBlockData[]>,
       required: false
     },
     topic: {

package/src/constants.ts

@@ -1,6 +1,4 @@
-import type { PillDictionaryInterface } from './interfaces'
-
-export const eduMetadataDictionary: PillDictionaryInterface = {
+export const eduMetadataDictionary = {
   EDUNewsPage: {
     label: 'News',
     variant: 'primary',
@@ -73,7 +71,7 @@ export const eduMetadataDictionary: PillDictionaryInterface = {
     icons: 'secondary',
     type: 'resource'
   }
-}
+} as const
 
 interface contentTypeObject {
   model: string
@@ -230,7 +228,7 @@ export const contentTypes: contentTypeObject[] = [
     model: 'edu_resources.EDUVideoDetailPage',
     label: 'EDU Videos'
   }
-]
+] as const
 
 interface contentAliasObject extends contentTypeObject {
   interface?: string

package/src/docs/foundation/grid_layouthelpers.stories.js

@@ -14,12 +14,12 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container mx-auto border border-black"><story/></div>`
+      template: `<div id="storyRoot" class="container mx-auto border border-black"><story/></div>`
     })
   ]
 }

package/src/docs/introduction.docs.mdx

@@ -43,16 +43,22 @@ Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
 
 <div>
   <table
-    class="w-auto text-left"
+    className="w-auto text-left"
     style={{ width: 'unset' }}
   >
     <thead>
-      <tr class="text-left">
+      <tr className="text-left">
         <th>Package</th>
         <th>Version</th>
       </tr>
     </thead>
     <tbody>
+      <tr>
+        <td>[@nasa-jpl/explorer-1](https://www.npmjs.com/package/@nasa-jpl/explorer-1)</td>
+        <td>
+          <code>{packageVersions.__VERSION__NASA_JPL_EXPLORER_1__}</code>
+        </td>
+      </tr>
       <tr>
         <td>[@explorer-1/common](https://www.npmjs.com/package/@explorer-1/common)</td>
         <td>
@@ -65,6 +71,12 @@ Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
           <code>{packageVersions.__VERSION__EXPLORER_1_VUE__}</code>
         </td>
       </tr>
+      <tr>
+        <td>[@explorer-1/html](https://www.npmjs.com/package/@explorer-1/html)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_HTML__}</code>
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>