@explorer-1/vue 0.2.104 → 0.3.1

package/src/docs/utils/ComponentItem.jsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react'
-import { Canvas, Description } from '@storybook/blocks'
+import { Canvas, Description } from '@storybook/addon-docs/blocks'
 
 export function ComponentItem(props) {
   /*

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -306,71 +306,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageAudioDetail {
-  .transcript-overlay {
-    // necessary for safari to interpolate the gradient correctly
-    // see https://stackoverflow.com/a/56548711
-    background-image: linear-gradient(to top, white, rgba(255, 255, 255, 0));
-    @apply absolute bottom-0 inset-x-0 h-24 pointer-events-none;
-  }
-
-  .audio-aside {
-    // .BaseButton {
-    //   max-width: 200px;
-    //   @screen md {
-    //     max-width: none;
-    //   }
-    // }
-    .BlockText {
-      @apply text-lg;
-    }
-  }
-
-  .audio-transcript {
-    p {
-      @apply mb-4;
-    }
-  }
-
-  .SubscribeModal {
-    ul {
-      @apply mb-5;
-      @screen lg {
-        @apply mb-8;
-      }
-
-      &:last-child {
-        @apply mb-0;
-      }
-
-      li {
-        @apply mb-2 pl-8 relative;
-        @screen lg {
-          @apply pl-12;
-        }
-
-        &:last-child {
-          @apply mb-0;
-        }
-
-        &::before {
-          content: '';
-          width: 24px;
-          height: 2px;
-          @apply bg-jpl-red block absolute top-0 left-0 mt-3;
-          @screen sm {
-            @apply mt-3;
-          }
-          @screen lg {
-            width: 30px;
-          }
-
-          .ThemeVariantDark & {
-            @apply bg-jpl-red-light;
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageAudioDetail';
 </style>

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -293,34 +293,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PageEventDetail {
-  .PageEventDetail__Metadata {
-    @apply flex;
-    @apply items-baseline;
-    @apply mr-12;
-    @apply md:mr-8;
-    @apply lg:mr-12;
-    @apply mb-5;
-
-    span {
-      max-width: 230px;
-      min-width: 110px;
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-  }
-
-  .PageEventDetail__Buttons {
-    @apply text-base;
-    @apply lg:ml-auto;
-    @apply mt-10;
-    @apply lg:mt-0;
-
-    max-width: 260px;
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEventDetail';
 </style>

package/src/templates/PageImageDetail/PageImageDetail.vue

@@ -380,39 +380,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageImageDetail {
-  .PageImageDetail-image-container {
-    .BaseImagePlaceholder {
-      @apply select-none;
-
-      min-height: 400px;
-
-      img {
-        -webkit-user-drag: none;
-      }
-    }
-    @screen sm {
-      &::before {
-        content: '';
-        @apply absolute inset-0;
-      }
-    }
-  }
-
-  .TopicTabs {
-    button {
-      @apply select-none;
-    }
-  }
-
-  aside {
-    .BaseButton {
-      max-width: 200px;
-    }
-
-    .BlockText {
-      @apply text-lg;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageImageDetail';
 </style>

package/src/templates/PageVideoDetail/PageVideoDetail.vue

@@ -147,27 +147,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.PageVideoDetail {
-  .BaseImagePlaceholder {
-    @apply select-none;
-
-    min-height: 400px;
-  }
-
-  .video-aside {
-    .BaseButton {
-      max-width: 200px;
-    }
-
-    .BlockText {
-      @apply text-lg;
-    }
-  }
-
-  .video-transcript {
-    p {
-      @apply mb-4;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageVideoDetail';
 </style>

package/src/templates/edu/PageContentEdu.stories.js

@@ -10,6 +10,7 @@ export default {
       template: `<div id="storyDecorator" class="ThemeEdu"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.stories.js

@@ -13,6 +13,7 @@ export default {
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js

@@ -7,6 +7,7 @@ export default {
   title: 'Templates/EDU/PageEduEventDetail',
   component: PageEduEventDetail,
   tags: ['!autodocs'],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -326,33 +326,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PageEduEventDetail {
-  .PageEduEventDetail__Metadata {
-    @apply flex;
-    @apply items-baseline;
-    @apply mr-4 md:mr-4 xl:mr-12;
-    @apply mb-5 lg:mb-7;
-    @apply lg:max-w-[17rem] lg:min-w-[10rem];
-
-    span {
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-  }
-
-  .PageEduEventDetail__Buttons {
-    @apply text-base;
-    @apply lg:ml-auto;
-    @apply mt-10;
-    @apply lg:mt-0;
-    @apply text-center;
-  }
-  .bg-stars .MixinCarousel__Heading {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduEventDetail';
 </style>

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js

@@ -19,6 +19,7 @@ export default {
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -230,15 +230,5 @@ export default defineComponent({
   </div>
 </template>
 <style lang="scss">
-.PageEduExplainerArticle {
-  .BlockText {
-    ul {
-      li {
-        &::marker {
-          @apply text-secondary;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduExplainerArticle';
 </style>

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js

@@ -11,6 +11,7 @@ export default {
   title: 'Templates/EDU/PageEduGalleryDetail',
   component: PageEduGalleryDetail,
   tags: ['!autodocs'],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -243,29 +243,5 @@ const { data } = reactive(props)
   </div>
 </template>
 <style lang="scss">
-.PageEduGalleryDetail {
-  .bg-stars .MixinCarousel__Heading {
-    @apply text-white;
-  }
-  .MixinFancybox + .p-4 {
-    @apply px-0;
-  }
-  .PageEduGalleryDetailItem {
-    &:target {
-      @apply scroll-mt-14;
-      @screen lg {
-        @apply scroll-mt-[8rem];
-      }
-    }
-  }
-  .BlockText {
-    ul {
-      li {
-        &::marker {
-          @apply text-secondary;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduGalleryDetail';
 </style>

package/src/templates/edu/PageEduHome/PageEduHome.stories.js

@@ -11,6 +11,7 @@ export default {
   title: 'Templates/EDU/PageEduHome',
   component: PageEduHome,
   tags: ['!autodocs'],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/edu/PageEduHome/PageEduHome.vue

@@ -127,28 +127,5 @@ const submitSearch = () => {
   </div>
 </template>
 <style lang="scss">
-.PageEduHome {
-  .EduHero {
-    .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
-      }
-      input::placeholder {
-        @apply font-medium text-gray-dark opacity-80;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduHome';
 </style>

package/src/templates/edu/PageEduLesson/PageEduLesson.stories.js

@@ -24,6 +24,7 @@ export default {
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {
@@ -205,9 +206,6 @@ export const BaseStory = {
                 }
               ]
             },
-            {
-              blocks: BlockStreamfieldMinimalData.body
-            },
             {
               blocks: BlockStreamfieldMinimalData.body
             }
@@ -217,12 +215,6 @@ export const BaseStory = {
           // sectionHeading: 'Section Heading 2',
           stepsNumbering: true,
           steps: [
-            {
-              blocks: BlockStreamfieldMinimalData.body
-            },
-            {
-              blocks: BlockStreamfieldMinimalData.body
-            },
             {
               blocks: BlockStreamfieldMinimalData.body
             }
@@ -232,12 +224,6 @@ export const BaseStory = {
           sectionHeading: 'Section Heading 3',
           stepsNumbering: false,
           steps: [
-            {
-              blocks: BlockStreamfieldMinimalData.body
-            },
-            {
-              blocks: BlockStreamfieldMinimalData.body
-            },
             {
               blocks: BlockStreamfieldMinimalData.body
             }

package/src/templates/edu/PageEduLesson/PageEduLessonSection.vue

@@ -118,69 +118,5 @@ const { heading, blocks, image, procedures, text } = reactive(props)
   </section>
 </template>
 <style lang="scss">
-@use 'sass:math';
-@function pxToRem($pxValue) {
-  // Assumes font-size for body element is a constant 16px
-  @return math.div($pxValue, 16) * 1rem;
-}
-.PageEduLessonSection {
-  .PageEduProcedureSection {
-    .PageEduProcedureSectionSteps {
-      counter-reset: step;
-    }
-    .PageEduProcedureSectionSingleStep {
-      li:not(:last-of-type) .BlockStreamfield {
-        @apply -mb-5;
-      }
-    }
-    ol.PageEduProcedureSectionSingleStep {
-      @apply list-none pl-7;
-      text-wrap: pretty;
-      @screen lg {
-        @apply pl-0;
-      }
-      > li {
-        @apply relative w-full;
-        counter-increment: step;
-        &::before {
-          @apply relative block w-[45rem] mx-auto h-0 pl-1;
-          content: counter(step) '. ';
-          // mimicking .text-body-lg
-          font-size: pxToRem(18);
-          line-height: 1.6667;
-        }
-
-        @screen sm {
-          &::before {
-            @apply w-[47rem];
-            font-size: pxToRem(19);
-          }
-        }
-        @screen md {
-          &::before {
-            @apply w-[51.5rem];
-            font-size: pxToRem(20);
-          }
-        }
-        @screen lg {
-          &::before {
-            @apply w-[46rem] pl-0;
-            font-size: pxToRem(21);
-          }
-        }
-        @screen xl {
-          &::before {
-            @apply w-[59rem];
-            font-size: pxToRem(22);
-          }
-        }
-        @screen 2xl {
-          &::before {
-            // @apply w-[58.5rem];
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduLessonSection';
 </style>

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.stories.js

@@ -12,6 +12,7 @@ export default {
   title: 'Templates/EDU/PageEduMultimediaDetail',
   component: PageEduMultimediaDetail,
   tags: ['!autodocs'],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     html: {
       root: '#storyDecorator'

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -424,18 +424,5 @@ const { data } = reactive(props)
   </div>
 </template>
 <style lang="scss">
-.PageEduMultimediaDetail {
-  .bg-stars .MixinCarousel__Heading {
-    @apply text-white;
-  }
-  .BlockVideo,
-  .BlockVideoEmbed {
-    .BaseImageCaption {
-      @apply px-4 sm:px-5;
-      @screen 3xl {
-        @apply px-0;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduMultimediaDetail';
 </style>

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js

@@ -13,6 +13,7 @@ export default {
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js

@@ -27,6 +27,7 @@ export default {
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -447,16 +447,5 @@ const computedClass = computed((): string => {
   </div>
 </template>
 <style lang="scss">
-.PageEduStudentProject {
-  .BlockText {
-    ul {
-      li {
-        &::marker {
-          // intentionally using a specific red
-          @apply text-jpl-red;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduStudentProject';
 </style>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -167,63 +167,5 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
   </section>
 </template>
 <style lang="scss">
-@use 'sass:math';
-@function pxToRem($pxValue) {
-  // Assumes font-size for body element is a constant 16px
-  @return math.div($pxValue, 16) * 1rem;
-}
-.PageEduStudentProjectSection {
-  @apply overflow-x-hidden;
-  .PageEduStudentProjectStep {
-    &:target {
-      @apply scroll-mt-14;
-    }
-    .BlockStreamfield {
-      div:last-child {
-        @apply mb-0 #{!important};
-      }
-    }
-    .caption-area {
-      @apply px-0;
-    }
-    .steps-numbering {
-      // intentionally overriding correction that occurs within ThemeVariantGray
-      @apply text-jpl-red;
-    }
-    .LayoutHelper > div > .BlockText {
-      .richtext-image {
-        &.right,
-        &.left {
-          @apply lg:max-w-md;
-        }
-        &.right {
-          @apply mr-0;
-        }
-        &.left {
-          @apply ml-0;
-        }
-      }
-    }
-
-    .PageEduStudentProjectStep__fullWidth {
-      .LayoutHelper > div > .BlockText {
-        p,
-        li {
-          @screen lg {
-            @apply pr-[9rem];
-          }
-          @screen xl {
-            @apply pr-[13rem];
-          }
-        }
-        table {
-          p,
-          li {
-            @apply pr-0;
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/templates/PageEduStudentProjectSection';
 </style>

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.stories.js

@@ -24,6 +24,7 @@ export default {
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
     })
   ],
+  globals: { theme: 'ThemeEdu' },
   parameters: {
     layout: 'fullscreen',
     html: {