@explorer-1/vue 0.2.104 → 0.3.1

package/src/components/BlockGist/BlockGist.vue

@@ -102,29 +102,6 @@ watch(
   </div>
 </template>
 
-<style scoped lang="scss">
-.BlockGist {
-  .GitHubIcon {
-    @apply h-5 pb-0.5 flex flex-row items-baseline flex-grow-0;
-  }
-
-  iframe {
-    @apply border border-gray-light-mid border-t-8 rounded-none;
-  }
-}
-body.ThemeVariantLight {
-  .BlockGist {
-    iframe {
-      @apply border-gray-light-mid;
-    }
-  }
-}
-
-body.ThemeVariantDark {
-  .BlockGist {
-    iframe {
-      @apply border-gray-mid-dark bg-gray-light;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockGist';
 </style>

package/src/components/BlockHeading/BlockHeading.vue

@@ -53,12 +53,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockHeading {
-  &:target {
-    @apply scroll-mt-14;
-    @screen lg {
-      @apply scroll-mt-[7rem];
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockHeading';
 </style>

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -12,6 +12,7 @@
         :height="data.height"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen
+        data-chromatic="ignore"
       ></iframe>
     </template>
     <template v-else>
@@ -29,10 +30,10 @@
             class="w-full border-none"
             :title="data.title"
             :src="data.url"
-            data-chromatic="ignore"
             width="90%"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
+            data-chromatic="ignore"
           ></iframe>
         </div>
       </BaseImagePlaceholder>

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

@@ -181,6 +181,7 @@ export const EduLesson = {
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     size: 'sm',
@@ -210,6 +211,7 @@ export const EduExplainerArticle = {
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     data: {
@@ -234,6 +236,7 @@ export const EduExplainerArticle = {
   }
 }
 export const LargeEduExplainerArticle = {
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     size: 'lg',
@@ -260,6 +263,7 @@ export const LargeEduExplainerArticle = {
 }
 
 export const EduCollection = {
+  globals: { theme: 'ThemeEdu' },
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
@@ -296,6 +300,7 @@ export const EduCollection = {
   }
 }
 export const EduCollectionLarge = {
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...BlockLinkCardData,
     size: 'lg',
@@ -328,6 +333,7 @@ export const EduCollectionLarge = {
 }
 
 export const EduNewsItem = {
+  globals: { theme: 'ThemeEdu' },
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -405,33 +405,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockLinkCard {
-  .text-subtitle.divide-x {
-    @apply leading-none #{!important};
-  }
-  .ThemeVariantDark & {
-    @apply bg-white;
-    .BlockLinkCard__CardContent,
-    .BlockLinkCard__CardArrow {
-      @apply px-6;
-      @apply print:px-0;
-    }
-    .BaseImagePlaceholder {
-      @apply bg-gray-mid-dark;
-    }
-  }
-  .MetadataEvent,
-  .MetadataEduResource {
-    &.-compact {
-      .MetadataEventItem,
-      .MetadataEduResourceItem {
-        @apply mr-2.5;
-      }
-    }
-    .MetadataEventIcon,
-    .MetadataEduResourceIcon {
-      @apply mr-1;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkCard';
 </style>

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -119,14 +119,5 @@ const isSmall = computed(() => {
   </BaseLink>
 </template>
 <style lang="scss">
-.BlockLinkCardCollectionLg {
-  .MetadataEduResource .MetadataEduResourceItem {
-    .MetadataEduResourceIcon {
-      @apply text-white;
-    }
-    span {
-      @apply text-white;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkCardCollectionLg';
 </style>

package/src/components/BlockLinkCardList/BlockLinkCardList.vue

@@ -23,11 +23,5 @@ const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
   </div>
 </template>
 <style lang="scss">
-.BlockLinkCardList {
-  .BlockLinkCard {
-    div.bg-gray-dark.relative.mb-6 {
-      @apply mb-3 #{!important};
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkCardList';
 </style>

package/src/components/BlockLinkTile/BlockLinkTile.vue

@@ -188,9 +188,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockLinkTile {
-  .text-subtitle.divide-x {
-    @apply leading-none #{!important};
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkTile';
 </style>

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.vue

@@ -162,16 +162,6 @@ export default defineComponent({
   }
 })
 </script>
-<style type="scss">
-.BlockNewsletterSignup {
-  fieldset > div {
-    column-count: 2;
-  }
-  .email-container input {
-    @apply mt-0 -mr-1;
-  }
-  .BaseRadioGroup label {
-    @apply text-base text-left;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockNewsletterSignup';
 </style>

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

@@ -46,12 +46,7 @@ export const BlockStreamfieldMinimalData = {
     {
       blockType: 'RichTextBlock',
       value:
-        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><h2 data-block-key="cba9u">A heading in BlockText</h2><p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit.</p><h3 data-block-key="ujfka8">A heading in BlockText</h3><p>Quisque vitae justo quis justo malesuada molestie.</p><h2 data-block-key="ujfka8">A heading in BlockText</h2><p>Cras sed tincidunt dui.</p>\n'
-    },
-    {
-      blockType: 'RichTextBlock',
-      value:
-        '<p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+        '<p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.</p>\n'
     }
   ]
 }
@@ -61,7 +56,7 @@ export const BlockStreamfieldTruncatedData = {
     {
       blockType: 'RichTextBlock',
       value:
-        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><h2 data-block-key="cba9u">A heading in BlockText</h2><p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit.</p><h3 data-block-key="ujfka8">A heading in BlockText</h3><p>Quisque vitae justo quis justo malesuada molestie.</p><h2 data-block-key="ujfka8">A heading in BlockText</h2><p>Cras sed tincidunt dui.</p>\n'
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
     },
     { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
     {

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -391,32 +391,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockStreamfield {
-  // makes everything appear equal width
-  &.-fluid {
-    .LayoutHelper {
-      @apply block;
-      &.container {
-        @apply px-0;
-      }
-      > div.lg\:px-0.px-4 {
-        @apply px-0;
-      }
-    }
-
-    .BlockInlineImage {
-      .col-start-3 {
-        @apply col-start-1 col-span-7;
-      }
-
-      .col-start-6.col-span-5 {
-        @apply col-span-7;
-      }
-    }
-
-    .p-4.caption-area {
-      @apply px-0;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockStreamfield';
 </style>

package/src/components/FormNewsletterSignup/FormNewsletterSignup.vue

@@ -255,8 +255,6 @@ export default defineComponent({
 })
 </script>
 
-<style lang="css">
-html {
-  scroll-padding-top: 150px;
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/FormNewsletterSignup';
 </style>

package/src/components/HeroLarge/HeroLarge.vue

@@ -17,6 +17,7 @@
           :width="image.src.width"
           :height="image.src.height"
           :alt="image.alt"
+          data-chromatic="ignore"
         />
       </picture>
     </div>
@@ -133,6 +134,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@explorer-1/common/src/scss/components/HeroLarge';
 </style>

package/src/components/HeroMedium/HeroMedium.vue

@@ -27,6 +27,7 @@
           :width="theImage.src.width"
           :height="theImage.src.height"
           alt=""
+          data-chromatic="ignore"
         />
       </picture>
     </div>

package/src/components/HomepageCarousel/HomepageCarousel.vue

@@ -344,42 +344,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-
-.HomepageCarousel {
-  .HomepageCarouselSlider {
-    .swiper-pagination {
-      @apply relative text-left mx-auto pl-3;
-
-      span {
-        @apply py-2 pl-1 pr-2 h-auto w-auto bg-transparent m-0 opacity-100;
-
-        &::before {
-          content: '';
-          width: 0.65rem;
-          height: 0.65rem;
-          @apply block rounded-full bg-white bg-opacity-40;
-        }
-
-        &.swiper-pagination-bullet-active {
-          &::before {
-            @apply bg-jpl-red;
-          }
-        }
-      }
-    }
-  }
-
-  .load-enter-active {
-    transition: transform 500ms linear;
-  }
-
-  .load-leave-active {
-    transition: none;
-  }
-
-  .load-enter-to {
-    @apply translate-x-0;
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageCarousel';
 </style>

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -141,36 +141,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.HomepageCarouselItem,
-.HomepageCarouselItem.swiper-slide {
-  // somewhat arbitrary heights
-  // portrait on small screens
-  //height: 500px;
-  min-height: 500px;
-  // landscape on larger screens
-  @screen lg {
-    height: 800px;
-    min-height: 800px;
-  }
-}
-
-.HomepageCarouselItem {
-  img {
-    @apply transition-transform duration-1000 ease-out transform scale-100;
-  }
-
-  .IconArrow {
-    @apply -ml-5 transition-all duration-500 ease-in opacity-0;
-  }
-
-  &.swiper-slide-active {
-    img {
-      @apply scale-105;
-    }
-
-    .IconArrow {
-      @apply ml-0 opacity-100;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageCarouselItem';
 </style>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -190,77 +190,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-
-.HomepageMissionsCarousel {
-  // container styles
-  .swiper {
-    @apply overflow-visible #{!important};
-
-    .swiper-navigation {
-      top: 20%;
-    }
-
-    .swiper-prev,
-    .swiper-next {
-      @apply -mt-1 w-auto h-auto transform -translate-y-1/2;
-
-      &.swiper-button-disabled {
-        @apply invisible;
-      }
-      // shared styles for the arrow animation
-      &.BaseButton {
-        @apply transition-none #{!important};
-      }
-
-      &.BaseButton > .label {
-        @apply flex overflow-hidden;
-
-        > .arrow-wrapper {
-          @apply block relative w-full h-full overflow-hidden;
-
-          > .arrow {
-            @apply block;
-          }
-
-          > .arrow-fixed {
-            @apply absolute top-0 left-0 block;
-          }
-        }
-        &:hover {
-          > .arrow-wrapper > .arrow,
-          > .arrow-wrapper > .arrow-fixed {
-            animation-delay: 50ms !important; // hover intent
-          }
-        }
-      }
-    }
-    @screen lg {
-      // specific directional animation
-      .swiper-next.BaseButton > .label {
-        &:hover {
-          > .arrow-wrapper > .arrow {
-            animation: arrow-carousel-next-anim 0.1s linear normal;
-          }
-
-          > .arrow-wrapper > .arrow-fixed {
-            animation: arrow-carousel-next-fixed-anim 0.1s linear normal;
-          }
-        }
-      }
-
-      .swiper-prev.BaseButton > .label {
-        &:hover {
-          > .arrow-wrapper > .arrow {
-            animation: arrow-carousel-prev-anim 0.1s linear normal;
-          }
-
-          > .arrow-wrapper > .arrow-fixed {
-            animation: arrow-carousel-prev-fixed-anim 0.1s linear normal;
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageMissionsCarousel';
 </style>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue

@@ -86,61 +86,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.HomepageMissionsCarouselItem {
-  .text-wrapper {
-    border-width: 1px;
-    border-style: solid;
-    border-image: linear-gradient(to top, #6f6f6f, rgba(0, 0, 0, 0)) 1 20%; // border-gray-mid-dark
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-  }
-  // styling based on slide visibility
-  &.swiper-slide,
-  &.swiper-slide-duplicate {
-    @apply opacity-50 transition-all duration-500 ease-in-out h-auto;
-
-    .slide-image {
-      @apply transition-transform duration-500 ease-in-out transform scale-90;
-    }
-
-    .text-wrapper {
-      @apply opacity-0 transition-opacity duration-500 ease-in-out;
-    }
-    // on mobile, only the active slide should be fully visible
-    &.swiper-slide-active,
-    &:focus,
-    &:focus-within {
-      @apply opacity-100;
-
-      .text-wrapper {
-        @apply opacity-100;
-
-        .shifted-text {
-          @apply -mt-3 #{!important};
-        }
-
-        .explore-text {
-          @apply opacity-100 ml-0 #{!important};
-        }
-      }
-
-      .slide-image {
-        @apply scale-105;
-      }
-    }
-    @screen lg {
-      // &.swiper-slide-visible, &.swiper-slide-duplicate-visible
-      &.swiper-slide-prev,
-      &.swiper-slide-active,
-      &.swiper-slide-next {
-        @apply opacity-100;
-
-        .text-wrapper {
-          @apply opacity-100;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageMissionsCarouselItem';
 </style>

package/src/components/HomepageStats/HomepageStats.vue

@@ -329,34 +329,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.HomepageStats {
-  .BaseTimer {
-    .text-stats-xl {
-      @apply leading-none;
-
-      @screen lg {
-        font-size: 2.125rem; // 34px
-      }
-      @screen xl {
-        font-size: 2.25rem; // 36px
-      }
-    }
-
-    .unit {
-      @apply text-gray-mid-dark;
-    }
-  }
-
-  .BaseUnitToggle {
-    @apply flex items-center;
-
-    fieldset {
-      @apply pl-3;
-    }
-
-    .unit {
-      @apply -mt-3;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageStats';
 </style>

package/src/components/Icons/IconSlideshow.vue

@@ -22,9 +22,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-// @import '@explorer-1/common/src/scss/components/IconSlideshow';
-.IconSlideshow {
-  width: 1em;
-  height: 1em;
-}
+@import '@explorer-1/common/src/scss/components/IconSlideshow';
 </style>

package/src/components/ImageDetailContextImage/ImageDetailContextImage.vue

@@ -83,43 +83,6 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.ContextImageButton {
-  @apply select-none;
-
-  cursor: pointer;
-
-  .ContextImage {
-    @apply mx-auto w-full;
-
-    max-width: 640px;
-  }
-
-  @screen sm {
-    svg.IconDropdown {
-      @apply transform rotate-180;
-    }
-
-    min-width: 100px;
-
-    .ContextImage {
-      min-width: 150px;
-    }
-  }
-  @screen md {
-    .ContextImage {
-      min-width: 200px;
-    }
-  }
-  @screen lg {
-    .ContextImage {
-      min-width: 250px;
-    }
-  }
-  @screen xl {
-    .ContextImage {
-      min-width: 300px;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/ImageDetailContextImage';
 </style>

package/src/components/LoadingTransition/LoadingTransition.vue

@@ -28,21 +28,6 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.loading-page {
-  @apply fixed top-0 left-0 block w-full h-full bg-white opacity-75;
-
-  z-index: 99999;
-
-  .loading-wrapper {
-    @apply w-full h-full min-h-full min-w-full flex flex-col justify-center items-center;
-
-    .loading {
-      @apply animate-rotate bg-transparent p-0 z-50 rounded-full h-14 w-14 opacity-75;
-
-      border: 4px solid #888888;
-      border-bottom-color: #ffffff;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/LoadingTransition';
 </style>

package/src/components/LogoCaltech/LogoCaltech.vue

@@ -22,8 +22,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.LogoCaltech {
-  width: 8.375em; // 134px wide at .text-base
-  height: auto;
-}
+@import '@explorer-1/common/src/scss/components/LogoCaltech';
 </style>