@explorer-1/vue 0.3.4 → 0.3.6

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$/

package/src/components/EventDetailHero/EventDetailHero.stories.js

@@ -3,14 +3,20 @@ import EventDetailHero from './EventDetailHero.vue'
 export default {
   title: 'Components/WWW/EventDetail/EventDetailHero',
   component: EventDetailHero,
+  tags: ['!autodocs'],
+  argTypes: {
+    constrain: {
+      description: 'Constrain image to 16:9'
+    }
+  },
   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>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     themes: {
       clearable: false,
@@ -37,10 +43,6 @@ export const EventDetailHeroData = {
       height: 1200
     },
     alt: 'The hero image'
-  },
-  startDateSplit: {
-    day: '25',
-    monthAndYear: 'Jan. 2020'
   }
 }
 
@@ -48,6 +50,7 @@ export const EventDetailHeroData = {
 export const BaseStory = {
   args: {
     image: EventDetailHeroData.heroImage,
-    startDateSplit: EventDetailHeroData.startDateSplit
+    startDate: '11-11-2025',
+    endDate: '12-02-2025'
   }
 }

package/src/components/HeroLarge/HeroLarge.stories.js

@@ -1,4 +1,5 @@
 import HeroLarge from './HeroLarge.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Heroes/Large',
@@ -6,6 +7,25 @@ export default {
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'canvas'
+  },
+  argTypes: {
+    customPill: {
+      type: { name: 'string', required: false },
+      description: 'Text for pill (overrides label)'
+    },
+    customPillType: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary),
+      description:
+        'Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu`'
+    },
+    hasOverlay: {
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      description:
+        'If secondary nav is also on this page, more space will be added above the hero text'
+    }
   }
 }
 
@@ -52,15 +72,19 @@ export const HeroLargeData = {
       url: 'https://picsum.photos/id/247/640/900'
     },
     alt: 'Robotics detail page hero image'
-  }
+  },
+  customPill: undefined,
+  customPillType: undefined,
+  hasOverlay: false
 }
 
 // stories
 export const BaseStory = {
   name: 'HeroLarge',
   args: {
-    eyebrow: 'Robotics at JPL',
+    label: 'Robotics at JPL',
     ...HeroLargeData,
+    summary: HeroLargeData.description,
     image: HeroLargeData.heroImage
   }
 }

package/src/components/HeroLarge/HeroLarge.vue

@@ -88,11 +88,13 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    // custom text for pill
     customPill: {
       type: String,
       required: false,
       default: undefined
     },
