refactor: expose a default slot for content in Card.vue

Author: Dobromir Hristov

src/components/Card.vue

@@ -38,11 +38,9 @@
       >
         {{ title }}
       </div>
-      <ContentNode
-        v-if="content"
-        :content="content"
-        :id="contentId"
-      />
+      <div v-if="$slots.default" class="card-content" :id="contentId">
+        <slot />
+      </div>
       <component
         v-if="linkText"
         :is="hasButton ? 'ButtonLink': 'div'"
@@ -70,7 +68,6 @@ export default {
     Reference,
     DiagonalArrowIcon,
     InlineChevronRightIcon,
-    ContentNode: () => import('docc-render/components/ContentNode.vue'),
     CardCover,
     ButtonLink,
   },
@@ -108,13 +105,10 @@ export default {
       type: String,
       required: false,
     },
-    content: {
-      type: Array,
-      required: false,
-    },
     url: {
       type: String,
       required: false,
+      default: '',
     },
     eyebrow: {
       type: String,
@@ -126,7 +120,7 @@ export default {
     },
     size: {
       type: String,
-      validator: s => s in CardSize,
+      validator: s => Object.prototype.hasOwnProperty.call(CardSize, s),
     },
     title: {
       type: String,
@@ -264,7 +258,7 @@ $content-margin: 4px;
   }
 }
 
-.content {
+.card-content {
   color: var(--color-card-content-text);
   margin-top: $content-margin;
 }

tests/unit/components/Card.spec.js

@@ -12,7 +12,6 @@ import { shallowMount } from '@vue/test-utils';
 import Card from 'docc-render/components/Card.vue';
 import CardSize from 'docc-render/constants/CardSize';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
-import ContentNode from 'docc-render/components/ContentNode.vue';
 import { flushPromises } from '../../../test-utils';
 
 const {
@@ -44,9 +43,6 @@ describe('Card', () => {
   const mountCard = options => shallowMount(Card, {
     propsData,
     provide,
-    stubs: {
-      ContentNode,
-    },
     ...options,
   });
 
@@ -188,20 +184,24 @@ describe('Card', () => {
     expect(h3.text()).toBe(propsData.title);
   });
 
-  it('renders a `ContentNode` when content is provided', async () => {
-    const content = [
-      {
-        type: 'paragraph',
-        inlineContent: [{ type: 'text', text: 'hello world' }],
+  it('renders content in the default slot', async () => {
+    const content = 'Foo bar baz';
+    const wrapper = mountCard({
+      slots: {
+        default: content,
       },
-    ];
-    const propsWithContent = { ...propsData, content };
-    const wrapper = mountCard({ propsData: propsWithContent });
+    });
+    await flushPromises();
+    const contentDiv = wrapper.find('.card-content');
+    expect(contentDiv.exists()).toBe(true);
+    expect(contentDiv.text()).toEqual(content);
+    expect(contentDiv.attributes('id')).toMatch(cardContentIdRE);
+  });
+
+  it('does not render the card-content, if no default slot provided', async () => {
+    const wrapper = mountCard();
     await flushPromises();
-    const node = wrapper.find(ContentNode);
-    expect(node.exists()).toBe(true);
-    expect(node.props('content')).toEqual(content);
-    expect(node.attributes('id')).toMatch(cardContentIdRE);
+    expect(wrapper.find('.card-content').exists()).toBe(false);
   });
 
   it('renders card as a `floatingStyle`', () => {