@explorer-1/vue 0.2.0 → 0.2.2

package/lib/main.ts

@@ -50,8 +50,8 @@ import BaseUnitToggle from './../src/components/BaseUnitToggle/BaseUnitToggle.vu
 import BaseVideo from './../src/components/BaseVideo/BaseVideo.vue'
 import BlockAnchor from './../src/components/BlockAnchor/BlockAnchor.vue'
 import BlockAudio from './../src/components/BlockAudio/BlockAudio.vue'
-import BlockCard from './../src/components/BlockCard/BlockCard.vue'
-import BlockCardGroup from './../src/components/BlockCardGroup/BlockCardGroup.vue'
+import BlockCardGridItem from './../src/components/BlockCardGridItem/BlockCardGridItem.vue'
+import BlockCardGrid from './../src/components/BlockCardGrid/BlockCardGrid.vue'
 import BlockCircleImageCard from './../src/components/BlockCircleImageCard/BlockCircleImageCard.vue'
 import BlockCta from './../src/components/BlockCta/BlockCta.vue'
 import BlockHeading from './../src/components/BlockHeading/BlockHeading.vue'
@@ -254,8 +254,8 @@ export {
   BaseVideo,
   BlockAnchor,
   BlockAudio,
-  BlockCard,
-  BlockCardGroup,
+  BlockCardGridItem,
+  BlockCardGrid,
   BlockCircleImageCard,
   BlockCta,
   BlockHeading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseTag/BaseTag.vue

@@ -10,8 +10,8 @@ const variantMap: Attributes = {
 
 const sizeMap: Attributes = {
   sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-base capitalize border-t py-2 px-3',
-  lg: 'text-lg capitalize border-t py-2 px-3'
+  md: 'text-base capitalize border-t py-1 px-3',
+  lg: 'text-lg capitalize border-t py-1 px-3'
 }
 
 interface BaseTagProps {

package/src/components/{BlockCardGroup/BlockCardGroup.stories.js → BlockCardGrid/BlockCardGrid.stories.js}

@@ -1,14 +1,15 @@
-import BlockCardGroup from './BlockCardGroup.vue'
+import BlockCardGrid from './BlockCardGrid.vue'
 
 export default {
-  title: 'Components/Blocks/BlockCardGroup',
-  component: BlockCardGroup,
+  title: 'Components/Blocks/BlockCardGrid',
+  component: BlockCardGrid,
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/
 }
 
-export const BlockCardGroupData = [
+export const BlockCardGridData = [
   {
-    type: 'Factoid 1',
+    label: '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.',
@@ -23,7 +24,7 @@ export const BlockCardGroupData = [
     }
   },
   {
-    type: 'Factoid 2',
+    label: 'Factoid 2',
     title: 'Nimble Limbs',
     description: 'The robot has four limbs, each with seven degrees of freedom.',
     image: {
@@ -34,17 +35,22 @@ export const BlockCardGroupData = [
         width: 800
       },
       srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    },
+    link: {
+      page: {
+        url: '#'
+      }
     }
   },
   {
-    type: 'Factoid 3',
+    label: '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',
+    label: 'Factoid 4',
     title: 'Nimble Limbs',
     description: 'The robot has four limbs, each with seven degrees of freedom.',
     image: {
@@ -58,14 +64,17 @@ export const BlockCardGroupData = [
     }
   },
   {
-    type: 'Factoid 5',
+    label: 'Factoid 5',
     title: 'Nimble Limbs',
     description: 'The robot has four limbs, each with seven degrees of freedom.',
-    image: null
+    image: null,
+    link: {
+      externalLink: '#'
+    }
   }
 ]
 
 export const BaseStory = {
-  name: 'BlockCardGroup',
-  args: { facts: BlockCardGroupData }
+  name: 'BlockCardGrid',
+  args: { cards: BlockCardGridData }
 }

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-if="cards"
+    class="BlockCardGrid"
+  >
+    <div
+      :class="`hidden md:grid md:grid-cols-2 lg:grid-cols-3 ${compact ? ' gap-5' : '3xl:grid-cols-4 gap-8'}`"
+    >
+      <BlockCardGridItem
+        v-for="(card, index) of cards"
+        :key="`item-${index}`"
+        class="col-span-1"
+        :label="card.label"
+        :title="card.title"
+        :description="card.description"
+        :image="card.image"
+        :link="card.link"
+      />
+    </div>
+    <MixinCarousel
+      class="md:hidden sm:px-10 sm:-ml-10 py-10 -mt-10 overflow-x-visible"
+      indent="col-1"
+      :slides-per-view="3"
+      no-links
+    >
+      <BlockCardGridItem
+        v-for="(card, index) of cards"
+        :key="index"
+        :label="card.label"
+        :title="card.title"
+        :text="card.description"
+        :image="card.image"
+        class="swiper-slide mb-5"
+      />
+    </MixinCarousel>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject, LinkObject } from '../../interfaces'
+import BlockCardGridItem from './../BlockCardGridItem/BlockCardGridItem.vue'
+import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
+
+interface CardGridItem {
+  title: string
+  label: string
+  description: string
+  image: Partial<ImageObject>
+  link?: LinkObject
+}
+
+export default defineComponent({
+  name: 'BlockCardGrid',
+  components: {
+    MixinCarousel,
+    BlockCardGridItem
+  },
+  props: {
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    cards: {
+      type: Array as PropType<CardGridItem[]>,
+      default: undefined
+    }
+  }
+})
+</script>

package/src/components/{BlockCard/BlockCard.stories.js → BlockCardGridItem/BlockCardGridItem.stories.js}

@@ -1,8 +1,9 @@
-import BlockCard from './BlockCard.vue'
+import BlockCardGridItem from './BlockCardGridItem.vue'
 
 export default {
-  title: 'Components/Blocks/BlockCard',
-  component: BlockCard,
+  title: 'Components/Cards/BlockCardGridItem',
+  component: BlockCardGridItem,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="lg:w-1/3"><story/></div>`
@@ -17,9 +18,9 @@ export default {
 }
 
 export const BlockCardData = {
-  type: 'Factoid',
+  label: 'Factoid',
   title: 'Nimble Limbs',
-  text: 'The robot has four limbs, each with seven degrees of freedom.',
+  description: 'The robot has four limbs, each with seven degrees of freedom.',
   image: {
     alt: 'Fourth image',
     src: {
@@ -28,7 +29,14 @@ export const BlockCardData = {
       width: 800
     },
     srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+  },
+  link: {
+    page: {
+      url: '#'
+    },
+    externalLink: null
   }
 }
 
-export const BaseStory = { name: 'BlockCard', args: BlockCardData }
+export const BaseStory = { name: 'BlockCardGridItem', args: BlockCardData }
+export const NoLink = { args: { ...BlockCardData, link: undefined } }

package/src/components/BlockCardGridItem/BlockCardGridItem.vue

@@ -0,0 +1,40 @@
+<template>
+  <BaseLink
+    v-if="link"
+    variant="none"
+    :to="link?.page?.url ? link.page.url : undefined"
+    :href="link?.externalLink ? link?.externalLink : undefined"
+    class="BlockCardGridItem group"
+    external-target-blank
+  >
+    <BlockCardGridItemElement
+      v-bind="$attrs"
+      :link="link"
+    />
+  </BaseLink>
+  <BlockCardGridItemElement
+    v-else
+    v-bind="$attrs"
+  />
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import type { LinkObject } from './../../interfaces'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BlockCardGridItemElement from './BlockCardGridItemElement.vue'
+
+export default defineComponent({
+  name: 'BlockCardGridItem',
+  components: {
+    BaseLink,
+    BlockCardGridItemElement
+  },
+  props: {
+    link: {
+      type: Object as PropType<LinkObject>,
+      required: false,
+      default: undefined
+    }
+  }
+})
+</script>

package/src/components/{BlockCard/BlockCard.vue → BlockCardGridItem/BlockCardGridItemElement.vue}

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="shadow-jpl relative h-full"
+    class="shadow-jpl relative h-full bg-white"
     :class="{ 'flex items-center min-h-32': !image }"
   >
     <div
@@ -19,18 +19,21 @@
           :width="image.src.width"
           :height="image.src.height"
           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"
         />
       </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"
-      />
+    <div class="px-6 py-6 ThemeVariantLight">
+      <template v-if="label">
+        <div class="text-primary text-subtitle">
+          {{ label }}
+        </div>
+        <hr
+          aria-hidden="true"
+          class="bg-primary text-primary w-8 h-2px border-0 my-2"
+        />
+      </template>
       <BaseHeading
         size="h5"
         level="h3"
@@ -38,41 +41,54 @@
       >
         {{ title }}
       </BaseHeading>
-      <p class="text-body-sm">{{ text }}</p>
+      <p class="text-body-sm">{{ description }}</p>
+      <div
+        v-if="link"
+        class="ThemeVariantLight w-full mt-1 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 text-2xl leading-normal transition-all duration-200 ease-in"
+      >
+        <IconArrow />
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { mixinGetSrcSet } from './../../utils/mixins'
+import type { LinkObject } from './../../interfaces'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import IconArrow from './../Icons/IconArrow.vue'
 
 export default defineComponent({
-  name: 'BlockCard',
+  name: 'BlockCardGridItemElement',
   components: {
     BaseImagePlaceholder,
     BaseImage,
-    BaseHeading
+    BaseHeading,
+    IconArrow
   },
   props: {
-    type: {
+    label: {
       type: String,
-      required: false,
-      default: 'Factoid'
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
-    text: {
+    description: {
       type: String,
-      required: false
+      default: undefined
     },
     image: {
       type: Object,
-      required: false
+      default: undefined
+    },
+    link: {
+      type: Object as PropType<LinkObject>,
+      default: undefined
     }
   },
   computed: {

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

@@ -2,8 +2,9 @@ import IconExternal from './../Icons/IconExternal.vue'
 import BlockCircleImageCard from './BlockCircleImageCard.vue'
 
 export default {
-  title: 'Components/Blocks/BlockCircleImageCard',
+  title: 'Components/Cards/BlockCircleImageCard',
   component: BlockCircleImageCard,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div class="relative max-w-xl mx-auto container"><story/></div>`

package/src/components/BlockInlineImage/BlockInlineImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="BlockInlineImage container mx-auto"
+    class="BlockInlineImage LayoutHelper container mx-auto"
   >
     <div class="lg:BaseGrid lg:px-0 px-4">
       <!-- the image -->

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

@@ -3,8 +3,9 @@
 import BlockLinkCard from './BlockLinkCard.vue'
 
 export default {
-  title: 'Components/Blocks/BlockLinkCard',
+  title: 'Components/Cards/BlockLinkCard',
   component: BlockLinkCard,
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   decorators: [
     () => ({

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -5,7 +5,7 @@
     :to="theItem.url ? theItem.url : undefined"
     :href="theItem.externalLink ? theItem.externalLink : undefined"
     class="BlockLinkCard group"
-    link-class="block pb-5"
+    :link-class="`block ${compact ? 'pb-3' : 'pb-5'}`"
     external-target-blank
   >
     <BaseImagePlaceholder
@@ -29,7 +29,7 @@
     </BaseImagePlaceholder>
 
     <div
-      class="transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform"
+      class="BlockLinkCard__CardContent 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'
       "
@@ -71,7 +71,7 @@
       </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"
+      class="BlockLinkCard__CardArrow ThemeVariantLight 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>
@@ -100,41 +100,50 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<Card>,
-      required: false
+      required: false,
+      default: undefined
     },
     // override props as needed
     // so we can use this component in search results
     url: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     externalLink: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     thumbnailImage: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     label: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     title: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     date: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     startDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     endDate: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     // if styling should be compact
     compact: {
@@ -144,7 +153,8 @@ export default defineComponent({
     // if a heading should be used and at what level
     headingLevel: {
       type: (String as PropType<HeadingLevel>) || null,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {
@@ -193,5 +203,15 @@ export default defineComponent({
   .text-subtitle.divide-x {
     @apply leading-none #{!important};
   }
+  .ThemeVariantDark & {
+    @apply bg-white;
+    .BlockLinkCard__CardContent,
+    .BlockLinkCard__CardArrow {
+      @apply px-6;
+    }
+    .BaseImagePlaceholder {
+      @apply bg-gray-mid-dark;
+    }
+  }
 }
 </style>

package/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -1,4 +1,3 @@
-\
 <template>
   <MixinCarousel
     v-if="hasContent"

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

@@ -3,13 +3,14 @@
 import BlockLinkTile from './BlockLinkTile.vue'
 
 export default {
-  title: 'Components/Blocks/BlockLinkTile',
+  title: 'Components/Cards/BlockLinkTile',
   component: BlockLinkTile,
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
     })
   ],
+  tags: ['!autodocs'],
   argTypes: {
     headingLevel: {
       description:
@@ -32,7 +33,7 @@ export default {
 export const BlockLinkTileData = {
   card: {
     url: '/topics/placeholder-slug-1',
-    title: 'How engineers at NASA-JPL persevered to develop a ventilator',
+    title: 'Lorem ipsum dolor',
     label: 'Solar System',
     thumbnailImage: {
       src: {

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

@@ -8,6 +8,7 @@ export default {
 
 export const BlockListCardsData = {
   blockType: 'ListBlock',
+  field: 'content_card_list',
   items: [
     {
       description:

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -3,6 +3,7 @@
     <BaseHeading
       v-if="data.heading"
       level="h2"
+      v-bind="$attrs"
       class="md:mb-8 mb-5"
     >
       {{ data.heading }}
@@ -43,7 +44,6 @@
 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'
 
@@ -63,6 +63,11 @@ export default defineComponent({
       type: Object as PropType<BlockRelatedLinksObject>,
       required: true,
       default: () => ({})
+    },
+    headingSize: {
+      type: String,
+      required: false,
+      default: undefined
     }
   },
   computed: {

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

@@ -1,3 +1,4 @@
+import { BlockCardGridData } from './../BlockCardGrid/BlockCardGrid.stories'
 import { BlockCtaData } from './../BlockCta/BlockCta.stories'
 import { BlockHeadingData } from './../BlockHeading/BlockHeading.stories'
 import { BlockImageCarouselData } from './../BlockImageCarousel/BlockImageCarousel.stories'
@@ -47,6 +48,7 @@ export const BlockStreamfieldTruncatedData = {
       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,
     BlockIframeEmbedData
   ]
 }
@@ -93,7 +95,12 @@ export const BlockStreamfieldData = {
       ...BlockInlineImageData.block,
       alignTo: 'left'
     },
-    BlockTableData
+    BlockTableData,
+    {
+      blockType: 'ListBlock',
+      field: 'card_grid',
+      items: BlockCardGridData
+    }
   ]
 }