@explorer-1/vue 0.3.3 → 0.3.6

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/HeroMedia/HeroMedia.vue

@@ -45,7 +45,7 @@
     <div
       v-if="hasCaptionArea"
       :class="captionVisibilityClass"
-      class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
+      class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
     >
       <BaseImageCaption :data="theImageData || customCaption" />
     </div>

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>`
     })
   ]
 }

package/src/docs/introduction.docs.mdx

@@ -43,16 +43,22 @@ Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
 
 <div>
   <table
-    class="w-auto text-left"
+    className="w-auto text-left"
     style={{ width: 'unset' }}
   >
     <thead>
-      <tr class="text-left">
+      <tr className="text-left">
         <th>Package</th>
         <th>Version</th>
       </tr>
     </thead>
     <tbody>
+      <tr>
+        <td>[@nasa-jpl/explorer-1](https://www.npmjs.com/package/@nasa-jpl/explorer-1)</td>
+        <td>
+          <code>{packageVersions.__VERSION__NASA_JPL_EXPLORER_1__}</code>
+        </td>
+      </tr>
       <tr>
         <td>[@explorer-1/common](https://www.npmjs.com/package/@explorer-1/common)</td>
         <td>
@@ -65,6 +71,12 @@ Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
           <code>{packageVersions.__VERSION__EXPLORER_1_VUE__}</code>
         </td>
       </tr>
+      <tr>
+        <td>[@explorer-1/html](https://www.npmjs.com/package/@explorer-1/html)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_HTML__}</code>
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>

package/src/templates/PageContent/PageContent.stories.js

@@ -15,7 +15,7 @@ export default {
   tags: ['!autodocs'],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     layout: 'fullscreen'
   },

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -9,7 +9,7 @@ export default {
   tags: ['!autodocs'],
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     layout: 'fullscreen'
   },

package/src/templates/PageNewsDetail/PageNewsDetail.stories.js

@@ -17,13 +17,13 @@ export default {
   component: PageNewsDetail,
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+      template: `<div id="storyRoot" class="disable-nav-offset"><story/></div>`
     })
   ],
   parameters: {
     layout: 'fullscreen',
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/templates/edu/PageContentEdu.stories.js

@@ -7,13 +7,13 @@ export default {
   tags: ['!autodocs'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="ThemeEdu"><story/></div>`
+      template: `<div id="storyRoot" class="ThemeEdu"><story/></div>`
     })
   ],
   globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     docs: {
       description: {

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.stories.js

@@ -10,14 +10,14 @@ export default {
   tags: ['!autodocs'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+      template: `<div id="storyRoot" class="disable-nav-offset"><story/></div>`
     })
   ],
   globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js

@@ -10,7 +10,7 @@ export default {
   globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     layout: 'fullscreen'
   },

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js

@@ -16,14 +16,14 @@ export default {
   tags: ['!autodocs'],
   decorators: [
     () => ({
-      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+      template: `<div id="storyRoot" class="disable-nav-offset"><story/></div>`
     })
   ],
   globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     }
   },
   excludeStories: /.*Data$/

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js

@@ -14,7 +14,7 @@ export default {
   globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
-      root: '#storyDecorator'
+      root: '#storyRoot'
     },
     layout: 'fullscreen'
   },