@explorer-1/vue 0.3.6 → 0.3.8

package/src/components/BlockQuote/BlockQuote.vue

@@ -50,8 +50,9 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
+/** A big, fancy pull quote, with optional attribution and link. Can also be used for non-quotation callouts. */
+
+import { defineComponent, type PropType } from 'vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 
 export interface BlockQuoteAttributes {

package/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js

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

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -43,11 +43,12 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
+/** A list of links formatted with background colors and icons indicating the type of link. */
+
+import { defineComponent, type PropType } from 'vue'
 import type { BlockData, RelatedLinkObject } from './../../interfaces'
 import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
-import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseHeading, { type HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 export interface BlockRelatedLinksObject extends BlockData {
   heading: string
@@ -66,8 +67,9 @@ export default defineComponent({
       required: true,
       default: () => ({})
     },
+    /** Semantic heading level. Does not affect appearance. */
     headingSize: {
-      type: String,
+      type: String as PropType<HeadingLevel>,
       required: false,
       default: undefined
     }

package/src/components/BlockRichTable/BlockRichTable.stories.js

@@ -4,7 +4,7 @@ import { BlockImageData } from './../BlockImage/BlockImage.stories'
 export default {
   title: 'Components/Blocks/BlockRichTable',
   component: BlockRichTable,
-  tags: ['!autodocs'],
+  tags: ['wagtail-blocks'],
   excludeStories: /.*Data$/
 }
 

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -1,8 +1,20 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { BlockData, ImageBlock, StreamfieldBlockData } from './../../interfaces.ts'
 import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
 import BlockText from './../BlockText/BlockText.vue'
 
+type HeadCell = {
+  text?: string
+}
+type RichTableObject = BlockData & {
+  tableCaption?: string
+  tableContent?: {
+    tableHead?: HeadCell[]
+    tableBody?: BlockData[][]
+  }
+}
+
 export default defineComponent({
   name: 'BlockRichTable',
   components: {
@@ -11,7 +23,7 @@ export default defineComponent({
   },
   props: {
     table: {
-      type: Object,
+      type: Object as PropType<RichTableObject>,
       required: true
     }
   }
@@ -44,7 +56,9 @@ export default defineComponent({
               scope="col"
               class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
             >
-              {{ headCell.text }}
+              <template v-if="headCell">
+                {{ (headCell as HeadCell).text }}
+              </template>
             </th>
           </tr>
         </thead>
@@ -60,22 +74,22 @@ export default defineComponent({
             >
               <template v-if="cell.blockType === 'CharBlock'">
                 <p class="">
-                  {{ cell.value }}
+                  {{ (cell as StreamfieldBlockData).value }}
                 </p>
               </template>
               <template v-else-if="cell.blockType === 'RichTextBlock'">
                 <BlockText
                   variant="small"
-                  :text="cell.value"
+                  :text="(cell as StreamfieldBlockData).value"
                 />
               </template>
               <template v-else-if="cell.blockType === 'ImageBlock'">
                 <BlockImageStandard
                   class=""
-                  :data="cell.image"
-                  :display-caption="cell.displayCaption"
-                  :caption="cell.caption"
-                  :constrain="cell.constrain"
+                  :data="(cell as ImageBlock).image"
+                  :display-caption="(cell as ImageBlock).displayCaption"
+                  :caption="(cell as ImageBlock).caption"
+                  :constrain="(cell as ImageBlock).constrain"
                 />
               </template>
             </td>

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -19,22 +19,12 @@ import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.storie
 import { BlockNewsletterSignupData } from '../BlockNewsletterSignup/BlockNewsletterSignup.stories'
 import { MixedColumnWidths } from './../BlockRichTable/BlockRichTable.stories'
 import { BlockCsrTableData } from './../BlockCsrTable/BlockCsrTable.stories'
-import BlockStreamfield, { variants } from './BlockStreamfield.vue'
+import BlockStreamfield from './BlockStreamfield.vue'
 
 export default {
   title: 'Components/Blocks/BlockStreamfield',
   component: BlockStreamfield,
   tags: ['!autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: Object.keys(variants)
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large']
-    }
-  },
   parameters: {
     layout: 'fullscreen'
   },

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -36,7 +36,7 @@
         v-else-if="block.blockType == 'InlineImageBlock'"
         :key="`inlineImageBlock${index}`"
         :class="seamlessText(index) ? 'lg:mb-8 mb-5' : marginBottom"
-        :data="block"
+        :data="block as BlockInlineImageData"
         :variant="size"
       />
 
@@ -55,7 +55,7 @@
         indent="col-3"
         :class="marginBottom"
       >
-        <BlockKeyPoints :data="block" />
+        <BlockKeyPoints :data="block as BlockKeyPointsData" />
       </LayoutHelper>
 
       <LayoutHelper
@@ -73,7 +73,7 @@
         indent="col-4"
         :class="marginBottom"
       >
-        <BlockCta :data="block" />
+        <BlockCta :data="block as BlockCtaData" />
       </LayoutHelper>
       <LayoutHelper
         v-else-if="block.blockType == 'NewsletterSignupBlock'"
@@ -91,7 +91,7 @@
         :class="marginBottom"
       >
         <BlockTeaser
-          :custom-label="block.customLabel"
+          :label="block.customLabel"
           :heading="block.heading"
           :introduction="block.introduction"
           :button-text="block.buttonText"
@@ -134,7 +134,7 @@
         indent="col-2"
         :class="marginBottom"
       >
-        <BlockVideo :data="block" />
+        <BlockVideo :data="block as BlockVideoData" />
       </LayoutHelper>
 
       <LayoutHelper
@@ -143,14 +143,14 @@
         indent="col-2"
         :class="marginBottom"
       >
-        <BlockVideoEmbed :data="block as unknown as VideoBlockEmbedData" />
+        <BlockVideoEmbed :data="block as unknown as BlockVideoEmbedData" />
       </LayoutHelper>
 
       <BlockImage
         v-else-if="block.blockType == 'FullBleedImageBlock'"
         :key="`fullBleedImageBlock${index}`"
         :class="marginBottom"
-        :data="block"
+        :data="block as ImageBlock"
         :full-bleed="block.fullBleed"
       />
 
@@ -160,7 +160,7 @@
         indent="col-2"
         :class="marginBottom"
       >
-        <BlockImageComparison :data="block" />
+        <BlockImageComparison :data="block as BlockImageComparisonData" />
       </LayoutHelper>
 
       <LayoutHelper
@@ -169,7 +169,7 @@
         indent="col-2"
         :class="marginBottom"
       >
-        <BlockIframeEmbed :data="block" />
+        <BlockIframeEmbed :data="block as BlockIframeEmbedData" />
       </LayoutHelper>
 
       <LayoutHelper
@@ -221,7 +221,7 @@
         :key="`linkCarouselBlock${index}`"
         :class="marginBottom"
       >
-        <BlockLinkCarousel :items="block.blocks" />
+        <BlockLinkCarousel :items="block.blocks as Card[]" />
       </div>
 
       <LayoutHelper
@@ -230,7 +230,7 @@
         indent="col-2"
         :class="marginBottom"
       >
-        <BlockLinkCardList :items="block.blocks" />
+        <BlockLinkCardList :items="block.blocks as Card[]" />
       </LayoutHelper>
 
       <LayoutHelper
@@ -269,19 +269,23 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { StreamfieldBlockData } from '../../interfaces'
+import type { ImageBlock, StreamfieldBlockData, Card } from '../../interfaces'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
 import BlockAccordion, { type AccordionBlockObject } from './../BlockAccordion/BlockAccordion.vue'
 import BlockCardGrid from './../BlockCardGrid/BlockCardGrid.vue'
-import BlockCta from './../BlockCta/BlockCta.vue'
+import BlockCta, { type BlockCtaData } from './../BlockCta/BlockCta.vue'
 import BlockHeading, { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
 import BlockImage from './../BlockImage/BlockImage.vue'
 import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
-import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
+import BlockImageComparison, {
+  type BlockImageComparisonData
+} from './../BlockImageComparison/BlockImageComparison.vue'
 import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
-import BlockInlineImage from './../BlockInlineImage/BlockInlineImage.vue'
-import BlockKeyPoints from './../BlockKeyPoints/BlockKeyPoints.vue'
+import BlockInlineImage, {
+  type BlockInlineImageData
+} from './../BlockInlineImage/BlockInlineImage.vue'
+import BlockKeyPoints, { type BlockKeyPointsData } from './../BlockKeyPoints/BlockKeyPoints.vue'
 import BlockLinkCardList from './../BlockLinkCardList/BlockLinkCardList.vue'
 import BlockLinkCarousel from './../BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockListCards from './../BlockListCards/BlockListCards.vue'
@@ -292,25 +296,23 @@ import BlockRelatedLinks, {
 import BlockRichTable from './../BlockRichTable/BlockRichTable.vue'
 import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
-import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockIframeEmbed, {
+  type BlockIframeEmbedData
+} from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockGist from './../BlockGist/BlockGist.vue'
-import BlockVideo from './../BlockVideo/BlockVideo.vue'
-import BlockVideoEmbed, {
-  type BlockData as VideoBlockEmbedData
-} from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockVideo, { type BlockVideoData } from './../BlockVideo/BlockVideo.vue'
+import BlockVideoEmbed, { type BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockNewsletterSignup from '../BlockNewsletterSignup/BlockNewsletterSignup.vue'
 import BlockCsrTable from '../BlockCsrTable/BlockCsrTable.vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
+import { type VariantKey as BlockTextVariantKey } from './../BlockText/BlockText.vue'
 
-interface Variants {
-  [key: string]: string
-}
-
-export const variants: Variants = {
+export const variants = {
   default: '',
   fluid: '-fluid'
 }
+type VariantsKey = keyof typeof variants
 
 export default defineComponent({
   name: 'BlockStreamfield',
@@ -343,21 +345,22 @@ export default defineComponent({
     BlockCsrTable
   },
   props: {
+    /** Changes behavior of width. Fluid width: all block widths will match that of the container. Otherwise they will conform to preset widths. */
     variant: {
-      type: String,
+      type: String as PropType<VariantsKey>,
       required: false,
       default: 'default',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    /** Text size. Corresponds to available variants of `BlockText` */
     size: {
-      type: String as PropType<'small' | 'medium' | 'large'>,
-      required: false,
+      type: String as PropType<BlockTextVariantKey>,
       default: 'large'
     },
-    // eslint-disable-next-line vue/require-default-prop
     data: {
       type: Array as PropType<StreamfieldBlockData[]>,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {

package/src/components/BlockTeaser/BlockTeaser.stories.js

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

package/src/components/BlockTeaser/BlockTeaser.vue

@@ -75,39 +75,47 @@ export default defineComponent({
     BaseImage
   },
   props: {
-    // piecemeal props for reuse
-    customLabel: {
-      type: String,
-      required: false
-    },
+    /** Small text at the top of the teaser */
     label: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Large heading text */
     heading: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Short descriptive text */
     introduction: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Button text */
     buttonText: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** Background image */
     image: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
+    /** If the background image should span the entire width of the block */
     fullWidth: {
       type: Boolean,
       default: false
     },
+    /** Option to pass a page data object as an object or as a single item in an array (for better compatibility with CMS mixed use) */
     // ideally can pass a page object (TopicDetailPage), but sometimes (e.g. streamfield teaserblock) this will be wrapped in an array
     teaserPage: {
       type: [Array, Object],
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -115,7 +123,7 @@ export default defineComponent({
      * Fall back to the linked page’s label, if there is one.
      */
     theLabel(): string {
-      return this.customLabel || this.label || this.theTeaserPage?.label || ''
+      return this.label || this.theTeaserPage?.label || ''
     },
 
     /**

package/src/components/BlockText/BlockText.stories.js

@@ -1,16 +1,9 @@
-import BlockText, { variants } from './BlockText.vue'
+import BlockText from './BlockText.vue'
 
 export default {
   title: 'Components/Blocks/BlockText',
   component: BlockText,
-  tags: ['!autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: Object.keys(variants)
-    },
-    text: { control: { type: 'text' } }
-  },
+  tags: ['wagtail-blocks'],
   decorators: [
     () => ({
       template: '<div class="lg:w-2/3 mx-auto"><story /></div>'

package/src/components/BlockText/BlockText.vue

@@ -6,37 +6,49 @@
   ></div>
 </template>
 <script lang="ts">
+/**
+ * Description of this component
+ */
 import { defineComponent } from 'vue'
 
-interface Variants {
-  [key: string]: string
-}
-
 export interface BlockTextObject {
   blockType?: string
   value: string
 }
-export const variants: Variants = {
+
+const variants = {
   small: 'text-body-sm -small',
   medium: 'text-body-md -medium',
   large: 'text-body-lg -large'
-}
+} as const
+
+export type VariantKey = keyof typeof variants
 
 export default defineComponent({
   name: 'BlockText',
   props: {
+    /**
+     * Block contents. Supports rich text.
+     */
     text: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
+    /**
+     * Adjusts text size and vertical spacing. Corresponds with the same variants in `BlockInlineImage`
+     */
     variant: {
-      type: String,
+      type: String as () => VariantKey,
       required: false,
       default: 'large',
-      validator: (prop: string): boolean => Object.keys(variants).includes(prop)
+      validator: (prop: VariantKey) => Object.keys(variants).includes(prop)
     }
   },
   computed: {
+    /**
+     * Class string generated by variant selection.
+     */
     computedClass(): string {
       return variants[this.variant]
     }

package/src/components/BlockVideo/BlockVideo.stories.js

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

package/src/components/BlockVideo/BlockVideo.vue

@@ -21,12 +21,19 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
+import type { BlockData, VideoObject } from './../../interfaces.ts'
 import { useThemeStore } from '../../store/theme'
 import BaseVideo from './../BaseVideo/BaseVideo.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
+export type BlockVideoData = BlockData & {
+  video: VideoObject
+  autoplay: boolean
+  caption: string
+  credit: string
+}
 export default defineComponent({
   name: 'BlockVideo',
   components: {
@@ -34,14 +41,18 @@ export default defineComponent({
     BaseImageCaption
   },
   props: {
+    /** BlockData is used to render an HTML5 video element */
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<BlockVideoData>,
+      required: false,
+      default: undefined
     },
+    /** If the video should autoplay */
     autoplay: {
       type: Boolean,
       default: false
     },
+    /** Adds a link. Link text defaults to "Full Video Details" */
     customDetailUrl: {
       type: String,
       default: undefined

package/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js

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

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -24,14 +24,15 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
+import type { BlockData } from './../../interfaces'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
-export interface BlockData {
+export type BlockVideoEmbedData = BlockData & {
   heading: string
   display?: boolean
   embed: {
-    // HTML for the iframe, generated by OEmbed.
+    /** HTML for the iframe, generated by OEmbed */
     embed: string
   }
   caption: string
@@ -45,11 +46,13 @@ export default defineComponent({
     BaseImageCaption
   },
   props: {
+    /** BlockData (`embed.embed`) provides the HTML markup for the embed */
     data: {
-      type: Object as PropType<Partial<BlockData>>,
+      type: Object as PropType<BlockVideoEmbedData>,
       required: false,
       default: undefined
     },
+    /** Adds a link. Link text defaults to "Full Video Details" */
     customDetailUrl: {
       type: String,
       default: undefined

package/src/components/CalendarButton/CalendarButton.vue

@@ -24,34 +24,41 @@ export default defineComponent({
     BaseButton
   },
   props: {
+    /** Used to generate ICS file */
     isAllDay: {
       type: Boolean,
       required: false,
       default: false
     },
+    /** Used to generate ICS file */
     startDate: {
       type: String,
       default: undefined
     },
+    /** Used to generate ICS file */
     startDatetime: {
       type: String,
       default: undefined
     },
+    /** Used to generate ICS file */
     endDatetime: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Used to generate ICS file */
     title: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Used to generate ICS file */
     location: {
       type: String,
       required: false,
       default: undefined
     },
+    /** Used to generate ICS file */
     description: {
       type: String,
       required: false,

package/src/components/DetailHeadline/DetailHeadline.stories.js

@@ -1,27 +1,9 @@
-import DetailHeadline, { pillColorVariants } from './DetailHeadline.vue'
+import DetailHeadline from './DetailHeadline.vue'
 
 export default {
   title: 'Components/Utilities/DetailHeadline',
   component: DetailHeadline,
-  excludeStories: /.*Data$/,
-  argTypes: {
-    ariaLabel: {
-      type: 'string',
-      description:
-        "ARIA label. Recommended if your button label isn't descriptive, or if it only contains an icon."
-    },
-    pillColor: {
-      type: 'string',
-      description: 'Color of pill',
-      control: {
-        type: 'select'
-      },
-      options: pillColorVariants,
-      table: {
-        defaultValue: { summary: 'primary' }
-      }
-    }
-  }
+  excludeStories: /.*Data$/
 }
 
 export const DetailHeadlineData = {