@explorer-1/vue 0.0.0 → 0.0.2

package/lib/main.ts

@@ -24,21 +24,188 @@ import {
   mixinFormatEventDates,
   mixinFormatEventTimeInHoursAndMinutes
 } from './../src/utils/mixins'
+
 // components here
+import AsteroidWatchWidget from './../src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
+import BackToTop from './../src/components/BackToTop/BackToTop.vue'
+import BaseAudio from './../src/components/BaseAudio/BaseAudio.vue'
 import BaseButton from './../src/components/BaseButton/BaseButton.vue'
-import BaseHeading from './../src/components/BaseButton/BaseButton.vue'
+import BaseCheckboxGroup from './../src/components/BaseCheckboxGroup/BaseCheckboxGroup.vue'
+import BaseHeading from './../src/components/BaseHeading/BaseHeading.vue'
 import BaseImage from './../src/components/BaseImage/BaseImage.vue'
+import BaseImageCaption from './../src/components/BaseImageCaption/BaseImageCaption.vue'
+import BaseImagePlaceholder from './../src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseLightboxCloseButton from './../src/components/BaseLightboxCloseButton/BaseLightboxCloseButton.vue'
+import BaseLightboxOpenButton from './../src/components/BaseLightboxOpenButton/BaseLightboxOpenButton.vue'
 import BaseLink from './../src/components/BaseLink/BaseLink.vue'
+import BaseModal from './../src/components/BaseModal/BaseModal.vue'
+import BasePlaceholder from './../src/components/BasePlaceholder/BasePlaceholder.vue'
+import BaseRadioGroup from './../src/components/BaseRadioGroup/BaseRadioGroup.vue'
+import BaseSwimlane from './../src/components/BaseSwimlane/BaseSwimlane.vue'
+import BaseTag from './../src/components/BaseTag/BaseTag.vue'
+import BaseTimer from './../src/components/BaseTimer/BaseTimer.vue'
+import BaseUnitToggle from './../src/components/BaseUnitToggle/BaseUnitToggle.vue'
+import BaseVideo from './../src/components/BaseVideo/BaseVideo.vue'
+import BlockAnchor from './../src/components/BlockAnchor/BlockAnchor.vue'
+import BlockAudio from './../src/components/BlockAudio/BlockAudio.vue'
+import BlockCard from './../src/components/BlockCard/BlockCard.vue'
+import BlockCardGroup from './../src/components/BlockCardGroup/BlockCardGroup.vue'
+import BlockCircleImageCard from './../src/components/BlockCircleImageCard/BlockCircleImageCard.vue'
+import BlockCta from './../src/components/BlockCta/BlockCta.vue'
 import BlockHeading from './../src/components/BlockHeading/BlockHeading.vue'
+import BlockIframeEmbed from './../src/components/BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockImage from './../src/components/BlockImage/BlockImage.vue'
 import BlockImageFullBleed from './../src/components/BlockImage/BlockImageFullBleed.vue'
 import BlockImageStandard from './../src/components/BlockImage/BlockImageStandard.vue'
