@explorer-1/vue 0.0.0

package/src/components/BlockListCards/BlockListCards.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-if="data && data.items && data.items.length > 0"
+    class="BlockListCards"
+  >
+    <template
+      v-for="(item, index) in data.items"
+      :key="index"
+    >
+      <div
+        class="md:flex"
+        :class="{
+          'lg:pb-10 lg:mb-10 mb-8 border-gray-light-mid pb-6 border-b':
+            index + 1 !== data.items.length
+        }"
+      >
+        <div class="md:mr-6 lg:mr-8 md:mb-0 flex-shrink-0 w-40 mb-6">
+          <BaseImagePlaceholder aspect-ratio="1:1">
+            <BaseImage
+              v-if="item.image && item.image.src"
+              :src="item.image.src.url"
+              :width="item.image.src.width"
+              :height="item.image.src.height"
+              alt=""
+              class="object-cover"
+              loading="lazy"
+            />
+          </BaseImagePlaceholder>
+        </div>
+        <div>
+          <BaseHeading
+            v-if="item.heading"
+            size="h5"
+            level="h2"
+            class="mb-3"
+          >
+            {{ item.heading }}
+          </BaseHeading>
+          <BlockText
+            v-if="item.description"
+            :text="item.description"
+            variant="medium"
+          />
+          <div
+            v-if="item.links && item.links.length > 1"
+            class="mt-3"
+          >
+            <!-- When more than one link is present, use default link variant -->
+            <ul class="pl-4 list-square">
+              <template
+                v-for="(link, index_link) in item.links"
+                :key="index_link"
+              >
+                <li class="my-2">
+                  <BaseLink
+                    :key="index_link"
+                    variant="default"
+                    class=""
+                    link-class="no-underline"
+                    :href="getExternalLink(link) ? getExternalLink(link) : undefined"
+                    :to="link.page ? link.page.url : null"
+                    external-target-blank
+                  >
+                    {{ link.text }}
+                  </BaseLink>
+                </li>
+              </template>
+            </ul>
+          </div>
+          <div
+            v-else-if="item.links && item.links.length === 1"
+            class="mt-3"
+          >
+            <!-- When exactly one link, use primary link variant -->
+            <template
+              v-for="(link, _index_link) in item.links"
+              :key="_index_link"
+            >
+              <BaseLink
+                variant="primary"
+                class="-mb-1"
+                link-class="inline-block"
+                caret-wrapper-class="py-2"
+                :href="getExternalLink(link) ? getExternalLink(link) : undefined"
+                :to="link.page ? link.page.url : null"
+                external-target-blank
+              >
+                {{ link.text }}
+              </BaseLink>
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetExternalLink } from './../../utils/mixins'
+import type { RelatedLinkObject } from '../../interfaces'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BlockText from './../BlockText/BlockText.vue'
+
+export default defineComponent({
+  name: 'BlockListCards',
+  components: {
+    BaseHeading,
+    BaseLink,
+    BaseImage,
+    BaseImagePlaceholder,
+    BlockText
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  methods: {
+    getExternalLink(link: RelatedLinkObject): string | undefined {
+      return mixinGetExternalLink(link)
+    }
+  }
+})
+</script>

package/src/components/BlockQuote/BlockQuote.stories.js

@@ -0,0 +1,84 @@
+import BlockQuote from './BlockQuote.vue'
+
+export default {
+  title: 'Components/Blocks/BlockQuote',
+  component: BlockQuote,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'A big, fancy pull quote, with optional attribution and link. Can also be used for non-quotation callouts.'
+      }
+    }
+  }
+}
+
+// shared data
+export const BlockQuoteData = {
+  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',
+  quoteLink: [
+    {
+      externalLink: '',
+      page: {
+        url: '/'
+      }
+    }
+  ],
+  thumbnail: {
+    src: 'https://picsum.photos/80/80',
+    alt: 'An image'
+  }
+}
+
+// template
+const BlockQuoteTemplate = (args) => ({
+  components: { BlockQuote },
+  setup() {
+    return { args }
+  },
+  template: `<BlockQuote v-bind="args" />`
+})
+
+export const Default = BlockQuoteTemplate.bind({})
+Default.args = {
+  data: {
+    quote: BlockQuoteData.quote,
+    attribution: BlockQuoteData.attribution,
+    quoteLink: []
+  }
+}
+export const WithImage = BlockQuoteTemplate.bind({})
+WithImage.args = {
+  data: {
+    quote: BlockQuoteData.quote,
+    attribution: BlockQuoteData.attribution,
+    thumbnail: BlockQuoteData.thumbnail
+  }
+}
+export const ExternalLinkedAttribution = BlockQuoteTemplate.bind({})
+ExternalLinkedAttribution.args = {
+  data: {
+    quote: BlockQuoteData.quote,
+    attribution: BlockQuoteData.attribution,
+    quoteLink: [
+      {
+        externalLink: 'https://www.jpl.nasa.gov'
+      }
+    ]
+  }
+}
+export const ImageWithLocalLinkedAttribution = BlockQuoteTemplate.bind({})
+ImageWithLocalLinkedAttribution.args = {
+  data: BlockQuoteData
+}
+export const NoAttribution = BlockQuoteTemplate.bind({})
+NoAttribution.args = {
+  data: {
+    quote: BlockQuoteData.quote
+  }
+}

