@explorer-1/vue 0.3.3 → 0.3.6

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js

@@ -5,7 +5,7 @@ export default {
   component: BaseImagePlaceholder,
   excludeStories: /.*Data$/,
   decorators: () => ({
-    template: '<div class="w-2/3"><story /></div>'
+    template: '<div id="storyRoot" class="w-3/4"><story /></div>'
   }),
   tags: ['autodocs'],
   parameters: {
@@ -16,6 +16,9 @@ export default {
         template: `<BaseImage :object-fit-class="args.BaseImageProps.objectFitClass" :loading="args.BaseImageProps.loading" :src="args.BaseImageProps.src" :srcset="args.BaseImageProps.srcset" :alt="args.BaseImageProps.alt" :width="args.BaseImageProps.width" :height="args.BaseImageProps.height" />`
       }
     },
+    html: {
+      root: '#storyRoot'
+    },
     docs: {
       description: {
         component:
@@ -29,6 +32,8 @@ export default {
       options: Object.keys(aspectRatios)
     },
     responsiveAspectRatio: {
+      description:
+        'Custom tailwind classes to combine screen-size directives with aspect ratios. Example: `md:aspect-ratio-four-three lg:aspect-ratio-twelve-nine`. Overrides `aspectRatio` setting.',
       control: { type: 'text' }
     }
   }
@@ -38,7 +43,8 @@ export default {
 export const BaseImagePlaceholderData = {
   aspectRatio: '12:9',
   darkMode: true,
-  transparentMode: false
+  transparentMode: false,
+  noLogo: false
 }
 
 export const WithImage = {
@@ -60,6 +66,7 @@ export const BaseStory = {
   name: 'No Image',
   args: {
     ...BaseImagePlaceholderData,
+
     BaseImageProps: {
       src: '',
       srcset: '',
@@ -68,6 +75,10 @@ export const BaseStory = {
       height: '',
       objectFitClass: 'scaleDown',
       loading: ''
-    }
+    },
+
+    noLogo: true,
+    aspectRatio: '16:9',
+    responsiveAspectRatio: 'md:aspect-ratio-four-three lg:aspect-ratio-twelve-nine'
   }
 }

package/src/components/BaseLink/BaseLink.stories.js

@@ -4,13 +4,58 @@ export default {
   component: BaseLink,
   parameters: {
     slots: {
-      default: 'BaseStory slot content'
+      default: 'Text or markup contained in the link'
     }
   },
   argTypes: {
     variant: {
       control: { type: 'select' },
-      options: Object.keys(variants)
+      options: Object.keys(variants),
+      description: 'Preset variants'
+    },
+    to: {
+      description: 'If populated, a router-link will be generated. Overrides `href`'
+    },
+    linkClicked: {
+      type: '@click emit',
+      description: 'Event emitted at the root-level (globally available)'
+    },
+    specificLinkClicked: {
+      type: '@click emit',
+      description: 'Locally emitted event (includes event attributes)'
+    },
+    linkClass: {
+      description: 'Apply classes directly to the `<a>` element.'
+    },
+    externalTargetBlank: {
+      description: 'Autmatically sets target to `_blank` for external (non-router) links.'
+    },
+    exact: {
+      description:
+        "Maps to the `exact` prop in Nuxt's native `NuxtLink` component. If `true`, `active-class` will be applied to the link only if the current path is an exact match. Only affects router links."
+    },
+    usePrimaryColor: {
+      type: 'boolean',
+      description: "Overrides the theme's `active` color and uses the `primary` color instead."
+    },
+    caret: {
+      description:
+        'If a caret icon should be appended to the link. Set automatically when using the `primary` link variant.'
+    },
+    caretColor: {
+      control: { type: 'text' },
+      description: 'Tailwind text color class for the caret. Ex: `text-primary`'
+    },
+    caretWrapperClass: {
+      description: 'Add classes to the caret wrapper'
+    },
+    caretClass: {
+      description:
+        "Apply classes directly to the caret. Maps to `MixinAnimationCaret`'s `arrowClass` prop."
+    },
+    caretInline: { description: 'Apply `inline` class to the caret wrapper' },
+    caretMarginLeft: {
+      description: 'Customize the left margin of the caret using Tailwind classes.'
     }
   },
   excludeStories: /.*Data$/
@@ -21,8 +66,6 @@ export const BaseLinkData = {
   variant: 'primary',
   to: '/',
   href: '/',
-  caret: false,
-  caretColor: 'text-primary',
   default: 'Link Text'
 }
 

package/src/components/BasePill/BasePill.stories.js

@@ -7,19 +7,20 @@ export default {
   argTypes: {
     variant: {
       type: { name: 'string', required: false },
-      description: 'The variant (color) of the tag',
+      description: 'The variant (color) of the pill',
       control: { type: 'select' },
       options: ['primary', 'secondary', 'action']
     },
     size: {
       type: { name: 'string', required: false },
-      description: 'The size of the tag',
+      description: 'The size of the pill',
       control: { type: 'select' },
       options: ['sm', 'md', 'lg']
     },
     contentType: {
       control: { type: 'select' },
-      options: Object.keys(eduMetadataDictionary)
+      options: Object.keys(eduMetadataDictionary),
+      description: 'Maps to EDU Resource types. Must use `ThemeEdu` to have an effect.'
     }
   }
 }
@@ -39,5 +40,10 @@ export const SecondarySmall = {
 }
 
 export const WithType = {
-  args: { size: 'sm', variant: 'secondary', text: 'Do it yourself' }
+  args: {
+    size: 'sm',
+    variant: 'primary',
+    text: 'Student Project',
+    contentType: 'EDUStudentProjectPage'
+  }
 }

package/src/components/BasePill/BasePill.vue

@@ -22,15 +22,13 @@ interface BasePillProps {
   variant?: string
   size?: string
   contentType?: string
-  invert?: boolean
 }
 
 // define props
 const props = withDefaults(defineProps<BasePillProps>(), {
   variant: 'primary',
   size: 'md',
-  contentType: undefined,
-  invert: false
+  contentType: undefined
 })
 
 const metadataType = computed(() => {

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

@@ -5,7 +5,7 @@ export default {
   component: BaseTimer,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="w-full"><story/></div>`
+      template: `<div id="storyRoot" class="w-full"><story/></div>`
     })
   ]
 }

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

@@ -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

@@ -87,7 +87,7 @@ const remappedAccordionItems = computed((): AccordionItemObject[] | undefined =>
                 class="AccordionItemImage"
                 :data="block.image as ImageObject"
                 :caption="block.caption"
-                :display-bacpotion="block.displayCaption"
+                :display-caption="block.displayCaption"
               />
             </template>
             <template v-else-if="block.blockType === 'RichTextBlock'">

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

@@ -6,12 +6,12 @@ export default {
   tags: ['!autodocs'],
   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

@@ -7,7 +7,7 @@ export default {
   tags: ['!autodocs'],
   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: {
@@ -18,6 +18,7 @@ export default {
     }
   },
   parameters: {
+    html: { root: '#storyRoot' },
     slots: {
       icon: {
         description: 'Icon slot',

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

@@ -10,7 +10,7 @@ export const BlockCsrTableData = [
   {
     Id: 1,
     TestRecordId: 2765,
-    Attachment: 'attachment_filename.pdf',
+    Attachment: 'Test/4816f146-e517-447d-812b-d2c7c200cb74/ExportFiles.zip',
     Status: 1,
     GenericPartNumber: 'OP467',
     Description: 'QUAD OP AMP Linear Device',
@@ -38,7 +38,7 @@ export const BlockCsrTableData = [
   {
     Id: 2,
     TestRecordId: 2,
-    Attachment: 'attachment/1',
+    Attachment: 'Test/4816f146-e517-447d-812b-d2c7c200cb74/ExportFiles.zip',
     Status: 0,
     GenericPartNumber: 'GPN123',
     Description: 'A description for part 1',
@@ -64,7 +64,7 @@ export const BlockCsrTableData = [
   {
     Id: 3,
     TestRecordId: 3,
-    Attachment: 'attachment/2',
+    Attachment: 'Test/4816f146-e517-447d-812b-d2c7c200cb74/ExportFiles.zip',
     Status: 1,
     GenericPartNumber: 'GPN345',
     Description: 'A description for part 2',
@@ -90,7 +90,7 @@ export const BlockCsrTableData = [
   {
     Id: 4,
     TestRecordId: 4,
-    Attachment: 'attachment/2',
+    Attachment: 'Test/4816f146-e517-447d-812b-d2c7c200cb74/ExportFiles.zip',
     Status: 1,
     GenericPartNumber: 'TEST',
     Description: 'A description for part. Lorem ipsum dolor sit amet consectatur.',
@@ -116,7 +116,7 @@ export const BlockCsrTableData = [
   {
     Id: 4,
     TestRecordId: 4,
-    Attachment: 'attachment/2',
+    Attachment: 'Test/4816f146-e517-447d-812b-d2c7c200cb74/ExportFiles.zip',
     Status: 1,
     GenericPartNumber: 'TEST',
     Description: 'A description for part 2',
@@ -142,7 +142,7 @@ export const BlockCsrTableData = [
   {
     Id: 4,
     TestRecordId: 4,
-    Attachment: 'attachment/2',
+    Attachment: undefined,
     Status: 1,
     GenericPartNumber: 'TEST',
     Description: 'A description for part 2',
@@ -196,7 +196,7 @@ export const BlockCsrTableData = [
 export const BaseStory = {
   args: {
     rowData: BlockCsrTableData,
-    attachmentPrefix: 'https://www.jpl.nasa.gov',
+    attachmentPrefix: 'https://test-api.jpl.nasa.gov/attachments?key=',
     apiEndpoint: null
   }
 }

package/src/components/BlockCsrTable/CsrAttachment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, computed } from 'vue'
+import { reactive } from 'vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 
 interface CsrAttachmentProps {
@@ -7,6 +7,7 @@ interface CsrAttachmentProps {
     data: {
       Attachment: string
     }
+    /** Example values: `https://test-api.jpl.nasa.gov/attachments?key=`, `https://test-api.jpl.nasa.gov/` */
     attachmentPrefix: string
   }
 }
@@ -15,20 +16,11 @@ const props = withDefaults(defineProps<CsrAttachmentProps>(), {
   params: undefined
 })
 const { params } = reactive(props)
-
-const prefix = computed(() => {
-  // make sure it ends with a slash
-  if (params.attachmentPrefix && params.attachmentPrefix.endsWith('/')) {
-    return params.attachmentPrefix
-  } else {
-    return params.attachmentPrefix + '/'
-  }
-})
 </script>
 <template>
   <BaseLink
     v-if="params?.data?.Attachment"
-    :href="prefix + params.data.Attachment"
+    :href="params.attachmentPrefix + params.data.Attachment"
     variant="default"
     target="_blank"
     >Download</BaseLink

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

@@ -5,12 +5,12 @@ export default {
   component: BlockIframeEmbed,
   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/BlockImageCarousel/BlockImageCarousel.stories.js

@@ -5,7 +5,7 @@ export default {
   component: BlockImageCarousel,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container"><story/></div>`
+      template: `<div id="storyRoot" class="container"><story/></div>`
     })
   ],
   argTypes: {
@@ -23,7 +23,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

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

@@ -5,7 +5,7 @@ export default {
   component: BlockImageCarouselItem,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="container mx-auto"><story/></div>`
     })
   ],
   argTypes: {
@@ -24,7 +24,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

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

@@ -5,12 +5,12 @@ export default {
   component: BlockImageComparison,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="container mx-auto"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockImageGallery/BlockImageGallery.stories.js

@@ -6,7 +6,7 @@ export default {
   component: BlockImageGallery,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-3xl mx-auto"><story/></div>`
     })
   ],
   argTypes: {
@@ -20,7 +20,7 @@ export default {
 
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/BlockInlineImage/BlockInlineImage.stories.js

@@ -4,6 +4,14 @@ import BlockInlineImage from './BlockInlineImage.vue'
 export default {
   title: 'Components/Blocks/BlockInlineImage',
   component: BlockInlineImage,
+  argTypes: {
+    variant: {
+      type: 'string',
+      description: 'Text size variant',
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large']
+    }
+  },
   excludeStories: /.*(Data)$/
 }
 
@@ -30,7 +38,7 @@ export const BlockInlineImageData = {
 
 export const BaseStory = {
   name: 'Align Right',
-  args: { data: BlockInlineImageData.block }
+  args: { data: BlockInlineImageData.block, variant: 'large' }
 }
 
 export const CustomCaption = {
@@ -64,6 +72,8 @@ export const PortraitImage = {
           width: 500
         }
       }
-    }
+    },
+
+    variant: 'large'
   }
 }

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -25,7 +25,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator' // to omit decorators from html output
+      root: '#storyRoot' // to omit decorators from html output
     }
   }
 }