+import BlockImageCarousel from './../src/components/BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageCarouselItem from './../src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue'
+import BlockImageComparison from './../src/components/BlockImageComparison/BlockImageComparison.vue'
+import BlockImageGallery from './../src/components/BlockImageGallery/BlockImageGallery.vue'
+import BlockInlineImage from './../src/components/BlockInlineImage/BlockInlineImage.vue'
+import BlockKeyPoints from './../src/components/BlockKeyPoints/BlockKeyPoints.vue'
+import BlockLinkCard from './../src/components/BlockLinkCard/BlockLinkCard.vue'
+import BlockLinkCarousel from './../src/components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockLinkTile from './../src/components/BlockLinkTile/BlockLinkTile.vue'
+import BlockListCards from './../src/components/BlockListCards/BlockListCards.vue'
+import BlockQuote from './../src/components/BlockQuote/BlockQuote.vue'
+import BlockRelatedLinks from './../src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import RelatedLink from './../src/components/BlockRelatedLinks/RelatedLink.vue'
+import BlockStreamfield from './../src/components/BlockStreamfield/BlockStreamfield.vue'
+import BlockTable from './../src/components/BlockTable/BlockTable.vue'
+import BlockTeaser from './../src/components/BlockTeaser/BlockTeaser.vue'
+import BlockText from './../src/components/BlockText/BlockText.vue'
+import BlockTwitterEmbed from './../src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue'
+import BlockVideo from './../src/components/BlockVideo/BlockVideo.vue'
+import BlockVideoEmbed from './../src/components/BlockVideoEmbed/BlockVideoEmbed.vue'
+import CalendarButton from './../src/components/CalendarButton/CalendarButton.vue'
+import DetailHeadline from './../src/components/DetailHeadline/DetailHeadline.vue'
+import DsnWidget from './../src/components/DsnWidget/DsnWidget.vue'
+import EventCard from './../src/components/EventCard/EventCard.vue'
+import EventDetailHero from './../src/components/EventDetailHero/EventDetailHero.vue'
+import FormContact from './../src/components/FormContact/FormContact.vue'
+import FormNewsletterSignup from './../src/components/FormNewsletterSignup/FormNewsletterSignup.vue'
+import HeroLarge from './../src/components/HeroLarge/HeroLarge.vue'
+import HeroListingIndex from './../src/components/HeroListingIndex/HeroListingIndex.vue'
+import HeroMedia from './../src/components/HeroMedia/HeroMedia.vue'
+import HeroMedium from './../src/components/HeroMedium/HeroMedium.vue'
+import HomepageCarousel from './../src/components/HomepageCarousel/HomepageCarousel.vue'
+import HomepageCarouselItem from './../src/components/HomepageCarouselItem/HomepageCarouselItem.vue'
+import HomepageEmbedBlock from './../src/components/HomepageEmbedBlock/HomepageEmbedBlock.vue'
+import HomepageFeaturedRobot from './../src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.vue'
+import HomepageMissionsCarousel from './../src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue'
+import HomepageStats from './../src/components/HomepageStats/HomepageStats.vue'
+import HomepageTeaserBlock from './../src/components/HomepageTeaserBlock/HomepageTeaserBlock.vue'
+import Icon360 from './../src/components/Icons/Icon360.vue'
+import IconArrow from './../src/components/Icons/IconArrow.vue'
 import IconArrows from './../src/components/Icons/IconArrows.vue'
+import IconAudio from './../src/components/Icons/IconAudio.vue'
+import IconBook from './../src/components/Icons/IconBook.vue'
+import IconBookUser from './../src/components/Icons/IconBookUser.vue'
+import IconBriefcase from './../src/components/Icons/IconBriefcase.vue'
+import IconCalendar from './../src/components/Icons/IconCalendar.vue'
 import IconCaret from './../src/components/Icons/IconCaret.vue'
+import IconCheckbox from './../src/components/Icons/IconCheckbox.vue'
+import IconCheckboxSelected from './../src/components/Icons/IconCheckboxSelected.vue'
+import IconClose from './../src/components/Icons/IconClose.vue'
+import IconCloseLightbox from './../src/components/Icons/IconCloseLightbox.vue'
+import IconDownload from './../src/components/Icons/IconDownload.vue'
+import IconDropdown from './../src/components/Icons/IconDropdown.vue'
+import IconEnvelope from './../src/components/Icons/IconEnvelope.vue'
+import IconExpand from './../src/components/Icons/IconExpand.vue'
+import IconExternal from './../src/components/Icons/IconExternal.vue'
+import IconFilter from './../src/components/Icons/IconFilter.vue'
+import IconForwardTen from './../src/components/Icons/IconForwardTen.vue'
+import IconGrid from './../src/components/Icons/IconGrid.vue'
+import IconHand from './../src/components/Icons/IconHand.vue'
+import IconInfo from './../src/components/Icons/IconInfo.vue'
+import IconLink from './../src/components/Icons/IconLink.vue'
+import IconList from './../src/components/Icons/IconList.vue'
 import IconLocation from './../src/components/Icons/IconLocation.vue'
