@explorer-1/vue 0.3.4 → 0.3.7

package/src/components/BasePill/BasePill.vue

@@ -1,36 +1,53 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { Attributes } from './../../interfaces'
+import type { ContentTypeKey } from './../../interfaces.ts'
 import { eduMetadataDictionary } from './../../constants'
 
 // using borders to vertically center wonky font face
-const variantMap: Attributes = {
+const variantMap = {
   primary: 'bg-primary border-primary',
   'primary-inverted': 'bg-gray-light-mid !text-primary-darker border-gray-light-mid',
   secondary: 'bg-secondary border-secondary',
   action: 'bg-action border-action'
-}
+} as const
+type VariantMapKey = keyof typeof variantMap
 
-const sizeMap: Attributes = {
+const sizeMap = {
   sm: 'text-xs border-t-2 py-1 px-2.5',
   md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
   lg: 'text-base lg:text-lg border-t pt-1.5 pb-1 px-5'
-}
+} as const
+type SizeMapKey = keyof typeof sizeMap
 
-interface BasePillProps {
-  text?: string
-  variant?: string
-  size?: string
-  contentType?: string
-  invert?: boolean
-}
-
-// define props
-const props = withDefaults(defineProps<BasePillProps>(), {
-  variant: 'primary',
-  size: 'md',
-  contentType: undefined,
-  invert: false
+const props = defineProps({
+  /**
+   * The text contained in the pill. Plain text only.
+   */
+  text: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The variant (color) of the pill
+   */
+  variant: {
+    type: String as () => VariantMapKey,
+    default: 'primary'
+  },
+  /**
+   * The size of the pill
+   */
+  size: {
+    type: String as () => SizeMapKey,
+    default: 'md'
+  },
+  /**
+   * Maps to EDU Resource types. Must use `ThemeEdu` to affect color.
+   */
+  contentType: {
+    type: String as () => ContentTypeKey,
+    default: undefined
+  }
 })
 
 const metadataType = computed(() => {

package/src/components/BasePlaceholder/BasePlaceholder.stories.js

@@ -4,18 +4,16 @@ export default {
   title: 'Components/Base/BasePlaceholder',
   component: BasePlaceholder,
   excludeStories: /.*Data$/,
+  tags: ['autodocs', 'listings'],
   parameters: {
     docs: {
       description: {
-        component: `An animated loading component frequently used as a placeholder for <a href="/story/components-search-searchresultcard--standard-result" target="_blank">SearchResultCard</a>`
+        component:
+          'An animated loading component frequently used as a placeholder for <a href="/story/components-search-searchresultcard--standard-result" target="_blank">SearchResultCard</a>'
       }
     }
   }
 }
-
-// shared data
-const BasePlaceholderData = {}
-
 // templates
 const BasePlaceholderTemplate = (args) => ({
   props: Object.keys(args),
@@ -24,5 +22,4 @@ const BasePlaceholderTemplate = (args) => ({
 })
 
 export const BaseStory = BasePlaceholderTemplate.bind({})
-BaseStory.storyName = 'BasePlaceholder' // single story hoisting
-BaseStory.args = { ...BasePlaceholderData }
+BaseStory.storyName = 'BasePlaceholder'

package/src/components/BasePlaceholder/BasePlaceholder.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-
+/** An animated loading component frequently used as a placeholder for <a href="/story/components-search-searchresultcard--standard-result" target="_blank">SearchResultCard</a> */
 export default defineComponent({
   name: 'BasePlaceholder'
 })

package/src/components/BaseRadioGroup/BaseRadioGroup.stories.js

@@ -3,6 +3,7 @@ import BaseRadioGroup from './BaseRadioGroup.vue'
 export default {
   title: 'Components/Base/BaseRadioGroup',
   component: BaseRadioGroup,
+  tags: ['autodocs', 'forms'],
   parameters: {
     docs: {
       description: {

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

@@ -5,9 +5,14 @@ export default {
   component: BaseTimer,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="w-full"><story/></div>`
+      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$/
 }
 
@@ -70,5 +70,7 @@ export const BlockAccordionData = {
 // stories
 export const BaseStory = {
   name: 'BlockAccordion',
-  args: { data: BlockAccordionData }
+  args: {
+    data: BlockAccordionData
+  }
 }

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,15 +3,15 @@ import BlockCardGridItem from './BlockCardGridItem.vue'
 export default {
   title: 'Components/Cards/BlockCardGridItem',
   component: BlockCardGridItem,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'cards'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="lg:w-1/3"><story/></div>`
+      template: `<div id="storyRoot" class="lg:w-1/3"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockCardGridItem/BlockCardGridItemElement.vue

@@ -26,7 +26,7 @@
     </div>
     <div class="px-6 py-6 ThemeVariantLight">
       <template v-if="label">
-        <div class="text-primary text-subtitle">
+        <div class="text-primary text-subtitle internal:text-black">
           {{ label }}
         </div>
         <hr

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

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

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,14 +3,15 @@ import BlockIframeEmbed from './BlockIframeEmbed.vue'
 export default {
   title: 'Components/Blocks/BlockIframeEmbed',
   component: BlockIframeEmbed,
+  tags: ['wagtail-blocks'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="mx-auto max-w-screen-md"><story/></div>`
+      template: `<div id="storyRoot" class="mx-auto max-w-screen-md"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

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