@explorer-1/vue 0.1.4 → 0.1.6

package/src/templates/www/PageMissionDetail/PageMissionDetail.stories.js

@@ -0,0 +1,246 @@
+import { MissionDetailHighlightsData } from './../../../components/MissionDetailHighlights/MissionDetailHighlights.stories.js'
+import { MissionDetailStatsData } from './../../../components/MissionDetailStats/MissionDetailStats.stories.js'
+import { MissionDetailAboutData } from './../../../components/MissionDetailAbout/MissionDetailAbout.stories.js'
+import { MissionDetailStreamfieldData } from './../../../components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js'
+import {
+  BlockLinkCardCarouselData,
+  BlockLinkTileCarouselData
+} from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import PageMissionDetail from './PageMissionDetail.vue'
+
+export default {
+  title: 'Templates/WWW/PageMissionDetail',
+  component: PageMissionDetail,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// stories
+export const BaseStory = {
+  name: 'Dark Template',
+  args: {
+    data: {
+      ...MissionDetailStatsData,
+      ...MissionDetailHighlightsData,
+      ...MissionDetailStreamfieldData,
+      ...MissionDetailAboutData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'oco-2',
+      templateStyle: 'dark',
+      title: 'OCO-2',
+      subtitle: 'Orbiting Carbon Observatory 2',
+      summary:
+        'OCO-2 is an Earth satellite mission designed to study the sources and sinks of carbon dioxide globally and provide scientists with a better idea of how carbon is contributing to climate change. ',
+      thumbnailImage: 'https://picsum.photos/400/200',
+      missionWebsiteUrl: 'http://oco.jpl.nasa.gov/',
+      topicLabels: ['Stars and Galaxies', 'Exoplanets'],
+      heroImage: {
+        srcSet: 'https://https://picsum.photos/320/200 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'OCO-2 hero image'
+      },
+      instrumentImage: {
+        webp: {
+          url: '/public/images/mission-oco2.webp'
+        },
+        src: {
+          url: '/public/images/mission-grace-fo-75.webp',
+          width: 1597,
+          height: 700
+        },
+        alt: 'The instrument'
+      },
+      instrumentBackground: {
+        image: {
+          srcSet: '/public/images/bg-earth-1440x810.jpg' + ' 1440w',
+          src: {
+            url: '/public/images/bg-earth-1440x810.jpg',
+            width: 1440,
+            height: 810
+          }
+        }
+      }
+    }
+  }
+}
+
+export const LightTemplateWithHero = {
+  args: {
+    data: {
+      ...MissionDetailStatsData,
+      ...MissionDetailHighlightsData,
+      ...MissionDetailStreamfieldData,
+      ...MissionDetailAboutData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'oco-2',
+      templateStyle: 'light',
+      title: 'OCO-2',
+      subtitle: 'Orbiting Carbon Observatory 2',
+      summary:
+        'OCO-2 is an Earth satellite mission designed to study the sources and sinks of carbon dioxide globally and provide scientists with a better idea of how carbon is contributing to climate change. ',
+      missionWebsiteUrl: 'http://oco.jpl.nasa.gov/',
+      heroImage: {
+        srcSet: 'https://picsum.photos/320/320 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'The hero image'
+      },
+      instrumentImage: null,
+      instrumentBackground: null
+    }
+  }
+}
+
+export const LightTemplateNoBackground = {
+  args: {
+    data: {
+      ...MissionDetailStatsData,
+      ...MissionDetailHighlightsData,
+      ...MissionDetailStreamfieldData,
+      ...MissionDetailAboutData,
+      relatedLinks: [BlockRelatedLinksData.data],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'oco-2',
+      templateStyle: 'light',
+      title: 'OCO-2',
+      subtitle: 'Orbiting Carbon Observatory 2',
+      summary:
+        'OCO-2 is an Earth satellite mission designed to study the sources and sinks of carbon dioxide globally and provide scientists with a better idea of how carbon is contributing to climate change. ',
+      missionWebsiteUrl: 'http://oco.jpl.nasa.gov/',
+      heroImage: {
+        srcSet: 'https://picsum.photos/320/320 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'The hero image'
+      },
+      instrumentImage: {
+        webp: {
+          url: '/public/images/mission-oco2.webp'
+        },
+        src: {
+          url: '/public/images/mission-grace-fo-75.webp',
+          width: 1597,
+          height: 700
+        },
+        alt: 'The instrument'
+      },
+      instrumentBackground: null
+    }
+  }
+}
+
+// stories
+export const GraceFO = {
+  args: {
+    data: {
+      showClock: true,
+      showDistance: false,
+      clockType: 'time_in_orbit',
+      startDateTime: '2018-10-22 10:04:21+01:00',
+      distanceType: 'earth',
+      distanceValue: 4986444,
+      distanceApiUrls: '',
+      displayDate: 'Oct. 22, 2018',
+      missionTypes: [{ missionType: 'Orbiters' }],
+      missionTargets: [{ target: 'Earth' }],
+      status: 'current',
+      ...MissionDetailHighlightsData,
+      highlightsHeading: 'Mission Highlights',
+      highlights: [
+        {
+          date: '2018-11-01',
+          heading: 'GRACE-FO Resumes Data Collection',
+          summary:
+            'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sagittis orci purus, in luctus ex volutpat sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sagittis orci purus, in luctus ex volutpat sit amet.'
+        }
+      ],
+      feature: [
+        {
+          blockType: 'QuoteBlock',
+          quote:
+            "“A nice thing about it is it doesn't shatter. If impacted, it bends rather than breaks and still has good optical properties”",
+          attribution: 'Amy Ross, Spacesuit Designer'
+        }
+      ],
+      relatedLinks: [
+        {
+          links: [
+            {
+              text: 'Mission Website',
+              document: '',
+              page: '',
+              externalLink: 'http://gracefo.jpl.nasa.gov/'
+            }
+          ]
+        }
+      ],
+      relatedPages: BlockLinkCardCarouselData,
+      otherMissions: BlockLinkTileCarouselData,
+      slug: 'grace-fo',
+      templateStyle: 'dark',
+      title: 'GRACE-FO',
+      subtitle: 'Gravity Recovery and Climate Experiment Follow-On',
+      summary:
+        'The Gravity Recovery and Climate Experiment Follow-on (GRACE-FO) mission is a partnership between NASA and the German Research Centre for Geosciences (GFZ).',
+      thumbnailImage: 'https://picsum.photos/400/200',
+      missionWebsiteUrl: 'http://gracefo.jpl.nasa.gov/',
+      heroImage: {
+        srcSet: 'https://picsum.photos/320/320 320w, https://picsum.photos/1920/1200 1440w',
+        src: {
+          url: 'https://picsum.photos/1920/1200',
+          width: 1920,
+          height: 1200
+        },
+        alt: 'GRACE-FO hero image'
+      },
+      instrumentImage: {
+        webp: {
+          url: '/public/images/mission-grace-fo-75.webp'
+        },
+        src: {
+          url: '/public/images/mission-grace-fo.png',
+          width: 1597,
+          height: 700
+        },
+        alt: 'The instrument'
+      },
+      instrumentBackground: {
+        image: {
+          srcSet: '/public/images/bg-earth-1440x810.jpg' + ' 1440w',
+          src: {
+            url: '/public/images/bg-earth-1440x810.jpg',
+            width: 1440,
+            height: 810
+          }
+        }
+      }
+    }
+  }
+}

package/src/templates/www/PageMissionDetail/PageMissionDetail.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    v-if="data"
+    class="-nav-offset"
+  >
+    <div :class="theTheme">
+      <MissionDetailHero
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :summary="data.summary"
+        :template-style="data.templateStyle"
+        :mission-website-url="data.missionWebsiteUrl"
+        :instrument-image="data.instrumentImage"
+        :instrument-background="data.instrumentBackground"
+        :hero-fallback="data.heroImage"
+      />
+      <MissionDetailStats
+        :show-clock="data.showClock"
+        :show-distance="data.showDistance"
+        :clock-type="data.clockType"
+        :start-date-time="data.startDateTime"
+        :distance-type="data.distanceType"
+        :distance-value="data.distanceValue"
+        :distance-api-urls="data.distanceApiUrls"
+        :display-date="data.displayDate"
+        :mission-types="data.missionTypes"
+        :mission-targets="data.missionTargets"
+        :status="data.status"
+      />
+      <MissionDetailAbout
+        class="py-10"
+        :description-heading="data.descriptionHeading"
+        :description="data.description"
+        :instruments="data.instruments"
+      />
+      <!-- 3D model -->
+      <MissionDetailHighlights
+        v-if="data.highlights && data.highlights.length"
+        :animation="data.showHighlightsAnimation"
+        :graphic="data.highlightsGraphic"
+        :heading="data.highlightsHeading"
+        :mission-title="data.title"
+        :highlights="data.highlights"
+      />
+      <!-- Mission Streamfield (text and image, blockquote) -->
+      <MissionDetailStreamfield
+        v-if="data.feature && data.feature.length"
+        class="pt-10"
+        :class="{ 'pb-10': data.templateStyle === 'dark' }"
+        :data="data.feature"
+      />
+    </div>
+    <!-- Related Pages, data returned only if a topic is assigned -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:mt-24 mt-18 lg:mb-18 mb-10"
+      :heading="moreAboutTopicHeading"
+      :items="data.relatedPages"
+    />
+    <!-- Related Links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-2"
+      class="lg:mb-18 mb-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+    <!-- Other Missions -->
+    <div
+      v-if="data.otherMissions && data.otherMissions.length"
+      class="bg-gray-light lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        heading="Explore Other Missions"
+        :items="data.otherMissions"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import MissionDetailHighlights from './../../../components/MissionDetailHighlights/MissionDetailHighlights.vue'
+import MissionDetailHero from './../../../components/MissionDetailHero/MissionDetailHero.vue'
+import MissionDetailAbout from './../../../components/MissionDetailAbout/MissionDetailAbout.vue'
+import MissionDetailStats from './../../../components/MissionDetailStats/MissionDetailStats.vue'
+import MissionDetailStreamfield from './../../../components/MissionDetailStreamfield/MissionDetailStreamfield.vue'
+import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+
+interface dataShape {
+  templateStyle: string
+}
+export default defineComponent({
+  name: 'PageMissionDetail',
+  components: {
+    MissionDetailHighlights,
+    MissionDetailHero,
+    MissionDetailAbout,
+    MissionDetailStats,
+    MissionDetailStreamfield,
+    BlockRelatedLinks,
+    BlockLinkCarousel,
+    LayoutHelper
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    theTheme() {
+      if ((this.data as dataShape).templateStyle === 'dark') {
+        return 'ThemeVariantDark bg-black'
+      }
+      return 'ThemeVariantLight'
+    },
+    moreAboutTopicHeading() {
+      // @ts-ignore
+      const { topicLabels } = this.data
+      if (!topicLabels || topicLabels.length === 0) {
+        return 'More'
+      }
+      if (topicLabels.length === 1) {
+        return `More about ${topicLabels[0]}`
+      }
+      const last = topicLabels[topicLabels.length - 1]
+      const firsts = topicLabels.slice(0, topicLabels.length - 1).join(', ')
+      return `More about ${firsts} and ${last}`
+    }
+  }
+})
+</script>

package/src/templates/www/PagePodcast/PagePodcast.stories.js

@@ -0,0 +1,86 @@
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { BlockLinkTileCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import PagePodcast from './PagePodcast.vue'
+
+export default {
+  title: 'Templates/WWW/PagePodcast',
+  component: PagePodcast,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// data
+export const PagePodcastData = {
+  title: 'On a Mission',
+  topicLabel: 'Mars',
+  label: 'Podcast',
+  summary:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in nibh mauris. Praesent vel tempus enim, a ultricies justo. Cras nec lorem quis lorem ullamcorper accumsan. Aliquam lacus tortor, vulputate sit amet purus vitae, accumsan maximus diam. Vivamus ac dui non sapien hendrerit elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
+  heroImage: HeroMediaData.image,
+  seasons: [
+    {
+      id: 1,
+      seasonNumber: 1,
+      label: 'On a Mission | Season 1',
+      subtitle: 'Descriptive Title of Season 1',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
+      parent: {
+        title: 'On a Mission'
+      },
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/560/560',
+          width: '560',
+          height: '560'
+        }
+      },
+      title: 'Season 1',
+      url: '/podcasts/season1/',
+      firstPublishedAt: '2020-10-01'
+    },
+    {
+      id: 2,
+      seasonNumber: 2,
+      label: 'On a Mission | Season 2',
+      subtitle: 'Descriptive Title of Season 2',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
+      parent: {
+        title: 'On a Mission'
+      },
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/560/560',
+          width: '560',
+          height: '560'
+        }
+      },
+      title: 'Season 2',
+      url: '/podcasts/season2/',
+      firstPublishedAt: '2020-12-01'
+    }
+  ],
+  relatedLinks: [BlockRelatedLinksData.data],
+  relatedPodcasts: BlockLinkTileCarouselData
+}
+
+// stories
+export const BaseStory = {
+  name: 'PagePodcast',
+  args: {
+    data: PagePodcastData
+  }
+}

