@explorer-1/vue 0.3.6 → 0.3.8

package/src/components/BaseRadioGroup/BaseRadioGroup.vue

@@ -61,37 +61,44 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
+/** The BaseRadioGroup component is expected to contain an array of options and a grouping name with the goal of selecting a single option. */
+
+import { defineComponent, type PropType } from 'vue'
 import type { FormOption } from '../../interfaces'
 export default defineComponent({
   name: 'BaseRadioGroup',
   props: {
+    /** iContact group id */
     group: {
       type: String,
       default: null,
       required: false
     },
+    /** The value that should be preselected */
     preselected: {
       type: String,
       default: null,
       required: false
     },
+    /** Heading */
     heading: {
       type: String,
       default: null,
       required: false
     },
+    /** Descriptive text or summary */
     subHeading: {
       type: String,
       default: null,
       required: false
     },
+    /** Fieldset title, for screen readers */
     title: {
       type: String,
       default: null,
       required: false
     },
+    /** Array of `{FormOption}s` */
     options: {
       type: Array as PropType<FormOption[]>,
       default: null,

package/src/components/BaseSwimlane/BaseSwimlane.stories.js

@@ -7,7 +7,8 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through.`
+        component:
+          "The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through."
       }
     }
   }

package/src/components/BaseSwimlane/BaseSwimlane.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script lang="ts">
+/** The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through. */
+
 // @ts-nocheck
 import { defineComponent } from 'vue'
 

package/src/components/BaseTimer/BaseTimer.stories.js

@@ -7,7 +7,12 @@ export default {
     () => ({
       template: `<div id="storyRoot" class="w-full"><story/></div>`
     })
-  ]
+  ],
+  parameters: {
+    html: {
+      root: '#storyRoot'
+    }
+  }
 }
 
 export const BaseStory = {

package/src/components/BaseTimer/BaseTimer.vue

@@ -85,22 +85,24 @@ type Interval = ReturnType<typeof setInterval>
 export default defineComponent({
   name: 'BaseTimer',
   props: {
+    /** Start time or goal time (depends if it's a countdown or not). Format: `YYYY-MM-DD HH:MM:SS+01:00` */
     targetDateTime: {
       type: String,
       required: true
     },
-    // if blank, the first three significant units will show
+    /** If blank, the first three applicable time units will show */
     selectedUnits: {
       type: Array as PropType<UnitID[]>,
       required: false,
       validator: (val: UnitID[]): boolean => val.every((v) => Boolean(timerUnits[v]))
     },
+    /** If time and units should all appear on one line */
     inline: {
       type: Boolean,
       required: false,
       default: false
     },
-    // if a countdown clock, then this will force it to stop at 0
+    /** If this is a countdown clock, the timer will start `now()` and count down to 0 when it reaches the `targetDateTime`) */
     countdown: {
       type: Boolean,
       required: false,

package/src/components/BaseUnitToggle/BaseUnitToggle.stories.js

@@ -2,22 +2,7 @@ import BaseUnitToggle, { unitPairs } from './BaseUnitToggle.vue'
 
 export default {
   title: 'Components/Base/BaseUnitToggle',
-  component: BaseUnitToggle,
-  argTypes: {
-    unitPair: {
-      control: { type: 'select', options: Object.keys(unitPairs) }
-    },
-    valueSystem: {
-      description: 'The system of measurement that corresponds with the provided `value`',
-      control: { type: 'select', options: ['imperial', 'metric'] }
-    },
-    value: {
-      description: 'The initial value to be converted'
-    },
-    secondValue: {
-      description: 'Manually override the converted value'
-    }
-  }
+  component: BaseUnitToggle
 }
 
 const BaseUnitToggleTemplate = (args) => ({

package/src/components/BaseUnitToggle/BaseUnitToggle.vue

@@ -157,18 +157,22 @@ export default defineComponent({
       required: true,
       validator: (val: UnitName): boolean => Boolean(unitPairs[val])
     },
+    /** The initial value to be converted */
     value: {
       type: Number as PropType<number>,
       required: true
     },
+    /** Manually override the converted value */
     secondValue: {
       type: Number as PropType<number>,
       required: false
     },
+    /** The system of measurement that corresponds with the provided `value` */
     valueSystem: {
       type: String as PropType<UnitSystemName>,
       required: true
     },
+    /** If value and unit should appear on the same line */
     inline: {
       type: Boolean,
       default: false

package/src/components/BaseVideo/BaseVideo.vue

@@ -41,7 +41,8 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { VideoObject } from './../../interfaces'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 
 export default defineComponent({
@@ -50,10 +51,13 @@ export default defineComponent({
     BaseImagePlaceholder
   },
   props: {
+    /** Video data object */
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<VideoObject>,
+      required: false,
+      default: undefined
     },
+    /** If video should autoplay */
     autoplay: {
       type: Boolean,
       default: false

package/src/components/BlockAccordion/BlockAccordion.stories.js

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

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import type { AccordionItemObject, ImageBlock, ImageObject } from '../../interfaces'
+import type { AccordionItemObject, ImageBlock, ImageObject, HeadingLevels } from '../../interfaces'
 import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
 import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
 import BlockText from './../BlockText/BlockText.vue'
@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<BlockAccordionProps>(), {
 
 const { data } = reactive(props)
 
-const headingLevel = computed(() => {
-  return data ? `h${data?.accordionItemsHeadingLevel}` : undefined
+const headingLevel = computed((): HeadingLevels | undefined => {
+  return data ? (`h${data?.accordionItemsHeadingLevel}` as HeadingLevels) : undefined
 })
 
 const remappedAccordionItems = computed((): AccordionItemObject[] | undefined => {

package/src/components/BlockAudio/BlockAudio.stories.js

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

package/src/components/BlockAudio/BlockAudio.vue

@@ -41,12 +41,19 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { BlockData, ImageObject } from './../../interfaces.ts'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseAudio from './../BaseAudio/BaseAudio.vue'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 
+export interface BlockAudioData extends BlockData {
+  thumbnailImage: ImageObject
+  uploadedMedia: {
+    file: string
+  }
+}
 export default defineComponent({
   name: 'BlockAudio',
   components: {
@@ -57,8 +64,9 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
-      required: false
+      type: Object as PropType<BlockAudioData>,
+      required: false,
+      default: undefined
     }
   }
 })

package/src/components/BlockCardGrid/BlockCardGrid.stories.js

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

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -41,7 +41,7 @@ import type { ImageObject, LinkObject } from '../../interfaces'
 import BlockCardGridItem from './../BlockCardGridItem/BlockCardGridItem.vue'
 import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
 
-interface CardGridItem {
+export interface CardGridItem {
   title: string
   label: string
   description: string

package/src/components/BlockCardGridItem/BlockCardGridItem.stories.js

@@ -3,7 +3,7 @@ import BlockCardGridItem from './BlockCardGridItem.vue'
 export default {
   title: 'Components/Cards/BlockCardGridItem',
   component: BlockCardGridItem,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'cards'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="lg:w-1/3"><story/></div>`

package/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js

@@ -4,19 +4,12 @@ import BlockCircleImageCard from './BlockCircleImageCard.vue'
 export default {
   title: 'Components/Cards/BlockCircleImageCard',
   component: BlockCircleImageCard,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'cards'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="relative max-w-xl mx-auto container"><story/></div>`
     })
   ],
-  argTypes: {
-    imageOnRight: {
-      control: {
-        type: 'boolean'
-      }
-    }
-  },
   parameters: {
     html: { root: '#storyRoot' },
     slots: {

package/src/components/BlockCsrTable/BlockCsrTable.stories.js

@@ -3,6 +3,7 @@ import BlockCsrTable from './BlockCsrTable.vue'
 export default {
   title: 'Components/FeatureFlags/BlockCsrTable',
   component: BlockCsrTable,
+  tags: ['!autodocs', 'wagtail-blocks', 'feature-flag'],
   excludeStories: /.*Data$/
 }
 

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -34,7 +34,7 @@ export interface ExportPackageRate {
   Fluence: string
   Energy: string
 }
-interface BlockCsrTableRow {
+export interface BlockCsrTableRow {
   Id: number
   TestRecordId: number
   Attachment: string

package/src/components/BlockCta/BlockCta.stories.js

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

package/src/components/BlockCta/BlockCta.vue

@@ -26,12 +26,19 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
+import type { BlockData, PageObject } from './../../interfaces.ts'
 import { useThemeStore } from '../../store/theme'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import IconExternal from './../Icons/IconExternal.vue'
 
+export type BlockCtaData = BlockData & {
+  page: PageObject
+  text: string
+  externalLink: string
+}
+
 export default defineComponent({
   name: 'BlockCta',
   components: {
@@ -40,7 +47,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
+      type: Object as PropType<BlockCtaData>,
       required: true,
       default: () => ({})
     }

package/src/components/BlockDialog/BlockDialog.stories.js

@@ -1,8 +1,9 @@
 import BlockDialog from './BlockDialog.vue'
 
 export default {
-  title: 'Components/Blocks/BlockDialog',
+  title: 'Components/Utilities/BlockDialog',
   component: BlockDialog,
+  tags: ['!autodocs', 'deprecated'],
   argTypes: {
     overlayClose: { control: { type: 'boolean' } }
   }

package/src/components/BlockGist/BlockGist.stories.js

@@ -3,10 +3,11 @@ import BlockGist from './BlockGist.vue'
 export default {
   title: 'Components/Blocks/BlockGist',
   component: BlockGist,
+  tags: ['wagtail-blocks'],
   excludeStories: /.*Data$/
 }
 
-export const BlockGistData = {
+export const BlockGistStoryData = {
   blockType: 'GitHubGistBlock',
   caption: '<p>Caption for gist block</p>',
   id: 'cefc8e20-2833-4d0b-a4d6-7f469d5dbd02',
@@ -17,6 +18,6 @@ export const BlockGistData = {
 export const BaseStory = {
   name: 'BlockGist',
   args: {
-    data: BlockGistData
+    data: BlockGistStoryData
   }
 }

package/src/components/BlockGist/BlockGist.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import type { BlockData } from './../../interfaces.ts'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import GitHub404 from './GitHub404.vue'
+
+export interface BlockGistData extends BlockData {
+  caption?: string
+  id?: string
+  url?: string
+}
 interface BlockGistProps {
-  data: {
-    blockType?: string
-    caption?: string
-    id?: string
-    url?: string
-  }
+  data: BlockGistData
 }
 
 const props = defineProps<BlockGistProps>()

package/src/components/BlockHeading/BlockHeading.stories.js

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

package/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js

@@ -3,6 +3,7 @@ import BlockIframeEmbed from './BlockIframeEmbed.vue'
 export default {
   title: 'Components/Blocks/BlockIframeEmbed',
   component: BlockIframeEmbed,
+  tags: ['wagtail-blocks'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="mx-auto max-w-screen-md"><story/></div>`

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -47,18 +47,25 @@
   </div>
 </template>
 <script lang="ts">
-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 BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 
+export type BlockIframeEmbedData = BlockData & {
+  caption: string
+  title: string
+  url: string
+  height?: number
+}
 export default defineComponent({
   name: 'BlockIframeEmbed',
   components: { BaseImageCaption, BaseImagePlaceholder },
   props: {
     data: {
-      type: Object,
+      type: Object as PropType<BlockIframeEmbedData>,
       default: undefined
     }
   },

package/src/components/BlockImage/BlockImage.stories.js

@@ -3,11 +3,7 @@ import BlockImage from './BlockImage.vue'
 export default {
   title: 'Components/Blocks/BlockImage',
   component: BlockImage,
-  argTypes: {
-    fullBleed: {
-      control: { type: 'boolean' }
-    }
-  },
+  tags: ['autodocs', 'wagtail-blocks'],
   excludeStories: /.*Data$/,
   parameters: {
     docs: {

package/src/components/BlockImage/BlockImage.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+/** The combination of BaseImage and BaseImageCaption, plus adding support for expanding the image in a lightbox and styling it to be a full-bleed image. */
+import { defineComponent, type PropType } from 'vue'
+import type { ImageBlock } from './../../interfaces'
 import BlockImageStandard from './BlockImageStandard.vue'
 import BlockImageFullBleed from './BlockImageFullBleed.vue'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
@@ -13,9 +15,10 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
+      type: Object as PropType<ImageBlock>,
       required: false
     },
+    /** If image should be the full width of the container */
     fullBleed: {
       type: Boolean,
       required: false,

package/src/components/BlockImageCarousel/BlockImageCarousel.stories.js

@@ -3,24 +3,12 @@ import BlockImageCarousel from './BlockImageCarousel.vue'
 export default {
   title: 'Components/Blocks/BlockImageCarousel',
   component: BlockImageCarousel,
+  tags: ['autodocs', 'wagtail-blocks', 'carousels'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="container"><story/></div>`
     })
   ],
-  argTypes: {
-    blockId: {
-      text: { type: 'string' },
-      required: false,
-      description:
-        'Fancybox: the block id is used to differentiate the fancybox of this carousel from others on the page. Generated by Wagtail.'
-    },
-    showTitle: {
-      text: { type: 'string' },
-      required: false,
-      description: "Fancybox: if image titles should be displayed in the carousel's fancybox"
-    }
-  },
   parameters: {
     html: {
       root: '#storyRoot'

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -101,10 +101,12 @@ export default defineComponent({
       type: Number,
       required: false
     },
+    /** Fancybox: the block id is used to differentiate the fancybox of this carousel from others on the page. Generated by Wagtail. */
     blockId: {
       type: String,
       required: false
     },
+    /** Fancybox: if image titles should be displayed in the carousel's fancybox */
     showTitle: {
       type: Boolean,
       required: false,

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js

@@ -8,20 +8,6 @@ export default {
       template: `<div id="storyRoot" class="container mx-auto"><story/></div>`
     })
   ],
-  argTypes: {
-    blockId: {
-      text: { type: 'string' },
-      required: false,
-      description:
-        'Fancybox: the block id is used to differentiate the fancybox of the items in a carousel from other carousels on the page. Generated by Wagtail. Usually provided by parent component `BlockImageCarousel`.'
-    },
-    showTitle: {
-      text: { type: 'string' },
-      required: false,
-      description:
-        "Fancybox: if the image title should be displayed in the item's fancybox. Usually provided by parent component `BlockImageCarousel`."
-    }
-  },
   parameters: {
     html: {
       root: '#storyRoot'

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue

@@ -41,7 +41,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -58,26 +58,26 @@ export default defineComponent({
   },
   props: {
     image: {
-      type: Object,
+      type: Object as PropType<ImageObject>,
       required: true,
       default: () => ({})
     },
-    // if a caption should even be visible
+    /** If caption should be visible */
     displayCaption: {
       type: Boolean,
       default: true
     },
-    // overrides caption provided with image model
+    /** Overrides caption provided by `{ImageObject}` */
     caption: {
       type: String,
       required: false
     },
-    // used to differentiate the fancybox of this carousel from others on the page; generated by Wagtail
+    /** 'Fancybox: the block id is used to differentiate the fancybox of the items in a carousel from other carousels on the page. Generated by Wagtail. Usually provided by parent component `BlockImageCarousel`.' */
     blockId: {
       type: String,
       required: false
     },
-    // if image titles should be displayed in the carousel's fancybox
+    /** Fancybox: if the image title should be displayed in the item's fancybox. Usually provided by parent component `BlockImageCarousel`. */
     showTitle: {
       type: Boolean,
       required: false,
@@ -108,7 +108,7 @@ export default defineComponent({
       }
       return null
     },
-    hasCaptionArea(): string | boolean {
+    hasCaptionArea(): string | boolean | undefined {
       if (this.image) {
         return this.theCaption || this.image.credit || this.image.detailUrl
       }

package/src/components/BlockImageComparison/BlockImageComparison.stories.js

@@ -3,6 +3,7 @@ import BlockImageComparison from './BlockImageComparison.vue'
 export default {
   title: 'Components/Blocks/BlockImageComparison',
   component: BlockImageComparison,
+  tags: ['wagtail-blocks'],
   decorators: [
     () => ({
       template: `<div id="storyRoot" class="container mx-auto"><story/></div>`
@@ -41,6 +42,7 @@ export const BlockImageComparisonData = {
 export const BaseStory = {
   name: 'BlockImageComparison',
   args: {
-    data: BlockImageComparisonData
+    data: BlockImageComparisonData,
+    customDetailUrl: 'https://www.google.com'
   }
 }