@@ -46,16 +46,14 @@ export const BlockLinkCardData = {
       alt: 'Alt text'
     }
   },
-  headingLevel: 'h2',
-  startDate: undefined,
-  endDate: undefined
+  headingLevel: 'h2'
 }
 
 export const BaseStory = {
   name: 'Single Item',
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
@@ -66,7 +64,7 @@ export const BaseStory = {
 export const SingleItemCompactStyles = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
@@ -78,7 +76,7 @@ export const SingleItemCompactStyles = {
 export const Compact = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   name: 'Compact w/ Custom Props',
@@ -110,7 +108,7 @@ export const Compact = {
 export const EventItem = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
@@ -132,7 +130,7 @@ export const EventItem = {
 export const EventItemWithChip = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
@@ -155,12 +153,13 @@ export const EventItemWithChip = {
 export const EventWithDateNoTime = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
     ...BlockLinkCardData,
     showCalendarChip: true,
+
     data: {
       page: {
         ...BlockLinkCardData.data,
@@ -172,13 +171,17 @@ export const EventWithDateNoTime = {
         ongoing: false,
         eventType: 'Workshop'
       }
-    }
+    },
+
+    startDate: 1760598000000,
+    endDate: 1761894000000,
+    startDatetime: "2025-10-11T00:00:00-08:00'"
   }
 }
 export const EduLesson = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   globals: { theme: 'ThemeEdu' },
@@ -208,7 +211,7 @@ export const EduLesson = {
 export const EduExplainerArticle = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   globals: { theme: 'ThemeEdu' },
@@ -266,7 +269,7 @@ export const EduCollection = {
   globals: { theme: 'ThemeEdu' },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
@@ -336,7 +339,7 @@ export const EduNewsItem = {
   globals: { theme: 'ThemeEdu' },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {
@@ -355,7 +358,7 @@ export const EduNewsItem = {
 export const ExternalLink = {
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+      template: `<div id="storyRoot" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
   args: {

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>

package/src/components/BlockLinkTile/BlockLinkTile.stories.js

@@ -7,7 +7,7 @@ export default {
   component: BlockLinkTile,
   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'],
@@ -23,7 +23,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/