@explorer-1/vue 0.2.104 → 0.3.1

package/src/components/RoboticsDetailStats/RoboticsDetailStatsMini.vue

@@ -174,9 +174,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.RoboticsDetailStatsMini {
-  > .stat {
-    min-width: 5ch;
-  }
-}
+@import '@explorer-1/common/src/scss/components/RoboticsDetailStatsMini';
 </style>

package/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue

@@ -81,9 +81,5 @@ const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordio
   </div>
 </template>
 <style lang="scss">
-.SearchFilterGroupAccordionItemContent {
-  input.mt-px {
-    @apply mt-0 #{!important};
-  }
-}
+@import '@explorer-1/common/src/scss/components/SearchFilterGroupAccordionItem';
 </style>

package/src/components/SearchInput/SearchInput.vue

@@ -42,7 +42,7 @@ onMounted(() => {
       * on pages (such as the search page and listing pages)
       * for site-wide search -->
   <div
-    class="relative flex items-center"
+    class="relative flex items-center SearchInput"
     :class="{
       'border border-gray-mid': defaultColors && !underlinedInput,
       'custom-focus': underlinedInput
@@ -94,11 +94,6 @@ onMounted(() => {
     </button>
   </div>
 </template>
-<style lang="scss" scoped>
-.custom-focus {
-  input {
-    outline: none;
-    box-shadow: none;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/SearchInput';
 </style>

package/src/components/SearchPagination/SearchPagination.vue

@@ -161,13 +161,5 @@ export default {
 }
 </script>
 <style lang="scss">
-.SearchPagination {
-  .-current {
-    @apply font-medium;
-
-    span {
-      @apply border-primary border-b-2;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/SearchPagination';
 </style>

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -66,6 +66,7 @@ export const PodcastEpisodeCard = {
 }
 
 export const EduEventCard = {
+  globals: { theme: 'ThemeEdu' },
   args: {
     ...SearchResultCardData,
     __typename: 'EDUEventPage',

package/src/components/ShareButtons/ShareButtons.vue

@@ -120,13 +120,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.ShareButtons {
-  .BaseButton {
-    @apply relative;
-    &:hover {
-      @apply z-10;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/ShareButtons';
 </style>

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

@@ -7,6 +7,7 @@ export default {
 
 export const BaseStory = {
   name: 'ShareButtonsEdu',
+  globals: { theme: 'ThemeEdu' },
   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

@@ -198,23 +198,5 @@ const buttonClass = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.ShareButtonsEdu {
-  .BaseButton {
-    @apply relative focus:z-20;
-    &:hover {
-      @apply z-20;
-    }
-  }
-  .share-buttons-list {
-    .BaseButton.-social {
-      @apply h-10 xl:h-11 py-0 px-2 lg:px-3 #{!important};
-      span.text-xs {
-        @apply whitespace-nowrap;
-      }
-      .label {
-        @apply justify-start xl:justify-center;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/ShareButtonsEdu';
 </style>

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -13,6 +13,7 @@
         v-bind-once="{ style: 'background-image: url(' + randomizeImage + ');' }"
         role="presentation"
         :class="'SwimlaneCTA lg:block hidden' + computedClass"
+        data-chromatic="ignore"
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div
@@ -255,38 +256,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-// SwimlaneCTA Scoped Styles
-.SwimlaneCTA {
-  @apply max-w-screen-3xl animate-fadeIn relative items-center justify-center object-cover w-full mx-auto bg-center bg-no-repeat bg-cover select-none;
-
-  min-height: 245px;
-
-  @screen lg {
-    min-height: 595px;
-  }
-
-  * {
-    @apply animate-fadeInSlow;
-  }
-
-  &.light-theme {
-    @apply bg-gray-light text-gray-dark;
-
-    ul {
-      li {
-        @apply text-gray-dark;
-      }
-    }
-  }
-
-  &.dark-theme {
-    @apply bg-black text-white;
-
-    ul {
-      li {
-        @apply text-white;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/SwimlaneCTA';
 </style>

package/src/components/TheFooter/TheFooter.vue

@@ -236,23 +236,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.TheFooter {
-  .auto-col-2 {
-    @screen sm {
-      column-count: 2;
-    }
-  }
-
-  .auto-col-4 {
-    @screen sm {
-      column-count: 2;
-    }
-    @screen lg {
-      column-count: 3;
-    }
-    @screen 2xl {
-      column-count: 4;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/TheFooter';
 </style>

package/src/components/TheFooter/TheFooterSignUp.vue

@@ -53,9 +53,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.TheFooterSignup {
-  .EmailInput::placeholder {
-    @apply text-white text-opacity-40;
-  }
-}
+@import '@explorer-1/common/src/scss/components/TheFooterSignUp';
 </style>

package/src/components/ThumbnailCarousel/ThumbnailCarousel.vue

@@ -48,29 +48,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.ThumbnailCarousel {
-  &.-cards {
-    .swiper {
-      .swiper-navigation {
-        padding-top: 29.5%;
-
-        .swiper-prev,
-        .swiper-next {
-          @apply transform -translate-y-1/2;
-        }
-      }
-    }
-  }
-
-  .nuxt-link-exact-active {
-    > p {
-      @apply font-semibold;
-
-      span {
-        padding-bottom: 0.2rem;
-        @apply border-b-2 border-jpl-red;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/ThumbnailCarousel';
 </style>

package/src/components/TimelineDialog/TimelineDialog.stories.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 './TimelineDialog.stories'
 
 <Meta of={Stories} />

package/src/components/TimelineDialog/TimelineDialog.vue

@@ -122,24 +122,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.Dialog {
-  .dialog-main {
-    max-height: 55vh;
-
-    /* Fade effect */
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 1rem,
-      black calc(100% - 1rem),
-      transparent 100%
-    );
-  }
-
-  @media (forced-colors: active) {
-    hr {
-      border: 1px solid;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/TimelineDialog';
 </style>

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.vue

@@ -92,21 +92,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.TopicDetailMissionSpotlight {
-  .content-wrapper {
-    @screen lg {
-      min-height: 548px; // maintains 1440x770 aspect ratio
-    }
-    @screen xl {
-      min-height: 684px; // maintains 1440x770 aspect ratio
-    }
-    @screen 2xl {
-      min-height: 770px; // 1440x770
-    }
-    @screen 3xl {
-      min-height: 963px; // maintains 1440x770 aspect ratio
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/TopicDetailMissionSpotlight';
 </style>

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue

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

package/src/components/YearTicker/YearTicker.vue

@@ -54,87 +54,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.YearTicker {
-  @apply sticky transform text-gray-light-mid translate-x-0.5 md:translate-x-0 ml-7 md:ml-8 lg:ml-30 pt-10 md:pt-5;
-
-  // Unitless 0 isn’t supported in a `calc` operation.
-  // stylelint-disable-next-line length-zero-no-unit
-  --top-offset: 0px;
-
-  font-variant-numeric: tabular-nums;
-  font-weight: 900;
-  line-height: 1;
-  font-size: min(5rem, 25vw);
-  // Secondary nav minus gap.
-  top: calc(theme('spacing.16') - 1px + var(--top-offset));
-  z-index: 50;
-
-  @screen md {
-    --top-offset: theme('spacing.20');
-
-    z-index: -20;
-    font-size: min(8rem, 20vw);
-  }
-
-  @screen lg {
-    font-size: min(11.25rem, 10vw);
-  }
-
-  @screen xl {
-    font-size: min(11.25rem, 25vw);
-  }
-
-  .header-sticky-showing & {
-    // For the mobile viewport, offset by the height of the top header and NavSecondary combined.
-    top: calc(theme('spacing.18') + theme('spacing.16') + var (--top-offset));
-  }
-
-  &::after {
-    @apply md:hidden;
-
-    content: '';
-    position: absolute;
-    z-index: -10;
-    top: 2px;
-    left: 0;
-    width: 100%;
-    height: 140px;
-    pointer-events: none;
-    background-image: linear-gradient(to bottom, white 90%, transparent);
-  }
-
-  > span {
-    display: inline-grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    overflow: hidden;
-  }
-
-  .Digit {
-    grid-area: 1 / 1 / 1 / 1;
-    transition: transform var(--duration);
-    transform: translateY(0);
-
-    @media (prefers-reduced-motion: reduce) {
-      transition-duration: 0.1ms;
-    }
-  }
-
-  // transitions
-  .digits-decrement-enter-active {
-    transform: translateY(100%);
-  }
-
-  .digits-decrement-leave-active {
-    transform: translateY(-100%);
-  }
-
-  .digits-increment-enter-active {
-    transform: translateY(-100%);
-  }
-
-  .digits-increment-leave-active {
-    transform: translateY(100%);
-  }
-}
+@import '@explorer-1/common/src/scss/components/YearTicker';
 </style>

package/src/docs/foundation/color.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 
 <Meta title="Foundations/Colors" />
 

package/src/docs/foundation/grid.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './grid.stories'
 
 <Meta of={Stories} />

package/src/docs/foundation/grid_layouthelpers.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './grid_layouthelpers.stories'
 
 <Meta of={Stories} />

package/src/docs/foundation/themes.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './themes.stories'
 
 <Meta of={Stories} />

package/src/docs/foundation/typography.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './typography.stories'
 
 <Meta of={Stories} />

package/src/docs/foundation/typography.stories.js

@@ -109,7 +109,7 @@ export const HeadingIcons = {
 export const TextContrast = {
   args: {},
   render: () => ({
-    template: `<div style="background-image: url('https://picsum.photos/1000/400');" class="bg-cover bg-no-repeat bg-center">
+    template: `<div style="background-image: url('https://fastly.picsum.photos/id/1015/1000/40.jpg?hmac=fpUcZPtNEqNVb9cio8CwkUIBZKywJSfhaxdieF0Uxgk');" class="bg-cover bg-no-repeat bg-center">
   <div class="p-10 bg-black/30">
     <span class="text-h3 text-white text-contrast">
       This text uses a text shadow that increases readability when used with a semi-transparent overlay.

package/src/docs/getting-started/designer.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/blocks'
+import { Meta, Description } from '@storybook/addon-docs/blocks'
 
 <Meta title="Getting Started/Designer" />
 

package/src/docs/getting-started/developer.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Getting Started/Developer" />
 
@@ -39,29 +39,7 @@ Explorer 1 comprises components that range from very simple, single-purpose elem
 
 ### HTML templates
 
-HTML templates are provided by this Storybook in both Docs view and Canvas view. You can also modify the component "controls" to customize the component.
-
-#### How to copy HTML snippets from Docs view
-
-1. Find the story block you want to copy.
-2. In the bottom right corner of the block, click on "Show code".
-3. In the bottom right corner of the now-visible code block, click on "Copy".
-
-<details className="pl-4 -mt-3 text-sm">
-  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Docs view</span></summary>
-
-![how to copy snippets from Docs view](./gif/html-storybook-simple.gif)
-
-</details>
-
-4. You can customize the component by modifying the controls. The code will update to match.
-
-<details className="pl-4 -mt-3 text-sm">
-  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to customize a component</span></summary>
-
-![how to customize a component](./gif/html-storybook-customized.gif)
-
-</details>
+HTML templates are provided by this Storybook in Canvas view only. To customize component options, modify the component "controls."
 
 #### How to copy HTML snippets from Canvas view
 
@@ -71,7 +49,7 @@ Canvas view is useful to isolate your view to a single rendition of the componen
 2. Make sure addons (the tabbed pane under the rendered component) are enabled by clicking on the three dots to the right of the JPL logo and checking "Show addons", or by typing `A`. If you still don't see the addons pane, you may need to toggle "Change addons orientation" in the menu (or type `D`) a couple times.
 3. Click on the "HTML" tab within the addons pane.
 4. Click on "Copy" in the bottom right of the screen or manually copy and paste the code block.
-5. You can also customize the component by modifying the controls in the "Controls" tab within the Add-ons viewer. The code will update to match.
+5. You can customize the component by modifying the controls in the "Controls" tab within the Add-ons viewer. The code will update to match.
 
 <details className="pl-4 text-sm">
   <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Canvas view</span></summary>

package/src/docs/guides/accessibility.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta
   title="Guides/Accessibility"

package/src/docs/guides/responsive.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './responsive.stories'
 
 <Meta of={Stories} />

package/src/docs/introduction.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/blocks'
+import { Meta, Description } from '@storybook/addon-docs/blocks'
 
 <Meta title="Introduction" />
 
@@ -40,3 +40,31 @@ This website uses [Storybook](https://storybook.js.org/) to display our document
 ---
 
 Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
+
+<div>
+  <table
+    class="w-auto text-left"
+    style={{ width: 'unset' }}
+  >
+    <thead>
+      <tr class="text-left">
+        <th>Package</th>
+        <th>Version</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>[@explorer-1/common](https://www.npmjs.com/package/@explorer-1/common)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_COMMON__}</code>
+        </td>
+      </tr>
+      <tr>
+        <td>[@explorer-1/vue](https://www.npmjs.com/package/@explorer-1/vue)</td>
+        <td>
+          <code>{packageVersions.__VERSION__EXPLORER_1_VUE__}</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/src/docs/overviews/base.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as BaseButtonStories from './../../components/BaseButton/BaseButton.stories'
 import * as BaseHeadingStories from './../../components/BaseHeading/BaseHeading.stories'

package/src/docs/overviews/blocks.docs.mdx.disabled

@@ -1,5 +1,5 @@
 {/* TODO: refactor to include all blocks in the vue storybook */}
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import _ as BlockAccordionStories from './../../components/BlockAccordion/BlockAccordion.stories'
 import _ as BlockCardGridStories from './../../components/BlockCardGrid/BlockCardGrid.stories'

package/src/docs/overviews/cards.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as BlockCardGridItemStories from './../../components/BlockCardGridItem/BlockCardGridItem.stories'
 import * as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'

package/src/docs/overviews/components.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/blocks'
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as BaseImageStories from './../../components/BaseImage/BaseImage.stories'
 import * as BaseImageCaptionStories from './../../components/BaseImageCaption/BaseImageCaption.stories'

package/src/docs/overviews/forms.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/blocks'
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as FormContactStories from './../../components/FormContact/FormContact.stories'
 import * as TextInputStories from './../../components/TextInput/TextInput.stories'

package/src/docs/overviews/global.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/blocks'
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 
 <Meta

package/src/docs/overviews/global_footers.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/blocks'
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as TheFooterStories from './../../components/TheFooter/TheFooter.stories'
 

package/src/docs/overviews/global_headers.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as NavDesktopStories from './../../components/NavDesktop/NavDesktop.stories'
 import * as NavDesktopEduStories from './../../components/NavDesktopEdu/NavDesktopEdu.stories'

package/src/docs/overviews/heroes.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as HeroSmallStories from './../../components/HeroMedium/HeroSmall.stories'
 import * as HeroMediumStories from './../../components/HeroMedium/HeroMedium.stories'

package/src/docs/overviews/mixins.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as MixinAnimationCaretStories from './../../components/MixinAnimationCaret/MixinAnimationCaret.stories'
 import * as MixinVideoBgStories from './../../components/MixinVideoBg/MixinVideoBg.stories'

package/src/docs/overviews/search.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as SearchInputStories from './../../components/SearchInput/SearchInput.stories'
 import * as SearchResultCardStories from './../../components/SearchResultCard/SearchResultCard.stories'

package/src/docs/overviews/utilities.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as BackToTopStories from './../../components/BackToTop/BackToTop.stories'
 

package/src/docs/roadmap.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Roadmap" />