@explorer-1/vue 0.0.0

package/src/components/BlockCard/BlockCard.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="shadow-jpl relative h-full"
+    :class="{ 'flex items-center min-h-32': !image }"
+  >
+    <div
+      v-if="image"
+      class="h-auto"
+    >
+      <BaseImagePlaceholder
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <BaseImage
+          v-if="image.src"
+          :src="image.src.url"
+          :srcset="theSrcSet"
+          :alt="image.alt"
+          :width="image.src.width"
+          :height="image.src.height"
+          object-fit-class="cover"
+          loading="lazy"
+        />
+      </BaseImagePlaceholder>
+    </div>
+    <div class="px-6 py-6">
+      <div class="text-primary text-subtitle">
+        {{ type }}
+      </div>
+      <hr
+        aria-hidden="true"
+        class="bg-primary text-primary w-8 h-2px border-0 my-2"
+      />
+      <BaseHeading
+        size="h5"
+        level="h3"
+        class="mt-4 mb-2"
+      >
+        {{ title }}
+      </BaseHeading>
+      <p class="text-body-sm">{{ text }}</p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetSrcSet } from './../../utils/mixins'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'BlockCard',
+  components: {
+    BaseImagePlaceholder,
+    BaseImage,
+    BaseHeading
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'Factoid'
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    text: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theSrcSet() {
+      return this.image
+        ? mixinGetSrcSet(this.image)
+          ? mixinGetSrcSet(this.image)
+          : this.image.srcSet
+        : undefined
+    }
+  }
+})
+</script>

package/src/components/BlockCardGroup/BlockCardGroup.stories.js

@@ -0,0 +1,71 @@
+import BlockCardGroup from './BlockCardGroup.vue'
+
+export default {
+  title: 'Components/Blocks/BlockCardGroup',
+  component: BlockCardGroup,
+  excludeStories: /.*Data$/
+}
+
+export const BlockCardGroupData = [
+  {
+    type: 'Factoid 1',
+    title: 'Nimble Limbs',
+    description:
+      'The robot has four limbs, each with seven degrees of freedom. The robot has four limbs, each with seven degrees of freedom. The robot has four limbs, each with seven degrees of freedom.',
+    image: {
+      alt: 'Fourth image',
+      src: {
+        height: 400,
+        url: 'https://picsum.photos/800/400',
+        width: 800
+      },
+      srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    }
+  },
+  {
+    type: 'Factoid 2',
+    title: 'Nimble Limbs',
+    description: 'The robot has four limbs, each with seven degrees of freedom.',
+    image: {
+      alt: 'Fourth image',
+      src: {
+        height: 400,
+        url: 'https://picsum.photos/800/400',
+        width: 800
+      },
+      srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    }
+  },
+  {
+    type: 'Factoid 3',
+    title: 'Nimble Limbs',
+    description:
+      'Proin sapien nulla, consequat et aliquam tristique, sollicitudin vitae lorem. Etiam nec vestibulum ante, semper blandit tortor. Nam id bibendum leo. Suspendisse a cursus felis, eget tristique nibh. Proin facilisis tortor eget pulvinar cursus.',
+    image: null
+  },
+  {
+    type: 'Factoid 4',
+    title: 'Nimble Limbs',
+    description: 'The robot has four limbs, each with seven degrees of freedom.',
+    image: {
+      alt: 'Fourth image',
+      src: {
+        height: 400,
+        url: 'https://picsum.photos/800/400',
+        width: 800
+      },
+      srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    }
+  },
+  {
+    type: 'Factoid 5',
+    title: 'Nimble Limbs',
+    description: 'The robot has four limbs, each with seven degrees of freedom.',
+    image: null
+  }
+]
+
+export const Group = {
+  name: 'BlockCardGroup',
+  args: { facts: BlockCardGroupData }
+}

package/src/components/BlockCardGroup/BlockCardGroup.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="facts"
+    class="BlockCardGroup"
+  >
+    <div class="md:grid md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 hidden gap-8">
+      <BlockCard
+        v-for="(fact, index) of facts"
+        :key="`fact-${index}`"
+        class="col-span-1"
+        :type="fact.type"
+        :title="fact.title"
+        :text="fact.description"
+        :image="fact.image"
+      />
+    </div>
+    <MixinCarousel
+      class="md:hidden sm:px-10 sm:-ml-10 py-10 -mt-10"
+      indent="col-1"
+      :slides-per-view="3"
+      no-links
+    >
+      <BlockCard
+        v-for="(fact, index) of facts"
+        :key="index"
+        :title="fact.title"
+        :text="fact.description"
+        :image="fact.image"
+        class="swiper-slide mb-5"
+      />
+    </MixinCarousel>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import BlockCard from './../BlockCard/BlockCard.vue'
+import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
+
+interface Fact {
+  title: string
+  type: string
+  description: string
+  image: Partial<ImageObject>
+}
+
+export default defineComponent({
+  name: 'BlockCardGroup',
+  components: {
+    MixinCarousel,
+    BlockCard
+  },
+  props: {
+    facts: {
+      type: Array as PropType<Fact[]>,
+      required: false
+    }
+  }
+})
+</script>

