@explorer-1/vue 0.2.104 → 0.3.1

package/src/components/LogoTribrand/LogoTribrand.vue

@@ -67,27 +67,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-$logo-text-dark: #1b1a19;
-
-.LogoTribrand {
-  width: 20.25em; // 324x72 px at .text-base
-  height: auto;
-
-  .logo-path-jpl-caltech {
-    color: $logo-text-dark;
-  }
-
-  .-transparent.-scrolled & {
-    .logo-path-jpl-caltech {
-      color: $logo-text-dark;
-    }
-  }
-
-  .-transparent &,
-  &.-invert {
-    .logo-path-jpl-caltech {
-      color: #ffffff;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/LogoTribrand';
 </style>

package/src/components/MetaPanel/MetaPanel.vue

@@ -234,9 +234,5 @@ const standardsIste = computed(() => {
   </section>
 </template>
 <style lang="scss">
-.MetaPanel {
-  .MetaPanel-button {
-    @apply border-[1px] font-primary normal-case tracking-normal font-bold text-lg py-2 bg-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetaPanel';
 </style>

package/src/components/MetaPanelAccordion/MetaPanelAccordion.vue

@@ -40,25 +40,5 @@ const { standards } = reactive(props)
   </div>
 </template>
 <style lang="scss">
-.MetaPanelAccordion {
-  .BaseAccordionItem {
-    .BaseAccordionHeader {
-      @apply bg-white;
-      > div {
-        @apply border-none;
-      }
-      button.BaseAccordion-trigger {
-        @apply py-2 px-3;
-        @apply can-hover:hover:no-underline;
-      }
-    }
-    &.-open {
-      .BaseAccordionHeader {
-        button.BaseAccordion-trigger {
-          @apply pb-0;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetaPanelAccordion';
 </style>

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -170,21 +170,5 @@ const themeVariant = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.MetaPanelItems {
-  .MetaPanelItem {
-    @apply flex w-full items-start mb-4 md:mb-0 w-auto;
-    &:last-of-type {
-      @apply mb-0;
-    }
-    .MetaPanelItem-icon {
-      @apply mr-1 w-10 md:w-12;
-    }
-    .MetaPanelItem-heading {
-      @apply text-subtitle text-base md:mb-[.2em] whitespace-nowrap;
-    }
-    .MetaPanelItem-content {
-      @apply font-primary font-bold lg:text-xl;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetaPanelItems';
 </style>

package/src/components/MetadataEduResource/MetadataEduResource.stories.js

@@ -11,6 +11,7 @@ export default {
       options: ['primary', 'secondary']
     }
   },
+  globals: { theme: 'ThemeEdu' },
   excludeStories: /.*Data$/
 }
 

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -84,38 +84,5 @@ const time = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.MetadataEduResource {
-  @apply lg:flex lg:flex-grow;
-  .MetadataEduResourceItem {
-    @apply flex;
-    @apply items-start;
-    @apply mr-4 md:mr-4 xl:mr-8;
-    @apply mb-5 lg:mb-7;
-    @apply lg:min-w-[10rem];
-
-    span {
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-    .MetadataEduResourceIcon {
-      @apply relative mr-3 lg:mr-2 xl:mr-3;
-    }
-  }
-
-  &.-compact {
-    @apply flex flex-grow flex-wrap;
-    .MetadataEduResourceItem {
-      @apply whitespace-nowrap;
-      @apply max-w-none min-w-[4em];
-      @apply mr-6 mb-0;
-      &.-xlScreensOnly {
-        @apply hidden xl:flex;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetadataEduResource';
 </style>

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -150,38 +150,5 @@ const location = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.MetadataEvent {
-  @apply lg:flex lg:flex-grow;
-  .MetadataEventItem {
-    @apply flex;
-    @apply items-start;
-    @apply mr-4 md:mr-4 xl:mr-8;
-    @apply mb-5 lg:mb-7;
-    @apply lg:min-w-[10rem];
-
-    span {
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-    .MetadataEventIcon {
-      @apply text-primary relative mr-3 lg:mr-2 xl:mr-3;
-    }
-  }
-
-  &.-compact {
-    @apply flex flex-grow flex-wrap;
-    .MetadataEventItem {
-      @apply whitespace-nowrap;
-      @apply max-w-none min-w-[4em];
-      @apply mr-6 mb-0;
-    }
-    &.-allow-break {
-      @apply block lg:flex;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetadataEvent';
 </style>

package/src/components/MissionDetailAbout/MissionDetailAbout.vue

@@ -123,78 +123,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailAbout {
-  @apply text-gray-dark; // fallback if no theme
-  li.instrument {
-    @apply mb-3;
-    @apply flex;
-    @apply max-w-full;
-
-    span {
-      @apply opacity-0;
-      @screen lg {
-        max-width: 20ch;
-      }
-    }
-
-    &::before {
-      @apply bg-jpl-red-light;
-      @apply inline-block;
-      @apply relative;
-      @apply mr-3;
-      @apply flex-shrink-0;
-
-      content: '';
-      transform: scale(0);
-      margin-top: 0.65rem;
-      width: 30px;
-      height: 2px;
-    }
-
-    &.lifeless {
-      span {
-        @apply opacity-100;
-      }
-
-      &::before {
-        transform: scale(1);
-      }
-    }
-
-    &.animated {
-      span {
-        @apply animate-fadeIn;
-        @screen lg {
-          max-width: 20ch;
-        }
-
-        -webkit-animation-delay: inherit;
-        animation-delay: inherit;
-      }
-      @for $i from 1 through 20 {
-        &:nth-child(#{$i}) {
-          -webkit-animation-delay: (#{$i * 300ms});
-          animation-delay: (#{$i * 300ms});
-        }
-      }
-
-      &::before {
-        @apply animate-scaleIn;
-
-        -webkit-animation-delay: inherit;
-        animation-delay: inherit;
-        transform-origin: 0% 50%;
-      }
-    }
-  }
-
-  // dark and light treatments
-  .ThemeVariantLight & {
-    @apply text-gray-dark;
-  }
-
-  .ThemeVariantDark & {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailAbout';
 </style>

package/src/components/MissionDetailHero/MissionDetailHero.vue

@@ -244,50 +244,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.MissionDetailHero {
-  .content-wrapper {
-    @screen lg {
-      min-height: 80vh;
-    }
-  }
-
-  .content {
-    // fallback text color
-    @apply text-black;
-  }
-
-  .foreground {
-    @screen lg {
-      width: 55%;
-    }
-
-    img {
-      max-height: 300px;
-      @apply w-auto;
-      @screen lg {
-        max-height: 550px;
-      }
-    }
-  }
-
-  &.ThemeVariantLight {
-    .content {
-      @apply text-black;
-    }
-  }
-
-  &.ThemeVariantDark {
-    .background {
-      &::before {
-        content: '';
-        @apply absolute inset-x-0 bottom-0 min-h-1/2 z-20 bg-gradient-to-b from-transparent to-black;
-      }
-    }
-
-    .content {
-      @apply text-white;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MissionDetailHero';
 </style>

package/src/components/MissionDetailHighlights/MissionDetailHighlights.vue

@@ -313,16 +313,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailHighlights {
-  &.min-h-mission-highlights {
-    min-height: 38rem;
-  }
-
-  .mission-highlights-lines.-filler {
-    padding-top: 60%;
-    @screen lg {
-      @apply pt-0;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailHighlights';
 </style>

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarousel.vue

@@ -141,20 +141,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-
-.MissionHighlightsCarousel {
-  .swiper {
-    .swiper-prev {
-      @apply mr-px;
-    }
-
-    .swiper-prev,
-    .swiper-next {
-      &.swiper-button-disabled {
-        @apply opacity-75 cursor-default bg-none;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailHighlightsCarousel';
 </style>

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarouselItem.vue

@@ -112,12 +112,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.slide-link {
-  @apply invisible;
-
-  .swiper-slide-active & {
-    @apply visible;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MissionDetailHighlightsCarouselItem';
 </style>

package/src/components/MissionDetailInlineImage/MissionDetailInlineImage.vue

@@ -87,11 +87,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.MissionDetailInlineImage {
-  .ThemeVariantDark & {
-    > div {
-      @apply text-white;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailInlineImage';
 </style>

package/src/components/MissionDetailStats/MissionDetailStats.vue

@@ -155,33 +155,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailStats {
-  .adaptive-stats-grid div:nth-child(3) {
-    @apply col-span-3;
-  }
-
-  .theme {
-    @apply bg-gray-light text-gray-dark;
-  }
-
-  .ThemeVariantDark & .theme {
-    @apply bg-jpl-blue-darker bg-opacity-75 text-white;
-  }
-
-  .label {
-    @apply font-semibold mb-3 text-jpl-red-dark;
-  }
-
-  .ThemeVariantDark & .label {
-    @apply text-jpl-blue-light;
-  }
-
-  .legend {
-    @apply text-gray-mid-dark;
-  }
-
-  .ThemeVariantDark & .legend {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailStats';
 </style>

package/src/components/MissionDetailStats/MissionDetailStatsMicro.vue

@@ -33,20 +33,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailStatsMicro {
-  .text-stats-xl {
-    @apply text-base leading-none;
-
-    @screen sm {
-      @apply text-4xl;
-    }
-  }
-
-  .legend {
-    @apply text-sm;
-    @screen sm {
-      @apply text-base;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailStatsMicro';
 </style>

package/src/components/MissionDetailStats/MissionDetailStatsMini.vue

@@ -79,31 +79,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailStatsMini {
-  .theme,
-  .theme-inner {
-    @apply bg-jpl-blue-darker bg-opacity-75 text-white;
-  }
-  // different padding left for first child, which is dynamic
-  .theme-inner {
-    @apply pl-10 pb-10;
-    @screen lg {
-      @apply py-10 pl-0;
-    }
-
-    &:first-child {
-      @apply pt-10;
-      @screen lg {
-        @apply pl-10;
-      }
-      @screen 2xl {
-        @apply pl-0;
-      }
-    }
-  }
-
-  .legend {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailStatsMini';
 </style>

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue

@@ -69,27 +69,6 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.ThemeVariantDark {
-  .MissionDetailStreamfield-heading,
-  .BlockText {
-    @apply text-white;
-  }
-}
-
-.MissionDetailStreamfield {
-  .MissionDetailInlineImage {
-    .featured-image {
-      max-width: 700px;
-      width: auto;
-      position: relative;
-      display: block;
-    }
-    @media screen and (min-width: 1024px) {
-      .BlockText p {
-        max-width: 30ch;
-      }
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MissionDetailStreamfield';
 </style>

package/src/components/MixinCarousel/MixinCarousel.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './MixinCarousel.stories'
 
 <Meta of={Stories} />
@@ -30,4 +30,4 @@ And with a link using the `link` and `linkTitle` props:
 
 ## Used in the following components
 
-See [all usage in the repository](https://github.com/nasa-jpl/www-frontend/search?q=MixinCarousel&type=code).
+See [all usage in the repository](https://github.com/nasa-jpl/explorer-1/search?q=MixinCarousel&type=code).

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -196,11 +196,27 @@ export default defineComponent({
       sliderOptions: {
         ...MixinCarouselOptions,
         initialSlide: this.initialSlide,
+        watchSlidesProgress: true,
         a11y: {
           prevSlideMessage: this.heading ? this.heading + ' - Previous slide' : 'Previous slide',
           nextSlideMessage: this.heading ? this.heading + ' - Next slide' : 'Next slide',
           slideRole: 'link'
         },
+        on: {
+          ...MixinCarouselOptions.on,
+          progress(swiper) {
+            const classList = swiper.el.classList
+            classList.replace('opacity-0', 'opacity-100')
+            swiper.slides.forEach((slide) => {
+              if (slide.classList.contains('swiper-slide-fully-visible')) {
+                slide.setAttribute('aria-hidden', 'false')
+                slide.setAttribute('role', 'link')
+              } else {
+                slide.setAttribute('role', 'presentation')
+              }
+            })
+          }
+        },
         breakpoints: {
           ...MixinCarouselOptions.breakpoints,
           1024: {

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -307,100 +307,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.MixinFancybox {
-  @apply relative;
-
-  &:active {
-    outline: none;
-  }
-
-  .MixinFancyboxOpenButton {
-    @apply can-hover:opacity-0 opacity-70 transition-opacity duration-300 block top-px right-px z-10;
-  }
-
-  &:hover {
-    .MixinFancyboxOpenButton {
-      @apply can-hover:opacity-100 duration-200;
-    }
-  }
-
-  &:focus {
-    .MixinFancyboxOpenButton {
-      @apply can-hover:opacity-100;
-    }
-  }
-
-  img {
-    @apply min-w-full h-auto block;
-  }
-}
-
-// Fancybox overrides for various themes
-.fancybox-theme-dark.fancybox__container {
-  z-index: 9999;
-
-  --fancybox-color: rgba(255, 255, 255, var(--tw-text-opacity));
-  --fancybox-bg: #000000;
-  --fancybox-accent-color: #ffffff;
-  --fancybox-thumbs-width: 100px;
-  --fancybox-thumbs-border-radius: 0;
-  --fancybox-thumbs-ratio: 1 / 1;
-  --carousel-button-bg: rgba(0, 0, 0, 0.9);
-  --carousel-button-border-radius: 0;
-  --carousel-button-svg-width: 30px;
-  --carousel-button-svg-height: 30px;
-  --carousel-button-svg-stroke-width: 3;
-  --carousel-button-svg-filter: none;
-
-  .fancybox__content {
-    @apply z-50;
-  }
-
-  .fancybox__nav {
-    @apply hidden;
-
-    @screen sm {
-      @apply block;
-    }
-  }
-
-  .fancybox__caption {
-    @apply z-40 text-left relative inline-block pt-3 lg:pt-4 w-full;
-
-    h1 {
-      text-overflow: ellipsis;
-    }
-
-    p {
-      @apply inline;
-    }
-  }
-
-  .fancybox__slide.has-image.has-caption.is-draggable {
-    .fancybox__caption {
-      @apply opacity-0 transition-opacity duration-200;
-    }
-  }
-
-  .fancybox__slide.has-image:not(.is-draggable),
-  .fancybox__slide.has-image.has-caption.can-zoom_in,
-  .fancybox__slide.has-image.has-caption.is-selected:not(.is-draggable) {
-    .fancybox__caption {
-      @apply opacity-100 transition-opacity duration-200;
-    }
-  }
-
-  .caption-width {
-    background: rgba(0, 0, 0, 0.95);
-    -webkit-transition: max-width 0.15s ease;
-    transition: max-width 0.15s ease;
-    width: 100%;
-  }
-
-  @screen lg {
-    .fancybox__toolbar {
-      padding: 25px;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MixinFancybox';
 </style>

package/src/components/MixinFancybox/MixinFancyboxOpenButton.vue

@@ -24,12 +24,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.MixinFancyboxOpenButton {
-  // scoped styles for Fancybox Opener button
-  @apply relative pointer-events-none cursor-pointer z-10;
-
-  .BaseButton {
-    @apply -top-px -right-px absolute focus:outline-none xl:text-xl inline-block;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MixinFancyboxOpenButton';
 </style>

package/src/components/MixinVideoBg/MixinVideoBg.vue

@@ -8,6 +8,7 @@
     controls
     preload="auto"
     class="object-cover w-full h-full"
+    data-chromatic="ignore"
   >
     <source
       v-if="video.fileWebm"