+import IconMagnifyingGlass from './../src/components/Icons/IconMagnifyingGlass.vue'
+import IconMedal from './../src/components/Icons/IconMedal.vue'
+import IconMenu from './../src/components/Icons/IconMenu.vue'
+import IconMinus from './../src/components/Icons/IconMinus.vue'
+import IconMute from './../src/components/Icons/IconMute.vue'
+import IconNext from './../src/components/Icons/IconNext.vue'
+import IconPause from './../src/components/Icons/IconPause.vue'
+import IconPlay from './../src/components/Icons/IconPlay.vue'
+import IconPlus from './../src/components/Icons/IconPlus.vue'
+import IconPrev from './../src/components/Icons/IconPrev.vue'
+import IconRewindTen from './../src/components/Icons/IconRewindTen.vue'
+import IconSearch from './../src/components/Icons/IconSearch.vue'
+import IconShare from './../src/components/Icons/IconShare.vue'
+import IconSlideshow from './../src/components/Icons/IconSlideshow.vue'
+import IconSocialEmail from './../src/components/Icons/IconSocialEmail.vue'
+import IconSocialFacebook from './../src/components/Icons/IconSocialFacebook.vue'
+import IconSocialGoogleClassroom from './../src/components/Icons/IconSocialGoogleClassroom.vue'
+import IconSocialInstagram from './../src/components/Icons/IconSocialInstagram.vue'
+import IconSocialPinterest from './../src/components/Icons/IconSocialPinterest.vue'
+import IconSocialReddit from './../src/components/Icons/IconSocialReddit.vue'
+import IconSocialTwitter from './../src/components/Icons/IconSocialTwitter.vue'
+import IconSocialYoutube from './../src/components/Icons/IconSocialYoutube.vue'
+import IconStop from './../src/components/Icons/IconStop.vue'
+import IconTime from './../src/components/Icons/IconTime.vue'
+import IconUniversity from './../src/components/Icons/IconUniversity.vue'
 import IconUser from './../src/components/Icons/IconUser.vue'
