@explorer-1/vue 0.1.1 → 0.1.2

package/lib/main.ts

@@ -161,7 +161,7 @@ import MissionDetailStats from './../src/components/MissionDetailStats/MissionDe
 import MissionDetailStreamfield from './../src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue'
 import MixinAnimationCaret from './../src/components/MixinAnimationCaret/MixinAnimationCaret.vue'
 import MixinCarousel from './../src/components/MixinCarousel/MixinCarousel.vue'
-import MixinDropdownToggle from './../src/components/MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../src/components/NavDropdownToggle/NavDropdownToggle.vue'
 import MixinFancybox from './../src/components/MixinFancybox/MixinFancybox.vue'
 import MixinVideoBg from './../src/components/MixinVideoBg/MixinVideoBg.vue'
 import NavDesktop from './../src/components/NavDesktop/NavDesktop.vue'
@@ -363,7 +363,7 @@ export {
   MissionDetailStreamfield,
   MixinAnimationCaret,
   MixinCarousel,
-  MixinDropdownToggle,
+  NavDropdownToggle,
   MixinFancybox,
   MixinVideoBg,
   NavDesktop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -19,8 +19,8 @@
     "click-outside-vue3": "^4.0.1",
     "datebook": "^8.0.1",
     "dayjs": "^1.11.11",
+    "fast-qs": "^2.0.3",
     "lodash": "^4.17.21",
-    "qs": "^6.12.1",
     "sass": "^1.77.4",
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
@@ -28,7 +28,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.0.3"
+    "@explorer-1/common": "1.0.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js

@@ -1,7 +1,7 @@
 import AsteroidWatchWidget from './AsteroidWatchWidget.vue'
 
 export default {
-  title: 'Components/AsteroidWatchWidget',
+  title: 'Components/WWW/AsteroidWatchWidget',
   component: AsteroidWatchWidget,
   excludeStories: /.*Data$/,
   decorators: [
@@ -151,6 +151,6 @@ export const AsteroidWatchWidgetData = {
   ]
 }
 
-export const Base = {
+export const BaseStory = {
   args: AsteroidWatchWidgetData
 }

package/src/components/BackToTop/BackToTop.stories.js

@@ -16,9 +16,9 @@ const BackToTopTemplate = (args) => ({
   `
 })
 
-export const Default = BackToTopTemplate.bind({})
-Default.storyName = 'BackToTop'
-Default.args = {
+export const BaseStory = BackToTopTemplate.bind({})
+BaseStory.storyName = 'BackToTop'
+BaseStory.args = {
   threshhold: 300,
   scrollTo: 0
 }

package/src/components/BaseAudio/BaseAudio.stories.js

@@ -23,7 +23,7 @@ export const BaseAudioData = {
   loop: false
 }
 
-export const Base = {
+export const BaseStory = {
   name: 'BaseAudio', // single story hoisting
   args: BaseAudioData
 }

package/src/components/BaseButton/BaseButton.stories.ts

@@ -8,7 +8,7 @@ export default {
   tags: ['autodocs'],
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     docs: {
       description: {
@@ -45,7 +45,8 @@ export const BaseButtonData = {
   default: 'Button'
 }
 
-export const PrimaryButton = {
+export const BaseStory = {
+  name: 'Primary Button',
   args: {
     ...BaseButtonData,
     variant: 'primary'

package/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js

@@ -0,0 +1,39 @@
+import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
+
+export default {
+  title: 'Components/Base/BaseCheckboxGroup',
+  component: BaseCheckboxGroup
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    options: [
+      {
+        id: 'educators',
+        title: 'Educators',
+        text: null
+      },
+      {
+        id: 'educator-workshop',
+        title: 'Educators Workshops',
+        text: 'Southern California'
+      },
+      {
+        id: 'students',
+        title: 'Students K-12',
+        text: null
+      },
+      {
+        id: 'internships',
+        title: 'Internships',
+        text: null
+      }
+    ],
+    group: 'edumail',
+    heading: 'JPL Education Groups',
+    subHeading:
+      'The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA.',
+    title: 'Education Email Groups'
+  }
+}

package/src/components/BaseHeading/BaseHeading.stories.js

@@ -23,7 +23,7 @@ export default {
   },
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     viewMode: 'docs',
     docs: {
@@ -36,7 +36,7 @@ export default {
 }
 
 // stories
-export const H1 = {
+export const BaseStory = {
   name: 'H1',
   args: { size: 'h1', level: 'h1', default: 'Heading 1' }
 }

package/src/components/BaseImage/BaseImage.stories.ts

@@ -31,7 +31,7 @@ export const BaseImageData = {
   objectFitClass: 'contain'
 }
 // stories
-export const Default = {
+export const BaseStory = {
   args: BaseImageData,
   decorators: [() => ({ template: '<div class="max-w-full"><story /></div>' })]
 }

package/src/components/BaseImageCaption/BaseImageCaption.stories.js

@@ -20,7 +20,7 @@ export const BaseImageCaptionData = {
   detailUrl: '/image-detail/slug/'
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BaseImageCaptionData
   }

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

@@ -42,6 +42,7 @@ export const BaseImagePlaceholderData = {
 }
 
 export const WithImage = {
+  name: 'With Image',
   args: {
     ...BaseImagePlaceholderData,
     BaseImageProps: {
@@ -55,7 +56,8 @@ export const WithImage = {
     }
   }
 }
-export const NoImage = {
+export const BaseStory = {
+  name: 'No Image',
   args: {
     ...BaseImagePlaceholderData,
     BaseImageProps: {

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

@@ -4,7 +4,7 @@ export default {
   component: BaseLink,
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     }
   },
   argTypes: {
@@ -27,7 +27,8 @@ export const BaseLinkData = {
 }
 
 // stories
-export const Primary = {
+export const BaseStory = {
+  name: 'Primary',
   args: { ...BaseLinkData }
 }
 

package/src/components/BaseModal/BaseModal.stories.js

@@ -71,8 +71,8 @@ export const BaseModalDialogData = {
 }
 
 // stories
-export const Default = BaseModalTemplate.bind({})
-Default.args = { ...BaseModalData }
+export const BaseStory = BaseModalTemplate.bind({})
+BaseStory.args = { ...BaseModalData }
 
 export const CustomTrigger = BaseModalWithTriggerTemplate.bind({})
 CustomTrigger.args = { ...BaseModalData }

package/src/components/BasePlaceholder/BasePlaceholder.stories.js

@@ -24,6 +24,6 @@ const BasePlaceholderTemplate = (args) => ({
   template: `<div><BasePlaceholder /></div>`
 })
 
-export const Base = BasePlaceholderTemplate.bind({})
-Base.storyName = 'BasePlaceholder' // single story hoisting
-Base.args = { ...BasePlaceholderData }
+export const BaseStory = BasePlaceholderTemplate.bind({})
+BaseStory.storyName = 'BasePlaceholder' // single story hoisting
+BaseStory.args = { ...BasePlaceholderData }

package/src/components/BaseRadioGroup/BaseRadioGroup.stories.js

@@ -0,0 +1,47 @@
+import BaseRadioGroup from './BaseRadioGroup.vue'
+
+export default {
+  title: 'Components/Base/BaseRadioGroup',
+  component: BaseRadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The BaseRadioGroup component is expected to contain an array of options and a grouping name with the goal of selecting a single option.'
+      }
+    }
+  }
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    options: [
+      {
+        id: 'breaking',
+        title: 'Breaking News',
+        text: 'All JPL News delivered immediately'
+      },
+      {
+        id: 'daily',
+        title: 'Daily News',
+        text: 'Single Daily JPL News summary'
+      },
+      {
+        id: 'weekly',
+        title: 'Weekly News',
+        text: 'Single Weekly JPL News summary'
+      },
+      {
+        id: 'monthly',
+        title: 'Monthly News',
+        text: 'Monthly Digest for JPL News'
+      }
+    ],
+    group: 'email',
+    preselected: 'breaking',
+    heading: 'JPL Forms',
+    subHeading: 'Choose how frequently you want to receive updates (opt out anytime):',
+    title: 'Email Groups'
+  }
+}

package/src/components/BaseSwimlane/BaseSwimlane.stories.js

@@ -0,0 +1,45 @@
+import BaseSwimlane from './BaseSwimlane.vue'
+
+export default {
+  title: 'Components/Base/BaseSwimlane',
+  component: BaseSwimlane,
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component: `The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through.`
+      }
+    }
+  }
+}
+
+export const BaseSwimlaneData = {
+  words: [
+    'Artists',
+    'Communicators',
+    'Designers',
+    'Disruptors',
+    'Dreamers',
+    'Educators',
+    'Engineers',
+    'Innovators',
+    'Inventors',
+    'Makers',
+    'Problem Solvers',
+    'Roboticists',
+    'Scientists',
+    'Software Engineers',
+    'Thinkers',
+    'Visualizers'
+  ],
+  rows: 9,
+  scale: 2,
+  transition: 'ease-out',
+  transitionDuration: 1800,
+  transitionDelay: 800
+}
+
+// stories
+export const BaseStory = {
+  args: BaseSwimlaneData
+}

package/src/components/BaseTag/BaseTag.stories.js

@@ -19,7 +19,7 @@ export default {
   },
   parameters: {
     slots: {
-      default: 'Default slot'
+      default: 'BaseStory slot'
     }
   }
 }

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

@@ -5,7 +5,8 @@ export default {
   component: BaseTimer
 }
 
-export const FullDateTime = {
+export const BaseStory = {
+  name: 'Full Date Time',
   args: {
     targetDateTime: '2011-11-26 15:02:21+01:00',
     selectedUnits: ['years', 'months', 'days', 'hours', 'minutes', 'seconds'],

package/src/components/BaseUnitToggle/BaseUnitToggle.stories.js

@@ -42,7 +42,8 @@ Imperial.args = {
   valueSystem: 'imperial'
 }
 
-export const Metric = {
+export const BaseStory = {
+  name: 'Metric',
   args: {
     unitPair: 'MI_KM',
     value: 999999,

package/src/components/BaseVideo/BaseVideo.stories.js

@@ -22,7 +22,7 @@ export const BaseVideoData = {
   width: null
 }
 
-export const Base = {
+export const BaseStory = {
   args: {
     data: BaseVideoData
   }

package/src/components/BlockAudio/BlockAudio.stories.js

@@ -26,4 +26,4 @@ export const BlockAudioData = {
     type: 'audio'
   }
 }
-export const Base = { name: 'BlockAudio', args: { data: BlockAudioData } }
+export const BaseStory = { name: 'BlockAudio', args: { data: BlockAudioData } }

package/src/components/BlockCard/BlockCard.stories.js

@@ -31,4 +31,4 @@ export const BlockCardData = {
   }
 }
 
-export const Item = { name: 'BlockCard', args: BlockCardData }
+export const BaseStory = { name: 'BlockCard', args: BlockCardData }

package/src/components/BlockCardGroup/BlockCardGroup.stories.js

@@ -65,7 +65,7 @@ export const BlockCardGroupData = [
   }
 ]
 
-export const Group = {
+export const BaseStory = {
   name: 'BlockCardGroup',
   args: { facts: BlockCardGroupData }
 }

package/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js

@@ -45,7 +45,7 @@ export const BlockCircleImageCardData = {
   icon: true
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     ...BlockCircleImageCardData,
     icon: false

package/src/components/BlockCta/BlockCta.stories.js

@@ -17,7 +17,7 @@ export const BlockCtaData = {
   externalLink: ''
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BlockCtaData
   }

package/src/components/BlockHeading/BlockHeading.stories.js

@@ -14,7 +14,7 @@ export const BlockHeadingData = {
 }
 
 // stories
-export const Heading = {
+export const BaseStory = {
   name: 'BlockHeading',
   args: {
     data: BlockHeadingData

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

@@ -25,7 +25,7 @@ export const BlockIframeEmbedData = {
   url: `https://eyes.nasa.gov/apps/orrery/#/sc_perseverance`
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BlockIframeEmbedData
   }

package/src/components/BlockImage/BlockImage.stories.js

@@ -84,8 +84,9 @@ const BlockImageTemplate = (args) => ({
     <BlockImage v-bind="args" />`
 })
 
-export const Standard = BlockImageTemplate.bind({})
-Standard.args = {
+export const BaseStory = BlockImageTemplate.bind({})
+BaseStory.storyName = 'Standard'
+BaseStory.args = {
   data: BlockImageData,
   fullBleed: BlockImageData.fullBleed
 }

package/src/components/BlockImageCarousel/BlockImageCarousel.stories.js

@@ -98,7 +98,7 @@ export const BlockImageCarouselData = [
 ]
 
 // stories
-export const Carousel = {
+export const BaseStory = {
   name: 'BlockImageCarousel',
   args: {
     blockId: 'ev106po56n',

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

@@ -51,7 +51,7 @@ export const BlockImageCarouselItemData = {
   }
 }
 
-export const SingleItem = {
+export const BaseStory = {
   name: 'BlockImageCarouselItem',
   args: {
     image: BlockImageCarouselItemData.item.image,

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

@@ -38,7 +38,7 @@ export const BlockImageComparisonData = {
 }
 
 // stories
-export const Comparison = {
+export const BaseStory = {
   name: 'BlockImageComparison',
   args: {
     data: BlockImageComparisonData

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

@@ -49,7 +49,7 @@ export const ImageGalleryData = {
   items: BlockImageCarouselData.slice(1)
 }
 
-export const Gallery = {
+export const BaseStory = {
   name: 'BlockImageGallery',
   args: ImageGalleryData
 }

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

@@ -28,7 +28,8 @@ export const BlockInlineImageData = {
   }
 }
 
-export const AlignRight = {
+export const BaseStory = {
+  name: 'Align Right',
   args: { data: BlockInlineImageData.block }
 }
 

package/src/components/BlockKeyPoints/BlockKeyPoints.stories.js

@@ -20,7 +20,7 @@ export const BlockKeyPointsData = {
 }
 
 // stories
-export const KeyPoints = {
+export const BaseStory = {
   name: 'BlockKeyPoints',
   args: {
     data: BlockKeyPointsData

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

@@ -50,7 +50,8 @@ export const BlockLinkCardData = {
   compact: false
 }
 
-export const SingleItem = {
+export const BaseStory = {
+  name: 'Single Item',
   args: {
     ...BlockLinkCardData
   }

package/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js

@@ -169,7 +169,8 @@ const BlockLinkCarouselMultipleTemplate = (args) => ({
 })
 
 // stories
-export const CardCarousel = {
+export const BaseStory = {
+  name: 'Card Carousel',
   args: {
     itemType: 'cards',
     heading: 'Related Pages',

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

@@ -45,7 +45,8 @@ export const BlockLinkTileData = {
   }
 }
 
-export const SingleItem = {
+export const BaseStory = {
+  name: 'Single Item',
   args: {
     data: BlockLinkTileData.card,
     headingLevel: 'h2',

package/src/components/BlockListCards/BlockListCards.stories.js

@@ -61,7 +61,7 @@ export const BlockListCardsData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   name: 'BlockListCards',
   args: {
     data: BlockListCardsData

package/src/components/BlockQuote/BlockQuote.stories.js

@@ -44,8 +44,8 @@ const BlockQuoteTemplate = (args) => ({
   template: `<BlockQuote v-bind="args" />`
 })
 
-export const Default = BlockQuoteTemplate.bind({})
-Default.args = {
+export const BaseStory = BlockQuoteTemplate.bind({})
+BaseStory.args = {
   data: {
     quote: BlockQuoteData.quote,
     attribution: BlockQuoteData.attribution,

package/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js

@@ -52,7 +52,7 @@ export const BlockRelatedLinksData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BlockRelatedLinks',
   args: {
     ...BlockRelatedLinksData

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -76,7 +76,7 @@ export const BlockStreamfieldData = {
   ]
 }
 
-export const Default = {
+export const BaseStory = {
   args: { data: BlockStreamfieldData.body, variant: 'default' }
 }
 

package/src/components/BlockTable/BlockTable.stories.js

@@ -12,7 +12,7 @@ export const BlockTableData = {
     "{'data': [['Header 1', 'Header 2', 'Header 3'], ['Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet'], [None, None, None]], 'cell': [], 'first_row_is_table_header': True, 'first_col_is_header': False, 'table_caption': 'Third row intentionally blank to test parsing.'}"
 }
 
-export const Table = {
+export const BaseStory = {
   name: 'BlockTable',
   args: {
     data: BlockTableData

package/src/components/BlockTeaser/BlockTeaser.stories.js

@@ -50,7 +50,7 @@ export const BlockTeaserData = {
   ]
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     ...BlockTeaserData
   }

package/src/components/BlockText/BlockText.stories.js

@@ -12,7 +12,7 @@ export default {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BlockText',
   args: {
     variant: 'large',

package/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js

@@ -11,7 +11,7 @@ export const BlockTwitterEmbedData = {
   username: 'NASAJPL'
 }
 
-export const List = {
+export const BaseStory = {
   name: 'BlockTwitterEmbed',
   args: {
     data: BlockTwitterEmbedData

package/src/components/BlockVideo/BlockVideo.stories.js

@@ -17,7 +17,7 @@ export const BlockVideoData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BlockVideo',
   args: { data: BlockVideoData.block }
 }

package/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js

@@ -17,4 +17,4 @@ export const BlockVideoEmbedData = {
   }
 }
 
-export const Default = { name: 'BlockVideoEmbed', args: { data: BlockVideoEmbedData.data } }
+export const BaseStory = { name: 'BlockVideoEmbed', args: { data: BlockVideoEmbedData.data } }