@explorer-1/vue 0.1.1 → 0.1.2

package/src/components/HomepageCarousel/HomepageCarousel.stories.js

@@ -2,7 +2,7 @@ import { HomepageCarouselItemData } from './../HomepageCarouselItem/HomepageCaro
 import HomepageCarousel from './HomepageCarousel.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageCarousel',
+  title: 'Components/WWW/Homepage/HomepageCarousel',
   component: HomepageCarousel,
   excludeStories: /.*Data$/,
   parameters: {
@@ -83,7 +83,8 @@ const HomepageCarouselShuffledData = () => {
 }
 
 // stories
-export const Carousel = {
+export const BaseStory = {
+  name: 'HomepageCarousel',
   args: {
     items: HomepageCarouselData,
     duration: 10000

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

@@ -2,7 +2,7 @@ import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import HomepageCarouselItem from './HomepageCarouselItem.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageCarousel/HomepageCarouselItem',
+  title: 'Components/WWW/Homepage/HomepageCarousel/HomepageCarouselItem',
   component: HomepageCarouselItem,
   decorators: [
     () => ({
@@ -46,7 +46,8 @@ export const HomepageCarouselItemData = {
   }
 }
 
-export const SingleItem = {
+export const BaseStory = {
+  name: 'Single Item',
   args: {
     item: {
       ...HomepageCarouselItemData.item,

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js

@@ -2,7 +2,7 @@ import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.storie
 import HomepageEmbedBlock from './HomepageEmbedBlock.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageEmbedBlock',
+  title: 'Components/WWW/Homepage/HomepageEmbedBlock',
   component: HomepageEmbedBlock,
   decorators: [
     () => ({
@@ -27,7 +27,7 @@ export const HomepageEmbedBlockData = [
 ]
 
 // stories
-export const Default = {
+export const BaseStory = {
   name: 'HomepageEmbedBlock',
   args: {
     data: HomepageEmbedBlockData

package/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.stories.js

@@ -1,6 +1,6 @@
 import HomepageFeaturedRobot from './HomepageFeaturedRobot.vue'
 export default {
-  title: 'WWW/Homepage/HomepageFeaturedRobot',
+  title: 'Components/WWW/Homepage/HomepageFeaturedRobot',
   component: HomepageFeaturedRobot,
   excludeStories: /.*Data$/,
   parameters: {
@@ -63,7 +63,8 @@ export const HomepageFeaturedRobotData = {
 }
 
 // stories
-export const FeaturedRobot = {
+export const BaseStory = {
+  name: 'Featured Robot',
   args: {
     data: HomepageFeaturedRobotData
   }

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.stories.js

@@ -7,7 +7,7 @@ import HomepageMissionsCarousel from './HomepageMissionsCarousel.vue'
 import HomepageMissionsCarouselItem from './HomepageMissionsCarouselItem.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageMissionsCarousel',
+  title: 'Components/WWW/Homepage/HomepageMissionsCarousel',
   component: HomepageMissionsCarousel,
   excludeStories: /.*Data$/,
   parameters: {
@@ -134,7 +134,7 @@ const HomepageMissionsCarouselItemTemplate = (args) => ({
 })
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     data: HomepageMissionsCarouselData.missionsCarousel
   }

package/src/components/HomepageStats/HomepageStats.stories.js

@@ -1,7 +1,7 @@
 import HomepageStats from './HomepageStats.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageStats',
+  title: 'Components/WWW/Homepage/HomepageStats',
   component: HomepageStats,
   excludeStories: /.*Data$/,
   parameters: {
@@ -57,8 +57,8 @@ const HomepageStatsTemplate = (args) => ({
   />`
 })
 
-export const Base = HomepageStatsTemplate.bind({})
-Base.args = HomepageStatsData
+export const BaseStory = HomepageStatsTemplate.bind({})
+BaseStory.args = HomepageStatsData
 
 export const StaticDate = HomepageStatsTemplate.bind({})
 StaticDate.args = {

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.stories.js

@@ -1,7 +1,7 @@
 import HomepageTeaserBlock from './HomepageTeaserBlock.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageTeaserBlock',
+  title: 'Components/WWW/Homepage/HomepageTeaserBlock',
   component: HomepageTeaserBlock,
   excludeStories: /.*(Data|Decorator)$/,
   parameters: {
@@ -76,8 +76,9 @@ export const HomepageTeaserBlockData = {
 }
 
 // stories
-export const TeaserBlock = HomepageTeaserBlockTemplate.bind({})
-TeaserBlock.args = {
+export const BaseStory = HomepageTeaserBlockTemplate.bind({})
+BaseStory.storyName = 'Teaser Block'
+BaseStory.args = {
   ...HomepageTeaserBlockData
 }
 

package/src/components/Icons/Icons.stories.ts

@@ -53,7 +53,7 @@ import IconUser from './IconUser.vue'
 import IconVolume from './IconVolume.vue'
 
 export default {
-  title: 'Foundation/Icons',
+  title: 'Foundations/Icons',
   component: IconArrows,
   subcomponents: {
     IconArrow,

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

@@ -1,7 +1,7 @@
 import LogoCaltech from './LogoCaltech.vue'
 
 export default {
-  title: 'Foundation/Logos/LogoCaltech',
+  title: 'Foundations/Logos/LogoCaltech',
   component: LogoCaltech,
   argTypes: {
     size: {
@@ -34,6 +34,6 @@ const LogoCaltechComponentTemplate = (args) => ({
   template: `<LogoCaltech :class="size" />`
 })
 
-export const Caltech = LogoCaltechComponentTemplate.bind({})
-Caltech.storyName = 'LogoCaltech' // single story hoisting
-Caltech.args = { size: 'text-base' }
+export const BaseStory = LogoCaltechComponentTemplate.bind({})
+BaseStory.storyName = 'LogoCaltech' // single story hoisting
+BaseStory.args = { size: 'text-base' }

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

@@ -3,7 +3,7 @@ import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg
 import LogoTribrand from './LogoTribrand.vue'
 
 export default {
-  title: 'Foundation/Logos/LogoTribrand',
+  title: 'Foundations/Logos/LogoTribrand',
   component: LogoTribrand,
   excludeStories: /.*Data$/,
   parameters: {
@@ -28,9 +28,10 @@ const LogoTribrandImageTemplate = (args) => ({
   template: `<img :src="src" alt="Logo Image" />`
 })
 
-export const LogoInlineSvg = LogoTribrandComponentTemplate.bind({})
-LogoInlineSvg.args = { invert: false, size: 'text-base' }
-LogoInlineSvg.argTypes = {
+export const BaseStory = LogoTribrandComponentTemplate.bind({})
+BaseStory.storyName = 'Logo Inline SVG'
+BaseStory.args = { invert: false, size: 'text-base' }
+BaseStory.argTypes = {
   size: {
     control: {
       type: 'select',
@@ -43,7 +44,7 @@ LogoInlineSvg.argTypes = {
     }
   }
 }
-LogoInlineSvg.decorators = [
+BaseStory.decorators = [
   () => ({
     template: `<div class="inline-block" :class="invert ? 'bg-black ' : 'bg-white '"><story/></div>`,
     props: ['size', 'invert']

package/src/components/MissionDetailAbout/MissionDetailAbout.stories.js

@@ -1,7 +1,7 @@
 import MissionDetailAbout from './MissionDetailAbout.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailAbout',
+  title: 'Components/WWW/MissionDetail/MissionDetailAbout',
   component: MissionDetailAbout,
   decorators: [
     () => ({
@@ -60,7 +60,7 @@ export const MissionDetailAboutData = {
 }
 
 // stories
-export const Default = { args: MissionDetailAboutData }
+export const BaseStory = { args: MissionDetailAboutData }
 
 export const NoInstruments = {
   args: {

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

@@ -13,7 +13,7 @@ import imageInstrumentOco2WebP from '@explorer-1/common-storybook/src/images/mis
 import MissionDetailHero from './MissionDetailHero.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailHero',
+  title: 'Components/WWW/MissionDetail/MissionDetailHero',
   component: MissionDetailHero,
   argTypes: {
     templateStyle: {
@@ -89,7 +89,8 @@ const MissionDetailHeroTemplate = (args) => ({
 })
 
 // stories
-export const CubeRrt = {
+export const BaseStory = {
+  name: 'CubeRRT',
   args: {
     templateStyle: 'light',
     title: 'CubeRRT',

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

@@ -7,7 +7,7 @@ import imagePlanetMarsB from '@explorer-1/common-storybook/src/images/mission-hi
 
 import MissionDetailHighlights from './MissionDetailHighlights.vue'
 export default {
-  title: 'WWW/MissionDetail/MissionHighlights',
+  title: 'Components/WWW/MissionDetail/MissionHighlights',
   component: MissionDetailHighlights,
   parameters: {
     viewMode: 'canvas'
@@ -103,7 +103,8 @@ const MissionDetailHighlightsNoImagesTemplate = (args) => ({
 })
 
 // stories
-export const Earth = {
+export const BaseStory = {
+  name: 'Earth',
   args: {
     animation: MissionDetailHighlightsData.showHighlightsAnimation,
     graphic: MissionDetailHighlightsData.highlightsGraphic,

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

@@ -2,7 +2,7 @@ import { BaseImageCaptionData } from './../BaseImageCaption/BaseImageCaption.sto
 import MissionDetailInlineImage from './MissionDetailInlineImage.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailInlineImage',
+  title: 'Components/WWW/MissionDetail/MissionDetailInlineImage',
   component: MissionDetailInlineImage,
   argTypes: {
     alignTo: {
@@ -34,7 +34,7 @@ const MissionDetailInlineImageData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     alignment: MissionDetailInlineImageData.alignTo,
     text: MissionDetailInlineImageData.text,

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

@@ -4,7 +4,7 @@ import MissionDetailStatsMicro from './MissionDetailStatsMicro.vue'
 import { distanceTypes } from './DistanceStats.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailStats',
+  title: 'Components/WWW/MissionDetail/MissionDetailStats',
   component: MissionDetailStats,
   subcomponents: { MissionDetailStatsMini, MissionDetailStatsMicro },
   decorators: [
@@ -50,7 +50,8 @@ export const MissionDetailStatsData = {
   status: 'future'
 }
 
-export const Full = {
+export const BaseStory = {
+  name: 'Full',
   args: MissionDetailStatsData,
   render: (args) => ({
     setup() {

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js

@@ -3,7 +3,7 @@ import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.sto
 import MissionDetailStreamfield from './MissionDetailStreamfield.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailStreamfield',
+  title: 'Components/WWW/MissionDetail/MissionDetailStreamfield',
   component: MissionDetailStreamfield,
   excludeStories: /.*Data$/
 }
@@ -52,4 +52,4 @@ export const MissionDetailStreamfieldData = {
   ]
 }
 
-export const Streamfield = { args: { data: MissionDetailStreamfieldData.feature } }
+export const BaseStory = { args: { data: MissionDetailStreamfieldData.feature } }

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

@@ -5,7 +5,7 @@ export default {
   component: MixinAnimationCaret,
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     viewMode: 'docs',
     docs: {
@@ -17,7 +17,7 @@ export default {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     default: 'Text with caret'
   }

package/src/components/MixinCarousel/MixinCarousel.stories.js

@@ -12,7 +12,7 @@ export default {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BaseCarousel',
   args: {
     heading: 'Heading',
@@ -24,8 +24,8 @@ export const Default = {
       return { args }
     },
     template: `<MixinCarousel v-bind="args">
-    <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide">
-      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide" data-chromatic="ignore">
+    <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide bg-gray-dark">
+      <img src="https://picsum.photos/550/483" width="550" height="483" :alt="'Demo slide ' + index" data-chromatic="ignore">
     </div>
   </MixinCarousel>`
   })

package/src/components/MixinVideoBg/MixinVideoBg.stories.js

@@ -4,20 +4,10 @@ import MixinVideoBg from './MixinVideoBg.vue'
 export default {
   title: 'Mixins/MixinVideoBg',
   component: MixinVideoBg,
-  excludeStories: /.*Data$/,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
-    })
-  ],
-  parameters: {
-    html: {
-      root: '#storyDecorator'
-    }
-  }
+  excludeStories: /.*Data$/
 }
 
-export const Base = {
+export const BaseStory = {
   name: 'MixinVideoBg',
   args: { video: BaseVideoData }
 }

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -7,7 +7,7 @@ import NavDesktopDropdownContent from './NavDesktopDropdownContent.vue'
 import NavDesktopDropdownMore from './NavDesktopDropdownMore.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavDesktop',
+  title: 'Navigation/Headers/WWW/NavDesktop',
   component: NavDesktop,
   excludeStories: /.*Data$/,
   parameters: {
@@ -168,7 +168,8 @@ export const NavDesktopData = {
   ]
 }
 
-export const Nav = {
+export const BaseStory = {
+  name: 'NavDesktop',
   args: {
     data: NavDesktopData,
     headerVisible: true,

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="NavDesktopDropdown">
-    <MixinDropdownToggle
+    <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
       class="group relative z-20 px-4 font-medium border-t-2 border-transparent"
@@ -16,7 +16,7 @@
       >
         <slot name="dropdownLabel">Dropdown</slot>
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
 
     <transition name="navfade">
       <div
@@ -39,12 +39,12 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 
 export default defineComponent({
   name: 'NavDesktopDropdown',
   components: {
-    MixinDropdownToggle
+    NavDropdownToggle
   },
   props: {
     parentScrolled: {
@@ -125,27 +125,27 @@ export default defineComponent({
 
     &.-open {
       > span {
-        @apply border-jpl-red;
+        @apply border-primary edu:border-white;
 
         .-transparent & {
           @apply border-white;
         }
 
         .-transparent.-scrolled & {
-          @apply border-jpl-red;
+          @apply border-primary edu:border-white;
         }
       }
     }
     &:hover {
       > span {
-        @apply border-jpl-red;
+        @apply border-primary edu:border-white;
 
         .-transparent & {
           @apply border-white;
         }
 
         .-transparent.-scrolled & {
-          @apply border-jpl-red;
+          @apply border-primary edu:border-white;
         }
       }
     }
@@ -154,14 +154,14 @@ export default defineComponent({
   &.-active {
     > button {
       > span {
-        @apply border-jpl-red font-bold;
+        @apply border-primary edu:border-white font-bold;
 
         .-transparent & {
           @apply border-white;
         }
 
         .-transparent.-scrolled & {
-          @apply border-jpl-red;
+          @apply border-primary edu:border-white;
         }
 
         &.hasSecondary {

package/src/components/NavDesktop/NavDesktopDropdownContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 3xl:px-0 px-4 py-10 text-white"
+    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-gradient-to-r edu:bg-transparent edu:from-black/[.98] edu:to-jpl-violet/[.98] edu:to-90% 3xl:px-0 px-4 py-10 text-white"
   >
     <div
       v-if="data.menuColumns"

package/src/components/NavDesktopEdu/NavDesktopEdu.stories.js

@@ -0,0 +1,186 @@
+import { MenuHighlightColumnData } from './../NavHighlight/NavHighlight.stories'
+import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stories'
+import NavDesktop from './NavDesktopEdu.vue'
+import NavDesktopTopHat from './../NavDesktop/NavDesktopTopHat.vue'
+import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
+import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
+import NavDesktopDropdownMore from './../NavDesktop/NavDesktopDropdownMore.vue'
+
+export default {
+  title: 'Navigation/Headers/EDU/NavDesktopEdu',
+  component: NavDesktop,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+export const NavDesktopTopHatData = {
+  topHat: [
+    {
+      linkPage: {
+        title: 'Home',
+        url: '/'
+      },
+      title: 'JPL',
+      path: null
+    },
+    {
+      linkPage: null,
+      title: 'Career',
+      path: 'https://jpl.jobs/'
+    },
+    {
+      linkPage: null,
+      title: 'Science and Technology',
+      path: 'https://scienceandtechnology.jpl.nasa.gov/'
+    }
+  ]
+}
+
+// combined dropdown data
+export const NavDesktopDropdownContentData = {
+  blockType: 'MenuPanel',
+  titleLink: {
+    linkPage: {
+      title: 'About',
+      url: '/about/'
+    },
+    title: null
+  },
+  menuColumns: [
+    MenuHighlightColumnData,
+    {
+      blockType: 'MenuDescriptionColumn',
+      description: 'Lorem ipsum dolor sit amet.',
+      title: 'About'
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: null,
+      headingPage: null
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: null,
+      headingPage: null
+    }
+  ]
+}
+// combined dropdown data for "more" menu
+export const NavDesktopDropdownMoreData = {
+  blockType: 'MenuMorePanel',
+  titleText: 'More',
+  strapline:
+    'JPL is a unique research facility that carries out robotic space and Earth science missions.',
+  menuColumns: [
+    {
+      blockType: 'MenuDescriptionColumn',
+      description: 'Lorem ipsum dolor sit amet.',
+      title: 'About'
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: 'More from JPL',
+      headingPage: null
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: 'Explore Topics',
+      headingPage: null
+    },
+    {
+      blockType: 'MenuMoreHighlightsColumn',
+      heading: 'Discover',
+      headingPage: null,
+      highlights: [MenuHighlightColumnData, MenuHighlightColumnData]
+    }
+  ]
+}
+
+// combined header data // desktop and mobile
+
+export const NavDesktopData = {
+  breadcrumb:
+    '{"/": [{"path": "http://www.jpl.nasa.gov/", "title": "Asteroid watch"}, {"path": "http://www.jpl.nasa.gov/", "title": "Asteroid fast facts"}, {"path": "http://www.jpl.nasa.gov/", "title": "Meteor shower viewing guide"}, {"path": "http://www.jpl.nasa.gov/", "title": "Yeoman\'s top 10"}, {"path": "http://www.jpl.nasa.gov/", "title": "Glossary of space rocks"}, {"path": "/robotics-at-jpl/", "title": "Robotics"}, {"path": "http://www.jpl.nasa.gov/", "title": "Apps"}, {"path": "/jpl-life/", "title": "JPL Life"}, {"path": "/stars-and-galaxies/", "title": "Stars and Galaxies"}, {"path": "/exoplanets/", "title": "Exoplanets"}, {"path": "/solar-system/", "title": "Solar System"}, {"path": "/asteroids/", "title": "Asteroids"}, {"path": "/comets/", "title": "Comets"}, {"path": "/technology/", "title": "Technology"}, {"path": "/mars/", "title": "Mars"}, {"path": "/earth/", "title": "Earth"}, {"path": "/climate-change/", "title": "Climate Change"}, {"path": "/earthquakes/", "title": "Earthquakes"}, {"path": "/weather/", "title": "Weather"}, {"path": "/robotics/", "title": "Robotics"}], "/missions/": [{"path": "/missions/", "title": "Current"}, {"path": "/missions/", "title": "Past"}, {"path": "/missions/", "title": "Future"}, {"path": "/missions/", "title": "Proposed"}, {"path": "/missions/", "title": "All"}], "/news/": [{"path": "/news/", "title": "All news"}, {"path": "/news/", "title": "Press kits"}, {"path": "/news/", "title": "Fact sheets"}, {"path": "/news/", "title": "Media Information"}, {"path": "/news/", "title": "JPL newsletter"}]}',
+  ...NavDesktopTopHatData,
+  primaryNavigation: [
+    NavDesktopDropdownContentData,
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Missions',
+          url: '/missions/'
+        },
+        title: null
+      },
+      menuColumns: [
+        MenuHighlightColumnData,
+        {
+          blockType: 'MenuDescriptionColumn',
+          description: 'Lorem ipsum dolor sit amet.',
+          title: 'Missions'
+        },
+        {
+          ...MenuLinkColumnWithHeaderData,
+          heading: null,
+          headingPage: null
+        },
+        {
+          ...MenuLinkColumnWithHeaderData,
+          heading: null,
+          headingPage: null
+        }
+      ]
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'News',
+          url: '/news/'
+        },
+        title: null
+      }
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Galleries',
+          url: '/galleries/'
+        },
+        title: null
+      }
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Engage',
+          url: '/engage/'
+        },
+        title: null
+      }
+    }
+  ]
+}
+
+export const BaseStory = {
+  name: 'NavDesktop',
+  args: {
+    data: NavDesktopData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    invertOverride: false
+  },
+  render: (args) => ({
+    components: { NavDesktop },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktop v-bind="args" />`
+  })
+}