Revert #40 and #683 (#690)

Author: mportiz08

src/components/ContentNode.vue

@@ -17,7 +17,7 @@ import CodeVoice from './ContentNode/CodeVoice.vue';
 import DictionaryExample from './ContentNode/DictionaryExample.vue';
 import EndpointExample from './ContentNode/EndpointExample.vue';
 import Figure from './ContentNode/Figure.vue';
-import Caption from './ContentNode/Caption.vue';
+import FigureCaption from './ContentNode/FigureCaption.vue';
 import InlineImage from './ContentNode/InlineImage.vue';
 import Reference from './ContentNode/Reference.vue';
 import Table from './ContentNode/Table.vue';
@@ -230,8 +230,8 @@ function renderNode(createElement, references) {
     if ((title && abstract.length) || abstract.length) {
       // if there is a `title`, it should be above, otherwise below
       figureContent.splice(title ? 0 : 1, 0,
-        createElement(Caption, {
-          props: { title, tag: 'figcaption', centered: !title },
+        createElement(FigureCaption, {
+          props: { title, centered: !title },
         }, renderChildren(abstract)));
     }
     return createElement(Figure, { props: { anchor } }, figureContent);
@@ -297,27 +297,18 @@ function renderNode(createElement, references) {
         renderChildren(node.inlineContent)
       ));
     }
-    case BlockType.table: {
-      const tableChildren = [];
-      if (node.metadata && node.metadata.anchor && node.metadata.title) {
-        tableChildren.push(
-          createElement(Caption,
-            { props: { title: node.metadata.title } },
-            renderChildren(node.metadata.abstract)),
-        );
+    case BlockType.table:
+      if (node.metadata && node.metadata.anchor) {
+        return renderFigure(node);
       }
-      tableChildren.push(renderTableChildren(
-        node.rows, node.header, node.extendedData, node.alignments,
-      ));
-      return createElement(
-        Table,
-        {
-          attrs: { id: node.metadata && node.metadata.anchor },
-          props: { spanned: !!node.extendedData },
+
+      return createElement(Table, {
+        props: {
+          spanned: !!node.extendedData,
         },
-        tableChildren,
-      );
-    }
+      }, (
+        renderTableChildren(node.rows, node.header, node.extendedData, node.alignments)
+      ));
     case BlockType.termList:
       return createElement('dl', {}, node.items.map(({ term, definition }) => [
         createElement('dt', {}, (

src/components/ContentNode/Caption.vue renamed to src/components/ContentNode/FigureCaption.vue

@@ -9,19 +9,19 @@
 -->
 
 <template>
-  <component :is="tag" class="caption" :class="{ centered }">
+  <figcaption class="caption" :class="{ centered }">
     <template v-if="title">
       <strong>{{ title }}</strong>&nbsp;<slot />
     </template>
     <template v-else>
       <slot />
     </template>
-  </component>
+  </figcaption>
 </template>
 
 <script>
 export default {
-  name: 'Caption',
+  name: 'FigureCaption',
   props: {
     title: {
       type: String,
@@ -31,11 +31,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    tag: {
-      type: String,
-      required: false,
-      default: () => 'caption',
-    },
   },
 };
 </script>
@@ -44,7 +39,7 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .caption {
-  @include font-styles(documentation-caption);
+  @include font-styles(documentation-figcaption);
 
   &:last-child {
     margin-top: var(--spacing-stacked-margin-large);
@@ -58,8 +53,4 @@ export default {
 /deep/ p {
   display: inline-block;
 }
-
-caption {
-  margin: 1rem 0;
-}
 </style>

src/styles/core/typography/_font-styles.scss

@@ -153,7 +153,7 @@ $font-styles: (
   documentation-code-listing-number: (
     large: 12_18_normal_compact_mono,
   ),
-  documentation-caption: (
+  documentation-figcaption: (
     large: 14_21,
   ),
   documentation-declaration-link: (

tests/unit/components/ContentNode.spec.js

@@ -16,7 +16,7 @@ import ContentNode from 'docc-render/components/ContentNode.vue';
 import DictionaryExample from 'docc-render/components/ContentNode/DictionaryExample.vue';
 import EndpointExample from 'docc-render/components/ContentNode/EndpointExample.vue';
 import Figure from 'docc-render/components/ContentNode/Figure.vue';
-import Caption from 'docc-render/components/ContentNode/Caption.vue';
+import FigureCaption from 'docc-render/components/ContentNode/FigureCaption.vue';
 import InlineImage from 'docc-render/components/ContentNode/InlineImage.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Table from 'docc-render/components/ContentNode/Table.vue';
@@ -112,6 +112,29 @@ describe('ContentNode', () => {
       expect(codeListing.props('content')).toEqual(listing.code);
       expect(codeListing.isEmpty()).toBe(true);
     });
+
+    it('renders a `Figure`/`Figcaption` with metadata', () => {
+      const metadata = {
+        anchor: '42',
+        title: 'Listing 42',
+        abstract: [{
+          type: 'paragraph',
+          inlineContent: [{ type: 'text', text: 'blah' }],
+        }],
+      };
+      const wrapper = mountWithItem({ ...listing, metadata });
+
+      const figure = wrapper.find(Figure);
+      expect(figure.exists()).toBe(true);
+      expect(figure.props('anchor')).toBe(metadata.anchor);
+      expect(figure.contains(CodeListing)).toBe(true);
+
+      const caption = figure.find(FigureCaption);
+      expect(caption.exists()).toBe(true);
+      expect(caption.props('title')).toBe(metadata.title);
+      expect(caption.contains('p')).toBe(true);
+      expect(caption.text()).toContain('blah');
+    });
   });
 
   describe('with type="endpointExample"', () => {
@@ -691,7 +714,7 @@ describe('ContentNode', () => {
       }, {})).not.toThrow();
     });
 
-    it('renders a `Figure`/`Caption` with metadata', () => {
+    it('renders a `Figure`/`FigureCaption` with metadata', () => {
       const metadata = {
         anchor: '42',
         title: 'Figure 42',
@@ -711,14 +734,14 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBe(metadata.anchor);
       expect(figure.contains(InlineImage)).toBe(true);
 
-      const caption = wrapper.find(Caption);
+      const caption = wrapper.find(FigureCaption);
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBe(metadata.title);
       expect(caption.text()).toContain('blah');
     });
 
-    it('renders a `Figure`/`Caption` without an anchor, with text under the image', () => {
+    it('renders a `Figure`/`FigureCaption` without an anchor, with text under the image', () => {
       const metadata = {
         abstract: [{
           type: 'paragraph',
@@ -736,7 +759,7 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBeFalsy();
       expect(figure.contains(InlineImage)).toBe(true);
 
-      const caption = wrapper.find(Caption);
+      const caption = wrapper.find(FigureCaption);
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBeFalsy();
@@ -746,9 +769,9 @@ describe('ContentNode', () => {
       expect(figure.html()).toMatchInlineSnapshot(`
         <figure-stub>
           <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
-          <caption-stub centered="true" tag="figcaption">
+          <figurecaption-stub centered="true">
             <p>blah</p>
-          </caption-stub>
+          </figurecaption-stub>
         </figure-stub>
       `);
     });
@@ -768,9 +791,9 @@ describe('ContentNode', () => {
       }, references);
       expect(wrapper.find(Figure).html()).toMatchInlineSnapshot(`
         <figure-stub>
-          <caption-stub title="foo" tag="figcaption">
+          <figurecaption-stub title="foo">
             <p>blah</p>
-          </caption-stub>
+          </figurecaption-stub>
           <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
         </figure-stub>
       `);
@@ -793,7 +816,7 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBe('foo-figure');
       expect(figure.contains(InlineImage)).toBe(true);
 
-      expect(wrapper.find(Caption).exists()).toBe(false);
+      expect(wrapper.find(FigureCaption).exists()).toBe(false);
     });
 
     it('renders within a `DeviceFrame`', () => {
@@ -869,7 +892,7 @@ describe('ContentNode', () => {
       }, {})).not.toThrow();
     });
 
-    it('renders a `Figure`/`Caption` with metadata', () => {
+    it('renders a `Figure`/`FigureCaption` with metadata', () => {
       const metadata = {
         anchor: 'foo',
         abstract: [{
@@ -888,16 +911,15 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBe('foo');
       expect(figure.contains(BlockVideo)).toBe(true);
 
-      const caption = wrapper.find(Caption);
+      const caption = wrapper.find(FigureCaption);
       expect(caption.exists()).toBe(true);
-      expect(caption.props('tag')).toBe('figcaption');
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBe(metadata.title);
       expect(caption.props('centered')).toBe(true);
       expect(caption.text()).toContain('blah');
     });
 
-    it('renders a `Figure`/`Caption` without an anchor, with text under the video', () => {
+    it('renders a `Figure`/`FigureCaption` without an anchor, with text under the video', () => {
       const metadata = {
         abstract: [{
           type: 'paragraph',
@@ -915,7 +937,7 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBeFalsy();
       expect(figure.contains(BlockVideo)).toBe(true);
 
-      const caption = wrapper.find(Caption);
+      const caption = wrapper.find(FigureCaption);
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBeFalsy();
@@ -925,9 +947,9 @@ describe('ContentNode', () => {
       expect(figure.html()).toMatchInlineSnapshot(`
         <figure-stub>
           <blockvideo-stub identifier="video.mp4"></blockvideo-stub>
-          <caption-stub centered="true" tag="figcaption">
+          <figurecaption-stub centered="true">
             <p>blah</p>
-          </caption-stub>
+          </figurecaption-stub>
         </figure-stub>
       `);
     });
@@ -1350,33 +1372,6 @@ describe('ContentNode', () => {
       expect(table.findAll('tbody tr td').length).toBe(4);
     });
 
-    it('renders a `Table` with metadata', () => {
-      const metadata = {
-        anchor: '42',
-        title: 'Listing 42',
-        abstract: [{
-          type: 'paragraph',
-          inlineContent: [{ type: 'text', text: 'blah' }],
-        }],
-      };
-
-      const wrapper = mountWithItem({
-        type: 'table',
-        header: TableHeaderStyle.none,
-        rows,
-        metadata,
-      });
-
-      const table = wrapper.find('.content').find(Table);
-      expect(table.exists()).toBe(true);
-      expect(table.attributes('id')).toBe(metadata.anchor);
-
-      const caption = wrapper.find(Caption);
-      expect(caption.exists()).toBe(true);
-      expect(caption.props('title')).toBe(metadata.title);
-      expect(caption.text()).toContain('blah');
-    });
-
     it('renders header="both" style tables', () => {
       const wrapper = mountWithItem({
         type: 'table',
@@ -1415,6 +1410,35 @@ describe('ContentNode', () => {
       expect(table.findAll('tbody tr td').length).toBe(2);
     });
 
+    it('renders a `Figure`/`FigureCaption` with metadata', () => {
+      const metadata = {
+        anchor: '42',
+        title: 'Table 42',
+        abstract: [{
+          type: 'paragraph',
+          inlineContent: [{ type: 'text', text: 'blah' }],
+        }],
+      };
+      const wrapper = mountWithItem({
+        type: 'table',
+        header: TableHeaderStyle.none,
+        rows,
+        metadata,
+      });
+
+      const figure = wrapper.find(Figure);
+      expect(figure.exists()).toBe(true);
+      expect(figure.props('anchor')).toBe(metadata.anchor);
+      expect(figure.contains(Table)).toBe(true);
+
+      const caption = figure.find(FigureCaption);
+      expect(caption.exists()).toBe(true);
+      expect(caption.props('title')).toBe(metadata.title);
+      expect(caption.props('centered')).toBe(false);
+      expect(caption.contains('p')).toBe(true);
+      expect(caption.text()).toContain('blah');
+    });
+
     describe('and column/row spanning', () => {
       // <table>
       //   <tr>

tests/unit/components/ContentNode/Caption.spec.js renamed to tests/unit/components/ContentNode/FigureCaption.spec.js

@@ -9,37 +9,30 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import Caption from '@/components/ContentNode/Caption.vue';
+import FigureCaption from 'docc-render/components/ContentNode/FigureCaption.vue';
 
-describe('Caption', () => {
-  it('renders a <caption> with the title and slot content', () => {
+describe('FigureCaption', () => {
+  it('renders a <figcaption> with the title and slot content', () => {
     const propsData = { title: 'Figure 1' };
     const slots = { default: '<p>Blah</p>' };
-    const wrapper = shallowMount(Caption, { propsData, slots });
+    const wrapper = shallowMount(FigureCaption, { propsData, slots });
 
-    expect(wrapper.is('caption')).toBe(true);
-    expect(wrapper.text()).toMatch(/Figure 1\sBlah/);
+    expect(wrapper.is('figcaption')).toBe(true);
+    expect(wrapper.text()).toBe('Figure 1\u00a0Blah');
   });
 
   it('renders a <figcaption> with slot content only', () => {
     const slots = { default: '<p>Blah</p>' };
-    const wrapper = shallowMount(Caption, { slots });
+    const wrapper = shallowMount(FigureCaption, { slots });
 
-    expect(wrapper.is('caption')).toBe(true);
+    expect(wrapper.is('figcaption')).toBe(true);
     expect(wrapper.text()).toBe('Blah');
     expect(wrapper.text()).not.toBe('\u00a0Blah');
   });
 
   it('renders a <figcaption> centered', () => {
     const slots = { default: '<p>Blah</p>' };
-    const wrapper = shallowMount(Caption, { slots, propsData: { centered: true } });
+    const wrapper = shallowMount(FigureCaption, { slots, propsData: { centered: true } });
     expect(wrapper.classes()).toContain('centered');
   });
-
-  it('renders a <figcaption> if tag is `figcaption`', () => {
-    const propsData = { title: 'Figure 1', tag: 'figcaption' };
-    const wrapper = shallowMount(Caption, { propsData });
-
-    expect(wrapper.is('figcaption')).toBe(true);
-  });
 });