@explorer-1/vue 0.2.5 → 0.2.7

package/src/components/NavLinkList/NavLinkList.vue

@@ -12,7 +12,7 @@
       >
         <BaseLink
           variant="none"
-          class="block text-lg font-medium leading-tight text-white"
+          class="block text-base xl:text-lg font-medium leading-tight text-white"
           :href="item.path && !getRouterLink(item) ? item.path : undefined"
           :to="getRouterLink(item) ? getRouterLink(item) : undefined"
           link-class="can-hover:hover:underline inline-block px-2 py-3 -ml-2"

package/src/components/NavMobile/NavMobile.vue

@@ -2,7 +2,7 @@
   <transition name="headerMobileReveal">
     <div
       v-show="headerVisible"
-      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b edu:bg-gray-light edu:border-none"
+      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b edu:bg-gray-light edu:border-none print:edu:!border-b print:border-black"
       :class="headerClasses"
     >
       <!-- navbar -->
@@ -13,13 +13,22 @@
           <!-- branding -->
           <div class="flex items-center">
             <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3 edu:w-[12rem]">
-              <img
-                v-if="themeStore.theme === 'ThemeEdu'"
-                :src="LogoWhite"
-                alt="JPL Logo"
-                width="324"
-                height="72"
-              />
+              <template v-if="themeStore.theme === 'ThemeEdu'">
+                <img
+                  class="print:hidden"
+                  :src="LogoWhite"
+                  alt="JPL Logo"
+                  width="324"
+                  height="72"
+                />
+                <img
+                  class="hidden print:block"
+                  :src="LogoColor"
+                  alt="JPL Logo"
+                  width="324"
+                  height="72"
+                />
+              </template>
               <img
                 v-else
                 :src="LogoColor"
@@ -30,14 +39,14 @@
             </NavLogoLinks>
             <div
               v-if="themeStore.theme === 'ThemeEdu'"
-              class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20"
+              class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20 print:border-black"
             >
               <span class="text-white font-bold text-xl pl-px">Education</span>
             </div>
           </div>
           <button
             v-if="data"
-            class="text-gray-dark p-4 -mr-4 cursor-pointer"
+            class="print:hidden text-gray-dark p-4 -mr-4 cursor-pointer"
             :aria-label="menuVisible ? 'Close menu' : 'Open menu'"
             @click="toggleMenu"
           >
@@ -87,6 +96,18 @@
                 :start-open="checkActive(item.titleLink) && !hasSecondary"
               />
             </template>
+            <template v-if="themeStore.isEdu">
+              <BaseLink
+                variant="none"
+                href="https://www.nasa.gov/learning-resources/"
+                class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
+                link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center py-0 pl-6 -ml-4 border-l-4 border-transparent"
+                external-target-blank
+              >
+                <span class="pr-2">NASA OSTEM</span>
+                <IconExternal class="shrink-0 text-sm -mt-0.5" />
+              </BaseLink>
+            </template>
           </nav>
           <div class="pl-8">
             <nav
@@ -122,6 +143,8 @@ import { useHeaderStore } from './../../store/header'
 import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
 import IconClose from './../Icons/IconClose.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
 import NavMobileDropdown from './../NavMobile/NavMobileDropdown.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
