@explorer-1/vue 0.0.0

package/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js

@@ -0,0 +1,217 @@
+import BlockLinkCarousel, { itemTypes } from './BlockLinkCarousel.vue'
+
+export default {
+  title: 'Components/Blocks/BlockLinkCarousel',
+  component: BlockLinkCarousel,
+  argTypes: {
+    itemType: {
+      type: 'string',
+      description: 'Type of item used for each slide',
+      control: {
+        type: 'select'
+      },
+      options: Object.keys(itemTypes),
+      table: {
+        defaultValue: { summary: 'cards' }
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BlockLinkCardCarouselData = [
+  {
+    url: '/news/placeholder-slug-1',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-1',
+    label: 'Mars',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  },
+  {
+    url: '/news/placeholder-slug-2',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-2',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  },
+  {
+    url: '/news/placeholder-slug-3',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-3',
+    label: 'Solar System',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  },
+  {
+    url: '/news/placeholder-slug-4',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-4',
+    label: 'Technology',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  }
+]
+
+export const BlockLinkTileCarouselData = [
+  {
+    url: '/topics/placeholder-slug-1',
+    title: 'Perseverance',
+    label: 'Mars',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/490/430',
+        width: 490,
+        height: 430
+      },
+      alt: 'Alt text'
+    }
+  },
+  {
+    url: '/topics/placeholder-slug-2',
+    title: 'OCO-2',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/490/430',
+        width: 490,
+        height: 430
+      },
+      alt: 'Alt text'
+    }
+  },
+  {
+    url: '/topics/placeholder-slug-3',
+    title: 'Mars 2020',
+    label: 'Solar System',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/490/430',
+        width: 490,
+        height: 430
+      },
+      alt: 'Alt text'
+    }
+  },
+  {
+    url: '/topics/placeholder-slug-4',
+    title: 'Lorem ipsum dolor sit amet',
+    label: 'Mars',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/490/430',
+        width: 490,
+        height: 430
+      },
+      alt: 'Alt text'
+    }
+  }
+]
+
+export const EventsBlockLinkCarouselData = [
+  {
+    endDate: null,
+    startDate: '2019-11-11',
+    thumbnailImage: {
+      src: {
+        height: '288',
+        url: 'https://picsum.photos/512/288',
+        width: '512'
+      }
+    },
+    title: 'Past event',
+    url: '/events/becoming-a-nasa-engineer'
+  },
+  {
+    endDate: null,
+    startDate: '2021-11-27',
+    thumbnailImage: {
+      src: {
+        height: '288',
+        url: 'https://picsum.photos/512/288',
+        width: '512'
+      }
+    },
+    title: 'Future event',
+    url: '/events/becoming-a-nasa-engineer'
+  }
+]
+
+// template
+const BlockLinkCarouselTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BlockLinkCarousel },
+  template: `<BlockLinkCarousel :itemType="itemType" :heading="heading" :items="items"/>`
+})
+
+const BlockLinkCarouselMultipleTemplate = (args) => ({
+  components: { BlockLinkCarousel },
+  setup() {
+    return { args }
+  },
+  template: `<div><BlockLinkCarousel class="mb-20" v-bind="args" /><BlockLinkCarousel item-type="cards" v-bind="args" /></div>`
+})
+
+// stories
+export const CardCarousel = {
+  args: {
+    itemType: 'cards',
+    heading: 'Related Pages',
+    items: BlockLinkCardCarouselData
+  }
+}
+
+export const TileCarousel = {
+  args: {
+    itemType: 'tiles',
+    heading: 'Explore More',
+    items: BlockLinkCardCarouselData
+  }
+}
+
+export const MoreEventsCarousel = {
+  args: {
+    itemType: 'cards',
+    heading: 'More Events',
+    items: EventsBlockLinkCarouselData
+  }
+}
+
+export const TwoItems = {
+  args: {
+    itemType: 'cards',
+    heading: 'Related Pages',
+    items: BlockLinkCardCarouselData.slice(0, 2)
+  }
+}
+
+export const MultipleCarousels = BlockLinkCarouselMultipleTemplate.bind({})
+MultipleCarousels.args = {
+  itemType: 'cards',
+  heading: 'Related Pages',
+  otherHeading: 'Explore More',
+  items: BlockLinkCardCarouselData
+}