+    // maps to EDU resource types
     customPillType: {
       type: String,
       required: false,

package/src/components/HeroMedia/HeroMedia.stories.js

@@ -6,7 +6,7 @@ export default {
   component: HeroMedia,
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     docs: {
       description: {

package/src/components/HeroMedium/HeroMedium.stories.js

@@ -1,17 +1,31 @@
 import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import HeroMedium from './HeroMedium.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Heroes/Medium',
   component: HeroMedium,
   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: {
+    customPill: {
+      type: { name: 'string', required: false },
+      description: 'Text for pill (overrides label)'
+    },
+    customPillType: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary),
+      description:
+        'Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu`'
+    }
+  },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     themes: {
       clearable: false,
@@ -57,7 +71,7 @@ export const HeroMediumData = {
 export const BaseStory = {
   name: 'HeroMedium',
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,
@@ -66,7 +80,7 @@ export const BaseStory = {
 }
 export const Compact = {
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,

package/src/components/HeroMedium/HeroSmall.stories.js

@@ -1,18 +1,32 @@
 import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import { HeroMediumData } from './HeroMedium.stories'
 import HeroMedium from './HeroMedium.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Heroes/Small',
   component: HeroMedium,
   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: {
+    customPill: {
+      type: { name: 'string', required: false },
+      description: 'Text for pill (overrides label)'
+    },
+    customPillType: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary),
+      description:
+        'Maps to EDU resource types. Label is replaced with a color-themed "pill." Must use with `.ThemeEdu`'
+    }
+  },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     themes: {
       clearable: false,
@@ -38,7 +52,7 @@ export default {
 export const BaseStory = {
   name: 'HeroMedium (compact)',
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,
@@ -48,7 +62,7 @@ export const BaseStory = {
 }
 export const Video = {
   args: {
-    customTag: 'News',
+    customPill: 'News',
     customLabel: HeroMediumData.label,
     feature: HeroMediumData.feature,
     cta: HeroMediumData.cta,

package/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js

@@ -6,12 +6,12 @@ export default {
   component: HomepageCarouselItem,
   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>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     viewMode: 'canvas'
   },

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

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

package/src/components/MissionDetailHero/MissionDetailHero.stories.js

@@ -22,12 +22,12 @@ export default {
   },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" style="height:2500px"><story/></div>`
+      template: `<div id="storyRoot" style="height:2500px"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     viewMode: 'canvas'
   },

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

@@ -9,12 +9,12 @@ export default {
   subcomponents: { MissionDetailStatsMini, MissionDetailStatsMicro },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+      template: `<div id="storyRoot" class="mt-20"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*(Data)$/,

package/src/components/NavHeading/NavHeading.stories.js

@@ -6,12 +6,12 @@ export default {
   component: NavHeading,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
+      template: `<div id="storyRoot" class="p-8 bg-jpl-blue-darker edu:bg-primary-dark"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     viewMode: 'docs'
   },

package/src/components/NavHighlight/NavHighlight.stories.js

@@ -5,12 +5,12 @@ export default {
   component: NavHighlight,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="lg:BaseGrid container"><div class="col-span-5"><story/></div></div>`
+      template: `<div id="storyRoot" class="lg:BaseGrid container"><div class="col-span-5"><story/></div></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     viewMode: 'docs'
   },

package/src/components/NavLinkList/NavLinkList.stories.js

@@ -5,12 +5,12 @@ export default {
   component: NavLinkList,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="bg-jpl-blue-darker p-8"><story/></div>`
+      template: `<div id="storyRoot" class="bg-jpl-blue-darker p-8"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/NavMobile/NavMobile.stories.js

@@ -7,10 +7,15 @@ export default {
   title: 'Navigation/Headers/WWW/NavMobile',
   component: NavMobile,
   excludeStories: /.*Data$/,
+
   parameters: {
-    viewMode: 'canvas',
+    viewMode: 'canvas'
+  },
+
+  globals: {
     viewport: {
-      defaultViewport: 'mobile2'
+      value: 'mobile2',
+      isRotated: false
     }
   }
 }

package/src/components/NavMobile/NavMobileEdu.stories.js

@@ -6,16 +6,22 @@ export default {
   component: NavMobile,
   tags: ['!autodocs'],
   excludeStories: /.*Data$/,
+
   parameters: {
     layout: 'fullscreen',
-    viewport: {
-      defaultViewport: 'mobile2'
-    },
+
     docs: {
       description: {
         component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
       }
     }
+  },
+
+  globals: {
+    viewport: {
+      value: 'mobile2',
+      isRotated: false
+    }
   }
 }
 

package/src/components/ParallaxContainer/ParallaxContainer.stories.js

@@ -6,12 +6,12 @@ export default {
   component: ParallaxContainer,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" style="height:3000px"><story/></div>`
+      template: `<div id="storyRoot" style="height:3000px"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     docs: {
       description: {

package/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js

@@ -7,12 +7,12 @@ export default {
   subcomponents: { RoboticsDetailStatsMini },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+      template: `<div id="storyRoot" class="mt-20"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/,

package/src/components/SearchResultGridItem/SearchResultGridItem.stories.js

@@ -5,7 +5,7 @@ export default {
   component: SearchResultGridItem,
   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>`
     })
   ],
   argTypes: {
@@ -20,7 +20,7 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/SearchResultsList/SearchResultsList.stories.js

@@ -5,13 +5,13 @@ export default {
   component: SearchResultsList,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="max-w-screen-xl"><story/></div>`
+      template: `<div id="storyRoot" class="max-w-screen-xl"><story/></div>`
     })
   ],
   tags: ['!autodocs'],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js

@@ -7,12 +7,12 @@ export default {
   component: TopicDetailMissionCarouselItem,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="relative lg:w-1/3"><story/></div>`
+      template: `<div id="storyRoot" class="relative lg:w-1/3"><story/></div>`
     })
   ],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js

@@ -4,12 +4,12 @@ export default {
   component: TopicDetailMoreItem,
   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/docs/foundation/grid_layouthelpers.stories.js

@@ -14,12 +14,12 @@ export default {
   },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="container mx-auto border border-black"><story/></div>`
+      template: `<div id="storyRoot" class="container mx-auto border border-black"><story/></div>`
     })
   ]
 }