+import IconVolume from './../src/components/Icons/IconVolume.vue'
+import ImageDetailContextImage from './../src/components/ImageDetailContextImage/ImageDetailContextImage.vue'
+import LayoutHelper from './../src/components/LayoutHelper/LayoutHelper.vue'
+import LoadingTransition from './../src/components/LoadingTransition/LoadingTransition.vue'
+import LogoCaltech from './../src/components/LogoCaltech/LogoCaltech.vue'
+import LogoTribrand from './../src/components/LogoTribrand/LogoTribrand.vue'
+import MissionDetailAbout from './../src/components/MissionDetailAbout/MissionDetailAbout.vue'
+import MissionDetailHero from './../src/components/MissionDetailHero/MissionDetailHero.vue'
+import MissionDetailHighlights from './../src/components/MissionDetailHighlights/MissionDetailHighlights.vue'
+import MissionDetailInlineImage from './../src/components/MissionDetailInlineImage/MissionDetailInlineImage.vue'
+import MissionDetailStats from './../src/components/MissionDetailStats/MissionDetailStats.vue'
+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 MixinFancybox from './../src/components/MixinFancybox/MixinFancybox.vue'
+import MixinVideoBg from './../src/components/MixinVideoBg/MixinVideoBg.vue'
+import NavDesktop from './../src/components/NavDesktop/NavDesktop.vue'
+import NavHeading from './../src/components/NavHeading/NavHeading.vue'
+import NavHighlight from './../src/components/NavHighlight/NavHighlight.vue'
+import NavLinkList from './../src/components/NavLinkList/NavLinkList.vue'
+import NavLogoLinks from './../src/components/NavLogoLinks/NavLogoLinks.vue'
+import NavMobile from './../src/components/NavMobile/NavMobile.vue'
+import NavSearchForm from './../src/components/NavSearchForm/NavSearchForm.vue'
+import NavSecondary from './../src/components/NavSecondary/NavSecondary.vue'
+import NavSocial from './../src/components/NavSocial/NavSocial.vue'
+import NewsDetailMediaContact from './../src/components/NewsDetailMediaContact/NewsDetailMediaContact.vue'
+import ParallaxContainer from './../src/components/ParallaxContainer/ParallaxContainer.vue'
+import ParallaxElement from './../src/components/ParallaxElement/ParallaxElement.vue'
+import PastEventsCarousel from './../src/components/PastEventsCarousel/PastEventsCarousel.vue'
+import PodcastEpisodeCard from './../src/components/PodcastEpisodeCard/PodcastEpisodeCard.vue'
+import PodcastSeriesCarousel from './../src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue'
+import ProfileDetailSectionGroup from './../src/components/ProfileDetailSectionGroup/ProfileDetailSectionGroup.vue'
+import RoboticsDetailStats from './../src/components/RoboticsDetailStats/RoboticsDetailStats.vue'
+import SearchFilterGroup from './../src/components/SearchFilterGroup/SearchFilterGroup.vue'
+import SearchInput from './../src/components/SearchInput/SearchInput.vue'
+import SearchPagination from './../src/components/SearchPagination/SearchPagination.vue'
+import SearchResultCard from './../src/components/SearchResultCard/SearchResultCard.vue'
+import SearchResultGridItem from './../src/components/SearchResultGridItem/SearchResultGridItem.vue'
+import SearchResultsList from './../src/components/SearchResultsList/SearchResultsList.vue'
+import SearchSelectMenu from './../src/components/SearchSelectMenu/SearchSelectMenu.vue'
+import ShareButtons from './../src/components/ShareButtons/ShareButtons.vue'
+import ShareButtonsEdu from './../src/components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import SkipLink from './../src/components/SkipLink/SkipLink.vue'
+// import SwimlaneCTA from './../src/components/SwimlaneCTA/SwimlaneCTA.vue'
+import TheFooter from './../src/components/TheFooter/TheFooter.vue'
+import ThumbnailCarousel from './../src/components/ThumbnailCarousel/ThumbnailCarousel.vue'
+import TopicDetailMissionCarousel from './../src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.vue'
+import TopicDetailMissionCarouselItem from './../src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue'
+import TopicDetailMissionSpotlight from './../src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.vue'
+import TopicDetailMore from './../src/components/TopicDetailMore/TopicDetailMore.vue'
+import TopicDetailMoreItem from './../src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue'
+import TopicDetailStreamfield from './../src/components/TopicDetailStreamfield/TopicDetailStreamfield.vue'
+import YearTicker from './../src/components/YearTicker/YearTicker.vue'
+
+// page templates
+import PageContent from './../src/templates/PageContent/PageContent.vue'
+import PageEventDetail from './../src/templates/PageEventDetail/PageEventDetail.vue'
+import PageNewsDetail from './../src/templates/PageNewsDetail/PageNewsDetail.vue'
 
 export {
   type Explorer1Theme,
@@ -61,18 +228,182 @@ export {
   mixinFormatSplitEventDates,
   mixinFormatEventDates,
   mixinFormatEventTimeInHoursAndMinutes,
+  AsteroidWatchWidget,
+  BackToTop,
+  BaseAudio,
   BaseButton,
+  BaseCheckboxGroup,
   BaseHeading,
   BaseImage,
+  BaseImageCaption,
+  BaseImagePlaceholder,
+  BaseLightboxCloseButton,
+  BaseLightboxOpenButton,
   BaseLink,
+  BaseModal,
+  BasePlaceholder,
+  BaseRadioGroup,
+  BaseSwimlane,
+  BaseTag,
+  BaseTimer,
+  BaseUnitToggle,
+  BaseVideo,
+  BlockAnchor,
+  BlockAudio,
+  BlockCard,
+  BlockCardGroup,
+  BlockCircleImageCard,
+  BlockCta,
   BlockHeading,
+  BlockIframeEmbed,
   BlockImage,
   BlockImageFullBleed,
   BlockImageStandard,
+  BlockImageCarousel,
+  BlockImageCarouselItem,
+  BlockImageComparison,
+  BlockImageGallery,
+  BlockInlineImage,
+  BlockKeyPoints,
+  BlockLinkCard,
+  BlockLinkCarousel,
+  BlockLinkTile,
+  BlockListCards,
+  BlockQuote,
+  BlockRelatedLinks,
+  RelatedLink,
+  BlockStreamfield,
+  BlockTable,
+  BlockTeaser,
+  BlockText,
+  BlockTwitterEmbed,
+  BlockVideo,
+  BlockVideoEmbed,
+  CalendarButton,
+  DetailHeadline,
+  DsnWidget,
+  EventCard,
+  EventDetailHero,
+  FormContact,
+  FormNewsletterSignup,
+  HeroLarge,
+  HeroListingIndex,
+  HeroMedia,
+  HeroMedium,
+  HomepageCarousel,
+  HomepageCarouselItem,
+  HomepageEmbedBlock,
+  HomepageFeaturedRobot,
+  HomepageMissionsCarousel,
+  HomepageStats,
+  HomepageTeaserBlock,
+  Icon360,
+  IconArrow,
   IconArrows,
+  IconAudio,
+  IconBook,
+  IconBookUser,
+  IconBriefcase,
+  IconCalendar,
   IconCaret,
+  IconCheckbox,
+  IconCheckboxSelected,
+  IconClose,
+  IconCloseLightbox,
+  IconDownload,
+  IconDropdown,
+  IconEnvelope,
+  IconExpand,
+  IconExternal,
+  IconFilter,
+  IconForwardTen,
+  IconGrid,
+  IconHand,
+  IconInfo,
+  IconLink,
+  IconList,
   IconLocation,
+  IconMagnifyingGlass,
+  IconMedal,
+  IconMenu,
+  IconMinus,
+  IconMute,
+  IconNext,
+  IconPause,
+  IconPlay,
+  IconPlus,
+  IconPrev,
+  IconRewindTen,
+  IconSearch,
+  IconShare,
+  IconSlideshow,
+  IconSocialEmail,
+  IconSocialFacebook,
+  IconSocialGoogleClassroom,
+  IconSocialInstagram,
+  IconSocialPinterest,
+  IconSocialReddit,
+  IconSocialTwitter,
+  IconSocialYoutube,
+  IconStop,
+  IconTime,
+  IconUniversity,
   IconUser,
+  IconVolume,
+  ImageDetailContextImage,
+  LayoutHelper,
+  LoadingTransition,
+  LogoCaltech,
+  LogoTribrand,
+  MissionDetailAbout,
+  MissionDetailHero,
+  MissionDetailHighlights,
+  MissionDetailInlineImage,
+  MissionDetailStats,
+  MissionDetailStreamfield,
   MixinAnimationCaret,
-  MixinFancybox
+  MixinCarousel,
+  MixinDropdownToggle,
+  MixinFancybox,
+  MixinVideoBg,
+  NavDesktop,
+  NavHeading,
+  NavHighlight,
+  NavLinkList,
+  NavLogoLinks,
+  NavMobile,
+  NavSearchForm,
+  NavSecondary,
+  NavSocial,
+  NewsDetailMediaContact,
+  ParallaxContainer,
+  ParallaxElement,
+  PastEventsCarousel,
+  PodcastEpisodeCard,
+  PodcastSeriesCarousel,
+  ProfileDetailSectionGroup,
+  RoboticsDetailStats,
+  SearchFilterGroup,
+  SearchInput,
+  SearchPagination,
+  SearchResultCard,
+  SearchResultGridItem,
+  SearchResultsList,
+  SearchSelectMenu,
+  ShareButtons,
+  ShareButtonsEdu,
+  SkipLink,
+  // SwimlaneCTA,
+  TheFooter,
+  ThumbnailCarousel,
+  TopicDetailMissionCarousel,
+  TopicDetailMissionCarouselItem,
+  TopicDetailMissionSpotlight,
+  TopicDetailMore,
+  TopicDetailMoreItem,
+  TopicDetailStreamfield,
+  YearTicker,
+  PageContent,
+  PageEventDetail,
+  PageNewsDetail
 }

package/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@explorer-1/vue",
+  "version": "0.0.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -9,7 +10,6 @@
     "type": "git",
     "url": "https://github.com/nasa-jpl/explorer-1"
   },