package/src/templates/www/PagePodcast/PagePodcast.vue

@@ -0,0 +1,219 @@
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="{ '-nav-offset': data.heroImage }"
+  >
+    <!-- hero image -->
+    <HeroMedia
+      v-if="data.heroImage"
+      class="md:mb-12 lg:mb-18 mb-10"
+      :image="data.heroImage"
+      :caption="data.heroImageCaption"
+      :display-caption="!data.heroImageCaption ? false : true"
+    />
+
+    <!-- page headline -->
+    <LayoutHelper
+      indent="col-1"
+      class="3xl:px-0 lg:mt-12 px-5 mx-auto mt-5 mb-5 lg:mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        label="Podcast Series"
+        schema
+      />
+      <BlockText
+        v-if="data.summary"
+        :text="data.summary"
+        variant="medium"
+        class="lg:w-2/3 mt-5"
+      />
+    </LayoutHelper>
+
+    <LayoutHelper>
+      <div class="col-span-12 pb-2 justify-end flex flex-row pr-0.5">
+        <!-- toggle gallery view -->
+        <div
+          v-if="allowGridView"
+          class="align-end flex text-2xl font-secondary font-semibold tracking-wider"
+        >
+          <button
+            class="lg:ml-6"
+            :class="
+              showGridView
+                ? 'text-theme-red cursor-default'
+                : 'text-gray-mid can-hover:hover:text-theme-red-hover cursor-pointer'
+            "
+            :aria-label="showGridView ? 'Grid View (enabled)' : 'Grid View'"
+            :disabled="showGridView"
+            @click="
+              isGallery
+                ? searchStore.updateGridViewForPodcasts(true)
+                : searchStore.updateGridView(true)
+            "
+          >
+            <span class="flex items-center">
+              <IconGrid />
+            </span>
+          </button>
+          <button
+            class="ml-3"
+            :class="
+              !showGridView
+                ? 'text-theme-red cursor-default'
+                : 'text-gray-mid can-hover:hover:text-theme-red-hover cursor-pointer'
+            "
+            :aria-label="!showGridView ? 'List View (enabled)' : 'List View'"
+            :disabled="!showGridView"
+            @click="
+              isGallery
+                ? searchStore.updateGridViewForPodcasts(false)
+                : searchStore.updateGridView(false)
+            "
+          >
+            <span class="flex items-center">
+              <IconList />
+            </span>
+          </button>
+        </div>
+      </div>
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="sortedSeasons && sortedSeasons.length"
+      indent="col-2"
+      class="border-gray-mid lg:mb-24 pt-10 mb-12 border-t"
+    >
+      <section aria-label="Podcast Seasons">
+        <template v-if="!showGridView">
+          <SearchResultCard
+            v-for="season of sortedSeasons"
+            :key="season.id"
+            :type="season.parent.title"
+            :topic="season.title"
+            :url="season.url"
+            :image="season.thumbnailImage"
+            :title="season.subtitle"
+            :summary="season.summary"
+            :date="
+              // @ts-ignore
+              $filters.displayDate(season.firstPublishedAt)
+            "
+            heading-level="h2"
+          />
+        </template>
+        <template v-else>
+          <div class="md:grid grid-cols-12 gap-10">
+            <div
+              v-for="season of sortedSeasons"
+              :key="season.id"
+              class="col-span-6 lg:col-span-4"
+            >
+              <SearchResultGridItem
+                :type="season.parent.title"
+                :topic="season.title"
+                :url="season.url"
+                :image="season.thumbnailImage"
+                :title="season.title"
+                :summary="season.summary"
+                :date="
+                  // @ts-ignore
+                  $filters.displayDate(season.firstPublishedAt)
+                "
+                heading-level="h2"
+              />
+            </div>
+          </div>
+        </template>
+      </section>
+    </LayoutHelper>
+
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-2"
+      class="lg:mb-18 mb-10 -mt-5"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <div
+      v-if="data.relatedPodcasts && data.relatedPodcasts.length"
+      class="bg-gray-light lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        heading="Explore Other Podcasts"
+        :items="data.relatedPodcasts"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useSearchStore } from './../../../store/search.ts'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import IconGrid from './../../../components/Icons/IconGrid.vue'
+import IconList from './../../../components/Icons/IconList.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import SearchResultCard from './../../../components/SearchResultCard/SearchResultCard.vue'
+import SearchResultGridItem from './../../../components/SearchResultGridItem/SearchResultGridItem.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+
+export default defineComponent({
+  name: 'PagePodcast',
+  components: {
+    HeroMedia,
+    DetailHeadline,
+    SearchResultCard,
+    SearchResultGridItem,
+    LayoutHelper,
+    BlockRelatedLinks,
+    BlockText,
+    BlockLinkCarousel,
+    IconGrid,
+    IconList
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+
+  data() {
+    return {
+      allowGridView: true,
+      defaultShowGridView: false,
+      isGallery: true
+    }
+  },
+  computed: {
+    ...mapStores(useSearchStore),
+    showGridView() {
+      if (this.isGallery) {
+        if (this.searchStore.showGridViewForPodcasts !== undefined) {
+          return this.searchStore.showGridViewForPodcasts
+        }
+      } else if (this.searchStore.showGridView !== undefined) {
+        return this.searchStore.showGridView
+      }
+      return this.defaultShowGridView
+    },
+    sortedSeasons() {
+      let seasons = null
+      if (this.data && this.data.seasons) {
+        seasons = this.data.seasons
+        return seasons.sort((a, b) => a.seasonNumber - b.seasonNumber)
+      }
+      return seasons
+    }
+  }
+})
+</script>