[AX] <table> should be taken out of <figure> and the <figcaption> should become the table’s <caption> (#40)

* fix: AX on tables

* Fix src/components/ContentNode/Caption.vue

Co-authored-by: Dobromir Hristov <dobromir92@gmail.com>

* [rdar://30234820] fix: linter

* [rdar://30234820] fix: caption margin

---------

Co-authored-by: Dobromir Hristov <dobromir92@gmail.com>

Author: marinaaisa

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 FigureCaption from './ContentNode/FigureCaption.vue';
+import Caption from './ContentNode/Caption.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(FigureCaption, {
-          props: { title, centered: !title },
+        createElement(Caption, {
+          props: { title, tag: 'figcaption', centered: !title },
         }, renderChildren(abstract)));
     }
     return createElement(Figure, { props: { anchor } }, figureContent);
@@ -297,18 +297,27 @@ function renderNode(createElement, references) {
         renderChildren(node.inlineContent)
       ));
     }
-    case BlockType.table:
-      if (node.metadata && node.metadata.anchor) {
-        return renderFigure(node);
+    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)),
+        );
       }
-
-      return createElement(Table, {
-        props: {
-          spanned: !!node.extendedData,
-        },
-      }, (
-        renderTableChildren(node.rows, node.header, node.extendedData, node.alignments)
+      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 },
+        },
+        tableChildren,
+      );
+    }
     case BlockType.termList:
       return createElement('dl', {}, node.items.map(({ term, definition }) => [
         createElement('dt', {}, (

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

@@ -9,19 +9,19 @@
 -->
 
 <template>
-  <figcaption class="caption" :class="{ centered }">
+  <component :is="tag" class="caption" :class="{ centered }">
     <template v-if="title">
       <strong>{{ title }}</strong>&nbsp;<slot />
     </template>
     <template v-else>
       <slot />
     </template>
-  </figcaption>
+  </component>
 </template>
 
 <script>
 export default {
-  name: 'FigureCaption',
+  name: 'Caption',
   props: {
     title: {
       type: String,
@@ -31,6 +31,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    tag: {
+      type: String,
+      required: false,
+      default: () => 'caption',
+    },
   },
 };
 </script>
@@ -53,4 +58,8 @@ 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-figcaption: (
+  documentation-caption: (
     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 FigureCaption from 'docc-render/components/ContentNode/FigureCaption.vue';
+import Caption from 'docc-render/components/ContentNode/Caption.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,29 +112,6 @@ 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"', () => {
@@ -714,7 +691,7 @@ describe('ContentNode', () => {
       }, {})).not.toThrow();
     });
 
-    it('renders a `Figure`/`FigureCaption` with metadata', () => {
+    it('renders a `Figure`/`Caption` with metadata', () => {
       const metadata = {
         anchor: '42',
         title: 'Figure 42',
@@ -734,14 +711,14 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBe(metadata.anchor);
       expect(figure.contains(InlineImage)).toBe(true);
 
-      const caption = wrapper.find(FigureCaption);
+      const caption = wrapper.find(Caption);
       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`/`FigureCaption` without an anchor, with text under the image', () => {
+    it('renders a `Figure`/`Caption` without an anchor, with text under the image', () => {
       const metadata = {
         abstract: [{
           type: 'paragraph',
@@ -759,7 +736,7 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBeFalsy();
       expect(figure.contains(InlineImage)).toBe(true);
 
-      const caption = wrapper.find(FigureCaption);
+      const caption = wrapper.find(Caption);
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBeFalsy();
@@ -769,9 +746,9 @@ describe('ContentNode', () => {
       expect(figure.html()).toMatchInlineSnapshot(`
         <figure-stub>
           <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
-          <figurecaption-stub centered="true">
+          <caption-stub centered="true" tag="figcaption">
             <p>blah</p>
-          </figurecaption-stub>
+          </caption-stub>
         </figure-stub>
       `);
     });
@@ -791,9 +768,9 @@ describe('ContentNode', () => {
       }, references);
       expect(wrapper.find(Figure).html()).toMatchInlineSnapshot(`
         <figure-stub>
-          <figurecaption-stub title="foo">
+          <caption-stub title="foo" tag="figcaption">
             <p>blah</p>
-          </figurecaption-stub>
+          </caption-stub>
           <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
         </figure-stub>
       `);
@@ -816,7 +793,7 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBe('foo-figure');
       expect(figure.contains(InlineImage)).toBe(true);
 
-      expect(wrapper.find(FigureCaption).exists()).toBe(false);
+      expect(wrapper.find(Caption).exists()).toBe(false);
     });
 
     it('renders within a `DeviceFrame`', () => {
@@ -892,7 +869,7 @@ describe('ContentNode', () => {
       }, {})).not.toThrow();
     });
 
-    it('renders a `Figure`/`FigureCaption` with metadata', () => {
+    it('renders a `Figure`/`Caption` with metadata', () => {
       const metadata = {
         anchor: 'foo',
         abstract: [{
@@ -911,15 +888,16 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBe('foo');
       expect(figure.contains(BlockVideo)).toBe(true);
 
-      const caption = wrapper.find(FigureCaption);
+      const caption = wrapper.find(Caption);
       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`/`FigureCaption` without an anchor, with text under the video', () => {
+    it('renders a `Figure`/`Caption` without an anchor, with text under the video', () => {
       const metadata = {
         abstract: [{
           type: 'paragraph',
@@ -937,7 +915,7 @@ describe('ContentNode', () => {
       expect(figure.props('anchor')).toBeFalsy();
       expect(figure.contains(BlockVideo)).toBe(true);
 
-      const caption = wrapper.find(FigureCaption);
+      const caption = wrapper.find(Caption);
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBeFalsy();
@@ -947,9 +925,9 @@ describe('ContentNode', () => {
       expect(figure.html()).toMatchInlineSnapshot(`
         <figure-stub>
           <blockvideo-stub identifier="video.mp4"></blockvideo-stub>
-          <figurecaption-stub centered="true">
+          <caption-stub centered="true" tag="figcaption">
             <p>blah</p>
-          </figurecaption-stub>
+          </caption-stub>
         </figure-stub>
       `);
     });
@@ -1372,6 +1350,33 @@ 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',
@@ -1410,35 +1415,6 @@ 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/FigureCaption.spec.js renamed to tests/unit/components/ContentNode/Caption.spec.js

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