@explorer-1/vue 0.3.4 → 0.3.7

package/src/components/EventDetailHero/EventDetailHero.stories.js

@@ -3,14 +3,20 @@ import EventDetailHero from './EventDetailHero.vue'
 export default {
   title: 'Components/WWW/EventDetail/EventDetailHero',
   component: EventDetailHero,
+  tags: ['!autodocs'],
+  argTypes: {
+    constrain: {
+      description: 'Constrain image to 16:9'
+    }
+  },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     themes: {
       clearable: false,
@@ -37,10 +43,6 @@ export const EventDetailHeroData = {
       height: 1200
     },
     alt: 'The hero image'
-  },
-  startDateSplit: {
-    day: '25',
-    monthAndYear: 'Jan. 2020'
   }
 }
 
@@ -48,6 +50,7 @@ export const EventDetailHeroData = {
 export const BaseStory = {
   args: {
     image: EventDetailHeroData.heroImage,
-    startDateSplit: EventDetailHeroData.startDateSplit
+    startDate: '11-11-2025',
+    endDate: '12-02-2025'
   }
 }

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

@@ -1,11 +1,32 @@
 import HeroLarge from './HeroLarge.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Heroes/Large',
   component: HeroLarge,
+  tags: ['heroes'],
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'canvas'
+  },
+  argTypes: {
+    customPill: {
+      type: { name: 'string', required: false },
+      description: 'Text for pill (overrides label)'
+    },
+    customPillType: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary),
+      description:
+        'Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu`'
+    },
+    hasOverlay: {
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      description:
+        'If secondary nav is also on this page, more space will be added above the hero text'
+    }
   }
 }
 
@@ -52,15 +73,19 @@ export const HeroLargeData = {
       url: 'https://picsum.photos/id/247/640/900'
     },
     alt: 'Robotics detail page hero image'
-  }
+  },
+  customPill: undefined,
+  customPillType: undefined,
+  hasOverlay: false
 }
 
 // stories
 export const BaseStory = {
   name: 'HeroLarge',
   args: {
-    eyebrow: 'Robotics at JPL',
+    label: 'Robotics at JPL',
     ...HeroLargeData,
+    summary: HeroLargeData.description,
     image: HeroLargeData.heroImage
   }
 }

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,13 +93,15 @@ export default defineComponent({
       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
     },
@@ -109,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,9 +4,10 @@ import HeroMedia from './HeroMedia.vue'
 export default {
   title: 'Components/Heroes/Media Only',
   component: HeroMedia,
+  tags: ['heroes'],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     docs: {
       description: {
@@ -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

@@ -1,17 +1,32 @@
 import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import HeroMedium from './HeroMedium.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Heroes/Medium',
   component: HeroMedium,
+  tags: ['heroes'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
     })
   ],
+  argTypes: {
+    customPill: {
+      type: { name: 'string', required: false },
+      description: 'Text for pill (overrides label)'
+    },
+    customPillType: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary),
+      description:
+        'Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu`'
+    }
+  },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     themes: {
       clearable: false,
@@ -57,7 +72,7 @@ export const HeroMediumData = {
 export const BaseStory = {
   name: 'HeroMedium',
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,
@@ -66,7 +81,7 @@ export const BaseStory = {
 }
 export const Compact = {
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,

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

@@ -1,18 +1,33 @@
 import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import { HeroMediumData } from './HeroMedium.stories'
 import HeroMedium from './HeroMedium.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Heroes/Small',
   component: HeroMedium,
+  tags: ['heroes'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
     })
   ],
+  argTypes: {
+    customPill: {
+      type: { name: 'string', required: false },
+      description: 'Text for pill (overrides label)'
+    },
+    customPillType: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary),
+      description:
+        'Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu`'
+    }
+  },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     themes: {
       clearable: false,
@@ -27,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`.'
       }
     }
   },
@@ -38,7 +52,7 @@ export default {
 export const BaseStory = {
   name: 'HeroMedium (compact)',
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,
@@ -48,7 +62,7 @@ export const BaseStory = {
 }
 export const Video = {
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,

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: ['carousel'],
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'canvas'