@@ -140,7 +163,9 @@ export default defineComponent({
     NavMobileDropdown,
     NavMobileLink,
     NavSocial,
-    NavSearchForm
+    NavSearchForm,
+    BaseLink,
+    IconExternal
   },
   props: {
     data: {

package/src/components/ShareButtons/ShareButtons.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ShareButtons relative flex flex-row items-start border-collapse"
+    class="ShareButtons relative flex flex-row items-start border-collapse print:hidden"
     :class="{ 'lg:absolute lg:top-0 lg:left-0 lg:flex-col': !inline }"
   >
     <BaseButton

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -89,7 +89,7 @@ const buttonClass = computed(() => {
 })
 </script>
 <template>
-  <div class="ShareButtonsEdu relative flex flex-row items-start border-collapse">
+  <div class="ShareButtonsEdu relative flex flex-row items-start border-collapse print:hidden">
     <BaseButton
       variant="social"
       :class="buttonClass"

package/src/components/TheFooter/TheFooter.vue

@@ -1,5 +1,7 @@
 <template>
-  <footer class="TheFooter bg-jpl-blue-darker edu:bg-stars edu:bg-primary text-white relative z-20">
+  <footer
+    class="TheFooter bg-jpl-blue-darker edu:bg-stars edu:bg-primary text-white relative z-20 print:px-4 print:border-t print:border-black"
+  >
     <div class="footer-main lg:BaseGrid 3xl:px-0 lg:pt-20 container px-4 pt-10 mx-auto">
       <div class="footer-navigation lg:block lg:col-span-9 hidden col-span-12">
         <!-- footerNavigation -->
@@ -26,6 +28,18 @@
               {{ getLinkText(link) }}
             </BaseLink>
           </div>
+          <template v-if="themeStore.isEdu">
+            <BaseLink
+              variant="none"
+              href="https://www.nasa.gov/learning-resources/"
+              class="text-subtitle text-blue edu:text-white mb-3"
+              link-class="flex flex-wrap-none overflow-visible whitespace-nowrap items-center"
+              external-target-blank
+            >
+              <span class="pr-2">NASA OSTEM</span>
+              <IconExternal class="shrink-0 text-sm -mt-0.5" />
+            </BaseLink>
+          </template>
         </div>
       </div>
       <!-- footer extras -->
@@ -180,6 +194,7 @@ import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from './../../store/theme'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import IconExternal from './../Icons/IconExternal.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import NavSocial from './../NavSocial/NavSocial.vue'
@@ -193,7 +208,8 @@ export default defineComponent({
     BaseButton,
     NavSocial,
     TheFooterSignUp,
-    LogoCaltech
+    LogoCaltech,
+    IconExternal
   },
   props: {
     data: {

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -270,10 +270,11 @@
     <LayoutHelper
       v-if="data.moreEvents && data.moreEvents.length > 0"
       indent="col-1"
-      class="my-12 lg:my-16"
+      class="my-12 lg:my-16 print:!px-4"
     >
       <BlockLinkCarousel
         item-type="cards"
+        class="print:!px-4"
         heading="MORE EVENTS"
         :items="data.moreEvents"
       />

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -174,6 +174,7 @@ import BlockImageStandard from './../../components/BlockImage/BlockImageStandard
 import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import ShareButtons from './../../components/ShareButtons/ShareButtons.vue'
 import BlockText from './../../components/BlockText/BlockText.vue'
+import BlockVideo from './../../components/BlockText/BlockText.vue'
 
 export default defineComponent({
   name: 'PageNewsDetail',
@@ -190,7 +191,8 @@ export default defineComponent({
     BlockImageStandard,
     BlockLinkCarousel,
     ShareButtons,
-    BlockText
+    BlockText,
+    BlockVideo
   },
   props: {
     data: {

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

@@ -1,6 +1,5 @@
 import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
-import { EventDetailHeroData } from './../../../components/EventDetailHero/EventDetailHero.stories'
 import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
 import PageEduEventDetail from './PageEduEventDetail.vue'
 
@@ -17,114 +16,157 @@ export default {
   excludeStories: /.*Data$/
 }
 
-// stories
-export const BaseStory = {
-  name: 'PageEduEventDetail',
-  args: {
-    data: {
-      id: '285',
-      title: 'Becoming a NASA engineer',
-      slug: 'becoming-a-nasa-engineer',
-      url: '/events/becoming-a-nasa-engineer',
-      startDate: '2022-01-23',
-      startDatetime: '2022-01-23T17:00:00-08:00',
-      startTime: '17:00:00',
-      endDate: '2022-01-25',
-      endDatetime: '2022-01-25T23:00:00-08:00',
-      endTime: '23:00:00',
-      isAllDay: false,
-      timezone: 'PST',
-      eventType: 'Workshop',
-      summary:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
-      locationName: 'Webcast',
-      registerLink: [
-        {
-          text: 'Registration Link',
-          document: '',
-          page: {
-            url: '/placeholder'
-          },
-          externalLink: ''
-        }
-      ],
-      eventImage: {
-        __typename: 'CustomImage',
-        srcSet:
-          'https://picsum.photos/720/420 320w, https://picsum.photos/720/420 640w, https://picsum.photos/720/420 720w',
-        original: 'https://picsum.photos/720/420',
-        src: {
-          __typename: 'CustomRendition',
-          url: 'https://picsum.photos/720/420',
-          width: '720',
-          height: '420'
+const PageEduEventDetailData = {
+  id: '285',
+  title: 'Becoming a NASA engineer',
+  slug: 'becoming-a-nasa-engineer',
+  url: '/events/becoming-a-nasa-engineer',
+  timezone: 'PST',
+  startDate: '2024-08-08',
+  startDatetime: '2024-08-08T14:00:00-07:00',
+  startTime: '15:00:00',
+  endDate: '2024-08-08',
+  endDatetime: '2024-08-08T22:00:00-07:00',
+  endTime: '22:00:00',
+  ongoing: false,
+  eventType: 'Workshop',
+  topper: '<p data-block-key="yecrn">Event topper</p>',
+  summary:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et luctus nisi. Maecenas vel turpis sem. Nullam ultricies nulla quis nisi faucibus eleifend. In turpis ante, blandit nec dapibus tempor, posuere at erat. In justo quam, imperdiet at hendrerit eget, imperdiet ut orci. ',
+  locationName: 'Webcast',
+  registerLink: [
+    {
+      document: null,
+      externalLink: 'https://nasa.gov',
+      page: null,
+      text: 'Registration Link'
+    }
+  ],
+  eventImage: {
+    __typename: 'CustomImage',
+    srcSet:
+      'https://picsum.photos/720/420 320w, https://picsum.photos/720/420 640w, https://picsum.photos/720/420 720w',
+    original: 'https://picsum.photos/720/420',
+    src: {
+      __typename: 'CustomRendition',
+      url: 'https://picsum.photos/720/420',
+      width: '720',
+      height: '420'
+    },
+    title: 'Marine Picks First Public Mars Global Surveyor Image',
+    alt: '',
+    caption:
+      '<p data-block-key="y00sz">A close-up view of part of the area imaged by Mars Global Surveyor for its public request program.</p>',
+    credit: 'Credit',
+    detailUrl: null
+  },
+  heroConstrain: false,
+  heroPosition: 'inline',
+  thumbnailImage: {
+    alt: '',
+    original: 'https://picsum.photos/512/288'
+  },
+  targetAudience: 'All ages',
+
+  body: [
+    BlockKeyPointsData,
+    {
+      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><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'
+    }
+  ],
+  relatedEvents: [...EventsBlockLinkCarouselData],
+  speakers: [
+    {
+      speaker: {
+        host: 'host',
+        id: '1',
+        internalLink: null,
+        name: 'Varoujan Gorjian',
+        title: 'Splitzer Research Scientest, JPL'
+      }
+    },
+    {
+      speaker: {
+        host: 'co-host',
+        id: '2',
+        image: {
+          alt: '',
+          src: {
+            height: '450',
+            url: 'https://picsum.photos/560/560',
+            width: '450'
+          }
         },
-        title: 'Marine Picks First Public Mars Global Surveyor Image',
-        alt: '',
-        caption:
-          '<p data-block-key="y00sz">A close-up view of part of the area imaged by Mars Global Surveyor for its public request program.</p>',
-        credit: 'Credit',
-        detailUrl: null
-      },
-      thumbnailImage: {
-        alt: '',
-        original: 'https://picsum.photos/512/288'
-      },
-      targetAudience: 'All ages',
-      body: [
-        BlockKeyPointsData,
-        {
-          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><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'
-        }
-      ],
-      relatedEvents: [...EventsBlockLinkCarouselData],
-      speakers: [
+        internalLink: null,
+        name: 'Robert Hurt',
+        title: 'Splitzer visualisation'
+      }
+    }
+  ],
+  relatedLinks: [
+    {
+      blockType: 'RelatedLinksBlock',
+      heading: 'Related Links',
+      links: [
         {
-          host: 'host',
-          id: '1',
-          internalLink: null,
-          name: 'Varoujan Gorjian',
-          title: 'Splitzer Research Scientest, JPL'
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Lorem ipsum dolor'
         },
         {
-          host: 'co-host',
-          id: '2',
-          image: {
-            alt: '',
-            src: {
-              height: '450',
-              url: 'https://picsum.photos/560/560',
-              width: '450'
-            }
-          },
-          internalLink: null,
-          name: 'Robert Hurt',
-          title: 'Splitzer visualisation'
+          document: null,
+          externalLink: 'http://www.google.com',
+          page: null,
+          text: 'Sit amet consectatur'
         }
-      ],
-      relatedLinks: [
-        {
-          blockType: 'RelatedLinksBlock',
-          heading: 'Related Links',
-          links: [
-            {
-              document: null,
-              externalLink: 'http://www.google.com',
-              page: null,
-              text: 'Lorem ipsum dolor'
-            },
-            {
-              document: null,
-              externalLink: 'http://www.google.com',
-              page: null,
-              text: 'Sit amet consectatur'
-            }
-          ]
-        }
-      ],
-      relatedContent: BlockLinkCardCarouselData
+      ]
+    }
+  ],
+  relatedContent: BlockLinkCardCarouselData
+}
+// stories
+export const BaseStory = {
+  name: 'PageEduEventDetail',
+  args: { data: PageEduEventDetailData }
+}
+
+export const CustomDate = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      startDate: '2024-08-08',
+      startDatetime: null,
+      startTime: null,
+      endDate: '2024-08-08',
+      endDatetime: '2024-08-08T22:00:00-07:00',
+      endTime: null,
+      customDate: 'Custom date information',
+      ongoing: false
+    }
+  }
+}
+
+export const MultiDayEvent = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      startDate: '2024-08-08',
+      endDate: '2024-08-12',
+      startDatetime: '2024-08-08T14:00:00-07:00',
+      startTime: '15:00:00',
+      endDatetime: '2024-08-12T22:00:00-07:00'
+    }
+  }
+}
+
+export const Ongoing = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      ongoing: true
     }
   }
 }