-  "version": "0.0.0",
   "type": "module",
   "prettier": "@explorer-1/prettier-config",
   "dependencies": {
@@ -26,7 +26,9 @@
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
     "vue": "^3.4.21",
-    "vue3-compare-image": "^1.2.5"
+    "vue-observe-visibility": "^1.0.0",
+    "vue3-compare-image": "^1.2.5",
+    "@explorer-1/common": "1.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -38,7 +40,6 @@
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1",
     "vue-tsc": "^2.0.6",
-    "@explorer-1/common": "1.0.0",
     "@explorer-1/prettier-config": "1.0.0"
   },
   "scripts": {
@@ -48,7 +49,6 @@
     "lint:fix": "eslint ./src --fix",
     "preview": "vite preview",
     "prepare:fonts": "cp -R ./node_modules/@explorer-1/common/src/fonts/ ./src/assets/fonts/",
-    "prepare:public": "cp -R ./node_modules/@explorer-1/common/src/public/explorer-1/ ./public/explorer-1",
-    "prepare:public:edu": "cp -R ./node_modules/@explorer-1/common/src/public/explorer-1/ ./public/edu/explorer-1"
+    "prepare:public": "cp -R ./node_modules/@explorer-1/common/src/public/explorer-1/ ./public/explorer-1"
   }
 }

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

@@ -1,7 +1,7 @@
 import BaseHeading from './BaseHeading.vue'
