@explorer-1/vue 0.0.0

package/src/components/BlockImage/BlockImage.stories.js

@@ -0,0 +1,137 @@
+import BlockImage from './BlockImage.vue'
+
+export default {
+  title: 'Components/Blocks/BlockImage',
+  component: BlockImage,
+  argTypes: {
+    fullBleed: {
+      control: { type: 'boolean' }
+    }
+  },
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'The combination of BaseImage and BaseImageCaption, plus adding support for expanding the image in a lightbox and styling it to be a full-bleed image.'
+      }
+    }
+  }
+}
+
+// shared data
+export const BlockImageData = {
+  blockType: 'FullBleedImageBlock',
+  fullBleed: false,
+  image: {
+    alt: 'Fourth image',
+    caption:
+      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>',
+    credit: 'NASA/JPL',
+    detailUrl: '/image/placeholder/',
+    original: 'https://picsum.photos/869/700',
+    src: {
+      height: 700,
+      url: 'https://picsum.photos/869/700',
+      width: 869
+    },
+    srcSet: 'https://picsum.photos/320/258 320w, https://picsum.photos/869/700 1024w'
+  },
+  imageFullBleed: {
+    alt: 'Fourth image',
+    caption:
+      '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>',
+    credit: 'NASA/JPL',
+    detailUrl: '/image/placeholder/',
+    original: 'https://picsum.photos/1800/600',
+    src: {
+      width: 1800,
+      height: 900,
+      url: 'https://picsum.photos/1800/600'
+    },
+    srcCropped: {
+      width: 1024,
+      height: 341,
+      url: 'https://picsum.photos/1024/341'
+    },
+    screenXs: {
+      url: 'https://picsum.photos/320/107',
+      width: 320
+    },
+    screenLg: {
+      url: 'https://picsum.photos/1024/341',
+      width: 1024
+    },
+    screenXl: {
+      url: 'https://picsum.photos/1280/427',
+      width: 1280
+    },
+    screenThreexl: {
+      url: 'https://picsum.photos/1800/600',
+      width: 1800
+    }
+  }
+}
+
+// templates
+const BlockImageTemplate = (args) => ({
+  components: { BlockImage },
+  setup() {
+    return { args }
+  },
+  template: `
+    <BlockImage v-bind="args" />`
+})
+
+export const Standard = BlockImageTemplate.bind({})
+Standard.args = {
+  data: BlockImageData,
+  fullBleed: BlockImageData.fullBleed
+}
+
+export const Unconstrained = BlockImageTemplate.bind({})
+Unconstrained.args = {
+  data: {
+    ...BlockImageData,
+    constrain: false
+  },
+  fullBleed: BlockImageData.fullBleed
+}
+
+export const CustomCaption = BlockImageTemplate.bind({})
+CustomCaption.args = {
+  data: {
+    ...BlockImageData,
+    caption: '<p>My custom caption.</p>',
+    displayCaption: true
+  },
+  fullBleed: BlockImageData.fullBleed
+}
+
+export const NoCaption = BlockImageTemplate.bind({})
+NoCaption.args = {
+  data: {
+    ...BlockImageData,
+    displayCaption: false
+  },
+  fullBleed: BlockImageData.fullBleed
+}
+
+export const FullBleed = BlockImageTemplate.bind({})
+FullBleed.args = {
+  data: {
+    ...BlockImageData,
+    constrain: true
+  },
+  fullBleed: true
+}
+
+export const FullBleedUnconstrained = BlockImageTemplate.bind({})
+FullBleedUnconstrained.args = {
+  data: {
+    ...BlockImageData,
+    constrain: false
+  },
+  fullBleed: true
+}

package/src/components/BlockImage/BlockImage.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BlockImageStandard from './BlockImageStandard.vue'
+import BlockImageFullBleed from './BlockImageFullBleed.vue'
+import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+
+export default defineComponent({
+  name: 'BlockImage',
+  components: {
+    BlockImageStandard,
+    BlockImageFullBleed,
+    LayoutHelper
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    },
+    fullBleed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+})
+</script>
+<template>
+  <div v-if="data">
+    <template v-if="fullBleed && data.imageFullBleed">
+      <BlockImageFullBleed
+        :data="data.imageFullBleed"
+        :display-caption="data.displayCaption"
+        :caption="data.caption"
+        :constrain="data.constrain"
+      />
+    </template>
+    <template v-else>
+      <LayoutHelper indent="col-2">
+        <BlockImageStandard
+          :data="data.image"
+          :display-caption="data.displayCaption"
+          :caption="data.caption"
+          :constrain="data.constrain"
+        />
+      </LayoutHelper>
+    </template>
+  </div>
+</template>

