@explorer-1/vue 0.2.6 → 0.2.7

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
     }
   }
 }

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

@@ -1,7 +1,10 @@
 <template>
   <div
     v-if="data"
-    class="PageEduEventDetail pt-5 ThemeVariantLight lg:pt-12"
+    class="PageEduEventDetail ThemeVariantLight"
+    :class="{
+      'pt-5 lg:pt-12': heroIsInline
+    }"
     itemscope
     itemtype="http://schema.org/Event"
   >
@@ -25,7 +28,28 @@
       itemprop="description"
       :content="data.summary || data.body"
     />
-
+    <div
+      v-if="!heroIsInline"
+      class="relative max-w-screen-3xl mx-auto -mt-1"
+    >
+      <!-- hero image -->
+      <HeroMedia
+        class="md:mb-12 lg:mb-18 mb-10"
+        :image="data.eventImage"
+        :constrain="data.heroConstrain"
+      />
+      <div
+        v-if="formattedSplitEventDates"
+        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary print:hidden"
+      >
+        <div class="font-extrabold text-6xl leading-tight tracking-wider">
+          {{ formattedSplitEventDates.month }}
+        </div>
+        <div class="text-subtitle">
+          {{ formattedSplitEventDates.year }}
+        </div>
+      </div>
+    </div>
     <LayoutHelper
       indent="col-2"
       class="mb-6 lg:mb-12"
@@ -47,6 +71,14 @@
       >
         {{ data.title }}
       </BaseHeading>
+      <div
+        v-if="data.targetAudience"
+        class="text-body-lg mt-3 mb-6"
+      >
+        <strong>Target Audience:</strong>
+
+        {{ data.targetAudience }}
+      </div>
       <ShareButtonsEdu
         class="mt-4"
         :title="data.title"
@@ -56,8 +88,11 @@
 
     <LayoutHelper indent="col-2">
       <EventDetailHero
+        v-if="heroIsInline"
         :image="data.eventImage"
         :start-date-split="formattedSplitEventDates"
+        :constrain="data.heroConstrain"
+        :ongoing="data.ongoing"
       />
 
       <!-- Event details -->
@@ -67,17 +102,18 @@
           :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
         >
           <div
-            v-if="formattedEventDates || data.customDate"
+            v-if="data.ongoing || data.customDate || formattedEventDates"
             class="PageEduEventDetail__Metadata text-primary"
+            :class="{ 'flex-2': data.customDate }"
           >
-            <IconCalendar class="relative mr-3 text-[1.2rem]" />
-            <span>{{ formattedEventDates || data.customDate }}</span>
+            <IconCalendar class="relative mr-3 lg:mr-2 xl:mr-3 text-[1.2rem]" />
+            <span>{{ data.ongoing ? 'Ongoing' : data.customDate || formattedEventDates }}</span>
           </div>
           <div
             v-show="displayTime"
             class="PageEduEventDetail__Metadata text-primary"
           >
-            <IconTime class="relative mr-3" />
+            <IconTime class="relative mr-3 lg:mr-2 xl:mr-3" />
             <span>{{ displayTime }}</span>
           </div>
           <!--Virtual location -->
@@ -96,7 +132,7 @@
               itemprop="name"
               :content="data.locationName"
             />
-            <IconLocation class="relative mr-3" />
+            <IconLocation class="relative mr-3 lg:mr-2 xl:mr-3" />
             <BaseLink
               variant="none"
               class="text-action"
@@ -109,13 +145,14 @@
           <!-- Normal location -->
           <div
             v-else-if="data.locationName"
+            min-
             class="PageEduEventDetail__Metadata text-primary"
           >
             <meta
               itemprop="location"
               :content="data.locationName"
             />
-            <IconLocation class="relative mr-3" />
+            <IconLocation class="relative mr-3 lg:mr-2 xl:mr-3" />
             <BaseLink
               v-if="data.locationLink"
               variant="none"