-import IconArrows from '@explorer-1/vue/src/components/Icons/IconArrows.vue'
-import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue'
-import IconUser from '@explorer-1/vue/src/components/Icons/IconUser.vue'
+import IconArrows from './../Icons/IconArrows.vue'
+import IconLocation from './../Icons/IconLocation.vue'
+import IconUser from './../Icons/IconUser.vue'
 
 export default {
   title: 'Components/Base/BaseHeading',

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

@@ -1,7 +1,5 @@
-import BaseImage from './BaseImage.vue'
-import BaseImagePlaceholder, {
-  aspectRatios
-} from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder, { aspectRatios } from './BaseImagePlaceholder.vue'
 export default {
   title: 'Components/Base/BaseImagePlaceholder',
   component: BaseImagePlaceholder,

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

@@ -3,6 +3,16 @@ import BlockCard from './BlockCard.vue'
 export default {
   title: 'Components/Blocks/BlockCard',
   component: BlockCard,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="lg:w-1/3"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
   excludeStories: /.*Data$/
 }
 

package/src/components/CalendarButton/CalendarButton.vue

@@ -16,7 +16,7 @@ import { defineComponent } from 'vue'
 import { ICalendar } from 'datebook'
 import type { CalendarOptions } from 'datebook'
 // @ts-ignore
-import dayjs from './../../utils/dayjs'
+import dayjs from 'dayjs'
 import BaseButton from './../BaseButton/BaseButton.vue'
 
 export default defineComponent({

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -234,7 +234,7 @@ export default defineComponent({
             @apply absolute top-0 left-0 block;
           }
         }
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow,
           > .arrow-wrapper > .arrow-fixed {
             animation-delay: 50ms !important; // hover intent
@@ -245,7 +245,7 @@ export default defineComponent({
     @screen lg {
       // specific directional animation
       .swiper-next.BaseButton > .label {
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow {
             animation: arrow-carousel-next-anim 0.1s linear normal;
           }
@@ -257,7 +257,7 @@ export default defineComponent({
       }
 
       .swiper-prev.BaseButton > .label {
-        @include hover {
+        &:hover {
           > .arrow-wrapper > .arrow {
             animation: arrow-carousel-prev-anim 0.1s linear normal;
           }

package/src/components/MixinFancybox/MixinFancyboxOpenButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
-import IconExpand from '@explorer-1/vue/src/components/Icons/IconExpand.vue'
+import IconExpand from './../Icons/IconExpand.vue'
 
 export default defineComponent({
   name: 'MixinFancyboxOpenButton',

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -136,7 +136,7 @@ export default defineComponent({
         }
       }
     }
-    @include hover {
+    &:hover {
       > span {
         @apply border-jpl-red;
 

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -139,7 +139,7 @@ export default defineComponent({
         @apply border-primary #{!important};
       }
     }
-    @include hover {
+    &:hover {
       &.-active {
         > span {
           @apply text-gray-mid-dark;

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -124,7 +124,7 @@ export default defineComponent({
       @apply border-b border-transparent pb-2px;
     }
 
-    @include hover {
+    &:hover {
       > span {
         @apply border-black text-black;
       }

package/src/components/NavSocial/NavSocial.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .BaseButton {
   @apply relative;
-  @include hover {
+  &:hover {
     @apply z-10;
   }
   // we have to define these here to override the extracted border styles native to BaseButton

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -57,7 +57,7 @@
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
 // @ts-ignore
-import dayjs from './../../utils/dayjs'
+import dayjs from 'dayjs'
 import SearchResultCard from './../SearchResultCard/SearchResultCard.vue'
 import SearchResultGridItem from './../SearchResultGridItem/SearchResultGridItem.vue'
 

package/src/components/ShareButtons/ShareButtons.vue

@@ -124,7 +124,7 @@ export default defineComponent({
 .ShareButtons {
   .BaseButton {
     @apply relative;
-    @include hover {
+    &:hover {
       @apply z-10;
     }
   }

package/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js

@@ -5,8 +5,8 @@ export default {
   component: ShareButtonsEdu
 }
 
-export const Default = {
-  name: 'Share Buttons',
+export const ShareButtons = {
+  name: 'Share Buttons EDU',
   args: {
     url: 'https://jpl.nasa.gov/edu/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
     title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight"

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -196,7 +196,7 @@ const buttonClass = computed(() => {
 .ShareButtonsEdu {
   .BaseButton {
     @apply relative focus:z-20;
-    @include hover {
+    &:hover {
       @apply z-20;
     }
   }

package/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import SwimlaneCTA from '@explorer-1/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue'
+import SwimlaneCTA from './SwimlaneCTA.vue'
 
 <Meta
   title="Components/SwimlaneCTA"