@explorer-1/vue 0.3.6 → 0.3.7

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { BlockData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import type { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 
 export default defineComponent({
@@ -31,7 +31,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Array as PropType<BlockData[]>,
+      type: Array as PropType<BlockVideoEmbedData[]>,
       required: false
     }
   }

package/src/components/LogoCaltech/LogoCaltech.stories.js

@@ -5,18 +5,13 @@ export default {
   component: LogoCaltech,
   argTypes: {
     size: {
+      description: 'Use TailwindCSS text size classes to control the size of the logo',
       control: {
-        type: 'select',
-        options: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
-      }
+        type: 'select'
+      },
+      options: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
     }
   },
-  decorators: [
-    () => ({
-      template: `<div class="inline-block" :class="'bg-white '"><story/></div>`,
-      props: ['size', 'invert']
-    })
-  ],
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'docs',
@@ -26,14 +21,15 @@ export default {
           'The Caltech logo as an SVG. Size and color can be specified via tailwind text classes. This will only work with inlined SVG. This will not work when rendering the svg file via an `<img />` element.'
       }
     }
-  }
+  },
+  // render function to apply arbitrary args
+  render: (args) => ({
+    components: { LogoCaltech },
+    setup() {
+      return { args }
+    },
+    template: '<LogoCaltech :class="args.size" />'
+  })
 }
-const LogoCaltechComponentTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { LogoCaltech },
-  template: `<LogoCaltech :class="size" />`
-})
 
-export const BaseStory = LogoCaltechComponentTemplate.bind({})
-BaseStory.storyName = 'LogoCaltech' // single story hoisting
-BaseStory.args = { size: 'text-base' }
+export const BaseStory = { args: { size: 'text-base' } }

package/src/components/LogoCaltech/LogoCaltech.vue

@@ -16,6 +16,7 @@
   </svg>
 </template>
 <script lang="ts">
+/** The Caltech logo as an SVG. Size and color can be specified via tailwind text classes. This will only work with inlined SVG. This will not work when rendering the svg file via an `<img />` element. */
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LogoCaltech'

package/src/components/LogoTribrand/LogoTribrand.stories.js

@@ -1,5 +1,3 @@
-import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
-import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import LogoTribrand from './LogoTribrand.vue'
 
 export default {
@@ -14,64 +12,81 @@ export default {
           'Combines JPL, NASA and Caltech in a single logo as an SVG. Tailwind text size classes can be used with inlined SVG (first example), but not when loading the svg file via an `<img />` element'
       }
     }
-  }
+  },
+  render: (args) => ({
+    components: { LogoTribrand },
+    setup() {
+      return { args }
+    },
+    template: `<div :class="args.invert ? 'bg-black ' : 'bg-white '"><LogoTribrand :class="args.size" :invert="args.invert" /></div>`
+  })
 }
-const LogoTribrandComponentTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { LogoTribrand },
-  template: `<LogoTribrand :class="size" :invert="invert" />`
-})
-
-const LogoTribrandImageTemplate = (args) => ({
-  props: Object.keys(args),
-  components: {},
-  template: `<img :src="src" alt="Logo Image" />`
-})
 
-export const BaseStory = LogoTribrandComponentTemplate.bind({})
-BaseStory.storyName = 'Logo Inline SVG'
-BaseStory.args = { invert: false, size: 'text-base' }
-BaseStory.argTypes = {
-  size: {
-    control: {
-      type: 'select',
+export const BaseStory = {
+  name: 'Logo Inline SVG',
+  args: { invert: false, size: 'text-base' },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select'
+      },
+      description: 'Use TailwindCSS text size classes to control the size of the logo',
       options: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
-    }
-  },
-  invert: {
-    control: {
-      type: 'boolean'
+    },
+    invert: {
+      control: {
+        type: 'boolean'
+      }
     }
   }
 }
-BaseStory.decorators = [
-  () => ({
-    template: `<div class="inline-block" :class="invert ? 'bg-black ' : 'bg-white '"><story/></div>`,
-    props: ['size', 'invert']
-  })
-]
 
-export const LogoImageColor = LogoTribrandImageTemplate.bind({})
-LogoImageColor.args = { src: LogoColor }
-LogoImageColor.parameters = {
-  docs: {
-    description: {
-      story: 'Demo of using an `<img />` element to render the .svg file'
+export const LogoImageColor = {
+  args: { src: '/explorer-1/images/svg/logo-tribrand-color.svg' },
+  argTypes: {
+    src: {
+      control: false
+    },
+    invert: {
+      control: false
     }
-  }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demo of using an `<img />` element to render the .svg file'
+      }
+    }
+  },
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    template: `<img :src="args.src" alt="Logo as Image" />`
+  })
 }
 