package/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js

@@ -0,0 +1,55 @@
+import IconExternal from './../Icons/IconExternal.vue'
+import BlockCircleImageCard from './BlockCircleImageCard.vue'
+
+export default {
+  title: 'Components/Blocks/BlockCircleImageCard',
+  component: BlockCircleImageCard,
+  decorators: [
+    () => ({
+      template: `<div class="relative max-w-xl mx-auto container"><story/></div>`
+    })
+  ],
+  argTypes: {
+    imageOnRight: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  parameters: {
+    slots: {
+      icon: {
+        description: 'Icon slot',
+        components: { IconExternal },
+        template: `<IconExternal v-if="args.icon" />`
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BlockCircleImageCardData = {
+  title: 'First Flight of Technology for Returning Warheads from Space',
+  label: 'September 20, 1956',
+  secondaryLabel: 'Re-entry test vehicle program',
+  image: {
+    src: {
+      url: 'https://picsum.photos/130/130',
+      width: 130,
+      height: 130
+    },
+    srcSet: 'https://picsum.photos/90/90 320w, https://picsum.photos/130/130 1024w',
+    alt: 'Alt text for image'
+  },
+  imageOnRight: true,
+  icon: true
+}
+
+export const Default = {
+  args: {
+    ...BlockCircleImageCardData,
+    icon: false
+  }
+}
+
+export const WithIcon = { args: BlockCircleImageCardData }

package/src/components/BlockCircleImageCard/BlockCircleImageCard.vue

@@ -0,0 +1,120 @@
+<template>
+  <component
+    :is="tag"
+    class="BlockCircleImageCard bg-white shadow-jpl h-full flex-grow"
+    :class="{ imageOnRight: imageOnRight }"
+    @click="$emit('click')"
+  >
+    <BaseImagePlaceholder
+      v-if="image"
+      transparent-mode
+    >
+      <!-- It’s important the image has no alt text so we can invert the card’s visual order without it changing the reading order. -->
+      <BaseImage
+        v-if="image.src"
+        :src="image.src.url"
+        :srcset="theSrcSet"
+        alt=""
+        :width="image.src.width"
+        :height="image.src.height"
+        image-class="rounded-full border-4 border-white"
+        object-fit-class="cover"
+        loading="lazy"
+      />
+    </BaseImagePlaceholder>
+    <div class="p-8 flex-grow">
+      <div class="flex">
+        <div class="text-gray-dark text-subtitle mb-3">
+          {{ label }}
+        </div>
+        <span class="ml-auto">
+          <slot name="icon"></slot>
+        </span>
+      </div>
+      <div class="text-gray-mid-dark text-subtitle">
+        {{ secondaryLabel }}
+      </div>
+      <BaseHeading
+        size="h5"
+        level="h3"
+        class="mt-3"
+      >
+        {{ title }}
+      </BaseHeading>
+    </div>
+  </component>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetSrcSet } from './../../utils/mixins'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'BlockCircleImageCard',
+  components: {
+    BaseImagePlaceholder,
+    BaseImage,
+    BaseHeading
+  },
+  props: {
+    tag: {
+      type: String,
+      required: false,
+      default: 'div'
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    secondaryLabel: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    imageOnRight: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    theSrcSet() {
+      return this.image
+        ? mixinGetSrcSet(this.image)
+          ? mixinGetSrcSet(this.image)
+          : this.image.srcSet
+        : undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockCircleImageCard';
+
+@media (forced-colors: active) {
+  .BlockCircleImageCard {
+    border: 1px solid;
+  }
+}
+
+.BlockCircleImageCard {
+  @apply md:z-40;
+}
+
+.BlockCircleImageCard .IconExternal {
+  @apply w-6 h-6 text-gray-mid-dark;
+}
+
+.BlockCircleImageCard .IconPlay {
+  @apply w-7 h-7 bg-jpl-red text-white;
+}
+</style>

package/src/components/BlockCta/BlockCta.stories.js

@@ -0,0 +1,35 @@
+import BlockCta from './BlockCta.vue'
+
+export default {
+  title: 'Components/Blocks/BlockCta',
+  component: BlockCta,
+  excludeStories: /.*Data$/
+}
+
+// data
+export const BlockCtaData = {
+  blockType: 'CTABlock',
+  heading: 'Sign up to our newsletter to get the latest JPL News',
+  text: 'Sign Up',
+  page: {
+    url: '/placeholder'
+  },
+  externalLink: ''
+}
+
+export const Default = {
+  args: {
+    data: BlockCtaData
+  }
+}
+
+export const ExternalLink = {
+  args: {
+    data: {
+      heading: BlockCtaData.heading,
+      text: BlockCtaData.text,
+      page: '',
+      externalLink: 'http://www.jpl.nasa.gov'
+    }
+  }
+}

package/src/components/BlockCta/BlockCta.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="bg-gray-light edu:bg-stars edu:bg-primary md:mx-0 sm:py-8 md:py-10 md:px-0 sm:mx-20 px-6 py-6 text-center"
+  >
+    <div class="md:mx-16 xl:mx-24">
+      <p class="text-h6 edu:text-white edu:font-extrabold">{{ data.heading }}</p>
+    </div>
+    <BaseButton
+      v-if="data.page"
+      :variant="buttonVariant"
+      :to="data.page.url"
+      class="md:mt-5 md:mb-2 mt-4 mb-1"
+    >
+      {{ data.text }}
+    </BaseButton>
+    <BaseButton
+      v-else-if="data.externalLink"
+      :variant="buttonVariant"
+      :href="data.externalLink"
+      class="md:mt-5 md:mb-2 mt-4 mb-1"
+    >
+      {{ data.text }}
+      <template #icon><IconExternal class="ml-2 text-sm" /></template>
+      <!-- TODO: replace with external link icon once icons are available -->
+    </BaseButton>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+
+export default defineComponent({
+  name: 'BlockCta',
+  components: {
+    BaseButton,
+    IconExternal
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    buttonVariant() {
+      return this.themeStore.theme === 'ThemeEdu' ? 'dark' : 'primary'
+    }
+  }
+})
+</script>

package/src/components/BlockHeading/BlockHeading.stories.js

@@ -0,0 +1,22 @@
+import BlockHeading from './BlockHeading.vue'
+
+export default {
+  title: 'Components/Blocks/BlockHeading',
+  component: BlockHeading,
+  excludeStories: /.*Data$/
+}
+
+export const BlockHeadingData = {
+  blockType: 'HeadingBlock',
+  heading: 'Heading Text',
+  level: 'h3',
+  size: 'h3'
+}
+
+// stories
+export const Heading = {
+  name: 'BlockHeading',
+  args: {
+    data: BlockHeadingData
+  }
+}

package/src/components/BlockHeading/BlockHeading.vue

@@ -0,0 +1,27 @@
+<template>
+  <BaseHeading
+    v-if="data"
+    :level="data.level"
+    :size="data.size"
+  >
+    {{ data.heading }}
+  </BaseHeading>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'BlockHeading',
+  components: {
+    BaseHeading
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

package/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js

@@ -0,0 +1,40 @@
+import BlockIframeEmbed from './BlockIframeEmbed.vue'
+
+export default {
+  title: 'Components/Blocks/BlockIframeEmbed',
+  component: BlockIframeEmbed,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="mx-auto max-w-screen-md"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BlockIframeEmbedData = {
+  blockType: 'IframeEmbedBlock',
+  title: 'Eyes Perserverance Embed',
+  caption: `
+    <p>With three giant blades stretching out some 66 feet (20 meters) from its cylindrical, six-sided body, the Juno spacecraft is a dynamic engineering marvel, spinning to keep itself stable as it makes oval-shaped orbits around Jupiter. View the full interactive experience at <a href="https://eyes.nasa.gov/apps/orrery/#/home">Eyes on the Solar System</a>.</p>
+  `,
+  url: `https://eyes.nasa.gov/apps/orrery/#/sc_perseverance`
+}
+
+export const Default = {
+  args: {
+    data: BlockIframeEmbedData
+  }
+}
+export const LazyLoad = {
+  args: {
+    data: BlockIframeEmbedData
+  },
+  decorators: () => ({
+    template: `<div style="padding-top:3000px"><story/></div>`
+  })
+}

package/src/components/BlockIframeEmbed/BlockIframeEmbed.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="data">
+    <template v-if="data.height">
+      <iframe
+        v-if="data.url"
+        ref="BlockIframeEmbed"
+        loading="lazy"
+        class="w-full border-none"
+        :class="{ lazyload: !lazyNative }"
+        :title="data.title"
+        :data-src="data.url"
+        width="90%"
+        :height="data.height"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    </template>
+    <template v-else>
+      <BaseImagePlaceholder
+        v-if="data.url"
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <div>
+          <iframe
+            ref="BlockIframeEmbed"
+            loading="lazy"
+            class="w-full border-none"
+            :class="{ lazyload: !lazyNative }"
+            :title="data.title"
+            :data-src="data.url"
+            width="90%"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </BaseImagePlaceholder>
+    </template>
+    <div
+      v-if="data.caption && data.caption.length > 2"
+      class="lg:px-0 p-4 pb-0"
+    >
+      <BaseImageCaption :data="data" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+
+export default defineComponent({
+  name: 'BlockIframeEmbed',
+  components: { BaseImageCaption, BaseImagePlaceholder },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      lazyNative: true
+    }
+  },
+  mounted() {
+    this.featureDetectIframeLazyLoad()
+  },
+  methods: {
+    featureDetectIframeLazyLoad() {
+      if ('loading' in HTMLIFrameElement.prototype) {
+        const iframe = this.$refs.BlockIframeEmbed as HTMLIFrameElement
+        this.lazyNative = true
+        // move data-src attribute to src
+        if (iframe.dataset.src) {
+          iframe.src = iframe.dataset.src
+        }
+      } else {
+        this.lazyNative = false
+      }
+    }
+  }
+})
+</script>