@explorer-1/vue 0.3.4 → 0.3.7

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 = {

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
     }
   }
 })