package/src/components/BlockImage/BlockImageFullBleed.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+import type { ImageObject } from './../../interfaces'
+import { mixinGetSrcSet } from './../../utils/mixins'
+
+export default defineComponent({
+  name: 'BlockImageFullBleed',
+  components: {
+    MixinFancybox,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseImageCaption
+  },
+  props: {
+    data: {
+      type: Object as PropType<ImageObject>,
+      required: false
+    },
+    // if a caption should even be visible
+    displayCaption: {
+      type: Boolean,
+      default: true
+    },
+    // overrides caption provided with image model
+    caption: {
+      type: String,
+      required: false
+    },
+    // if the image should be constrained to a fixed aspect ratio (21:9 on smaller screens, 2:1 on larger screens)
+    constrain: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      openTab: 1
+    }
+  },
+  computed: {
+    theCaption(): string | undefined {
+      if (this.caption && this.caption.length > 2 && this.displayCaption) {
+        return this.caption
+      } else if (
+        this.displayCaption &&
+        this.data &&
+        this.data.caption &&
+        this.data.caption.length > 2
+      ) {
+        return this.data.caption
+      }
+      return undefined
+    },
+    theSrcSet(): string | undefined {
+      return this.theData ? mixinGetSrcSet(this.theData) : undefined
+    },
+    // reform the data object with the computed caption
+    theData(): ImageObject | undefined {
+      if (this.data) {
+        return {
+          ...this.data,
+          caption: this.theCaption
+        }
+      }
+      return undefined
+    },
+    hasCaptionArea(): boolean {
+      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>
+<template>
+  <div v-if="theData">
+    <div class="bg-gray-light">
+      <div class="max-w-screen-3xl mx-auto">
+        <MixinFancybox
+          v-if="theData.src"
+          :src="theData.original"
+          :caption="theData.caption"
+          :credit="theData.credit"
+          :detail-url="theData.detailUrl"
+        >
+          <BaseImagePlaceholder
+            :aspect-ratio="constrain ? '16:9' : 'none'"
+            :responsive-aspect-ratio="constrain ? 'lg:aspect-ratio-two-one' : ''"
+            dark-mode
+          >
+            <BaseImage
+              v-if="theData.src && theData.srcCropped"
+              :src="constrain ? theData.srcCropped.url : theData.src.url"
+              :srcset="theData.srcSet && !constrain ? theData.srcSet : theSrcSet"
+              :width="constrain ? theData.srcCropped.width : theData.src.width"
+              :height="constrain ? theData.srcCropped.height : theData.src.height"
+              :alt="theData.alt"
+              :image-class="!constrain ? 'w-full h-auto' : undefined"
+              :object-fit-class="constrain ? 'cover' : undefined"
+              loading="lazy"
+            />
+          </BaseImagePlaceholder>
+        </MixinFancybox>
+      </div>
+    </div>
+    <div
+      v-if="data && hasCaptionArea"
+      class="max-w-screen-3xl p-4 pb-0 mx-auto"
+    >
+      <BaseImageCaption :data="theData" />
+    </div>
+  </div>
+</template>

package/src/components/BlockImage/BlockImageStandard.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import type { ImageObject } from './../../interfaces'
+import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+
+export default defineComponent({
+  name: 'BlockImageStandard',
+  components: {
+    MixinFancybox,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseImageCaption
+  },
+  props: {
+    data: {
+      type: Object as PropType<ImageObject>,
+      required: false
+    },
+    // if a caption should even be visible
+    displayCaption: {
+      type: Boolean,
+      default: true
+    },
+    // overrides caption provided with image model
+    caption: {
+      type: String,
+      required: false
+    },
+    // if the image should be constrained to a 16:9 aspect ratio
+    constrain: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    theCaption(): string | undefined {
+      if (this.caption && this.caption.length > 2 && this.displayCaption) {
+        return this.caption
+      } else if (
+        this.displayCaption &&
+        this.data &&
+        this.data.caption &&
+        this.data.caption.length > 2
+      ) {
+        return this.data.caption
+      }
+      return undefined
+    },
+    // reform the data object with the computed caption
+    theData(): ImageObject | undefined {
+      if (this.data) {
+        return {
+          ...this.data,
+          caption: this.theCaption
+        }
+      }
+      return undefined
+    },
+    hasCaptionArea(): boolean {
+      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>
+<template>
+  <div v-if="theData">
+    <MixinFancybox
+      v-if="theData.src"
+      :src="theData.original"
+      :caption="theData.caption"
+      :credit="theData.credit"
+      :detail-url="theData.detailUrl"
+    >
+      <BaseImagePlaceholder
+        :aspect-ratio="constrain ? '16:9' : 'none'"
+        dark-mode
+      >
+        <BaseImage
+          v-if="theData.src"
+          :src="theData.src.url"
+          :srcset="theData.srcSet"
+          :width="theData.src.width"
+          :height="theData.src.height"
+          :alt="theData.alt"
+          :image-class="!constrain ? 'w-full h-auto' : undefined"
+          :object-fit-class="constrain ? 'contain' : undefined"
+          loading="lazy"
+        />
+      </BaseImagePlaceholder>
+    </MixinFancybox>
+    <div
+      v-if="theData && hasCaptionArea"
+      class="lg:px-0 p-4 pb-0"
+    >
+      <BaseImageCaption :data="theData" />
+    </div>
+  </div>
+</template>

package/src/components/BlockImageCarousel/BlockImageCarousel.stories.js

@@ -0,0 +1,108 @@
+import BlockImageCarousel from './BlockImageCarousel.vue'
+
+export default {
+  title: 'Components/Blocks/BlockImageCarousel',
+  component: BlockImageCarousel,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="container"><story/></div>`
+    })
+  ],
+  argTypes: {
+    blockId: {
+      text: { type: 'string' },
+      required: false,
+      description:
+        'Fancybox: the block id is used to differentiate the fancybox of this carousel from others on the page. Generated by Wagtail.'
+    },
+    showTitle: {
+      text: { type: 'string' },
+      required: false,
+      description: "Fancybox: if image titles should be displayed in the carousel's fancybox"
+    }
+  },
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BlockImageCarouselData = [
+  {
+    image: {
+      alt: 'First image',
+      title: 'Title of First image',
+      caption: 'Lorem ipsum dolor sit amet.',
+      credit: 'NASA/JPL-Caltech',
+      detailUrl: '/image/placeholder/',
+      original: 'https://picsum.photos/1024/576',
+      src: {
+        height: '576',
+        url: 'https://picsum.photos/1024/576',
+        width: '1024'
+      },
+      srcSet: 'https://picsum.photos/320/180 320w, https://picsum.photos/1024/576 1024w'
+    }
+  },
+  {
+    image: {
+      alt: 'Second image',
+      title: 'Title of Second image',
+      caption: '',
+      credit: '',
+      detailUrl: '',
+      original: 'https://picsum.photos/1024/448',
+      src: {
+        height: '448',
+        url: 'https://picsum.photos/1024/448',
+        width: '1024'
+      },
+      srcSet: 'https://picsum.photos/320/140 320w, https://picsum.photos/1024/448 1024w'
+    }
+  },
+  {
+    image: {
+      alt: 'Third image',
+      title: 'Title of Third image',
+      caption: '',
+      credit: 'NASA/JPL',
+      detailUrl: '',
+      original: 'https://picsum.photos/400/800',
+      src: {
+        height: '800',
+        url: 'https://picsum.photos/400/800',
+        width: '400'
+      },
+      srcSet: 'https://picsum.photos/320/640 320w, https://picsum.photos/400/800 1024w'
+    }
+  },
+  {
+    image: {
+      alt: 'Fourth image',
+      title: 'Title of Fourth image',
+      caption:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>',
+      credit: 'NASA/JPL',
+      detailUrl: '/image/placeholder/',
+      original: 'https://picsum.photos/869/700',
+      src: {
+        height: '700',
+        url: 'https://picsum.photos/869/700',
+        width: '869'
+      },
+      srcSet: 'https://picsum.photos/320/258 320w, https://picsum.photos/869/700 1024w'
+    }
+  }
+]
+
+// stories
+export const Carousel = {
+  name: 'BlockImageCarousel',
+  args: {
+    blockId: 'ev106po56n',
+    showTitle: false,
+    items: BlockImageCarouselData
+  }
+}