@explorer-1/vue 0.0.0

package/src/components/BlockInlineImage/BlockInlineImage.stories.js

@@ -0,0 +1,68 @@
+import { BaseImageCaptionData } from './../BaseImageCaption/BaseImageCaption.stories'
+import BlockInlineImage from './BlockInlineImage.vue'
+
+export default {
+  title: 'Components/Blocks/BlockInlineImage',
+  component: BlockInlineImage,
+  excludeStories: /.*(Data)$/
+}
+
+export const BlockInlineImageData = {
+  block: {
+    blockType: 'InlineImageBlock',
+    text: `<p>Maecenas luctus finibus arcu, a sodales leo varius quis. Aenean bibendum pellentesque eros, porttitor tempus lectus elementum venenatis. Aliquam erat volutpat. Pellentesque congue sapien lacus, sit amet imperdiet diam pellentesque vitae. In egestas aliquet tellus et pulvinar.</p>
+      <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vestibulum eros sed erat elementum mattis. Etiam fermentum velit id libero vulputate, quis lacinia nunc consequat. Nullam maximus turpis non elementum mattis. Proin volutpat tellus et nibh suscipit posuere. </p>
+      <p>Sed ipsum lorem, sodales a lacinia nec, sagittis in erat. Praesent vel est turpis. Suspendisse potenti. Vivamus quis odio ligula. Sed ornare magna elementum nibh tincidunt, non maximus felis lobortis. Cras in quam ornare, egestas nulla et, semper orci. Vivamus sed ornare ipsum. Aenean at tincidunt nunc, at euismod nibh. Integer molestie aliquam risus sed ultrices. </p>`,
+    alignTo: 'right',
+    image: {
+      ...BaseImageCaptionData,
+      alt: 'Inline image',
+      src: {
+        height: 500,
+        url: 'https://picsum.photos/700/500',
+        width: 700
+      },
+      original: 'https://picsum.photos/1400/1000'
+    },
+    displayCaption: true
+  }
+}
+
+export const AlignRight = {
+  args: { data: BlockInlineImageData.block }
+}
+
+export const CustomCaption = {
+  args: {
+    data: {
+      ...BlockInlineImageData.block,
+      caption: '<p>My custom caption.</p>'
+    }
+  }
+}
+
+export const AlignLeft = {
+  args: {
+    data: {
+      ...BlockInlineImageData.block,
+      alignTo: 'left'
+    }
+  }
+}
+
+export const PortraitImage = {
+  args: {
+    data: {
+      ...BlockInlineImageData.block,
+      image: {
+        ...BaseImageCaptionData,
+        alt: 'Inline image',
+        src: {
+          height: 600,
+          url: 'https://picsum.photos//500/600',
+          width: 500
+        }
+      }
+    }
+  }
+}