package/src/components/BlockQuote/BlockQuote.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="BlockQuote md:px-0 px-4 mx-auto text-center">
+    <hr
+      aria-hidden="true"
+      class="lg:mb-6 mb-3"
+    />
+    <p
+      class="quote"
+      v-html="data.quote"
+    ></p>
+    <template v-if="data.attribution">
+      <div class="inline-block">
+        <div class="flex items-center justify-center">
+          <img
+            v-if="data.thumbnail && Object.keys(data.thumbnail).length > 0 && data.thumbnail.src"
+            loading="lazy"
+            class="attribution-image"
+            :src="data.thumbnail.src"
+            :alt="data.thumbnail.alt"
+          />
+
+          <BaseLink
+            v-if="data.quoteLink && data.quoteLink.length > 0"
+            variant="none"
+            class="attribution-text"
+            :href="data.quoteLink[0].externalLink ? data.quoteLink[0].externalLink : undefined"
+            :to="data.quoteLink[0].page ? data.quoteLink[0].page.url : undefined"
+            caret-margin-left="ml-1"
+            caret-color="text-primary"
+            caret
+            external-target-blank
+          >
+            {{ data.attribution }}
+          </BaseLink>
+
+          <div
+            v-else
+            class="attribution-text"
+          >
+            <span>{{ data.attribution }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <hr
+      aria-hidden="true"
+      class="lg:mt-6 mt-3"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+export interface BlockQuoteAttributes {
+  quote: string
+  attribution: string
+  quoteLink: {
+    externalLink?: string
+    page?: {
+      url: string
+    }
+  }[]
+  thumbnail: {
+    src: string
+    alt: string
+  }
+}
+
+export default defineComponent({
+  name: 'BlockQuote',
+  components: {
+    BaseLink
+  },
+  props: {
+    data: {
+      type: Object as PropType<BlockQuoteAttributes>,
+      required: true,
+      default: () => ({})
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockQuote';
+</style>

package/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js

@@ -0,0 +1,60 @@
+import BlockRelatedLinks from './BlockRelatedLinks.vue'
+
+export default {
+  title: 'Components/Blocks/BlockRelatedLinks',
+  component: BlockRelatedLinks,
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A list of links formatted with background colors and icons indicating the type of link.'
+      }
+    }
+  }
+}
+
+// data
+export const BlockRelatedLinksData = {
+  data: {
+    blockType: 'RelatedLinksBlock',
+    heading: 'Read more about this',
+    links: [
+      {
+        text: 'A document download',
+        document: {
+          url: 'https://www.jpl.nasa.gov/'
+        },
+        page: '',
+        externalLink: ''
+      },
+      {
+        text: 'An internal link',
+        document: '',
+        page: {
+          url: '/placeholder'
+        },
+        externalLink: ''
+      },
+      {
+        text: 'An external Link',
+        document: '',
+        page: '',
+        externalLink: 'https://www.jpl.nasa.gov/'
+      },
+      {
+        text: 'preventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainer',
+        document: '',
+        page: '',
+        externalLink: 'https://www.jpl.nasa.gov/'
+      }
+    ]
+  }
+}
+
+export const Default = {
+  name: 'BlockRelatedLinks',
+  args: {
+    ...BlockRelatedLinksData
+  }
+}

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -0,0 +1,77 @@
+<template>
+  <div v-if="hasContent">
+    <BaseHeading
+      v-if="data.heading"
+      level="h2"
+      class="md:mb-8 mb-5"
+    >
+      {{ data.heading }}
+    </BaseHeading>
+    <div
+      v-for="(link, index) in data.links"
+      :key="index"
+      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2"
+    >
+      <template v-if="link.externalLink">
+        <RelatedLink
+          variant="external"
+          :href="link.externalLink"
+        >
+          {{ link.text }}
+        </RelatedLink>
+      </template>
+      <template v-else-if="link.document">
+        <RelatedLink
+          variant="document"
+          :href="link.document.url"
+        >
+          {{ link.text }}
+        </RelatedLink>
+      </template>
+      <template v-else-if="link.page">
+        <RelatedLink
+          variant="page"
+          :to="link.page.url"
+        >
+          {{ link.text }}
+        </RelatedLink>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { BlockData, RelatedLinkObject } from './../../interfaces'
+
+import RelatedLink from './../BlockRelatedLinks/RelatedLink.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+
+export interface BlockRelatedLinksObject extends BlockData {
+  heading: string
+  links: RelatedLinkObject[]
+}
+
+export default defineComponent({
+  name: 'BlockRelatedLinks',
+  components: {
+    RelatedLink,
+    BaseHeading
+  },
+  props: {
+    data: {
+      type: Object as PropType<BlockRelatedLinksObject>,
+      required: true,
+      default: () => ({})
+    }
+  },
+  computed: {
+    hasContent() {
+      if (this.data?.links?.length) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -0,0 +1,85 @@
+<template>
+  <component
+    :is="tag"
+    :to="to"
+    :href="href"
+    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer"
+    :target="target"
+    rel="noopener"
+  >
+    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words">
+      <slot />
+    </span>
+    <component
+      :is="icon"
+      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal"
+      :class="variant === 'external' ? 'text-lg' : 'text-3xl'"
+    />
+  </component>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import IconArrow from './../Icons/IconArrow.vue'
+import IconDownload from './../Icons/IconDownload.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+
+interface Variants {
+  [name: string]: string
+}
+
+export const variants: Variants = {
+  page: 'page',
+  external: 'external',
+  document: 'document'
+}
+
+export default defineComponent({
+  name: 'BlockRelatedLinks',
+  components: {
+    IconArrow,
+    IconDownload,
+    IconExternal
+  },
+  props: {
+    variant: {
+      type: String,
+      required: true,
+      default: 'page',
+      validator: (prop: string): boolean => Object.keys(variants).includes(prop)
+    },
+    to: {
+      type: [String, Object],
+      required: false
+    },
+    href: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    tag() {
+      if (this.to) {
+        return 'nuxt-link'
+      } else {
+        return 'a'
+      }
+    },
+    target() {
+      if (this.to) {
+        return '_self'
+      } else {
+        return '_blank'
+      }
+    },
+    icon() {
+      if (this.variant === 'document') {
+        return 'IconDownload'
+      } else if (this.variant === 'page') {
+        return 'IconArrow'
+      } else {
+        return 'IconExternal'
+      }
+    }
+  }
+})
+</script>

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -0,0 +1,88 @@
+import { BlockCtaData } from './../BlockCta/BlockCta.stories'
+import { BlockHeadingData } from './../BlockHeading/BlockHeading.stories'
+import { BlockImageCarouselData } from './../BlockImageCarousel/BlockImageCarousel.stories'
+import { BlockImageComparisonData } from './../BlockImageComparison/BlockImageComparison.stories'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
+import { BlockImageGalleryData } from './../BlockImageGallery/BlockImageGallery.stories'
+import { BlockInlineImageData } from './../BlockInlineImage/BlockInlineImage.stories'
+import { BlockKeyPointsData } from './../BlockKeyPoints/BlockKeyPoints.stories'
+import { BlockListCardsData } from './../BlockListCards/BlockListCards.stories'
+import { BlockQuoteData } from './../BlockQuote/BlockQuote.stories'
+import { BlockRelatedLinksData } from './../BlockRelatedLinks/BlockRelatedLinks.stories'
+import { BlockTableData } from './../BlockTable/BlockTable.stories'
+import { BlockTeaserData } from './../BlockTeaser/BlockTeaser.stories'
+import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories'
+import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
+import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
+import BlockStreamfield, { variants } from './BlockStreamfield.vue'
+
+export default {
+  title: 'Components/Blocks/BlockStreamfield',
+  component: BlockStreamfield,
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: Object.keys(variants)
+    }
+  },
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*(Data)$/
+}
+
+export const BlockStreamfieldData = {
+  body: [
+    BlockKeyPointsData,
+    { ...BlockHeadingData, level: 'h2', size: 'h2' },
+    {
+      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'
+    },
+    BlockInlineImageData.block,
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>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. 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'
+    },
+    BlockCtaData,
+    BlockQuoteData,
+    BlockListCardsData,
+    BlockRelatedLinksData.data,
+    { blockType: 'TeaserBlock', ...BlockTeaserData },
+    BlockVideoData.block,
+    { blockType: 'CarouselBlock', showTitle: true, items: BlockImageCarouselData },
+    { blockType: 'VideoEmbedBlock', ...BlockVideoEmbedData.data },
+    BlockImageData,
+    { ...BlockImageData, fullBleed: true },
+    BlockImageComparisonData,
+    // BlockTwitterEmbedData,
+    BlockIframeEmbedData,
+    BlockImageGalleryData.block,
+    {
+      ...BlockInlineImageData.block,
+      alignTo: 'left'
+    },
+    BlockTableData
+  ]
+}
+
+export const Default = {
+  args: { data: BlockStreamfieldData.body, variant: 'default' }
+}
+
+export const MatchingWidths = {
+  args: {
+    data: BlockStreamfieldData.body,
+    variant: 'fluid'
+  }
+}