@explorer-1/vue 0.1.5 → 0.1.7

package/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.stories.js

@@ -0,0 +1,192 @@
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { BlockIframeEmbedData } from './../../../components/BlockIframeEmbed/BlockIframeEmbed.stories.js'
+import { BlockImageCarouselData } from './../../../components/BlockImageCarousel/BlockImageCarousel.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories'
+import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageEduResourceArticle from './PageEduResourceArticle.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduResourceArticle',
+  component: PageEduResourceArticle,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BaseStory = {
+  args: {
+    data: {
+      __typename: 'EDUResourceArticlePage',
+      pageType: 'EDUResourceArticlePage',
+      contentType: 'edu_resources.EDUResourceArticlePage',
+      seoTitle: 'Test Resource',
+      searchDescription: '',
+      slug: 'test-resource',
+      url: 'http://localhost:3000/edu/resources/test-resource',
+      title: 'Test Resource',
+      heroConstrain: true,
+      heroPosition: 'full_bleed',
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+      ...BlockStreamfieldTruncatedData,
+      publicationDate: '2024-07-09',
+      summary: 'Summary of resource article',
+      getTopicsForDisplay: [
+        {
+          __typename: 'TopicPage',
+          title: 'Asteroids',
+          url: 'http://localhost:3000/topics/asteroids'
+        }
+      ],
+      topicLabel: 'Asteroids',
+      primarySubject: {
+        __typename: 'EDUPrimarySubject',
+        id: '2',
+        subject: 'Engineering'
+      },
+      additionalSubjects: [
+        {
+          __typename: 'EDUPrimarySubject',
+          id: '1',
+          subject: 'Art'
+        }
+      ],
+      gradeLevels: [
+        {
+          __typename: 'EDUGradeLevel',
+          id: '2',
+          gradeLevel: 'K'
+        },
+        {
+          __typename: 'EDUGradeLevel',
+          id: '3',
+          gradeLevel: '1'
+        },
+        {
+          __typename: 'EDUGradeLevel',
+          id: '4',
+          gradeLevel: '2'
+        },
+        {
+          __typename: 'EDUGradeLevel',
+          id: '13',
+          gradeLevel: '11'
+        }
+      ],
+      body: BlockStreamfieldTruncatedData.body,
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
+        alt: ''
+      },
+      relatedLinks: BlockRelatedLinksData.data,
+      relatedContentHeading: 'Related Content',
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
+export const HeroCarousel = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
+    }
+  }
+}
+
+export const HeroImageComparison = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockImageComparisonData
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideo = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          blockType: 'VideoBlock',
+          video: BaseVideoData,
+          caption: 'Lorem ipsum dolor sit amet',
+          credit: 'NASA/JPL'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideoEmbed = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockVideoEmbedData.data,
+          embed: {
+            embed: `<iframe title="Meet NASA's Diana Trujillo - Embedded Hero" width="480" height="270" src="https://www.youtube.com/embed/vUuUyYqI83Q?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
+          },
+          blockType: 'VideoEmbedBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroIframeEmbed = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockIframeEmbedData
+        }
+      ]
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: []
+    }
+  }
+}

package/src/templates/edu/PageEduResourceArticle/PageEduResourceArticle.vue

@@ -0,0 +1,197 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+
+export default defineComponent({
+  name: 'PageEduResourceArticle',
+  components: {
+    HeroMedia,
+    BaseImagePlaceholder,
+    LayoutHelper,
+    DetailHeadline,
+    BlockImageStandard,
+    BlockIframeEmbed,
+    ShareButtonsEdu,
+    BlockStreamfield,
+    BlockImageCarousel,
+    BlockImageComparison,
+    BlockLinkCarousel,
+    BlockRelatedLinks
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    heroEmpty(): boolean {
+      return (this.data?.hero || []).length === 0
+    },
+    heroInline(): boolean {
+      if (!this.heroEmpty) {
+        if (this.data?.hero[0].blockType === 'VideoBlock') {
+          return false
+        } else if (
+          this.data?.heroPosition === 'inline' ||
+          this.data?.hero[0].blockType === 'CarouselBlock' ||
+          this.data?.hero[0].blockType === 'VideoEmbedBlock'
+        ) {
+          return true
+        }
+      }
+      return false
+    },
+    computedClass(): string {
+      if (this.heroInline || this.heroEmpty) {
+        return 'pt-5 lg:pt-12'
+      } else if (!this.heroInline) {
+        return '-nav-offset'
+      }
+      return ''
+    }
+  }
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="computedClass"
+    itemscope
+    itemtype="http://schema.org/Article"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="image"
+      :content="data.thumbnailImage.original"
+    />
+
+    <!-- hero image -->
+    <HeroMedia
+      v-if="
+        !heroEmpty &&
+        !heroInline &&
+        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+      "
+      class="md:mb-12 lg:mb-18 mb-10"
+      :image="data.hero[0].image"
+      :video="data.hero[0].video"
+      :display-caption="data.hero[0].displayCaption"
+      :caption="data.hero[0].caption"
+      :credit="data.hero[0].credit"
+      :constrain="data.heroConstrain"
+    />
+
+    <!-- news headline and author -->
+    <LayoutHelper
+      indent="col-2"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        :publication-time="data.publicationTime"
+        :author="data.author"
+        :label="data.displayLabel"
+        schema
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+    </LayoutHelper>
+
+    <!-- inline hero content -->
+    <LayoutHelper
+      v-if="!heroEmpty && heroInline"
+      indent="col-2"
+      class="lg:mb-22 mt-10 mb-10"
+    >
+      <BlockImageStandard
+        v-if="data.hero[0].blockType === 'HeroImageBlock'"
+        :data="data.hero[0].imageInline"
+        :display-caption="data.hero[0].displayCaption"
+        :caption="data.hero[0].caption"
+        :constrain="data.heroConstrain"
+      />
+      <BlockImageCarousel
+        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
+        :items="data.hero[0].blocks"
+        :block-id="data.hero[0].id"
+      />
+      <BlockIframeEmbed
+        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
+        :data="data.hero[0]"
+      />
+      <BlockVideo
+        v-else-if="data.hero[0].blockType === 'VideoBlock'"
+        :data="data.hero[0]"
+        autoplay
+      />
+      <BaseImagePlaceholder
+        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <div v-html="data.hero[0].embed.embed"></div>
+      </BaseImagePlaceholder>
+      <BlockImageComparison
+        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
+        :data="data.hero[0]"
+      />
+    </LayoutHelper>
+
+    <!-- summary and topper -->
+    <LayoutHelper
+      indent="col-3"
+      class="lg:mb-8 mb-5"
+    >
+      <p
+        class="text-body-lg font-semibold"
+        itemprop="abstract"
+      >
+        {{ data.summary }}
+      </p>
+    </LayoutHelper>
+
+    <!-- streamfield blocks -->
+    <BlockStreamfield
+      itemprop="articleBody"
+      :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>
+
+    <!-- related content -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:my-24 my-12"
+      :heading="data.relatedContentHeading"
+      :items="data.relatedContent"
+    />
+  </div>
+</template>