@explorer-1/vue 0.1.3 → 0.1.5

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>

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

@@ -0,0 +1,96 @@
+import { HeroMediumData } from './../../../components/HeroMedium/HeroMedium.stories'
+import { BlockLinkTileCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import PagePodcastSeason from './PagePodcastSeason.vue'
+
+export default {
+  title: 'Templates/WWW/PagePodcastSeason',
+  component: PagePodcastSeason,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+// data
+export const PagePodcastSeasonData = {
+  title: 'Season 1',
+  subtitle: 'Descriptive Season Title',
+  topicLabel: 'Mars',
+  label: 'On a Mission | Season 1',
+  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.',
+  featuredEpisode: HeroMediumData.feature,
+  heroImage: {
+    // same dimensions used for HeroMedium
+    src: {
+      url: 'https://picsum.photos/id/247/1800/1200',
+      width: 1800,
+      height: 1200
+    },
+    srcSet:
+      'https://picsum.photos/id/247/768/548 768w, https://picsum.photos/id/247/1024/684 1024w, https://picsum.photos/id/82475/1440/770 1440w,  https://picsum.photos/id/247/1800/963 1800w',
+    screenMd: {
+      url: 'https://picsum.photos/id/247/800/640'
+    },
+    screenSm: {
+      url: 'https://picsum.photos/id/247/640/900'
+    }
+  },
+
+  episodes: [
+    {
+      id: 1,
+      title: 'Episode 01: Getting to Mars is Hard',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
+      series: {
+        title: 'On a Mission'
+      },
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/560/560',
+          width: '560',
+          height: '560'
+        }
+      },
+      url: '/podcasts/season1/episode1/',
+      publicationDate: '2020-11-01'
+    },
+    {
+      id: 2,
+      title: 'Episode 01: Getting to Mars is Hard',
+      summary:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
+      series: {
+        title: 'On a Mission'
+      },
+      thumbnailImage: {
+        src: {
+          url: 'https://picsum.photos/560/560',
+          width: '560',
+          height: '560'
+        }
+      },
+      url: '/podcasts/season1/episode2/',
+      publicationDate: '2020-12-01'
+    }
+  ],
+  relatedPodcasts: BlockLinkTileCarouselData
+}
+
+// stories
+export const Template = {
+  name: 'PagePodcastSeason',
+  args: {
+    data: PagePodcastSeasonData
+  }
+}