@explorer-1/vue 0.3.6 → 0.3.8

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

@@ -15,12 +15,7 @@ export default {
       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,21 +3,12 @@ import SearchResultGridItem from './SearchResultGridItem.vue'
 export default {
   title: 'Components/Cards/SearchResultGridItem',
   component: SearchResultGridItem,
+  tags: ['search', 'cards'],
   decorators: [
     () => ({
       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: '#storyRoot'

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

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: ['carousels', 'listings'],
   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,6 +2,7 @@ import TopicDetailMoreItem from './TopicDetailMoreItem.vue'
 export default {
   title: 'Components/WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
   component: TopicDetailMoreItem,
+  tags: ['cards'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="lg:w-1/3"><story/></div>`

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/interfaces.ts

@@ -1,3 +1,7 @@
+import { eduMetadataDictionary } from './constants'
+
+export type ContentTypeKey = keyof typeof eduMetadataDictionary
+
 export interface BreadcrumbPathObject {
   path: string
   title: string
@@ -24,7 +28,7 @@ export interface StreamfieldBlockData extends BlockData {
   galleryDescription?: string
   coverImage?: ImageObject
   gallerySlides?: ImageObject[]
-  blocks?: object[]
+  blocks?: StreamfieldBlockData[] | Card[] | ImageObject[] | VideoObject[]
   value?: string
   customLabel?: string
   introduction?: string
@@ -42,6 +46,7 @@ export interface StreamfieldBlockData extends BlockData {
   rowData?: any
   apiEndpoint?: string
   attachmentPrefix?: string
+  listingPageHeroImage?: ImageObject
 }
 
 export interface ImageSrcObject {
@@ -73,9 +78,29 @@ export interface ImageObject {
   cover?: string
   image?: ImageObject
   displayCaption?: boolean
+  listingPageHeroImage?: ImageObject
 }
 
-export interface ImageBlock extends BlockData, ImageObject {}
+export interface VideoObject {
+  duration?: string
+  file: string
+  fileExtension?: string
+  fileOgg?: string // no webpack loader for ogg files
+  fileWebm?: string
+  height?: string | number
+  id: string
+  sources?: string
+  title: string
+  type?: string
+  width?: string | number
+}
+
+export interface ImageBlock extends BlockData, ImageObject {
+  fullBleed: boolean
+  imageFullBleed: ImageObject
+  displayCaption: boolean
+  constrain: boolean
+}
 
 export interface ElasticSearchPage {
   _source: string
@@ -250,9 +275,7 @@ export interface LabelObject {
   icons?: string
   type?: MetadataType
 }
-export interface PillDictionaryInterface {
-  [EDUExplainerArticlePage: string]: LabelObject
-}
+
 export interface DictionaryInterface {
   [key: string]: string
 }
@@ -263,8 +286,9 @@ export interface AccordionItemObject {
 
 export type MetaPanelTheme = 'primary' | 'secondary' | 'stars'
 
+export type HeadingLevels = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 export interface PageObject {
-  __typename: string
+  __typename: ContentTypeKey
   contentType: string
   lastPublishedAt?: string
   breadcrumb?: string
@@ -275,6 +299,7 @@ export interface PageObject {
   getTopicsForDisplay?: Topic[]
   showJumpMenu?: boolean
   label?: string
+  topicLabel?: string
   summary?: string
   topper?: string
   seoTitle?: string

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -50,7 +50,7 @@
         />
       </template>
     </LayoutHelper>
-    <BlockAudio :data="data" />
+    <BlockAudio :data="data as BlockAudioData" />
     <LayoutHelper
       indent="col-2"
       class="lg:pt-12 pt-4"
@@ -228,7 +228,7 @@ import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue
 import BaseButton from './../../components/BaseButton/BaseButton.vue'
 import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockText from './../../components/BlockText/BlockText.vue'
-import BlockAudio from './../../components/BlockAudio/BlockAudio.vue'
+import BlockAudio, { type BlockAudioData } from './../../components/BlockAudio/BlockAudio.vue'
 import IconDownload from './../../components/Icons/IconDownload.vue'
 import IconDropdown from './../../components/Icons/IconDropdown.vue'
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -9,10 +9,14 @@ import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
-import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
+import BlockVideo, { type BlockVideoData } from './../../../components/BlockVideo/BlockVideo.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
-import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
-import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockImageComparison, {
+  type BlockImageComparisonData
+} from './../../../components/BlockImageComparison/BlockImageComparison.vue'
+import BlockVideoEmbed, {
+  type BlockVideoEmbedData
+} from './../../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
@@ -134,7 +138,7 @@ const { data } = reactive(props)
           <template v-else-if="block.blockType === 'ImageComparisonBlock'">
             <LayoutHelper indent="col-2">
               <BlockImageComparison
-                :data="block"
+                :data="block as BlockImageComparisonData"
                 :custom-detail-url="item.externalLink"
               />
             </LayoutHelper>
@@ -142,7 +146,7 @@ const { data } = reactive(props)
           <template v-else-if="block.blockType === 'VideoBlock'">
             <LayoutHelper indent="col-2">
               <BlockVideo
-                :data="block"
+                :data="block as BlockVideoData"
                 :custom-detail-url="item.externalLink"
               />
             </LayoutHelper>
@@ -150,7 +154,7 @@ const { data } = reactive(props)
           <template v-else-if="block.blockType === 'VideoEmbedBlock'">
             <LayoutHelper indent="col-2">
               <BlockVideoEmbed
-                :data="block"
+                :data="block as BlockVideoEmbedData"
                 :custom-detail-url="item.externalLink"
               />
             </LayoutHelper>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -8,7 +8,9 @@ import BlockHeading, {
 import type { EduStudentProjectStep } from './PageEduStudentProject.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
-import BlockInlineImage from './../../../components/BlockInlineImage/BlockInlineImage.vue'
+import BlockInlineImage, {
+  type BlockInlineImageData
+} from './../../../components/BlockInlineImage/BlockInlineImage.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import { getHeadingId } from './../../../utils/getHeadingId'
@@ -52,11 +54,13 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     <!-- simple richtext -->
     <BlockInlineImage
       v-if="text"
-      :data="{
-        text: text,
-        image: image,
-        alignTo: 'right'
-      }"
+      :data="
+        {
+          text: text,
+          image: image,
+          alignTo: 'right'
+        } as BlockInlineImageData
+      "
       class="lg:mb-18 mb-10"
     />
 

package/src/templates/www/PageTopicDetail/PageTopicDetail.vue

@@ -114,7 +114,8 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   }
 })

package/src/utils/mixins.ts

@@ -15,13 +15,13 @@ export interface SrcSetDataValue {
   width: number
 }
 // nav link object
-export type LinkObject = {
-  linkPage: {
+export type NavLinkObject = {
+  linkPage?: {
     title: string
     url: string
-  } | null
-  title: string | null
-  path: string | null
+  }
+  title?: string
+  path?: string
 }
 // breadcrumbs used for nav and secondary nav
 export type BreadcrumbObject = {
@@ -78,7 +78,7 @@ export const mixinTransparentHeader = () => {
       and provides a graceful fallback to use the page title
       if one exists.
     */
-export const mixinGetLinkText = (item: LinkObject): string => {
+export const mixinGetLinkText = (item: NavLinkObject): string => {
   if (item.title) {
     return item.title
   } else if (item.linkPage) {
@@ -96,7 +96,7 @@ export const mixinGetLinkText = (item: LinkObject): string => {
      TODO: need to modify this to work with breadcrumb-passed objects too
            strategy: check if path starts with a slash.
     */
-export const mixinGetRouterLink = (link: LinkObject): string | undefined => {
+export const mixinGetRouterLink = (link: NavLinkObject): string | undefined => {
   if (link.linkPage && link.linkPage.url) {
     return link.linkPage.url
   } else if (link.path) {