[rdar://30234820] fix: address feedback

Author: marinaaisa

src/components/ContentNode/Caption.vue

@@ -33,8 +33,8 @@ export default {
     },
     tag: {
       type: String,
-      required: false,
-      default: () => 'caption',
+      required: true,
+      validator: v => new Set(['caption', 'figcaption']).has(v),
     },
   },
 };
@@ -44,12 +44,16 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .caption {
-  @include font-styles(documentation-figcaption);
+  @include font-styles(documentation-caption);
 
   &:last-child {
     margin-top: var(--spacing-stacked-margin-large);
   }
 
+  &:has(+ *) {
+    margin-bottom: var(--spacing-stacked-margin-large);
+  }
+
   &.centered {
     text-align: center;
   }
@@ -58,8 +62,4 @@ export default {
 /deep/ p {
   display: inline-block;
 }
-
-caption {
-  margin: 1rem 0;
-}
 </style>

src/components/ContentNode/Figure.vue

@@ -23,9 +23,8 @@ export default {
   },
 };
 </script>
-
 <style scoped lang="scss">
-/deep/ figcaption + * {
-  margin-top: 1rem;
+/deep/ figcaption {
+  --spacing-stacked-margin-large: 1rem;
 }
 </style>

tests/unit/components/ContentNode.spec.js

@@ -112,6 +112,29 @@ describe('ContentNode', () => {
       expect(codeListing.props('content')).toEqual(listing.code);
       expect(codeListing.isEmpty()).toBe(true);
     });
+
+    it('renders a `Figure`/`Caption` 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(Caption);
+      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"', () => {
@@ -753,7 +776,7 @@ describe('ContentNode', () => {
       `);
     });
 
-    it('renders a `FigureCaption` before the image, if it has a title', () => {
+    it('renders a `Caption` before the image, if it has a title', () => {
       const metadata = {
         title: 'foo',
         abstract: [{
@@ -776,7 +799,7 @@ describe('ContentNode', () => {
       `);
     });
 
-    it('renders no `FigureCaption`, if there is a `title`, but no `abstract`', () => {
+    it('renders no `Caption`, if there is a `title`, but no `abstract`', () => {
       const metadata = {
         postTitle: true,
         title: 'Foo',