package/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -0,0 +1,68 @@
+\
+<template>
+  <MixinCarousel
+    v-if="hasContent"
+    :heading="heading"
+    :variant="itemType"
+  >
+    <!-- Slides -->
+    <component
+      :is="theVariantComponent"
+      v-for="(item, index) in items"
+      :key="index"
+      :data="item"
+      class="swiper-slide"
+    />
+  </MixinCarousel>
+</template>
+<script lang="ts">
+import { defineComponent, resolveComponent } from 'vue'
+import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
+import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
+
+interface Variants {
+  [name: string]: string
+}
+
+export const itemTypes: Variants = {
+  cards: 'BlockLinkCard',
+  tiles: 'BlockLinkTile'
+}
+
+export default defineComponent({
+  name: 'BlockLinkCarousel',
+  components: {
+    MixinCarousel,
+    BlockLinkCard,
+    BlockLinkTile
+  },
+  props: {
+    itemType: {
+      type: String,
+      required: false,
+      default: 'cards',
+      validator: (prop: string): boolean => Object.keys(itemTypes).includes(prop)
+    },
+    items: {
+      type: Array,
+      required: false
+    },
+    heading: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    theVariantComponent() {
+      return resolveComponent(itemTypes[this.itemType])
+    },
+    hasContent() {
+      if (this.items && this.items.length) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>

package/src/components/BlockLinkTile/BlockLinkTile.stories.js

@@ -0,0 +1,72 @@
+// the base component should really be a single vue component with a "type" prop where the user can select between card and list, but this works well enough for a demo atm.
+
+import BlockLinkTile from './BlockLinkTile.vue'
+
+export default {
+  title: 'Components/Blocks/BlockLinkTile',
+  component: BlockLinkTile,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
+    })
+  ],
+  argTypes: {
+    headingLevel: {
+      description:
+        'Change the heading level for semantic markup. This does not affect the style of the heading.',
+      control: {
+        type: 'select'
+      },
+      options: [null, 'h1', 'h2', 'h3', 'h4', 'h5']
+    }
+  },
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BlockLinkTileData = {
+  card: {
+    url: '/topics/placeholder-slug-1',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    label: 'Solar System',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/490/430',
+        width: 490,
+        height: 430
+      },
+      alt: 'Alt text'
+    }
+  }
+}
+
+export const SingleItem = {
+  args: {
+    data: BlockLinkTileData.card,
+    headingLevel: 'h2',
+    compact: false
+  }
+}
+export const Compact = {
+  args: {
+    title: 'Lorem ipsum title in search results',
+    url: '/missions/demo',
+    externalLink: '',
+    label: 'Mission',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    },
+    headingLevel: 'h2',
+    compact: true
+  }
+}

package/src/components/BlockLinkTile/BlockLinkTile.vue