@@ -126,13 +163,6 @@
             </BaseLink>
             <span v-else>{{ data.locationName }}</span>
           </div>
-          <div
-            v-if="data.targetAudience"
-            class="PageEduEventDetail__Metadata text-primary"
-          >
-            <IconUser class="relative mr-3 text-[.9rem]" />
-            <span>{{ data.targetAudience }}</span>
-          </div>
 
           <div class="PageEduEventDetail__Buttons">
             <BaseButton
@@ -172,6 +202,12 @@
           class="grid-cols-10 lg:grid -mx-4 lg:mx-0"
         >
           <div class="col-span-7">
+            <BlockText
+              v-if="data.topper && data.topper.length > 2"
+              class="lg:mb-8 mb-5 px-4 lg:px-0"
+              :text="data.topper"
+            />
+
             <p
               v-if="data.summary"
               class="BlockText text-body-lg mb-8 px-4 lg:px-0 font-semibold"
@@ -204,7 +240,7 @@
           >
           <div class="flex flex-col flex-wrap justify-start md:flex-row md:-mx-4">
             <div
-              v-for="(speaker, index) in data.speakers"
+              v-for="(item, index) in data.speakers"
               :key="index"
               class="flex flex-1 mb-6 md:flex-none md:flex-wrap md:mx-4 md:w-56"
             >
@@ -215,10 +251,10 @@
                   transparent-mode
                 >
                   <BaseImage
-                    v-if="speaker.image && speaker.image.src"
-                    :src="speaker.image.src.url"
-                    :width="speaker.image.src.width"
-                    :height="speaker.image.src.height"
+                    v-if="item.speaker.image && item.speaker.image.src"
+                    :src="item.speaker.image.src.url"
+                    :width="item.speaker.image.src.width"
+                    :height="item.speaker.image.src.height"
                     alt=""
                     class="object-cover"
                     loading="lazy"
@@ -232,30 +268,30 @@
               </div>
               <div class="flex-1 h-full">
                 <h3
-                  v-if="speaker.name"
+                  v-if="item.speaker.name"
                   class="my-3 text-lg !font-normal !tracking-normal leading-none"
                 >
                   <BaseLink
-                    v-if="speaker.internalLink || speaker.externalLink"
+                    v-if="item.speaker.internalLink || item.speaker.externalLink"
                     link-class="no-underline normal-case"
-                    :to="speaker.internalLink ? speaker.internalLink.url : null"
-                    :href="speaker.externalLink ? speaker.externalLink : null"
+                    :to="item.speaker.internalLink ? item.speaker.internalLink.url : null"
+                    :href="item.speaker.externalLink ? item.speaker.externalLink : null"
                     external-target-blank
                   >
-                    {{ speaker.name }}
+                    {{ item.speaker.name }}
                   </BaseLink>
                   <template v-else>
-                    {{ speaker.name }}
+                    {{ item.speaker.name }}
                   </template>
                 </h3>
                 <p
-                  v-if="speaker.title"
+                  v-if="item.speaker.title"
                   class="mb-3 text-gray-mid-dark"
                 >
-                  {{ speaker.title }}
+                  {{ item.speaker.title }}
                 </p>
                 <p class="text-action capitalize">
-                  {{ speaker.host }}
+                  {{ item.speaker.host }}
                 </p>
               </div>
             </div>
@@ -280,7 +316,7 @@
     <LayoutHelper
       v-if="data.relatedEvents?.length"
       indent="col-1"
-      class="my-12 lg:my-16"
+      class="my-12 lg:my-16 px-0"
     >
       <BlockLinkCarousel
         item-type="cards"
@@ -292,7 +328,7 @@
     <!-- Related Content -->
     <div
       v-if="data.relatedContent?.length"
-      class="bg-stars bg-[#15003B] lg:py-24 lg:mt-24 py-12 mt-12"
+      class="bg-stars bg-[#15003B] lg:py-24 lg:mt-24 py-12 mt-12 print:px-4"
     >
       <BlockLinkCarousel
         class="ThemeVariantDark"
