@explorer-1/vue 0.3.6 → 0.3.8

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -124,7 +124,8 @@ import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BasePill from '../BasePill/BasePill.vue'
 
-export const pillColorVariants = ['primary', 'secondary', 'action']
+export const pillColorVariants = ['primary', 'secondary', 'action', 'primary-inverted'] as const
+export type PillColorVariant = (typeof pillColorVariants)[number]
 
 export default defineComponent({
   name: 'DetailHeadline',
@@ -134,60 +135,71 @@ export default defineComponent({
     BasePill
   },
   props: {
+    /** Title of detail page */
     title: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Author or array of authors */
     author: {
       type: Object as PropType<AuthorObject | { author: AuthorObject }[]>,
       required: false,
       default: undefined
     },
+    /** Publication date */
     publicationDate: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Publication time */
     publicationTime: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Approximate read time */
     readTime: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Array of related topics */
     topics: {
       type: Array as PropType<Topic[]>,
       required: false,
       default: undefined
     },
-    // if topics array isn't available
+    /** Label, if there are no related topics */
     label: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Option link for the label */
     labelLink: {
       type: String,
       required: false,
       default: undefined
     },
+    /** If the label should use the "pill" style (only works when using ThemeEdu) */
     pill: {
       type: Boolean,
       default: false
     },
+    /** Pill color variants */
     pillColor: {
-      type: String,
+      type: String as PropType<PillColorVariant>,
       default: 'primary',
-      validator: (prop: string): boolean => pillColorVariants.includes(prop)
+      validator: (prop: PillColorVariant): boolean => pillColorVariants.includes(prop)
     },
+    /** If schema.org metadata should be generated */
     schema: {
       type: Boolean,
       default: false
     },
+    /** If publication date should be hidden */
     hideDate: {
       type: Boolean,
       default: false

package/src/components/DsnWidget/DsnWidget.stories.js

@@ -3,12 +3,8 @@ import DsnWidget from './DsnWidget.vue'
 export default {
   title: 'Components/WWW/DsnWidget',
   component: DsnWidget,
-  excludeStories: /.*Data$/,
-  argTypes: {
-    status: {
-      control: { type: 'text' }
-    }
-  }
+  tags: ['widget'],
+  excludeStories: /.*Data$/
 }
 
 export const DsnWidgetData = {

package/src/components/DsnWidget/DsnWidget.vue

@@ -74,12 +74,24 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import IconArrows from './../Icons/IconArrows.vue'
 /**
- * Displays dsn widget data. API is parsed by the backend. Frontend retrieves via a graphQL query.
+ * Displays dsn widget data. API is parsed by the backend and passed to the frontend via GraphQL.
  */
+
+type DsnWidgetObject = {
+  heading: string
+  link: string
+  linkTarget: string
+  transmitTitle: string
+  transmitStatus: string
+  spacecraftName: string
+  location: string
+  __typename: string
+}
+
 export default defineComponent({
   name: 'DsnWidget',
   components: {
@@ -87,9 +99,11 @@ export default defineComponent({
     IconArrows
   },
   props: {
+    /** Backend retrieves data and passes it to the frontend as a DsnWidgetObject */
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<DsnWidgetObject>,
+      required: false,
+      default: undefined
     }
   }
 })

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -30,7 +30,8 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { ImageObject } from './../../interfaces.ts'
 import BaseImage from '../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from '../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import CalendarChip from '../CalendarChip/CalendarChip.vue'
@@ -44,11 +45,6 @@ export default defineComponent({
     CalendarChip
   },
   props: {
-    data: {
-      type: Object,
-      required: false,
-      default: undefined
-    },
     startDate: {
       type: String,
       required: false,
@@ -63,10 +59,11 @@ export default defineComponent({
       default: false
     },
     image: {
-      type: Object,
+      type: Object as PropType<ImageObject>,
       required: false,
       default: undefined
     },
+    /** Constrain image to 16:9 */
     constrain: {
       type: Boolean,
       required: false,

package/src/components/FormContact/FormContact.stories.js

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

package/src/components/FormNewsletterSignup/FormNewsletterSignup.stories.js

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

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
-import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
-import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
+import BlockVideoEmbed, { type BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockIframeEmbed, {
+  type BlockIframeEmbedData
+} from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockImageComparison, {
+  type BlockImageComparisonData
+} from './../BlockImageComparison/BlockImageComparison.vue'
 import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
 import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
-import BlockVideo from './../BlockVideo/BlockVideo.vue'
+import BlockVideo, { type BlockVideoData } from './../BlockVideo/BlockVideo.vue'
 import type { StreamfieldBlockData } from './../../interfaces'
 
 interface HeroInlineMediaProps {
@@ -36,19 +40,19 @@ const { heroBlocks, constrain } = reactive(props)
     />
     <BlockIframeEmbed
       v-else-if="heroBlocks[0].blockType === 'IframeEmbedBlock'"
-      :data="heroBlocks[0]"
+      :data="heroBlocks[0] as BlockIframeEmbedData"
     />
     <BlockVideo
       v-else-if="heroBlocks[0].blockType === 'VideoBlock'"
-      :data="heroBlocks[0]"
+      :data="heroBlocks[0] as BlockVideoData"
     />
     <BlockVideoEmbed
       v-else-if="heroBlocks[0].blockType === 'VideoEmbedBlock'"
-      :data="heroBlocks[0]"
+      :data="heroBlocks[0] as BlockVideoEmbedData"
     />
     <BlockImageComparison
       v-else-if="heroBlocks[0].blockType === 'ImageComparisonBlock'"
-      :data="heroBlocks[0]"
+      :data="heroBlocks[0] as BlockImageComparisonData"
     />
   </div>
 </template>

package/src/components/HeroLarge/HeroLarge.stories.js

@@ -4,6 +4,7 @@ import { eduMetadataDictionary } from './../../constants'
 export default {
   title: 'Components/Heroes/Large',
   component: HeroLarge,
+  tags: ['heroes'],
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'canvas'

package/src/components/HeroLarge/HeroLarge.vue

@@ -7,10 +7,14 @@
           :srcset="theSrcSet"
         />
         <source
+          v-if="image.screenMd"
           media="(min-width: 420px)"
           :srcset="image.screenMd.url"
         />
-        <source :srcset="image.screenSm.url" />
+        <source
+          v-if="image.screenSm"
+          :srcset="image.screenSm.url"
+        />
         <img
           class="md:object-right object-cover object-bottom w-full h-full"
           :src="image.src.url"
@@ -71,8 +75,9 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mixinTransparentHeader, mixinGetSrcSet } from './../../utils/mixins'
+import type { ContentTypeKey, ImageObject } from './../../interfaces.ts'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import BasePill from './../BasePill/BasePill.vue'
@@ -88,15 +93,15 @@ export default defineComponent({
       required: false,
       default: undefined
     },
-    // custom text for pill
+    /** Text for pill (overrides label) */
     customPill: {
       type: String,
       required: false,
       default: undefined
     },
-    // maps to EDU resource types
+    /** Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu` */
     customPillType: {
-      type: String,
+      type: String as PropType<ContentTypeKey>,
       required: false,
       default: undefined
     },
@@ -111,11 +116,11 @@ export default defineComponent({
       default: undefined
     },
     image: {
-      type: Object,
+      type: Object as PropType<ImageObject>,
       required: false,
       default: undefined
     },
-    // If secondary nav is also on this page, will add more space above hero text
+    /** If secondary nav is also on this page, more space will be added above the hero text */
     hasOverlay: {
       type: Boolean,
       default: false

package/src/components/HeroListingIndex/HeroListingIndex.stories.js

@@ -3,6 +3,7 @@ import HeroListingIndex from './HeroListingIndex.vue'
 export default {
   title: 'Components/Heroes/For Listing Pages',
   component: HeroListingIndex,
+  tags: ['heroes'],
   parameters: {
     viewMode: 'canvas'
   },

package/src/components/HeroListingIndex/HeroListingIndex.vue

@@ -20,13 +20,16 @@
   </div>
 </template>
 <script lang="ts">
-// HeroListingIndex
-// Creating a wrapper for HeroMedium as HeroListingIndex needs to parse several different data shapes.
-// Parsing occurs in the computed data and returns the appropriate data object for the media if it exists.
-import { defineComponent } from 'vue'
+/**
+ *  HeroListingIndex
+ * Creating a wrapper for HeroMedium as HeroListingIndex needs to parse several different data shapes.
+ * Parsing occurs in the computed data and returns the appropriate data object for the media if it exists.
+ */
+import { defineComponent, type PropType } from 'vue'
+import type { ImageObject, StreamfieldBlockData, VideoObject } from './../../interfaces'
 import { useThemeStore } from '../../store/theme'
 import { mapStores } from 'pinia'
-import HeroMedium from '../HeroMedium/HeroMedium.vue'
+import HeroMedium, { type FeatureObject } from '../HeroMedium/HeroMedium.vue'
 
 export default defineComponent({
   name: 'HeroListingIndex',
@@ -36,7 +39,7 @@ export default defineComponent({
   props: {
     // pass these directly to HeroMedium
     pageData: {
-      type: Object,
+      type: Object as PropType<FeatureObject>,
       default: undefined
     },
     customLabel: {
@@ -51,24 +54,26 @@ export default defineComponent({
   computed: {
     ...mapStores(useThemeStore),
     // parses a hero streamfield block for a video (newsDetailPage model)
-    customVideo(): object | undefined {
-      if (this.pageData && this.pageData?.heroBlocks?.length > 0) {
+    customVideo(): VideoObject | undefined {
+      if (this.pageData && this.pageData?.heroBlocks && this.pageData.heroBlocks.length > 0) {
         if (this.pageData.heroBlocks[0].blockType === 'VideoBlock') {
           return this.pageData.heroBlocks[0].video
         }
       }
       return undefined
     },
-    customImage(): object | undefined {
+    customImage(): ImageObject | undefined {
       // parse hero streamfield block for the first usable image (newsDetailPage model)
-      if (this.pageData?.heroBlocks?.length > 0) {
+      if (this.pageData && this.pageData.heroBlocks && this.pageData.heroBlocks.length > 0) {
         const block = this.pageData?.heroBlocks[0]
         if (block.blockType === 'ImageChooserBlock' || block.blockType === 'HeroImageBlock') {
-          return block.listingPageHeroImage
+          return (block as StreamfieldBlockData).listingPageHeroImage
         } else if (block.blockType === 'CarouselBlock') {
           // use the first image in the carousel
-          if (block.blocks && block.blocks.length > 0) {
-            return block.blocks[0].listingPageHeroImage
+          const carouselBlocks: ImageObject[] | undefined = (block as StreamfieldBlockData)
+            .blocks as ImageObject[]
+          if (carouselBlocks && carouselBlocks?.length > 0) {
+            return carouselBlocks[0].listingPageHeroImage
           }
         }
       }

package/src/components/HeroMedia/HeroMedia.stories.js

@@ -4,6 +4,7 @@ import HeroMedia from './HeroMedia.vue'
 export default {
   title: 'Components/Heroes/Media Only',
   component: HeroMedia,
+  tags: ['heroes'],
   parameters: {
     html: {
       root: '#storyRoot'
@@ -77,21 +78,25 @@ export const HeroMediaData = {
   displayCaption: true
 }
 
+const LocalHeroMediaData = { ...HeroMediaData }
+delete LocalHeroMediaData.imageInline
+delete LocalHeroMediaData.blockType
+
 // stories
 export const BaseStory = {
   name: 'HeroMedia',
-  args: HeroMediaData
+  args: LocalHeroMediaData
 }
 export const CustomImageCaption = {
   args: {
-    ...HeroMediaData,
+    ...LocalHeroMediaData,
     caption: '<p>My custom caption.</p>'
   }
 }
 
 export const NoCaptionText = {
   args: {
-    ...HeroMediaData,
+    ...LocalHeroMediaData,
     caption: '<p>My custom caption.</p>',
     displayCaption: false
   }
@@ -100,7 +105,7 @@ export const NoCaptionText = {
 export const NoCaptionArea = {
   args: {
     image: {
-      src: HeroMediaData.image.src,
+      src: LocalHeroMediaData.image.src,
       alt: 'The hero image',
       caption: '\n', // a lot of prod data has this for caption
       credit: '',
@@ -113,10 +118,10 @@ export const NoCaptionArea = {
 export const NoLink = {
   args: {
     image: {
-      src: HeroMediaData.image.src,
-      alt: HeroMediaData.image.src,
-      caption: HeroMediaData.image.caption,
-      credit: HeroMediaData.image.credit,
+      src: LocalHeroMediaData.image.src,
+      alt: LocalHeroMediaData.image.src,
+      caption: LocalHeroMediaData.image.caption,
+      credit: LocalHeroMediaData.image.credit,
       detailUrl: ''
     },
     caption: '',

package/src/components/HeroMedia/HeroMedia.vue

@@ -52,14 +52,16 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+/** Hero with no text overlay, just an image or video with a caption below. */
+
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import IconInfo from './../Icons/IconInfo.vue'
 import IconClose from './../Icons/IconClose.vue'
-import type { ImageObject } from '../../interfaces'
+import type { ImageObject, VideoObject } from '../../interfaces'
 import { mixinGetSrcSet, mixinTransparentHeader } from './../../utils/mixins'
 
 export default defineComponent({
@@ -77,21 +79,20 @@ export default defineComponent({
     IconClose
   },
   props: {
-    // image object includes the image caption and credit
     image: {
-      type: Object,
+      type: Object as () => ImageObject,
       default: undefined
     },
     video: {
-      type: Object,
+      type: Object as PropType<VideoObject>,
       default: undefined
     },
-    // if a caption should even be visible
+    /** If a caption should even be visible */
     displayCaption: {
       type: Boolean,
       default: true
     },
-    // for video heroes that pass separate caption and credit data
+    /** For video heroes that pass separate caption and credit data, or to override the caption in `{ImageObject}` */
     caption: {
       type: String,
       default: undefined
@@ -152,7 +153,7 @@ export default defineComponent({
         return 'flex'
       }
     },
-    hasCaptionArea(): string | boolean {
+    hasCaptionArea(): string | boolean | undefined {
       if (this.theImageData) {
         if (this.themeStore.isEdu) {
           // For EDU, only show the caption area if there is a caption

package/src/components/HeroMedium/HeroMedium.stories.js

@@ -5,6 +5,7 @@ import { eduMetadataDictionary } from './../../constants'
 export default {
   title: 'Components/Heroes/Medium',
   component: HeroMedium,
+  tags: ['heroes'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`

package/src/components/HeroMedium/HeroMedium.vue

@@ -96,18 +96,33 @@
   </section>
 </template>
 <script lang="ts">
-// HeroMedium
-// A hero image with article link overlay
-// For use when the hero includes a featured content item with link
-// note: This component is very similar to a HomepageCarousel slide
-import { defineComponent } from 'vue'
+/**
+ * HeroMedium
+ * A hero image with article link overlay
+ * For use when the hero includes a featured content item with link
+ * note: This component is very similar to a HomepageCarousel slide
+ */
+import { defineComponent, type PropType } from 'vue'
 import { mixinTransparentHeader } from '../../utils/mixins'
-import type { ImageObject } from '../../interfaces'
+import type {
+  ContentTypeKey,
+  ImageObject,
+  VideoObject,
+  PageObject,
+  StreamfieldBlockData
+} from '../../interfaces'
+import type { BlockVideoData } from './../BlockVideo/BlockVideo.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BasePill from './../BasePill/BasePill.vue'
 import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
 
+export type FeatureObject = PageObject & {
+  image?: ImageObject
+  video?: VideoObject
+  heroBlocks?: (BlockVideoData | StreamfieldBlockData)[]
+  listingPageHeroImage?: ImageObject
+}
 export default defineComponent({
   name: 'HeroMedium',
   components: {
@@ -117,18 +132,21 @@ export default defineComponent({
     BasePill
   },
   props: {
+    /** Data for the hero. Usually derived from a page's data */
     feature: {
-      type: Object,
+      type: Object as PropType<FeatureObject>,
       required: false,
       default: undefined
     },
+    /** Text for pill (overrides label) */
     customPill: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu` */
     customPillType: {
-      type: String,
+      type: String as PropType<ContentTypeKey>,
       required: false,
       default: undefined
     },
@@ -146,21 +164,21 @@ export default defineComponent({
       required: false,
       default: false
     },
-    // to override media
-    // use-case: news detail pages use this b/c their feature hero is structured differently
+    /** Overrides feature video. Use-case: news detail pages use this b/c their feature hero is structured differently */
     customVideo: {
-      type: Object,
+      type: Object as PropType<VideoObject>,
       required: false,
       default: undefined
     },
+    /** Overrides feature image. Use-case: news detail pages use this b/c their feature hero is structured differently */
     customImage: {
-      type: Object,
+      type: Object as PropType<ImageObject>,
       required: false,
       default: undefined
     }
   },
   computed: {
-    theVideo(): object | null {
+    theVideo(): VideoObject | null {
       if (this.customVideo) {
         return this.customVideo
       } else if (this.feature?.video?.file) {
@@ -168,7 +186,7 @@ export default defineComponent({
       }
       return null
     },
-    theImage(): Partial<ImageObject> | null {
+    theImage(): ImageObject | null {
       if (this.customImage) {
         return this.customImage
       } else if (this.feature?.image?.src) {

package/src/components/HeroMedium/HeroSmall.stories.js

@@ -6,6 +6,7 @@ import { eduMetadataDictionary } from './../../constants'
 export default {
   title: 'Components/Heroes/Small',
   component: HeroMedium,
+  tags: ['heroes'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
@@ -41,8 +42,7 @@ export default {
     },
     docs: {
       description: {
-        component:
-          '`HeroSmall` is the same component as `HeroMedium, but with `compact` set to `true`.'
+        component: 'This is the same component as `HeroMedium, but with `compact` set to `true`.'
       }
     }
   },

package/src/components/HomepageCarousel/HomepageCarousel.stories.js

@@ -4,7 +4,7 @@ import HomepageCarousel from './HomepageCarousel.vue'
 export default {
   title: 'Components/WWW/Homepage/HomepageCarousel',
   component: HomepageCarousel,
-  tags: ['!autodocs'],
+  tags: ['carousels'],
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'canvas'

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -98,7 +98,7 @@
 <script lang="ts">
 import { defineComponent, resolveComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { ImageObject } from '../../interfaces'
+import type { ImageObject, VideoObject } from '../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 
@@ -109,11 +109,7 @@ export interface Slide {
     url: string
   }
   heading: string
-  video: {
-    file: string
-    fileOgg: string
-    fileWebm: string
-  }
+  video: Partial<VideoObject>
   listingPageHeroImage: Partial<ImageObject>
 }