@@ -0,0 +1,193 @@
+<template>
+  <BaseLink
+    v-if="theItem"
+    variant="none"
+    :to="theItem.url ? theItem.url : undefined"
+    :href="theItem.externalLink ? theItem.externalLink : undefined"
+    class="BlockLinkTile group"
+    link-class="block"
+    external-target-blank
+  >
+    <div class="relative">
+      <div
+        class="lg:group-hover:scale-105 min-h-66 transition-all duration-200 ease-in delay-200 transform scale-100 bg-black"
+      >
+        <BaseImagePlaceholder
+          :aspect-ratio="compact ? '1:1' : '8:7'"
+          dark-mode
+          no-logo
+        >
+          <BaseImage
+            v-if="theItem.thumbnailImage && theItem.thumbnailImage.src"
+            :src="theItem.thumbnailImage.src.url"
+            :width="theItem.thumbnailImage.src.width"
+            :height="theItem.thumbnailImage.src.height"
+            alt=""
+            object-fit-class="cover"
+            image-class="w-full h-full"
+            loading="lazy"
+          />
+          <div v-else></div>
+        </BaseImagePlaceholder>
+        <div
+          class="gradient-overlay bg-gradient-to-b from-transparent to-black min-h-1/2 absolute inset-x-0 bottom-0"
+        ></div>
+        <div class="bg-opacity-15 absolute inset-0 bg-black"></div>
+      </div>
+      <div class="absolute inset-x-0 bottom-0">
+        <div
+          class="text-contrast px-6 py-4 text-white"
+          :class="{ 'xl:px-10 xl:py-6 lg:px-8': !compact }"
+        >
+          <p
+            v-if="theItem.label || theItem.startDate"
+            class="text-subtitle divide-white flex divide-x mb-2"
+          >
+            <span
+              v-if="theItem.label"
+              :class="{ 'pr-2': theItem.startDate }"
+            >
+              {{ theItem.label }}
+            </span>
+            <span
+              v-if="theItem.startDate"
+              :class="{ 'pl-2': theItem.label }"
+            >
+              {{ formattedEventDates }}
+            </span>
+            <span class="sr-only">.</span>
+          </p>
+          <component
+            :is="headingLevel || 'p'"
+            class="text-xl leading-tight tracking-tight transition-all duration-200 ease-in delay-200"
+            :class="
+              compact
+                ? 'font-semibold mb-0 lg:group-hover:mb-1'
+                : 'font-medium mb-1 lg:group-hover:mb-3 sm:text-6xl md:text-3xl xl:text-6xl'
+            "
+          >
+            {{ theItem.title }}
+          </component>
+          <div
+            class="lg:block lg:-ml-3 lg:opacity-0 lg:group-hover:ml-0 lg:group-hover:opacity-100 lg:-mb-3 relative z-20 hidden text-3xl leading-normal transition-all duration-200 ease-in delay-200"
+          >
+            <IconArrow />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BaseLink>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { Card } from '../../interfaces'
+import { defineComponent } from 'vue'
+import { mixinFormatEventDates } from './../../utils/mixins'
+import IconArrow from './../Icons/IconArrow.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'BlockLinkTile',
+  components: {
+    IconArrow,
+    BaseLink,
+    BaseImage,
+    BaseImagePlaceholder
+  },
+  props: {
+    // if some cards contain external links, be sure to alias the external url as 'externalLink'
+    data: {
+      type: Object as PropType<Card>,
+      required: false
+    },
+    // override props as needed
+    // so we can use this component in search results
+    url: {
+      type: String,
+      required: false
+    },
+    externalLink: {
+      type: String,
+      required: false
+    },
+    thumbnailImage: {
+      type: Object,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    startDate: {
+      type: String,
+      required: false
+    },
+    endDate: {
+      type: String,
+      required: false
+    },
+    // if styling should be compact
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    // if a heading should be used and at what level
+    headingLevel: {
+      type: (String as PropType<HeadingLevel>) || null,
+      required: false
+    }
+  },
+  computed: {
+    // to allow for various data shapes and sources
+    // use-case: the homepage provides this.data.page with non-page siblings
+    // use-case: search and listing pages pass individual props
+    theItem(): Card | undefined {
+      if ((this.data as Card)?.page) {
+        return (this.data as Card).page
+      } else if (this.data) {
+        return this.data
+      } else if (
+        this.url ||
+        this.externalLink ||
+        this.thumbnailImage ||
+        this.label ||
+        this.title ||
+        this.startDate ||
+        this.endDate
+      ) {
+        // form a custom object
+        return {
+          url: this.url,
+          externalLink: this.externalLink,
+          thumbnailImage: this.thumbnailImage,
+          label: this.label,
+          title: this.title,
+          startDate: this.startDate,
+          endDate: this.endDate
+        }
+      }
+      return undefined
+    },
+    formattedEventDates() {
+      return this.theItem?.startDate
+        ? mixinFormatEventDates(this.theItem.startDate, this.theItem.endDate)
+        : undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+.BlockLinkTile {
+  .text-subtitle.divide-x {
+    @apply leading-none #{!important};
+  }
+}
+</style>

package/src/components/BlockListCards/BlockListCards.stories.js

@@ -0,0 +1,69 @@
+import BlockListCards from './BlockListCards.vue'
+
+export default {
+  title: 'Components/Blocks/BlockListCards',
+  component: BlockListCards,
+  excludeStories: /.*Data$/
+}
+
+export const BlockListCardsData = {
+  blockType: 'ListBlock',
+  items: [
+    {
+      description:
+        '<p>Morbi ullamcorper ligula sit amet finibus condimentum. Nulla et  ultricies metus. Integer tristique arcu quam, sed blandit sem porttitor  non. Donec aliquet orci at iaculis gravida. Vestibulum bibendum justo  vitae enim tempor pulvinar. Phasellus scelerisque ultrices eros, vitae  pulvinar lectus tempus convallis. In hac habitasse platea dictumst.  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
+      heading: 'Heading text',
+      image: {
+        src: {
+          url: 'https://picsum.photos/320/320',
+          width: '320',
+          height: '320'
+        }
+      },
+      links: [
+        {
+          externalLink: 'http://www.nasa.gov/',
+          page: null,
+          text: 'External link'
+        },
+        {
+          externalLink: null,
+          page: {
+            url: '/missions/airborne-visible-infrared-imaging-spectrometer-aviris/'
+          },
+          text: 'Internal link'
+        }
+      ]
+    },
+    {
+      description:
+        '<p>Morbi ullamcorper ligula sit amet finibus condimentum. Nulla et  ultricies metus. Integer tristique arcu quam, sed blandit sem porttitor  non. Donec aliquet orci at iaculis gravida. Vestibulum bibendum justo  vitae enim tempor pulvinar. Phasellus scelerisque ultrices eros, vitae  pulvinar lectus tempus convallis. In hac habitasse platea dictumst.  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
+      heading: 'Heading text',
+      image: {
+        src: {
+          url: 'https://picsum.photos/320/320',
+          width: '320',
+          height: '320'
+        }
+      },
+      links: [
+        {
+          externalLink: null,
+          page: null,
+          document: {
+            url: '/missions/airborne-visible-infrared-imaging-spectrometer-aviris/'
+          },
+          text: 'Document link'
+        }
+      ]
+    }
+  ]
+}
+
+// stories
+export const Default = {
+  name: 'BlockListCards',
+  args: {
+    data: BlockListCardsData
+  }
+}