@explorer-1/vue 0.2.1 → 0.2.3

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.1",
+  "version": "0.2.3",
   "private": false,
   "publishConfig": {
     "access": "public"

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.',
@@ -20,10 +21,14 @@ export const BlockCardGroupData = [
         width: 800
       },
       srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    },
+    link: {
+      page: null,
+      externalLink: ''
     }
   },
   {
-    type: 'Factoid 2',
+    label: 'Factoid 2',
     title: 'Nimble Limbs',
     description: 'The robot has four limbs, each with seven degrees of freedom.',
     image: {
@@ -34,17 +39,27 @@ export const BlockCardGroupData = [
         width: 800
       },
       srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    },
+    link: {
+      page: {
+        url: '#'
+      },
+      externalLink: ''
     }
   },
   {
-    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
+    image: null,
+    link: {
+      page: null,
+      externalLink: ''
+    }
   },
   {
-    type: 'Factoid 4',
+    label: 'Factoid 4',
     title: 'Nimble Limbs',
     description: 'The robot has four limbs, each with seven degrees of freedom.',
     image: {
@@ -55,17 +70,25 @@ export const BlockCardGroupData = [
         width: 800
       },
       srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+    },
+    link: {
+      page: null,
+      externalLink: ''
     }
   },
   {
-    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: '#',
+      page: null
+    }
   }
 ]
 
 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?.page || link?.externalLink"
+    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}

@@ -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 ThemeVariantLight">
-      <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"
-      />
+      <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,43 +41,53 @@
       >
         {{ 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,
       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
     }
   },

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/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/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/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'
@@ -94,7 +95,12 @@ export const BlockStreamfieldData = {
       ...BlockInlineImageData.block,
       alignTo: 'left'
     },
-    BlockTableData
+    BlockTableData,
+    {
+      blockType: 'ListBlock',
+      field: 'card_grid',
+      items: BlockCardGridData
+    }
   ]
 }
 

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -33,7 +33,7 @@
       />
 
       <LayoutHelper
-        v-else-if="block.blockType == 'ListBlock'"
+        v-else-if="block.blockType == 'ListBlock' && block.field === 'content_card_list'"
         :key="`listBlock${index}`"
         indent="col-3"
         class="lg:mb-18 mb-10"
@@ -186,6 +186,15 @@
         :data="block"
       />
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'ListBlock' && block.field === 'card_grid'"
+        :key="`gridBlock${index}`"
+        indent="col-1"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockCardGrid :cards="block.items" />
+      </LayoutHelper>
+
       <div
         v-else
         :key="index"
