@explorer-1/vue 0.3.6 → 0.3.7

package/src/components/BlockImageComparison/BlockImageComparison.vue

@@ -27,17 +27,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { BlockData, ImageObject } from './../../interfaces.ts'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
+export type BlockImageComparisonData = BlockData & {
+  beforeImage: ImageObject
+  afterImage: ImageObject
+  constrain: boolean
+  caption: string
+}
+
 export default defineComponent({
   name: 'BlockImageComparison',
   components: { BaseImageCaption },
   props: {
     data: {
-      type: Object,
+      type: Object as PropType<BlockImageComparisonData>,
       required: true
     },
+    /** Link to more image details. Link text defaults to "Full image details" */
     customDetailUrl: {
       type: String,
       default: undefined

package/src/components/BlockImageGallery/BlockImageGallery.stories.js

@@ -4,19 +4,12 @@ import BlockImageGallery from './BlockImageGallery.vue'
 export default {
   title: 'Components/Blocks/BlockImageGallery',
   component: BlockImageGallery,
+  tags: ['wagtail-blocks', 'carousels'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
     })
   ],
-  argTypes: {
-    blockId: {
-      text: { type: 'string' },
-      required: false,
-      description:
-        'Fancybox: the block id is used to differentiate the fancybox of this gallery from others on the page. Generated by Wagtail.'
-    }
-  },
 
   parameters: {
     html: {
@@ -41,7 +34,7 @@ export const BlockImageGalleryData = {
 
 export const ImageGalleryData = {
   label: 'Mars',
-  'block-id': 'x121p1yuly',
+  blockId: 'x121p1yuly',
   title: 'Image Gallery',
   description:
     'Gallery description, maximus quis nibh eu, luctus ultrices nulla. Curabitur tempus, massa vitae porttitor porttitor, tortor erat tincidunt magna, vulputate varius nulla leo et mauris.',

package/src/components/BlockImageGallery/BlockImageGallery.vue

@@ -86,18 +86,22 @@ export default defineComponent({
     BlockImageCarousel
   },
   props: {
+    /** Small label text appears above the title on the gallery cover */
     label: {
       type: String,
       required: false
     },
+    /** Title of the gallery. Appears on gallery cover. */
     title: {
       type: String,
       required: false
     },
+    /** Short description of the gallery (plain text). Appears on gallery cover.  */
     description: {
       type: String,
       required: false
     },
+    /** Image to use as the gallery cover */
     cover: {
       type: Object as PropType<ImageObject>,
       required: false
@@ -106,6 +110,7 @@ export default defineComponent({
       type: Array as PropType<ImageObject[]>,
       required: false
     },
+    /** Fancybox: the block id is used to differentiate the fancybox of this gallery from others on the page. Generated by Wagtail. */
     blockId: {
       type: String,
       required: false

package/src/components/BlockInlineImage/BlockInlineImage.stories.js

@@ -4,14 +4,7 @@ import BlockInlineImage from './BlockInlineImage.vue'
 export default {
   title: 'Components/Blocks/BlockInlineImage',
   component: BlockInlineImage,
-  argTypes: {
-    variant: {
-      type: 'string',
-      description: 'Text size variant',
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large']
-    }
-  },
+  tags: ['wagtail-blocks'],
   excludeStories: /.*(Data)$/
 }
 

package/src/components/BlockInlineImage/BlockInlineImage.vue

@@ -55,13 +55,22 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
-import type { ImageObject } from '../../interfaces'
+import type { BlockData, ImageObject } from '../../interfaces'
 import { mixinGetSrcSet } from './../../utils/mixins'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
-import BlockText from './../BlockText/BlockText.vue'
+import BlockText, { type VariantKey as BlockTextVariantKey } from './../BlockText/BlockText.vue'
+
+export type BlockInlineImageData = BlockData & {
+  /** rich text */
+  text?: string
+  caption?: string
+  displayCaption: boolean
+  image?: ImageObject
+  alignTo: 'left' | 'right'
+}
 
 export default defineComponent({
   name: 'BlockInlineImage',
@@ -74,11 +83,15 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<BlockInlineImageData>,
+      required: false,
+      default: undefined
     },
+    /**
+     * Adjusts text size and vertical spacing. Corresponds with the same variants in `BlockText`
+     */
     variant: {
-      type: String as PropType<'small' | 'medium' | 'large'>,
+      type: String as PropType<BlockTextVariantKey>,
       default: 'large'
     }
   },
@@ -93,7 +106,7 @@ export default defineComponent({
         return this.data.caption
       } else if (
         this.data &&
-        this.data.image.caption &&
+        this.data.image?.caption &&
         this.data.image.caption.length > 2 &&
         this.data.displayCaption
       ) {
@@ -111,7 +124,7 @@ export default defineComponent({
       }
       return null
     },
-    hasCaptionArea(): string | false {
+    hasCaptionArea(): string | false | undefined {
       if (this.data && this.data.image) {
         return this.theCaption || this.data.image.credit || this.data.image.detailUrl
       }

package/src/components/BlockKeyPoints/BlockKeyPoints.stories.js

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

package/src/components/BlockKeyPoints/BlockKeyPoints.vue

@@ -4,6 +4,7 @@
     class="BlockKeyPoints border-gray-light-mid lg:py-10 py-6 border-t border-b"
   >
     <BlockHeading
+      v-if="data.heading"
       class="mb-5"
       :data="{ heading: data.heading }"
     />
@@ -24,10 +25,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import { BlockData } from './../../interfaces.ts'
 import BlockHeading from './../BlockHeading/BlockHeading.vue'
 import BlockText from './../BlockText/BlockText.vue'
 
+export type BlockKeyPointsData = BlockData & {
+  listItem: {
+    text: string
+  }[]
+}
+
 export default defineComponent({
   name: 'BlockKeyPoints',
   components: {
@@ -36,8 +44,9 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<BlockKeyPointsData>,
+      required: false,
+      default: undefined
     }
   }
 })

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -5,24 +5,8 @@ import BlockLinkCard from './BlockLinkCard.vue'
 export default {
   title: 'Components/Cards/BlockLinkCard',
   component: BlockLinkCard,
-  tags: ['!autodocs'],
+  tags: ['cards'],
   excludeStories: /.*Data$/,
-  argTypes: {
-    size: {
-      control: {
-        type: 'select'
-      },
-      options: ['sm', 'md', 'lg']
-    },
-    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' // to omit decorators from html output
@@ -217,6 +201,7 @@ export const EduExplainerArticle = {
   globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
+
     data: {
       page: {
         __typename: 'EDUExplainerArticlePage',
@@ -235,7 +220,9 @@ export const EduExplainerArticle = {
           { gradeLevel: '8' }
         ]
       }
-    }
+    },
+
+    size: 'md'
   }
 }
 export const LargeEduExplainerArticle = {

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -189,7 +189,12 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import type { Card, EventCardObject, EduResourceCardObject } from '../../interfaces'
+import type {
+  ContentTypeKey,
+  Card,
+  EventCardObject,
+  EduResourceCardObject
+} from './../../interfaces.ts'
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
@@ -223,88 +228,102 @@ export default defineComponent({
     BlockLinkCardCollectionLg
   },
   props: {
+    /** Card data (can accept page data with key `page`) */
     data: {
       type: Object as PropType<Card>,
       required: false,
       default: undefined
     },
-    // override props as needed
-    // so we can use this component in search results
+    /** Overrides `data` */
     url: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Overrides `data` */
     externalLink: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Overrides `data` */
     thumbnailImage: {
       type: Object,
       required: false,
       default: undefined
     },
+    /** Overrides `data` */
     label: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Overrides `data` */
     title: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Overrides `data` */
     date: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Events: overrides `data` */
     eventType: {
       type: String,
       default: undefined
     },
+    /** Events: overrides `data` */
     startDate: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Events: overrides `data` */
     endDate: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Events: overrides `data` */
     ongoing: {
       type: Boolean,
       default: false
     },
+    /** Events: overrides `data` */
     startDatetime: {
       type: String,
       default: undefined
     },
+    /** Events: overrides `data` */
     endDatetime: {
       type: String,
       default: undefined
     },
+    /** Events: overrides `data` */
     location: {
       type: String,
       default: undefined
     },
-    // if styling should be compact
+    /** Compactness of styling. `sm` and `md` recommended for grids or horizontal lists. `lg` is a horizontal layout recommended for wide lists */
     size: {
-      type: String,
+      type: String as PropType<'sm' | 'md' | 'lg'>,
       default: 'md'
     },
-    // if a heading should be used and at what level
+    /** Heading level for semantic markup. This does not affect the style of the heading. No heading element is used if `undefined` */
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
       required: false,
       default: undefined
     },
+    /** Events: overrides `data` */
     showCalendarChip: {
       type: Boolean,
       default: false
     },
+    /** Currently only applies to EDU Collection cards. If "featured" styles are turned on, the card background and text colors will be inverted. */
     useFeaturedStyles: {
       type: Boolean,
       default: false
@@ -374,11 +393,11 @@ export default defineComponent({
       }
       return undefined
     },
-    metadataType() {
+    metadataType(): ContentTypeKey | undefined {
       // checks that this is a valid metadata type
       const validContentTypes = Object.keys(eduMetadataDictionary)
       return this.data?.page?.__typename && validContentTypes.includes(this.data?.page?.__typename)
-        ? this.data?.page?.__typename
+        ? (this.data?.page?.__typename as ContentTypeKey)
         : undefined
     },
     metadataAttrs() {

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import type { EduResourceCardObject } from '../../interfaces'
+import type { ContentTypeKey, EduResourceCardObject } from '../../interfaces'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -10,7 +10,7 @@ import MetadataEduResource from './../MetadataEduResource/MetadataEduResource.vu
 
 interface BlockLinkCardCollectionLgProps {
   theItem?: EduResourceCardObject
-  metadataType?: string
+  metadataType?: ContentTypeKey
   metadataAttrs?: any
   headingLevel?: HeadingLevel
   size?: string

package/src/components/BlockLinkCardList/BlockLinkCardList.stories.js

@@ -3,7 +3,7 @@ import BlockLinkCardList from './BlockLinkCardList.vue'
 export default {
   title: 'Components/Blocks/BlockLinkCardList',
   component: BlockLinkCardList,
-  tags: ['!autodocs'],
+  tags: ['wagtail-blocks', 'listings'],
   excludeStories: /.*Data$/
 }
 export const BlockLinkCardData = {
@@ -103,8 +103,6 @@ export const BlockLinkCardCarouselData = [
 export const BaseStory = {
   name: 'BlockLinkCardList',
   args: {
-    itemType: 'cards',
-    heading: 'Related Pages',
     items: BlockLinkCardCarouselData
   }
 }

package/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js

@@ -1,21 +1,9 @@
-import BlockLinkCarousel, { itemTypes } from './BlockLinkCarousel.vue'
+import BlockLinkCarousel from './BlockLinkCarousel.vue'
 
 export default {
   title: 'Components/Blocks/BlockLinkCarousel',
   component: BlockLinkCarousel,
-  argTypes: {
-    itemType: {
-      type: 'string',
-      description: 'Type of item used for each slide',
-      control: {
-        type: 'select'
-      },
-      options: Object.keys(itemTypes),
-      table: {
-        defaultValue: { summary: 'cards' }
-      }
-    }
-  },
+  tags: ['wagtail-blocks', 'carousels', 'listings'],
   excludeStories: /.*Data$/
 }
 

package/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -15,20 +15,19 @@
   </MixinCarousel>
 </template>
 <script lang="ts">
-import { defineComponent, resolveComponent } from 'vue'
+import { defineComponent, resolveComponent, type PropType } from 'vue'
+import type { Card } from './../../interfaces.ts'
 import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
 import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
 import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
 
-interface Variants {
-  [key: string]: string
-}
-
-export const itemTypes: Variants = {
+export const itemTypes = {
   cards: 'BlockLinkCard',
   tiles: 'BlockLinkTile'
 }
 
+type ItemTypesKey = keyof typeof itemTypes
+
 export default defineComponent({
   name: 'BlockLinkCarousel',
   components: {
@@ -37,14 +36,15 @@ export default defineComponent({
     BlockLinkTile
   },
   props: {
+    /** Type of item used for each slide */
     itemType: {
-      type: String,
+      type: String as PropType<ItemTypesKey>,
       required: false,
       default: 'cards',
       validator: (prop: string): boolean => Object.keys(itemTypes).includes(prop)
     },
     items: {
-      type: Array,
+      type: Array as PropType<Card[]>,
       required: false,
       default: undefined
     },

package/src/components/BlockLinkTile/BlockLinkTile.stories.js

@@ -5,22 +5,12 @@ import BlockLinkTile from './BlockLinkTile.vue'
 export default {
   title: 'Components/Cards/BlockLinkTile',
   component: BlockLinkTile,
+  tags: ['cards'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
     })
   ],
-  tags: ['!autodocs'],
-  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/BlockLinkTile/BlockLinkTile.vue

@@ -99,47 +99,60 @@ export default defineComponent({
     BaseImagePlaceholder
   },
   props: {
-    // if some cards contain external links, be sure to alias the external url as 'externalLink'
+    /** Card data (can accept page data with key `page`) */
     data: {
       type: Object as PropType<Card | EventCardObject>,
-      required: false
+      required: false,
+      default: undefined
     },
-    // override props as needed
-    // so we can use this component in search results
+    /** Overrides `data` */
     url: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Overrides `data` */
     externalLink: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Overrides `data` */
     thumbnailImage: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Overrides `data` */
     label: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Overrides `data` */
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Event: overrides `data` */
     startDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Event: overrides `data` */
     endDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
-    // if styling should be compact
+    /** If compact styling should be used (adjusts text size) */
     compact: {
       type: Boolean,
       default: false
     },
-    // if a heading should be used and at what level
+    /** Heading level for semantic markup. This does not affect the style of the heading. No heading element is used if `undefined` */
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
       required: false

package/src/components/BlockListCards/BlockListCards.stories.js

@@ -3,6 +3,7 @@ import BlockListCards from './BlockListCards.vue'
 export default {
   title: 'Components/Blocks/BlockListCards',
   component: BlockListCards,
+  tags: ['wagtail-blocks', 'listings'],
   excludeStories: /.*Data$/
 }
 

package/src/components/BlockListCards/BlockListCards.vue

@@ -96,9 +96,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mixinGetExternalLink } from './../../utils/mixins'
-import type { RelatedLinkObject } from '../../interfaces'
+import type { BlockData, RelatedLinkObject } from '../../interfaces'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -116,8 +116,9 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<BlockData>,
+      required: false,
+      default: undefined
     }
   },
   methods: {

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.stories.js

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

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.vue

@@ -60,8 +60,9 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
+import type { BlockData } from './../../interfaces.ts'
 import { useThemeStore } from '../../store/theme'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import BaseRadioGroup from './../BaseRadioGroup/BaseRadioGroup.vue'
@@ -115,7 +116,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
+      type: Object as PropType<BlockData>,
       required: true,
       default: () => ({})
     }

package/src/components/BlockQuote/BlockQuote.stories.js

@@ -3,6 +3,7 @@ import BlockQuote from './BlockQuote.vue'
 export default {
   title: 'Components/Blocks/BlockQuote',
   component: BlockQuote,
+  tags: ['wagtail-blocks'],
   excludeStories: /.*Data$/,
   parameters: {
     docs: {