@explorer-1/vue 0.2.20 → 0.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseImageCaption/BaseImageCaption.vue

@@ -14,6 +14,14 @@ export default defineComponent({
       type: Object as PropType<Partial<ImageObject>>,
       required: true,
       default: undefined
+    },
+    customLink: {
+      type: String,
+      default: undefined
+    },
+    customLinkText: {
+      type: String,
+      default: 'Custom Link'
     }
   }
 })
@@ -43,6 +51,14 @@ export default defineComponent({
     >
       Full Image Details
     </BaseLink>
+    <BaseLink
+      v-else-if="customLink"
+      class="inline-block"
+      variant="default"
+      :to="customLink"
+    >
+      {{ customLinkText }}
+    </BaseLink>
   </div>
 </template>
 

package/src/components/BaseTimer/BaseTimer.vue

@@ -52,11 +52,7 @@
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import dayjs, { type Dayjs } from 'dayjs'
-import duration, { type Duration } from 'dayjs/plugin/duration.js'
-import minMax from 'dayjs/plugin/minMax.js'
-
-dayjs.extend(duration)
-dayjs.extend(minMax)
+import { type Duration } from 'dayjs/plugin/duration.js'
 
 const calculateDuration = (start: Dayjs): Duration | undefined => {
   // Use round seconds so the datetime string stays valid and can be read by screen readers.

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -18,7 +18,7 @@
       />
     </div>
     <MixinCarousel
-      class="md:hidden sm:px-10 sm:-ml-10 py-10 -mt-10 overflow-x-visible"
+      class="md:hidden sm:-ml-10 py-14 lg:py-10 -mt-10 overflow-x-hidden"
       indent="col-1"
       :slides-per-view="3"
       no-links

package/src/components/BlockGist/BlockGist.stories.js

@@ -8,10 +8,9 @@ export default {
 
 export const BlockGistData = {
   blockType: 'GitHubGistBlock',
-  caption:
-    '<p data-block-key="a7ves">The count of contributions (summary of Pull Requests, opened issues and commits) to public repos at GitHub.com from Wed, 21 Sep 2022 till Thu, 21 Sep 2023.</p>',
+  caption: '<p>Caption for gist block</p>',
   id: 'cefc8e20-2833-4d0b-a4d6-7f469d5dbd02',
-  url: 'https://gist.github.com/paulmillr/2657075'
+  url: 'https://gist.github.com/nasajpledu/acb1a3f04895a9905570b267193d42ac'
 }
 
 // stories

package/src/components/BlockGist/BlockGist.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import GitHub404 from './GitHub404.vue'
 interface BlockGistProps {
   data: {
@@ -46,7 +47,7 @@ watch(
       <GitHub404 />
     </template>
     <template v-else-if="gistUrl">
-      <div class="z-50 relative">
+      <div class="relative">
         <div
           id="iframe-description"
           class="sr-only"
@@ -79,7 +80,6 @@ watch(
           ref="frame"
           :src="gistUrl"
           :class="{ loaded }"
-          class="md:min-h-[313px] lg:min-h-[613px]"
           width="100%"
           frameborder="0"
           title="Code snippet display"
@@ -87,17 +87,15 @@ watch(
           aria-describedby="iframe-description"
           aria-hidden="false"
         ></iframe>
-        <div class="gist-caption">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="props.data.caption"></span>
-          <nuxt-link
-            :to="props.data.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="View on GitHub"
-          >
-            {{ 'View on GitHub' }}
-          </nuxt-link>
+        <div
+          v-if="data.caption"
+          class="py-4"
+        >
+          <BaseImageCaption
+            :data="data"
+            :custom-link="props.data.url"
+            custom-link-text="View on GitHub"
+          />
         </div>
       </div>
     </template>
@@ -106,8 +104,6 @@ watch(
 
 <style scoped lang="scss">
 .BlockGist {
-  margin: 2rem 0;
-
   .GitHubIcon {
     @apply h-5 pb-0.5 flex flex-row items-baseline flex-grow-0;
   }
@@ -115,31 +111,12 @@ watch(
   iframe {
     @apply border border-gray-light-mid border-t-8 rounded-none;
   }
-
-  .gist-caption {
-    @apply text-sm font-medium m-1 flex-wrap;
-
-    span {
-      p {
-        @apply text-gray-mid;
-      }
-    }
-
-    a {
-      @apply underline text-action can-hover:hover:text-action-dark cursor-pointer;
-      white-space: nowrap; /* Prevents the link from wrapping onto a new line */
-    }
-  }
 }
 body.ThemeVariantLight {
   .BlockGist {
     iframe {
       @apply border-gray-light-mid;
     }
-
-    .gist-caption {
-      @apply text-gray-mid-dark;
-    }
   }
 }
 
@@ -148,10 +125,6 @@ body.ThemeVariantDark {
     iframe {
       @apply border-gray-mid-dark bg-gray-light;
     }
-
-    .gist-caption {
-      @apply text-gray-light-mid;
-    }
   }
 }
 </style>

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

@@ -20,6 +20,7 @@ import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 export default {
   title: 'Components/Blocks/BlockStreamfield',
   component: BlockStreamfield,
+  tags: ['!autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
@@ -90,6 +91,12 @@ export const BlockStreamfieldData = {
       heading: 'Heading 3',
       level: 'h3'
     },
+    {
+      blockType: 'GitHubGistBlock',
+      caption: '<p>Caption for gist block</p>',
+      id: 'cefc8e20-2833-4d0b-a4d6-7f469d5dbd02',
+      url: 'https://gist.github.com/nasajpledu/acb1a3f04895a9905570b267193d42ac'
+    },
     {
       blockType: 'RichTextBlock',
       value:

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -169,7 +169,7 @@
       <LayoutHelper
         v-else-if="block.blockType == 'GitHubGistBlock'"
         :key="`GitHubGistBlock${index}`"
-        indent="col-2"
+        indent="col-3"
         class="lg:mb-18 mb-10"
       >
         <BlockGist :data="block" />
@@ -199,14 +199,13 @@
         :data="block"
       />
 
-      <LayoutHelper
+      <div
         v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
-        :key="`gridBlock${index}`"
-        indent="col-1"
+        :key="`cardGridBlock${index}`"
         class="lg:mb-18 mb-10"
       >
         <BlockCardGrid :cards="block.items" />
-      </LayoutHelper>
+      </div>
 
       <div
         v-else

package/src/components/BlockTeaser/BlockTeaser.vue

@@ -115,16 +115,14 @@ export default defineComponent({
      * Fall back to the linked page’s label, if there is one.
      */
     theLabel(): string {
-      return (
-        this.customLabel || this.label || (this.theTeaserPage && this.theTeaserPage.label) || ''
-      )
+      return this.customLabel || this.label || this.theTeaserPage?.label || ''
     },
 
     /**
      * Fall back to the linked page’s title, if there is one.
      */
     theHeading(): string {
-      return this.heading || (this.theTeaserPage && this.theTeaserPage.title) || ''
+      return this.heading || this.theTeaserPage?.title || ''
     },
 
     /**
@@ -146,25 +144,30 @@ export default defineComponent({
     },
     // necessary as the streamfield teaser block passes an array of blocks
     // this is necessary to retrieve the label from the teaser pages
-    theTeaserPage(): teaserPageObject | null {
-      if (this.teaserPage && typeof this.teaserPage === 'object') {
+    theTeaserPage(): teaserPageObject | undefined {
+      if (this.teaserPageBlock) {
+        return this.teaserPageBlock
+      } else if (this.teaserPage && typeof this.teaserPage === 'object') {
         return this.teaserPage as teaserPageObject
-      } else if (this.teaserPage && Object.keys(this.teaserPage).length) {
-        const parsedTeaserPage = this.getTeaserPageBlock()
-        if (parsedTeaserPage) {
-          return parsedTeaserPage[0].page
+      }
+      return undefined
+    },
+    teaserPageBlock(): teaserPageObject | undefined {
+      if (Array.isArray(this.teaserPage) && this.teaserPage?.length) {
+        const filteredBlocks = this.teaserPage.filter(
+          (block: teaserPageBlock) => block.blockType === 'PageChooserBlock'
+        )
+        if (filteredBlocks?.length) {
+          return filteredBlocks[0].page
         }
       }
-      return null
+      return undefined
     }
   },
   methods: {
-    getTeaserPageBlock(): teaserPageBlock[] | null {
-      if (this.teaserPage && this.teaserPage.length) {
-        const theBlocks = this.teaserPage
-        return theBlocks.filter((block: teaserPageBlock) => block.blockType === 'PageChooserBlock')
-      }
-      return null
+    getTeaserPageBlock(page: any[]): teaserPageBlock[] | null {
+      const theBlocks = page
+      return theBlocks.filter((block: teaserPageBlock) => block.blockType === 'PageChooserBlock')
     }
   }
 })

package/src/components/NavDesktop/NavDesktop.stories.js

@@ -120,14 +120,10 @@ export const NavDesktopData = {
           title: 'Missions'
         },
         {
-          ...MenuLinkColumnWithHeaderData,
-          heading: null,
-          headingPage: null
+          ...MenuLinkColumnWithHeaderData
         },
         {
-          ...MenuLinkColumnWithHeaderData,
-          heading: null,
-          headingPage: null
+          ...MenuLinkColumnWithHeaderData
         }
       ]
     },

package/src/components/NavHeading/NavHeading.vue

@@ -15,7 +15,7 @@
     </template>
     <template v-else-if="data.heading">
       <div class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4">
-        <span class="p-2">{{ data.heading }}</span>
+        <span class="px-2 block">{{ data.heading }}</span>
       </div>
     </template>
   </div>

package/src/components/NavLinkList/NavLinkList.stories.js

@@ -18,7 +18,7 @@ export default {
 
 export const MenuLinkColumnWithHeaderData = {
   blockType: 'MenuLinkColumnWithHeader',
-  heading: 'The Heading',
+  heading: 'Online Resources',
   headingPage: {
     url: '/solar-system/'
   },

package/src/components/TheFooter/TheFooter.vue

@@ -32,7 +32,7 @@
             <BaseLink
               variant="none"
               href="https://www.nasa.gov/learning-resources/"
-              class="text-subtitle text-blue edu:text-white mb-3"
+              class="text-subtitle text-blue edu:text-white sm:mb-3 xl:col-span-2 md:col-span-3 col-span-4 mb-8"
               link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center"
               external-target-blank
             >

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

@@ -13,6 +13,7 @@ import PageEduExplainerArticle from './PageEduExplainerArticle.vue'
 export default {
   title: 'Templates/EDU/PageEduExplainerArticle',
   component: PageEduExplainerArticle,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
@@ -28,6 +29,7 @@ export default {
 }
 
 export const BaseStory = {
+  name: 'PageEduExplainerArticle',
   args: {
     data: {
       __typename: 'EDUExplainerArticlePage',
@@ -50,7 +52,7 @@ export const BaseStory = {
       showJumpMenu: true,
       ...BlockStreamfieldTruncatedData,
       publicationDate: '2024-07-09',
-      summary: 'Summary of resource article',
+      topper: 'Topper of resource article',
       getTopicsForDisplay: [
         {
           __typename: 'TopicPage',

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

@@ -5,6 +5,7 @@ import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/Bas
 import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
 import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
@@ -30,6 +31,7 @@ export default defineComponent({
     BlockImageComparison,
     BlockLinkCarousel,
     BlockRelatedLinks,
+    BlockText,
     BlockVideo,
     NavJumpMenu
   },
@@ -170,17 +172,16 @@ export default defineComponent({
       />
     </LayoutHelper>
 
-    <!-- summary and topper -->
     <LayoutHelper
+      v-if="data.topper"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >
-      <p
-        class="text-body-lg font-semibold"
-        itemprop="abstract"
-      >
-        {{ data.summary }}
-      </p>
+      <BlockText
+        v-if="data.topper"
+        class="lg:mb-8 mb-5 px-4 lg:px-0"
+        :text="data.topper"
+      />
     </LayoutHelper>
 
     <!-- streamfield blocks -->

package/src/utils/dayjs.js

@@ -3,7 +3,8 @@ import updateLocale from 'dayjs/plugin/updateLocale.js'
 import localizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-
+import duration from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
 // Locales must be imported manually
 // see https://github.com/iamkun/dayjs/tree/dev/src/locale
 import 'dayjs/locale/en-gb.js'
@@ -29,4 +30,7 @@ dayjs.updateLocale('en', {
   ]
 })
 
+dayjs.extend(duration)
+dayjs.extend(minMax)
+
 export default dayjs