@explorer-1/vue 0.0.0

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    v-if="data"
+    class="BlockStreamfield"
+    :class="layoutClass"
+  >
+    <template v-for="(block, index) in data">
+      <LayoutHelper
+        v-if="block.blockType == 'HeadingBlock'"
+        :key="`headingBlock${index}`"
+        indent="col-3"
+        class="mb-5"
+      >
+        <BlockHeading :data="block" />
+      </LayoutHelper>
+
+      <!-- custom margin bottom that matches BlockText styles if followed by InlineImageBlock -->
+      <LayoutHelper
+        v-else-if="block.blockType == 'RichTextBlock'"
+        :key="`richText${index}`"
+        indent="col-3"
+        :class="seamlessText(index) ? 'lg:mb-8 mb-5' : 'lg:mb-18 mb-10'"
+      >
+        <BlockText :text="block.value" />
+      </LayoutHelper>
+
+      <!-- custom margin bottom that matches BlockText styles if followed by RichTextBlock -->
+      <BlockInlineImage
+        v-else-if="block.blockType == 'InlineImageBlock'"
+        :key="`inlineImageBlock${index}`"
+        class="lg:px-0 px-4"
+        :class="seamlessText(index) ? 'lg:mb-8 mb-5' : 'lg:mb-18 mb-10'"
+        :data="block"
+      />
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'ListBlock'"
+        :key="`listBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockListCards :data="block" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'KeyPointBlock'"
+        :key="`keyPointBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockKeyPoints :data="block" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'QuoteBlock'"
+        :key="`quoteBlock${index}`"
+        indent="col-4"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockQuote :data="block as unknown as BlockQuoteAttributes" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'CTABlock'"
+        :key="`ctaBlock${index}`"
+        indent="col-4"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockCta :data="block" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'TeaserBlock'"
+        :key="`teaserBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockTeaser
+          :custom-label="block.customLabel"
+          :heading="block.heading"
+          :introduction="block.introduction"
+          :button-text="block.buttonText"
+          :image="block.image"
+          :full-width="block.fullWidthImage"
+          :teaser-page="block.teaserPage"
+        />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'CarouselBlock'"
+        :key="`carouselBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockImageCarousel
+          :items="block.blocks"
+          :block-id="block.id"
+        />
+      </LayoutHelper>
+
+      <div
+        v-else-if="block.blockType == 'ImageGalleryBlock'"
+        :key="`imageGalleryBlock${index}`"
+        class="max-w-screen-3xl lg:mb-18 mx-auto mb-10"
+      >
+        <BlockImageGallery
+          :title="block.galleryTitle"
+          :description="block.galleryDescription"
+          :cover="block.coverImage"
+          :items="block.gallerySlides"
+          :block-id="block.id"
+        />
+      </div>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'VideoBlock'"
+        :key="`videoBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockVideo :data="block" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'VideoEmbedBlock'"
+        :key="`videoEmbedBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockVideoEmbed :data="block as unknown as VideoBlockEmbedData" />
+      </LayoutHelper>
+
+      <BlockImage
+        v-else-if="block.blockType == 'FullBleedImageBlock'"
+        :key="`fullBleedImageBlock${index}`"
+        class="lg:mb-18 mb-10"
+        :data="block"
+        :full-bleed="block.fullBleed"
+      />
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'ImageComparisonBlock'"
+        :key="`imageComparisonBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockImageComparison :data="block" />
+      </LayoutHelper>
+
+      <BlockTwitterEmbed
+        v-else-if="block.blockType == 'TwitterEmbedBlock'"
+        :key="`twitterEmbedBlock${index}`"
+        class="lg:mb-18 mb-10"
+        :data="block"
+      />
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'IframeEmbedBlock'"
+        :key="`iframeEmbedBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockIframeEmbed :data="block" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'TableBlock'"
+        :key="`tableBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockTable :data="block" />
+      </LayoutHelper>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'RelatedLinksBlock'"
+        :key="`relatedLinksBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockRelatedLinks :data="block as any as BlockRelatedLinksObject" />
+      </LayoutHelper>
+
+      <BlockAnchor
+        v-else-if="block.blockType == 'AnchorBlock'"
+        :key="`anchorBlock${index}`"
+        :data="block"
+      />
+
+      <div
+        v-else
+        :key="index"
+        class="lg:mb-18 p-3 mb-10 overflow-hidden border"
+      >
+        <pre>{{ block }}</pre>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import type { BlockData as VideoBlockEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import type { BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
+import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import BlockCta from './../BlockCta/BlockCta.vue'
+import BlockHeading from './../BlockHeading/BlockHeading.vue'
+import BlockImage from './../BlockImage/BlockImage.vue'
+import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
+import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
+import BlockInlineImage from './../BlockInlineImage/BlockInlineImage.vue'
+import BlockKeyPoints from './../BlockKeyPoints/BlockKeyPoints.vue'
+import BlockListCards from './../BlockListCards/BlockListCards.vue'
+import BlockQuote from './../BlockQuote/BlockQuote.vue'
+import BlockRelatedLinks, {
+  type BlockRelatedLinksObject
+} from './../BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockTable from './../BlockTable/BlockTable.vue'
+import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
+import BlockText from './../BlockText/BlockText.vue'
+import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
+import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockVideo from './../BlockVideo/BlockVideo.vue'
+import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
+interface Variants {
+  [name: string]: string
+}
+
+export const variants: Variants = {
+  default: '',
+  fluid: '-fluid'
+}
+
+export interface StreamfieldBlockData {
+  blockType: string
+  id: string
+  fullBleed: boolean
+  heading: string
+  galleryTitle: string
+  galleryDescription: string
+  coverImage: ImageObject
+  gallerySlides: ImageObject[]
+  blocks: object[]
+  value: string
+  customLabel: string
+  introduction: string
+  teaserPage: object | string[]
+  image: ImageObject
+  buttonText: string
+  fullWidthImage: boolean
+}
+
+export default defineComponent({
+  name: 'BlockStreamfield',
+  components: {
+    LayoutHelper,
+    BlockCta,
+    BlockHeading,
+    BlockImage,
+    BlockImageCarousel,
+    BlockImageComparison,
+    BlockImageGallery,
+    BlockInlineImage,
+    BlockKeyPoints,
+    BlockListCards,
+    BlockQuote,
+    BlockRelatedLinks,
+    BlockTable,
+    BlockTeaser,
+    BlockText,
+    BlockTwitterEmbed,
+    BlockIframeEmbed,
+    BlockVideo,
+    BlockVideoEmbed,
+    BlockAnchor
+  },
+  props: {
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
+      validator: (prop: string): boolean => Object.keys(variants).includes(prop)
+    },
+    data: {
+      type: Array as PropType<StreamfieldBlockData[]>,
+      required: false
+    }
+  },
+  computed: {
+    layoutClass(): string {
+      return variants[this.variant]
+    }
+  },
+  methods: {
+    // use with BlockText or BlockInlineImage to determine their bottom margin
+    // this is to make text appear continuous between the two.
+    seamlessText(index: number): boolean {
+      const nextIndex = index + 1
+      if (this.data && this.data[nextIndex]) {
+        const nextBlock = this.data[nextIndex] as StreamfieldBlockData
+        const nextBlockType = nextBlock.blockType
+        if (nextBlockType === 'InlineImageBlock' || nextBlockType === 'RichTextBlock') {
+          return true
+        }
+      }
+      return false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.BlockStreamfield {
+  // makes everything appear equal width
+  &.-fluid {
+    .LayoutHelper {
+      @apply block;
+    }
+
+    .BlockInlineImage {
+      .col-start-3 {
+        @apply col-start-1 col-span-7;
+      }
+
+      .col-start-6.col-span-5 {
+        @apply col-span-7;
+      }
+    }
+  }
+}
+</style>

package/src/components/BlockTable/BlockTable.stories.js

@@ -0,0 +1,20 @@
+import BlockTable from './BlockTable.vue'
+
+export default {
+  title: 'Components/Blocks/BlockTable',
+  component: BlockTable,
+  excludeStories: /.*Data$/
+}
+
+export const BlockTableData = {
+  blockType: 'TableBlock',
+  table:
+    "{'data': [['Header 1', 'Header 2', 'Header 3'], ['Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet'], [None, None, None]], 'cell': [], 'first_row_is_table_header': True, 'first_col_is_header': False, 'table_caption': 'Third row intentionally blank to test parsing.'}"
+}
+
+export const Table = {
+  name: 'BlockTable',
+  args: {
+    data: BlockTableData
+  }
+}

package/src/components/BlockTable/BlockTable.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    v-if="data"
+    class="BlockTable"
+  >
+    <div class="overflow-x-auto scrolling-touch">
+      <table class="border-gray-light-mid w-full border-t border-b border-collapse table-auto">
+        <tr
+          v-for="(row, index_row) in table.rows"
+          :key="index_row"
+        >
+          <td
+            v-for="(col, index_col) in row.cols"
+            :key="index_col"
+            :class="
+              row.header ? 'bg-dark-blue text-subtitle text-white' : 'bg-white text-gray-dark'
+            "
+            class="border-gray-light-mid lg:p-5 p-3 border-b"
+          >
+            {{ col }}
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="text-gray-mid-dark text-body-sm mt-4">{{ table.caption }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BlockTable',
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    table() {
+      let str = this.data.table
+      str = str.replace(/'/g, '"')
+      str = str.replace(/None,/g, '"",')
+      str = str.replace(/, None/g, ',""')
+      str = str.replace(/: False/g, ': false')
+      str = str.replace(/: True/g, ': true')
+      const dict = JSON.parse(str)
+      const table = {
+        rows: [],
+        caption: dict.table_caption
+      }
+      for (let i = 0; i < dict.data.length; i++) {
+        const row = {
+          cols: dict.data[i],
+          header: i === 0 && dict.first_row_is_table_header
+        }
+        table.rows.push(row)
+      }
+      return table
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/typography';
+// required for @apply text-subtitle in _BlockTable.scss
+@import '@explorer-1/common/src/scss/components/BlockText';
+// required for @extend .BlockText in _BlockTable.scss
+@import '@explorer-1/common/src/scss/components/BlockTable';
+</style>

package/src/components/BlockTeaser/BlockTeaser.stories.js

@@ -0,0 +1,74 @@
+import BlockTeaser from './BlockTeaser.vue'
+
+export default {
+  title: 'Components/Blocks/BlockTeaser',
+  component: BlockTeaser,
+  excludeStories: /.*Data$/
+}
+
+export const BlockTeaserData = {
+  heading: 'Perseverance',
+  introduction: 'The mission marks humanity’s first step in returning samples from another planet.',
+  buttonText: 'Read more',
+  image: {
+    full: {
+      url: 'https://picsum.photos/1096/400',
+      width: 1096,
+      height: 400
+    },
+    half: {
+      url: 'https://picsum.photos/540/400',
+      width: 548,
+      height: 400
+    }
+  },
+  fullWidthImage: false,
+  teaserPage: [
+    {
+      blockType: 'CharBlock'
+    },
+    {
+      blockType: 'TextBlock'
+    },
+    {
+      blockType: 'CharBlock'
+    },
+    {
+      blockType: 'ImageChooserBlock'
+    },
+    {
+      blockType: 'BooleanBlock'
+    },
+    {
+      blockType: 'PageChooserBlock',
+      page: {
+        label: 'Asteroid Watch Overview',
+        title: 'Asteroid Watch',
+        url: '/asteroid-watch/'
+      }
+    }
+  ]
+}
+
+export const Default = {
+  args: {
+    ...BlockTeaserData
+  }
+}
+
+export const FullWidth = {
+  args: {
+    ...BlockTeaserData,
+    fullWidth: true
+  }
+}
+
+export const Empty = {
+  args: {
+    teaserPage: {
+      pageType: 'Mission',
+      title: 'Perseverance',
+      url: '/missions/perseverance/'
+    }
+  }
+}

package/src/components/BlockTeaser/BlockTeaser.test.js

@@ -0,0 +1,12 @@
+import { mount } from '@vue/test-utils'
+
+import BlockTeaser from './BlockTeaser.vue'
+import { Empty } from './BlockTeaser.stories'
+
+describe('BlockTeaser', () => {
+  test('renders with partial data', () => {
+    mount(BlockTeaser, {
+      propsData: { ...Empty.args }
+    })
+  })
+})

package/src/components/BlockTeaser/BlockTeaser.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    class="BlockTeaser bg-gray-light lg:grid lg:grid-cols-10 relative z-0"
+    :style="image ? `min-height: ${theImage.height}px` : ''"
+  >
+    <div
+      v-if="fullWidth"
+      class="lg:block bg-gradient-to-l from-transparent-w50 to-transparent-black-50 absolute inset-0 z-10 hidden"
+    ></div>
+    <BaseImage
+      v-if="image && theImage.url"
+      :image-class="`cover-bg${fullWidth ? ' -full' : ''}`"
+      alt=""
+      :src="theImage.url"
+      :width="theImage.width"
+      :height="theImage.height"
+      loading="lazy"
+    />
+    <div
+      :class="`${
+        image && fullWidth ? 'relative lg:text-white lg:text-contrast z-20' : ''
+      } grid lg:col-start-2 lg:col-end-5 px-10 lg:px-0 lg:py-16 py-8`"
+    >
+      <div class="my-auto">
+        <h2
+          v-if="theLabel"
+          class="text-subtitle"
+        >
+          {{ theLabel }}
+        </h2>
+        <component
+          :is="theLabel || (theTeaserPage && theTeaserPage.label) ? 'h3' : 'h2'"
+          v-if="theHeading"
+          class="text-h3 font-semibold tracking-normal lg:mt-2 mt-3"
+        >
+          {{ theHeading }}
+        </component>
+        <p
+          v-if="introduction"
+          class="text-body-md lg:mt-2 mt-4"
+        >
+          {{ introduction }}
+        </p>
+        <BaseButton
+          v-if="theTeaserPage"
+          variant="primary"
+          :href="theTeaserPage.url"
+          class="mt-8"
+          :aria-label="`${theButtonText} - ${theHeading}`"
+        >
+          {{ theButtonText }}
+        </BaseButton>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+
+type teaserPageObject = {
+  title: string
+  label: string
+  url: string
+}
+type teaserPageBlock = {
+  blockType: string
+  page: teaserPageObject
+}
+export default defineComponent({
+  name: 'BlockTeaser',
+  components: {
+    BaseButton,
+    BaseImage
+  },
+  props: {
+    // piecemeal props for reuse
+    customLabel: {
+      type: String,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    heading: {
+      type: String,
+      required: false
+    },
+    introduction: {
+      type: String,
+      required: false
+    },
+    buttonText: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+    // ideally can pass a page object (TopicDetailPage), but sometimes (e.g. streamfield teaserblock) this will be wrapped in an array
+    teaserPage: {
+      type: [Array, Object],
+      required: false
+    }
+  },
+  computed: {
+    /**
+     * Fall back to the linked page’s label, if there is one.
+     */
+    theLabel(): string {
+      return (
+        this.customLabel || this.label || (this.theTeaserPage && this.theTeaserPage.label) || ''
+      )
+    },
+
+    /**
+     * Fall back to the linked page’s title, if there is one.
+     */
+    theHeading(): string {
+      return this.heading || (this.theTeaserPage && this.theTeaserPage.title) || ''
+    },
+
+    /**
+     * Fallback for optional field, which would compromise the usefulness of this component if missing.
+     */
+    theButtonText(): string {
+      return this.buttonText || 'Read More'
+    },
+
+    theImage(): { url: string; width: string; height: string } {
+      const { url, width, height } =
+        this.image && this.fullWidth ? this.image.full : this.image ? this.image.half : undefined
+
+      return {
+        url,
+        width,
+        height
+      }
+    },
+    // necessary as the streamfield teaser block passes an array of blocks
+    // this is necessary to retrieve the label from the teaser pages
+    theTeaserPage(): teaserPageObject | null {
+      if (this.teaserPage && typeof this.teaserPage === 'object') {
+        return this.teaserPage as teaserPageObject
+      } else if (this.teaserPage && Object.keys(this.teaserPage).length) {
+        const parsedTeaserPage = this.getTeaserPageBlock()
+        if (parsedTeaserPage) {
+          return parsedTeaserPage[0].page
+        }
+      }
+      return null
+    }
+  },
+  methods: {
+    getTeaserPageBlock(): teaserPageBlock[] | null {
+      if (this.teaserPage && this.teaserPage.length) {
+        const theBlocks = this.teaserPage
+        return theBlocks.filter((block: teaserPageBlock) => block.blockType === 'PageChooserBlock')
+      }
+      return null
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockTeaser';
+</style>