@explorer-1/vue 0.2.104 → 0.3.1

package/src/components/NavDesktop/NavDesktop.vue

@@ -299,61 +299,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDesktop {
-  @apply border-b border-transparent;
-  // styles for default vs transparent header
-  // underline color and logo inversion styles handled within their respective components
-  > .header-bg {
-    @apply bg-white;
-
-    .main-navigation {
-      > * {
-        @apply text-gray-dark;
-      }
-    }
-  }
-
-  &.-transparent {
-    @apply bg-transparent;
-
-    > .header-bg {
-      @apply bg-gradient-to-b from-transparent-black-75 to-transparent bg-transparent;
-    }
-
-    .main-navigation {
-      > * {
-        @apply text-white;
-
-        .NavDesktopDropdown > button {
-          // mimics .text-contrast class
-          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-        }
-      }
-    }
-  }
-
-  &.-scrolled {
-    @apply border-b border-gray-mid border-opacity-50 bg-white;
-
-    &.-transparent {
-      > .header-bg {
-        @apply opacity-0 bg-white;
-      }
-
-      .main-navigation {
-        > * {
-          @apply text-gray-dark;
-
-          .NavDesktopDropdown > button {
-            text-shadow: none;
-          }
-        }
-      }
-    }
-
-    &.-hasSecondary {
-      @apply border-0 border-transparent;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavDesktop';
 </style>

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -107,93 +107,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDesktopDropdown {
-  // pushes the dropdown below the closest parent div that has position:relative (e.g. the header)
-  > div {
-    &::before {
-      content: '';
-      @apply relative z-0 w-full h-full block;
-    }
-  }
-
-  > button {
-    > span {
-      @apply border-transparent;
-    }
-
-    &.-open {
-      > span {
-        @apply border-primary edu:border-white;
-
-        .-transparent & {
-          @apply border-white;
-        }
-
-        .-transparent.-scrolled & {
-          @apply border-primary edu:border-white;
-        }
-      }
-    }
-    &:hover {
-      > span {
-        @apply border-primary edu:border-white;
-
-        .-transparent & {
-          @apply border-white;
-        }
-
-        .-transparent.-scrolled & {
-          @apply border-primary edu:border-white;
-        }
-      }
-    }
-  }
-  // parent div is active
-  &.-active {
-    > button {
-      > span {
-        @apply border-primary edu:border-white font-bold;
-
-        .-transparent & {
-          @apply border-white;
-        }
-
-        .-transparent.-scrolled & {
-          @apply border-primary edu:border-white;
-        }
-
-        &.hasSecondary {
-          @apply border-transparent #{!important};
-        }
-      }
-    }
-  }
-
-  // transitions
-  .navfade-enter-to,
-  .navfade-enter-active {
-    @apply transition-all ease-out transform duration-500;
-  }
-
-  .navfade-leave-active,
-  .navfade-leave-to {
-    @apply transition-all ease-out transform duration-100;
-  }
-
-  .navfade-enter-active {
-    @apply opacity-0 translate-y-2;
-  }
-
-  .navfade-enter-to {
-    @apply opacity-100 translate-y-0;
-  }
-
-  .navfade-leave-to {
-    @apply opacity-100; // translate-y-0
-  }
-
-  .navfade-leave-active {
-    @apply opacity-0; // -translate-y-2
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavDesktopDropdown';
 </style>

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

@@ -161,6 +161,7 @@ export const NavDesktopData = {
 
 export const BaseStory = {
   name: 'NavDesktop',
+  globals: { theme: 'ThemeEdu' },
   args: {
     data: NavDesktopData,
     headerVisible: true,

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -304,17 +304,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDesktopEdu {
-  @apply border-none;
-
-  > .header-bg {
-    @apply bg-gradient-to-r from-black to-primary bg-transparent to-90%;
-  }
-
-  .main-navigation {
-    > * {
-      @apply text-white;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavDesktopEdu';
 </style>

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -180,23 +180,5 @@ watch(
 )
 </script>
 <style lang="scss">
-.NavJumpMenu {
-  @apply invisible transition-all overflow-visible -mb-[3.7rem] z-30 fixed #{!important};
-  &.-ready {
-    @apply visible #{!important};
-  }
-  &.-at-top {
-    @apply invisible #{!important};
-  }
-  .NavSecondaryLink.secondary-root {
-    span {
-      @apply border-primary #{!important};
-    }
-    &.-invert {
-      span {
-        @apply border-white #{!important};
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavJumpMenu';
 </style>

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -61,19 +61,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavJumpMenuContent {
-  a {
-    @apply block pl-18 pr-6 lg:pl-6 text-gray-dark;
-
-    > span {
-      @apply border-b border-transparent pb-2px;
-    }
-
-    &:hover {
-      > span {
-        @apply border-gray-dark text-gray-dark;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavJumpMenuContent';
 </style>

package/src/components/NavLinkList/NavLinkList.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-if="data">
-    <NavHeading :data="data" />
+    <NavHeading
+      :data="data"
+      class="NavLinkList"
+    />
     <div
       v-if="data.links"
       :class="{ 'auto-col': autoCol }"
@@ -57,10 +60,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.auto-col {
-  @screen lg {
-    column-count: 2;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/NavLinkList';
 </style>

package/src/components/NavLogoLinks/NavLogoLinks.vue

@@ -41,16 +41,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-// In Windows high contrast mode, gives the logo a "link color" background to convey it’s clickable.
-@media (forced-colors: active) {
-  .NavLogoLinks img {
-    position: relative;
-    z-index: 1;
-    pointer-events: none;
-  }
-
-  .NavLogoLinks a {
-    background-color: linktext;
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavLogoLinks';
 </style>

package/src/components/NavMobile/NavMobile.vue

@@ -298,41 +298,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavMobile {
-  @apply absolute top-0 z-50 inset-x-0;
-  // styles for default vs transparent header
-  // underline color and logo inversion styles handled within their respective components
-  &.-scrolled {
-    @media not print {
-      @apply fixed;
-    }
-  }
-}
-// vue-transition classes
-// may scope this wider if mobile uses the same transition
-.headerMobileReveal-enter-to,
-.headerMobileReveal-enter-active {
-  @apply transition-transform transform ease-in-out duration-200;
-}
-
-.headerMobileReveal-leave-active,
-.headerMobileReveal-leave-to {
-  @apply transition-transform transform ease-out duration-200;
-}
-
-.headerMobileReveal-enter-active {
-  @apply -translate-y-full;
-}
-
-.headerMobileReveal-enter-to {
-  @apply translate-y-0;
-}
-
-.headerMobileReveal-leave-to {
-  @apply translate-y-0;
-}
-
-.headerMobileReveal-leave-active {
-  @apply -translate-y-full;
-}
+@import '@explorer-1/common/src/scss/components/NavMobile';
 </style>

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -147,33 +147,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDropdownMobile {
-  // pushes the dropdown below the closest parent div that has position:relative (e.g. the header)
-  > div {
-    &::before {
-      content: '';
-      @apply relative z-0 w-full h-full block;
-    }
-  }
-
-  > button {
-    > span {
-      @apply border-transparent;
-    }
-
-    &.-open {
-      > span {
-        @apply border-primary font-bold;
-      }
-    }
-  }
-  // parent div is active
-  &.-active {
-    > button {
-      > span {
-        @apply border-primary font-bold;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavMobileDropdown';
 </style>

package/src/components/NavMobile/NavMobileLink.vue

@@ -55,15 +55,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavMobileLink {
-  span {
-    @apply border-b border-transparent;
-  }
-
-  .nuxt-link-active {
-    span {
-      @apply font-medium border-primary #{!important};
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavMobileLink';
 </style>

package/src/components/NavMobile/NavMobileSecondaryDropdown.vue

@@ -105,23 +105,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavMobileSecondaryDropdown {
-  .NavDropdownToggle {
-    span {
-      @apply border-b border-transparent;
-    }
-
-    &.-open {
-      span {
-        @apply border-gray-dark font-normal;
-      }
-    }
-
-    &.-active {
-      span {
-        @apply font-medium border-primary #{!important};
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavMobileSecondaryDropdown';
 </style>

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -55,43 +55,5 @@ const submitSearch = () => {
   </form>
 </template>
 <style lang="scss">
-.NavSearchForm {
-  ::placeholder {
-    @apply text-gray-dark;
-  }
-
-  .-transparent & {
-    ::placeholder {
-      @apply text-white;
-    }
-  }
-
-  .-transparent.-scrolled & {
-    ::placeholder {
-      @apply text-gray-dark;
-    }
-  }
-  @screen lg {
-    // remove the default styling of search field
-    input[type='search']::-ms-clear {
-      display: none;
-      width: 0;
-      height: 0;
-    }
-
-    input[type='search']::-ms-reveal {
-      display: none;
-      width: 0;
-      height: 0;
-    }
-
-    /* clears the 'X' from Chrome */
-    input[type='search']::-webkit-search-decoration,
-    input[type='search']::-webkit-search-cancel-button,
-    input[type='search']::-webkit-search-results-button,
-    input[type='search']::-webkit-search-results-decoration {
-      display: none;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSearchForm';
 </style>

package/src/components/NavSecondary/NavSecondary.vue

@@ -187,60 +187,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondary {
-  top: -1px; // for intersection observer to work
-  @apply sticky z-40 w-full bg-white border-b border-gray-mid border-opacity-0 transition-border-opacity duration-150 edu:duration-300 ease-in;
-  @apply hidden;
-  @screen lg {
-    @apply block;
-  }
-
-  &.has-intro {
-    .nav-secondary-container {
-      @apply border-gray-mid border-opacity-0;
-    }
-  }
-
-  &.-is-sticky {
-    @apply border-gray-mid border-opacity-50;
-  }
-
-  .secondary-root {
-    .nuxt-link-exact-active {
-      span {
-        @apply text-primary font-semibold #{!important};
-      }
-    }
-  }
-
-  // for that nice horizontal scroll on mobile
-  .overflow-x-auto {
-    scrollbar-width: thin;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  // change sticky point if global nav is showing
-  .header-sticky-showing & {
-    @apply top-18;
-    @screen lg {
-      @apply top-28;
-    }
-
-    &.-scrolled-up {
-      @apply border-gray-mid border-opacity-50;
-      .nav-secondary-container {
-        @apply border-gray-mid border-opacity-50;
-      }
-    }
-  }
-}
-// since we depend on a body class, the edu: prefix won't work as usual and requires the below line
-body.header-sticky-showing .ThemeEdu .NavSecondary {
-  @screen lg {
-    @apply top-[4.45rem];
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondary';
 </style>

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -143,73 +143,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondaryDropdown {
-  .NavDropdownToggle {
-    &.-open {
-      > span {
-        @apply border-black text-gray-dark #{!important};
-      }
-      &.-invert {
-        > span {
-          @apply border-white text-white #{!important};
-        }
-      }
-    }
-
-    &.-active {
-      > span {
-        @apply font-bold text-gray-dark;
-        @apply border-primary #{!important};
-      }
-      &.-invert {
-        > span {
-          @apply text-white;
-          @apply border-white #{!important};
-        }
-      }
-    }
-    &:hover {
-      &.-active {
-        > span {
-          @apply text-gray-mid-dark;
-        }
-        &.-invert {
-          > span {
-            @apply text-white;
-          }
-        }
-      }
-    }
-  }
-  // transitions
-  .navfade-enter-to,
-  .navfade-enter-active {
-    @apply transition-all ease-out transform duration-200;
-  }
-
-  .navfade-leave-active,
-  .navfade-leave-to {
-    @apply transition-all ease-out transform duration-200;
-  }
-
-  .navfade-enter-active {
-    @apply opacity-0;
-    @apply -translate-y-2;
-  }
-
-  .navfade-enter-to {
-    @apply opacity-100;
-    @apply translate-y-0;
-  }
-
-  .navfade-leave-to {
-    @apply opacity-100;
-    @apply translate-y-0;
-  }
-
-  .navfade-leave-active {
-    @apply opacity-0;
-    @apply -translate-y-2;
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondaryDropdown';
 </style>

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -122,25 +122,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondaryDropdownContent {
-  a {
-    @apply block pl-18 pr-6 lg:pl-6 text-black;
-
-    > span {
-      @apply border-b border-transparent pb-2px;
-    }
-
-    &:hover {
-      > span {
-        @apply border-black text-black;
-      }
-    }
-
-    &.nuxt-link-active {
-      > span {
-        @apply border-primary font-medium;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondaryDropdownContent';
 </style>

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -72,20 +72,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondaryLink {
-  .nuxt-link-exact-active {
-    span {
-      @apply font-bold text-gray-dark;
-      @apply border-primary #{!important};
-    }
-  }
-  &.-invert {
-    .nuxt-link-exact-active {
-      span {
-        @apply font-bold text-white;
-        @apply border-white #{!important};
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondaryLink.scss';
 </style>

package/src/components/NavSocial/NavSocial.vue

@@ -107,19 +107,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.BaseButton {
-  @apply relative;
-  &:hover {
-    @apply z-10;
-  }
-  // we have to define these here to override the extracted border styles native to BaseButton
-  &.-dark {
-    @apply border-l-0 #{!important};
-
-    &:first-child {
-      @apply border-l #{!important};
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/NavSocial';
 </style>

package/src/components/PodcastEpisodeCard/PodcastEpisodeCard.vue

@@ -240,12 +240,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PodcastEpisodeCard {
-  .PodcastEpisodeCard-thumbnail {
-    @apply hidden;
-    @media only screen and (min-width: 325px) {
-      @apply block;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/PodcastEpisodeCard';
 </style>

package/src/components/RoboticsDetailStats/RoboticsDetailStats.vue

@@ -55,6 +55,7 @@
             :src="animalAnalogIcon.src.url"
             width="160"
             height="160"
+            data-chromatic="ignore"
             alt=""
           />
         </picture>
@@ -209,9 +210,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.RoboticsDetailStats {
-  .label {
-    @apply font-semibold mb-4 text-jpl-red-dark;
-  }
-}
+@import '@explorer-1/common/src/scss/components/RoboticsDetailStats';
 </style>