@explorer-1/vue 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
     "vue": "^3.4.21",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.2"
+    "@explorer-1/common": "1.1.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseButton/BaseButton.vue

@@ -94,7 +94,7 @@ export default defineComponent({
 <template>
   <component
     :is="tag"
-    class="BaseButton text-contrast-none"
+    class="BaseButton text-contrast-none print:border print:!border-gray-dark print:text-center"
     :class="variantClass"
     :aria-label="ariaLabel"
     :disabled="disabled"

package/src/components/BaseImage/BaseImage.vue

@@ -103,7 +103,7 @@ export default defineComponent({
     <img
       v-if="src"
       ref="BaseImage"
-      class="BaseImage"
+      class="BaseImage print:border print:border-gray-mid"
       :class="computedClass"
       :data-src="src"
       :data-srcset="srcset"

package/src/components/BaseTag/BaseTag.vue

@@ -11,7 +11,7 @@ const variantMap: Attributes = {
 const sizeMap: Attributes = {
   sm: 'text-xs border-t-2 py-1 px-2.5',
   md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
-  lg: 'text-base lg:text-lg border-t py-1.5 px-5'
+  lg: 'text-base lg:text-lg border-t pt-1.5 pb-1 px-5'
 }
 
 interface BaseTagProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<BaseTagProps>(), {
 <template>
   <p
     :class="`${variantMap[props.variant]} ${sizeMap[props.size]}`"
-    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
   >
     <slot />
     <span class="sr-only">.</span>

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -5,7 +5,7 @@
         v-if="data.url"
         ref="BlockIframeEmbed"
         loading="lazy"
-        class="w-full border-none"
+        class="w-full border-none print:!border print:border-gray-dark"
         :class="{ lazyload: !lazyNative }"
         :title="data.title"
         :data-src="data.url"
@@ -18,6 +18,7 @@
     <template v-else>
       <BaseImagePlaceholder
         v-if="data.url"
+        class="print:border print:border-gray-dark"
         aspect-ratio="16:9"
         dark-mode
       >
@@ -39,7 +40,7 @@
     </template>
     <div
       v-if="data.caption && data.caption.length > 2"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/BlockImage/BlockImageStandard.vue

@@ -98,7 +98,7 @@ export default defineComponent({
     </MixinFancybox>
     <div
       v-if="theData && hasCaptionArea"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="theData" />
     </div>

package/src/components/BlockKeyPoints/BlockKeyPoints.vue

@@ -7,11 +7,11 @@
       class="mb-5"
       :data="{ heading: data.heading }"
     />
-    <ul>
+    <ul class="print:!list-disc">
       <li
         v-for="(item, index) in data.listItem"
         :key="index"
-        class="flex"
+        class="flex print:!list-item print:ml-4"
         :class="index + 1 === data.listItem.length ? 'mb-0' : 'mb-4'"
       >
         <BlockText

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -208,6 +208,7 @@ export default defineComponent({
     .BlockLinkCard__CardContent,
     .BlockLinkCard__CardArrow {
       @apply px-6;
+      @apply print:px-0;
     }
     .BaseImagePlaceholder {
       @apply bg-gray-mid-dark;

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -8,36 +8,38 @@
     >
       {{ data.heading }}
     </BaseHeading>
-    <div
+    <ul
       v-for="(link, index) in data.links"
       :key="index"
-      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2"
+      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2 print:list-disc print:ml-4"
     >
-      <template v-if="link.externalLink">
-        <RelatedLink
-          variant="external"
-          :href="link.externalLink"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-      <template v-else-if="link.document">
-        <RelatedLink
-          variant="document"
-          :href="link.document.url"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-      <template v-else-if="link.page">
-        <RelatedLink
-          variant="page"
-          :to="link.page.url"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-    </div>
+      <li>
+        <template v-if="link.externalLink">
+          <RelatedLink
+            variant="external"
+            :href="link.externalLink"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+        <template v-else-if="link.document">
+          <RelatedLink
+            variant="document"
+            :href="link.document.url"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+        <template v-else-if="link.page">
+          <RelatedLink
+            variant="page"
+            :to="link.page.url"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+      </li>
+    </ul>
   </div>
 </template>
 <script lang="ts">

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -3,16 +3,16 @@
     :is="tag"
     :to="to"
     :href="href"
-    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer"
+    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer print:px-0 print:py-0 print:block"
     :target="target"
     rel="noopener"
   >
-    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words">
+    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words print:inline">
       <slot />
     </span>
     <component
       :is="icon"
-      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal"
+      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal print:inline print:text-sm print:mx-2"
       :class="variant === 'external' ? 'text-lg' : 'text-3xl'"
     />
   </component>

package/src/components/BlockVideo/BlockVideo.vue

@@ -10,7 +10,7 @@
 
     <div
       v-if="(data.caption && data.caption.length > 2) || data.credit"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -11,7 +11,7 @@
     </BaseImagePlaceholder>
     <div
       v-if="data.caption"
-      class="lg:px-0 p-4"
+      class="lg:px-0 p-4 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

package/src/components/CalendarButton/CalendarButton.vue

@@ -64,13 +64,18 @@ export default defineComponent({
       options: undefined
     }
   },
+  computed: {
+    icsDescription() {
+      return `${(this.description ? this.description + '\n\n' : '') + window?.location.href}`
+    }
+  },
 
   mounted() {
     this.init()
   },
   methods: {
     init() {
-      let recurrence = {}
+      let recurrence = undefined
       if (this.endDatetime && this.isAllDay) {
         // Calculate how many full days
         const startDateDayjs = dayjs(this.startDatetime)
@@ -81,21 +86,15 @@ export default defineComponent({
 
       this.options = {
         title: this.title ? this.title : undefined,
-        location: this.location ? this.addSlashes(this.location) : undefined,
-        description: this.description ? this.description : undefined,
+        location: this.location ? this.location : undefined,
+        description: this.icsDescription,
         start: new Date(this.startDatetime),
         end: !this.isAllDay && this.endDatetime ? new Date(this.endDatetime) : undefined,
         recurrence
       }
+
       this.icalendar = new ICalendar(this.options)
     },
-    addSlashes(string: string): string {
-      // Escape special characters COMMA, SEMI-COLON and BACKSLASH
-      // as temporary fix for this issue https://github.com/jshor/datebook/issues/179
-      // regex based of https://stackoverflow.com/a/770533
-      // eslint-disable-next-line
-      return string.replace(/[,;\\]/g, '\\$&').replace(/\u0000/g, '\\0')
-    },
     handleDownload() {
       const ics = this.icalendar.render()
       const blob = new Blob([ics], {

package/src/components/EventCard/EventCard.vue

@@ -65,12 +65,22 @@
             v-if="splitDate"
             class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
           >
-            <div class="font-extrabold text-6xl leading-tight tracking-wider">
-              {{ splitDate.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ splitDate.monthAndYear }}
-            </div>
+            <template v-if="themeStore.isEdu">
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.month }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.year }}
+              </div>
+            </template>
+            <template v-else>
+              <div class="font-extrabold text-6xl leading-tight tracking-wider">
+                {{ splitDate.day }}
+              </div>
+              <div class="text-subtitle">
+                {{ splitDate.monthAndYear }}
+              </div>
+            </template>
           </div>
         </BaseImagePlaceholder>
       </div>
@@ -84,8 +94,11 @@ import { defineComponent } from 'vue'
 import {
   mixinFormatEventDates,
   mixinFormatSplitEventDates,
-  mixinFormatEventTimeInHoursAndMinutes
+  mixinFormatEventTimeInHoursAndMinutes,
+  type EventDateObject
 } from './../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -145,7 +158,8 @@ export default defineComponent({
     }
   },
   computed: {
-    splitDate(): { day: string; monthAndYear: string } | null {
+    ...mapStores(useThemeStore),
+    splitDate(): EventDateObject | null {
       if (this.startDate) {
         return mixinFormatSplitEventDates(this.startDate, this.endDate)
       }

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -4,41 +4,55 @@
     class="EventDetailHero mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
   >
     <div class="hero">
-      <BaseImage
-        v-if="image.src"
-        :src="image.src.url"
-        :srcset="getSrcSet"
-        :width="image.src.width"
-        :height="image.src.height"
-        :alt="image.alt"
-        image-class="w-full h-auto"
-        object-fit-class="cover"
-        loading="lazy"
-      />
-      <div
-        v-if="startDateSplit"
-        class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+      <BaseImagePlaceholder
+        :aspect-ratio="constrain ? '16:9' : 'none'"
+        dark-mode
       >
-        <div class="font-extrabold text-6xl leading-tight tracking-wider">
-          {{ startDateSplit.day }}
+        <BaseImage
+          v-if="image.src"
+          :src="image.src.url"
+          :srcset="getSrcSet"
+          :width="image.src.width"
+          :height="image.src.height"
+          :alt="image.alt"
+          image-class="w-full h-auto"
+          object-fit-class="cover"
+          loading="lazy"
+        />
+        <div
+          v-if="startDateSplit || ongoing"
+          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary print:hidden"
+        >
+          <template v-if="ongoing">
+            <div class="text-subtitle">Ongoing</div>
+          </template>
+          <template v-else>
+            <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
+              {{ themeStore.isEdu ? startDateSplit?.month : startDateSplit?.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ themeStore.isEdu ? startDateSplit?.year : startDateSplit?.monthAndYear }}
+            </div>
+          </template>
         </div>
-        <div class="text-subtitle">
-          {{ startDateSplit.monthAndYear }}
-        </div>
-      </div>
+      </BaseImagePlaceholder>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseImage from '../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from '../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
 
 export default defineComponent({
   name: 'EventDetailHero',
   components: {
-    BaseImage
+    BaseImage,
+    BaseImagePlaceholder
   },
   props: {
     data: {
@@ -50,13 +64,23 @@ export default defineComponent({
       type: Object as PropType<EventDateObject | undefined>,
       required: true
     },
+    ongoing: {
+      type: Boolean,
+      default: false
+    },
     image: {
       type: Object,
       required: false,
       default: undefined
+    },
+    constrain: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     getSrcSet() {
       return this.image ? mixinGetSrcSet(this.image) : undefined
     }

package/src/components/HeroMedia/HeroMedia.vue

@@ -25,7 +25,7 @@
         </div>
         <div
           v-if="hasCaptionArea"
-          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto"
+          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
         >
           <button
             class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
@@ -44,7 +44,7 @@
       <div
         v-if="hasCaptionArea"
         :class="captionVisibilityClass"
-        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto"
+        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
       >
         <BaseImageCaption :data="theImageData || customCaption" />
       </div>

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -12,7 +12,7 @@
       <div
         v-if="heading || link"
         :class="colStart"
-        class="lg:pl-0 col-start-1 col-end-13 px-4 mb-1"
+        class="lg:pl-0 col-start-1 col-end-13 px-4 mb-1 print:px-0"
       >
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
@@ -35,7 +35,7 @@
       </div>
       <div
         :class="colStart"
-        class="lg:pl-0 sm:col-end-11 3xl:col-end-12 col-start-1 col-end-13 pl-4 overflow-x-visible"
+        class="lg:pl-0 sm:col-end-11 3xl:col-end-12 col-start-1 col-end-13 pl-4 print:pl-0 overflow-x-visible"
       >
         <!-- Slider main container -->
         <div

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -19,6 +19,14 @@
         <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
           <img
             :src="LogoWhite"
+            class="print:hidden"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+          <img
+            :src="LogoColor"
+            class="hidden print:block"
             alt="JPL Logo"
             width="324"
             height="72"
@@ -119,6 +127,7 @@ import IconExternal from './../Icons/IconExternal.vue'
 import IconSearch from './../Icons/IconSearch.vue'
 import IconClose from './../Icons/IconClose.vue'
 import type { LinkObject, BreadcrumbObject } from './../../utils/mixins'
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
 import {
@@ -179,7 +188,8 @@ export default defineComponent({
       // This is used in transition logic to avoid distracting animations on route changes
       // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
       scrolledCurrentPage: false,
-      LogoWhite: LogoWhite
+      LogoWhite: LogoWhite,
+      LogoColor: LogoColor
     }
   },
   computed: {

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"
           >
@@ -286,7 +295,9 @@ export default defineComponent({
   // styles for default vs transparent header
   // underline color and logo inversion styles handled within their respective components
   &.-scrolled {
-    @apply fixed;
+    @media not print {
+      @apply fixed;
+    }
   }
 }
 // vue-transition classes

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

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: {