@explorer-1/vue 0.0.0

package/src/templates/PageContent/PageContent.stories.js

@@ -0,0 +1,92 @@
+import { BlockHeadingData } from './../../components/BlockHeading/BlockHeading.stories'
+import { BlockKeyPointsData } from './../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockImageComparisonData } from './../../components/BlockImageComparison/BlockImageComparison.stories'
+import { BlockIframeEmbedData } from './../../components/BlockIframeEmbed/BlockIframeEmbed.stories'
+import { HeroMediaData } from './../../components/HeroMedia/HeroMedia.stories'
+import { BlockRelatedLinksData } from './../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockLinkCardCarouselData } from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { NavSecondaryData } from './../../components/NavSecondary/NavSecondary.stories.js'
+
+import PageContent from './PageContent.vue'
+
+export default {
+  title: 'Templates/PageContent',
+  component: PageContent,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0 disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// data
+export const ContentPageData = {
+  url: '/slug',
+  breadcrumb: NavSecondaryData.breadcrumb,
+  title: 'Make a Paper Mars Helicopter',
+  displayLabel: 'Classroom Activity',
+  heroPosition: 'inline',
+  heroImage: HeroMediaData.image,
+  heroImageInline: HeroMediaData.imageInline,
+  body: [
+    BlockKeyPointsData,
+    BlockHeadingData,
+    {
+      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'
+    },
+    BlockImageComparisonData,
+    BlockHeadingData,
+    {
+      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'
+    },
+    BlockIframeEmbedData
+  ],
+  relatedLinks: [BlockRelatedLinksData.data],
+  relatedContentHeading: 'Related Activities',
+  relatedContent: [
+    // external link card, no image
+    {
+      label: 'Explore NASA',
+      thumbnailImage: null,
+      title: 'NASA website',
+      externalLink: 'https://www.nasa.gov'
+    },
+
+    // via page chooser
+    {
+      page: {
+        label: 'Mission',
+        thumbnailImage: {
+          src: {
+            url: 'https://picsum.photos/512/288',
+            width: 512,
+            height: 288
+          }
+        },
+        title: 'GRACE-FO',
+        url: '/mission/placeholder'
+      }
+    },
+    ...BlockLinkCardCarouselData
+  ],
+  clearanceNumber: 'CL#12345'
+}
+
+// stories
+export const Template = {
+  name: 'PageContent',
+  args: {
+    data: ContentPageData
+  }
+}

package/src/templates/PageContent/PageContent.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="{ '-nav-offset': !heroInline && data.heroImage }"
+  >
+    <!-- hero image -->
+    <HeroMedia
+      v-if="data.heroImage && !heroInline"
+      class="md:mb-0 mb-10"
+      :image="data.heroImage"
+      :caption="data.heroImageCaption"
+      :display-caption="!data.heroImageCaption ? false : true"
+      :constrain="data.heroConstrain"
+    />
+
+    <!-- secondary nav -->
+    <NavSecondary
+      :breadcrumb="data.breadcrumb"
+      :has-intro="data.heroImage && !heroInline ? true : false"
+    />
+
+    <!-- page headline -->
+    <LayoutHelper
+      indent="col-2"
+      :class="h1LayoutHelperClasses"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :label="data.displayLabel"
+        :class="{ 'sr-only': hideH1 }"
+      />
+    </LayoutHelper>
+
+    <!-- inline hero -->
+    <LayoutHelper
+      v-if="data.heroImageInline && heroInline"
+      indent="col-2"
+      class="mb-22 mt-10"
+    >
+      <BlockImageStandard
+        :data="data.heroImageInline"
+        :caption="data.heroImageCaption"
+        :display-caption="!data.heroImageCaption ? false : true"
+        :constrain="data.heroConstrain"
+      />
+    </LayoutHelper>
+
+    <!-- share buttons -->
+    <LayoutHelper
+      indent="col-2"
+      class="lg:mb-0 relative mb-8"
+    >
+      <ShareButtons
+        v-if="data.title && data.url"
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
+    <!-- Body Streamfield -->
+    <BlockStreamfield :data="data.body" />
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- contact form for specific content page only -->
+    <template v-if="data.slug === 'contact-jpl'">
+      <FormContact class="lg:mb-18 mb-10" />
+    </template>
+
+    <!-- Newsletter Signup form for specific content page only -->
+    <template v-if="data.slug === 'newsletter-signup'">
+      <!-- Newsletter Signup Form -->
+      <FormNewsletterSignup class="lg:mb-18 mb-10" />
+    </template>
+
+    <!-- media contacts and release number -->
+    <LayoutHelper
+      v-if="data.clearanceNumber"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <p class="text-body-sm text-gray-mid-dark">
+        {{ data.clearanceNumber }}
+      </p>
+    </LayoutHelper>
+
+    <!-- related content -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:my-24 my-12"
+      :heading="data.relatedContentHeading"
+      :items="data.relatedContent"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+export default defineComponent({
+  name: 'PageContent',
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    heroInline() {
+      if (this.data?.heroPosition === 'inline') {
+        return true
+      }
+      return false
+    },
+    hideH1() {
+      if (route?.path === '/a-plan-for-jpl') {
+        return true
+      }
+      return false
+    },
+    h1LayoutHelperClasses() {
+      if (this.hideH1) {
+        // We're hiding the H1 from regular browsers, so reduce the standard margin.
+        return 'lg:mt-12 mt-5'
+      }
+      return 'lg:mt-12 lg:mb-18 mt-5 mb-10'
+    }
+  }
+})
+</script>

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -0,0 +1,104 @@
+import { BlockKeyPointsData } from './../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import { EventDetailHeroData } from './../../components/EventDetailHero/EventDetailHero.stories'
+import { EventsBlockLinkCarouselData } from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import PageEventDetail from './PageEventDetail.vue'
+
+export default {
+  title: 'Templates/PageEventDetail',
+  component: PageEventDetail,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0 disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*Data$/
+}
+
+// stories
+export const EventDetail = {
+  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',
+      label: 'Events',
+      location: 'Webcast',
+      registerLink: [],
+      heroImage: {
+        ...EventDetailHeroData.heroImage
+      },
+      thumbnailImage: {
+        alt: '',
+        original: 'https://picsum.photos/512/288'
+      },
+      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'
+        }
+      ],
+      moreEvents: [...EventsBlockLinkCarouselData],
+      speakers: [
+        {
+          host: 'host',
+          id: '1',
+          internalLink: null,
+          name: 'Varoujan Gorjian',
+          title: 'Splitzer Research Scientest, JPL'
+        },
+        {
+          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'
+        }
+      ],
+      relatedLinks: [
+        {
+          blockType: 'RelatedLinksBlock',
+          heading: 'Webcast',
+          links: [
+            {
+              document: null,
+              externalLink: 'http://www.google.com',
+              page: null,
+              text: 'Watch the event live on YouTube'
+            },
+            {
+              document: null,
+              externalLink: 'http://www.google.com',
+              page: null,
+              text: 'Watch the event live on Ustream'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -0,0 +1,358 @@
+<template>
+  <div
+    v-if="data"
+    class="PageEventDetail pt-5 ThemeVariantLight lg:pt-12"
+    itemscope
+    itemtype="http://schema.org/Event"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="thumbnailUrl"
+      :content="data.thumbnailImage.original"
+    />
+    <meta
+      itemprop="startDate"
+      :content="data.startDatetime"
+    />
+    <meta
+      v-if="data.endDatetime"
+      itemprop="endDate"
+      :content="data.endDatetime"
+    />
+    <meta
+      v-if="data.summary || data.body"
+      itemprop="description"
+      :content="data.summary || data.body"
+    />
+
+    <LayoutHelper
+      indent="col-2"
+      class="mb-6 lg:mb-12"
+    >
+      <div
+        v-if="data.label"
+        class="flex flex-wrap items-start mb-3"
+      >
+        <nuxt-link
+          class="py-3 cursor-pointer group nuxt-link-active text-subtitle text-primary can-hover:hover:text-primary-dark"
+          to="/events"
+        >
+          {{ data.label }}
+        </nuxt-link>
+      </div>
+      <BaseHeading
+        level="h1"
+        itemprop="name"
+      >
+        {{ data.title }}
+      </BaseHeading>
+    </LayoutHelper>
+
+    <!-- share buttons -->
+    <LayoutHelper
+      indent="col-1"
+      class="relative mb-16 lg:mb-0"
+    >
+      <ShareButtons
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
+    <LayoutHelper indent="col-2">
+      <EventDetailHero
+        :image="data.heroImage"
+        :start-date-split="formattedSplitEventDates"
+      />
+
+      <!-- Event details -->
+      <div>
+        <div
+          class="py-1 mb-10 text-xl lg:mb-0 lg:flex"
+          :class="data.registerLink && data.registerLink.length > 0 ? '' : 'lg:mb-10'"
+        >
+          <div class="PageEventDetail__Metadata text-primary">
+            <IconCalendar class="relative mr-3" />
+            <span>{{ formattedEventDates }}</span>
+          </div>
+          <div
+            v-show="displayTime"
+            class="PageEventDetail__Metadata text-primary"
+          >
+            <IconTime class="relative mr-3" />
+            <span>{{ displayTime }}</span>
+          </div>
+          <!--Virtual location -->
+          <div
+            v-if="data.isVirtualEvent && data.locationLink"
+            itemprop="location"
+            itemscope
+            itemtype="https://schema.org/VirtualLocation"
+            class="PageEventDetail__Metadata text-primary"
+          >
+            <link
+              itemprop="url"
+              :href="data.locationLink"
+            />
+            <meta
+              itemprop="name"
+              :content="data.location"
+            />
+            <IconLocation class="relative mr-3" />
+            <BaseLink
+              variant="none"
+              :href="data.locationLink"
+              external-target-blank
+            >
+              {{ data.location }}
+            </BaseLink>
+          </div>
+          <!-- Normal location -->
+          <div
+            v-else-if="data.location"
+            class="PageEventDetail__Metadata text-primary"
+          >
+            <meta
+              itemprop="location"
+              :content="data.location"
+            />
+            <IconLocation class="relative mr-3" />
+            <BaseLink
+              v-if="data.locationLink"
+              variant="none"
+              :href="data.locationLink"
+              external-target-blank
+            >
+              {{ data.location }}
+            </BaseLink>
+            <span v-else>{{ data.location }}</span>
+          </div>
+          <div class="PageEventDetail__Buttons">
+            <BaseButton
+              v-if="
+                data.registerLink &&
+                data.registerLink.length > 0 &&
+                ((data.registerLink[0].page && data.registerLink[0].page.url) ||
+                  data.registerLink[0].externalLink)
+              "
+              class="w-full px-0 mb-5"
+              :href="data.registerLink[0].externalLink ? data.registerLink[0].externalLink : null"
+              :to="
+                data.registerLink[0].page && data.registerLink[0].page.url
+                  ? data.registerLink[0].page.url
+                  : null
+              "
+              :target="data.registerLink[0].externalLink ? '_blank' : '_self'"
+              compact
+              >Register for event
+            </BaseButton>
+            <!-- Todo IF VIRTUAL EVENT passes url as string to location prop -->
+            <!-- location= location name and link -->
+            <CalendarButton
+              :is-all-day="data.isAllDay"
+              :start-datetime="data.startDatetime"
+              :end-datetime="data.endDatetime ? data.endDatetime : null"
+              :title="data.title ? data.title : null"
+              :location="data.location ? data.location : null"
+              :description="data.summary ? data.summary : null"
+            />
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div
+          v-if="data.body || data.summary"
+          class="grid-cols-10 lg:grid -mx-4 lg:mx-0"
+        >
+          <div class="col-span-7">
+            <p
+              v-if="data.summary"
+              class="BlockText text-body-lg mb-8 px-4 lg:px-0"
+            >
+              {{ data.summary }}
+            </p>
+            <BlockStreamfield
+              v-if="data.body"
+              variant="fluid"
+              :data="data.body"
+            />
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <!-- Speakers -->
+    <LayoutHelper
+      v-if="data.speakers && data.speakers.length > 0"
+      indent="col-2"
+      class="mb-12 lg:mb-16"
+    >
+      <div class="grid-cols-10 lg:grid">
+        <div class="col-span-7">
+          <BaseHeading
+            level="h2"
+            class="mb-5 md:mb-8"
+            >Speakers</BaseHeading
+          >
+          <div class="flex flex-col flex-wrap justify-start md:flex-row md:-mx-4">
+            <div
+              v-for="(speaker, index) in data.speakers"
+              :key="index"
+              class="flex flex-1 mb-6 md:flex-none md:flex-wrap md:mx-4 md:w-56"
+            >
+              <div class="w-40 mr-6 md:mr-0 md:w-56">
+                <BaseImagePlaceholder
+                  aspect-ratio="1:1"
+                  class="relative overflow-hidden bg-gray-light-mid"
+                  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"
+                    alt=""
+                    class="object-cover"
+                    loading="lazy"
+                  />
+                  <img
+                    v-else
+                    :src="PlaceholderPortrait"
+                    alt=""
+                  />
+                </BaseImagePlaceholder>
+              </div>
+              <div class="flex-1 h-full">
+                <h3
+                  v-if="speaker.name"
+                  class="my-3 text-lg font-normal leading-none"
+                >
+                  <BaseLink
+                    v-if="speaker.internalLink || speaker.externalLink"
+                    link-class="no-underline normal-case"
+                    :to="speaker.internalLink ? speaker.internalLink.url : null"
+                    :href="speaker.externalLink ? speaker.externalLink : null"
+                    external-target-blank
+                  >
+                    {{ speaker.name }}
+                  </BaseLink>
+                  <template v-else>
+                    {{ speaker.name }}
+                  </template>
+                </h3>
+                <p
+                  v-if="speaker.title"
+                  class="mb-3 text-gray-dark"
+                >
+                  {{ speaker.title }}
+                </p>
+                <p>
+                  {{ speaker.host }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <!-- Webcast -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length > 0"
+      indent="col-2"
+      class="my-12 lg:my-16"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- Related Events -->
+    <LayoutHelper
+      v-if="data.moreEvents && data.moreEvents.length > 0"
+      indent="col-1"
+      class="my-12 lg:my-16"
+    >
+      <BlockLinkCarousel
+        item-type="cards"
+        heading="MORE EVENTS"
+        :items="data.moreEvents"
+      />
+    </LayoutHelper>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import {
+  mixinFormatEventDates,
+  mixinFormatEventTimeInHoursAndMinutes,
+  mixinFormatSplitEventDates
+} from '../../utils/mixins'
+// @ts-ignore
+import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg'
+
+export default defineComponent({
+  name: 'PageEventDetail',
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      PlaceholderPortrait: PlaceholderPortrait
+    }
+  },
+  computed: {
+    displayTime(): string {
+      return this.data
+        ? mixinFormatEventTimeInHoursAndMinutes(
+            this.data.startDatetime,
+            this.data.endDatetime,
+            this.data.endTime
+          )
+        : ''
+    },
+    formattedEventDates(): string {
+      return this.data ? mixinFormatEventDates(this.data.startDatetime, this.data.endDatetime) : ''
+    },
+    formattedSplitEventDates() {
+      return this.data
+        ? mixinFormatSplitEventDates(this.data.startDatetime, this.data.endDatetime)
+        : undefined
+    }
+  }
+})
+</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;
+  }
+}
+</style>