-export const LogoImageWhite = LogoTribrandImageTemplate.bind({})
-LogoImageWhite.args = { src: LogoWhite }
-LogoImageWhite.parameters = {
-  docs: {
-    description: {
-      story: 'Demo of using an `<img />` element to render the .svg file'
+export const LogoImageWhite = {
+  args: { src: '/explorer-1/images/svg/logo-tribrand-white.svg' },
+  argTypes: {
+    src: {
+      control: false
+    },
+    invert: {
+      control: false
     }
-  }
-}
-LogoImageWhite.decorators = [
-  () => ({
-    template: `<div class="inline-block bg-black"><story/></div>`
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demo of using an `<img />` element to render the .svg file'
+      }
+    }
+  },
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    template: `<div class="bg-black"><img :src="args.src" alt="Logo as Image" /></div>`
   })
-]
+}

package/src/components/LogoTribrand/LogoTribrand.vue

@@ -53,12 +53,14 @@
   </svg>
 </template>
 <script lang="ts">
+/** Combines JPL, NASA and Caltech in a single logo as an SVG. Tailwind text size classes can be used with inlined SVG (first example), but not when loading the svg file via an `<img />` element */
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LogoTribrand',
   props: {
-    // The -transparent class on NavDesktop takes care of this -- don't use the prop in this case
-    // Prop should be used when the logo needs to be manually inverted for use somewhere else
+    /** For use when the logo needs to be manually inverted. Note that NavDesktop takes care of this automatically and this prop doesn't need to be used in that specific case.
+     * Only works when using an inline svg
+     */
     invert: {
       type: Boolean,
       default: false

package/src/components/MetaPanel/MetaPanel.stories.js

@@ -3,20 +3,16 @@ import MetaPanel from './MetaPanel.vue'
 export default {
   title: 'Components/Utilities/MetaPanel',
   component: MetaPanel,
-  tags: ['!autodocs'],
+  tags: [],
   decorators: [
     () => ({
       template: `<div><div class="h-40 w-full max-w-screen-3xl mx-auto bg-gray-dark"><p class="text-white">Dark background for demo purposes only and not part of the component.</p></div><div id="storyRoot"><story/></div><div class="h-40 w-full max-w-screen-3xl mx-auto bg-gray-dark"><p class="text-white">Dark background for demo purposes only and not part of the component.</p></div></div>`
     })
   ],
   parameters: {
-    layout: 'fullscreen'
-  },
-  argTypes: {
-    theme: {
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'stars']
+    layout: 'fullscreen',
+    html: {
+      root: '#storyRoot'
     }
   }
 }

package/src/components/MetaPanel/MetaPanel.vue

@@ -14,6 +14,7 @@ import MetaPanelAccordion from './../MetaPanelAccordion/MetaPanelAccordion.vue'
 import MetaPanelItems from './../MetaPanelItems/MetaPanelItems.vue'
 
 interface MetaPanelProps {
+  /** Text for button that expands the panel */
   button?: string
   theme?: MetaPanelTheme
   primarySubject?: EduResourcesSubject
@@ -21,7 +22,9 @@ interface MetaPanelProps {
   gradeLevels?: EduResourcesGradeLevel[]
   time?: EduResourcesTime
   standards?: EduResourceStandardItem[]
+  /** If the top of the panel should overlay the area above it */
   negativeTop?: boolean
+  /** If the bottom of the panel should overlay the area below it */
   negativeBottom?: boolean
 }
 

package/src/components/MetaPanelItems/MetaPanelItems.stories.js

@@ -1,9 +1,16 @@
 import MetaPanelItems from './MetaPanelItems.vue'
 
 export default {
-  title: 'Components/Utilities/MetaPanelItems',
+  title: 'Components/Utilities/MetaPanel/MetaPanelItems',
   component: MetaPanelItems,
-  tags: ['!autodocs']
+  tags: [],
+  parameters: {
+    docs: {
+      description: {
+        component: 'The metadata that should be displayed within `MetaPanel`'
+      }
+    }
+  }
 }
 
 // stories

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/** The metadata that should be displayed within `MetaPanel` */
 import { computed, reactive } from 'vue'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 import {
@@ -13,6 +14,7 @@ import IconProfile from './../Icons/IconProfile.vue'
 import IconTime from './../Icons/IconTime.vue'
 
 interface MetaPanelProps {
+  /** Select color scheme */
   theme?: MetaPanelTheme
   primarySubject?: EduResourcesSubject
   additionalSubjects?: EduResourcesSubject[]

package/src/components/MetadataEduResource/MetadataEduResource.stories.js

@@ -3,16 +3,17 @@ import MetadataEduResource from './MetadataEduResource.vue'
 export default {
   title: 'Components/Utilities/MetadataEduResource',
   component: MetadataEduResource,
-  tags: ['!autodocs'],
-  argTypes: {
-    variant: {
-      type: { name: 'string', required: false },
-      control: { type: 'select' },
-      options: ['primary', 'secondary']
-    }
-  },
+  tags: ['cards'],
   globals: { theme: 'ThemeEdu' },
-  excludeStories: /.*Data$/
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A row of metadata icons and text that displays key information about a post. Specifically for use with ThemeEdu'
+      }
+    }
+  }
 }
 
 // data
@@ -56,6 +57,7 @@ export const MultipleGradeLevels = {
         time: 'Under 30 mins'
       }
     },
-    variant: 'secondary'
+    variant: 'secondary',
+    showTime: true
   }
 }

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
+/** A row of metadata icons and text that displays key information about a post. Specifically for use with ThemeEdu */
+
 import { computed } from 'vue'