package/src/components/BlockInlineImage/BlockInlineImage.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    v-if="data"
+    class="BlockInlineImage lg:BaseGrid container mx-auto"
+  >
+    <!-- the image -->
+    <div
+      v-if="theImageData"
+      class="lg:mb-0 lg:w-full sm:w-xl lg:mt-0 lg:pr-4 2xl:pr-0 col-span-5 mx-auto mt-8 mb-8"
+      :class="data.alignTo === 'right' ? 'col-start-8 lg:order-2' : 'col-start-1 lg:order-1'"
+    >
+      <!-- should accommodate any size/shape image without cropping -->
+      <MixinFancybox
+        v-if="theImageData"
+        :src="theImageData.original"
+        :caption="theImageData.caption"
+        :credit="theImageData.credit"
+        :detail-url="theImageData.detailUrl"
+      >
+        <BaseImagePlaceholder aspect-ratio="none">
+          <BaseImage
+            v-if="theImageData && theImageData.src"
+            :src="theImageData.src.url"
+            :srcset="theSrcSet"
+            :width="theImageData.src.width"
+            :height="theImageData.src.height"
+            image-class="w-full h-auto"
+            :alt="theImageData.alt"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+      </MixinFancybox>
+      <BaseImageCaption
+        v-if="hasCaptionArea"
+        class="lg:mt-3 mt-2"
+        :data="theImageData"
+      />
+    </div>
+
+    <!-- the text -->
+    <div
+      v-if="data.text"
+      class="flex col-span-5"
+      :class="data.alignTo === 'right' ? 'col-start-3 lg:order-1' : 'col-start-6 lg:order-2'"
+    >
+      <BlockText :text="data.text" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import { mixinGetSrcSet } from './../../utils/mixins'
+import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+import BlockText from './../BlockText/BlockText.vue'
+
+export default defineComponent({
+  name: 'BlockInlineImage',
+  components: {
+    MixinFancybox,
+    BlockText,
+    BaseImagePlaceholder,
+    BaseImage,
+    BaseImageCaption
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theCaption(): string | undefined {
+      if (
+        this.data &&
+        this.data.caption &&
+        this.data.caption.length > 2 &&
+        this.data.displayCaption
+      ) {
+        return this.data.caption
+      } else if (
+        this.data &&
+        this.data.image.caption &&
+        this.data.image.caption.length > 2 &&
+        this.data.displayCaption
+      ) {
+        return this.data.image.caption
+      }
+      return undefined
+    },
+    // reform the image data object with the computed caption
+    theImageData(): Partial<ImageObject> | null {
+      if (this.data?.image) {
+        return {
+          ...this.data?.image,
+          caption: this.theCaption
+        }
+      }
+      return null
+    },
+    hasCaptionArea(): string | false {
+      if (this.data && this.data.image) {
+        return this.theCaption || this.data.image.credit || this.data.image.detailUrl
+      }
+      return false
+    },
+    theSrcSet() {
+      return this.theImageData
+        ? mixinGetSrcSet(this.theImageData)
+          ? mixinGetSrcSet(this.theImageData)
+          : this.theImageData.srcSet
+        : undefined
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockInlineImage';
+</style>

package/src/components/BlockKeyPoints/BlockKeyPoints.stories.js

@@ -0,0 +1,28 @@
+import BlockKeyPoints from './BlockKeyPoints.vue'
+
+export default {
+  title: 'Components/Blocks/BlockKeyPoints',
+  component: BlockKeyPoints,
+  excludeStories: /.*Data$/
+}
+
+export const BlockKeyPointsData = {
+  blockType: 'KeyPointBlock',
+  heading: 'Key Points',
+  listItem: [
+    {
+      text: '<p>Understanding how greenhouse gases will affect clouds is crucial to forecasting climate change.</p><p>But current computer climate models can’t handle the high resolution needed to simulate cloud dynamics worldwide.</p>'
+    },
+    {
+      text: '<p>A recent study suggests that if greenhouse gases raise the atmosphere’s temperature enough, stratocumulus clouds could disappear, causing a large spike in global temperature.</p>'
+    }
+  ]
+}
+
+// stories
+export const KeyPoints = {
+  name: 'BlockKeyPoints',
+  args: {
+    data: BlockKeyPointsData
+  }
+}

package/src/components/BlockKeyPoints/BlockKeyPoints.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="data"
+    class="BlockKeyPoints border-gray-light-mid lg:py-10 py-6 border-t border-b"
+  >
+    <BlockHeading
+      class="mb-5"
+      :data="{ heading: data.heading }"
+    />
+    <ul>
+      <li
+        v-for="(item, index) in data.listItem"
+        :key="index"
+        class="flex"
+        :class="index + 1 === data.listItem.length ? 'mb-0' : 'mb-4'"
+      >
+        <BlockText
+          :text="item.text"
+          variant="medium"
+        ></BlockText>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BlockHeading from './../BlockHeading/BlockHeading.vue'
+import BlockText from './../BlockText/BlockText.vue'
+
+export default defineComponent({
+  name: 'BlockKeyPoints',
+  components: {
+    BlockHeading,
+    BlockText
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockKeyPoints';
+</style>

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -0,0 +1,102 @@
+// 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 BlockLinkCard from './BlockLinkCard.vue'
+
+export default {
+  title: 'Components/Blocks/BlockLinkCard',
+  component: BlockLinkCard,
+  excludeStories: /.*Data$/,
+  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' // to omit decorators from html output
+    }
+  }
+}
+
+// shared data
+export const BlockLinkCardData = {
+  data: {
+    url: '/news/placeholder-slug-1',
+    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    slug: 'placeholder-slug-1',
+    label: 'Solar System',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    }
+  },
+  headingLevel: 'h2',
+  startDate: undefined,
+  endDate: undefined,
+  compact: false
+}
+
+export const SingleItem = {
+  args: {
+    ...BlockLinkCardData
+  }
+}
+
+export const SingleItemCompactStyles = {
+  args: {
+    ...BlockLinkCardData,
+    headingLevel: 'h2',
+    compact: true
+  }
+}
+export const Compact = {
+  name: 'Compact w/ Custom Props',
+  parameters: {
+    docs: {
+      description: {
+        story: "View this story's canvas and controls to see its usage of custom props."
+      }
+    }
+  },
+  args: {
+    title: 'Lorem ipsum news title in search results',
+    url: '/news/demo',
+    externalLink: '',
+    label: 'News',
+    date: 'Sep. 23, 2010',
+    thumbnailImage: {
+      src: {
+        url: 'https://picsum.photos/512/288',
+        width: 512,
+        height: 288
+      },
+      alt: 'Alt text'
+    },
+    headingLevel: 'h2',
+    compact: true
+  }
+}
+export const EventItem = {
+  args: {
+    ...BlockLinkCardData,
+    data: {
+      ...BlockLinkCardData.data,
+      startDate: '2021-11-11T00:00:00-08:00',
+      endDate: '2021-11-11T23:59:59.999999-08:00'
+    }
+  }
+}

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -0,0 +1,197 @@
+<template>
+  <BaseLink
+    v-if="theItem"
+    variant="none"
+    :to="theItem.url ? theItem.url : undefined"
+    :href="theItem.externalLink ? theItem.externalLink : undefined"
+    class="BlockLinkCard group"
+    link-class="block pb-5"
+    external-target-blank
+  >
+    <BaseImagePlaceholder
+      aspect-ratio="16:9"
+      class="bg-gray-dark relative mb-6 overflow-hidden"
+      :class="{ 'lg:mb-10': !compact }"
+      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="can-hover:group-hover:delay-200 can-hover:group-hover:scale-100 absolute top-0 left-0 w-full transition-all duration-200 ease-in transform scale-105"
+        loading="lazy"
+      />
+      <div v-else></div>
+    </BaseImagePlaceholder>
+
+    <div
+      class="transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
+      :class="
+        compact ? 'can-hover:group-hover:-translate-y-2' : 'can-hover:group-hover:-translate-y-3'
+      "
+    >
+      <div class="flex flex-wrap">
+        <p
+          v-if="theItem.label || theItem.startDate"
+          class="text-subtitle divide-gray-mid flex divide-x"
+          :class="compact ? 'mb-2' : 'mb-4'"
+        >
+          <span
+            v-if="theItem.label"
+            :class="{ 'pr-2': theItem.startDate }"
+          >
+            {{ theItem.label }}
+          </span>
+          <span
+            v-if="theItem.startDate"
+            :class="{ 'text-gray-mid-dark pl-2': theItem.label }"
+          >
+            {{ formattedEventDates }}
+          </span>
+          <span class="sr-only">.</span>
+        </p>
+      </div>
+
+      <component
+        :is="headingLevel || 'p'"
+        class="text-gray-dark text-xl font-medium leading-tight tracking-tight"
+        :class="{ 'lg:text-3xl': !compact }"
+      >
+        {{ theItem.title }}
+      </component>
+      <p
+        v-if="theItem.date"
+        class="text-gray-mid-dark mt-2"
+      >
+        {{ theItem.date }}
+      </p>
+    </div>
+    <div
+      class="can-hover:block text-action can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
+    >
+      <IconArrow />
+    </div>
+  </BaseLink>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import type { Card } from '../../interfaces'
+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: 'BlockLinkCard',
+  components: {
+    IconArrow,
+    BaseLink,
+    BaseImage,
+    BaseImagePlaceholder
+  },
+  props: {
+    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
+    },
+    date: {
+      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: content pages provide this.data.page with non-page siblings (i.e. external link cards)
+    // 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.date ||
+        this.startDate ||
+        this.endDate
+      ) {
+        // form a custom object
+        return {
+          url: this.url,
+          externalLink: this.externalLink,
+          thumbnailImage: this.thumbnailImage,
+          label: this.label,
+          title: this.title,
+          date: this.date,
+          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">
+.BlockLinkCard {
+  .text-subtitle.divide-x {
+    @apply leading-none #{!important};
+  }
+}
+</style>