@explorer-1/vue 0.3.4 → 0.3.7

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -178,7 +178,7 @@
         <div
           v-if="!large"
           class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
-          :class="metadataAttrs ? `text-${metadataAttrs.icons}` : 'text-primary'"
+          :class="metadataAttrs ? `text-${metadataAttrs.icons}` : 'text-action'"
         >
           <IconArrow />
         </div>
@@ -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,25 +5,15 @@ import BlockLinkTile from './BlockLinkTile.vue'
 export default {
   title: 'Components/Cards/BlockLinkTile',
   component: BlockLinkTile,
+  tags: ['cards'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
+      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: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

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

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'
   },