@@ -315,10 +351,10 @@ import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BaseTag from './../../../components/BaseTag/BaseTag.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 import EventDetailHero from './../../../components/EventDetailHero/EventDetailHero.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
 import IconCalendar from './../../../components/Icons/IconCalendar.vue'
 import IconLocation from './../../../components/Icons/IconLocation.vue'
 import IconTime from './../../../components/Icons/IconTime.vue'
-import IconUser from './../../../components/Icons/IconUser.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import BaseButton from './../../../components/BaseButton/BaseButton.vue'
 import CalendarButton from './../../../components/CalendarButton/CalendarButton.vue'
@@ -327,6 +363,8 @@ import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/Bas
 import BaseImage from './../../../components/BaseImage/BaseImage.vue'
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+
 // @ts-ignore
 import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
 
@@ -338,10 +376,10 @@ export default defineComponent({
     BaseTag,
     ShareButtonsEdu,
     EventDetailHero,
+    HeroMedia,
     IconCalendar,
     IconLocation,
     IconTime,
-    IconUser,
     BaseLink,
     BaseButton,
     CalendarButton,
@@ -349,7 +387,8 @@ export default defineComponent({
     BaseImagePlaceholder,
     BaseImage,
     BlockRelatedLinks,
-    BlockLinkCarousel
+    BlockLinkCarousel,
+    BlockText
   },
   props: {
     data: {
@@ -364,22 +403,35 @@ export default defineComponent({
     }
   },
   computed: {
+    startDateTimeForFormatting(): string {
+      return this.data?.startDatetime || this.data?.startDate
+    },
     displayTime(): string {
-      return this.data
-        ? mixinFormatEventTimeInHoursAndMinutes(
-            this.data.startDatetime,
-            this.data.endDatetime,
-            this.data.endTime
-          )
-        : ''
+      if (!this.data?.customDate) {
+        const time =
+          this.data && this.startDateTimeForFormatting
+            ? mixinFormatEventTimeInHoursAndMinutes(
+                this.startDateTimeForFormatting,
+                this.data.endDatetime,
+                this.data.endTime
+              )
+            : undefined
+        return time ? time.replaceAll(':00', '') : ''
+      }
+      return ''
     },
-    formattedEventDates(): string {
-      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
+    formattedEventDates(): string | undefined {
+      return this.data && this.startDateTimeForFormatting
+        ? mixinFormatEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
+        : undefined
     },
     formattedSplitEventDates() {
-      return this.data
-        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+      return this.data && this.startDateTimeForFormatting
+        ? mixinFormatSplitEventDates(this.startDateTimeForFormatting, this.data.endDatetime)
         : undefined
+    },
+    heroIsInline(): boolean {
+      return this.data?.heroPosition === 'inline'
     }
   }
 })
@@ -389,12 +441,11 @@ export default defineComponent({
   .PageEduEventDetail__Metadata {
     @apply flex;
     @apply items-baseline;
-    @apply mr-12 md:mr-8 lg:mr-12;
+    @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 {
-      max-width: 230px;
-      min-width: 110px;
       @apply text-gray-dark;
     }
 
@@ -409,8 +460,8 @@ export default defineComponent({
     @apply lg:ml-auto;
     @apply mt-10;
     @apply lg:mt-0;
-
-    max-width: 260px;
+    @apply text-center;
+    @apply max-w-[17rem];
   }
   .bg-stars .MixinCarousel__Heading {
     @apply text-white;

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

@@ -192,7 +192,7 @@ export default defineComponent({
     <!-- related content -->
     <BlockLinkCarousel
       item-type="cards"
-      class="lg:my-24 my-12"
+      class="lg:my-24 my-12 print:px-4"
       :heading="data.relatedContentHeading"
       :items="data.relatedContent"
     />