@@ -199,10 +208,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { ImageObject } from '../../interfaces'
+import type { BlockData, ImageObject } from '../../interfaces'
 import type { BlockData as VideoBlockEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import type { BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import BlockCardGrid from './../BlockCardGrid/BlockCardGrid.vue'
 import BlockCta from './../BlockCta/BlockCta.vue'
 import BlockHeading from './../BlockHeading/BlockHeading.vue'
 import BlockImage from './../BlockImage/BlockImage.vue'
@@ -233,8 +243,7 @@ export const variants: Variants = {
   fluid: '-fluid'
 }
 
-export interface StreamfieldBlockData {
-  blockType: string
+export interface StreamfieldBlockData extends BlockData {
   id: string
   fullBleed: boolean
   heading: string
@@ -256,6 +265,7 @@ export default defineComponent({
   name: 'BlockStreamfield',
   components: {
     LayoutHelper,
+    BlockCardGrid,
     BlockCta,
     BlockHeading,
     BlockImage,

package/src/components/LayoutHelper/LayoutHelper.vue

@@ -20,6 +20,10 @@ export default defineComponent({
       required: false,
       default: 'col-1',
       validator: (prop: string): boolean => Object.keys(indents).includes(prop)
+    },
+    fullBleed: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -31,7 +35,9 @@ export default defineComponent({
 </script>
 <template>
   <div class="LayoutHelper BaseGrid container mx-auto">
-    <div :class="theWidth + ' col-start-1 col-end-13 lg:px-0 px-4 relative'">
+    <div
+      :class="`${theWidth} col-start-1 col-end-13 lg:px-0 ${fullBleed ? 'px-0' : 'px-4'} relative`"
+    >
       <slot></slot>
     </div>
   </div>

package/src/docs/overviews/blocks.docs.mdx.disabled

@@ -2,8 +2,8 @@
 import { Meta } from '@storybook/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import _ as BlockAccordionStories from './../../components/BlockAccordion/BlockAccordion.stories'
-import _ as BlockCardGroupStories from './../../components/BlockCardGroup/BlockCardGroup.stories'
-import _ as BlockCardStories from './../../components/BlockCard/BlockCard.stories'
+import _ as BlockCardGridStories from './../../components/BlockCardGrid/BlockCardGrid.stories'
+import _ as BlockCardStories from './../../components/BlockCardGridItem/BlockCardGridItem.stories'
 import _ as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'
 import _ as BlockIframeEmbedStories from './../../components/BlockIframeEmbed/BlockIframeEmbed.stories'
 import _ as BlockImageCarouselStories from './../../components/BlockImageCarousel/BlockImageCarousel.stories'
@@ -88,11 +88,11 @@ Reserved for the top of the page. Learn more about our heroes on the [heroes ove
       fullWidth: true
     },
     {
-      heading: 'BlockCardGroup',
+      heading: 'BlockCardGrid',
       customDescription:
         'A collection of smaller cards that support images, labels, headings, and descriptions, laid out in a grid on medium and larger screens, or in a carousel on small screens.',
-      meta: BlockCardGroupStories,
-      path: '/docs/components-blocks-blockcardgroup--docs',
+      meta: BlockCardGridStories,
+      path: '/docs/components-blocks-BlockCardGrid--docs',
       canvasClass: 'sbdocs-inline-height',
       fullWidth: true
     },
@@ -161,9 +161,9 @@ Reserved for the top of the page. Learn more about our heroes on the [heroes ove
 <ComponentList
   components={[
     {
-      heading: 'BlockCard',
+      heading: 'BlockCardGridItem',
       meta: BlockCardStories,
-      path: '/docs/components-blocks-blockcard--docs'
+      path: '/docs/components-blocks-BlockCardGridItem--docs'
     },
     {
       heading: 'BlockLinkCard',

package/src/docs/overviews/cards.docs.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BlockCardGridItemStories from './../../components/BlockCardGridItem/BlockCardGridItem.stories'
+import * as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'
+import * as BlockLinkCardStories from './../../components/BlockLinkCard/BlockLinkCard.stories'
+import * as BlockLinkTileStories from './../../components/BlockLinkTile/BlockLinkTile.stories'
+
+<Meta title="Components/Cards/Overview" />
+
+# Card Components
+
+- [Carousel Cards](#carousel)
+- [Grid Cards](#grid)
+- [Reserved-use Cards](#reserved)
+
+  <br />
+
+  <br />
+
+<span id="carousel"></span>
+
+## Carousel Cards
+
+These cards are interchangeable within `MixinCarousel`.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockLinkCard',
+      meta: BlockLinkCardStories,
+      path: '/story/components-cards-blocklinkcard--base-story',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockLinkTile',
+      meta: BlockLinkTileStories,
+      path: '/story/components-cards-blocklinktile--base-story',
+      fullWidth: true
+    }
+  ]}
+/>
+
+<span id="carousel"></span>
+
+## Grid Cards
+
+These cards can be used to create a grid of cards.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCardGridItem',
+      meta: BlockCardGridItemStories,
+      customDescription: 'The link is optional',
+      path: '/story/components-cards-blockcardgriditem--base-story',
+      fullWidth: true
+    }
+  ]}
+/>
+
+## Reserved-use Cards
+
+These cards were built for specific use-cases, but that does not exclude them from being re-used for other purposes.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCircleImageCard',
+      meta: BlockCircleImageCardStories,
+      path: '/story/components-cards-blockcircleimagecard--base-story',
+      fullWidth: true,
+      customDescription: 'Used in the Timeline'
+    }
+  ]}
+/>

package/src/interfaces.ts

@@ -6,6 +6,8 @@ export interface BreadcrumbPathObject {
 
 export interface BlockData {
   blockType: string
+  field?: string
+  items?: any[]
 }
 export interface ImageSrcObject {
   url: string
@@ -80,12 +82,15 @@ export interface Card {
   thumbnailImage?: Partial<ImageObject>
 }
 
-export interface RelatedLinkObject {
+export interface LinkObject {
   page: {
     url: string
   } | null
-  document: { url: string } | null
   externalLink: string | null
+}
+
+export interface RelatedLinkObject extends LinkObject {
+  document: { url: string } | null
   text: string | null
 }
 

package/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.stories.js

@@ -1,6 +1,6 @@
 import { HeroLargeData } from './../../../components/HeroLarge/HeroLarge.stories.js'
 import { RoboticsDetailStatsData } from './../../../components/RoboticsDetailStats/RoboticsDetailStats.stories.js'
-import { BlockCardGroupData } from './../../../components/BlockCardGroup/BlockCardGroup.stories.js'
+import { BlockCardGridData } from './../../../components/BlockCardGrid/BlockCardGrid.stories.js'
 import { BlockLinkTileCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
@@ -37,7 +37,7 @@ export const Template = {
       ...BlockStreamfieldTruncatedData,
       relatedLinks: [BlockRelatedLinksData.data],
       moreRobots: BlockLinkTileCarouselData,
-      facts: BlockCardGroupData
+      facts: BlockCardGridData
     }
   }
 }

package/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue

@@ -36,10 +36,10 @@
         </p>
       </div>
       <!-- facts -->
-      <BlockCardGroup
+      <BlockCardGrid
         v-if="data.facts"
         class="3xl:col-end-13 xl:col-end-11 md:px-4 lg:px-0 relative col-start-2 col-end-13 px-0 mt-12"
-        :facts="data.facts"
+        :cards="data.facts"
       />
     </div>
 
@@ -73,7 +73,7 @@ import { defineComponent } from 'vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import RoboticsDetailStats from './../../../components/RoboticsDetailStats/RoboticsDetailStats.vue'
-import BlockCardGroup from './../../../components/BlockCardGroup/BlockCardGroup.vue'
+import BlockCardGrid from './../../../components/BlockCardGrid/BlockCardGrid.vue'
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
@@ -85,7 +85,7 @@ export default defineComponent({
     BaseHeading,
     HeroLarge,
     RoboticsDetailStats,
-    BlockCardGroup,
+    BlockCardGrid,
     BlockRelatedLinks,
     BlockLinkCarousel,
     LayoutHelper,

package/src/components/BlockCardGroup/BlockCardGroup.vue

@@ -1,61 +0,0 @@
-<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>