-import type { EduResourceCardObject } from './../../interfaces.ts'
+import type { EduResourceCardObject, MetaPanelTheme } from './../../interfaces.ts'
 import EduSubjectIcon from './../EduSubjectIcon/EduSubjectIcon.vue'
 import IconProfile from './../Icons/IconProfile.vue'
 import IconTime from './../Icons/IconTime.vue'
-import {} from './../../utils/mixins'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 
 interface MetadataEduResourceProps {
   resource: EduResourceCardObject
+  /** If compact styling should be used */
   compact?: boolean
-  variant?: string
+  /** Use primary or secondary theme colors */
+  variant?: MetaPanelTheme
+  /** If time commitment should be displayed */
   showTime?: boolean
 }
 

package/src/components/MetadataEvent/MetadataEvent.stories.js

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

package/src/components/MissionDetailAbout/MissionDetailAbout.vue

@@ -45,7 +45,7 @@ import type { PropType } from 'vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BlockText from './../BlockText/BlockText.vue'
 
-interface Instrument {
+export interface Instrument {
   id: string
   instrument: string
 }

package/src/components/MissionDetailHighlights/MissionDetailHighlights.stories.js

@@ -9,6 +9,7 @@ import MissionDetailHighlights from './MissionDetailHighlights.vue'
 export default {
   title: 'Components/WWW/MissionDetail/MissionHighlights',
   component: MissionDetailHighlights,
+  tags: ['carousels'],
   parameters: {
     viewMode: 'canvas'
   },

package/src/components/MissionDetailInlineImage/MissionDetailInlineImage.stories.js

@@ -3,12 +3,7 @@ import MissionDetailInlineImage from './MissionDetailInlineImage.vue'
 
 export default {
   title: 'Components/WWW/MissionDetail/MissionDetailInlineImage',
-  component: MissionDetailInlineImage,
-  argTypes: {
-    alignTo: {
-      control: { type: 'select', options: ['left', 'right'] }
-    }
-  }
+  component: MissionDetailInlineImage
 }
 
 const MissionDetailInlineImageData = {

package/src/components/MissionDetailInlineImage/MissionDetailInlineImage.vue

@@ -45,7 +45,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { ImageObject } from './../../interfaces.ts'
 import { mixinGetSrcSet } from '../../utils/mixins'
 import BlockText from './../BlockText/BlockText.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -61,18 +62,22 @@ export default defineComponent({
     BaseImageCaption
   },
   props: {
+    /** Which side should the image be aligned to? */
     alignment: {
-      type: String,
+      type: String as PropType<'left' | 'right'>,
       required: false,
       default: 'right'
     },
+    /** Supports rich text */
     text: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     image: {
-      type: Object,
-      required: false
+      type: Object as PropType<ImageObject>,
+      required: false,
+      default: undefined
     }
   },
   computed: {

package/src/components/MissionDetailStats/DistanceStats.vue

@@ -118,9 +118,9 @@ export const supportedAPIPaths = {
     }
   }
 } as const
-type SupportedAPI = keyof typeof supportedAPIPaths
+export type SupportedAPI = keyof typeof supportedAPIPaths
 type SPICEAPIConfig = (typeof supportedAPIPaths)['/spice_data/getRangefromT1/']
-const supportedPaths = Object.keys(supportedAPIPaths) as SupportedAPI[]
+export const supportedPaths = Object.keys(supportedAPIPaths) as SupportedAPI[]
 
 // Normally this should just be `number`, but due to our usage of `@types/node`
 // we need to define this in a way that is compatible with both Node and browser code.
@@ -141,7 +141,10 @@ export default defineComponent({
       required: true,
       validator: (val: string): boolean => val === '' || Object.keys(distanceTypes).includes(val)
     },
-    value: Number,
+    value: {
+      type: Number,
+      default: undefined
+    },
     valueSystem: {
       type: String as PropType<UnitSystemName>,
       required: false,
@@ -150,9 +153,11 @@ export default defineComponent({
     distanceApiUrls: {
       type: String,
       required: false,
-      validator: (val: string): boolean => supportedPaths.some((p) => val.includes(p) || val === '')
+      validator: (val: string): boolean =>
+        supportedPaths.some((p) => val.includes(p) || val === ''),
+      default: undefined
     },
-    labelClass: String
+    labelClass: { type: String, default: undefined }
   },
   data(): {
     apiDistance: APIDistance | null

package/src/components/MissionDetailStats/MissionDetailStats.stories.js

@@ -1,7 +1,6 @@
-import MissionDetailStats, { statuses, clockTypes } from './MissionDetailStats.vue'
+import MissionDetailStats from './MissionDetailStats.vue'
 import MissionDetailStatsMini from './MissionDetailStatsMini.vue'
 import MissionDetailStatsMicro from './MissionDetailStatsMicro.vue'
-import { distanceTypes } from './DistanceStats.vue'
 
 export default {
   title: 'Components/WWW/MissionDetail/MissionDetailStats',
@@ -17,23 +16,7 @@ export default {
       root: '#storyRoot'
     }
   },
-  excludeStories: /.*(Data)$/,
-  argTypes: {
-    status: {
-      control: { type: 'select' },
-      options: Object.keys(statuses)
-    },
-    clockType: {
-      control: { type: 'select' },
-      options: Object.keys(clockTypes)
-    },
-    distanceType: {
-      control: {
-        type: 'select'
-      },
-      options: Object.keys(distanceTypes).concat([''])
-    }
-  }
+  excludeStories: /.*(Data)$/
 }
 
 export const MissionDetailStatsData = {

package/src/components/MissionDetailStats/MissionDetailStats.vue

@@ -75,7 +75,7 @@
 // @ts-nocheck
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import DistanceStats from './DistanceStats.vue'
+import DistanceStats, { supportedPaths } from './DistanceStats.vue'
 import type { DistanceType } from './DistanceStats.vue'
 import BaseTimer from './../BaseTimer/BaseTimer.vue'
 
@@ -110,15 +110,22 @@ export default defineComponent({
   },
   props: {
     showClock: Boolean,
+    /** Select the type of clock. This will change the text of the labels and how the count functions */
     clockType: {
       type: String as PropType<ClockType>,
       required: true,
       validator: (val: ClockType): boolean => Boolean(clockTypes[val])
     },
-    startDateTime: String,
+    startDateTime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /** Launch date */
     displayDate: {
       type: String || null,
-      required: false
+      required: false,
+      default: undefined
     },
     missionTypes: {
       type: Array as PropType<{ missionType: string }[]>,
@@ -135,14 +142,23 @@ export default defineComponent({
       required: true,
       validator: (val: Status): boolean => Boolean(statuses[val])
     },
+    /** If distance should be displayed with the stats */
     showDistance: Boolean,
     distanceType: {
       type: String as PropType<DistanceType | ''>,
       required: false,
       default: ''
     },
-    distanceValue: Number,
-    distanceApiUrls: String
+    distanceValue: {
+      type: Number,
+      default: undefined
+    },
+    /** Used with `DistanceStats`. Only `/spice_data/getRangefromT1/` or `/api/v1/missions/` paths are supported. */
+    distanceApiUrls: {
+      type: String,
+      default: undefined,
+      validator: (val: string): boolean => supportedPaths.some((p) => val.includes(p) || val === '')
+    }
   },
   computed: {
     clockTypeLabel(): string {

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue

@@ -46,6 +46,7 @@
 
 <script lang="ts">
 // @ts-nocheck
+import type { StreamfieldBlockData } from './../../interfaces.ts'
 import MissionDetailInlineImage from './../MissionDetailInlineImage/MissionDetailInlineImage.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BlockQuote from './../BlockQuote/BlockQuote.vue'
@@ -63,8 +64,9 @@ export default {
   },
   props: {
     data: {
-      type: Array,
-      required: false
+      type: Array as () => StreamfieldBlockData[],
+      required: false,
+      default: undefined
     }
   }
 }

package/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts

@@ -3,6 +3,13 @@ import MixinAnimationCaret from './MixinAnimationCaret.vue'
 export default {
   title: 'Mixins/MixinAnimationCaret',
   component: MixinAnimationCaret,
+  argTypes: {
+    color: {
+      control: {
+        type: 'text'
+      }
+    }
+  },
   parameters: {
     slots: {
       default: 'BaseStory slot content'